Framework Flask : les templates
Si vous voulez réaliser de véritables applications web avec Flask, il vous faudra produire des 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 (ou .html).
Généralités sur les templates
Définition
À la différence d'un document HTML standard, un template peut contenir des données
dynamiques (des variables, des expressions, des conditions, des boucles).
Ces instructions sont traduites en HTML grâce à un "moteur de templates".
Flask utilise le moteur de template Jinja.
Lorsque vous appelez render_template() Flask active Jinja.
Syntaxe dans un template
Il faut distinguer les expressions et les structures de contrôle :
- les variables et expressions sont délimitées par deux doubles paires d'accolades : {{ ... }}
- les structures de contrôle (boucles & conditions) sont délimitées par une paire d'accolades et une paire de symboles pourcentage :
{% ... %}
L'application
Nous allons maintenant développer une application comprenant quatre templates:
- un premir qui fait fonction de page d'accueil
- un deuxième qui affiche l'heure présente
- un troisième qui affiche les membres d'un club
- un dernier qui vous permet de composer la couleur de votre choix
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 répertoire nommé "templates" ; Ce nom est impératif.
Le fichier "application.py"
C'est la composante "Vues" dans le cadre du modèle MVT.
Il précise pour chaque route les traitements dans le cadre d'une "vue".
Une "vue" est une fonction Python associée à une route.
Ce fichier "application.py" est donc le "chef d'orchestre" de l'application et doit être stocké à la racine
du dossier "flask_templates".
Le code de 'application.py'
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 accueil():
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)
@app.route("/couleurs")
def couleurs():
return render_template("boite_couleurs.htm")
if __name__ == "__main__":
app.run(debug = True)
Quatre routes ; chaque route associée à une "vue" (fonction python).
On peut donner à la vue le nom de la route (sauf bien sûr '/')
Les importations
Pour que le moteur de templates fonctionne, il faut importer la fonction render_template.
Pour manipuler les dates il faut importer le module datetime.
La variable "membres"
Il s'agit d'une liste de six dictionnaires.
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
Quatre routes ; chaque route associée à une "vue" :
- la route "/" : affiche le template "index.htm" car exécute la vue "accueil()"
- la route "/now" : exécute la route now() et donc affiche le template "now.htm" avec passage de deux paramètres à ce template
- la route "/adherents" : affiche le template "adherents.htm" avec passage d'un paramètre à ce template
- la route "/couleurs" : affiche le template "couleurs.htm"
Les différents templates et documents HTML
Les templates et documents HTML standards doivent impérativement être stockés dans le sous dossier "templates".
La page web "index.htm"
Il est associé à la route "/".
Le code ci-dessous (à dérouler):
Observez attentivement les valeurs des attributs href des balises A. Ce sont des routes et comme chaque route
est associée à une vue et que chaque vue affiche un template (mais pas seulement) ...
Le template "now.htm"
Elle est associée à la route "/now". Le code de ce template.
Le code ci-dessous (à dérouler):
Le code contient deux variables (indiquées par une double paire d'accolades) ; c'est la notation surnommée "moustache".
Le moteur de templates Jinja interprète ces variables et retourner du HTML au navigateur.
Le template "adherents.htm"
Il est associé à la route "/adherents". Le code de ce template ci-dessous.
Le code ci-dessous (à dérouler):
Notez la variable liste qui correspond au dictionnaire "membres" dans le script.
Le template "boite_couleurs.htm"
Grâce à des curseurs (input type range) vous composez une couleur et vous obtenez son code RGBA.
Il serait impossible de réaliser cette interface avec tkinter car ce module
ignore la notation RGB des couleurs.
Le code ci-dessous (à dérouler) :
Il s'agit d'une bonne révision de HTML5 et de CSS3 mais aussi de JS.
HTML : emploi dans le formulaire de INPUT de type range (curseur)
<form id ="f1" oninput ="fcouleur()" > : emploi de l'évènement de formulaire oninput ;
plus récent que "onchange" et qui simplifie le code.
Ce template est donc un document HTML standard à une exception près : la valeur de l'attribut href qui doit
obligatoirement être une route.
Le rendu de cette application
Procédures pour lancer l'application
Vous avez le choix entre trois solutions.
Première solution
À partir de l'explorateur de fichiers, double-cliquez sur "application.py" ;
l'invite de commandes s'affiche avec le message :
* 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!
Ce message vous informe que le serveur web local est disponible sur le port 5000.
Ouvrez le navigateur et tapez localhost:5000 dans la barre d'url.
La page "index.htm" s'affiche alors dans le navigateur puisque c'est la route '/' qui est exécutée.
Grâce aux liens vous pouvez ensuite naviguer dans l'application.
Deuxième solution
Tapez "cmd" dans la zone "Rechercher" pour lancer l'Invite de commandes.
Puis tapez :
C:\Users\darch>cd \flask_templates # changer de directory
C:\flask_templates>py application.py # exécuter le script python
Le même message que dans la première solution s'affiche.
La suite est aussi identique : ouvrir le navigateur, tapez localhost:5000 dans la barre d'url.
Troisième solution
Vous pouvez aussi utiliser l'IDLE de Python :
- sélectionnez le dossier ; ouvrir "application.py" ; le code s'affiche dans une fenêtre
- sélectionnez la commande "Run Module" : affichage dans le shell d'un message ;
le même que pour les deux autre solutions
Donc quelque soit la solution retenue, le serveur web local est toujours disponible sur le port 5000.
Le rendu du template "index.htm"
Le rendu du template "now.htm"
Le rendu du template "boite_couleurs.htm"
Problème avec le template "adherents"
L'affichage de l'objet "liste" dans la page "adherents.htm" n'est pas joli.
[{'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 du template "adherents.htm"
À des fins pédagogiques, je procède en deux étapes.
Étape 1
Modifiez le code du template.
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 une syntaxe particulière :
- encadrez l'instruction for ... par {% & %}
- L'instruction {% endfor %} est obligatoire
Le rendu suite à l'étape 1
{'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 l'interpréteur de commandes Windows (cmd) après chaque modification de l'application.
afin de libérer le port 5000.
Étape 2
Modifiez de nouveau le code du template "adherents.htm".
Le code de la partie BODY devient :
individu['nom'] : afficher la valeur de la clé "nom"
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.
Naviguer via la barre d'URL
Si vous cliquez sur le lien "afficher l'heure" , la barre d'URL affiche : localhost:5000/now
Si vous cliquez sur "afficher la liste des membres", la barre d'URL affiche : localhost:5000/adherents
Vous pouvez donc naviguer dans l'application sans utiliser les liens mais en modifiant la barre d'URL :
- saisir dans la barre d'URL : localhost:5000/now ; accès au template "now.htm".
- saisir tout simplement: localhost:5000 ; retour à l'url racine ('/') donc accès au template "index.htm"
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site