Introduction au moteur de template Jinja 2

Cet article présente le moteur de templates Jinja2 pour la conception de page HTML

Home flask

Contexte

Dans notre première implémentation, nous avons créé le code HTML de notre site directement dans notre code Python. En pratique, le fait de mixer du code HTML avec du code Python peut rapidement devenir fastidieux. Pour éviter ce problème, il est préférable de sous-traiter la conception des pages à un moteur de template comme Jinja2 (le plus populaire en Python). A chacun son rôle, Flask pour le traitement des informations et Jinja2 pour la création des pages. En adoptant cette approche, nous respectons un principe de base de la programmation: le célèbre Separation of Concerns.

Principe

Documentation de Jinja2: http://jinja.pocoo.org/docs/2.10/templates/

Le moteur de template Jinja2 permet, à partir de plusieurs informations passées en entrée, de construire un document ayant une structure bien spécifique. Concrètement, la construction d'un document HTML s'obtient à partir de deux fichiers.

  • Une application Flask appelant la fonction Jinja2 render_template. Cette fonction est appelée avec deux paramètres: le nom du template et une liste de variables Python à passer au template.
  • Un template html permettant la construction du document.

Pour construire un document à partir des informations passées en entrée, Jinja2 intègre des tags particuliers.

Pour inclure le contenu d'une variable dans un template Jinja2, il faut utiliser le tag:

{{variable}}

Jinja2 intègre deux structures de contrôle: la boucle et le test conditionnel. Ces structures sont définis par les tags:

{% for ... in ... %} ... {% endfor %}
{% if ... %} ... {% else %} ... {% endif %}

Pour éviter des répétitions entre templates, il est possible de recourir à un mécanisme d'héritage. Pour hériter de la structure d'un template base.html, il faut indiquer à la première ligne du template hérité:

{% extends 'base.html' %}

Lors de l'héritage, certains blocs de codes peuvent être surchargés. Ces blocs sont définis via le tag

{% block mon_block %} ... {% endblock %}

Implémentation (Part II)

Pour notre application, nous allons créer le contenu des pages html à partir de deux templates: base.htmlet index.html Pour intégrer ces templates à notre application, les fichiers doivent respecter une arborescence particulière. Plus précisément, le répertoire de notre projet doit être organisé de la manière suivante:

server.py
/templates
base.html
index.html

Templates HTML

Le fichier base.html intègre le structure de base de chaque page html. Ce fichier définit deux blocs nommée titre et contenu.

<!DOCTYPE html>
<html>
    <head>
        <title>Mon site de gestion de contact</title>
    </head>
    <body>
        <h1>{% block titre %}Mon titre{% endblock %}</h1>

        {% block contenu %}Mon contenu{% endblock %}
    </body>
</html>

Le fichier index.html spécifie comment construire une page html à partir de la liste contact_list passée en entrée. Ce second fichier hérite de la structure du template base.html. En particulier, ce template surcharge le contenu des blocs titre et contenu. Notons que pour construire les différentes lignes du tableau HTML, le template utilise une boucle {% for ... in ... %}{% endfor %}.

{% extends "base.html" %}

{% block titre %}Liste des contacts{% endblock %}

{% block contenu %}
<table>
    <tr>
        <th>Nom</th>
        <th>Prenom</th>
        <th>Telephone</th>
        <th>Email</th>
    </tr>
    {% for contact in contact_list %}
    <tr>
        <td>{{contact.nom}}</td>
        <td>{{contact.prenom}}</td>
        <td>{{contact.tel}}</td>
        <td>{{contact.mail}}</td>
    </tr>
    {% endfor %}
</table>
{% endblock %}

Application Flask

Pour utiliser nos templates Jinja2 avec notre application Flask, nous devons préalablement importer la fonction render_template (from flask import render_template). La fonction render_template prend en entrée plusieurs arguments:

  • un template html disponible dans le repertoire templates.
  • une liste de variables à passer au template.

Le programme suivant montre comment intégrer les templates base.html et index.html dans notre application Flask.

from flask import Flask
from flask import render_template
app = Flask(__name__)

contact_list=[{"nom":"Einstein","prenom":"Albert","tel":"06.00.00.00.00","mail":"albert@emc2.com"},
              {"nom":"Shannon","prenom":"Claude","tel":"06.00.00.00.00","mail":"claude@fesup2fmax.com"},
              {"nom":"Fourier","prenom":"Joseph","tel":"09.00.03.00.01","mail":"joseph@maserie.fr"}]

@app.route('/')
def index():
    return render_template("index.html",contact_list=contact_list)

Le code complet de notre application est disponible sur Github.