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']
ouFlight::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
(champsinsee
,nom
)departements
(champsinsee
,region_insee
,nom
)communes
(champsinsee
,departement_insee
,nom
,surface
,geometry
)
- base :
- 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
- exécutez une requête AJAX de type POST sur votre fichier PHP (web service) en envoyant la valeur actuelle du champ texte (clé
- 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
- boucle
#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éeinsee_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
- champ
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