Exercices AJAX - Autocomplétion

Exercice - Autocomplétion AJAX

On souhaite réaliser une architecture complète qui permette de rechercher une commune de France, et de la visualiser sur une carte web. Pour cela, l’utilisateur devra pouvoir écrire le nom d’une commune, et un service web se chargera de renvoyer une liste de communes basées sur cette recherche. Enfin un clic sur l’une des communes récupéréra son emprise géographique que l’on visualisera sur une carte.

Cet exercice se réalise à la suite des exercices Première carte + Géolocalisation et Service web base adresse

Première étape, nous allons réaliser le service web (première partie) :

• créez une nouvelle route "POST /villes" (pas besoin de vue associée ici)
• récupérez la valeur envoyée dans la requête avec $_POST['recherche'] ou Flight::request()->data['recherche'] (nous partons du principe que la donnée devra être envoyée sous la clé recherche)
• si cette recherche n’est pas vide, alors
  • faites une requête qui récupère le nom et le numéro insee des communes qui commencent par la chaîne reçue, limité à 10 résultats
  • utilisez la connexion à la BDD geobase
  • créez un tableau PHP des données
  • retournez le tout en JSON
• retournez un tableau vide si recherche est vide

<?php

Flight::route('POST /villes', function() {
    Flight::json(['id' => 123]);
});

?>

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.

Coté client :

• ajoutez une nouvelle liste <ul id="villes> dans l’entête par exemple, qui contiendra la liste des villes (voir le CSS associé en dessous)
• ajoutez un nouvel événement lors de la saisie au clavier dans le champ texte (événement input)
  • exécutez une requête AJAX de type POST sur votre fichier PHP (web service) en envoyant la valeur actuelle du champ texte (clé recherche)
  • récupérez le résultat JSON de votre service web et stockez-le dans l’application Vue
• utilisez ce tableau de villes pour construire le HTML correspondant dans <ul id="villes>
  • boucle v-for pour générer des balises <li> HTML
  • test v-if pour n’afficher que si la liste n’est pas vide

#villes {
    position: absolute;
    top: 100px;
    left: 0; right: 0;
    z-index: 5000;
    padding: 0;
    background: lightblue;
}
#villes li {
    padding: 10px;
    list-style-type: none;
}
#villes li:hover {
    background: white;
}

Enfin, pour récupérer l’emprise géométrique de notre commune, nous allons modifier notre service web :

• modifiez votre route /villes, pour récupérer une éventuelle donnée insee_ville
• récupérez la géométrie de la commune correspondant au numéro insee dans la BDD
  • champ geometry
  • utilisez la fonction ST_AsGeoJson(geometry) pour récupérer une chaîne geoJSON
  • convertissez la chaîne en objet avec json_decode($string)
  • utilisez AS en SQL pour plus de simplicité
  • retournez le tout en JSON

Puis, coté client :

• ajoutez un événement click sur chaque <li>, en passant en paramètre le numéro insee de la commune
• dans la fonction :
  • videz la liste des villes (pour enlever la liste lors du click)
  • faites appel à votre service web
  • intégrez la géométrie dans la carte, et adpatez l’emprise de votre carte