Le framework python Flask

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 documents HTML 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 d'un terminal windows (CMD ou Powershell) 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".
On définit ensuite une "route" ; ici la racine.
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).
Les deux dernières lignes permettent l'exécution du script à partir d'un terminal windows.

Le fait d'importer flask crée d'office un serveur web sur le port 5000 donc aucune programmation à réaliser.

Démarrer le serveur

Il faut ouvrir un terminal windows (CMD ou PowerShell).
Le contenu du terminal : C:\Users\boulanger>cd c:\python_flask c:\python_flask>python application.py ... * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Je tape d'abord : cd c:\python_flask
Ensuite : python application.py OU py application.py
Le terminal m'indique que le serveur HTTP "is running" sur le port 5000.

Il y a encore plus simple pour démarrer le serveur : à partir de l'explorateur de fichiers double-cliquez sur le fichier "application.py".

Application exécutée dans le navigateur

Le serveur web actif, dans la barre d'URL du navigateur, je saisis alors : 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 "

Bienvenue sur Flask !

"
Je parle d'instruction "barbare" car il y a un mélange de python et de HTML. Il est préférable de recourir aux templates pour éviter ce mélange. Un template est un document HTML qui peut contenir du HTML enrichi.

Sous-dossier templates

Dans le répertoire "c:\python_flask" je crée un dossier "templates" (avec un s final).
Dans ce dossier je crée 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; text-align : center; } </style> </head> <body> <h2>Soyez le bienvenu chez Flask !</h2> </body>

Il s'agit d'un fichier avec seulement du HTML et une feuille de style interne pour formater un titre de niveau 2.

Modification du code de "application.py"

Je vais maintenant modifier le script et plus précisément la fonction "bonjour". from flask import Flask, render_template app = Flask(__name__) @app.route('/') def bonjour(): return render_template("index.htm") ...

La fonction "bonjour()" ne contient plus que du code Python.

importation de la fonction "render_template" de la bibliothèque flask
la fonction "bonjour" redige maintenant vers le document "index.htm". Inutile de préciser le chemin, le dossier "templates" est implicite.

Actualisation du navigateur

Le serveur étant toujours actif, actualisez la page.
Le message "Soyez le bienvenu chez Flask" s'affiche en blanc sur fond gris et centré.

Donc grâce à l'emploi d'un template, le script ne contient plus que du code Python et le template que du code HTML (du CSS et du JS)
Vous verrez cependant un peu plus loin qu'il peut cependant s'agir de HTML enrichi ...

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.

Les instructions ajoutées à "application.py"

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

J'importe la totalité du module datetime.

Je crée ensuite une deuxième route (/now) qui appelle la fonction "horaire".
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.

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 document "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".

Tests

Démarrez le terminal windows.
Basculez vers le navigateur ; tapez localhost:5000 pour afficher le message "Soyez le bienvenu ..." puis tapez, toujours dans la barre d'URL localhost/now pour afficher le template now.htm
Actualisez la page au bout d'une minute ; l'affichage a changé. Il s'agit donc d'une page dynamique.
Grâce à la règle de style (code CSS) le texte centré apparait en blanc sur fond gris.

Travaillez un peu !

Modifiez le code de la nouvelle route pour que s'affiche dans la page "now.htm" l'heure courante sous la forme heure-minute-seconde.

Manipuler de grosses quantités de données

Nous allons enrichir le script "application.py".

Ajouts dans le script

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 liste(): 
	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 ...
Tous les dictionnaires de la liste doivent avoir les mêmes clés ; ici : nom, mail et genre (la clé "genre" aurait pu s'appeler "sexe").

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"

Je crée un nouveau template nommé "adherents.htm" (dans le dossier "templates" bien sûr).
Le code du template (extrait) : ... <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}}

Tests à effectuer

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

Dans le cadre d'un framework comme Flask et grâce au moteur de template, HTML devient un véritable langage de programmation : non seulement on peut manipuler des variables mais on peut aussi créer des boucles, effectuer des tests.

Le nouveau code dans la partie BODY

On remplace l'instruction {{liste}} par : <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. {% for individu in liste %} <p>{{individu['nom']}} <br>{{individu['mail']}}</p> {% endfor %}

Cette fois on n'affiche que le nom et l'adresse mail de chaque adhérent et on s'est débarassé des accolades et des guillemets.

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.

Afficher la valeur du paramètre passé dans l'URL

Modification de "application.py"

Et plus précisément modifions la fonction liste comme suit : from flask import Flask, render_template, request ... @app.route("/adherents") def liste(): sexe =request.args.get('g') print('sexe sélectionné est :' + sexe ) return render_template("adherents.htm", liste = membres)

J'importe désormais l'objet request de la bibiothèque flask.

Ensuite je modifie la fonction liste() en rajoutant l'instruction : sexe =request.args.get('g')
Cette instruction récupère dans la variable sexe l'argument g passé en paramètre de l'URL.
Ensuite j'affiche la valeur du paramètre g.

Test

Le serveur étant actif, tapez en guise d'url dans le navigateur : http://localhost:5000/adherents?g=f
Observez la fenêtre du terminal. Vous lisez le message : sexe sélectionné est f

Utilisation de la chaine de requête passée dans l'url

Je vais maintenant vous montrer l'intérêt de passer un (ou plusieurs) paramètres dans une URL.

Modifions une nouvelle fois "application.py"

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

À partir de la liste "membres" je construis en compréhension une nouvelle liste nommée "selection" qui correspond soit aux femmes soit aux hommes en fonction du paramètre saisi.

Modification du template "adherents.htm"

...
{% for individu in liste %}
	<p>{{individu['nom']}} - {{individu['mail']}} - {{individu['genre']}}</p>
{% endfor %}
...

Pour chaque adhérent j'affiche : nom, mail et genre et sur une seule ligne.

Test

Le serveur étant actif, tapez en guise d'url d'abord : http://localhost:5000/adherents?g=f
puis tapez l'url: http://localhost:5000/adherents?g=m
J'affiche donc successivement les femmes puis les hommes.
Donc grâce à un passage de paramètre dans l'url, je filtre la liste "membres". Je pourrai tout aussi bien filtrer les données retournées par une requête sélection ...

Le bug

Saisissez en guise d'url : localhost:5000/adherents (donc aucun paramètre après l'url) : le template retourne une liste vide !
C'est logique ; puisque la variable sexe n'existe pas (None) la liste selection est vide.
Nous voulons qu'en l'absence de requête dans l'url, tous les adhérents soient affichés ET si le paramètre saisi est erroné, par exemple "g=h" ou "g=d", alors affichage d'un message d'erreur.

Modification du script

Le contenu de la fonction "liste" dans "application.py" devient : @app.route("/adherents") def liste(): 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'ai rajouté un test : si sexe existe alors filtrage de la liste "membres" dans la liste selection sinon pas de filtrage de "membres".

Modification du template "adherents.htm"

Il faut aussi modifier le template "adherents.htm" !
Le code de la partie BODY devient : <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%}

Si liste vide : affichage d'un message d'erreur sinon affichage de la liste via une boucle.

Vous savez donc désormais programmer des tests dans un template ; mais n'oubliez pas l'instruction endif qui est obligatoire dans le cadre d'un template.

Tests

Tapez successivement les url suivantes :

localhost:5000/adherents?g=h : le message d'erreur doit s'afficher
localhost:5000/adherents?g=d : le message d'erreur doit s'afficher
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

Conclusion

En utilisant le framework Flask nous avons pu remplacer la technologie CGI par le modèle MVC (Modèle Vue Contrôleur) ; Le script correspond à l'aspect Contrôle (les traitements) et les templates correspondent à l'aspect Vue (les sorties).
Je vous ai montré aussi que dans le cadre de Flask, nous pouvons utiliser un HTML grandement enrichi par intégration de variables et de structures de contrôle. Les variables sont délimitées par des "moustaches" (double paire d'accolades) ; les boucles et tests par des "{%" et "%}".

Avec le framework Python Django la syntaxe du "langage de gabarit" (ou "HTML enrichi") est pratiquement identique.

Récupérer le dossier "python_flask"

Version compressée du dossier python_flask

Traduction

Tutoriel Python - sommaire

Débuter en Python

Python - approfondissements

Tutoriel Python - recherche

L'auteur : Patrick Darcheville

Le framework python Flask

Installation de Flask et première application

Environnement

Démarrer le serveur

Application exécutée dans le navigateur

Utilisation de templates

Bienvenue sur Flask !

Sous-dossier templates

Modification du code de "application.py"

Actualisation du navigateur

Une application dynamique

Les instructions ajoutées à "application.py"

Le nouveau template

Tests

Travaillez un peu !

Manipuler de grosses quantités de données

Ajouts dans le script

Le nouveau template : "adherents.htm"

Tests à effectuer

Amélioration du template

Le nouveau code dans la partie BODY

Le rendu

Version finale du template

Paramètres dans une URL

Afficher la valeur du paramètre passé dans l'URL

Modification de "application.py"

Test

Utilisation de la chaine de requête passée dans l'url

Modifions une nouvelle fois "application.py"

Modification du template "adherents.htm"

Test

Le bug

Modification du script

Modification du template "adherents.htm"

Tests

Conclusion

Récupérer le dossier "python_flask"