Services web — Compléments CSS

Licence Informatique, semestre 6

Alexandre Niveau — Valentin Lemière

Enseignement des technologies du Web

 

Services web — Compléments CSS

Notes de cours

  • Introduction aux services web
    • SOAP et WSDL
    • Architecture REST
  • Ajax et services web
    • Principes de la same-origin policy
    • Utilisation de JSONP
    • Utilisation de CORS
  • Compléments CSS
    • Préfixes constructeurs
    • Détection de fonctionnalités CSS (et JS)
    • CSS resets et normalize.css
    • Pré-processeurs CSS
  • Bonus : pour les personnes qui seraient intéressées, un cours d’introduction à jQuery. Toutefois, notez bien qu’il n’y aura pas de TP là-dessus et que le TP noté devra être fait en pur JavaScript.

Travail personnel

Objectifs

Les trois exercices de ce TP sont complémentaires : dans le premier, on utilise un service web côté client ; dans le second, on crée un service web ; dans le troisième, on utilise un service web côté serveur.

C'est aussi et surtout l'occasion de manipuler encore du JavaScript et de l'Ajax d'une part, et du PHP/PDO d'autre part.

Exercice 1 — Hiérarchie des lieux

Une proposition de correction est disponible (et une autre, un peu moins satisfaisante).

L'objectif de cet exercice est de manipuler les services web Geonames de hiérarchie des lieux. L'accès en HTTPS à Geonames est payant, et comme votre espace personnel n'étant accessible qu'en HTTPS, la version de base ne peut pas fonctionner. Vous utiliserez donc un proxy local, dont voici la documentation.

Attention :

  1. Regarder et essayer « à la main » les différents services présentés sur la page.
  2. Faire une page HTML qui affiche en Ajax la liste des régions de France (geonameId 3017382).
  3. Faire en sorte que cliquer sur un item remplace la liste courante par la liste des « fils » de cet item (par exemple, cliquer sur une région fait apparaître la liste des départements, etc.)
  4. Ajouter un bouton ou un lien pour permettre à l'internaute de remonter dans la hiérarchie à partir du lieu courant.
  5. Optionnel : ajouter un bouton ou un lien qui permet de lister les voisins géographiques du lieu courant.
  6. Optionnel : ajouter un champ texte, pour pouvoir commencer l'exploration à partir du résultat d'une recherche.

Exercice 2 — Codes postaux

L'objectif de cet exercice est d'implémenter et d'utiliser un service web très simple, qui indique tous les noms de communes françaises correspondant à un code postal donné.

On dispose d'une base de données contenant les communes de France avec leur code postal. Seuls les deux premiers champs nous intéressent ici.

  1. Implémenter le service web demandé : écrire un script PHP qui prend en paramètre GET un code postal, et qui renvoie au format JSON une liste des noms de communes correspondant au code postal donné. Pour le début, on pourra se contenter d'un script de test qui ne connaît que deux ou trois codes postaux, et n'implémenter la gestion de la BD qu'une fois que l'Ajax est au point.
  2. Créer une page HTML contenant un formulaire avec un champ texte destiné à recevoir un code postal. En utilisant votre service web, faire en sorte que lors du remplissage de ce champ, un menu déroulant (select) apparaisse, contenant toutes les communes correspondant au code postal saisi.
  3. Faire en sorte que votre service web puisse être utilisé depuis n'importe quel domaine. Tester en utilisant votre dev et votre prod, ou mieux, utilisez le service de votre voisin·e et vice-versa.
  4. Optionnel : implémenter une autocomplétion du champ « code postal », qui propose à l'internaute des complétions possibles du code postal au fur et à mesure de sa frappe. Cela nécessite une modification du service web et du script côté client.
  5. Optionnel : faire en sorte que si on passe un paramètre callback à votre service, il renvoie du JSONP (en utilisant la fonction callback spécifiée par le paramètre).

Exercice 3 — Un service web qui utilise un service web

Geonames ne comporte pas de service permettant de récupérer directement le lieu « parent » d'un lieu donné : il faut récupérer toute la hiérarchie. Cet exercice a pour objectif d'implémenter un tel service parent. Le client pourra passer un geonameId en GET, et récupérer l'unique parent du lieu correspondant, avec le choix du format (XML ou de JSON).