Templates Django

Un template c'est quoi?

Les templates (en français on utilise les mots " patron " ou " gabarit ") est un moyen de séparer le contenu d'un site internet au code . Ainsi chaque coeur de métier peut se concentrer sur ses besoins. Pour faire simple tout ce qui est HTML se trouve dans les templates . Ainsi les graphistes qui ne connaissent rien à la programmation python par exemple peuvent travailler en toute liberté sans prendre de risque de perturber un projet. Et récipriquement cela empêche les programmeurs de faire des bêtises au niveau du rendu. Finalement chacun est responsable de la partie du site qui le concerne. C'est un point essentiel pour le travail collaboratif.

Le template de Django

Comme à son habitude Django a choisi le moteur de template le plus efficace et puissant. Facile à prendre en main, il est en plus très complet.

Exemple d'utilisation

Nous avons vu dans des chapitres précédents qu'un template peut contenir des variables. Il est donc possible d'afficher des variables à conditions de lui indiquer. Ces variables sont un contexte que la vue lui envoie.

eboutique/urls.py

# coding: utf-8

from django.conf.urls import patterns, include, url
from backoffice.views import *

urlpatterns = patterns('',
    url(r'^product/$', ProductView.as_view()),
)

La vue:

backoffice/views.py

#!/usr/bin/python
# coding: utf-8

from django.views.generic import *

class ProductView(TemplateView):
   
    template_name="backoffice/templates/product.html"
    
    def get_context_data(self, **kwargs):
        context = super(ProductView, self).get_context_data(**kwargs)
        context['firstname'] = "olivier"
        context['lastname'] = "engel"
        context['towns'] = ["Mulhouse", "Strasbourg", "Marseille"]
        context['data'] = {"age": 30, "genre": "male", "hobbies": "python"}
        context['years'] = (1900, 2000, 2019)
        return context

Dans cet exemple nous avons utilisé une simple variable en chaine de caractères, une liste, un dictionnaire et un tuple. Voyons maintenant comment récupérer les informations dans le template:

backoffice/templates/product.html

<p>Bonjour {{firstname}} {{lastname}}</p>

<ul>
{% for town in towns %}
    <li>{{town}}</li>
{% endfor %}
</ul>

<p>Age: {{data.age}}</p>

<ul>
{% for year in years %}
    <li>{{year}}</li>
{% endfor %}
</ul>

Voyons le résultat:

A noter que les morceaux de code contenus dans les caractères {% %} sont executés par Django mais ne sont pas affichés. On les nomme des " templates tags ".

Lire les attributs et les méthodes d'un objet

La logique est la même pour la lecture des objets python:

Notre objet:

class Obj(object):
    
    def __init__(self, firstname, lastname, age):
        
        self.firstname = firstname
        self.lastname  = lastname
        self.age       = age
    
    def getAge(self):
        
        return self.age

Notre vue:

class ProductView(TemplateView):
   
    template_name="backoffice/templates/product.html"
    
    def get_context_data(self, **kwargs):
        context = super(ProductView, self).get_context_data(**kwargs)
        context['obj'] = Obj("Olivier", "engel", 30) 
        return context

Et le template:

<p>{{obj.firstname}} {{obj.lastname}} - {{obj.getAge}} ans</p>

Comparaisons

Vous pouvez comparer les variables et proposer une action en fonction de leurs valeurs:

def get_context_data(self, **kwargs):
    context = super(ProductView, self).get_context_data(**kwargs)
    context['firstname'] = "olivier"
    context['age'] = 30 
    return context

{% if firstname == "olivier" %}
OLIVIER
{% else %}
QQUN D'AUTRE
{% endif %}

Il est possible de comparer une valeur numérique avec >, >=,

{% if age >= 30 %}
VIEUX
{% else %}
JEUNE
{% endif %}

IN et NOT IN

Vous pouvez vérifier la présence d'une clé:

def get_context_data(self, **kwargs):
    context = super(ProductView, self).get_context_data(**kwargs)
    context['info'] = {"age": 30}
    return context

{% if "age" in info %}
YES
{% else %}
NO
{% endif %}

Les filtres templates

Vous pouvez executer des fonctions (filtres) sur des variables au niveau du template.

Dans l'exemple suivant nous appellons une variable qui n'existe pas. Nous prévoyons dans le template un texte qui s'affichera dans le cas où cette variable n'existe pas:

{{info.test|default:"Pas d'info"}}

Vous pouvez églament mettre un texte en capital:

{{ma_variable|upper}}

Ou changez le format de la date:

context['ma_date'] = timezone.now()

{{ma_date|date:"Y-n-j"}}

Retournera:

2019-9-10

Les formats de date possibles:

Les filtres de base

Ecrire des commentaire

vous pouvez écrire des commentaires (texte non visible par l'utilisateur) comme ceci:

{# Ceci est un commentaire #}

Autoescape

Vous pouvez automatiser l'échappement comme ceci:

{% autoescape on %}
    Bonjour {{ name }}
{% endautoescape %}

Créer des filtres template personnalisés

Il est possible de créer ses propres filtres . Pour cela, vous devez créer le package " templatetags " dans le dossier de votre app avec un fichier que nous appellerons perso.py :

tree /home/olivier/eboutique

eboutique
├── backoffice
│   ├── templatetags
│   │   ├── __init__.py
│   │   └── perso.py
├── eboutique
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

Editons le fichier perso.py :

from django import template
from django.template.defaultfilters import stringfilter

register = template.Library()

@register.filter
def add_value(value, arg):
    return value + int(arg) 
    
@register.filter
def replace_value(value, arg):
    return arg 

Utilisons-les dans notre template:

{% load perso %}

{{number|add_value:"12"}}
{{number|replace_value:"bonjour"}}

mark_safe

La valeur retournée par un filtre est sécurisée. Le signe < est converti par l'entité &lt; par exemple. Vous pouvez dire à Django que les données sont sûres et que le navigateur peut les interpréter:

backoffice/tempaltestags/perso.py

from django.safestring import mark_safe

def a(value, arg):
    return mark_safe('<a>%s</a>' % value)

L'organisation des templates

La plupart des projets Django utilisent le schéma de template suivant:

Une page qui sert de structure de base:

backoffice/templates/base.html

<!DOCTYPE html>
    <head>
        {% block head %}
        {% endblock head %}
    </head>
    <body>
        {% block header %}
        {% endblock header %}
        {% block content %}
        {% endblock content %}
        {% block menu %}
        {% endblock menu %}
        {% block footer %}
        {% endblock footer %}
    </body>
</html>

Et voici comment une page hérite de la structure de notre fichier base.html :

backoffice/templates/test.html

{% extends 'base.html' %}

{% block content %}
Je suis dans le content
{% endblock %}

Inclure un template dans un template

Il existe un template tag très utile pour inclure un template dans un autre:

{% include "subtemplate.html" %}

Vous pourrez ainsi alléger vos templates et améliorer leur lecture.

Créer des templates tags personnalisés

Vous pouvez bien évidemment créer vos propres templatetags personnalisés.

backoffice/templatetags/perso.py

from django import template
import datetime

register = template.Library()

class CurrentDateNode(template.Node):
    
    def __init__(self, format_string):

        self.format_string = format_string

    def render(self, context):
        
        return datetime.datetime.now().strftime(self.format_string)

@register.tag(name="current_date")
def current_date(parser, token):
    
    tag_name, format_string = token.split_contents()
    return CurrentDateNode(format_string[1:-1])

Notre template:

{% load perso %}

<p>Nous somme le: {% current_date "%d/%m/%Y" %}</p>