Création des templates Django de notre application
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/
:
<!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
etbody
. - 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 :
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 :