Pages dynamiques¹⚓︎

1. Requêtes⚓︎

protocole HTTP

La communication entre clients et serveurs Web utilise le protocole HTTP («Hypertext Transfer Protocol») ou sa version sécurisée HTTPS.

Le protocole HTTP est basé sur des requêtes (demandes) faites par les clients (souvent des navigateurs web) à des serveurs web.

Requête HTTP

Une requête HTTP est constituée :

d’une méthode qui indique l’opération souhaitée,
de l’URL de la ressource à laquelle on applique l’opération,
d’un ensemble d’en-têtes (headers) qui fournissent des informations complémentaires au serveur, par exemple le type de navigateur, et d’un contenu éventuel.
d'un éventuel corps (body) pouvant contenir des données (login, mots de passe, image à uploader...)

Méthodes des requêtes

Les principales méthodes sont :

GET pour récupérer le contenu de la ressource spécifiée par l’URL;
POST pour modifier la ressource spécifiée par l’URL;
PUT pour créer ou remplacer le contenu de la ressource spécifiée par l’URL;
DELETE pour détruire la ressource spécifiée par l’URL.

exemple de requête envoyée par le navigateur Firefox au serveur fr.wikipedia.org

requete1

Réponse du serveur

Le serveur répond à une requête par une réponse qui comporte notamment :

un statut indiquant une erreur éventuelle et
le contenu de la réponse.

Par exemple, le statut 200 indique que la requête a pu être satisfaite, le statut 404 que la ressource demandée est inconnue du serveur. Le navigateur interprète cette réponse et affiche le contenu reçu, ou l’erreur.

exemple de réponse à la requête précédente par le serveur fr.wikipedia.org

requete2

Nous pouvons par exemple faire des requêtes via le module requests de python:

import requests
r = requests.get('https://fr.wikipedia.org/wiki/world_wide_web')
print(r.headers) # Affiche l'entête de la réponse
print(r.text) # Affiche le texte de la réponse

2. Les formulaires⚓︎

2.2 Le principe⚓︎

Définition d'un formulaire

En HTML, un formulaire est un élément qui permet de transmettre des informations à un serveur Web.

Composition d'un formulaire

Il est composé d'un élément <form action="http://domaine/cible" method="GET" > qui contient :

un ou plusieurs widgets, des éléments HTML permettant de saisir les entrées du client et
au moins un élément <button type="submit>Bouton d'envoi</button>.

Fonctionnement d'un formulaire

Un clic sur ce dernier déclenche l'exécution d'une requête HTTP qui va transmettre les données saisies selon les valeurs des attributs action et method de l'élément <form> :

action a pour valeur l'URL du fichier auquel sera envoyé le formulaire. Ce fichier est un programme écrit dans un langage de script comme PHP ou Python, qui va prendre en entrée les paramètres du formulaire transmis par le client, les traiter et générer la page Web en HTML qui lui sera renvoyée.
method peut prendre deux valeurs GET ou POST (en minuscule ou majuscule), ce sont les deux modes de transmission des paramètres du formulaire qui sont deux méthodes distinctes du protocole HTTP :
- avec la méthode GET , les données du formulaire sont assemblées dans une chaîne de paires nom=valeur séparées par le symbole & qui est ajouté à la fin de l'URL après le délimiteur ?. Les données du formulaire sont donc dans l'URL.
- avec la méthode POST les données du formulaire sont transmises toujours dans le corps de la requête. Les données n'apparaissent donc pas dans l'URL.

2.3 la syntaxe⚓︎

Trois balises possibles dans un <form>

Le principal élément permettant la saisie de données dans un champ de formulaire HTML est <input>. Son attribut type permet de vérifier que les données saisies correspondent au type attendu.

Type	Exemple de syntaxe
Texte	`<input type="text" name="t" value="Défaut">`
Email	`<input type="email" name="a" value="defaut@defaut.fr">`
Nombre	`<input type="number" name="n" value="1" min="0" max="10">`
Mot de passe	`<input type="password" name="pwd">`
Cases à cocher	`<input type="checkbox" name="carrots" value="carrots">`
Bouton radio (choix exclusif)	`<input type="radio" value="soup" name="meal">`

L'élément <textarea> permet de saisir un texte de longueur arbitraire et <select> permet de définir une liste déroulante.
Le bouton de soumission d'un formulaire est représenté par un élément de la forme <button type="submit">Envoyer</button>.

Pour aller plus loin

La page https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs décrit les principaux widgets de formulaire et la page https://www.w3schools.com/html/html_form_elements.asp permet de les tester.

Exemple complet

Exemple: Avec le formulaire ci-dessous:

<form action="recherche" method="POST">
Ville <input name="ville" type="text"><br>
<input name="maisons" type="checkbox">maisons seulement<br>
Nb chambres<input name="nbch" type="number" min="@" value="2"><br>
<input type="submit" value="Rechercher">
</form>

La requête est envoyée au serveur lorsque l’utilisateur clique sur un bouton de type submit. Les données du formulaire sont transmises sous la forme nom = valeur pour chaque élément <input> , où nom est la valeur de l’attribut name de l’élément. Lorsque la méthode du formulaire est POST, les données du formulaire sont transmises dans le corps de la requête:

requete3

3. Pages dynamiques⚓︎

3.1 Introduction⚓︎

Langage serveur

Certains langages s’exécutent sur un serveur Web. Lorsque le serveur reçoit les données d’un formulaire d’un client, il peut les transmettre à un script qui pourra les utiliser pour modifier une base de données ou générer à la volée le contenu HTML qui sera retournée au client.

Ces langages serveurs permettent de créer des pages web dynamiques.

Page web dynamique

Une page Web est dite dynamique si son contenu dépend du client qui la demande et de son contexte (temps, espace, plateforme). Par opposition, une page Web est statique si son contenu est le même quel que soit le client et le contexte.

3.2 Exemple avec Flask⚓︎

Flask est un micro Framework permettant de développer des applications Web en Python (langage serveur). Il impose peu de choix prédéfinis au programmeur.

Dans le fichier serveur.py des TP:

Les fonctions sont précédées du décorateur @app.route(chemin,methods=...). Le décorateur est le routeur : si l’URL se termine par chemin et que la méthode est dans la litse passée en paramètre, la fonction sous le décorateur est appelée et peut renvoyer un fichier html via l'instruction render_template(template). On parle de route pour la partie de l’URL correspondant au chemin relatif dans l’application. La fonction est un contrôleur et le template HTML est une vue si on refère au modèle d’architecture logicielle MVC pour Modèle Vue Contrôleur.
Si un formulaire commence par <form action="message" method="POST">, le contrôleur associé peut récupérer les éléments du formulaire grâce à request.form['nomduchamp'].
Si on veut récupérer des paramètres passés par une requête GET, alors il faudra utiliser request.args.get('nomduparametre')
Exemple:

@app.route('/message', methods=['POST'])
def nouveau_message():
    """ Ajoute un message a la conversation """
    message = request.form['Message']  # Extrait le message du formulaire
    # Insere le message à la fin de la conversation
    conversationlist.append(message)
    return redirect('/conversation.html')  # Renvoie la page dynamique

Les templates du TP permettent d'intégrer des valeurs au code HTML grace à des balises particulières délimitées par des accolades. En effet Flask utiliser le moteur de template Jinja pour personnaliser des templates HTML.

Exemple:

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

Cours tiré très largement du manuel NSI 1re Spécialité - Ed. 2021 Hachette et de https://frederic-junier.gitlab.io/parc-nsi ↩

Pages dynamiques1⚓︎