Exercices AJAX - Complet

Exercice - AJAX#

Info

Cet exercice peut-être réalisé à suite des exercices Géolocation et Géolocalisation + AJAX

On souhaite réaliser un formulaire qui aide un utilisateur à trouver une commune de France. Pour cela, l’utilisateur devra choisir une région, le département et enfin la commune. Celle-ci pourra être visualisée sur une carte.

A chaque étape, les champs de formulaires de type liste déroulante devront se mettre à jour en fonction du choix précédent.

Il vous faut donc réaliser :

HTML (PHP)#

Une page HTML contenant le formulaire initial:

3 <select> (regions, departements, communes)
le premier doit être rempli avec la liste des régions coté serveur (données de connexion en dessous)
les deux autres doivent contenir une seule balise <option> vide. Elles seront remplies en JS.

<form>
    <select id="select_regions">
        <?php 
        // générer les balises options
        //ex: <option value="53">Bretagne</option>
        ?>
    </select>
    <select id="select_departements">
        <option>---</option>
    </select>
    <select id="select_communes">
        <option>---</option>
    </select>
    <button>OK</button>
</form>

Données de connexion à la BDD geobase

Voici les infos pour la base de données MySQL

serveur : u2.ensg.eu
- base : geobase
- utilisateur : geo
- mot de passe : '' (chaine de caractères vide)
- tables (d’autres champs ne sont pas précisés ici):
  - regions (champs insee, nom)
  - departements (champs insee, region_insee, nom)
  - communes (champs insee, departement_insee, nom, surface, geometry)
ou export disponible

Attention, les clés étrangères sont basées sur le champ insee, qui est une chaine de caractères.

PHP - Service Web#

Pour la partie Service Web, il faut pouvoir répondre aux différentes requêtes en fonction de la demande de l’utilisateur :

si la requête envoie regions=N, alors retournez la liste des départements de cette région
si la requête envoie departements=N, alors retournez la liste des communes de ce département
si la requête envoie communes=N, alors retournez l’emprise géographique de cette commune (voir plus bas)

Pour rationnaliser le code, il peut être préférable d’utiliser un champ générique : envoyez type=regions&id=N, type=departements&id=N par exemple.

Retournez les résultats au format JSON avec json_encode($array)

Astuce : pour tester votre service web, utilisez $_REQUEST en PHP, ce qui permet de récupérer les données des requêtes en mode GET et POST à la fois. Vous pouvez donc utiliser les URLs classiquement, même sans page HTML ou code JS.

JavaScript#

Ajoutez une fonction pour l’événement change sur chacun des select (sauf celui des communes)
Quand un événement est déclenché, récupérez la valeur sélectionnée pour le champ
Faites une requête AJAX avec les bons paramètres, afin de recevoir les bonnes données de votre service web
Mettez à jour le champ correspondant (regions=>departements, departements=>communes)
- Créez une balise <option> pour chaque élément du résultat
- Chaque <option> doit avoir un attribut value pour l’identifiant
- Pensez aussi à vider d'abord la liste, si elle a déjà été remplie

Vous pouvez essayer d’écrire un code générique (moins de répétitions). Pour cela, une fonction pourrait être créée avec en paramètre l’id du <select> à remplir, le type de données (regions, departements, etc.), la valeur de l’identifiant en base.

Pour les communes, lors de la validation du formulaire :
- votre service web doit renvoyer l’emprise géographique de cette commune (champ geometry et fonction SQL de la surcouche spatiale de MySQL ST_AsGeoJson(geometry))
- ajoutez ce polygon à votre carte et adaptez son emprise