Création des templates Django de notre application

Maintenant que nous connaissons le langage de template de Django, nous allons créer les premiers templates de notre application chistera : dashboard.html et backlog.html.

Le template de base

Comme souvent dans un projet Django, nous allons commencer par créer un template de base, qui sera étendu par nos autres templates.

Créons un template nommé base.html dans le répertoire templates/ :

mon_template_de_base.html
<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}Miage Scrum{% endblock %}</title>
        <meta charset="utf-8">
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>

Simple, voire simpliste, mais suffisant pour le moment !

Affichage du tableau de bord : le template dashboard.html

Notre tableau de bord doit afficher une liste des équipes ainsi qu'une liste des backlogs. À cet effet, le contrôleur (view) dashboard place dans le contexte deux variables :

  • backlogs = ProductBacklog.objects.all()
  • teams = Team.objects.all()

Nous allons exploiter ces variables dans le template dashboard.html :

{% extends "base.html" %}

{% block title %}Tableau de bord{% endblock %}

{% block body %}
    <h1>Tableau de bord</h1>

    <h2>Backlogs</h2>
    <ul>
        {% for backlog in backlogs %}
            <li><a href="{% url 'chistera:backlog' backlog.id %}">{{ backlog.name }}</a></li>
        {% endfor %}
    </ul>

    <h2>Équipes</h2>
    <ul>
        {% for team in teams %}
            <li>{{ team.name }} ({% for member in team.members.all %}{{ member.username }}{% if not forloop.last %}, {% endif %}{% endfor %})</li>
        {% endfor %}
    </ul>
{% endblock %}

Quelques remarques à propos de ce template :

  • Ce template ne fait qu'étendre notre template de base, en redéfinissant le contenu des blocks title et body.
  • Pour la présentation des liens vers les différents backlogs, nous ne hard-codons pas les URL. Au lieu de ça, nous restons DRY en utilisant le tag url fourni par Django, qui permet de calculer dynamiquement les URL en utilisant le nom de la règle de mapping définie dans le contrôleur frontal.

En chargeant l'URL http://127.0.0.1:8000/dashboard/ dans un navigateur, nous obtenons quelques chose qui ressemble maintenant à ceci :

Django template dashboard

Affichage d'un backlog : le template backlog.html

La visualisation d'un backlog permet de consulter les user stories présentes dans le backlog.

Le template backlog.html étend lui-aussi le template base.html :

{% extends "base.html" %}

{% block title %}Backlog {{ backlog.name }}{% endblock %}

{% block body %}
    <h1>{{ backlog.name }}</h1>

    <ul>
        {% for story in stories %}
            <li>{{ story.name }}</li>
        {% endfor %}
    </ul>
{% endblock %}

En chargeant l'URL http://127.0.0.1:8000/backlog/1 dans un navigateur, nous visualisons le backlog dont l'id est 1 :

Django template backlog