Framework Flask : les 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 données dynamiques (des variables, des conditions, des boucles). Ces instructions seront traduites en HTML standard grâce au "moteur de templates".
Flask utilise le moteur de template Jinja.

Utilisation de Jinja2

les expressions sont délimitées par {{ }} et permettent d'afficher des variables.
les structures de contrôle (boucles & conditions) sont délimitées par {% %}.

L'application : première version

Un nouveau dossier

Créez à la racine de C: un nouveau dossier et nommez le "flask_template".
À l'intérieur de ce dossier créez un sous-dossier nommé "templates" (nom impératif).

Le fichier "application.py"

Il s'agit du script de l'application qui va gérer les traitements.
Il doit être stocké à la racine du dossier "flask_templates".

from flask import Flask, render_template
from datetime import *

app = Flask(__name__)

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('/')
def bonjour():
    return render_template("index.htm")
	
@app.route('/now')
def now():
	maintenant = datetime.now()
	h = maintenant.hour
	mn = maintenant.minute
	return render_template("now.htm", heure = h, minute =mn)
	
@app.route("/adherents")
def adherents(): 
    return render_template("adherents.htm", liste = membres)
	
if __name__ == "__main__":
    app.run(debug = True)

Notez bien les importations de module.

une liste de dictionnaires
trois routes

Analyse de la liste "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 les clés sont : nom, mail et genre.

Les différentes routes de l'application

Si en guise d'URL vous saisissez localhost:5000 alors vous accédez à la route "/" ;donc le navigateur affiche "index.htm".
Si vous saisissez l'url localhost:5000/now alors vous accédez à la route "/now" ; le navigateur affiche "now.htm"
Si vous saisissez l'url localhost:5000/adherents alors vous accédez à la route "/adherents" et le navigateur affiche "adherents.htm".

Analyse de la route "/"

Pour pouvoir manipuler des templates il faut importer le module render_template de l'extension flask.

Analyse de la route "/now"

Pour que cette route fonctionne il faut importer le module datetime.
maintenant = datetime.now() : la variable "maintenant récupère l'instant présent.
h = maintenant.hour : la variable "h" récupère l'heure courante.

return render_template("now.htm", heure = h, minute =mn) : redirection vers le template "now.htm" avec passage de paramètres. la variable "heure" du template récupère le contenu de "h" ; la variable "minute" du template reçoit le contenu de "mn'.

Analyse de la route "/adherents"

La fonction adherents() redirige vers le template "adherents.htm".
Comme la route précédente il y a passage de paramètres : liste = membres. Donc dans le template la liste de dictionnaires est stockée dans la variable "liste".

Les différents templates

Dans le script "application.py", chaque route redirige vers un template : return render_template(nomTemplate).
Les templates doivent impérativement être stockés dans le sous dossier "templates" du dossier "flask_templates".

Le template "index.htm"

Il est associé à la route "/". <!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 ! <br>Naviguez dans l'application</h2> <p><a href ="/" >Accueil</a> <p><a href ="/now" >Afficher l'heure présente</a> <p><a href ="/adherents" >Afficher la liste des membres</a> </body>

ça ressemble à une page web normale !

La page "now.htm"

Il est associé à la route "/now". <!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".

La page "adherents.htm"

Il est associé à la route "/adherents". <!doctype html> <html lang ='fr'><head> <title>Mon application</title> <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> </body>

Liste est une variable qui référence une liste de dictionnaires. Donc ce terme doit être encadrés par des doubles accolades.

Le rendu de cette première version

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

* Serving Flask app 'application'
 * Debug mode: on
WARNING: This is a development server. Do not use it ...
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!

Le debugger est actif grâce à l'instruction app.run(debug = True)

Ouvrez le navigateur et tapez l'URL localhost:5000
Le template "index.htm" s'affiche alors dans le navigateur.
Grâce aux liens vous pouvez naviguer dans l'application.

Gros problème

L'affichage de l'objet "liste" n'est pas "jojo" !

[{'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'}]

Il faudrait pouvoir se débarasser des caractères parasites : crochets, accolades, guillemets.

Amélioration de l'application

Nous allons procéder en deux étapes à des fins pédagogiques.

Étape 1

La procédure

Faites une copie du template "adherents.htm" et nommez la copie "adherents2.htm"
Dans "application.py" modifiez le code dans la route ("/adherents") :
return render_template("adherents2.htm", liste = membres)
Modifiez le code du nouveau template (voir ci-dessous).
Fermez le terminal.

Le code du template "adherents2.htm"

Le code de la partie BODY devient : ... <h2>Liste des membres de l'association</h2> {% for individu in liste %} <p>{{individu}} </p> {% endfor %} ...

Donc on remplace {{liste}} par une boucle.
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

{'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'}

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

Pensez à fermer le terminal windows après chaque amélioration de l'application. Sinon les modifications du script risquent de ne pas être prises en compte par le navigateur.

Étape 2

La procédure

Faites une copie de "adherents2.htm" et nommez la copie "adherents3.htm"
Dans "application.py" modifiez le code dans la route ("/adherents") :
return render_template("adherents3.htm", liste = membres)
Modifiez le code du nouveau template (voir ci-dessous).
Fermez le terminal.

Le code du template "adherents3.htm"

Le code de la partie BODY devient : <h2>Liste des membres de l'association</h2> {% for individu in liste %} <p>{{individu['nom']}} <br>{{individu['mail']}}</p> {% endfor %}

Notez la syntaxe : individu['nom'] ce qui signifie le champ "nom" du dictionnaire.

Le rendu

Dumont
dumont@free.fr

Durand
durand@orange.fr

Dumoulin
dumoulin@gmail.com

Tailleur
tailleur@free.fr

Lefranc
lefranc@free.fr

lefèvre
lefevre@orange.fr

Cette fois l'affichage de la liste est fort satisfaisant.

Remarque

Si vous cliquez sur le lien "afficher l'heure" le chemin affiché dans la barre d'URL est : localhost:5000/now
Si vous cliquez sur "afficher la liste des membres" le chemin affiché dans la barre d'URL est : localhost:5000/adherents
Vous pouvez donc naviguer dans l'application sans utiliser les liens de "index.htm" mais en modifiant l'URL.
Par exemple tapez dans la barre d'URL : localhost:5000/now et vous accédez directement au template "now.htm".

Traduction

Tutoriel Python - sommaire

Débuter en Python

Python - approfondissements

Tutoriel Python - recherche

L'auteur : Patrick Darcheville

Framework Flask : les templates

Définition d'un template

Utilisation de Jinja2

L'application : première version

Un nouveau dossier

Le fichier "application.py"

Analyse de la liste "membres"

Les différentes routes de l'application

Analyse de la route "/"

Analyse de la route "/now"

Analyse de la route "/adherents"

Les différents templates

Le template "index.htm"

La page "now.htm"

La page "adherents.htm"

Le rendu de cette première version

Gros problème

Amélioration de l'application

Étape 1

La procédure

Le code du template "adherents2.htm"

Le rendu

Étape 2

La procédure

Le code du template "adherents3.htm"

Le rendu

Remarque