Travaux pratiques de M2105 Web dynamique L objectif des séances de TP du module M2105 est de créer un mini site web d annuaire permettant à différents utilisateurs de gérer leurs contacts. Les informations concernant les utilisateurs et les contacts seront sauvegardées dans une base de données. Le site permettra entre autres d ajouter de nouveaux contacts, d effectuer des recherches ou encore de localiser les contacts. L accès au site sera protégé par un mot de passe. On souhaite mémoriser les informations suivantes concernant un contact : son nom, son adresse mail, son numéro de téléphone et son adresse postale. Rendu du code À la fin du module vous enverrez par mail à votre enseignant le code source (commenté) de votre site web dans une archive M2105_VOTRE_NOM.tgz. Votre code source se trouvant dans votre répertoire /public_html/m2105, la commande tar suivante permettra de créer l archive contenant ce répertoire : $ cd ~ / p u b l i c _ h t m l $ t a r c z f M2105_VOTRE_NOM. t g z M2105 Vérifiez que l archive contient bien tous les fichiers attendus en utilisant la commande ci-dessous : $ t a r t z f M2105_VOTRE_NOM. t g z Les adresses mail des trois enseignants sont : pour le groupe G1 : mamadou.sow@lipn.univ-paris13.fr pour le groupe G2 : sami.evangelista@lipn.univ-paris13.fr pour le groupe G3 : mejri@univ-paris13.fr La date limite de rendu est fixée au lundi 20 Juin. Quelques indications avant de commencer le TP : Vous créerez un répertoire /public_html/m2105 dans lequel vous placerez tous les fichiers de votre site web. Un serveur apache s exécute sur votre machine. Vous pouvez accéder à votre site via l URL suivante : http://localhost/~votre_login/m2105 Tous les scripts python de votre site web devront produire des pages HTML bien formées, c est-à-dire respectant la structure ci-dessous avec un en-tête contenant le titre de la page (ce qu affiche le navigateur dans la barre de titre) et un corps (ce qui apparaît dans la fenêtre du navigateur) : <!DOCTYPE html > <html > <head> < t i t l e >Le t i t r e de l a page < / t i t l e > <meta c h a r s e t ="UTF 8"> < / head> <body> Le c o r p s de l a page < / body> < / html> Tous les scripts python de votre site web devront contenir l habituel shebang avec un commentaire indiquant le type d encodage utilisé : 1 / 10
#! / u s r / b i n / p y t h o n # * c o d i n g : u t f 8 * Vous aurez à écrire certaines fonctions qui seront réutilisées à plusieurs endroits dans les scripts de votre site. Ces fonctions seront placées dans un fichier fonctions.py. Pour pouvoir ensuite utiliser une des ces fonctions dans un script mon-script.py, il est nécessaire d importer le module fonctions à l aide de la fonction import_module du module apache de mod_python. Par exemple : Dans le fichier fonctions.py : def b o n j o u r ( nom ) : return " b o n j o u r à t o i " + nom Dans le fichier mon-script.py : from mod_python import apache f o n c t i o n s = apache. import_module ( " f o n c t i o n s " ) def i n d e x ( r e q ) :... r e q. w r i t e ( f o n c t i o n s. b o n j o u r ( " machin " ) ) L outil bugzilla intégré à firefox vous permettra de déboguer vos scripts et d analyser les messages échangés entre firefox et le serveur. Avec la version de firefox installée à l IUT, vous pouvez l activer et le désactiver en cliquant sur l icône de l insecte en haut à droite de la fenêtre. Exercice 1 Script serveur de test n 1 Objectif : créer un premier script de test test-premier.py. qui affiche le texte Voici mon premier script de développement web! dans une page ayant le titre Mon premier script. 1. Créer d abord un fichier test-premier.html contenant le code HTML nécessaire. Tester ensuite dans le navigateur (à l URL http://localhost/ VOTRE_ID/M2105/test-premier.html) que la page s affiche correctement. 2. Créer ensuite le script test-premier.py (contenant une fonction index, comme vu en cours) qui affiche le contenu de la page test-premier.html (en copiant directement son contenu dans le script). Exercice 2 Fonction d écriture du code HTML Objectif : ajouter dans le fichier fonctions.py une fonction codehtml définie comme ceci : def codehtml ( titre, corps ):... return... La fonction doit retourner une chaîne de caractères contenant le code HTML adéquat avec les balises html, head,... Par exemple, en appelant cette fonction avec les paramètres "Le titre de la page" et "Le corps de la page", elle retournera le code HTML se trouvant en première page. Cette fonction devra être appelée une unique fois par tous les scripts qui générent des pages HTML. 2 / 10
1. Ajouter dans le script test-premier.py du premier exercice un import du module fonctions comme montré précédemment. 2. Modifier le code du script test-premier.py afin qu il fasse appel à la fonction codehtml. 3. Tester dans le navigateur que le script test-premier.py s exécute toujours correctement en produisant le même résultat. Exercice 3 Script serveur de test n 2 Objectif : créer un script test-champs.py qui génère une page HTML contenant une table avec les noms et les valeurs des différents champs de l en-tête de la requête HTTP du client. FIGURE 1 Table générée par test-champs.py Exercice 4 Script serveur de test n 3 Objectif : créer un script test-puissances.py qui prend deux paramètres entiers depuis l URL (n et p) et génére une page HTML contenant une table avec la liste des puissances de 1 à p pour tous les nombres allant de 1 à n. La table contiendra n lignes et p colonnes. La case à la i ème ligne et à la j ème colonne contiendra la valeur i j. Si un des deux paramètres n est pas fourni, le script doit uniquement afficher un message d erreur indiquant le paramètre manquant. On fera l hypothèse que les paramètres fournis sont toujours des entiers. FIGURE 2 Table générée par test-puissances.py pour n=4 et p=6 1. Utiliser la fonction range pour parcourir une liste d entiers. Voici, par exemple, une boucle for qui parcoure tous les entiers de 1 à 10 : for i in range(1, 11):... 2. Utiliser la fonction int pour convertir une chaîne de caractères en un entier. Exercice 5 Formulaire d appel du script serveur de test n 3 Objectif : créer un script form-puissances.py qui génére un formulaire HTML contenant deux zones de texte permettant de saisir des valeurs pour les entiers n et p de l exercice précédent. La 3 / 10
FIGURE 3 Formulaire généré par form-puissances.py soumission du formulaire devra appeler le script test-puissances.py et lui envoyer les valeurs de ces deux entiers. On fera l hypothèse les valeurs saisies par l utilisateur seront toujours des entiers. 1. Tester le formulaire avec les deux méthodes : GET et POST. Observer, dans les deux cas, les paramètres d URL et le contenu de la requête envoyée par le client. Exercice 6 Création de la base de données Objectif : créer la base de données des contacts dans postgresql. La base de données contient les deux tables suivantes : UTIL(id_util, login, mdp) La table des utilisateurs du site web avec leurs logins et mots de passe (mdp). CONTACT(id_contact, nom, email, tel, adresse, id_util) La table des contacts des utilisateurs avec leurs informations personnelles. Le champ id_util est une clé étrangère qui référence l utilisateur auquel le contact appartient. La base de données devra initialement contenir deux utilisateurs. Un premier utilisateur dont le login sera root et qui sera l administrateur du site, et un deuxième utilisateur avec un login de votre choix qui sera un utilisateur avec des droits restreints. Par la suite, pour déterminer si un utilisateur est l administrateur on se basera sur son identifiant : un identifiant de 1 signifie que l utilisateur est l administrateur et toute autre valeur signifie que l utilisateur a des droits restreints. 1. Écrire dans un fichier init-bd.sql les instructions SQL qui permettront de supprimer les deux tables si elles existent déjà, de les (re)créer et d insérer les deux utilisateurs dans la table UTIL. Dans l interpréteur psql, la commande \i <fichier> permet d exécuter les commandes d un fichier. 2. Utiliser le type serial pour les deux champ id_util et id_contact. Ce type correspond à un entier auto-incrémenté. Lors de l insertion d un tuple dans la table, la valeur d un champ serial n a pas à être précisée : elle est automatiquement fixée par le SGBD à la valeur du champ du dernier tuple inséré incrémenté de 1. 3. Dans la table UTIL le login et le mot de passe seront des chaînes de caractères de 20 octets au maximum. 4. Dans la table CONTACT, le nom, l email et l adresse seront des chaînes de caractères de 100 octets au maximum. Le téléphone sera une chaîne de 10 octets. Exercice 7 Formulaire de connexion au site Objectif : créer un script de génération du formulaire de connexion au site : form-connexion.py. Le formulaire généré contient deux champs prévus pour la saisie du login et du mot de passe ainsi qu un bouton de soumission du formulaire. La soumission du formulaire redirigera l utilisateur vers la page connexion.py (cf. exercice suivant) qui vérifera le mot de passe saisi. Exercice 8 Script de connexion au site 4 / 10
FIGURE 4 Le formulaire de connexion au site généré par form-connexion.py Objectif : créer un script connexion.py permettant de vérifier que le login et le mot de passe saisis dans le formulaire de connexion correspondent bien à un login et un mot de passe de la base de données. Si ce n est pas le cas, le script affichera un message d erreur avec un lien vers le formulaire de connexion. Si le login et le mot de passe sont corrects, le script affichera un lien menant au menu du site (menu.py). Pour l affichage du message d erreur, on distinguera deux cas : Le login saisi n existe pas dans la base de données. Le login existe mais le mot de passe saisi ne correspond pas à celui associé au login dans la base de données. 1. Ajouter dans fonctions.py une fonction connexionbd (sans paramètre) qui retournera un objet de connexion à la base de données en utilisant la fonction connect du module psycopg2. Les paramètres de connexion à votre base de données sont : host=aquanux (Le serveur postgresql se trouve sur le serveur aquanux.) dbname=votre-login-linux login=votre-login-linux password=votre-mot-de-passe-linux La fonction connexionbd devra être utilisée dans tous les scripts qui accèdent à la base de données. 2. Ajouter dans fonctions.py une fonction lien définie de la forme suivante : def lien(url, texte ):... return... La fonction lien retournera sous forme de chaîne de caractères l élément HTML correspondant à un lien vers cette url. Le paramètre texte contiendra le texte du lien. Cette fonction devra être utilisée pour tout lien apparaissant dans une page. Exercice 9 Ouverture d une session Objectif : démarrer une session lorsque l utilisateur se connecte. Dans les scripts que nous écrirons par la suite il sera parfois nécessaire de retrouver l identifiant et le login de l utilisateur qui s est connecté. Nous allons pour cela démarrer une session lorsque l utilisateur se connecte avec succès. Deux variables devront être associées à la session démarrée : id_util = l identifiant de l utilisateur qui vient de se connecter login = son login 1. Pour tester que la session est bien démarrée et enregistrée auprès du serveur, il faut inspecter les cookies envoyés par le serveur au client lors de la connexion. On devrait normalement voir un cookie appelé pysid et contenant un identifiant de session attribué par le serveur. Exercice 10 La page de menu Objectif : créer le script de génération de la page de menu de notre site web : menu.py. Cette page affichera le login de l utilisateur et contiendra la liste de liens hypertexte suivante : 5 / 10
Ajout d un contact : lien vers form-ajout.py Liste des contacts : lien vers liste.py Déconnexion : lien vers deconnexion.py Les scripts ciblés par ces liens seront créés dans les exercices suivants. D autres liens seront également ajoutés au menu. FIGURE 5 Le menu de l utilisateur root généré par menu.py Exercice 11 Déconnexion du site Objectif : créer un script deconnexion.py qui déconnectera l utilisateur en supprimant la session actuelle, puis le redirigera vers le formulaire de connexion. 1. Le module util de mod_python contient une fonction redirect qui stoppe le script en cours d exécution et redirige vers une URL. Cette fonction prend en paramètre la requête ainsi que la page de redirection. Par exemple pour rediriger vers la page de menu : from mod_python import util def index(req ):... util.redirect (req, "menu.py") Observer les échanges entre le client et le serveur lors de l appel du script deconnexion.py. Quel est le code de retour HTTP quand le serveur effectue une redirection? Que fait alors le client? Exercice 12 Formulaire d ajout d un contact Objectif : créer le script de génération du formulaire d ajout d un contact : form-ajout.py. Ce formulaire contiendra des zones de texte pour la saisie des différents champs d un contact et un bouton de soumission du formulaire. La soumission du formulaire redirigera vers le script ajout.py. FIGURE 6 Formulaire d ajout d un contact généré par form-ajout.py Exercice 13 Ajout d un contact à la base de données Objectif : créer le script d ajout d un contact : ajout.py à la base de données. Ce script insérera dans la base le nouveau contact saisi dans le formulaire de l exercice précédent et affichera un message de confirmation. 6 / 10
FIGURE 7 Ajout d un contact 1. Pour tester que l insertion dans la table fonctionne bien, aller dans l interpréteur psql et effectuer des requêtes select pour voir le contenu de la table contact. Exercice 14 Script client de test n 1 Objectif : programmer une calculatrice dans un fichier test-calculatrice1.html. La page contient deux champs de texte pour les opérandes, une liste avec quatre opérateurs (+, -, *, et /) et un bouton. Lors d un clic sur ce bouton, le résultat de l opération est affiché dans un troisième champ de texte (voir Figure 8, image de gauche). FIGURE 8 Une calculatrice en HTML + Javascript Exercice 15 Script client de test n 2 Objectif : modifier la page de l exercice précédent afin que le résultat de l opération ne soit plus affiché dans une zone de texte mais directement dans le corps de la page HTML (voir Figure 8, image de droite). La page devra être sauvegardée dans le fichier test-calculatrice2.html. Exercice 16 Validation du formulaire d ajout Objectif : modifier le script form-ajout.py afin d inclure au formulaire du code JavaScript permettant de vérifier avant la soumission du formulaire que : Le nom est renseigné. Si le téléphone est renseigné, c est une suite de 10 caractères numériques. Si l email est renseigné, il est bien de la forme nom@domaine.tld. Si une de ces conditions n est pas respectée, la soumission du formulaire devra être annulée. 1. Utiliser les méthodes charat et indexof pour analyser le numéro de téléphone et l adresse email. charat permet de récupérer un caractère à l intérieur d une chaîne. Les caractères sont numérotés à partir de 0. La méthode indexof permet de récupérer la position d un caractère à l intérieur d une chaîne. La méthode retourne -1 si le caractère n est pas trouvé dans la chaîne. Elle a un second paramètre optionnel qui indique la position à partir de laquelle la recherche est effectuée. Par exemple : var str = " abcdagh"; alert(str.charat (2)); / / a f f i c h e " c " alert(str.indexof("a")); / / a f f i c h e 0 alert(str.indexof("d")); / / a f f i c h e 3 alert(str.indexof("a", 1)); / / a f f i c h e 4 alert(str.indexof("e")); / / a f f i c h e 1 7 / 10
Exercice 17 Liste des contacts Objectif : créer un script liste.py qui génére la liste des contacts de l utilisateur connecté. Seul le nom du contact apparaîtra dans la liste. Une zone de texte en haut de la page permettra de filtrer les contacts afin de ne voir que ceux dont le nom contient les caractères saisis. Chaque nom sera un lien vers la page fiche.py?id_contact=id-du-contact. À chaque fois que l utilisateur pressera une touche dans la zone de texte, la liste sera automatiquement actualisée (sans recharger la page) en fonction du nom saisi. FIGURE 9 Liste des contacts générée par liste.py 1. Écrire d abord un script affiche-liste.py qui prend en paramètre d URL une chaîne de caractères et qui génère la liste HTML des contacts de l utilisateur dont le nom contient cette chaîne. Ce script ne devra pas générer une page HTML complète (avec les balises html, head,... ) mais uniquement l élément ul (liste HTML). 2. Le script liste.py devra générer du JavaScript avec des appels à la page affiche-liste.py à chaque fois que le contenu de la zone de texte est modifié (programmer l événement onkeyup). Le résultat de l appel sera ensuite inséré dynamiquement dans la page. Exercice 18 Fiche d un contact Objectif : créer un script fiche.py qui affiche les informations concernant un contact dans une table HTML. L identifiant du contact affiché est reçu via le paramètre d URL id_contact. L email affiché sera un lien permettant d envoyer un mail au contact. FIGURE 10 Deux fiches générées par fiche.py 1. Il se peut que, lors de son insertion dans la base de données, le téléphone, l email ou l adresse n ait pas été renseigné. La table devra uniquement contenir des lignes pour les champs qui ont été renseignés. 2. Un lien avec une cible de la forme mailto:mail@domaine.tld permet d ouvrir le logiciel de messagerie par défaut du système afin d envoyer un mail à l adresse indiquée. Exercice 19 Suppression d un contact 8 / 10
Objectif : ajouter sur la fiche d un contact la possibilité de supprimer le contact via un lien Suppression du contact. Ce lien pointera vers le script suppression.py?id_contact=id-du-contact. Ce script supprimera de la base de données le contact dont l identifiant est reçu en paramètre d URL puis redirigera l utilisateur sur la liste des contacts (liste.py). Exercice 20 Géocodage de l adresse d un contact Objectif : ajouter des coordonnées GPS à la base de données. Les coordonnées GPS d un contact (latitude et longitude) seront nécessaires lorsque nous programmerons la localisation d un contact sur une carte. En effet l adresse sera alors inutile. 1. Modifier le script de création de la base de données (init-bd.sql) afin d ajouter les deux champs latitude et longitude à la table contact. Ces deux champs seront de type real. 2. Recréer la base de données. 3. Copier le fichier suivant dans le répertoire du site web : http://www.lipn.univ-paris13.fr/~evangelista/cours/m2105/geocodage.py Ce fichier contient une fonction geocodage qui prend en paramètre une adresse, interroge un serveur de géocodage et retourne : None si l adresse n a pas été trouvée par le serveur ou un couple (latitude, longitude) correspondant à l adresse si le serveur a bien trouvé l adresse. 4. Utiliser cette fonction pour modifier le script ajout.py afin que, lors de l insertion d un nouveau contact, la latitude et la longitude correspondant à son adresse soient également enregistrées dans la table. Exercice 21 Script de test des cartes Objectif : créer une page test-carte.html contenant une carte de dimension 600 400 pixels centrée sur la position GPS de l IUT (latitude = 48.9559156, longitude = 2.3388115999999854). Un marqueur sera également positionné sur cette position. Lors d un clic sur le marqueur une popup apparaîtra avec un lien vers le site web de l IUT (http://www.iutv.univ-paris13.fr). FIGURE 11 La carte de test test-carte.html Exercice 22 Localisation d un contact 9 / 10
Objectif : modifier le script fiche.py afin que la fiche du contact contienne aussi une carte permettant de localiser le contact. La carte contiendra un marqueur localisé sur l adresse du contact et sera initialement centrée sur cette adresse. Si le contact n a pas pu être localisé (ou si son adresse est inconnue), la carte ne sera pas affichée : un message indiquant le problème sera affiché à la place. FIGURE 12 Modification de la fiche d un contact avec l ajout de la localisation Exercice 23 Localisation de tous les contacts Objectif : ajouter au menu du site un lien Localisation des contacts pointant vers le script localisation.py qui génére une page contenant une carte avec un marqueur pour chaque contact de l utilisateur. Lors d un clic sur le marqueur, une bulle apparaîtra avec un lien pointant vers la fiche du contact et avec pour texte le nom du contact. FIGURE 13 Carte générée par localisation.py 10 / 10