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
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
Dans le chapitre indiqué 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 ce langage côté serveur.
Or nous voulons utiliser Python pour le traitement ...
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.
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.
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 "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 (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" >
...
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
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.
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.
Le code de la route "traitement" devient :
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.
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 !
Malgré l'utilisation des "f-strings" l'affichage n'est pas esthétique.
Notez une syntaxe plus simple pour récupérer les valeurs saisies dans les champs du formulaire : request.form['nomInput']
Il n'y a plus d'instructions print() (donc d'affichage dans le terminal)
On retourne au template "connexion.htm" id ou mp (mais pas les deux).
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.
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.
Il n'est plus nécessaire de consulter le terminal, les données saisies ne sont plus affichées dans celui-ci.
Version compressée du dossier sous forme d'un zip
Vous l'avez peut-être déjà récupéré à l'occasion de la lecture du chapitre précédent.