Chapitre III : Les Templates

Enseignantes :
Naima Halouani & Hounaida Moalla
 Plan

 Introduction

 Premier pas avec les templates

 Utilisation des variables

 Les fichiers statiques

 Arborescence de templates

 Utilisation de Bootstrap

2
 Introduction

Définition : Les templates (en français "patron" ou "gabarit") est un

moyen de séparer le contenu d'un site internet (HTML)
au code Python .

Tout ce qui est HTML se trouve dans les templates.

Besoin : L’interpréteur Python ne peut lire que du code Python.

↪ utiliser le système de templates qui sépare entre les contenus
python du html.

Cours Python Avancé 3

 Introduction
Utilité : Les templates permettent de faire plusieurs traitements :

affichage et transformation de variables,

boucles,

conditions,

etc.
mais pas de les modifier.

Avantages : Dans un projet, chaque personne est responsable de la partie du

site qui le concerne. C'est un point essentiel pour le travail
collaboratif.


Les programmeurs Python s’intéressent aux Modèles et
Vues.

les graphistes se concentrent sur les Templates.

Cours Python Avancé 4

Introduction
6
Client
(navigateur)

Serveur
1
(Django)

contenu du
serveur
2 URLs
(application)
URLs .....
(projet) ..... 4
3,1

..... 3 .....
.....
..... 3,
2
VIEWs
..... 5 TEMPLATE
..... </>
.....

Cours Python Avancé 5

 Introduction
nom_appl
Architecture : urls

templates
Tous les templates d’une application doivent
être regroupés dans un seul emplacement.
nom_appl

...
Ajouter manuellement un répertoire
« templates/nom_appl » dans lequel views
seront regroupés tous les templates de
l’application. nom_projet
settings

urls
NB : Pour ajouter des templates au projet, il faut ...
créer le répertoire « templates » sous le
répertoire racine du projet. db.sqlite3
manage.py
templates

Cours Python Avancé 6

Premier pas avec les templates(1)
Etape 1 : Dans le fichier setting.py, il faut ajouter le chemin du répertoire ajouté :
import os
from pathlib import Path
BASE_DIR = Path(__file__).resolve().parent.parent
...
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',
],
},
},
La rubrique TEMPLATES contient DIRS qui indique à django d’aller au dossier
]
templates qui se trouve à la base du repertoire principal BASE_DIR,
Cours Python Avancé 7
Premier pas avec les templates(2)

Etape 2 : Pour utiliser le système de templates, il faut créer un fichier "index.html"

dans « templates/nom_appl », ce fichier sera utilisé comme support de
templates (GABARIT):

<p> Mon template Django..........</p>

Cours Python Avancé 8

Premier pas avec les templates(3)

Etape 3 : Configurer views.py avec le template : nom de

l’application
from django.shortcuts import render views.py
from django.template import loader
from django.http import HttpResponse

def index(request):
template=loader.get_template('magasin/
index.html')

Le module return HttpResponse(template.render())
django.template.loader fournit des fonctions telles que
get_template() pour le chargement de templates ;

la classe HttpResponse est la classe qui s’occupe des requêtes http ;

index(request) est la méthode qui s’occupe de l’affichage du résultat ;

return permet de renvoyer dans la réponse de la requête l’affichage du résultat ;

render() indique le rendu du template : elle permet de construire la réponse
HTML en fonction d’un fichier template et éventuellement de variables.
Cours Python Avancé 9
Les Gabarits
Un gabarit est un fichier texte.

Il peut générer tout format basé sur du texte (HTML, XML, CSV, etc.).

Un gabarit contient :
- des variables qui sont remplacées par des valeurs lorsque le gabarit
est évalué,
- ainsi que des balises qui contrôlent la logique du gabarit.

Les gabarits rassemblent un code HTML dans lequel, on intègre du code

Python.

Cours Python Avancé 10

 Les GabaritsLes variables (1)
Variables simples

Etape 1 : Dans un projet, on pourra avoir besoin d’afficher des variables python
dans un contenu html.

Si on insère du contenu python dans un code html, ce dernier ne sera pas

interprété.

↪ Solution : utilisation des variables de templates,

def index(request) : views.py

context={'nom' : 'Moalla & Halouani'}
return render(request, 'magasin/index.html’,context)

La variable data sera renvoyée au template par la fonction render().

Cours Python Avancé 11

 Les GabaritsLes variables (2)
Variables simples

Etape 2 :

La variable nom sera consommée au niveau du template.

↪ Pour qu’elle soit évaluée (interprétée), elle doit être mise entre double
accolades.

<p> Mon template Django..........</p> index.html

c'est {{nom}} qui est avec vous

Tester.

Cours Python Avancé 12

Les GabaritsLes variables (3)
Liste d’enregistrements

Parfois, nous avons besoin d’afficher la liste des enregistrements d’une table.

from .models import Produit views.py

def mes_articles(request):
list= Produit.objects.all()
context={‘liste’:list}
return
render(request,'magasin/mes_articles.html’,context)

urlpatterns = [ urls.py
path('', views.mes_articles,name=‘articles’),
]

Cours Python Avancé 13

Les GabaritsLes variables (4)
Liste d’enregistrements
<div class="container"> mes_articles.html
<div class='row'>
<div class="col-md-12 text-center"> nouveau
<h2>Mes articles...... </h2> template
</div>
<div class="col-md-12">
<h2>{{liste}}</h2>
</div>
</div>
</div>

Cours Python Avancé 14

 Les GabaritsLes balises (1)

Parfois, pour des variables composées, nous aurons besoin d’une boucle ou
d’une structure de contrôle pour afficher le contenu d’une variable de template.
Etape 2 : Pour afficher toutes les données du dictionnaire dans le template,
nous aurons besoin d’une boucle for :
<div class="container"> mes_articles.html
<div class='row'>
<div class="col-md-12 text-center">
<h2>Mes articles...... </h2>
</div>
<div class="col-md-12">
<!--<h2>{{liste}}</h2> -->
{% for elet in liste %}
15
{{ elet }} <br/>
{% endfor %}
</div>
</div>
</div>
Cours Python Avancé
 Les GabaritsLes balises (3)

Il est possible de spécifier quelques attributs à afficher :

.... mes_articles.html
{% for elet in liste %}
{{elet.libelle}} {{elet.description}} {{elet.place}} {{elet.fournisseur}} <br/>
{% endfor %}

Cours Python Avancé 16

Les GabaritsLes balises (2)

Nous pourrons aussi afficher le produit s’il est cher ou non selon son prix > ou <
1000 :

...
{% for elet in liste %}
{% if elet.prix <1000 %}
{{elet}}
le prix est {{elet.prix}} : pas cher
{% else %}
{{elet}}
le prix est {{elet.prix}} : très cher
Cours Python Avancé 17
{% endif %}
{% endfor %}
 Les fichiers statiques
Les sites Web peuvent afficher des fichiers nom_appl
supplémentaires tels que des images, du admin
JavaScript ou du CSS.
models

urls
Dans Django, ces fichiers sont
appelés « fichiers statiques ». static

...

Pour utiliser les fichiers statiques, il va falloir les

stocker dans un dossier. nom_projet
Donc, créer un répertoire ‘static’ sous l’application. settings

urls
↪ Sous ce répertoire, on pourra créer plusieurs
autres sous répertoires (à titre organisationnel) ...
css, js, img, ... pour y mettre nos fichiers statiques db.sqlite3
de différents types.
manage.py
Cours Python Avancé 18
Les fichiers statiques
Dans le fichier setting.py, il doit exister par défaut une rubrique STATIC_URL qui
contient par défaut ‘/static/’ et une rubrique INSTALLED_APPS qui contient
l’application “django.contrib.staticfiles’.

... setting.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'catalogue',
]
...
STATIC_URL = '/static/'
STATIC_URL indique l’URL du dossier depuis lequel vos fichiers statiques
seront accessibles.
Cours Python Avancé 19
Les fichiers statiques
Si les fichiers statiques sont mis dans le dossier nom_appl
racine, ils ne seront pas spécifiques à une admin
application particulière.
models

Le tuple STATICFILES_DIRS sera utilisé pour urls

indiquer à Django où rechercher les fichiers
...
statiques.

nom_projet
STATICFILES_DIRS=[ settings.py
os.path.join(BASE_DIR,'static'), settings
] urls
...
Ça permet de renseigner le chemin du dossier
‘static’ sur le disque dur et lui assigner un préfixe static
d’URL dans le settings.py. db.sqlite3

manage.py

Cours Python Avancé 20

Les fichiers statiques
{% load static %} index.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>

<title>On continue avec les templates......</title>

<link rel='stylesheet' type='text/css' media='screen'
href="{% static 'css/index.css'%}">
</head>
<body>
<h1>On continue avec les templates......</h1>
</body>
</html>

la tag {% load static %} permet de charger le répertoire static.

Le href permet de charger la feuille css.
Cours Python Avancé 21
Les fichiers statiques

Et dans "index.css", il faut ajouter le style css désiré :

body{ index.css
background-color: red;
}

NB : rappelez vous de reconfigurer urls.py de l’application

sur le fichier index.html que vous venez de modifier :
url(r'^$', views.index)

Cours Python Avancé 22

Arborescence de templates(1)
On pourra structurer encore plus nos fichiers css et notre template en
créant une arborescence de templates.

Besoin : nous voulons répéter des données dans plusieurs templates.

Solution : réutilisation du template.

Moyen : héritage de templates.

L’héritage permet d’éliminer les contenus redondants au niveau des

gabarits.

Cours Python Avancé 23

 Arborescence de templates(3)
{% load static %} base.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>{% block title %} {% endblock %}</title>
<link rel='stylesheet' type='text/css' media='screen'
href="{% static 'css/base.css' %}">
{% block styles %} {% endblock %} balises
</head> génériques
<body>
<header>
Toujours avec les templates ....
</header>
{% block content %} {% endblock content%}
<footer>
…….
</footer>
</body>
</html>

Cours Python Avancé 24

Arborescence de templates(4)


Les balises <header> et <footer> permettent d’afficher leur
contenu sur toutes les pages.

la balise block définit 3 blocs que les gabarits enfants peuvent
remplir.
↪ La balise block ne fait que signaler au moteur de gabarits
qu’un gabarit enfant peut surcharger ces portions du gabarit.

Cours Python Avancé 25

Arborescence de templates(5)
{% extends 'magasin/base.html' %} mes_articles.html

{% block content %}
<div class="col-md-12 text-center">
<h2>Liste de Produits : </h2>
</div>

{% for article in liste %}

{{article.libelle}}{{article.description}}{{article.prix}}DT. <br/>
---------------------------<br/>
{% endfor %}
{% endblock content%}

{% extends %} : permet d’étendre le fichier base.html par index.html

{% block content %} : permet de définir le contenu du bloc générique qui a
été déclaré dans le template père base.html .

NB : rappelez vous de reconfigurer urls.py de l’application sur le fichier

mes_articles.html que vous venez de modifier :
url(r'^$', views.mes_articles)
Cours Python Avancé 26
Arborescence de templates(6)
{% load static %} base.html
<!DOCTYPE html>
<html>
<head>
….
</head>
<body>

{% include 'navbar.html' %}
{% block content %} {% endblock content%}
</body>
</html>

{% include ‘…’ %} :

 Charge un modèle et le restitue avec le contexte actuel. C'est

une manière d'inclure d'autres templates dans un template.

 Le contenu du fichier ‘navbar.html’ sera inclut dans

‘base.html’

Cours Python Avancé 27

Utilisation de Bootstrap(1)
Bootstrap présente des feuilles de style css prêtes à utliser, des
boutons, ...

Pour cela, allez au navigateur, et chercher bootstrap. Entrer au

premier lien/ get started/css.

Cours Python Avancé 28

Utilisation de Bootstrap(2)

Cours Python Avancé 29

Utilisation de Bootstrap(3)

Copier la syntaxe fournie et la coller dans base.html avant le bloc

{% block styles %} :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">

NB : vous pouvez aussi ajouter d’autres références bootstrap telles que JS,
Navbar, ...

Si vous tester votre site, vous trouverez l’utilisation du css pour changer la
police d’affichage et/ou l’ajout de la barre de menu,

Cours Python Avancé 30

Utilisation de Bootstrap(4)

Maintenant, nous pouvons ajouter des divisions dans notre site pour bien
placer les éléments de la page.

Dans index.html, dans le bloc body, ajouter:

{% block body %}
<div class=container>
<h1>Index.....</h1>
</div>
{% endblock %}

Remarquer que la création d’un conteneur a pris la position du centre de

l’interface avec réservation de marges à droite et à gauche.

Si vous mettez <div class=container.fluid>, ceci permettra

d’occuper tout l’espace de l’interface sans marges.
Cours Python Avancé 31
Utilisation de Bootstrap(5)

On peut ajouter une grille dans notre interface :

{% block body %}
<div class=container>
<div class=”row”>
<div class=”col”>
<l1> Index </l1>
<p> bien venue
</p>
</div>
</div>
<h1>Index.....</h1>
</div>
NB : Pour une{% endblock %}
présentation plus ergonomique, nous pourrons utiliser les
grilles proposées par bootstrap.

Cours Python Avancé 32