Dans la leçon précédente, nous avons vu comment mettre en place un système de drag and drop avec HTML5 et Javascript. En effet nous avons vu comment déplacer un élément dans une interface graphique de telle sorte à ce qu'il change de parent. Cette fois, nous allons exploiter la puissance du drag and drop afin de supprimer les enregistrements d'une base de données en les glissant sur une sorte de corbeille.
Vu que la suppression doit s'effectuer sans que la page ne soit rechargée (afin d'offrir une interactivité évoluée), alors l'utilisation d'AJAX s'avère évidente. En effet, AJAX permettra d'envoyer des requêtes asynchrones (non bloquantes) au serveur, ce qui permettra à l'utilisateur de continuer à interroger celui-ci même si la réponse de la requête précédente n'est pas encore parvenue au client.
Notez qu'actuellement l'utilisation de l'API Fetch peut remplacer l'utilisation classique de l'objet XMLHttpRequest d'AJAX. Le rendu sera le même mais avec un code plus réduit.
PHP et PDO pour le traitement coté serveur
Si AJAX s'exécute sur le client, alors on aura besoin d'un langage coté serveur pour effectuer la suppression suite aux reqûetes envoyées via XMLHttpRequest, et c'est justement le rôle du PHP dans notre cas. L'utilisation de l'objet PDO est très recommandée pour communiquer avec une base de données à l'aide du PHP en raison de ses nombreux avantages que j'ai expliquéq dans la leçon dédiée à cet objet là.