Accueil

Traduction

Tutoriel Python - sommaire

Tutoriel Python - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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

Notez bien les importations ...

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

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

ça ressemble à une page web normale !

Le template "now.htm"

Il est associé à la route "/now".

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

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 :

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 :

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