Templates

Afficher et recueillir les données avec les gabarits Django et l'architecture MVT.

Séparer les gabarits

Le but est de séparer le HTML valable pour l'ensemble du site du HTML spécifique à la page.

• pong/template/pong/log/log.html : le gabarit de la page.
• pong/template/pong/base.html : le gabarit de base.

Créer un gabarit de base

La balise {% block %} est un espace réservé dans lequel on peut placer du contenu ; elle se termine par {% endblock %}. Notre block ici s'appelle content.

Notre gabarit de base est l'endroit idéal pour charger un fichier CSS en utilisant la balise de gabarits static.

Hériter du gabarit de base

Pour chaque fichier HTML qui se servira de la base, mettre au début :

{% extends 'pong/base.html' %}

{% block content %}
<ul>
    <h1>Hello Django !</h1>
    ...
</ul>
{% endblock %}

Pour itérer sur une liste dans un modèle :

{# pong/template/pong/log/log.html #}

<p>Les joueurs sont :</p>
<ul>
    {% for player in players %}
    <li>{{ player.name }}</li>
    {% endfor %}
</ul>

Instruction if dans un gabarit :

<p>
    Il y a
    {% if players|length == 0 %}
        pas de
    {% elif players|length == 1 %}
        qu'un seul
    {% else %}
        beaucoup de
    {% endif %}
        players.
</p>

Appliquer des filtres de gabarits

Les filtres permettent d'appliquer un certain formatage.

<li>{{ player.name|upper }}</li>   <!-- Met le nom en majuscule -->

<li>{{ player.name|length }}</li>  <!-- Donne la longueur du nom -->

Ajouter un style CSS

Les fichiers CSS sont appelés fichiers statiques.

Création d'un dossier et du fichier de style :

$ mkdir pong/static/pong
$ touch log.css

Récapitulatif de l'architecture MVT

Voici les trois principaux composants de l'architecture MVT :

• M : les modèles.
• V : les vues.
• T : les templates.