Les Templates django

Dans l’article précédent on a appris ce que sont les vues en django (Partie 2).

Lorsque vous développez une application avec Django, l’une des étapes essentielles est la création de templates HTML pour afficher du contenu dynamique. Ce guide va vous montrer comment utiliser les templates dans Django pour afficher des listes d’objets, gérer des boucles, et styliser le tout avec CSS.

Dans cet article, nous allons explorer comment gérer des templates HTML dans un projet Django. À partir d’un projet et d’une application fonctionnelle, nous allons ajouter une fonctionnalité pour afficher une liste de messages, intégrer des boucles et styliser la page. L’objectif est de comprendre le rôle des templates dans la création d’une interface dynamique.

Créer des Templates HTML avec Django

Une fois votre projet Django en place et fonctionnel, l’une des premières choses à faire est de créer un template HTML pour afficher vos données. Dans notre exemple, nous avons un template HTML qui va afficher une liste de messages. Ces messages sont fournis par une variable de contexte définie dans le fichier views.py. Cette variable context contient une clé messages, elle-même associée à une liste d’objets ayant des attributs tels que content, username, et created_at.

L’objectif est de rendre ces messages dynamiques en les affichant plusieurs fois sur la page. Pour cela, nous allons utiliser une boucle dans le fichier index.html.

Utiliser les Boucles et Variables dans les Templates Django

Dans Django, il existe deux types de balises dans les templates : les doubles accolades {{ }}, utilisées pour afficher des variables, et les accolades avec pourcentage {% %}, utilisées pour insérer de la logique dans le template.

Pour afficher une liste de messages, nous utilisons une boucle for dans notre template HTML. Elle est définie ainsi :

{% for message in messages %}
<div>{{ message.content }}</div>
<div>{{ message.username }}</div>
<div>{{ message.created_at }}</div>
{% endfor %}

Cela permet d’afficher chaque message avec son contenu, son nom d’utilisateur et la date de création. Cette approche fonctionne de manière similaire à une boucle en Python. La boucle est ouverte avec {% for %} et fermée avec {% endfor %}.

La Hérédité de Templates : Simplifier la Structure de Vos Pages

Django facilite la réutilisation du code grâce à la notion de héritage de templates. Au lieu de copier-coller le même code dans plusieurs fichiers, vous pouvez définir un fichier de base, qui sera étendu par d’autres fichiers. Par exemple, un fichier base.html pourrait contenir la structure de base de votre site, comme l’en-tête et le pied de page, tandis que des fichiers spécifiques, comme index.html, contiendraient le contenu unique de chaque page.

Voici comment vous pouvez créer un template qui hérite d’un autre :

{% extends 'base.html' %} {% block content %}
<!-- Contenu spécifique à cette page -->
{% endblock %}

Ce mécanisme permet de simplifier la structure de votre site et de maintenir un code plus propre.

Styliser Vos Templates avec CSS

Pour rendre vos pages plus attrayantes, vous aurez besoin de fichiers CSS. Django gère les fichiers statiques comme le CSS, les images et le JavaScript dans un dossier spécial appelé static. Il est essentiel de bien structurer ce dossier pour que Django puisse charger correctement ces fichiers.

Voici comment vous pouvez lier un fichier CSS à votre template :

{% load static %} <link rel="stylesheet" href="{% static 'css/style.css' %}" />

Assurez-vous que votre fichier CSS est bien localisé dans le dossier static/css/.

Rendre Vos Pages Dynamiques avec les Templates Django

Une fois les templates en place, vous pouvez rendre vos pages encore plus dynamiques en affichant des listes d’objets provenant de votre base de données. Dans cet article, nous avons simulé une liste de messages, mais la prochaine étape serait de connecter ces messages à une base de données.

Django vous permet de créer des modèles pour gérer vos données et les afficher de manière dynamique dans vos templates. Cela évite d’utiliser des données statiques comme des variables dans views.py et permet d’introduire un système de gestion de contenu.

Conclusion

Dans cet article, nous avons vu comment créer et manipuler des templates dans Django. Grâce aux boucles, à l’utilisation des variables et à l’héritage de templates, vous pouvez structurer votre application de manière efficace et maintenir un code propre et réutilisable. Pour aller plus loin, il serait intéressant de connecter ces templates à une base de données et de manipuler des objets réels.

La prochaine étape dans notre projet sera d’introduire des objets de base de données avec des modèles, afin de rendre notre application encore plus dynamique.