Aide pour améliorer ma page supprimer des images
Résolu
flexi2202
Messages postés
3640
Date d'inscription
Statut
Membre
Dernière intervention
-
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention -
bonjour a tous
a présent que le soucis de l upload des images est réglé
je souhaiterais améliorer mon code pour la suppression des images
lorsque je veux supprimer des images de les choisis en cochant les cases
le soucis c est qu une fois supprimer comme on peux voir sur la capture d écran
l image supprimée apparaît de nouveau mais sans photo
voici comment je les sélectionne
et voici ce qui ce passe après que j ai cliquer sur supprimer
voici mon code
a présent que le soucis de l upload des images est réglé
je souhaiterais améliorer mon code pour la suppression des images
lorsque je veux supprimer des images de les choisis en cochant les cases
le soucis c est qu une fois supprimer comme on peux voir sur la capture d écran
l image supprimée apparaît de nouveau mais sans photo
voici comment je les sélectionne
et voici ce qui ce passe après que j ai cliquer sur supprimer
voici mon code
<?php
session_start();
//Affichage des erreurs PHP ( il faut que je te le remette à chaque fois ??!! )
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
//remise au propre des variables
$pseudo = !empty($_GET['pseudo']) ? $_GET['pseudo']: NULL;
$id = !empty($_GET['id']) ? $_GET['id']: NULL;
if(!$id || !$pseudo ){
header('Location:../login-obligatoire-peche-perle.php');
exit;
}
include('base.php');
?>
<!doctype html>
<html lang="en">
<head>
<?php include("include/head.php"); ?>
<link rel="stylesheet" type="text/css" href="./css/magazine.css">
<style>
form{
font-size: 22px;
font-weight: bold;
width: 55%;
margin: auto;
}
input{
width: 35%;
margin-left: 20%;
}
p{
font-size: 22px;
font-weight: bold;
width: 65%;
margin: auto;
}
</style>
</head>
<!-- fin head -->
<!-- debut body -->
<body style="#87CEEB;">
<!-- debut container total-->
<div class="container">
<title>phil le perleur</title>
<!-- debut container entete-->
<div class="container" style=" max-width: 100%;margin:auto;">
<!-- debut banniere -->
<?php include("include/baniere-peche-perle.php"); ?>
<!-- fin banniere -->
<!-- debut menu -->
<?php include("include/menu.php"); ?>
<!-- fin menu -->
<!-- fin container entete-->
<!-- debut body -->
<body>
<form method="post" action="" >
<p> Cochez la (ou les) images que vos désirez supprimer </p>
<?php
$sql = " SELECT * FROM galerie_images WHERE pseudo=? AND id_img=? ";
$datas = array($pseudo, $id);
//Execution de la requete
try{
$requete=$bdd->prepare($sql);
$requete->execute($datas );
}catch(Exception $e){
// en cas d'erreur :
echo " Erreur ! ".$e->getMessage();
echo " Les datas : " ;
print_r($datas);
}
while($dones=$requete->fetch()){
$nom_img = $dones['nom_img'];
?>
<input type="checkbox" name="case[]" id="<?php echo $nom_img;?>" value="<?php echo $nom_img;?>" /> <label for="<?php echo $nom_img;?>" ><img src="./uploads/<?php echo $nom_img;?>" width="80" /> </label><br />
<?php
}
?>
<input type="submit" value="ok" style="width:150px;" />
</form>
<br />
<p>
<br />
<?php
$sql = " SELECT COUNT(*) as entrees FROM galerie_images WHERE pseudo=? AND id_img=? ";
$datas = array($pseudo, $id);
//Execution de la requete
try{
$requete=$bdd->prepare($sql);
$requete->execute($datas );
}catch(Exception $e){
// en cas d'erreur :
echo " Erreur ! ".$e->getMessage();
echo " Les datas : " ;
print_r($datas);
}
$do=$requete->fetch();
$entrees = $do['entrees'];
$nb_lignes = 1;
while ($nb_lignes <= $entrees)
{
// echo ' Cci <' .$nb_lignes ;
$nb_lignes++;
}
if(isset($_POST['case']))
{
foreach($_POST['case'] as $value){
$sql = " DELETE FROM galerie_images WHERE nom_img= :nom_img ";
$datas = array($pseudo, $id);
//Execution de la requete
try{
$requete= $bdd->prepare($sql);
$requete->execute(array( 'nom_img' => $value ));
}catch(Exception $e){
// en cas d'erreur :
echo " Erreur ! ".$e->getMessage();
echo " Les datas : " ;
print_r($datas);
}
unlink("uploads/$value");
echo "L'image a été supprimée <br />";
}
}
?>
</p>
<center> <a href="detail.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>"><span style="font-size:24px; text-align:center;"> Retour sur votre page </span> </a> </center>
<!-- debut pied de page-->
<?php include("include/pied-de-page.php"); ?>
</div>
</div>
<?php include("include/footer.php"); ?>
</body>
<!-- fin du body-->
</html>
13 réponses
-
Salut !
Avant de parler du PHP, ce qui me choque le plus c'est ton HTML. :
- Ton HTML ne peux contenir qu'une et une seule balise <body>;
- Tu ne dois pas mettre de CSS dans ton HTML, utilise la balise <link> et des fichiers .css.
- La balise <center> est également dépréciée, utilise le CSS pour ça.
- Même chose pour l'attribut style.
Ensuite pour ton PHP. D'abord non tu n'as pas à mettre des premières lignes tout le temps. Déjà les ini_set(), ils sont là pour changer à la volé les paramètres de ton php.ini... Le temps que tu es en développement, vas directement modifier le fichier toi-même, ça épargnera ça à ton PHP.
Ensuite pour ton image qui apparait sans exister... Elle apparait forcément quelque part. Et comme c'est ta query SQL qui est responsable des images à afficher, Vérifie que ton image disparait bien de ta base de données (// que ta query DELETE marche bien).
Essaye au maximum de travailler avec des valeurs comme des ID chiffrés à la place du nom des images, côté SQL, c'est plus sûr.
Désolé de pas pouvoir te pointer l'erreur du doigt directement, j'ai un peu de mal à voir d'où ça peut venir, bon courage !
-
ah mince ma réponse n est pas partie
bonjour M3NSONG3
merci pour ton intervention
oui cela est prévu que le css déménage a l extérieur de mon code
par contre je ne comprends pas ceci
Ensuite pour ton PHP. D'abord non tu n'as pas à mettre des premières lignes tout le temps. Déjà les ini_set(), ils sont là pour changer à la volé les paramètres de ton php.ini... Le temps que tu es en développement, vas directement modifier le fichier toi-même, ça épargnera ça à ton PHP.
pour ce qui est des images jordane a trouve la solution encore merci a lui
-
-
Bonjour,
je pense que tu devrais revoir l'ordre de tes lignes de code.
En gros, le code qui se trouve entre les lignes 108 à 128 (environ..) devrait se situer au début de ton script php et pas APRES avoir récupéré la liste de tes images...
Et sinon, si tu veux faire ça plus propre, tu pourrais gérer la suppression des images ( une par une ) en Ajax ( maintenant que tu sais faire... )
En gros, une icone "corbeille" à côté de chaque image
Quand tu cliques dessus ça appel un code JS qui fera un AJAX ( appel vers script php qui fera la requête DELETE dans la bdd + unlink du fichier sur le serveur )
et dans le success de l'ajax, tu "remove" l'image de la page
-
bonjour jordane
merci pour ton intervention
je suppose que tu as regarder mes requêtes , en principe tout devrait être bon
je viens de modifier le code comme tu me l as suggérer mais rien n a changer
ouftiii j adore quand tu me dis a présent que je sais le faire ...
c est vraiment limite de chez limite de chez limite
je pense que par ajax cela va être encore 120 messages
mais je vais aller jeter un œil si je trouve pas un petit code-
On va essayer de le faire en 50 messages cette fois :-)
Déjà, place une icone de "poubelle" ( ou une croix .. ou n'importe quoi montrant que c'est pour supprimer ) à coté de chaque image.
dans le code de cette icone, tu ajouteras un data attribut contenant l'id de l'image en bdd
Ainsi qu'une class fictive ( par exemple : deleteImg ) qui nous attacher cette image à un EVENT sur le onclick
Vu que tu utilises Bootstrap, tu as certainement mis également fontawesome https://fontawesome.com/
Donc tu pourrais faire par exemple
<i class="far fa-trash-alt deleteImg" data-id="<?php echo $id_de_l_image; ?>"></i>
Montres nous ensuite le code html/php de cette page
-
-
nos messages se sont croise jordane
je pense que l on peux faire plus simple en actualisant la page après la suppression de l image
donc demander un header lors du INPUT
après avoir supprimer l image si je rafraîchis l image supprime n est plus présente -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
bon on va essayer an ajax
mais je sens que cela va etre encore dur
merci pour le code
voici donc mon code avec une poubelle
car j ai rien trouve dans la liste des icones de boostrap
le code avec une corbeille a cote de chaque image
<input type="checkbox" name="case[]" id="<?php echo $nom_img;?>" value="<?php echo $nom_img;?>" /> <label for="<?php echo $nom_img;?>" ><img src="./uploads/<?php echo $nom_img;?>" width="80" /> </label> <img src="corbeille.jpg"> <br />
je n ai pas bien compris ceci
dans le code de cette icone, tu ajouteras un data attribut contenant l'id de l'image en bdd
et je ne vois pas trop non plus ou je vais écrire ceci
<i class="far fa-trash-alt deleteImg" data-id="<?php echo $id_img; ?>"></i>
-
voici
<?php session_start(); //Affichage des erreurs PHP ( il faut que je te le remette à chaque fois ??!! ) error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE); //remise au propre des variables $pseudo = !empty($_GET['pseudo']) ? $_GET['pseudo']: NULL; $id = !empty($_GET['id']) ? $_GET['id']: NULL; if(!$id || !$pseudo ){ header('Location:../login-obligatoire-peche-perle.php'); exit; } include('base.php'); ?> <!doctype html> <html lang="en"> <head> <?php include("include/head.php"); ?> <link rel="stylesheet" type="text/css" href="./css/magazine.css"> <style> form{ font-size: 22px; font-weight: bold; width: 55%; margin: auto; } input{ width: 35%; margin-left: 20%; } p{ font-size: 22px; font-weight: bold; width: 65%; margin: auto; } </style> </head> <!-- fin head --> <!-- debut body --> <body style="#87CEEB;"> <!-- debut container total--> <div class="container"> <title>phil le perleur</title> <!-- debut container entete--> <div class="container" style=" max-width: 100%;margin:auto;"> <!-- debut banniere --> <?php include("include/baniere-peche-perle.php"); ?> <!-- fin banniere --> <!-- debut menu --> <?php include("include/menu.php"); ?> <!-- fin menu --> <!-- fin container entete--> <!-- debut body --> <body> <form method="post" action="" > <p> Cochez la (ou les) images que vos désirez supprimer </p> <?php $sql = " SELECT * FROM galerie_images WHERE pseudo=? AND id_img=? "; $datas = array($pseudo, $id); //Execution de la requete try{ $requete=$bdd->prepare($sql); $requete->execute($datas ); }catch(Exception $e){ // en cas d'erreur : echo " Erreur ! ".$e->getMessage(); echo " Les datas : " ; print_r($datas); } while($dones=$requete->fetch()){ $nom_img = $dones['nom_img']; ?> <input type="checkbox" name="case[]" id="<?php echo $nom_img;?>" value="<?php echo $nom_img;?>" /> <label for="<?php echo $nom_img;?>" ><img src="./uploads/<?php echo $nom_img;?>" width="80" /> </label> <img src="corbeille.jpg"> <br /> <?php } ?> <input type="submit" value="ok" style="width:150px;" /> </form> <br /> <p> <br /> <?php if(isset($_POST['case'])) { foreach($_POST['case'] as $value){ $sql = " DELETE FROM galerie_images WHERE nom_img= :nom_img "; $datas = array($pseudo, $id); //Execution de la requete try{ $requete= $bdd->prepare($sql); $requete->execute(array( 'nom_img' => $value )); }catch(Exception $e){ // en cas d'erreur : echo " Erreur ! ".$e->getMessage(); echo " Les datas : " ; print_r($datas); } unlink("uploads/$value"); echo "L'image a été supprimée <br />"; } } $sql = " SELECT COUNT(*) as entrees FROM galerie_images WHERE pseudo=? AND id_img=? "; $datas = array($pseudo, $id); //Execution de la requete try{ $requete=$bdd->prepare($sql); $requete->execute($datas ); }catch(Exception $e){ // en cas d'erreur : echo " Erreur ! ".$e->getMessage(); echo " Les datas : " ; print_r($datas); } $do=$requete->fetch(); $entrees = $do['entrees']; $nb_lignes = 1; while ($nb_lignes <= $entrees) { // echo ' Cci <' .$nb_lignes ; $nb_lignes++; } ?> </p> <center> <a href="detail.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>"><span style="font-size:24px; text-align:center;"> Retour sur votre page </span> </a> </center> <!-- debut pied de page--> <?php include("include/pied-de-page.php"); ?> </div> </div> <?php include("include/footer.php"); ?> </body> <!-- fin du body--> </html> -
Donc:
A la place de ton code actuel:<?php session_start(); //Affichage des erreurs PHP ( il faut que je te le remette à chaque fois ??!! ) error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE); //remise au propre des variables $pseudo = !empty($_GET['pseudo']) ? $_GET['pseudo']: NULL; $id = !empty($_GET['id']) ? $_GET['id']: NULL; if(!$id || !$pseudo ){ header('Location:../login-obligatoire-peche-perle.php'); exit; } //connexion à la bdd require_once('base.php'); //Liste des images de l'utilisateur $sql = " SELECT * FROM galerie_images WHERE pseudo=? AND id_img=? "; $datas = array($pseudo, $id); //Execution de la requete try{ $requete_images=$bdd->prepare($sql); $requete_images->execute($datas ); }catch(Exception $e){ // en cas d'erreur : echo " Erreur ! ".$e->getMessage(); echo " Les datas : " ; print_r($datas); } ?> <!doctype html> <html lang="en"> <head> <?php include("include/head.php"); ?> <link rel="stylesheet" type="text/css" href="./css/magazine.css"> <style> form{ font-size: 22px; font-weight: bold; width: 55%; margin: auto; } input{ width: 35%; margin-left: 20%; } p{ font-size: 22px; font-weight: bold; width: 65%; margin: auto; } </style> </head> <!-- fin head --> <!-- debut body --> <body style="#87CEEB;"> <!-- debut container total--> <div class="container"> <title>phil le perleur</title> <!-- debut container entete--> <div class="container" style=" max-width: 100%;margin:auto;"> <!-- debut banniere --> <?php include("include/baniere-peche-perle.php"); ?> <!-- fin banniere --> <!-- debut menu --> <?php include("include/menu.php"); ?> <!-- fin menu --> <!-- fin container entete--> <!-- debut body --> <body> <form method="post" action="" > <p> Cochez la (ou les) images que vos désirez supprimer </p> <?php while($dones=$requete_images->fetch()){ ?> <div id="img_<?php echo $dones['id'];?>"> <label for="<?php echo $nom_img;?>" > <img src="./uploads/<?php echo $nom_img;?>" width="80" /> </label> <img src="corbeille.jpg" class="imgDelete" data-id="<?php echo $dones['id'];?>"> <br /> </div> <?php } ?> <input type="submit" value="ok" style="width:150px;" /> </form> <br /> <center> <a href="detail.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>"><span style="font-size:24px; text-align:center;"> Retour sur votre page </span> </a> </center> <!-- debut pied de page--> <?php include("include/pied-de-page.php"); ?> </div> </div> <?php include("include/footer.php"); ?> <script> function removeImg(target){ var id = target.getAttribute('data-id'); console.log('ID IMAGE',id); var datas = {id:id}; //données qu'on envoi en POST postAjax('remove_img.php', datas, function(response){ //ici le code en cas de success de l'ajax console.log("REPONSE AJAX",response); //suppression dans la page de l'image document.querySelector('#img_'+id).remove(); }); } function postAjax(url, data, success) { var params = typeof data == 'string' ? data : Object.keys(data).map(function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);}).join('&'); var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xhr.open('POST', url); xhr.onreadystatechange = function(){ if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); } }; xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(params); return xhr; } var imgs = document.querySelectorAll(".deleteImg"); imgs.forEach(elm =>elm.addEventListener("click",event=>{ removeImg(event.target); }) ) </script> </body> <!-- fin du body--> </html>
Il faudra également créer un fichier remove_img.php<?php /** * Fichier : remove_img.php * Script appelé en AJAX pour supprimer le fichier sur le serveur et en bdd */ session_start(); //Affichage des erreurs PHP ( il faut que je te le remette à chaque fois ??!! ) error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE); //Connexion à la bdd require_once('base.php'); //remise au propre des variables $id = !empty($_POST['id']) ? $_POST['id']: NULL; //------------------------------------------// // DECOUPAGE EN FONCTIONS //------------------------------------------// function getImageById($id){ global $bdd; //on récupère le chemin de l'image dans la bdd $sql = "SELECT * FROM galerie_images WHERE id=:id"; $datas = [':id'=>$id]; try{ $requete= $bdd->prepare($sql); $requete->execute($datas); return $requete->fetch(); }catch(Exception $e){ // en cas d'erreur : echo " Erreur ! ".$e->getMessage(); echo " Les datas : " ; print_r($datas); } } function deleteImg($id,$nom_img){ global $bdd; //On supprime l'image en BDD $sql = " DELETE FROM galerie_images WHERE id = :id "; $datas = [':id'=>$id]; //Execution de la requete try{ $requete= $bdd->prepare($sql); $requete->execute($datas); //On supprime le fichier sur le serveur si il existe $image_path = "uploads/$nom_img"; // if(file_exists($image_path)){ unlink($image_path); } echo json_encode('RES'=>'OK'); }catch(Exception $e){ // en cas d'erreur : echo " Erreur ! ".$e->getMessage(); echo " Les datas : " ; print_r($datas); } } //---- FIN FONCTIONS ----------------// $res = []; if( $id ){ $img = getImageById($id); $nom_img = !empty($img['nom_img']) ? $img['nom_img'] : NULL; if($nom_img){ $res['id'] = $id; $res['nom_img'] = $nom_img; $res['delete'] = deleteImg($id,$nom_img); } return json_encode($res); }
-
un tout grand merci jordane , sans toi cela serait très compliqué
je vais prendre le temps quand tout va fonctionner de comprendre ce que tu as fais
car cela a son importance de comprendre
mais franchement si on aurait fait comme pour l upload des images quand je vois la longueur du code
il nous aurais fallu plus de 200 messages
j admire ton don a créer du code comme ca ...
alors je rencontre une première erreur les images ne sont pas affichée
-
petit oubli
while($dones=$requete_images->fetch()){ $nom_img = $dones['nom_img']; // il avait disparu .. ?> <div id="img_<?php echo $dones['id'];?>"> <label for="<?php echo $nom_img;?>" > <img src="./uploads/<?php echo $nom_img;?>" width="80" /> </label> <img src="corbeille.jpg" class="imgDelete" data-id="<?php echo $dones['id'];?>"> <br /> </div> <?php } ?>
-
-
ok super
a présent on voit les images
mais il y a une petite erreur dans le code
j ai essaye de trouver mais je en vois pas
-
ah ben oui a chaque fin il faut un ;
une autre erreur au sujet d une parenthèse
je vois pas trop non plus car il n y a que 2 sur la ligne
-
ah non
j avais oublie le ;
je teste ... -
voila dans le code plus d erreur
mais lorsque je clic sur la corbeille rien ne se passe
je te donne la réponse
-
Dans la réponse.. il n'est pas normal de voir les images...
est-ce bien la ligne "post" que tu as déplié et pas une "get" ??
N'as tu rien qui s'affiche dans la console ? j'ai pourtant mis des consoles.log dans le code Javascript...- Erreur dans le JS (ou dans le php.. selon comment on voit la chose )
Sur la page où il y a le code JS
J'ai utilisédocument.querySelectorAll(".deleteImg")
sauf que la class que j'ai mis dans la ligne de code php est :<img src="corbeille.jpg" class="imgDelete" data-id="<?php echo $dones['id'];?>">
alors, il faut changer l'un ou l'autre.. pour qu'il soit identique à l'autre...
-
-
eh ben dis donc jordane
tu solutionnes très vite le problème
c est un pur bonheur que de voir cela fonctionner de cette manière
encore une fois toutes mes félicitations pour ces connaissances qui m épates
et donc tout est ok et fonctionne comme un charme
du moins avec firefox ...
j ai pas encore tester avec les autres navigateurs
