Programmer une application web

Lier plusieurs pages

Le même objet gestionnaire de requêtes peut bien entendu prendre en charge plusieurs pages, comme l'illustre l'exemple suivant:

Mise en liens de 2 pages avec CherryPy

Ce script dérive directement du précédent. La page renvoyée par la méthode index() contient cette fois une balise-lien : <a href="unMessage"> dont l’argument est l’URL d’une autre page. Si cette URL est un simple nom, la page correspondante est supposée se trouver dans le répertoire racine du site. Dans la logique de conversion des URL utilisée par Cherrypy, cela revient à invoquer une méthode de l’objet racine possédant un nom équivalent. Dans notre exemple, la page référencée sera donc produite par la méthode unMessage().

Les choses vont vraiment commencer à devenir intéressantes avec le script suivant :

Présentation et traitement d'un formulaire avec CherryPy

La méthode index() de notre objet racine présente cette fois à l’utilisateur une page web contenant un formulaire. Comme nous l'avons étudié précédemment, le code HTML inclus entre les balises <form> et </form> peut contenir un ensemble de widgets divers, à l’aide desquels l’internaute pourra transmettre des informations à l'application web et exercer ainsi une certaine activité : champs d’entrée, cases à cocher, boutons radio, boîtes de listes, etc. Pour ce premier exemple, un champ d’entrée et un bouton suffiront :

Exécution du code précédent

Analysons quelque peu le code précédent afin de bien comprendre le traitement d'un formulaire par CherryPy:

• La balise <form>
  Comme nous l'avions vu dans la section HTML-CSS, rappelons que la balise <form> doit contenir deux indications essentielles: l'action à entrendre lorsque le formulaire sera expédié (il s'agit de fournir à l'attribut action l'URL d'une ressource web capable de réceptionner une requête accompagnée d'arguments) et la méthode de transmission (GET ou POST) à utiliser pour transmettre ces arguments. Cette méthode doit être précisée en valeur de l'attribut method.
• Champ d'entrée
  La ligne 9 contient la balise HTML qui définit un champ d’entrée (balise <input>). Son attribut name donne une identification unique au champ d'entrée. Cet identifiant est le nom de la variable transmise à la méthode salutations réceptionnant les données entrées par l'utilisateur et doit avoir le même nom que le paramètre de cette méthode. La valeur de la variable transmise correspondra aux données transmises par l'utilisateur dans le champ du formulaire. Lorsque le navigateur transmettra au serveur la requête HTTP correspondante, celle-ci contiendra donc la variable accompagnée de sa valeur. Comme nous l’avons déjà expliqué plus haut, CherryPy convertira alors cette requête en un appel de méthode classique, dans lequel la variable sera associée à son argument, de la manière habituelle sous Python.
• Bouton d'envoi
  Le «bouton d’envoi» est créé à l'aide de la balise <input type="submit">. Le texte apparaissant sur le bouton est précisé par la valeur de l'attribut value.
• Gestionnaire de requête
  La méthode salutations est la méthode réceptionnant la requête HTTP lorsque le formulaire aura été expédié au serveur. Son paramètre nom recevra l’argument correspondant, reconnu grâce à son étiquette homonyme. Comme d'habitude sous Python, vous pouvez définir des valeurs par défaut pour chaque paramètre (si un champ du formulaire est laissé vide par l’utilisateur, l’argument correspondant n’est pas transmis). Dans notre exemple, le paramètre nom contient par défaut un objet vide : il sera dès lors très facile de vérifier par programme, si l’utilisateur a effectivement entré un nom ou pas.

En expérimentant les scripts décrits jusqu’ici, vous aurez remarqué que divers messages apparaissent dans la fenêtre de terminal où vous avez lancé leur exécution. Ces messages vous renseignent (en partie) sur le dialogue qui s’est instauré entre le serveur et ses clients. Vous pourrez ainsi y suivre la connexion éventuellement établie avec votre serveur par d’autres machines (si votre serveur est relié à un réseau, bien entendu) :

[19/Apr/2020:23:20:39] ENGINE Started monitor thread '_TimeoutMonitor'.
[19/Apr/2020:23:20:39] ENGINE Started monitor thread 'Autoreloader'.
[19/Apr/2020:23:20:39] ENGINE Serving on http://127.0.0.1:8080
[19/Apr/2020:23:20:40] ENGINE Bus STARTED
127.0.0.1 - - [19/Apr/2020:23:20:47] "GET / HTTP/1.1" 200 215 "" "Mozilla/5.0 (Macintosh; Intel 
Mac OS X 10.13; rv:75.0) Gecko/20100101 Firefox/75.0"
127.0.0.1 - - [19/Apr/2020:23:20:53] "GET /salutations?nom=Juliette HTTP/1.1" 200 39 
"http://127.0.0.1:8080/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:75.0) 
Gecko/20100101 Firefox/75.0"

C’est dans cette fenêtre de terminal que vous trouverez également les messages d’erreur (fautes de syntaxe, par exemple) qui se rapportent à tout ce que votre programme met éventuellement en place avant le démarrage du serveur. Si une erreur est détectée en cours de fonctionnement, par contre (erreur dans une méthode gestionnaire de requêtes), le message d’erreur correspondant apparaît dans la fenêtre du navigateur, et le serveur continue de fonctionner. Voici par exemple le message que nous avons obtenu en ajoutant un ‘e’ erroné au nom de la méthode format() de notre script (formate(nom) au lieu de format(nom)):

Erreur détectée à l'exécution du serveur web

Vous pouvez vérifier que le serveur fonctionne toujours, en revenant à la page précédente et en entrant cette fois un nom vide. Cette faculté de ne pas se bloquer complètement lorsqu’une erreur est détectée est extrêmement importante pour un serveur web, car cela lui permet de continuer à répondre à la majorité des requêtes qu’il reçoit, même si certaines d’entre elles doivent être rejetées parce qu’il subsiste quelques petits défauts dans le programme. Ce comportement robuste est rendu possible par l’utilisation de threads.

Notons finalement que l'extinction du serveur Web doit être réalisée directement dans la fenêtre du terminal à l'aide de la commande ctrl+c. Cette commande éteindra le serveur Web et permettra à une nouvelle application d'écouter sur le port précédemment réservé par l'ancienne application Web.

[19/Apr/2020:23:22:17] ENGINE Keyboard Interrupt: shutting down bus
[19/Apr/2020:23:22:18] ENGINE Bus STOPPING
[19/Apr/2020:23:22:18] ENGINE HTTP Server cherrypy._cpwsgi_server.CPWSGIServer(('127.0.0.1', 8080)) shut down
[19/Apr/2020:23:22:18] ENGINE Stopped thread '_TimeoutMonitor'.
[19/Apr/2020:23:22:18] ENGINE Stopped thread 'Autoreloader'.
[19/Apr/2020:23:22:18] ENGINE Bus STOPPED
[19/Apr/2020:23:22:18] ENGINE Bus EXITING
[19/Apr/2020:23:22:18] ENGINE Bus EXITED
[19/Apr/2020:23:22:18] ENGINE Waiting for child threads to terminate...

Exercice 2

Ecrivez une application Web capable de gérer les commandes d'un restaurant spécialisé dans la livraison de pizzas à domicile. Le formulaire de commande devra permettre au client de choisir la taille de sa pizza et composer cette dernière en choisissant un aliment compris dans les trois types de garniture suivants:

• Garniture 1: Ail et oignon, Ananas, Anchois, Artichauts, Asperges, Câpres, Champignons, Crevettes.
• Garniture 2: Fruits de mer, Jambon, Lard, Maïs, Merguez, Oeufs, Olives.
• Garniture 3: Origan, Poivron, 4 fromages, Salami, Salami piquant, Thon, Tomates fraîches.

De plus, le formulaire devra permettre au client d'indiquer ses coordonnées nécessaires à la livraison, comme l'illustre le modèle ci-dessous:

Modèle du formulaire de l'application

A chaque commande réalisée, l'application devra retourner au client une page de confirmation contenant les informations qu'il a entrées ainsi que le nombre total de commandes déjà réalisées sur le site depuis le début de son exploitation comme l'indique le modèle ci-dessous:

Modèle de réponse de l'application

Lors de l'envoi d'un formulaire dûment rempli, l'application transmettra au client une confirmation de sa commande sous la forme d'une page web, comme proposé par le modèle ci-dessus, et créera parallèlement un fichier de texte, destiné aux employés du restaurant, contenant les informations de la commande. Ce fichier, qui prendra comme nom le numéro X de la commande, sera enregistré à l'adresse /annexes/commandes/commandeX.txt.

Si l'utilisateur oublie d'entrer ses coordonnées personnelles, l'application lui retournera un message l'invitant à revenir (à l'aide d'un lien) vers le formulaire de commande et d'y inscrire les informations nécessaires à la livraison de son produit comme l'indique le modèle ci-dessous:

Modèle d'erreur retournée par l'application

Afin de vous aider dans la réalisation de cette application Web, suivez chacune des étapes proposées ci-dessous. Testez à chaque fois le résultat obtenu à la fin d'une étape avant de passer à la suivante:

1. Téléchargez les documents situés dans le répertoire pizza.zip.
2. Modifiez le fichier de configuration de l'application Web de telle sorte qu'elle écoute sur le port 8888 de votre machine.
3. Implémentez la méthode index de l'application Web SitePizza de telle sorte que son invocation retourne le code HMTL du fichier formulaire.html situé dans le répertoire annexes/templates/.
4. Mettez en forme le contenu du fichier formulaire.html dans la feuille de style associée de telle sorte qu'il ait une largeur de 800px, qu'il soit centré au milieu de la fenêtre du navigateur, que sa couleur d'arrière-fond soit bleu clair (#CAE1FF) et qu'il possède un espacement de 10px.
5. Insérez l'image pizza.gif dans le titre h1 du fichier formulaire.html de telle sorte que sa largeur soit de 75px.
6. Complétez le formulaire du fichier formulaire.html de telle sorte qu'il soit géré par la méthode commande et que les noms des arguments de cette méthode correspondent à ceux des variables récupérant les différentes entrées de l'utilisateur via le formulaire.
7. Implémentez la méthode commande de telle sorte qu'elle retourne le code du fichier reponse.html situé dans le répertoire annexes/templates/ après l'avoir formaté en remplaçant chacune des balises qu'il contient par les valeurs entrées dans le formulaire précédemment paramétré.
8. Dans le constructeur de l'application Web, définissez un compteur initialisé à 0 et incrémenté à chaque appel de la méthode commande. Modifiez le code du fichier reponse.html et de la méthode commande de telle sorte que ce compteur vienne s'afficher dynamiquement dans le dernier paragraphe de la réponse générée par l'envoi des valeurs du formulaire à l'application web.
9. Modifiez le code de la méthode commande de telle sorte qu'un fichier commandeX.txt (où X correspond au numéro de la commande traitée) soit créé dans le répertoire annexes/commandes/ avec les informations de la commande au format "Une pizza {size} avec {gar1}, {gar2}, {gar3} a été commandée par {client} à l'adresse {lieu}" (où les différentes balises correspondent aux valeurs associées à la commande traitée).
10. Complétez le fichier erreur.html situé dans le répertoire annexes/templates/ de telle sorte qu'il retourne un message d'erreur à l'utilisateur qui n'aurait pas entré les coordonnées de livraison lors de sa commande. Ce fichier devra avoir le même style que les deux autres pages générées par l'application Web et devra permettre à l'utilisateur de retourner au formulaire à l'aide d'un lien hypertexte (voir modèle ci-dessus).

Solution

La solution de l'exercice peut être téléchargé ici. Notez que l'avant-dernière ligne du script pizza.py assure que le répertoire racine du site soit bien le répertoire courant.

Afficher la solution | Masquer la solution