Table des matières

1. Installer Django 3
1. Pré-requis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1. Installer Django sous Raspberry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2. Installer Django sous Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1. Pré-requis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2. Installation de pip, installateur de bibliothèque Python. Indispensable. . . . . . . . . . . . . . . . . . . 3
3. Installer WAMP, MAMP, ou LAMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3. Préfixe de ligne de commande Raspberry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
4. Préfixe de ligne de commande Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2. Créer un projet django 5

1. Raspberry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2. Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1. Démarrer le projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1. le dossier snt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2. Créer une base de données snt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1. Configurer la base de données du projet dans settings.py . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2. Coté MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3. Créer les tables nécessaire au projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3. A retenir Raspberry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1. Préparer les tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2. Créer les tables dans la base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3. Lancer le serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4. Préparer les tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4. A retenir Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1. Créer les tables dans la base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2. Lancer le serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3. Linux ou Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

3. Créer une application 9

1. Création de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2. D:\UwAmp\www\snt ou \var\www\html\snt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3. Déclarer son application dans le dossier snt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4. ... et sa route (URL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
5. Créer le minimum pour visualiser son application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
6. 1. models.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1. Déclarer les modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2. Créer les tables dans la base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
7. 2. views.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1. Décryptage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
8. 3. urls.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
9. Relançons le serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
10. Et s’il y avait une erreur ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
11. Allons dans le navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
12. Quel est le chemin de la requête ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4. Créer un template html 15

1. L’emplacement du template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1. Déclaration de l’emplacement des templates (une seule fois pour tout le site). . . . . . . . . . . . . . . 15
2. procédure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2. Le premier template : list.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1. Description ligne par ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

1
5. Créer une autre page avec le même template 17
1. La fonction list_themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1. procédure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2. L’url de direction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1. procédure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3. Le premier template : list.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4. Créer un lien hypertexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

6. Le backend Django 19

7. Les feuilles de styles - CSS 21

1. Exemple de feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2. Pour aller plus loin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3. Principe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4. Formulaire de contact sous Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

2
 Fiche 1. Internet

Installer Django

Pré-requis

Pour installer des modules Python, l’utilitaire pip est primordial. C’est par pip que toutes les bibliothèques Python sont
installer. Raspberry Pi et NOOBS intègre nativement pip. Pour Windows, il faut un peu plus travailler...

Installer Django sous Raspberry

Ouvrir la console Linux.

pi@raspberrypi: $ sudo pip3 install Django==2.0

La console devrait retourner

Successfully installed Django-2.0 pytz-2018.9

Et voilà c’est tout !

Installer Django sous Windows

Pré-requis

> Installer git

> Installer pip
conseil Installer Cmder
https://www.01net.com/telecharger/windows/Utilitaire/systeme/fiches/133053.html

Installation de pip, installateur de bibliothèque Python. Indispensable.

C:\User\philippe\
λ curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py

C:\User\philippe\
λ python get-pip.py

Remarque
Selon la version de python, on tape la ligne de commande python get-pip.py ou py get-pip.py ou python3
get-pip.py

Sous la Windows OS, il faudra peut-être modifier le chemin des variables pour que python puisse être appelé de n’importe
quel emplacement de votre ordinateur. Cependant depuis la version Python 3.6, lors de l’installation, Python demande le
chemin des variables. Restez attentif ! ! !

Installer WAMP, MAMP, ou LAMP

https://www.uwamp.com/fr/?page=download
UwAmp transforme votre ordinateur en serveur Apache. Il intègre phpmyadmin et MySQL pour la gestion des bases de
données.

3
 Notation
Le site internet doit se placer dans le dossier UwAmp/www/

Remarque
J’ai choisi mon second disque dur D pour installer UwAmp. Et je l’ai placé à sa racine. C’est pourquoi, on lira : D :
UwAmp/www/

Notation
Dans la suite de ce tutoriel, les lignes commandes sont identiques que l’on soit sous Windows ou sous Raspberry.
Ce qui va changer ce sont les endroit d’appel. Voir les exemples ci-dessous.

Préfixe de ligne de commande Raspberry

pi@raspberrypi: $

pi@raspberrypi: \ var\ www \ html $

Préfixe de ligne de commande Windows

D:\uwamp\www

4
 Fiche 2. Internet

Créer un projet django

Attention
Il faut se placer dans le répertoire qui va contenir les sites Web.

Raspberry Windows

pi@raspberrypi: $ cd /var/www/html D:\www\html\ :

Remarque
cd nom-du-fichier pour change directory nom-du-fichier, ce qui va ouvrir le nom-du-fichier souhaité. A parit de
maintenant, une des deux ligne de commande sera favorisée. Parfois Raspberry, parfois Windows.

Une fois dans ce dossier :

Démarrer le projet

pi@raspberrypi: /var/www/html $ django-admin startproject snt

Un dossier snt est crée dans le dossier /var/www/html . Que contient-il ?

Ouvrir le dossier avec l’explorateur.
snt est un dossier qui contient la configuration du projet
manage.py est le fichier permet de lancer le serveur, créer des migrations, des tables dans la bases de données, ...

le dossier snt

_init_.py ne doit pas être touché

settings.py gère la configuration du projet
urls.py gère les liens, appelés route ou url.
wsgi.py ne doit pas être touché

Créer une base de données snt

Remarque
Django possède une base de données native : flask. Pour des raisons de commodité et de culture numérique, MySQL
est utilisée ici.

5
L’installation de phpmyadmin a été traitée précédemment.

Configurer la base de données du projet dans settings.py

Ouvrir le ficher snt > settings.py cité ci-dessus.

pi@raspberrypi: /var/www/html/snt/ cd snt

pi@raspberrypi: /var/www/html/snt/snt sudo nano settings.py

Si vous souhaitez utiliser une base Mysql, remplacer les ligne ci-dessous

par

Coté MySQL

1. Ouvrir PHPMyAdmin, par défaut l’utilisateur est root avec le mot de passe root ou vide, selon vos choix lors de la
création.

2. Créer une nouvelle base de données nommée snt.

3. Choisir l’interclassement utf_8_general_ci, c’est l’encodage international des caractères.
4. Enregistrer la table.
Voilà, la base est vide mais elle attend la création des tables à venir.

Créer les tables nécessaire au projet

Pour créer les tables dans votre code Python il faut taper dans la console de commande la ligne en blanc.

pi@raspberrypi: /var/www/html/snt/ python3 manage.py makemigrations

Attention ! Avec Windows, il suffit de taper, il faut écrire py

D:\www\html : py manage.py makemigrations

6
 Notation
Bien distinguer la commande python3 ou py !

enfin on va pouvoir démarrer le serveur...

on peut lire qu’il faut lancer le navigateur sur l’adresse http ://127.0.0.1 :8000

A retenir Raspberry

7
Préparer les tables

pi@raspberrypi : /var/www/html/snt $ python3 manage.py makemigrations

Créer les tables dans la base

pi@raspberrypi : /var/www/html/snt $ python3 manage.py migrate

Lancer le serveur

pi@raspberrypi: /var/www/html/snt $ python3 manage.py runserver

Préparer les tables

D:\UwAmp\www\snt
λ py manage.py makemigrations

A retenir Windows
Créer les tables dans la base

D:\UwAmp\www\snt
λ py manage.py migrate

Lancer le serveur

D:\UwAmp\www\snt
λ py manage.py runserver

Linux ou Windows

Avec Linux ou Mac Os, les commandes sont appelées par python3 manage.py ....
Avec Windows, les commandes sont appelées par py manage.py ....

8
 Fiche 3. Les premières pages

Créer une application

Création de l’application
On souhaite créer l’application activity.
Attendre 5 secondes pour avoir
D:\UwAmp\www\snt
D:\UwAmp\www\snt
λ py manage.py startapp activity
λ

pi@raspberrypi : /var/www/html/snt $ python3 manage.py startapp activity

Et ? ? ? c’est tout ! ! ! Le module est créé mais il est vide. Allons voir ce qu’il s’est passé dans le dossier D:\UwAmp\www\snt

D:\UwAmp\www\snt ou \var\www\html\snt

Et voilà, mon application est là ! ! !

Ah ? c’est un dossier.. que contient-il ?

migrations Gère les migrations....Se rappeler de makemigrations... A ne pas toucher normalement ! ! !

_init_.py ne doit pas être touché
admin.py gère la partie backend du projet
apps.py ne doit pas être touché.
models.py gère les modèles en lien avec les tables de la base de données.
views.py gère les actions à effectuer. Les plus connues sont create, update, delete, list.. mais toutes vos idées sont per-
mises.
tests.py gère les tests pour vérifier que votre code renvoie ce que vous voulez.
Il faut rajouter à la main le fichier urls.py gère les urls de votre application. Les urls sont les routes d’accès des pages
dans le navigateur.

9
Déclarer son application dans le dossier snt
Votre application n’existe pas dans votre projet. Il faut aller dans D:\UwAmp\www\snt\snt\settings.py pour la déclarer.

Et voilà votre application est déclarée mais encore inutilisable.

... et sa route (URL)

Pour créer et appeler une url, on utilise la fonction path ou la fonction re_path selon la chaine de caractères de l’url.
Ces fonctions sont importées du module django.urls. (voir ligne 1 ci-dessous). Elles attendent 3 paramètres.
1. le premier paramètre est une partie de l’url, qui décrit l’action à faire.
2. le deuxième est la fonction à appeler dans fichier views.py
3. le troisième est le nom d’appel de cet url. Lorsque je crée un lien hypertexte ou une redirection, c’est le nom que à
utiliser.
Dans le fichier urls.py.

Créer le minimum pour visualiser son application

Il faut obligatoirement plusieurs fichiers :
1. models.py
2. views.py
3. urls.py

1. models.py
Le fichier modèle va permettre de créer la table MySQL qui correspond à l’objet à créer. Par exemple, une activité est
définie par :
un titre
une explication
une case pour la publication ou pas
soit reliée à un thème
Voici ce que cela donne

10
Et oui, on utilise des classes donc des objets !

Remarque
Les lignes 5 et 6 et 17 et 18 permettent de définition l’objet par une chaine de caractère. C’est à dire quand l’objet
sera appelé, il s’affichera avec cet attribut. Le thème est dénommé par son nom (name), l’article par son titre (title).

Remarque
J’ai créé le modèle Thème avant de l’utiliser. Je rattache donc ce modèle à mon application activity. J’aurai pu
faire un autre choix. Du coup, les tables vont se nommer : activity_article et activity_Theme.

Déclarer les modèles

D:\UwAmp\www\snt
λ py manage.py makemigrations

Créer les tables dans la base de données

D:\UwAmp\www\snt
λ py manage.py migrate

Ça semble bien ! ! Passons au fichier views.py qui propulse les pages html en leur indiquant les composantes à afficher.

11
2. views.py
Le fichier views.py construit la page. C’est dans ce fichier qu’on crée les fonctions qui réalisent les pages associés à
l’application activity. On construit la fonction qui va afficher la page listant les articles. Cette fonction est appelée
list_articles.

Décryptage

1 from django.shortcuts import render, redirect

2 from .models import Article

ligne 1 Importation des fonctions render et redirect à partir de la bibliothèque django.shortcuts

ligne 2 Importation du modèle Article contenu dans le fichier models.py
ligne 6 Création d’une fonction qui va permettre d’afficher la page qui contient la liste des activités
ligne 7 Récupération de tous les enregistrements dans la base de données du modèle Article. Les enregistrements sont
stockés dans la variable articles.
ligne 8 Renvoie le template situé dans le dossier activity/ nommé list.html. On lui passe le paramètre articles.
On voit que context est un dictionnaire. Un dictionnaire est une variable qui stocke des données avec une clé.
Lorsque la fonction de propulsion de la page est créée, il faut maintenant l’appeler, par une lien ou une adresse. C’est le
role de l’url.

3. urls.py
Pour créer et appeler une url, on utilise la fonction path ou la fonction re_path selon la chaine de caractères de l’url.
Ces fonctions sont importées du module django.urls. (voir ligne 1 ci-dessous). Elles attendent 3 paramètres.
1. le premier paramètre est une partie de l’url, qui décrit l’action à faire.
2. le deuxième est la fonction à appeler dans fichier views.py
3. le troisième est le nom d’appel de cet url. Lorsque je crée un lien hypertexte ou une redirection, c’est le nom que à
utiliser.
Dans le fichier urls.py.

La ligne 2 ci-dessus importe toutes les fonctions du fichier views.py qui se trouve dans le même dossier.
Le ligne 5 est donc l’appel à la fonction path, on voit bien les 3 paramètres. Le premier paramètres est la chaine de ca-
ractères vide, ’ ’. Souvenons nous comment sont appeler les urls de ce dossier : Via le fichier urls.py dans le dossier snt.
C’est le gestionnaire de toutes les urls du projet. Pour rappel :

C’est a dire que toutes les url qui vont commencer par activity/ seront redirigées vers le fichier des urls de l’application
activity. Le fait de laisser vide l’url en ligne 5 signifie que l’adresse activity/ pointera vers la page qui liste les articles.

12
Relançons le serveur

D:\UwAmp\www\snt
λ py manage.py runserver

Ça semble bien....

Et s’il y avait une erreur ?

S’il y avait une erreur la console donnerait une ligne où l’erreur se situe. Je viens de créer une erreur. Voici ce que donne la
console

Ouais, pas clair ! ! En fait il est écrit que le nom activit n’est pas connu. Normal, on aurait du écrire activity.
Où se situe l’erreur ?

File "D :\UwAmp\www\snt\snt\urls.py", line 23, in <module>

re_path(’activity/’, include(’activit.urls’)), ## pour que les url commençant par activity soient redirigées

Et voilà, c’est réparé !

Allons dans le navigateur

Tout semble au top, allons dans le navigateur.
Dans la barre url, on tape alors l’adresse de notre page : http ://127.0.0.1 :8000/activity qui va nous renvoyer vers la page
list_activity.

13
Et voilà, nous y sommes presque. Le navigateur renvoie une erreur mais c’est normal. A aucun moment, nous n’avons créé
un template. C’est à dire une page HTML pour visualiser sur notre navigateur les données souhaitées.

Quel est le chemin de la requête ?

1. Appel par le visiteur via un lien hypertexte
1. Appel par le visiteur 2. le lien hypertexte arrive dans urls.py de l’application
2. −→ urls.py via son name et déclenche une view, 2ème paramètre
3. −→ views.py 3. la views cherche les composantes à afficher et va es
4. −→ template placer dans le template désigné

5. −→ retour visiteur et affichage de la page 4. le template est alors appelé et ses attributs sont placés
5. le visiteur voit la page

14
 Fiche 4. Le Web

Créer un template html

L’emplacement du template
Dans le fichier snt/settings.py, il faut rajouter un chemin qui permet au projet de savoir où sont stockés les templates.
Deux stratégies sont possibles.
• Regrouper tous les templates du projet ensemble mais dans des dossiers différents.
• Regrouper les templates par application
.
C’est dans DIRS qu’il faut faire ce choix, comme ci-dessous, en ligne 61.

Déclaration de l’emplacement des templates (une seule fois pour tout le site).

procédure

Créer un nouveau dossier templates

Dans ce dossier templates, créer un nouveau dossier activity
et dans templates et placer list.html

Remarque
Le dossier templates contiendra tous les templates de votre projet.

Le premier template : list.html

Ce template affiche la liste des articles, il est propulsé par la fonction list_articles du fichier activity\views.py

1. <!DOCTYPE html>
2. <html lang="fr">
3. <head>
4. <meta charset="utf-8">

15
5. <meta name="description" content="">
6. <meta name="author" content="">
7. </head>
8. <body>
9. <section class=’content’>
10. <h1>Liste des articles</h1>
11. <ul>
12. {% for article in articles %}
13. <li>{{ article.title }}</li>
14. {% endfor %}
15. </ul>
16. </section>
17.</body>
18.</html>

Description ligne par ligne

La partie entre les balises <head> et </head> ne s’affichent pas dans le navigateur. Ce sont les métadonnées de la page.
1. <!DOCTYPE html> ouvre le type de document : html
2. <html lang="fr"> donne la langue du document et donc l’encryptage des caractères.
3. <head> est une balise ouvrante qui ouvre une partie pour écrire les métadonnées de la page.
4. <meta charset="utf-8"> est l’encodage des caractères, qui doit correspondre avec l’encodage de la base de données
le as échéant.
5. <meta name="description" content="Liste des articles"> signale la description de la page.
6. <meta name="author" content="C’est moi !"> renseigne l’auteur de la page.
7. </head balise fermante.
8. <body> balise ouvrante du corps de la page. A partir de cette balise, le code est interprété par le navigateur.
9. <section class=’content’> crée une section dans la page
10. <h1>Liste des articles</h1> Les balise h1, h2, h3, ... h6 sont des balises de titres.
11. <ul> La balise <ul> ouvre une liste non ordonnée.
12. {% for article in articles %}
13. <li> article.title </li> Cette balise <li> écrit un item de la liste.
14. {% endfor %}
15. </ul>
16. </section>
17. </body>
18. </html>
Les lignes 12 et 14 sont une particularité de Django. Il est possible de faire de l’algorithmique dans une page html lorsqu’on
utilise Django. Ici, la balise <li> et son contenu vont être répété.e.s tant qu’il y a des articles dans la variable articles.
La variable articles est une liste de plusieurs dictionnaires, appelé par Python un Queryset car il émane d’une réponse
à une requête Mysql.

16
 Fiche 5. Le Web

Créer une autre page avec le même template

Dans cette partie, on va créer un autre page avec le même template. On modifiera deux lignes pour plus de lisibilité mais
on pourrait garder la même page exactement. La page que nous souhaitons créer doit afficher la liste des thèmes.
Pour cela, il faut :
1. le modèle Theme. Ca tombe bien, nous l’avons ! Il est dans le fichier activity\models.py
2. la fonction list_themes qui va propulser le template. Il faut la créer !
3. l’url de direction. Il faut la créer !
4. le template... On vient de dire que nous l’avions. Et oui ! Car afficher une liste d’articles ou une liste de thèmes, c’est
toujours une liste. Il faudra juste changer articles par themes dans le template.
Commençons !

La fonction list_themes
Comme on a le modèle, on ne va pas le créer !
Nous n’avons pas la fonction list_themes, mais on a la fonction list_articles.

procédure

1. Se rendre dans le fichier activity\views.py.

2. Copier coller de la fonction list_articles
3. Remplacer articles par themes, Article par Theme.
Et voilà c’est fait.

L’url de direction.
procédure

1. Se rendre dans le fichier activity\urls.py.

2. Copier coller de la ligne 5 en ligne 6.
3. Écrire themes comme premier paramètre entre les guillemets.
4. Remplacer list_articles par list_themes.
5. Changer le nom de la route : list_themes au lieu de list_articles
Et voilà, c’est fait.

Le premier template : list.html

Si on veut garder le fichier list.html alors la fonction list_articles doit propulser la variable articles. Or nous vou-
lons qu’elle propulse la variable themes Donc nous allons copier ce fichier et le nommer themes.html Il faut alors retour-
ner dans le fichier activity\views.py pour changer le nom du template et écrire themes.html au lieu de list.html.
Et voici le fichier themes.html.

1. <!DOCTYPE html>
2. <html lang="fr">
3. <head>
4. <meta charset="utf-8">
5. <meta name="description" content="">
6. <meta name="author" content="">
7. </head>
8. <body>
9. <section class=’content’>
10. <h1>Liste des articles</h1>
11. <ul>

17
12. {% for theme in themes %}
13. <li>{{ theme.name }}</li>
14. {% endfor %}
15. </ul>
16. </section>
17.</body>
18.</html>

En ligne 13, on remplace article.title par theme.name car dans le modèle Theme du fichier activity\models.py, name
n’existe pas, mais on a déclaré l’attribut name

Créer un lien hypertexte

Un lien hyper texte est un lien pour passer d’une page à une autre. Dans la page list.html on va rajouter une ligne, en
ligne 16 car nous souhaitons afficher le lien sous la liste La position de ce lien dépend de l’endroit où l’on souhaite placer
le lien sur la page.

1. <!DOCTYPE html>
2. <html lang="fr">
3. <head>
4. <meta charset="utf-8">
5. <meta name="description" content="">
6. <meta name="author" content="">
7. </head>
8. <body>
9. <section class=’content’>
10. <h1>Liste des articles</h1>
11. <ul>
12. {% for theme in themes %}
13. <li>{{ theme.name }}</li>
14. {% endfor %}
15. </ul>
16. <a href="{% url ’list_themes’ %}">Vers les thèmes</a>
17. </section>
18.</body>
19.</html>

Notation
Lorsque l’on crée un lien, on utilise la balise <a>
Pour appeler le lien, on utilise le nom de l’url.

Remarque
A ce stade, on peut s’apercevoir d’au moins deux points :
1. Les liste des thèmes et des articles sont vides. Normal, rien n’a été enregistré. Il faut donc créer une partie
administrateur appelée backend. Et ça Django s’en est occupé pour nous.
2. La page est assez moche avec un design nul ou presque.
Et voici donc les deux prochaines fiches à venir...

18
 Fiche 6. Les premières pages

Le backend Django

Ce qu’il y a de génial avec Django c’est que toutes les taches de backend sont prises en charge. Pour commencer, il faut
créer un super utilisateur. Allons dans la console :

pi@raspberrypi: /var/www/html/snt/ $ python manage.py createsuperuser

Pour tester :
pi@raspberrypi: /var/www/html/snt/ $ python manage.py runserver
1.

2. Dans la barre url du navigateur, taper http://127.0.0.1:8000/admin/

Incroyable, le back end est déjà prêt ! ! ! Il ne reste plus qu’à se loger avec vos identifiants donnés plus haut.
3. Et voilà...

Mais où est notre activity ? encore un peu de travail...

Ouvrir le fichier admin.py de notre dossier activity et rajouter

Ré-actualiser votre page dans le navigateur.

19
Il vous reste à rajouter dans le fichier admin.py la ligne admin.site.register(Theme)
Vous pouvez maintenant ajouter des articles, des utilisateurs, les supprimer, les modifier. Une fois les thèmes et articles
ajoutés, taper dans la barre url du navigateur http://127.0.0.1:8000/activity/ et visualiser vos articles.

20
 Fiche 7. Données structurées - Web

Les feuilles de styles - CSS

Notation
Les feuilles de style font partie de la partie CSS : Cascade Style Sheets, littéralement les feuilles de style en cascade.
Leur extension est .css.

Exemple de feuille de style

section {
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
}
li {
margin-left: 0px;
}

h1 {
font-size:2em;
border-bottom: 1px solid #00819F;
margin-bottom: 20px;
color:#00819F;
}

.content{
background-color: #FFF;
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
background-color: rgba(255, 255, 255, 0.5);
padding : 15px;
}

On peut écrire ce bout de code dans la page list.html dans la balise <head> et dans une balise <style>

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<style>
section {
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
}
ul {
margin-left: 0px;
}

h1 {
font-size:2em;
border-bottom: 1px solid #00819F;

21
 margin-bottom: 20px;
color:#00819F;
}

.content{
background-color: #FFF;
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
background-color: rgba(255, 255, 255, 0.5);
padding : 15px;
}
.sanspuce{
list-style-type:none;
}
</style>

</head>
<body>
<section class="content">
<h1>Liste des articles</h1>
<ul>
{% for theme in themes %}
<li class="sanspuce">{{ theme.name }}</li>
{% endfor %}
</ul>
</section>
</body>
</html>

On peut aussi déporter ce code dans un fichier que l’on appelle.

Pour aller plus loin

Notation
Mais pourquoi en cascade ? car elles héritent des feuilles de styles qui sont définies précédemment.

Remarque
Les feuilles de style font partie de la partie CSS : Cascade Style Sheets, littéralement les feuilles de style en cascade.
Pourquoi en cascade, car elles héritent des feuilles de styles qui sont définies précédemment, et surtout, elle peuvent
surcharger des commendes déjà définies.

Exemple
Supposons que 3 feuilles de styles sont définies dans un document : A.css, B.css et C.css. Leur ordre de définition
est important.
Supposons que dans le fichier A.css, on déclare la classe .titre et que dans C.css on déclare aussi la classe
.titre mais d’une autre manière, comme C.css vient après A.css, c’est le style de C.css qui décore la page.

22