Framework Flask de Python

Flask est un micro framework open-source de développement web en Python.
Flask a été créé initialement par Armin Ronacher en 2010. Le souhait de son créateur était de réaliser un framework web Python très simple d'emploi. En 2018, Flask a été élu "Framework web le plus populaire".

Modèle : comporte nos données structurées (la base de données)
Vues : gèrent le traitement de nos données, le routage des liens, la connexion avec notre BDD
Templates : correspondent aux pages qui affichent des données ou autorisent les saisies dans la base (formulaires HTML)

Installation de Flask et première application

Flask est une bibliothèque Python. Donc pour le télécharger sur votre PC il suffit d'utiliser l'utilitaire PIP.
À partir du shell windows tapez la commande pip install flask

Environnement

Créez un nouveau dossier à la racine de C: et nommez le python_flask.
Créez dans ce dossier un fichier nommé application.py qui doit contenir le code ci-dessous. from flask import Flask app = Flask(__name__) @app.route('/') def bonjour(): return "<h2>Bienvenue sur Flask !</h2>" if __name__ == "__main__": app.run()

Ce fichier est bien sûr enregistré dans "c:\python_flask".
J'ai importé la fonction "Flask" du module "flask" . Attention : un F majuscule pour la fonction & un f minuscule pour le module).
L'application se nomme "app".
La route '/' correspond à la page d'accueil de votre application.
Donc si on se trouve à la racine, Flask va déclencher l'exécution de la fonction "bonjour" qui se contente d'afficher le message "Bienvenue sur Flask" avec un certain style (grâce au balisage H2) dans le navigateur.

Le dernier bloc est très important ; c'est ce code qui crée le serveur web local sur le port 5000 (par défaut).

Démarrer le serveur

À partir de l'explorateur de fichiers double-cliquez sur le fichier "application.py".
Le shell de windows affiche :

 * Serving Flask app "application" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Le terminal vous informe que le serveur web local "tourne" sur le port 5000. Et que vous devez donc taper en guise d'url : http://127.0.0.1:5000 ou plus simplement : localhost:5000

Le serveur web local étant actif, j'ouvre le navigateur (Chrome ou Firefox) ; je saisis dans la barre d'URL du navigateur localhost:5000
Le message "Bienvenue sur Flask" est alors affiché dans la fenêtre du navigateur.

Utilisation de templates

L'inconvénient du script actuel est que l'on mélange du Python et du HTML avec une instruction barbare :

	return "<h2>Bienvenue sur Flask !</h2>"

Je parle d'instruction "barbare" car il y a un mélange de Python et de HTML dans cette instruction.
Pour éviter cette inconvénient déjà rencontré avec la technologie CGI, nous allons recourir aux templates.

Sous-dossier templates

Définition d'un template

Un template est un modèle qui génère du code HTML. Il s'agit d'un fichier qui a pour extension .htm.
À la différence d'un document HTML standard, un template peut contenir : des variables, des tests, des boucles. Ces instructions seront traduites en HTML standard grâce au "moteur de templates". Flask utilise le moteur de template Jinja.

Dans le répertoire "c:\python_flask" creéz un dossier "templates" (avec un s final).
Dans ce dossier creéz un fichier "index.htm" dont le contenu est indiqué ci-dessous.

Le code du template "index.htm" : <!doctype html> <html lang ='fr'><head> <title>Mon application</title> <meta charset = 'utf-8'> <style> h2 {font-size : 30px ; color : white ; background : gray;} </style> </head> <body> <h2>Soyez le bienvenu chez Flask !</h2> </body>

Et oui, c'est une page web standard.

Emploi de ce template

Nous devons modifier le code de la fonction "bonjour()" dans la route ('/')

from flask import Flask, render_template
...
@app.route('/')
def bonjour():
    return render_template("index.htm")
...

La fonction "bonjour()" ne contient désormais que du code Python. Je respecte donc l'esprit MVT.

importation de la fonction "render_template" de la bibliothèque flask
la fonction "bonjour" redirige désormais vers le template "index.htm". Inutile de préciser le chemin, le dossier "templates" est implicite.

Aperçu dans le navigateur

Framework Flask

C'est plus joli comme affichage.
Si vous voulez que le texte soit centré horizontalement, il suffit de rajouter dans la règle de style relative à H2 : text-align: center.
Oui, le développement web en Python-Flask suppose de maitriser les langages du web : HTML,CSS voire JavaScript.

Une application dynamique

Pour l'instant notre application est statique : affichage de toujours le même message. Je vais maintenant créer une deuxième route dans le script.

Instructions ajoutées à "application.py"

from datetime import *
	
@app.route('/now')
def now():
	maintenant = datetime.now()
	h = maintenant.hour
	mn = maintenant.minute
	return render_template("now.htm", heure = h, minute =mn)

J'importe le module datetime.
Je crée ensuite une deuxième route (/now) qui appelle la fonction du même nom : now()
Cette fonction détermine l'horaire actuel sous forme de 2 variables : h & mn.
Cette fonction redirige vers la page "now.htm".
Notez bien les arguments de la méthode render_template que l'on peut exprimer ainsi : redirection vers la page "now.htm" ; la variable heure du template récupère le contenu de la variable h du script ; la variable minute du template récupère la variable mn du script.

Je donne le même nom racine à la route, la fonction dans cette route et le template vers lequel redirige la route. Ici j'ai la route/fonction et template se nomment respectivement : /now ; now() & now.htm

datetime

datetime.now() retourne l'instant présent.
les propriétés applicables à cet objet sont : hour, minute, second, year, day, month

Le nouveau template

Il faut donc créer un template nommé "now.htm" (toujours dans le répertoire "templates").
Le code du fichier "now.htm" : <!doctype html> <html lang ='fr'><head> <title>Mon application</title> <meta charset = 'utf-8'> <style> h2 {font-size : 30px ; color : white ; background : gray; text-align : center;} </style> </head> <body> <h2>Il est très exactement : <br>{{heure}} H et {{minute}} mn </h2> </body> ^

Le code HTML contient des variables (indiquées par une double paire d'accolades) ; c'est la notation surnommée "moustache".
Flask utilise le moteur de templates Jinja qui est capable d'interpréter ce" HTML enrichi".

Aperçu dans le navigateur

Framework Flask

Le serveur web étant toujours actif, le navigateur étant toujours ouvert ; tapez dans la barre d'URL localhost:5000/now
Au bout d'une minute, actualisez la page : l'affichage a changé. Il s'agit donc d'une page dynamique.

Manipuler de grosses quantités de données

Ajouts dans "application.py"

J'ajoute une liste de dictionnaire et une nouvelle route dans "application.py"

membres =[ 
{'nom' : 'Dumont', 'mail':'dumont@free.fr', 'genre': 'm'}, 
{'nom' : 'Durand', 'mail':'durand@orange.fr','genre': 'f'},
{'nom' : 'Dumoulin', 'mail':'dumoulin@gmail.com', 'genre': 'm'},
{'nom' : 'Tailleur', 'mail':'tailleur@free.fr', 'genre': 'f'}, 
{'nom' : 'Lefranc', 'mail':'lefranc@free.fr','genre': 'm'},
{'nom' : 'lefèvre', 'mail':'lefevre@orange.fr','genre': 'f'}

@app.route("/adherents")
def adherents(): 
	return render_template("adherents.htm", liste = membres)

J'ai donc rajouté dans le script une liste de dictionnaires nommée "membres".
Ici l'objet "membres" (de type list) comprent 6 dictionnaires. Une liste de dictionnaires est une structure de données complexe mais très intéressante car ressemble à une table de base de données.
Tous les dictionnaires de la liste doivent avoir les mêmes clés ; ici : nom, mail et genre.

Je rajoute aussi une route qui redirige vers la page "adherents.htm" avec un passage de paramètres : liste = membres.

Le nouveau template : "adherents.htm"

Il faut produire un nouveau template nommé "adherents.htm" (toujours dans le dossier "templates" bien sûr). dont le code figure ci-dessous. ... <meta charset = 'utf-8'> <style> body {width : 900px ; margin : 10px auto; } h2 {font-size : 30px ; color : white ; background : gray; text-align : center; } p {margin : 10px; font-size : 20px ; color : navy; } </style> </head> <body> <h2>Liste des membres de l'association</h2> <p>{{liste}}</p> ...

Observez la feuille de style.
Notez l'instruction "moustache" : {{liste}}. Ainsi je peux manipuler des variables dans un template.

Aperçu dans le navigateur

Le serveur web étant actif, tapez dans la barre d'URL du navigateur : localhost:5000/adherents
La liste de dictionnaires s'affiche mais l'affichage n'est pas très joli ni lisible à cause des crochets et accolades de cette liste de dictionnaires.

Amélioration du template

Le nouveau code dans la partie BODY

On remplace l'instruction <p>{{liste}}

par une boucle :

...
<h2>Liste des membres de l'association</h2>
{% for individu in liste %}
	<p>{{individu}} </p>
{% endfor %}
...

Au sein d'un template on peut créer une boucle avec la syntaxe Python à condition de l'encadrer par {% et %}.
L'instruction % endfor % est obligatoire dans ce contexte.

Le rendu

Une ligne pour chaque dictionnaire ; les crochets ont disparu mais il y a toujours les accolades et les guillemets simples.

Version finale du template

Il faut maintenant nous débarasser des accolades en modifiant le code de la boucle. {% for individu in liste %} <p>{{individu['nom']}} <br>{{individu['mail']}}</p> {% endfor %}

Aperçu dans le navigateur :
Framework Flask

Cette fois c'est joli car crochets et accolades ont disparu !

Paramètres dans une URL

Vous savez sans doute que l'on peut passer des paramètres dans une URL.
C'est d'ailleurs ce que vous faites lorsque vous soumissionnez un formulaire basé sur la méthode GET.

Par exemple allez sur le site "pagesjaunes" et renseignez le formulaire de la page d'accueil :
Saisissez "hotel" et "Paris" puis validez.
La barre d'adresse contient alors :
http://www.pagesjaunes.fr/annuaire/ chercherlespros?quoiqui=hotel&ou=paris
Les paramètres passés correspondent à ce qui suit le ? : quoiqui = hotel & ou paris. On parle aussi de chaine de requête.

Modifications dans "applications.py"

from flask import Flask, render_template, request
...
@app.route("/adherents")
def adherents(): 
	sexe =request.args.get('g')
	if sexe:
		selection =  \
		[membre for membre in membres if membre['genre'] == sexe]
	else: 
		selection = membres
		return render_template("adherents.htm", liste = selection)

J'importe désormais l'objet request de la bibiothèque flask.
Puis je modifie la route "adherents".
sexe =request.args.get('g') : récupère l'argument "g" passé à l'URL.
Si la variable "sexe" n'est pas à none, j'utilise sa valeur pour créer une liste "selection" en compréhension : liste des femmes OU liste des messieurs en fonction de l'argument saisi dans l'URL.
Sinon la liste "selection" correspond à la liste "membres".
Si "sexe" n'est pas à none mais est différent de "f" ou "m" alors la liste "selection" sera vide !

Modification dans le template "adherents"

<body>
<h2>Liste des membres de l'association</h2>
{% if liste|length ==0 %}
	<p>Aucun adhérent ne correspond à la recherche
	<br>Passez "g=m" ou "g=f" en guise de paramètre ou rien </b>
	</p>
{%else%}
	{% for individu in liste %}
		<p>{{individu['nom']}} - {{individu['mail']}} - {{individu['genre']}}</p>
	{% endfor %}
{%endif%}
</body>
...

Je vous communique le nouveau code de la partie BODY.
{% if liste|length ==0 %} : si la liste "liste" est vide alors on affiche un message d'erreur car vous avez passé un mauvais argument à l'URL (différent de "f" ou "m").

Affichage dans le navigateur

Tapez successivement les URL suivantes :

localhost:5000/adherents?g=h : le message d'erreur doit s'afficher dans le template
localhost:5000/adherents?g=d : le message d'erreur doit s'afficher dans le template
localhost:5000/adherents : tous les adhérents doivent s'afficher
localhost:5000/adherents?g=f : seules les dames doivent apparaitre
localhost:5000/adherents?g=m : seules les messieurs doivent apparaitre

Si argument incorrect, il s'affiche :

Framework Flask

Dans la barre d'URL ! localhost:5000/adherents?g=h

Si argument correct, il s'affiche :

Framework Flask

Dans la barre d'URL ! localhost:5000/adherents?g=m

Le moteur de template jinja a bien généré du HTML standard

Faites un clic droit dans la fenêtre du navigateur et sélectionnez "inspecter" (pour accéder aux "outils de * développement de Chrome) ; sélectionnez l'onglet "élements" ; le code source s'affiche !
Il est repris ci-dessous (extraits) : ... <style> body {width : 900px ; margin : 10px auto; } h2 {font-size : 30px ; color : white ; background : gray; text-align : center; } p {margin : 10px; font-size : 20px ; color : navy; } </style> </head> <body> <h2>Liste des membres de l'association</h2> <p>Dumont - dumont@free.fr - m</p> <p>Durand - durand@orange.fr - f</p> <p>Dumoulin - dumoulin@gmail.com - m</p> <p>Tailleur - tailleur@free.fr - f</p> <p>Lefranc - lefranc@free.fr - m</p> <p>lefèvre - lefevre@orange.fr - f</p> ...

Les variables, tests, boucles ont été traduits en HTML.

Conclusion

Je vous ai montré qu'avec le framework Flask et dans le cadre du modèle MVC, les affichages se font grâce aux templates et les traitements se réalisent dans le script.
Dans le chapitre suivant vous verrez que les entrées se réalisent aussi via des templates mais contenant cette fois des formulaires de saisie.

Traduction

Tutoriel Python - sommaire

Débuter en Python

Python - approfondissements

Tutoriel Python - recherche

L'auteur : Patrick Darcheville

Framework Flask de Python

Installation de Flask et première application

Environnement

Démarrer le serveur

Utilisation de templates

Sous-dossier templates

Définition d'un template

Emploi de ce template

Aperçu dans le navigateur

Une application dynamique

Instructions ajoutées à "application.py"

Le nouveau template

Aperçu dans le navigateur

Manipuler de grosses quantités de données

Ajouts dans "application.py"

Le nouveau template : "adherents.htm"

Aperçu dans le navigateur

Amélioration du template

Le nouveau code dans la partie BODY

Le rendu

Version finale du template

Paramètres dans une URL

Modifications dans "applications.py"

Modification dans le template "adherents"

Affichage dans le navigateur

Si argument incorrect, il s'affiche :

Si argument correct, il s'affiche :

Le moteur de template jinja a bien généré du HTML standard

Conclusion