TP3 AJAX
TP3 AJAX
-
Objectifs
- Apprendre à créer un système de saisie semi-automatique pour afficher la suggestion d’entrée à l’utilisateur.
-
Exercice 01
-
Énoncé
- On considère Une base de données MYSQL qui contient deux tables "gouvernorat" et "delegation". Une délégation appartient à un seul gouvernorat. La structure de cette base de données est la suivante :
- On souhaite créer une application web utilisant la technologie Ajax qui aide l’utilisateur à saisir les gouvernorats à partir d’une boîte à suggestions pour afficher les résultats de la saisie semi-automatique AJAX.
- On propose de créer un formulaire afin que le champ gouvernorat possède une auto-complétion comme le montre le schéma de la figure suivante:
- En saisissant dans le champ gouvernorat, dès la première lettre, une liste déroulante est proposée selon le caractère saisie et ainsi de suite.
- Le ou les caractères saisies par l’utilisateur seront marqués en gras
- Lorsqu’un élément est choisi, les autres disparaissent automatiquement.
- Créer le script js qui utilise jQuery et AJAX, ce script est appelée sur l’événement de keyup du champ de saisie.
- Ce script demande à PHP la liste des pays via AJAX en envoyant la valeur du champ de saisie. En PHP, il lit les noms de gouvernorats dans la base de données qui commence par le caractère entré par l’utilisateur.
- En cliquant sur un élément de la liste suggérée, l’élément est ajouté à la zone de saisie.
- Créer un script PHP qui permet de se connecter à la base de données.
- En code PHP, il récupère les données de la table des gouvernorats où le nom du gouvernorat commence par le caractère transmis par la requête AJAX.
- Après avoir obtenu les résultats de la base de données, il crée le tableau résultant et forme la liste de suggestions de saisie semi-automatique.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 02
-
Énoncé
- Reprenez le premier exercice et ajoutez un champ semi-automatique pour les délégations
- On propose de créer un formulaire afin que les champs gouvernorat et delegation possèdent une auto-complétion comme le montre le schéma de la figure suivante:
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 03
-
Énoncé
- Reprenez l’exercice numéro 02 mais cette fois ci affichez les délégations en fonction du gouvernorat choisi
- On propose de créer un formulaire afin que les champs gouvernorat et delegation possèdent une auto-complétion dépendante comme le montre le schéma de la figure suivante:
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
