DY

DelahayeYourself

modules / LP Web Dynamique /

TP06: Jinja

Jinja

Flask logo

Jinja est un moteur de template écrit en Python par l'équipe de Flask. Sa simplicité, son élégance et sa puissance en font l'un des meilleurs moteur de template existant. Le moteur de template Twig utiliser massivement dans le monde PHP en est une pâle traduction.

Moteur de template

Générer du code HTML via Python n'est pas fun voir fastidieux, car vous devez vous-même échapper le code HTML pour que l'application soit sécurisée. Flask nous propose automatiquement d'utiliser le moteur de template Jinja.

Jinja & Flask

Pour rendre un template, vous pouvez utiliser la méthode render_template(). Tout ce que vous avez à faire est de fournir le nom du template et les variables que vous souhaitez transmettre au moteur de template sous forme d'arguments.

Voici un exemple simple de rendu d’un template:

from flask import render_template

@app.route('/hello/')
@app.route('/hello/<name>')
def hello(name=None):
    return render_template('hello.html', name=name)

Flask va chercher automatiquement le template dans le dossier templates qui se trouve à la racine du projet. Pensez à lire la documentation de Jinja pour découvrir sa puissance.

Voici un exemple de template:

<!DOCTYPE html>
<title>Hello from Flask</title>
{% if name %}
  <h1>Hello {{ name }}!</h1>
{% else %}
  <h1>Hello, World!</h1>
{% endif %}
À vous de jouer
  1. Écrivez le test d'intégrations pour la route hello,
  2. Modifiez la route hello pour rendre le template hello.html,
  3. Créez un template pour les routes index, say_hello et pour les opérations arithmétiques (il est possible d'utiliser la même pour ces routes-ci).
Héritage de template

La partie la plus puissante de Jinja est l’héritage des templates. L'héritage de templates vous permet de créer un «squelette» de base contenant tous les éléments communs de votre site et définir des blocs que les modèles enfants peuvent remplacer.

Cela semble compliqué mais reste très basique. Il est plus facile de comprendre cela en commençant par un exemple.

Ce template, que nous appellerons base.html, définit un simple squelette de document HTML. C’est le travail des templates «enfants» de remplir les blocs vides de contenu:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}{% endblock %} - My Webpage</title>
</head>
<body>
    <main>{% block content %}{% endblock %}</main>
    <footer>
        {% block footer %}
        &copy; Copyright 2008 by <a href="http://domain.invalid/">you</a>.
        {% endblock %}
    </footer>
</body>
</html>

Dans cet exemple, les balises {% block %} définissent trois blocs que les modèles enfants peuvent remplir.

La balise de bloc indique simplement au moteur de template qu'un modèle enfant peut remplacer les espaces réservés qu'il contient.

Un modèle enfant pourrait ressembler à ceci:

{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block content %}
    <h1>Index</h1>
    <p class="important">
      Welcome to my awesome homepage.
    </p>
{% endblock %}

La balise {% extend %} est la clé ici. Il indique au moteur de modèle que ce modèle «étend» un autre modèle. Lorsque le système de gabarit évalue ce gabarit, il localise d'abord le parent. La balise extend devrait être la première balise du modèle.

À vous de jouer
  1. Créer un template de base,
  2. Faites en hériter chacun de vos templates.

URL

URL et redirection

Pour créer une URL vers une fonction spécifique, utilisez la fonction url_for().

Elle accepte le nom de la fonction en tant que premier argument et un nombre quelconque d'arguments, chacun correspondant à une partie variable de la règle d'URL. Des parties variables inconnues sont ajoutées à l'URL en tant que paramètres de requête.

Pourquoi créer des URL en utilisant la fonction d'inversion d'URL url_for() au lieu de les coder en dur dans vos templates ?

Voici un exemple de génération d'url:

<a href="{{ url_for('say_hello', name='Ben') }}">Hello Ben ?</a>
Fichier statique

Un site web sans feuille de style est assez pauvre, il convient donc d'utiliser des fichiers statiques pour le mettre en forme.

Même si il s'agit du boulot du serveur HTTP, Flask s'occupe de générer l'url vers les fichiers statiques.

Il faut tout d'abord créer un répertoire static à la racine du projet. Pour générer les URL des fichier statiques, il faut utiliser la fonction url_for() avec le endpoint static. Par exemple:

<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
À vous de jouer
  1. Créer un menu de navigation avec un lien pour la page d'accueil et la page hello,
  2. Au sein de la page d'accueil créer des liens vers chaque page que nous avons créer (say_hello, opérations arithmétiques, etc.)
  3. Ajouter normalize.css et un fichier de style CSS à votre projet.

Félications ! Nous venons de découvrir les bases du microframework Flask ensemble.