- A propos des templates django
- Configuration du système de template de django
- Chargement du template
- Configuration de l'url
- Variables de template django
- Exemple de variable de template django
- Les balises (tags en anglais) du template système
- Héritage de template django
- Vue générique avec la classe TemplateView
1. A propos des templates django
Django propose une approche efficace et pratique pour la création et l'affichage de pages HTML dynamiques grâce à son système de template. Un tel système est constitué d'une section statique dédiée à la sortie HTML, accompagnée d'une syntaxe spéciale détaillant l'insertion du contenu dynamique.
Il est crucial de noter que dans un fichier HTML, l'écriture de code Python n'est pas possible, car le code est interprété uniquement par l'interpréteur Python et non par le navigateur. En raison de la nature statique du langage de balisage HTML et de la nature dynamique du langage de programmation Python, l'utilisation du système de template est nécessaire pour concilier ces deux aspects.
2.Configuration du système de template de django
Avant de configurer le système de template, il faut au préalable
- Créer un projet mysite
- Créer une application myapp: au sein du projet 'mysites'
- Créer un répertoire nommé templates : à la racine de notre de notre django qui sera utilisé comme répertoire de base du système de template
- Créer un fichier myapp.html : au sein du répertoire 'templates' qui sera utilisé comme page d'accueil de l'application myapp.
mysite/templates/myapp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<h2>Welcome to myapp !</h2>
</body>
</html>
Pour configurer le système de template, nous devons fournir certaines entrées dans le fichier mysite/settings.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR,'templates')], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] |
Ce code indique au système de django que le répertoire de template est par défaut 'templates'
3. Chargement du template
Pour charger le template dans une application django, il suffit de l'appeler dans le fichier views.py via le module render:
|
1 2 3 4 5 6 7 |
#myapp/views.py from django.shortcuts import render def index(request): return render(request , 'myapp.html') |
4. Configuration de l'url
|
1 2 3 4 5 6 7 8 9 |
# mysite/urls.py from django.contrib import admin from django.urls import path from myapp import views urlpatterns = [ path('admin/', admin.site.urls), path('myapp/' , views.index) ] |
5. Variables de template django
Le système de template Django utilise une syntaxe spécifique pour utiliser et manipuler les variables, les balises, les expressions, etc.
Les variables de template sont accessibles par {{ }} (accolades doubles).
Exemple
Pour une variable nom ayant la valeur 'Houssam':
|
1 |
Bienvenue {{nom}} |
Affiche à la sortie:
Bienvenue Houssam
6. Exemple de variable de template django
Les variables de template sont déclarées dans le fichier views.py et sont rendues accessibles dans le fichier myapp.html du template. Pour structurer les données, Django utilise la forme de dictionnaire pour regrouper ces variables de template :
Exemple
|
1 2 3 4 5 6 7 8 9 10 |
#myapp/views.py from django.shortcuts import render def index(request): # definir les variable comme etant les cles d'un dictionnaire data_student = {"name" : "Albert" , "email" : "albert@gmail.com" , "phone" : 333659847 , 'age' : 28} return render(request , 'myapp.html' , data_student) |
Les variables ici sont les clés dictionnaire data_student: name , email , phone, age , et peuvent être maintenant appelée au niveau du fichier myapp.html du template:
<!-- templates/myapp.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<h2>Affichage du contenu avec template!!!</h2>
Bienvenue :{{ name }}<br />
Votre email est : {{ email }} <br />
Votre age age est : {{ age }}<br />
Votre phone est : {{ phone }}
</body>
</html>
Ce qui affiche à la sortie du navigateur en tapant l'url : http://127.0.0.1:8000/
7. Les balises (tags en anglais) du template système
Au sein d'un template, les balises (appelées tags en anglais) jouent un rôle essentiel en apportant de la logique au processus de rendu. Une balise de template peut être exploitée dans divers contextes:
- Produire du contenu,
- Servir de structure de contrôle (une instruction if ou pour une boucle),
- Récupérer du contenu d'une base de données
- Permettre l'accès à d'autres balises de modèle.
Les balises de template sont délimitées de {% et %} et peuvent contenir n'importe quel type de structure et variable.
7.1 Cas de la structure conditionnelle if
|
1 2 3 4 5 |
{% if condition %} Affichage des resultats {% else %} autres resultats {% endif %} |
Exemple. structure if ... else ...
On définit une variable age au niveau du fichier myapp/views.py
|
1 2 3 4 5 6 7 8 9 |
#myapp/views.py from django.shortcuts import render def index(request): Age = { 'age':14 } return render(request , 'index.html' , Age) |
On applique la structure conditionnelle If...Else... au niveau du fichier myapp/templates/myapp.html
<!-- templates/myapp.html -->
<html>
<head>
<meta charset="UTF-8">
<title> Index </title>
</head>
<body>
<h2> Test majeur ou mineur ! </h2>
<h3> {% if age < 18 %}</h3>
<p> Ton age est: {{ age }} vous etes mineur ! </p>
{% else %}
<p> Ton age est: {{ age }} vous êtes majeur ! </p>
{% endif %}
</body>
</html>
7.2 La balise Pour...FinPour (for tag)
La balise for facilite le parcours d'une séquence, permettant l'exécution répétée d'instructions et l'exploration du contenu de structures telles que des listes, des tuples, des dictionnaires, et ainsi de suite. Voici la syntaxe associée à la balise for :
{% for x in list %}
<p>La valeur de x est : {{ x }}</p>
{% endfor %}
7.3 Les commentaires
Le système de template de django permet de gérer aussi les commentaires via la syntaxe suivante:
|
1 |
{# Ceci est un commentaire sur une seule ligne #} |
Les commentaires rédigés avec cette syntaxe ne sont pas inclus dans le code source HTML. De plus, il n'est pas possible d'étendre ces commentaires sur plusieurs lignes. Par exemple :
|
1 2 |
{# Ceci n'est pas un commentaire ! #} |
Pour rédiger des commentaires sur plusieurs lignes, on utilise la syntaxe suivante :
|
1 2 3 4 5 |
{% comment%} Ceci est un commentaire étalé sur plusieurs lignes! {% endcomment%} |
8. Héritage de template
L'héritage de templates est une fonctionnalité puissante dans le framework Django qui permet de créer une structure de base pour vos pages web, puis d'étendre cette structure dans des pages spécifiques. Cela favorise la réutilisabilité du code et la gestion efficace de la mise en page. Voici comment fonctionne l'héritage de templates en Django :
- Création d'un Template de Base :
Vous commencez par créer un template de base qui définit la structure commune de toutes les pages de votre site. Par exemple, vous pourriez avoir un fichier appelé base.html qui contient la structure HTML de base de votre site.
<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Titre par défaut{% endblock %}</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
#header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
#content {
margin: 20px;
}
#footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="header">
<h1>Mon Site Web</h1>
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
<div id="footer">
<p>© 2023 Mon Site Web</p>
</div>
</body>
</html>
- Etendre le code aux autres pages HTML {% extends %} :
Dans les templates spécifiques, vous utilisez la balise {% extends %} pour indiquer que le template en cours étend un autre template, en spécifiant le chemin vers le template de base.
<!-- mon_template.html -->
{% extends 'base.html' %}
{% block title %}Page Spécifique{% endblock %}
{% block content %}
<h2>Contenu Spécifique</h2>
<p>Ce contenu est propre à cette page.</p>
{% endblock %}
Dans cet exemple, le bloc {% block title %} dans le template spécifique remplace le bloc correspondant dans le template de base, et de même pour le bloc {% block content %}.
- Réutilisation de Blocs :
Vous pouvez réutiliser les blocs définis dans le template de base dans d'autres templates. Par exemple, si vous avez un bloc "content" défini dans base.html, vous pouvez le réutiliser dans d'autres templates qui étendent également base.html.
<!-- autre_template.html -->
{% extends 'base.html' %}
{% block title %}Une autre page{% endblock %}
{% block content %}
{{ block.super }}
<p>Ce contenu est ajouté à la page spécifique.</p>
{% endblock %}
La syntaxe {{ block.super }} permet d'inclure le contenu du bloc du template de base avant d'ajouter du contenu spécifique.
9. Vue générique avec la classe TemplateView
TemplateView est une classe de vue générique fournie par le framework web Django. Elle est conçue pour simplifier le processus d'affichage de pages basées sur des templates. Ainsi, TemplateView simplifie la création de vues qui ne nécessitent pas une logique de traitement de données complexe et se concentrent principalement sur l'affichage de pages HTML basées sur des templates. Cela permet un développement plus rapide et plus facile pour certaines parties de votre application.
Voici une brève description des caractéristiques principales de TemplateView dans Django :
- Affichage de Templates : TemplateView permet d'afficher des pages web en utilisant des templates. Vous spécifiez le template à utiliser en définissant la variable de classe template_name dans votre vue dérivée.
|
1 2 3 4 |
from django.views.generic import TemplateView class MonExempleVue(TemplateView): template_name = 'mon_template.html' |
- Contexte : Vous pouvez fournir des données supplémentaires au template en surchargeant la méthode get_context_data dans votre vue dérivée. Cela vous permet d'envoyer des variables spécifiques au template pour être utilisées lors du rendu.
|
1 2 3 4 5 6 7 |
class MonExempleVue(TemplateView): template_name = 'mon_template.html' def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) context['ma_variable'] = 'Valeur à afficher' return context |
- Gestion des Requêtes HTTP : TemplateView gère automatiquement les requêtes HTTP et utilise le template spécifié pour générer la réponse. Vous n'avez pas besoin de définir des méthodes spécifiques pour différentes méthodes HTTP (comme get ou post), à moins que vous n'ayez besoin d'un comportement personnalisé.
- Utilisation avec les URLs : Vous pouvez lier une URL à une vue TemplateView dans votre fichier urls.py, ce qui spécifie le chemin de l'URL et la vue à utiliser.
|
1 2 3 4 5 6 |
from django.urls import path from .views import MonExempleVue urlpatterns = [ path('exemple/', MonExempleVue.as_view(), name='exemple'), ] |
Younes Derfoufi
CRMEF OUJDA
