• 20 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 12/12/19

Ajoutez des fichiers statiques

Log in or subscribe for free to enjoy all this course has to offer!

Dans la partie précédente vous avez appris à gérer des informations provenant d'une base de données. Bravo ! Dans cette partie, vous en saurez plus sur les gabarits !

Les gabarits ?

Oui, nous en avons déjà parlé dans le chapitre dédié à l'architecture MVT. Un gabarit (template en anglais) est un fichier HTML qui peut interpréter des objets Python. Le concept est très similaire aux gabarits utilisés par InDesign ou Photoshop (à la différence près qu'on ne peut pas y coder !).

Un rendez-vous préliminaire avec le disquaire nous a permis de faire les maquettes que vous avez déjà parcourues. Elles utilisent le thème Business Casual. Prenez le temps d'en parcourir la version de démonstration avant de continuer.

Téléchargez le thème et ouvrez-le.

Quelle est la différence entre un gabarit et un thème ?

Un gabarit est dynamique : son contenu est interprété par Python pour générer du HTML pur. Par exemple, vous pouvez utiliser une boucle pour afficher le titre de chaque album dans une balise <h2>. Vous écrivez alors la balise une seule fois, à l'intérieur de la boucle, alors que vous auriez dû répéter l'opération pour chaque CD en HTML pur. Exactement comme un texte à trous !

Un thème est statique : il contient des fichiers qui resteront inchangés et qui présentent le contenu du site.

Lorsqu'un site utilise un thème, la première étape est d'en extraire le contenu statique : feuilles de style et scripts. Puis les fichiers HTML du thème sont adaptés pour devenir dynamiques sous la forme de gabarits.

Commençons par le contenu statique !

Intégrer les fichiers statiques

Ouvrez le thème que je vous ai donné. En voici le contenu :

  • css/

  • fonts/

  • html/

  • img/

  • js/

Comment intégrer les fichiers statiques dans l'application ? Créez simplement le dossier static à l'intérieur de l'application store. Ajoutez-y un nouveau dossier au nom de l'application.

mkdir store/static
mkdir store/static/store

Puis déplacez-y les feuilles de style, le javascript, les polices de caractères et les images.

Et voilà c'est tout !

Pour vérifier que tout fonctionne bien, chargez les feuilles de style dans la page d'accueil actuelle.

Rendre un gabarit dans une vue

Par défaut, Django cherche les gabarits disponibles dans le dossier templates de votre application. Mais pour l'instant il est vide ! Créez-y un premier fichier index.html.

Dans un premier temps, je vous propose d'utiliser le HTML du thème dans la page d'accueil. Nous verrons plus tard comment afficher les informations sur les albums.

Ouvrez le dossier html du thème et copiez l'intégralité du HTML contenu dans index.html. Puis collez-le dans store/templates/store/index.html.

Afin d'indiquer à la vue que vous souhaitez utiliser ce gabarit, importez le module loader de Django :

views.py

from django.template import loader
def index(request):
...
template = loader.get_template('store/index.html')
return HttpResponse(template.render(request=request))

Lancez le serveur et naviguez sur la page d'accueil : le contenu HTML du gabarit apparaît ! Tada ! 🎉

Mais les styles sont cassés ! C'est normal : la source n'est plus la même. Voici l'actuelle :

index.html

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
...
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

Remplacez les lignes ci-dessus par les suivantes :

index.html

{% load static %}
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'store/css/bootstrap.min.css' %}" />
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'store/css/business-casual.css' %}" />
...
<!-- jQuery -->
<script src="{% static 'store/js/jquery.js' %}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{% static 'store/js/bootstrap.min.js' %}"></script>

D'ailleurs, vous découvrez une syntaxe inhabituelle en HTML : {% et %}. Leur contenu sera interprété en tant qu'objets Python et non en tant que HTML.

Rechargez la page d'accueil : les styles s'affichent bien !

Bien ! Les fichiers statiques se chargent bien et vous venez de créer le premier gabarit de votre application ! Mais un problème me turlupine : il faudra répéter certaines parties du code pour chacune de nos vues ! En effet, certaines parties du gabarit sont communes à toutes les pages de notre application puisqu'elles partagent le même thème : le head ou le footer, par exemple.

Que faire ? Se répéter ? Jamais ! Voyons dans le prochain chapitre comment créer un gabarit de base réutilisable dans d'autres.

Code du chapitre

Le code de ce chapitre est disponible dans ce dépôt GitHub.

Example of certificate of achievement
Example of certificate of achievement