Exercice - Créer des gabarits

  • 6 minutes

Nous allons créer deux gabarits pour afficher la liste des refuges et la page d’informations de chaque refuge. Nous allons également créer un gabarit de base pour garantir la cohérence au sein de notre application.

Créer le gabarit de base

Un gabarit de base est commun à tous les projets Django. Commençons donc par en créer un.

  1. Dans Visual Studio Code, créez un dossier dans dog_shelters que vous nommerez templates.

  2. Créez un fichier dans templates que vous nommerez base.html.

  3. Ajoutez le code HTML suivant à base.html :

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Dog shelter site{% endblock %}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
    <article class="container">
        <section class="jumbotron">
            <h3>Dog shelter application</h3>
        </section>
        {% block content %}
        {% endblock %}    
    </article>
</body>
</html>

    Notes

    Nous utilisons Bootstrap version 4.6 pour notre site. Toutefois, aucune connaissance de Bootstrap n’est nécessaire ici. Nous n’utiliserons qu’une seule classe : jumbotron. Pour le reste, nous utiliserons du code HTML de base.

Notez les deux instructions {% block %}, une pour le titre et l’autre pour le contenu que les pages enfants afficheront. Nous fournissons une valeur par défaut pour title. Ainsi, nous aurons toujours un titre même si aucun n’est défini par une page enfant.

Créer le gabarit de la liste de refuges

Nous allons maintenant créer un autre gabarit pour lister tous les refuges. Nous allons parcourir la liste des refuges et créer des liens vers les informations concernant chaque refuge.

  1. Dans dog_shelters/templates, créez un fichier que vous nommerez shelter_list.html.

  2. Ajoutez le code suivant pour créer le gabarit de la liste de refuges :

    {% extends 'base.html' %}

{% block title %}
Shelter list
{% endblock %}

{% block content %}
<h2>Shelter list</h2>
<div>Here is the list of registered shelters</div>
    {% for shelter in shelters %}
        <div>
            <a href="{% url 'shelter_detail' shelter.id %}">
                {{shelter.name}}
            </a>
        </div>
    {% endfor %}
</div>
{% endblock %}

Nous utilisons les balises block pour indiquer où nous voulons placer nos informations. Nous spécifions la valeur Shelter list pour title, et les éléments content composeront la liste de tous les refuges.

Nous utilisons également une nouvelle balise : url. La balise url génère une URL dynamiquement. Nos URL sont inscrites dans notre URLconf, elles peuvent donc changer. Avec la balise url, nous pouvons indiquer à Django de récupérer l’URL appropriée à partir de l’URLconf, plutôt que de la coder en dur dans un chemin.

La balise url recherche le nom du chemin (en l’occurrence shelter_detail), puis la liste des paramètres attendus. shelter_detail a un paramètre : pk. Il s’agit de la clé primaire, ou ID, du refuge. Nous spécifions l’ID à l’aide de shelter.id.

Créer le gabarit d’informations sur les refuges

Une fois notre gabarit de liste créé, nous pouvons créer le gabarit d’informations.

  1. Dans dog_shelters/templates, créez un fichier que vous nommerez shelter_detail.html.

  2. Ajoutez le code suivant pour créer le gabarit :

    {% extends 'base.html' %}

{% block title %}
Shelter list
{% endblock %}

{% block content %}
<h2>{{ shelter.name }}</h2>
<div>Located in {{ shelter.location }}</div>
{% if shelter.dog_set.all %}
    <div>Here is the list of available dogs</div>
    {% for dog in shelter.dog_set.all %}
        <div>
            <a href="">
                {{dog.name}}
            </a>
        </div>
    {% endfor %}
    </div>
{% else %}
    <div>This shelter has no dogs available for adoption</div>
{% endif %}
{% endblock %}

Notez que dans le corps, nous vérifions si des chiens se trouvent au refuge à l’aide de if shelter.dog_set.all. Si des chiens s’y trouvent, nous affichons la liste à l’aide de for. Dans le cas contraire, nous affichons un message indiquant qu’aucun chien ne s’y trouve. Nous mettrons à jour le lien dans une prochaine unité.

Notes

Vous remarquerez peut-être que nous effectuons deux appels à shelter.dog_set.all. Si vous connaissez bien les bases de données et les ORM, vous vous inquiétez peut-être de ces deux appels à la base de données. En temps normal, deux appels affecteraient les performances. Django dispose d’une mise en cache intégrée qui garantit qu’un seul appel à la base de données sera effectué.

Tester le site

Une fois nos gabarits créés, nous pouvons voir à quoi ressemble notre site !

  1. Enregistrez tous les fichiers.

  2. Ouvrez votre navigateur et accédez à http://localhost:8000.

  3. La liste des refuges doit s’afficher.

    Capture d’écran d’une page montrant deux refuges : Contoso et AdventureWorks.

  4. Sélectionnez Contoso.

  5. La liste des chiens présents au refuge Contoso doit s’afficher.

    Capture d’écran de la page d’informations concernant le refuge Contoso, notamment sur les deux chiens Sammy et Roscoe.