meta data for this page

Template

Un gabarit (template) contient la partie statique du résultat HTML souhaité ainsi qu’une certaine syntaxe particulière définissant comment insérer le contenu dynamique.

Création d’un Template

Les templates de chaque applications doivent être dans un sous-dossier templates.

Dans ce dossier templates, il faut créer un autre sous-dossier du nom de l’application.

Exemple :

blogue/templates/blogue

Créer un fichier index.html dans ce dossier puis écrire du html dans ce fichier

INSTALLED_APPS

Par convention, Django recherche le sous-dossier templates dans chaque applications figurant dans INSTALLED_APPS du fichier settings.py du projet. N’oubliez pas d’ajouter vos applications dans cette liste.

Utiliser le template

Pour utiliser le fichier index.html, il faut modifier la fonction index dans le fichier views.py 

def index(request):
    return render(request, "blogue/index.html")

On utilise maintenant la fonction render() qui prend deux paramètres :

  • La requête
  • Le chemin vers le template

Transmettre des informations au template

La fonction render() peut prendre un troisième paramètre pour envoyer des variables au template. 

def index(request):
    articles = [
        {'title': 'Le cégep Garneau'},
        {'title': 'C\'est la rentrée !!!'}
    ]
    return render(request, "blogue/index.html", {
        'articles' : articles
    })

Dans le template, on utilise {{ pour appeler une variable }}

Et {% pour les déclaration if, for, while… %} 

<body>
  <h1>Titre</h1>
    <h2>{{ articles.0.title }}</h2>
    {% for article_item in articles %}
      <h3>{{ article_item.title }}</h3>
    {% endfor %}
</body>

Voir la documentation pour la liste des balises utilisables dans un template

Passer des paramètres dans l’url

Exemple : http://monsite.ca/blogue/article/2

Modifier le fichier urls.py pour ajouter les balises 

urlpatterns = [
  path('', views.index, name='index'),
  path('article/<int:article_id>', views.article, name='articleDetails'),
  ]

Django va appeler la fonction article(request, article_id=2)

On modifie maintenant la fonction article afin qu’elle reçoive le article_id 

def article(request, article_id):
    return render(request, "blogue/article.html", {
        'article_id' : article_id
    })

Et on passe la variable au template article.html (que vous pouvez créer!)

Dans une vraie application, on irait chercher l’article correspondant dans la base de données.

Type de paramètres

Les paramètres de chemin suivants sont disponibles par défaut :

  • str - correspond à n’importe quelle chaîne non vide, à l’exception du séparateur de chemin, '/'. C’est ce qui est utilisé par défaut si aucun convertisseur n’est indiqué dans l’expression.
  • int - correspond à zéro ou un autre nombre entier positif. Renvoie le type int.
  • slug - correspond à toute chaîne composée de lettres ou chiffres ASCII, du trait d’union ou du caractère soulignement. Par exemple, construire-votre-1er-site-django.
  • uuid - correspond à un identifiant UUID. Pour empêcher plusieurs URL de correspondre à une même page, les tirets doivent être inclus et les lettres doivent être en minuscules. Par exemple, 075194d3-6885-417e-a8a8-6c931e272f00. Renvoie une instance UUID.
  • path - correspond à n’importe quelle chaîne non vide, y compris le séparateur de chemin, '/'. Cela permet de correspondre à un chemin d’URL complet au lieu d’un segment de chemin d’URL comme avec str.

Créer des liens

Ajoutons des ids pour nos articles 

def index(request):
    articles = [
        {'title': 'Le cégep Garneau', 'article_id': 1},
        {'title': 'C\'est la rentrée !!!', 'article_id': 2}
    ]
    return render(request, "blogue/index.html", {
        'articles' : articles
    })

Pour éviter les problèmes, on utilise donc le champ name qui est défini dans les routes. 

<a href="{% url 'articleDetails' article_item.article_id %}">
  {{ article_item.title }}
</a>

Le langage de gabarit de Django

Voir la documentation afin d'avoir un aperçu du fonctionnement des gabarits.

Fichiers statiques

Les sites Web ont généralement besoin de servir des fichiers supplémentaires tels que des images, du JavaScript ou du CSS. Dans Django, ces fichiers sont appelés « fichiers statiques ». Django met à disposition django.contrib.staticfiles pour vous assister dans cette gestion.

Pour les fichiers css ou javascript, on procède de la même façon que pour les templates.

Créer un sous-dossier static puis un sous-dossier du nom de l’application.

blogue/static/blogue

Créer des sous-dossiers scripts et styles.

Dans le fichier html, on peut maintenant utiliser les fichiers css ou js comme dans l’exemple. 

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="{% static 'blogue/styles/bootstrap.min.css' %}">
  <title>Document</title>
</head>

Service des fichiers statiques en développement

Pour servir des fichiers statique en mode DEBUG, vous devez ajouter le code suivant dans le urlConf de votre application:

blogue/urls.py 

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('', views.index, name='index'),
    #Autres urls ici ....
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Héritage de gabarits

L'héritage permet d'éviter la répétition de code dans les pages html. documentation