In this tutorial, the presenter demonstrates how to add a record‑deletion feature to a web application using a drag‑and‑drop interface that triggers an AJAX request to a PHP/PDO backend. The video builds on previously covered JavaScript and PHP snippets, moving the database‑interaction code into a dedicated `contenu.php` file and using an `ajaxIn` function to load and refresh the list of records. Elements representing database rows are made draggable via the HTML `draggable` attribute, and standard drag‑and‑drop events (`dragstart`, `dragover`, `drop`, `dragleave`) are attached. The `drop` handler is modified so that, instead of moving the element, it captures the record’s ID and calls `ajaxIn` with an `action` parameter set to `sup`. On the server side, the PHP script reads the `ID` and `action` parameters; if `action` equals `SUP`, it executes a `DELETE FROM glossaire WHERE id=? LIMIT 1` query using PDO, then re‑outputs the updated list. The presenter notes that the implementation is intentionally simple—lacking confirmation dialogs and security checks—and points viewers to a previous video for a more robust deletion flow.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle vidéo où nous allons découvrir une nouvelle astuce. Cette fois, nous allons mettre en place un système de suppression d'enregistrements dans une base de données à travers une instance AJAX exécutée au sein d'une interface permettant le drag and drop. Notez que tous les codes JavaScript que nous allons utiliser dans cette application, nous les avons déjà édités lors de vidéos antérieures. Donc, nous allons juste les copier en leur appliquant les modifications nécessaires pour les adapter à notre besoin. Dans un premier temps, j'ai intégré directement le code qui permet l'interfaçage avec la base de données dans la page PHP. Le code est le suivant. Bien entendu, nous avons déjà traité ce code avant, d'où le résultat suivant sur le navigateur. J'ai aussi pris le soin d'intégrer le code JavaScript qui permet de créer l'instance AJAX qui va interroger le serveur. Le code est le suivant. Là encore, il s'agit d'un code que nous avons déjà traité. La première opération par laquelle on va commencer, c'est lister les enregistrements à l'aide du AJAX et non pas directement à travers le PHP. C'est-à-dire une fois que j'aurai actualisé cette page, tous les enregistrements qui sont affichés ici, ils seront retournés par le script AJAX. Dans le code JavaScript, j'ai bien précisé la page qui s'appelle contenu.php comme étant la page qui contient la réponse. Donc, Tout le code PHP que nous avons intégré ici, on va le déplacer vers la page contenu.php. Comme ceci. Et bien sûr je peux le retirer de cet emplacement. Désormais la page qui est censée nous retourner la réponse du serveur, c'est elle qui contient le code qui permet l'interfaçage avec la base de données et aussi c'est elle qui va lister les enregistrements au sein de la page index.php. Dans cette page maintenant, il suffit d'appeler la fonction Ajaxin au chargement de la page comme ceci. Exécutons. Donc les informations sont affichées instantanément. Nous allons quand même marquer une petite latence de manière manuelle comme ceci. Dans le script PHP, on va appeler la fonction sleep qui va retarder l'exécution du script pendant 1 seconde dans ce cas. Réexécutons. Voilà, dans un premier temps j'ai la GIF animée qui est affichée qui va durer une seconde et ensuite on a la réponse du serveur qui est parvenue juste après. Donc la première partie consacrée à l'affichage des résultats avec AJAX est faite. La prochaine étape maintenant c'est mettre en place le système de drag and drop de telle sorte à glisser les messages dans la corbeille afin de les supprimer. Alors comme d'habitude sur les éléments qui sont draggables on va ajouter l'attribut HTML de draggable. Avec la valeur boolean true. Dans ce cas, ces éléments sont désormais draguables. Quand je les glisse, on constate bien qu'on peut les déplacer. Après, nous allons déclarer les événements qui permettent d'effectuer le drag and drop comme on l'a vu précédemment. Dans le container qui contenait les messages initialement, on va mettre onDragStart et on appelle la fonction start à laquelle on passe l'objet event. Et sur la zone de largage, je vais déclarer les 3 événements restants, à savoir onDragOver égale return over à laquelle on va aussi passer l'objet event. OnDrop, là encore on aura besoin de l'objet event, et onDragLeave qui appelle la fonction leave. Là encore on aura besoin de l'objet event. Maintenant ce qui reste à faire c'est importer le code JavaScript que nous avons édité la dernière fois et qui permet d'exécuter le drag and drop. J'ai déjà ici. Donc là, c'est le code de la dernière fois. Alors je vais copier ces fonctions et je vais les déclarer ici dans le bloc de script. Donc voilà, on va pas toucher la fonction start parce que son effet est presque standard. Le plus important pour nous, c'est qu'on va enregistrer l'ID de l'élément à déplacer. On Autrement dit, identifiant correspondant dans la base de données et qui permet d'identifier l'élément afin de le cibler au moment de la suppression. Pour la fonction hover aussi, bon, il va pas trop changer, sauf que dans mon code CSS, dans ce cas, ça a changé de nom. Alors c'est cblo comme ça. Pour la fonction leave, la classe qui va changer dans ce cas, c'est cblf. Bien sûr, c'est la classe qui va agir sur la forme de la corbeille, qui va ajouter un petit effet pour dire que la corbeille est prête pour accueillir l'élément à supprimer. Voilà ici. Et la fonction qui requiert la modification, c'est la fonction drop. Bon, parce que dans ce cas, quand j'aurai relâché l'élément sur la corbeille, celui-ci doit être supprimé et non pas déplacé comme on a vu la dernière fois. Donc on va récupérer l'objet qui est l'identifiant de l'élément à supprimer. Par contre, on va pas ajouter cet élément en tant qu'enfant parce qu'on va pas le déplacer. Alors on élimine cette ligne. Par contre, on va la remplacer par notre script AJAX, c'est-à-dire l'appel de la fonction qui exécute AJAX qui s'appelle ajaxIn dans ce cas. C'est-à-dire que cette fonction qui s'appelle ajaxIn va assurer la suppression de l'élément et il va aussi afficher les éléments après la suppression. Et pour la classe, c'est toujours cbLf. Voilà. Pour la fonction Ajaxine, dans ce cas, il aura besoin d'un paramètre parce que quand je voudrais supprimer l'élément au sein de la base de données, il faut bien le cibler à l'aide de la clé primaire qui dans ce cas est le ID, qui n'est rien d'autre que l'objet ob que j'ai déjà récupéré. Mais je vais passer un deuxième argument pour ordonner au script de supprimer l'élément. Bon, je vais passer en guise de chaîne de caractères avec la valeur sup. Dans ce cas, il suffit de vérifier si cette chaîne vaut sup. Dans ce cas, j'ordonne la suppression. Sinon, alors c'est forcément l'affichage que je voudrais effectuer. Au moment de la déclaration de la fonction Ajaxine, j'aurai besoin de deux arguments comme ceci. Donc il y a le ID qui dans ce cas l'objet et il y a aussi l'ordre de suppression. Alors je vais les appeler ID et action. Et bien sûr ces éléments-là il faut les passer à travers la méthode send. Donc je mettrai ici ID égal la valeur ID et action égal la variable action. Alors jusqu'ici je crois que tout est bon. Maintenant je vais aller sur le script PHP afin de récupérer ces 2 variables, ça veut dire ID et action. Je vais le faire ici. Maintenant je vais vérifier la valeur de action. Si c'est égal à SUP, c'est-à-dire la valeur que j'ai passée ici au moment de la suppression, voilà. Dans ce cas, je vais exécuter la requête de la suppression. Je mettrai DELETE FROM la table glossaire WHERE id=? LIMIT 1 pour mettre fin à la requête et ne pas se propager sur le reste des enregistrements. Maintenant j'exécute en passant les paramètres qui est la variable ID dans ce cas. Maintenant une fois la variable action vaut SUP, dans ce cas je vais exécuter la requête de la suppression et juste après je vais afficher les informations qui sont stockées dans la base de données. Il faut juste déplacer cette inclusion avant. Ici par exemple. Alors exécutons. Maintenant je vais déplacer par exemple browser et voilà, c'est supprimé. Maintenant il ne reste que 32 éléments. Voilà, même chose pour la première entrée par exemple. Voilà, vous avez remarqué la forme de la corbeille qui change. Bon, par exemple, quand je survole la corbeille avec un élément que j'ai déjà glissé, on a le couvercle qui s'ouvre pour donner l'impression que c'est prêt à accueillir l'élément à supprimer. Bien sûr, quand j'abandonne, il se passe rien, l'élément est conservé. Mais quand je relâche au-dessus de la corbeille, l'élément est supprimé. Alors, vous avez remarqué que cette fois j'ai pas écrit beaucoup de code parce que tous les codes dont on s'est servi, on les a déjà édités avant, mais de manière séparée bien sûr. Et cette vidéo, c'est un petit peu la synthèse de plusieurs choses que nous avons traitées avant. Il convient de signaler que par souci de simplicité, le code de la suppression reste basique et ne prend pas en charge la confirmation de l'action et encore moins la sécurité. Donc je vous renvoie vers la vidéo où j'ai traité la suppression contrôlée d'enregistrement dans une base de données afin de mieux étoffer le code. Merci pour votre attention et à la vidéo prochaine.
