Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
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.
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 ...
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.
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".
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.
la fonction now() redirige vers le template "now.htm".
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".
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".
Il est associé à la route "/".
ça ressemble à une page web normale !
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".
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.
à 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.
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.
Nous allons procéder en deux étapes à des fins pédagogiques.
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 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.
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.
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 de la partie BODY devient :
Notez la syntaxe : individu['nom'] ce qui signifie le champ "nom" de individu.
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.
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