Tutoriel Python - sommaire

Framework Flask et les formulaires

Un template peut correspondre à un formulaire HTML.
Dois-je rappeler qu'un template c'est un document HTML (extension : .htm OU .html) mais le code HTML qu'il contient est enrichi ; certains disent qu'il est dynamique : inclusion de variables, de tests et de boucles.

Rappels sur les formulaires

Pour aborder correctement ce chapitre vous devez maitriser la syntaxe HTML pour un élément FORM.
Je vous invite donc à suivre éventuellement le lien ci-dessous.
Les formulaires HTML

Dans le chapitre en lien il est fait référence souvent à PHP. En effet la solution historique consistait à traiter les données soumissionnées par un formulaire avec le langage PHP. Vous pouvez ignorer ces passages. Le PHP est progressivement abandonné au profit d'autres langages côté serveur.

Un formulaire de connexion

Le code du template "connexion.htm"

Ce fichier est bien sûr enregistré dans le dossier "templates" du répertoire "python_flask".
Notez la valeur de l'attribut "action" de la balise FORM : "/traitement" qui correpond à une route dans "application.py"
L'adresse mail tient lieu d'identifiant comme il est d'usage le plus souvent.
La saisie dans les champs est obligatoire : attribut required.

Les nouvelles "routes" dans "application.py"

La première "route" permet d'ouvrir la page "connexion.htm"
Si soumission des données du formulaire : redirection vers la route "/traitement" qui affiche les données saisies dans le terminal et un message dans le navigateur.

Test

Le terminal windows étant actif, saisir en guise d'url dans le navigateur : localhost:5000/connexion
Remplir les deux champs (le caractère @ est obligatoire pour le premier en raison de son type) puis cliquez sur "connexion".
La barre d'url affiche alors :
http://localhost:5000/traitement?identifiant=dupontjules%40gmail.com&motdepasse=sesame
Toujours dans le navigateur affichage d'un message en gras (du fait du balisage H2) : "Soumission effectuée".
Donc les données saisies sont reprises en paramètres de l'url. Ce qui est tout à fait normal avec la méthode GET.
Cependant c'est génant que des données sensibles soient affichées à l'écran.

Observez maintenant la fenêtre du terminal. Elle affiche entre autres :
ImmutableMultiDict([('identifiant', 'dupontjules@gmail.com'), ('motdepasse', 'sesame')])

La valeur de l'attribut "action" de FORM peut être une variable

Modifiez le code dans "connexion.htm" :

from flask import Flask, render_template, request, url_for
...
<form action = "{{ url_for('traitement')}}" method="get" >
...

Il faut au préalable importer la méthode url_for de la bibliothèque flask.
La méthode url_for est argumentée avec le nom de la fonction qui effectue le traitement des données.

Utilisation de la méthode POST

Nous venons de voir que la soumission de données sensibles via la méthode GET est à éviter puisque ces données sont rajoutées à l'url en guise de paramètres.

Modification dans le formulaire

...
 <form action = "{{ url_for('traitement')}}" method="post" >
 ...

Modification dans le script

Il faut désormais préciser la méthode dans la "route" car par défaut c'est la méthode GET.
Pour récupérer les données soumissionnées il faut maintenant utiliser request.form

Test

La console étant active, tapez en guise d'url : localhost:5000/connexion
Renseignez le formulaire puis cliquez sur le bouton de soumission.
Notez que désormais les données ne sont pas transmises à l'url.
La page web affiche le message et la console affiche les données sous forme d'un dictionnaire.

Un véritable traitement des données soumissionnées

Supposons que toutes les personnes habilitées à se connecter au site utilisent le même mot de passe.
Celui-ci change régulièrement (chaque semaine, par exemple) et est communiqué par mail aux utilisateurs habilités.

Modification du script

Le code de la route "traitement" devient : @app.route("/traitement", methods =["POST"]) def traitement(): vous = request.form print(vous) id = vous.get('identifiant') mp = vous.get('motdepasse') print(id) print(mp) if mp == "sesame" : return f"Bonjour {id}, Vous êtes connecté !" else: return f"{mp} est un mot de passe incorrect !"

Grâce à la méthode get() j'arrive à extraire du dictionnaires les valeurs des différentes clés.
Notez le recours aux chaines de caractères formatées ("f-strings" en anglais) ; chaines retournées au navigateur.

Test

En guise de mot de passe tapez successivement "sesame" puis "bidon" et si vous avez bien codé vous verrez les messages différents dans le navigateur.
Regardez aussi la console !

Pour améliorer l'affichage

Malgré l'utilisation des "f-strings" l'affichage n'est pas esthétique.

Modifions la route

Il y a test du mot de passe saisi.
Si il est correct transfert de l'identifiant à "connexion.htm" Sinon passage du mot de passe à cette page.

Modifions le template

On rajoute à la page "connexion.htm" le code ci-dessous dans la partie BODY, sous le code du formulaire mais on ajoute aussi une règle dans la feuille de style interne. ... h2 {text-align : center; line-height : 30px ; font-size : 20px ; } </head><body> ... {% if utilisateur %} <h2>Bonjour {{utilisateur}}, vous êtes connecté !</h2> {% endif %} {% if motdepasse %} <h2>{{motdepasse}} est un mot de passe incorrect. <br>Contactez l'administrateur du site. </h2> {% endif %} ...

Si la variable "utilisateur" existe affichage du message précisant que vous êtes connecté.
Si la variable "motdepasse" existe affichage d'un message indiquant que le mot de passe n'est plus valide.

Test

Dans la page "connexion.htm" n'apparait d'abord que le formulaire puisque les deux tests retournent false.
Puis après validatation des données saisies un des tests (et un seul) est à true donc affichage d'un message.
Ne consultez plus le terminal, les données saisies ne sont plus affichées dans celui-ci.