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. Le souhait de son créateur était de réaliser un framework web contenu dans un seul fichier Python.
En 2018, Flask était élu "Framework web le plus populaire".

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".
Dans ce script 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" encadré par le conteneur H2.

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 application1.py ... * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

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

Application exécutée dans le navigateur

Dans la barre d'URL du navigateur, je saisis localhost:5000/
Le message "Bienvenue sur Flask" est alors affiché dans la fenêtre.

Utilisation de templates

L'inconvénient du script est que l'on mélange du Python et du HTML.
Le recours au template permet d'éviter ce mélange de genre.

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 le suivant : <!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 ce fichier. from flask import Flask, render_template app = Flask(__name__) @app.route('/') def bonjour(): return render_template("index.htm") if __name__ == "__main__": app.run()

importation de la méthode "render_template" de la bibliothèque flask
la fonction "bonjour" redige maintenant vers le fichier "index.htm" (contenu dans le dossier "templates")

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, je ne mélange plus le code python et le code HTML. Désormais le script ne contient que du python et le template associé ne contient que du HTML (voire du CSS et du 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.

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" ; heure (variable dans template récupère le contenu de la variable h du script, etc.

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 le template "now.htm" à créer dans le sous-dossier "templates".
Le code de ce fichier : <!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 contient des variables (indiquées par une double paire d'accolades).

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 l'heure courante.
Actualisez la page au bout d'une minute ; l'affichage a changé. Il s'agit donc d'une page dynamique.

Améliorations

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

Ajouts dans le script '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 liste(): 
	return render_template("adherents.htm", liste = membres)

J'ai donc rajouté une liste de dictionnaires nommée "membres".
Ici l'objet "membres" de type list comprent 6 dictionnaires.
En fait une liste de dictionnaires est une structure de données aussi complexe qu'une table d'une 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.

La nouvelle page web

Je crée dans le dossier "templates" une nouvelle page nommée "adherents.htm".
Le code de cette page (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 le HTML dynamique : référence à la variable "liste".

Tests

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 : crochets et accolades parasitent le contenu.

Amélioration du template

Heureusement dans le cadre d'un framework comme Flask, HTML devient un véritable langage de programmation.
Non seulement on peut manipuler des variables mais on peut aussi créer des boucles ...

Le nouveau code dans la partie BODY

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

On peut créer une boucle python dans une page à condition de l'encadrer par {% et %}.
L'instruction endfor est obligatoire !

Test

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

Version finale du template

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.

Modification de "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 un nouvel objet de type "list" nommé "selection" qui correspond soit aux femmes soit aux hommes en fonction du paramètre saisi.
Si vous avez oublié comment réaliser une liste en compréhension à partir d'une autre liste, relisez la chepitre 3 du présent tuto.

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.
On peut intégrer une boucle (avec la syntaxe python) dans un template à condition qu'elle soit délimitée par "{%" et "%}".
Attention il faut rajouter (par rapport au Python standard) une instruction endfor toujours avec les mêmes délimiteurs.

Test

Le serveur étant actif, tapez en guise d'url d'abord : http://localhost:5000/adherents?g=f
puis : http://localhost:5000/adherents?g=m
J'affiche 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/aderents (donc aucun paramètre) : 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" 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 test existe alors filtrage de membres dans la liste selection sinon pas de filtrage.

Modification du 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.

Tests

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) ; Les scripts correspondant à l'aspect Contrôle (les traitements) et les templates à 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" serait identique.

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

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

Améliorations

Manipuler de grosses quantités de données

Ajouts dans le script 'application.py"

La nouvelle page web

Tests

Amélioration du template

Le nouveau code dans la partie BODY

Test

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

Modification de "application.py"

Modification du template "adherents.htm"

Test

Le bug

Modification du script

Modification du template "adherents.htm"

Tests

Conclusion