logo oujood
🔍

Comment charger et utiliser des fichiers statiques dans Django ?

Il est important de gérer ces ressources afin qu'elles n'affectent pas les performances de notre application. Django s'en occupe très efficacement et fournit une manière pratique d'utiliser les ressources.

OUJOOD.COM

Gestion et traitement des fichiers statiques dans Django

Commencez par créer un dossier que vous pouvez nommé par exemple : "static" dans votre projet, dans le même dossier où vous avez créé le dossier templates :

C’est dans c dossier où nous conserverons nos fichiers statiques. Vous pouvez stocker vos fichiers (pdf, images, fichiers texte, ou tout ce que vous voulez) dans le dossier static.

Comment ajouter et utiliser des fichiers css dans Django ?

Ajoutez un fichier dans le dossier static, nommez-le mon_style.css.

Dans votre éditeur ouvrez ce fichier CSS et écrivez le code css qui suit :

Fichier mon_style.css       📋 Copier le code 

body {
  background-color: lightblue;
  font-family: verdana;
}

Modifier le template( modèle)

Vous disposez maintenant d'un fichier css, avec quelques propriétés css qui vont donner du style à une page HTML. L'étape suivante consiste à inclure ce fichier dans un modèle HTML :

Ouvrez le fichier HTML et ajoutez ce qui suit :

{% load static %}
ce qui chargera le dossier "static"
Et ajoutez aussi pour le code suivant pour déclarer le fichier css :
<link rel="stylesheet" href="{% static 'mon_style.css' %}">
Redémarrez le serveur pour que ces modifications soient prises en compte :

Exemple : reprenons le template du chapitre précédent et modifier le en ajoutant les deux code ci-dessus comme suit

Fichier template.html       📋 Copier le code 

{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>template</title>
<link rel="stylesheet" href="{% static 'mon_style.css' %}">
</head>
<body>

<h1>Bonjour</h1>

{% include "menu_principal.html" with menu="Tutoriels" sponsor="oujood.com" %}

<p>Voici mon site web</p>
<p>Consultez la page menu_principal.html pour voir son contenu HTML.</p>
<p>Dans le fichier mon_style.css, vous pouvez voir à quoi ressemble la feuille de style.</p>
<hr>
{% include 'pied_de_page.html' %} 
</body>
</html>

Comment ajouter et utiliser des fichiers un fichier JS dans Django

L'ajout de fichiers javascript dans un projet Django se fait exactement de la même manière que l'ajout de fichiers css dans Django :

1 on charge le dossier qui contien le fichier dossier :"static".
2 on declare le fichier.

D'abord, ajoutez un fichier js dans le dossier static, nommez-le mon_javascripts.js et y mettez le code javascript qui suit :

Fichier mon_javascripts.js       📋 Copier le code 

function maFonction() {
  alert("Bonjour à partir d'un fichier javascipt!");
}

Modifier le Template

maintenant vous disposez d'un fichier js, avec une fonction JavaScript. La prochaine étape sera d'inclure ce fichier dans un modèle HTML :

Ouvrez le fichier HTML par exemple template.html et ajoutez ce qui suit :

{% load static %}
<script src="{% static 'mon_javascripts.js' %}"></script>
Et ajoutez un bouton avec un événement onclick qui déclenche la fonction : 
<button onclick="maFonction()" >Clique-moi!</button>

Fichier template.html      📋 Copier le code 

{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>template</title>
<link rel="stylesheet" href="{% static 'mon_style.css' %}">
<script src="{% static 'mon_javascripts.js' %}"></script>
</head>
<body>

<h1>Bonjour</h1>

{% include "menu_principal.html" with menu="Tutoriels" sponsor="oujood.com" %}

<p>Voici mon site web</p>
<p>Consultez la page menu_principal.html pour voir son contenu HTML.</p>

<button onclick="maFonction()" >Clique-moi!</button>

<hr>
{% include 'pied_de_page.html' %} 
</body>
</html>
Redémarrez le serveur pour que les modifications soient prises en compte

Django : ajouter un fichier image

L'ajout de fichiers images dans un projet Django se fait de la même manière que l'ajout de fichiers css ou l'ajout de fichiers js dans Django

Ajoutez un fichier image (.png, .jpg, .gif, etc.) dans le dossier static

Puis modifier le fichier html.

modification du fichier html : template.html

Vous avez maintenant une image dans le dossier statique. La prochaine étape sera d'inclure cette image dans un modèle HTML :

Ouvrez le fichier HTML et ajoutez ce qui suit :
{% load static %}
Et : 
<img src="{% static 'pineapple.jpg' %}">
Exemple :

Fichier template.html      📋 Copier le code 

 {% load static %}
<!DOCTYPE html>
<html>
<head>
<title>template</title>
<link rel="stylesheet" href="{% static 'mon_style.css' %}">
</head>
<body>

<h1>Bonjour</h1>

{% include "menu_principal.html" with menu="Tutoriels" sponsor="oujood.com" %}

<p>Voici des bananes </p>
<img src="{% static 'bananes.jpg' %}" alt="image de bananes">

<hr>
{% include 'pied_de_page.html' %} 
</body>
</html>
Redémarrez le serveur pour que les modifications soient prises en compte

Cours precedent Sommaire Cours suivant