Licence Ingénierie de Développement d’Applications Informatiques (IDAI)
Module : Développement WEB backend avec python
Ann e Universitaire : 2023/2024
Travaux pratiques N6
Objectif du TP
L’objectif de ce TP est de découvrir le framework Django, en commençant par son installation jusqu’à la
création d’un premier projet web.
Introduction
Le framework Django est une boite à outils open source qui permet la création des sites web en toute
sécurité et performance. Il est écrit en langage python. C’est un framework qui fonctionne selon
l’architecture MVT (Models, Vues, Templates) offrant multiples avantages et services.
1. Installation de Python
Avant d’installer le framework Django, il faut commencer par l’installation des éléments suivants :
❖ Un interpréteur python téléchargeable à partir du site officiel de Python : [Link]
downloads/
❖ Un éditeur de texte pour rédiger les script python ou un IDE : Integrated Development Environment tels
que :
• Sublime Texte : [Link]
• Microsoft Visual Studio Code : [Link]
• PyCharm : [Link]
• Anaconda (Spider ou Jupiter ) : [Link]
Dans ce TP, je vous propose d’utiliser l’IDE de Microsoft : Visual Studio Code.
2. Installation et création de l’environnement virtual
Pour cette étape, vous pouvez utiliser un simple terminal de votre choix.
- Avant d’installer un environnement virtuel dans lequel on va installer Django, je vous propose de créer un
dossier pour votre projet dans un emplacement de votre choix.
… mkdir my_project
- Se positionner dans le dossier crée, puis taper les commandes suivantes :
… my_project > pip install virtualenv
… my_project > virtualenv my_environment
… my_project > cd my_environment\Scripts
… my_project > my_environment\Scripts> activate
3. Installation du framework Django
- En utilisant toujours un terminal de votre choix, taper les commandes suivantes :
(my_environment) … my_project > pip install django
- Pour installer une version exacte :
(my_environment) … my_project > pip install django==3.1.2
Professeure : Sanae KHALI ISSA Page 1
é
4. Création d’un projet Django
- Pour créer un projet Django, utiliser la commande suivante :
(my_environment) … my_project > django-admin startproject my_project
5. Démarrer le serveur de développement
Afin de démarrer le serveur web, on utilise le fichier [Link] en saisissant la commande suivante :
(my_environment) … my_project > python [Link] runserver
L’étape suivante consiste à tester le bon fonctionnement du serveur web lancé en ouvrant un navigateur web
en utilisant l’une des URL suivantes :
‣ [Link]
‣ [Link]
6. Configuration d’un projet Django
- Ouvrir le dossier du projet crée dans l’IDE Microsoft Visual Studio Code
Apres la création d’un projet Django, plusieurs fichiers se créent automatiquement selon l’arborescence
illustrée sur la figure suivante :
Dans cette partie, on va modifier quelques fichiers qui ont été créés par défaut lors de la création d’un projet
Django.
✦ Fichier [Link]
Le fichier [Link] contient la liste des chemins qui seront exécuté dans le projet Django.
from [Link] import admin
from [Link] import path
from . import views
urlpatterns = [
path("admin/", [Link]),
path("", views.home_view),
path("contact/", views.contact_view),
]
✦ Fichier [Link]
En plus du fichier [Link], il faut créer un autre fichier nommé [Link] qui devrait contenir toutes les
fonctions qui seront exécutés en faisant appel aux différents chemins cités dans le fichier [Link]
Professeure : Sanae KHALI ISSA Page 2
- Créer un fichier [Link] puis taper les instructions suivantes :
from [Link] import HttpResponse
def home_view(request):
return HttpResponse("hello world ")
def contact_view(request):
return HttpResponse("contacter nous")
- Utiliser un navigateur web pour tester les deux pages
‣ Page accéder à la page principale : [Link]
‣ Page accéder à la page contact : [Link]
7. Ajouter des templates à un projet Django
- Créer un dossier nommé « templates » dans le dossier principal du projet Django
- Créer un fichier nommé « [Link] » dans lequel vous tapez le code html suivant :
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page des articles</title>
</head>
<body>
<h1>Liste des articles</h1>
<li> Article 1</li>
<li> Article 2</li>
<li> Article 3</li>
</body>
</html>
- Modifier le fichier [Link] en ajoutant le code de la fonction articles_views()
from [Link] import render
def articles_view(request):
return render(request,'[Link]')
- Modifier le fichier [Link] en ajoutant le chemin de la page articles/
path("articles/",views.articles_view)
NB :
Afin d’avoir accès aux templates crées, il faut indiquer le nom du dossier où ils se trouvent dans le fichier
[Link]
Professeure : Sanae KHALI ISSA Page 3
TEMPLATES = [
{
"BACKEND": "[Link]",
"DIRS": ['templates'],
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
"[Link].context_processors.debug",
"[Link].context_processors.request",
"[Link].context_processors.auth",
"[Link].context_processors.messages",
],
},
},
]
8. Exercice d’application
Créer un projet Django contenant les pages html suivantes :
- [Link] contenant une liste des articles avec leur description ( nom, image, description textuelle)
- [Link] représentant la page principale du site web
Professeure : Sanae KHALI ISSA Page 4