• 20 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 12/12/19

Organisez les gabarits

Log in or subscribe for free to enjoy all this course has to offer!

Dans le chapitre précédent vous avez appris à ajouter un thème à une application Django. Dans celui-ci, vous finirez la page d'accueil !

Avant d'afficher les albums dans la page d'accueil, réfléchissez au contenu qui se répète entre toutes les vues. Pour cela, regardez de nouveau les maquettes du site.

Pour ma part, je repère les zones suivantes :

  • head.

  • header : titre, sous-titre et barre de navigation.

  • le rectangle central semi-opaque (sans le contenu car celui-ci peut varier).

  • footer : bandeau en bas de page.

Voyons tout de suite comment créer un gabarit de base réutilisable par les autres.

Utiliser un gabarit dans un autre

Etendre un gabarit

Je vous propose de créer un nouveau gabarit, base.html, et d'y coller le code qui risque de se répéter. Faites l'exercice par vous-même puis regardez ma solution !

Je vous ai dit que chaque gabarit permettait de générer du HTML grâce à Python. Plus précisément, vous avez accès à beaucoup de balises que nous verrons au fur et à mesure de ce cours. Il ne s'agit que de fonctions définies au préalable par Django pour faciliter la vie. Découvrez-les toutes dans la documentation.

Une des fonctionnalités extrêmement intéressantes des gabarits est la possibilité d'avoir un template parent et des templates enfants. Oui, exactement de la même manière qu'une classe peut hériter d'une autre en programmation orientée objet !

Le gabarit parent du projet est base.html. Comment l'utiliser dans index.html? Grâce à la balise extends.

Supprimez le contenu de index.html et remplacez-le par la phrase suivante :

index.html

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

Retournez sur le navigateur et rechargez la page d'accueil : le contenu de base.html apparaît bien !

A présent, réfléchissons à la manière d'afficher la liste des derniers albums ajoutés dans le catalogue.

Comment faire pour indiquer que l'on souhaite ajouter du contenu à un certain endroit du gabarit de base ? Cela passe par deux étapes :

  • dans le gabarit parent, notifier que certaines zones peuvent être remplies par l'enfant.

  • dans le gabarit enfant, noter les informations à utiliser par le gabarit parent aux endroits souhaités.

Les parties personnalisables du gabarit parent peuvent être vues comme des zones optionnelles que vous choisissez d'utiliser.

Afin de notifier que certaines parties pourront varier, utilisez le mot-clé block puis le nom de la zone. Fermez le block tout de suite après :

base.html

<div class="container">
  <div class="row">
    <div class="box">
      {% block content %}{% endblock %}
    </div>
  </div>
</div>

Dans le gabarit enfant, utilisez également un block mais intégrez le contenu à utiliser par le parent avant la fermeture.

index.html

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

{% block content %}

Je me suis faufilé dans le gabarit parent. Salut !

{% endblock %}

Et voici le résultat :

Parfait ! Nous verrons un peu plus tard, dans ce chapitre, comment passer des valeurs de la vue au gabarit. Avant, laissez-moi vous montrer une autre manière d'intégrer un gabarit dans un autre !

Inclure un gabarit (list.html)

Une autre partie de nos gabarits sera amenée à se répéter : la liste des albums. En effet, les pages suivantes affichent plusieurs CD :

  • la page d'accueil

  • la page "tous nos disques"

  • la page des résultats de recherche

Comment inclure un gabarit dans un autre ? Grâce à la balise include !

Créez un nouveau gabarit que vous appellerez list.html et ajoutez-y le contenu que vous souhaitez (vous le changerez plus tard).

list.html

On ne me laisse pas entrer par la porte ? J'entre par la fenêtre !

Puis utilisez la balise include à l'endroit où vous souhaitez intégrer le gabarit :

index.html

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


{% block content %}

  Je me suis faufilé dans le gabarit parent. Salut !

  {% include 'store/list.html' %}

{% endblock %}

Retournez à votre navigateur et rechargez la page. Les deux textes apparaissent !

Que manque-t-il ? De vraies données ! Voyons comment passer des variables à un gabarit à partir de la vue.

Ecrire en Python dans un gabarit

Passer des paramètres à un gabarit

Revenons à nos vues. Comment envoyer les albums à un gabarit ? La méthode render prend en premier paramètre un dictionnaire de variables à utiliser dans le gabarit. Vous pouvez donc écrire ceci :

views.py

def index(request):
    albums = Album.objects.filter(available=True).order_by('-created_at')[:12]
    ...
    return HttpResponse(template.render({'albums': albums}, request=request))

Ces variables sont ajoutées au contexte d'un gabarit, autrement dit aux objets Python qu'il peut utiliser. C'est pourquoi la convention veut que ce dictionnaire se nomme context :

views.py

def index(request):
    albums = Album.objects.filter(available=True).order_by('-created_at')[:12]
    ...
    context = {
        'albums': albums
    }
    return HttpResponse(template.render(context, request=request))

Afficher un paramètre dans un gabarit

Avant de vous montrer comment faire, revenons sur la manière d'utiliser des objets Python dans un gabarit. Jusqu'à maintenant, nous avons vu la notation suivante :

{% balise_python %}

Elle exécute la fonction indiquée entre crochets. Par exemple, vous pouvez utiliser une boucle for :

<ul>
{% for title in variable_name %}
    <li></li>
{% endfor %}
</ul>

La boucle sera exécutée mais la valeur de la variable ne sera pas affichée. Pour que ce soit le cas, remplacez les pourcentages par un second crochet. Comme ceci :

{{ variable_name }}

Par exemple :

<ul>
{% for album in albums %}
    <li>{{ album }}</li>
{% endfor %}
</ul>

D'ailleurs, vous pouvez l'utiliser dans list.html !`

list.html

<ul>
{% for album in albums %}
    <li>{{ album.title }}</li>
{% endfor %}
</ul>

Résultat :

Ajoutons quelques éléments cosmétiques :

list.html

{% for album in albums %}
    <div class="col-sm-4 text-center">
        <a href="/">
          <img class="img-responsive" src="{{ album.picture }}" alt="{{ album.title }}">
        </a>
        <h3><a href="/">{{ album.title }}</a></h3>
        {% for artist in album.artists.all %}
            <p>{{ artist.name }}</p>
        {% endfor %}
    </div>
    {% if forloop.counter|divisibleby:3 %}<div class="clearfix"></div>{% endif %}
{% endfor %}

C'est terminé ! Dans le prochain chapitre vous découvrirez comment ajouter des informations essentielles, telles que l'URL vers la page de détails d'un album. A tout de suite !

Code de ce chapitre

Retrouvez le code associé à ce chapitre sur le dépôt GitHub.

Example of certificate of achievement
Example of certificate of achievement