L'objectif de cette activité est d'apprendre à implémenter des formulaires dans des pages web et à exploiter les informations côté serveur.
1- Préparation
- Afin de se concentrer sur les nouvelles notions, vous devez dupliquer le dossier exercice3 et le nommer exercice4.
L'avantage aussi de dupliquer le dossier est de conserver une version du site qui fonctionne : au niveau méthode de travail, c'est un avantage important.
En effet, il n'est pas rare d'avoir un bug pour lequel il est difficile de trouver une solution. En ayant une version antérieure, il est facile de reprendre une version fonctionnelle !
- Ensuite, il faut renommer le fichier python en exercice4.py.
Fichier index.html
Remplacer le contenu de ce fichier par :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel ="stylesheet" type="text/css"
href= "{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<h1>Accueil de l'exercice 4</h1>
<h1>Indiquer votre nom et votre age</h1>
<form action = "http://localhost:5000/pageBonjour" method="POST">
<p><label>Nom</label> : <input type="text" class='chp' name="Nom"></p>
<p><label>Age</label> : <input type="text" id='chpAge' class='chp' name="Age"> ans</p>
<p><input type="submit" value="Valider"></p>
</form>
</body>
</html>
Fichier page2.html
Remplacer le contenu de ce fichier par :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel ="stylesheet" type="text/css"
href= "{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<h1 > Vous êtes sur la deuxième page </h1>
<p>Bonjour {{nom}}</p>
<p>Vous avez {{age}} ans.</p>
<a href= "{{ url_for('accueil') }}">Vers la page d'accueil</a>
</body>
</html>Fichier exercice4.py
Remplacer le contenu de ce fichier par :
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/")
def accueil():
return render_template("index.html")
@app.route("/pageBonjour", methods=['POST'])
def page_2():
req = request.form
Nom=req['Nom']
Age=req['Age']
return render_template("page2.html", nom=Nom, age=Age)
app.run(debug=True)
Fichier styles CSS
Ajouter les deux styles suivants :
.chp {
background: #88aaff;
border-color: #002b95;
}
#chpAge {
width:50px;
}2- Analyse
2-1 Liens entre les fichiers
L'implémentation d'un formulaire dans l'environnement Flask reprend des notions vues précédemment.
L'envoie du formulaire se fait soit avec la méthode GET, soit avec la méthode POST
Compléter le schéma suivant afin de mettre en évidence les différents liens entre les fichiers et leur signification.
2-1 Méthode GET ou POST ?
Jusqu'à maintenant, à chaque fois que vous avez utilisé l'inspecteur pour observer les requêtes, c'est la méthode GET qui a toujours été utilisée.
La requête du formulaire ci-dessus, utilise la méthode POST.
Consulter cet article sur le site IONOS pour comprendre la différence entre les deux méthodes.
2-3 La notion de class pour les styles css
À noter la différence de marqueur dans le fichier css : pour distinguer un style de classe, c'est un point au lieu d'un # pour un style sur identifiant.
3- Amélioration
a- Vérifier la saisie de l'age côté client
En utilisant l'identifiant chpAge, vérifier avec javascript que l'utilisateur a bien saisi une valeur numérique.
b- Analyser l'age côté serveur
A la réception de la requête, tester la valeur de Age afin d'avoir un message adapté :
- si Age <20 => renvoyer une page web qui affichera à titre d'exemple Vous avez 15 ans, vous pouvez y aller à fond !
- si Age >70 => renvoyer une page web qui affichera à titre d'exemple Vous avez 72 ans, il faudra y aller doucement !
c- Page web qui s'appelle elle-même
Modifier les fichiers afin que lorsque le formulaire est validé, ce soit la même page web qui soit affichée, mais avec les valeurs saisies.