Framework Flask : les templates

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 un HTML "enrichi" (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.

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).
Dans ce dossier nous allons développer une application web avec un script et des templates.

L'application : première version

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

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

Donc si en guise d'URL vous saisissez localhost:5000 alors vous accédez à la route "/"
Si vous saisissez l'url localhost:5000/now alors vous accédez à la route "/now".
Si vous saisissez l'url localhost:5000/adherents alors vous accédez à la route "/adherents".

Analyse de la route "/"

La fonction bonjour() redirige vers le template "index.htm".
Pour pouvoir manipuler des templates il faut importer le module render_template de l'extension flask.

Analyse de la route "/now"

la fonction now() redirige vers le template "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.

Analyse de la route "/adherents"

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

Les différents templates

Dans le script "application.py", chaque route affiche dans le navigateur une page web : un template.
Ils 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 !

Le template "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".

Le template "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.
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 "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.
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

Affichage de la liste des 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'}

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. Puis relancez le terminal en double-cliquant sur "application.py".
Sinon les modifications ne seront pas prises en compte par le navigateur.

Étape 2

La procédure

Faites une copie de "adherents2.htm" et nommez le "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.
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" de individu.

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 correcte.

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

Traduction

Tutoriel Python - sommaire

Débuter en Python

Python - approfondissements

Tutoriel Python - recherche

L'auteur : Patrick Darcheville

Framework Flask : les templates

Nouveau dossier

L'application : première version

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"

Le template "now.htm"

Le template "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