Discussion :

[Seurk]

Bonjour,

J'aimerai avoir un confirmation de suppression pour mon site. Ce bouton récupère l'id du post dans la base donnée.
Connaissant très mal JS j'aimerai votre aide. J'ai essayé tout un tas de truc pour le rajouter directement dans la ligne (onClick etc...) mais je renontre des gros souci de syntax.

Auriez-vous des proposition pour intégrer la confirmation à ceci ?

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php echo "<a href="."traitement.php?id=$donnees[id]"."><img class=".'imgsuppr'."  src='".$path_img.$donnees['Supprimer']."' /></a>";?>

(J'espère être dans le bon forum)

Un grand merci

[Watilin]

Effectivement tu as des problèmes de syntaxe : tu mélanges les guillemets. Vérifie le code HTML généré en faisant Ctrl+U sur ta page dans ton navigateur.

Tout d'abord je te conseille de protéger tes URL avec urlencode.

Pour ne pas s'embrouiller le mieux est de faire les choses étape par étape.

• N'hésite pas à utiliser des variables intermédiaires. Moins il y a de concaténation d'un seul coup, plus c'est clair.
• Pour intégrer des variables dans une chaîne, utilise les guillemets doubles ". Quand il n'y a pas de variables, préfère les guillemets simples ' car c'est plus efficace pour l'intepréteur de code PHP.
• En HTML, on peut utiliser les deux types de guillemets, utilise ça à ton avantage.
• En dernier recours, tu peux toujours utiliser le backslash \ pour échapper un guillemet.

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<?php
 
$id = urlencode($donnees['id']);
$supprimer = urlencode($path_img . $donnees['Supprimer']);
 
echo "<a href='traitement.php?id=$id'>
  <img class='imgsuppr' src='$supprimer' />
</a>";
 
?>

En JavaScript il y a une instruction historique pour afficher un message de confirmation : la fonction confirm. Elle renvoie true ou false selon le choix de l'utilisateur, et tu peux utiliser ce booléen directement dans un test if :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if (confirm("Voulez-vous vraiment supprimer ceci ?")) {
  ...
}

Dans un attribut onclick, tu inverseras ce test ( if (!confirm(...))) pour annuler le clic si l'utilisateur a choisi « Annuler ». Pour annuler l'évènement, il faut simplement utiliser l'objet event fourni automatiquement par le onclick, et appeler sa méthode preventDefault.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a ... onclick="if(!confirm('Vraiment ?') { event.preventDefault(); }">
  <img ... />
</a>

Si tu intègres ça directement dans ton code PHP, tu vas avoir un petit problème car ça va te rajouter un « niveau » de guillemets. Pour plus de clarté je te propose de déplacer ce code dans une fonction JS que tu déclares dans un bloc <script> en dehors des balises <?php ... ?> :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script>
 
function confirmer(event) {
  if (!confirm('Thé ou café ?') {
    event.preventDefault();
  }
}
 
</script>

Et du coup, il faut appeler cette fonction, et lui passer l'objet event à la main :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a ... onclick="confirmer(event);">

Voilà, je t'ai donné tous les éléments, à toi de les assembler

Une dernière remarque : il y a certaines façons d'activer le lien sans déclencher le onclick, par exemple en cliquant avec la molette de la souris. Également, si je tape à la main l'adresse traitement.php?id=48125 dans mon navigateur, cela va supprimer sans confirmation le post 48125 (c'est une faiblesse CSRF). Tout ça pour dire que JavaScript n'est pas suffisant pour assurer la sécurité de ton site : le rôle de JS c'est d'améliorer le confort de l'utilisateur. Si j'étais à ta place, je pense que je commencerais par un système de confirmation en deux temps :

1. Le lien de suppression pointe vers une page de confirmation ;
2. la page de confirmation comporte le vrai lien de suppression, qui est de préférence temporaire et généré aléatoirement pour être impossible à deviner (pour casser les attaques CSRF).

Ensuite j'améliorerais ça avec JS (principe d'amélioration progressive) en remplaçant le clic sur le lien 1 par une requête Ajax, qui va donc obtenir le lien 2 (le vrai lien de suppression), et qui enverra une seconde requête Ajax vers le lien 2 si l'utilisateur a confirmé. Et après ça bien sûr, j'afficherais une réponse visuelle pour indiquer à l'utilisateur que la suppression a bien fonctionné.

Lecture bonus :
- Don't let the door hit you, article en anglais qui recommande de proposer une fonction Annuler (au sens « revenir en arrière ») au lieu d'une invite de confirmation.

[Seurk]

Merci de ta réponse détaillée, pour l'instant il s'agit d'un site en local pour une amie. Elle souhait l'utiliser juste pour elle, il n'y a donc pas besoin de sécurité, juste un site clair avec une confirmation de suppression pour éviter les erreurs. Et cela m'apprend en même temps.

Je vais essayer de suivre tes conseils pour la partie en JS.

Juste une question à titre informatif :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php
$id = urlencode($donnees['id']);
$supprimer = urlencode($path_img . $donnees['Supprimer']);
echo "<a href='traitement.php?id=$id'>
  <img class='imgsuppr' src='$supprimer' />
</a>";
?>

Ne faut-il pas utilise urldecode($supprimer) pour que l'image s'affiche ?

Merci.
Bien à toi,

[Seurk]

Sorry double poste,

J'ai donc suivi tes conseils, cela marche parfaitement bien. Un très grand merci de m'avoir donné un peu de ton temps.


Une dernière chose, j'en profite, aurais tu un conseil pour améliorer/simplifier ma syntaxe ? (si jamais c'est possible) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function confirmer(event) {
  if (!confirm('Êtes-vous sur de vouloir supprimer la recette ?') {
    event.preventDefault();
  }
}

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php 
$id = urlencode($donnees['id']);
$suppr = urlencode($path_img . $donnees['Supprimer']);
echo '<a href='."traitement.php?id=$id".' onclick="return confirm(\'Etes vous sur de vouloir supprimer la recette ?\')"><img class='."imgsuppr".' src='.urldecode($suppr).' /></a> ';
?>

(J'ai mis le code complet si jamais d'autres ont le même souci )

[thelvin]

Ne faut-il pas utilise urldecode($supprimer) pour que l'image s'affiche ?

What ? Bien sûr que non, pourquoi on s'emmerderait à encoder une URL correctement pour la redécoder juste après ?

[Seurk]

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

echo '<a href='."traitement_boisson.php?id=$id".' onclick="return confirm(\'Etes vous sur de vouloir supprimer la recette ?\')"><img class='."imgsuppr".' src='.urldecode($suppr).' /></a> ';

En effet, mais si je ne décode pas l'url l'image ne s'affiche pas :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

echo '<a href='."traitement_boisson.php?id=$id".' onclick="return confirm(\'Etes vous sur de vouloir supprimer la recette ?\')"><img class='."imgsuppr".' src='.$suppr.' /></a> ';

En analysant le code avec F12 sur chrome, voici le lien de l'image sans le decodage :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img class="imgsuppr" src="%2Fmiam%2Fupload%2Fsupprimer.png">

Avec le décodage, et donc fonctionnel :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img class="imgsuppr" src="/miam/upload/supprimer.png">

[thelvin]

Bien vu, mais concrètement le résultat est le même que si tu n'avais pas fait urlencode du tout .
Le problème était que urlencode() était mal utilisé.

Ce serait plutôt quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$id = urlencode($donnees['id']);
$supprimer = $path_img . urlencode($donnees['Supprimer']);

Et encore on peut se demander d'où vient $donnees['Supprimer'] et à quoi il sert. Si ça a été renseigné en dur par le code PHP et que ça ne vient pas d'un formulaire HTML, l'encoder n'est pas utile.

[Seurk]

dac, je vais essayer de revoir cela.

Merci de ton aide.

[Watilin]

Le problème était que urlencode() était mal utilisé.

Ce serait plutôt quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$id = urlencode($donnees['id']);
$supprimer = $path_img . urlencode($donnees['Supprimer']);

Exact ! Désolé pour cette erreur, je me suis laissé emporter par mon élan. L'idée derrière cet encodage c'est bien d'empêcher l'utilisateur d'envoyer des chaînes qui peuvent faire faire n'importe quoi à ton script. Comme l'a dit Thelvin, si les données viennent de toi et tu es sûr de ce qu'elles contiennent, alors tu n'as pas besoin d'encoder.