Exercice 3
Créer un projet Django nommé myproject avec le template Bootstrap fourni (lien de téléchargement). On vous demande de créer un fichier de démarrage du projet nommé index.html qui doit hériter du fichier base.html, en utilisant la classe TemplateView.
Solution
1. Créer la structure standard Django
A l'aide d'un terminal exécute les commandes:
|
1 2 |
django-admin startproject myproject cd myproject |
On obtient alors la structure de notre projet:
|
1 2 3 4 5 6 7 8 |
myproject/ ├── manage.py └── myproject/ ├── __init__.py ├── asgi.py ├── settings.py ├── urls.py └── wsgi.py |
2. Réglage du templates et des fichiers static du projet
Dans le même dossier que manage.py, On dois effectuer les changements suivant:
- Dossier static/: On ajoute le dossier static/ avec tout le contenu qu'il englobe à la racine du projet
- Fichier de base du template : Le fichier base.html doit être mis au sein du dossier templates/ (à la racine du dossier)
- Template de démarrage : A la racine du dossier templates/ , on crée un fichier index.html qui sera utilisé comme template du démarrage du projet
On obtient finalement la structure complète de notre projet doté du répertoire templates/ (sans lequel on ne pourra démarrer notre projet sur une page de template ) et du dossier static/ (sans lequel on ne pourra appliquer du css externe) tous les deux correctement configurer au niveau du fichier myproject/settings.py:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
myproject/ ├── manage.py ├── myproject/ │ ├── __init__.py │ ├── asgi.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── static/ │ ├── css/ │ ├── images/ │ └── js/ └── templates/ ├── base.html └── index.html |
3. Configurer settings.py (templates + fichiers statiques)
Au niveau du fichier myproject/settings.py , on déclare le répertoire du template en ajoutant le code suivant: En haut du fichier settings.py:
|
1 2 3 4 |
from pathlib import Path # Build paths inside the project like this: BASE_DIR / 'subdir'. BASE_DIR = Path(__file__).resolve().parent.parent |
Et ensuite juste après MIDDLEWARE = [....], on ajoute le code suivant:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ROOT_URLCONF = "myproject.urls" TEMPLATES = [ { "BACKEND": "django.template.backends.django.DjangoTemplates", "DIRS": [BASE_DIR / 'templates'] , "APP_DIRS": True, "OPTIONS": { "context_processors": [ "django.template.context_processors.request", "django.contrib.auth.context_processors.auth", "django.contrib.messages.context_processors.messages", ], }, }, ] |
Ensuite juste après STATIC_URL = "static/" on ajoute la configuration complète des fichiers statiques:
|
1 2 3 4 |
STATIC_URL = 'static/' STATICFILES_DIRS = [ BASE_DIR / 'static', ] |
4. Adapter base.html pour Django (static)
Dans le répertoire templates/base.html, tout en haut on doit ajouter le code suivant:
|
1 |
{% load static %} |
Faute de quoi, les fichiers statiques ne seront pas ajoutés! Ensuite on remplace tous les chemins relatifs par {% static %} :
Exemples:
|
1 2 3 |
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script> <img src="{% static 'images/logo.png' %}" alt=""> |
Dans notre cas on doit ajouter le fichiers style.css:
|
1 |
<link rel="stylesheet" href="{% static 'css/style.css' %}"> |
Finalement: Le fichier base.html doit contenir le tag permettant d'ajouter le contenu des pages dans un emplacement approprié, si vous ne le trouvez pas, ajoutez le à son emplacement spécifique:
|
1 2 3 |
{% block content %} ... Contenu des pase ici! ... {% endblock %} |
5. Utiliser TemplateView sans créer d’app
Nous allons maintenant configurer la page d'accueil en utilisant la classe Templateview: TemplateView est une vue générique de Django qui permet d’afficher directement un template HTML sans écrire de logique métier. Elle est idéale pour les pages statiques (accueil, à propos, contact) tout en restant intégrée au système de routage Django. Dans myproject/urls.py (le fichier dans le dossier interne myproject/), on modifier le code de la façon suivante:
|
1 2 3 4 5 6 7 8 |
from django.contrib import admin from django.urls import path from django.views.generic import TemplateView urlpatterns = [ path('admin/', admin.site.urls), path('', TemplateView.as_view(template_name="index.html"), name="home"), ] |
7. Lancer et tester le projet
|
1 2 |
python manage.py migrate # non obligatoire! python manage.py runserver |
Puis dans la barre d'adresse du navigateur on accède à la page du démarrage du projet en tapant l'adresse suivante:
|
1 |
http://127.0.0.1:8000/ |
Auteur : Younes Derfoufi
Lieu de travail : CRMEF OUJDA
Site Web : www.tresfacile.net
Chaine YouTube : https://www.youtube.com/user/InformatiquesFacile
Me contacter : https://www.tresfacile.net/me-contacter/
