Traduction
Tutoriel Python - sommaire
Tutoriel Python - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans ce chapitre nous allons modifier plusieurz fois le code du script "application.py" et du template "connexion.htm".
Donc je vous conseille de fermer le serveur web entre deux mises à jour sinon il risque de ne pas prendre en compte
les modifications opérées.
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 : inclusion de variables, de tests et de boucles.
Pour aborder correctement ce chapitre vous devez maitriser la syntaxe HTML relatives aux formulaires.
Je vous invite donc à suivre éventuellement le lien ci-dessous :
les formulaires HTML
Ce template est enregistré dans le dossier 'templates' du répertoire "python_flask" (comme pour le chapitre précédent).
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.
Nous devons compléter le script "application.py" créé lors du chapitre précédent.
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
ainsi qu'un message dans le navigateur.
La fonction d'une route peut porter le même nom que la route.
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 ...
Modifiez le code dans "application.py" :
from flask import Flask, render_template, request, url_for
Modifications dans "connexion.htm"
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 (dans la route).
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. Nous allons donc substituer la méthode POST !
...
<form action = "{{ url_for('traitement')}}" method="post" >
...
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.
Modifions la fonction "traitement()".
Il faut désormais préciser la méthode dans la "route" en effet par défaut c'est la méthode GET.
Pour récupérer les données soumissionnées il faut maintenant utiliser request.form
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") pour l'affichage.
...
127.0.0.1 - - [16/Aug/2024 18:10:55] "POST /traitement HTTP/1.1" 200 -
ImmutableMultiDict([('identifiant', 'darchevillepatrick@aol.com'), ('motdepasse', 'bidon')])
darchevillepatrick@aol.com
bidon
127.0.0.1 - - [16/Aug/2024 18:11:26] "POST /traitement HTTP/1.1" 200 -
Il serait préférable que le message ("vous êtes connecté ..." Ou "Mot de passe incorrect") soit
affiché dans le template "connexion.htm" à la suite du formulaire.
Il faut donc rediriger vers "connexion.htm" les données produites par la route "traitement".
Il faut réécrire la fonction "traitement()" dans la route du même nom !
Notez une syntaxe plus simple pour récupérer les valeurs saisies dans les champs du formulaire : request.form['nomChamp']
Il n'y a plus d'instructions print() (donc plus d'affichages dans le terminal)
On retourne au template "connexion.htm" "id" (qui devient "utilisateur) OU "mp" (qui devient "motdepasse").
Rajout dans le code de ce template (sous le code du formulaire) :
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.
Donc aucun des deux messages n'apparait tant qu'il n'y a pas eu soumission.
Après soumission un des deux messages apparait !
À vous de "bosser" ; vous devez réaliser une calculatrice en ligne.
Si vous avez compris ce qui précède dans ce chapitre, vous ne devriez pas avoir de problème.
Il faut créer un nouveau template : "calculatrice.htm"
Dans le traitement n'oubliez pas de convertir les chaines numériques en nombres.
La dernière instruction de la fonction "calculer()" de la route "/calculer" :
return render_template("calculatrice.htm",operation = ope, premier = n1, deuxieme = n2, resultat =res)
Donc on retourne au template "calculatrice.htm" les détails de l'opération et son résultat.
Dans le chapitre 21 qui porte sur la technologie CGI, cette thématique a été abordée.
Le fichier "calculatrice_web.py" doit vous aider.
Attention dans le cadre de la CGI on mélange entrées/sorties et traitement dans un fichier unique alors que grâce au framework Flask on sépare bien traitements (dans le script) et entrées/sorties (dans le template).
Il faut taper dans la barre d'URL : localhost:5000/calculatrice
Après soumission les champs du formulaire sont vidés mais on retrouve la formation du résultat dans la balise H2 (sous le formulaire).
J'espère que vous y voyez plus clair à l'issue de ce deuxième chapitre sur Flask.
Un projet Flask c'est au minimum un script (fichier .py) et des "templates".
Les templates contiennent du CSS et du HTML "enrichi".
En lançant le script vous démarrez le serveur web.
Vous n'avez plus qu'à ouvrir un navigateur et tapez localhost:5000/nomRoute
Le script ne comprend que les traitements ; les présentations et les saisies se réalisent dans les templates.
Dans le chapitre suivant nous allons réaliser une site web avec Flask. Nous allons donc externaliser le CSS pour éviter
de répeter la même feuille de style dans les différents templates.
Vous verrez aussi que le code HTML commun aux différentes pages du site peuvent aussi externalisées.
Donc nous aurons davantage de fichiers mais la maintenance du site sera grandement facilitée.