Astuces pratiques de développement Web

Auteur: Mohamed CHINY Durée necessaire pour le cours de Astuces pratiques de développement Web Niveau recommandé pour le cours de Astuces pratiques de développement Web Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz non disponibles pour ce cours

Page 9: Suppression de données avec drag and drop via AJAX et PHP-PDO

Toutes les pages

Suppression de données avec drag and drop

L'utilité d'AJAX dans ce système

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à.

Passons à la pratique