DECRA, T.P. 4 :

MVC en Python via Django

Décomposition, Conception et Réalisation d'Applications

gilles.hunault "at" univ-angers.fr

Table des matières cliquable

  1. Installation et test de Django (première partie)

  2. Deuxième partie : base de données

  3. Les vues (troisième partie)

  4. Les formulaires (partie quatre)

  5. Les tests (partie cinq) et la fin du tutoriel

  6. Une application plus complète entièrement en français

Il est possible d'afficher toutes les solutions via ?solutions=1 et de les masquer via ?solutions=0.

On se propose ici de reproduire le début du tutoriel de Django, en version anglaise ici et en version française là.

Toutes les manipulations sont à faire dans un terminal, avec un éditeur de textes comme Geany ou Gedit.

1. Installation et test de Django (première partie)

Quels sont les deux sites les plus connus qui utilisent Django ?

Dans un terminal, taper pip3 install django==2.1.

Attendre que le système ait fini de télécharger et de décompresser l'archive pytz avant de continuer.
     gilles.hunault@h002-0:~$ pip3 install django
     Collecting django
       Downloading https://files.pythonhosted.org/packages/32/ab/22530cc1b2114e6067eece94a333d6c749fa1c56a009f0721e51c181ea53/Django-2.1.2-py3-none-any.whl (7.3MB)
         100% |                   | 7.3MB 219kB/s
     Collecting pytz (from django)
       Downloading https://files.pythonhosted.org/packages/52/8b/876c5745f617630be90cfb8fafe363c6d7204b176dc707d1805d1e9a0a35/pytz-2018.6-py2.py3-none-any.whl (507kB)
         100% |                   | 512kB 623kB/s
     Installing collected packages: pytz, django
     Successfully installed django pytz-2014.10
     
Que répond le système si on exécute python -m django --version ?

Ecrire l'alias suivant :
     alias "python=python3"
     
Si le fichier ~/.local/bin/django-admin existe, écrire l'alias suivant :
     alias "django-admin=~/.local/bin/django-admin"
     
Que répond désormais le système si on exécute python -m django --version ?

Lire le début du tutoriel partie 1, jusqu'à python manage.py runserver.

Commencer par créer un répertoire MVC-Django. Si, dans ce répertoire on exécute la commande django-admin startproject mysite combien de fichiers et de répertoires sont créés ? Quelles commandes Unix le prouvent ? Mettre dans liste1.txt la liste de tous les fichiers avec leur chemin d'accès relatif.

Vérifier que, dans le répertoire mysite, la commande python manage.py runserver lance bien le serveur. A quelle URL est-il accessible ? Qu'affiche la page Web ? Qu'affiche le terminal si on ouvre la page d'index du serveur ?

Quels fichiers sont créés si on exécute, dans le répertoire mysite, la commande python manage.py startapp polls ? Essayer de sauvegarder la liste des fichiers dans le fichier liste2.txt et comparer avec liste1.txt.

Pourquoi faut-il exécuter python manage.py migrate ?

Lire la suite du tutoriel et recopier ce qui est mis dans le tutoriel pour l'écriture de la première vue. Peut-on avoir comme texte Bonjour à tout le monde au lieu de Hello, world avec prise en compte de l'accent sur le a ?

Le code produit pour la page d'index est-il valide au sens de la grammaire XHTML 1.0 Strict ? Serait-ce difficile de le modifier pour qu'il le soit ? Est-ce simple de changer l'image affichée (la fusée) ?

Quelle erreur y a-t-il dans le tutoriel Django partie 1 ?

Quelle commande aurait-il fallu exécuter pour installer Django 2.0 au lieu de Django 2.1 ?

Si l'installation ne fonctionne pas, vous pouvez toujours regarder la série de vidéos Tutoriel Django Français ou la série Python Django Tutorial English.
Solution : afficher la solution
Les deux sites les plus connus qui utilisent Django sont sans doute Instagram et Mozilla. Pour d'autres sites basés sur Django, consulter par exemple top-10-django-apps.

A priori la commande python -m django --version affiche /usr/bin/python: No module named django parce que python correspond à python 2. Une fois les alias définis, ou à l'aide de la commande python3 -m django --version donc avec un 3 au bout de python, on voit le numéro de version de django installé. Ce doit sans doute être 2.1.3 ou 2.2.7.

Pour connaitre le nombre de fichiers et de répertoires créés suite à la commande django-admin startproject mysite on peut, sous Unix, utiliser des commandes comme ls -altR ou find .. Si on dispose de la commande tree, on peut se contenter de taper tree et obtenir :
     $gh> django-admin startproject mysite
     
     $gh> cd mysite
     
     $gh> tree
     
     .
     +-- manage.py
     +-- mysite
     |   +-- __init__.py
     |   +-- settings.py
     |   +-- urls.py
     |   +-- wsgi.py
     +-- tree.txt
     
     1 directory, 6 files
     
Pour enregistrer la liste des fichiers, la commande find . > liste1.txt. est sans doute la plus adaptée. Voici ce que contient alors liste1.txt :
     .
     ./liste1.txt
     ./tree.txt
     ./manage.py
     ./mysite
     ./mysite/settings.py
     ./mysite/wsgi.py
     ./mysite/urls.py
     ./mysite/__init__.py
     
Le serveur est en principe à l'adresse http://127.0.0.1:8000/ comme indiqué dans le tuteur et dans le terminal.
     $gh/MVC-Django/mysite> python manage.py runserver
     Performing system checks...
     
     System check identified no issues (0 silenced).
     
     You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
     Run 'python manage.py migrate' to apply them.
     
     November 05, 2018 - 17:29:21
     Django version 2.1.3, using settings 'mysite.settings'
     Starting development server at http://127.0.0.1:8000/
     Quit the server with CONTROL-C.
     
     
La page Web affichée correspond à :

L'ouverture de la page d'index affiche dans le terminal qui a lancé le serveur le texte suivant :
     [05/Nov/2018 17:29:25] "GET / HTTP/1.1" 200 16348
     [05/Nov/2018 17:29:25] "GET /static/admin/css/fonts.css HTTP/1.1" 200 423
     Not Found: /favicon.ico
     [05/Nov/2018 17:29:25] "GET /favicon.ico HTTP/1.1" 404 1972
     [05/Nov/2018 17:29:25] "GET /static/admin/fonts/Roboto-Regular-webfont.woff HTTP/1.1" 200 80304
     [05/Nov/2018 17:29:25] "GET /static/admin/fonts/Roboto-Light-webfont.woff HTTP/1.1" 200 81348
     [05/Nov/2018 17:29:25] "GET /static/admin/fonts/Roboto-Bold-webfont.woff HTTP/1.1" 200 82564
     [05/Nov/2018 17:28:53] "GET / HTTP/1.1" 200 16348
     Not Found: /favicon.ico
     
     
Une fois la commande python manage.py startapp polls on dispose de nouveaux fichiers. Pour savoir lesquels, le mieux est sans doute d'enregistrer la liste des fichiers et d'utiliser tkdiff pour comparer les deux listes de fichiers comme suit : find . > liste2.txt ; tkdiff liste1.txt liste2.txt &. Voici ce que l'on voit alors :

Il est très simple d'afficher la page de départ des sondages en français comme ci-dessous

parce qu'il suffit de modifier la fonction index du fichier polls/views.py et d'y mettre le texte en français.

Le code HTML n'est pas valide au sens de la grammaire XHTML 1.0 strict parce qu'il s'agit de code HTML 5 avec du CSS externe et interne, du SVG inline... Ce serait sans doute difficile à modifer parce qu'il ne semble pas y avoir de fichier index.html dans les fichiers créés. La même remarque s'applique à l'image de la fusée par ce que c'est du SVG inline et pas un un fichier image inclus.

L'erreur dans le tutoriel Django partie 1 se situe dans la rubrique L'étape suivante est de faire pointer la configuration d'URL... parce que le texte dit de modifier mysite/urls.py alors que l'encadré fait référence à monsite.urls.py donc avec monsite au lieu de mysite comme nom de répertoire.

Pour installer Django 2.0 au lieu de Django 2.1 il faut écrire pip3 install Django==2.0.

2. Deuxième partie : base de données

Suivre ce qui est indiqué dans la deuxième partie du tutoriel. On utilisera sqlite3 comme moteur de base de données avec db.sqlite3 comme nom de la base de données.

Quels fichiers sont créés suite à la commande python manage.py makemigrations polls ? Essayer de sauvegarder la liste de tous les fichiers dans le fichier liste4.txt. Comment comparer liste2.txt de la question précédente et liste4.txt ?

Dans la section Jouer avec l'interface de programmation (API), essayer de mettre comme question Est-ce que tout va bien ? en plus de What's new?.

Dans la section Création d'un utilisateur administrateur, essayer d'ajouter un utilisateur nommé tintin.

Comment dans le terminal lister la structure de toutes les tables SQL créées en mode interactif avec sqlite3 ? Et comment afficher tous les utilisateurs en mode interactif avec sqlite3 ? Et par programme, avec redirection du résultat dans listeUtilisateurs.txt ou dans liste3.txt ?

Qu'est-ce qui ne fonctionne pas dans cette partie du tutoriel dans les salles du département informatique ?

Solution : afficher la solution
A la suite de la commande python manage.py makemigrations polls ? on peut voir les fichiers sont créés comme à la question précédente par find . > liste4.txt ; tkdiff liste1.txt liste4.txt &. Voici ce que l'on voit alors :

Pour mettre comme question Est-ce que tout va bien ? en plus de What's new?, il suffit dans le shell de l'API d'écrire
     q = Question(question_text="Est-ce que tout va bien ?", pub_date=timezone.now())
     q.save()
     
Pour ajouter un utilisateur nommé tintin, on peut utiliser le bouton + de la zone Add dans le panneau d'administration du site.

Dans le terminal, pour consulter la structure de toutes les tables créées, il faut écrire
     $gh> sqlite3 db.sqlite3
     
     sqlite> .schema
     
     sqlite> .quit
     
Et pour lister les utilisateurs en mode interactif avec sqlite3 on peut se contenter de
     $gh> sqlite3 db.sqlite3
     
     SQLite version 3.11.0 2016-02-15 17:29:24
     Enter ".help" for usage hints.
     
     sqlite> select username from auth_user  ;
     
     admin
     tintin
     
     sqlite> .quit
     
Le programme associé doit ressembler au code ci-dessous, fichier users.sql3 :
     select username from auth_user ;
     
Voici comment l'utiliser pour la redirection du résultat dans listeUtilisateurs.txt
     sqlite3 db.sqlite3 < users.sql3  > listeUtilisateurs.txt
     
Ce qui ne fonctionne pas dans cette partie du tutoriel dans les salles du département informatique est la partie timezone. Il faut écrire import datetime pour pouvoir utiliser les timezone.

3. Les vues (troisième partie)

Suivre ce qui est indiqué dans la troisième partie du tutoriel.

Après avoir ajouté les vues avec les textes en anglais, essayer de modifier ces vues pour que les textes soient en français.

Solution : afficher la solution

Question volontairement non corrigée. Venez en T.P. !

4. Les formulaires (partie quatre)

Suivre ce qui est indiqué dans la quatrième partie du tutoriel.

Après avoir ajouté le code de la fonction vote() comme indiqué avec les textes en anglais, essayer de modifier ce code pour que le retour du render soit en français.

Pouvez-vous aussi afficher en français le message d'erreur 404 ?

Solution : afficher la solution

Pour le message d'erreur 404 (page not found), le tutoriel fournit la réponse. Si ce n'est pas clair, consulter les lien suivants : custom 404, django-local-404-page ou en français page 404.

5. Les tests (partie cinq) et la fin du tutoriel

Vérifier que tout ce qui est écrit sur les tests dans la partie cinq du tutoriel fonctionne comme indiqué.

Est-ce compliqué d'écrire des tests avec Django ?

Essayer d'ajouter un test pour garantir que dans l'ajout d'un utilisateur, le nom comporte au moins 3 caractères.

Terminer le tutoriel en effectuant toutes les manipulations demandées.

Solution : afficher la solution

Les tests ne sont pas plus compliqués en Django que dans d'autres langages ou frameworks. Si les explications du tutoriel ne sont pas suffisantes, consulter, en anglais django-testing-tutorial ou, en français, tests unitaires en Django.

6. Une application plus complète entièrement en français

Visiblement le tutoriel utilise des noms anglais partout, comme mysite au lieu de monsite, polls au lieu de sondage, Question text au lieu de Texte de la question, User au lieu d'utilisateur, Date published au lieu de Date de publication. Recommencer tout le tutoriel dès le début en nommant tout en français, des noms de fichiers aux champs de la base de données.

Compléter le site du tutoriel initial avec la gestion de deux polls nommés sondage et questionnaire. Le premier poll consiste à demander à l'utilisateur s'il est fumeur, réponse obligatoire OUI ou NON. Le second poll demande à l'utilisateur sa taille en centimètres, son poids actuel en kilogrammes et le poids idéal qu'il/elle aimerait atteindre.

En option, fournir la liste des gens fumeurs et puis celle des non fumeurs dans un document PDF généré à la volée, afficher un histogramme des fréquences relatives des fumeurs et des non fumeurs (axes de 0 à 100 %) sous forme d'un graphique au format PNG, fournir une liste alphabétique des personnes ayant donné leur poids avec les informations taille, poids actuel, IMC actuel, poids idéal et IMC idéal ainsi qu'un graphique au format SVG qui fournit un box-plot des poids réels et actuels, un graphique au format PNG de l'histogramme de la distribution des poids réels...

Solution : afficher la solution

L'ensemble des modifications au tuteur de base sont dans le fichier tuteurComplet.zip. Il s'agit en fait du code écrit par une étudiante Alice BAZANTÉ qui nous a donné son accord pour qu'on puisse l'utiliser et que nous remercions officiellement. En principe, avec Danjo 2.1 ce site est totalement fonctionnel.

Une fois l'archive décompressée, après une migration via python manage.py migrate le site affiche, via python manage.py runserver pour l'URL http://127.0.0.1:8000/polls



Si on clique sur le questionnaire Quoi de neuf ? on voit



puis, une fois le vote validé



Voici le PDF généré :



Si on clique sur le questionnaire Etes-vous fumeur ? on voit



puis, une fois le vote validé



et le PDF généré est :



Si on clique sur le questionnaire Etes-vous en forme ? on voit



puis, une fois le vote validé



Voici le PDF généré :



Nous vous laissons chercher, dans la petite centaine de fichiers présents dans ce projet, quels modules ont été utilisés pour les graphiques, la création du PDF, etc. Ce sera pour vous l'occasion de lire du Python et de comprendre l'architecture d'un projet au sens de Django. Par exemple, dans la barre de menu noir, il y a marqué SONNAIRE au lieu de QUESTIONNAIRE, ce serait à changer... Vous pouvez aussi exécuter python manage.py createsuperuser pour avoir des droits d'administration afin de consulter tout le site.



Pour les courageuses et les courageux, le lien tuteurComplet_FR.zip fournit une solution tout en français -- ce qui ne consiste pas juste à renommer les répertoires -- comme ci-dessous :



Au passage, l'URL http://127.0.0.1:8000 renvoie aussi sur la bonne page...

retour au plan de cours

Code-source PHP de cette page ; code Javascript associé.

Retour à la page principale de (gH)