TP

Zone de rendu

Résliser un compte rendu de ce TP en html/css.

1. Lancer un serveur web

Exercice 1

1. Ouvrir dans un navigateur l’URL http://localhost:9000/conversation.html
2. Télécharger le fichier fichier compressé zip ici. Le décompresser (extraire) et copier son contenu dans le répertoire du TP.
3. Dans visual studio code, ouvrir le dossier contenant le fichier serveur.py.
4. Exécuter le fichier serveur.py (si vous avez une erreur exécuter la ligne commande suivante pour installer flask python -m pip install flask). Retourner dans le navigateur et actualiser la page.
5. Que se passe-t-il si l’on tape un message et que l’on clique «Envoyer»?

2. Créer une page dynamique

Exercice 2

Les pages d’un service Web, par exemple un site de e-commerce, ne sont pas des documents statiques stockés dans des fichiers que le serveur peut simplement envoyer au client (le navigateur Web). Elles sont calculées par le serveur Web, en général à partir de patrons («templates» en anglais) de pages HTML, de données qui sont en général stockées dans une base de données et des paramètres de la requête. Le langage PHP est souvent utilisé à cet effet.

Dans ce TP, nous utilisons à la place la bibliothèque flask de python.

Ici, nous voulons que la page affiche le contenu de la conversation. Celle-ci est représentée dans le serveur par une liste de chaînes de caractères, par exemple ['Hello', 'Bonjour'].

Le serveur combine le patron (ci-dessous) avec cette liste pour produire le contenu HTML envoyé au navigateur (ci-dessous). On voit dans le patron une boucle for qui référence la variable messages et dont le corps est un élément de liste HTML qui affiche le message.

PATRON

<ul>
{% for msg in messages %}
<li>{{ msg }}</li>
{% endfor %}
</ul>

RÉSULTAT

<ul>
    <li>Hello</li>
    <li>Bonjour</li>
</ul>

Le code qui applique le patron est le suivant:

from flask import Flask, render_template
app = Flask("Conversation") # création de l'application web
conversationlist = ['Hello', 'Bonjour'] # la conversation à afficher

@app.route('/conversation.html') # le chemin appelant la fonction index()
def index():
    """ Retourne la page web venant du patron avec la variable conversation
    """
    return render_template('conversation.html', messages=conversationlist) 

app.run(host='0.0.0.0', port=9000, debug=False) # Lance le serveur web

1. Décommenter le patron dans le fichier conversation.html. Arrêter le serveur lancé précédemment arrêtant le programme précédent, puis lancer de nouveau le serveur. Enfin, ouvrir la page http://localhost:9000/conversation.html dans un navigateur.
2. Qu’affiche la page ? Modifier les messages de la conversation dans serveur.py, relancer le serveur et recharger la page pour voir le nouveau résultat.
3. Examiner le code et les commentaires de serveur.py. le décorateur @app.route associe le nom de page Web /conversation.html à la fonction index(). Cette fonction sera appelée lorsque le serveur recevra une requête pour cette page.

3. Répondre à un formulaire

Exercice 3

Examiner le code HTML du fichier conversation.html et identifier la balise <form>. Il s’agit du formulaire de saisie de message. La balise <form> contient un attribut action dont la valeur est l’URL /message qui sera transmise au serveur. Le formulaire contient les balises <input> correspondant au champ de saisie de texte, de nom Message et au bouton d’envoi. Lorsque l’on clique le bouton «Envoyer», le navigateur demande au serveur la page /message et lui communique les valeurs saisies dans le formulaire, ici le contenu du message. Le serveur répond à cette requête en récupérant le texte du message et en renvoyant le contenu de la page dynamique /conversation.html qui va afficher la nouvelle conversation.

1. Décommenter la fonction nouveau_message() ainsi que son décorateur. Relancer le serveur et recharger la page.

2. Que se passe-t-il maintenant si l’on tape un message et que l’on clique «Envoyer» ? Ouvrir plusieurs onglets du navigateur sur la même page. Que se passe-t-il si l’on envoie des messages depuis les différents onglets?

3. Faire les liens (que l'on représentera par des flêches, l'orientation sera importante) entre les éléments de mêmes noms ou représentant les mêmes choses sur les trois visions ci-dessous.

   SERVEUR

   @app.route('/message', methods=['POST'])
   def nouveau_message():
   message = request.form['Message'] 
   conversationlist.insert(0, message)
   return redirect('/conversation.html')
   

   CLIENT (HTML)

   <form class="" action="message" method="post">
   <label for="Message">Message: </label>
   <input type="text" name="Message" value="">
   <input type="submit"></input>
   </form>
   <ul>
   {% for msg in messages %}
   <li>{{ msg }}</li>
   {% endfor %}
   </ul>
   

   CLIENT (RENDU NAVIGATEUR)

   

4. Modifier le fichier serveur.py et le fichier conversation.html pour lister les messages dans l’ordre chronologique et mettre le formulaire à la fin.