django tps
TRANSCRIPT
CHAPITRE 1
TP 1
09/04/2013
L’objet de ce TP est la découverte du framework web Django et la familiarisation avec ses conceptsde base. L’accent est mis sur l’aptitude à configurer son environnement de travail sous UNIX et àcréer rapidement une application web fonctionnelle à l’aide du framework.
Documents :– Cours : http ://sif.info-ufr.univ-montp2.fr/mmonnerville/django/cours/django.html– Énoncé du TP : http ://sif.info-ufr.univ-montp2.fr/mmonnerville/django/tps/html/index.html– Documentation officielle : https ://docs.djangoproject.comContact cours/TPs : Mathias Monnerville, [email protected]
1.1 Préparation de l’environnement
L’installation de Django va se faire localement dans votre répertoire utilisateur $HOME. Cela per-met d’installer facilement et à tout moment la dernière version du framework.
1. Lancer le script tpinit.sh qui positionne les variables d’environnement et garantit l’uti-lisation d’une version de Python compatible avec Django :
$ /net/local/django/tpinit.sh
Ce script crée un répertoire $HOME/local et un lien symbolique vers Python 2.7. Il modifievotre $PATH afin que l’éxécution de la commande python dans le terminal lance la version2.7.Pour que les changements soient pris en compte immédiatement, se déconnecter en fermantsa session ou bien forcer la prise en compte de la nouvelle configuration dans le terminalcourant avec :
$ source ~/.bash_profile
2. Créer un répertoire django qui comprendra le code source des projets étudiés en scéancede TP :
i
$ mkdir ~/django && cd ~/django
puis récupérer et décompresser l’archive de la version Django 1.5.1 :
$ cp /net/local/django/Django-1.5.1.tar.gz .$ tar xzf Django-1.5.1.tar.gz$ cd Django-1.5.1
Installer Django dans son répertoire $HOME/local avec la commande :
$ python setup.py install --prefix=~/local$ cd ~/django
Enfin, vérifier que Django est correctement installé en récupérant son numéro de version :
$ python -c "import django; print django.get_version()"1.5.1
1.2 Hello, world !
1. Créer le projet hello :
$ django-admin.py startproject hello$ cd hello
2. Lister le contenu du répertoire avec la commande tree :
+-- hello| +-- __init__.py| +-- settings.py| +-- urls.py| +-- wsgi.py+-- manage.py
(a) Quelle est l’utilité du script manage.py ?
(b) Quel est le rôle du ficher settings.py ?
3. Lancer manage.py avec la sous-commande runserver pour démarrer le serveur de dé-veloppement sur le port 8000. Visiter la page par défaut en faisant pointer votre navigateursur http://localhost:8000.
4. Créer une nouvelle application world dans ce projet avec la sous-commande startappde manage.py. Le contenu du répertoire du projet doit ressembler à :
+-- hello| +-- __init__.py| +-- settings.py| +-- urls.py| +-- wsgi.py+-- manage.py+-- world
+-- __init__.py+-- models.py+-- tests.py+-- views.py
5. Activer cette nouvelle application en modifiant le fichier hello/settings.py pour quela variable INSTALLED_APPS (qui est un tuple) contienne l’entrée :
INSTALLED_APP = (...’world’,
)
6. Changer la page d’accueil du site en
(a) ajoutant une entrée dans la variable urlpatterns du fichier hello/urls.py demanière à router les requêtes à destination de / (GET /) vers une vue nommée home
(b) Implémentant une fonction def home(request) dans le fichierworld/views.py qui retourne un objet django.http.HttpResponseayant pour paramètre la chaîne de caractères “Hello, world !”
7. Ajouter une entrée dans urlpatterns pour que l’on puisse spécifier un nom en minus-cules dans l’url et implémenter une fonction hello() dans views.py qui retourne unobjet HttpResponse de la forme :
return HttpResponse("Hello, <b>%s</b>!" % name)
Quel le code HTTP retourné si vous utilisez l’url /julien01 ? Pourquoi ?
1.3 Templates HTML
Jusqu’à présent, les vues définies dans views.py ne retournent pas de document HTML bienformé. Dans la suite du TP, le code HTML de l’application sera défini dans un ou plusieurs fichiersexternes.
1. Créer le répertoire templates dans l’application world puis ajouter un fichierhome.html dont le contenu est le suivant :
<html><head><title>Hello !</title></head><body>
<h1 style="text-align: center;">Accueil</h1><p>Bonjour {{ nom }} !</p><p>Nous sommes le {{ date }}.</p><p style="color: #00f;">À très bientôt.</p><!-- footer --><hr/><div style="font-size: 10px;">Message d’accueil généré
automatiquement.</div></body>
</html>
2. Modifier la fonction hello() dans world/views.py de manière à utiliser lafonction render_to_response() du package django.shortcuts. La fonctionrender_to_response() doit utiliser un dictionnaire Python contenant une clef “nom”dont la valeur sera passée au moteur de rendu du template HTML.
3. Modifier la fonction hello() de manière à ce qu’elle calcule et retourne au template ladate du jour dans la variable {{ date }}.
4. Créer un template base.html définissant l’aspect général du site à l’aide du template tag{% block %}...{% endblock %} pour que base.html puisse être réutilisé surd’autres pages du site.
5. Modifier le template home.html en simplifiant grandement sa structure de manière à héri-ter du template base.html.
6. Dans le template base.html, remplacer tous les attributs CSS style= par desattributs class= et externaliser les définitions de styles CSS dans un fichierworld/static/css/hello.css.
7. Charger les fonctions de gestion des ressources statiques de Django en complétant le tem-plate base.html comme suit :
{% load staticfiles %}<html>
<head><title>Hello!</title><link rel="stylesheet" type="text/css"
href="{% static ’css/hello.css’ %}" /></head>...
</html>
Le template tag {% static %} permet de référencer facilement des ressources statiques(CSS, images, javascript etc.) utilisées par l’application.
CHAPITRE 2
TP 2
16/04/2013
L’objectif de ce TP est de développer en une seule séance une application web fonctionnelleutilisant le framework Django selon le scénario suivant :
Un ancien client vous contacte pour vous proposer le développement du back office d’un site d’an-nonces immobilières. Il dispose déjà d’une équipe de créa performante composée d’un designer, dedeux graphistes et d’un intégrateur. Les délais sont courts : il souhaite avoir un site à présenter dansdeux jours, créa incluse, et vous demande la livraison d’un site fonctionnel en une demi-journée(la durée de ce TP !), prêt à être utilisé par ses équipes.
Vous acceptez sa proposition et parvenez à négocier un contrat de 600 euros pour la demi-journée.
Documents :– Cours : http ://sif.info-ufr.univ-montp2.fr/mmonnerville/django/cours/django.html– Énoncé du TP : http ://sif.info-ufr.univ-montp2.fr/mmonnerville/django/tps/html/index.html– Documentation officielle : https ://docs.djangoproject.comContact cours/TPs : Mathias Monnerville, [email protected]
2.1 Déboguer efficacement
Afin de faciliter le débogage de l’application tout au long du cycle de développement, vous utili-serez l’application Django tierce (ou “Django app”) nommée Django Debug Toolbar.
1. Créer le projet fastimmo (immobilier rapide)
2. Dans fastimmo, créer puis activer l’application vitrine
3. Créer un template home.html dans l’application vitrine et définir un chemin d’accèsà la page d’accueil / dans le fichier vitrine/urls.py. Utiliser les propriétés d’héritagedes templates pour définir un template commun base.html puis séparer l’entête et lepied de page dans les fichiers header.html et footer.html respectivement. La paged’accueil home.html doit afficher le texte :
<h2 class="title">Bienvenue sur FastImmo !</h2>
v
4. Installer l’application libre Django Debug Toolbar en récupérant la dernière version sur gi-thub depuis https ://github.com/django-debug-toolbar/django-debug-toolbar, soit en clonantle code avec git, soit en récupérant un fichier zip de la dernière version de la branchemaster. Suivre la procédure d’installation suivante :
(a) Copier le répertoire django_toolbar dans le répertoire du projet fastimmo
(b) Modifier settings.py en ajoutant au tuple MIDDLEWARE_CLASSES la chaîne’debug_toolbar.middleware.DebugToolbarMiddleware’
(c) Définir la variable suivante dans settings.py :
INTERNAL_IPS = (’127.0.0.1’,)
(d) Activer l’application debug_toolbar
(e) Relancer le serveur web de développement : une barre de contrôle Javascript doit ap-paraitre sur la partie droite de la fenêtre
Vous pouvez par exemple utiliser cet outil pour inspecter le contenu des variables passées auxtemplates HTML, analyser l’efficacité des requêtes SQL effectuées ou remonter la hiérarchie destemplates utilisés pour générer la page courante.
2.2 Persistence des données
Le client prévoit la gestion d’une centaine d’annonces immobilières. L’utilisation d’une base dedonnées SQLite conviendra parfaitement et sera très facile à déployer en production.
1. Vérifier que Python 2.7 supporte sqlite3 nativement en lançant Python dans un terminal eten important le module sqlite3
2. Spécifier les paramètres de connexion à la base de données en modifiantla variable DATABASES de settings.py pour que ’ENGINE’ contienne’django.db.backends.sqlite3’ et ’NAME’ définisse le nom de la base’fastimmo.db’
3. Créer la base de données en utilisant la commande syncdb de manage.py et choisir unlogin et un mot de passe pour le compte administrateur de l’application.
4. Se connecter à la base de données depuis un terminal avec dbshell et afficher la structurede la base avec la commande .schema :
$ python manage.py dbshellSQLite version 3.7.11 2012-03-20 11:35:50Enter ".help" for instructionsEnter SQL statements terminated with a ";"sqlite> .schema
Interpréter la sortie de la commande .schema
3. On souhaite enregistrer les annonces immobilières dans deux tables Annonce etTypeBien ayant les champs suivants :
Annonce
TitreDescription
Type du bienDate et heure création
Surface m2Nombre de pièces
VillePrix
est de type
1,1
TypeBien
Type (maison, appart, ...)
1,n
(a) Implémenter les modèles Annonce et TypeBien dans vitrine/models.pyavec les signatures suivantes :
from django.db import models
class Annonce(models.Model):...
class TypeBien(models.Model):...
Définir les attributs suivants de type django.db.models.*Fieldpour la classe Annonce en utilisant la documentation de référencehttps ://docs.djangoproject.com/en/1.5/ref/models/fields/ :
Nom Typetitre Stringdescription Stringtype_bien clef étrangère ForeignKey vers table TypeBien::Typecreation Date et heuresurface Entierpieces Entierville Stringprix Decimal
Procéder de façon identique pour la classe TypeBien :Nom Typetype_bien String
(b) Resynchroniser la base puis éxécuter la commande :
$ python manage.py sql vitrine
Expliciter la règle de nommage des tables de la base.
2.3 Interface d’administration
Pour gagner du temps, nous allons utiliser l’interface d’administration fournie par le frameworkpermettant la génération automatique des formulaires nécessaires à l’ajout d’annonces immobi-lières dans la base de données.
Il s’agit d’une fonctionnalité majeure de Django qui permet en quelques lignes d’offrir au clientune interface d’administration conviviale lui permettant de commencer immédiatement la saisiedes annonces pendant que le développement de l’application se poursuit.
1. Décommenter l’entrée ’django.contrib.admin’ de INSTALLED_APPS danssettings.py
2. Ajouter les nouvelles tables relatives à la partie admin en synchronisant à nouveau la baseavec l’ajout de cette nouvelle application
3. Décommenter les 3 lignes suivantes dans vitrine/urls.py de manière à activer l’inter-face d’administration pour l’application :
from django.contrib import adminadmin.autodiscover()
urlpatterns = patterns(’’,...url(r’^admin/’, include(admin.site.urls)),
)
4. Se connecter à l’interface d’administration depuis http://localhost:8000/admin/et saisir les identifiants utilisés lors du premier syncdb
L’interface d’administration permet d’ajouter de nouveaux utilisateurs et/ou des groupes avec desdroits différents. Cependant, vous ne pouvez pas encore ajouter d’annonces.
Pour cela, indiquer explicitement à Django que vous souhaitez pouvoir modifier les modèlesAnnonce et TypeBien depuis l’interface d’admin :
# Dans vitrine/admin.py
from django.contrib import adminfrom vitrine.models import Annonce, TypeBien
admin.site.register(Annonce)admin.site.register(TypeBien)
Relancer le serveur de développement et raffraichir la page du navigateur.
2.4 Préparation du front office
L’objectif est de préparer un layout simple qui pourra être enrichi par l’équipe de créatifs. L’accentsera donc mis sur la clarté des templates et l’ajout de commentaires si nécessaire.
1. Saisir une dizaine d’annonces et les afficher dans le template home.html avec lescontraintes suivantes :
(a) Afficher l’ensemble des annonces dans une boucle {% for %} classées par défaut dela plus récente à la plus ancienne
(b) Une seule annonce par ligne où doivent apparaitre uniquement le titre de l’annonce enmajuscule (utiliser un filtre standard), la date d’ajout et le prix. Placer chaque annoncedans un div avec un attribute class="annonce"
(c) Le titre de l’annonce doit être un lien vers une fiche détaillée dans un template séparébienimmo.html, où toutes les informations doivent figurer. Utiliser le template tag{% url %}
(d) Ajouter un lien de retour vers la page d’accueil depuis le template bienimmo.html2. Créer les répertoires static/css, static/js et static/img dans l’application
vitrine et définir un fichier fastimmo.css par défault chargé avec le tag {% static%}
3. Si ce n’est pas déjà fait, modifier base.html pour que les templates header.html etfooter.html soient contenus dans des div avec un attribut class spécifique
2.5 Moteur de recherche
1. Implémenter un simple moteur de recherche permettant à l’aide d’un formulaire de chercherdans le titre et la description d’une annonce et d’afficher les résultats ordonnés de l’annoncela plus récente à la plus ancienne :
<form method="post" action="{% url ... %}">{% csrf_token %}...
</form>
Références :– https ://docs.djangoproject.com/en/1.5/ref/contrib/csrf/– https ://docs.djangoproject.com/en/dev/ref/request-response/
2. Indiquer le nombre de résulats retournés dans la page
CHAPITRE 3
TP 3
30/04/2013
Documents :– Cours : http ://sif.info-ufr.univ-montp2.fr/mmonnerville/django/cours/django.html– Énoncé du TP : http ://sif.info-ufr.univ-montp2.fr/mmonnerville/django/tps/html/index.html– Documentation officielle du framework : https ://docs.djangoproject.comContact cours/TPs : Mathias Monnerville, [email protected]
3.1 Gestion des étudiants
Écrire une application Django zenith qui permettra aux services administratifs d’inscrire lesétudiants. Vous utiliserez une base de données SQLite.
1. Chaque étudiant a 5 champs d’informations : un identifiant numérique, le nom, la date denaissance, le grade (LMD) et une indication précisant s’il est boursier.
2. Sur la page principale du site, créer un menu permettant
(a) d’afficher la liste des étudiants sur une page distincte dans un tableau contenant l’en-semble des étudiants avec les informations les concernants
(b) d’ajouter un nouvel étudiant à l’aide d’un formulaire. Mettre en place unevalidation des champs avec affichage des erreurs dans la page (utiliserdjango.forms.ModelForm)
(c) de supprimer un étudiant en saisissant son identifiant numérique
3. Ajouter une centaine d’étudiants automatiquement dans la base depuis la ligne de commandeen utilisant la commande shell (ou en écrivant un script Python), i.e. :
$ python manage.py shell>>> from zenith import Etudiant
Utiliser la fonction random.randint(min, max) pour générer aléatoirement les in-formations sachant que :
(a) l’identifiant numérique est supérieur à 10000
(b) le nom fait entre 4 et 9 caractères choisis dans l’intervalle [a-z]
xi
ord(′a′) ≤ char ≤ ord(′z′)
(c) la date de naissance datetime.date est comprise entre 1988 et 1994
(d) le grade est une valeur parmi les chaînes de caractères L1, L2, L3, M1, M2
(e) la mention de la bourse est un booléen
4. Enrichir le menu de la page d’accueil avec une option permettant d’afficher la liste de tousles étudiants boursiers de moins de 21 ans.
5. Créer un rapport accessible depuis la page d’accueil répertoriant le nombre d’étudiants pargrade
6. Modifier l’affichage de la liste de tous les étudiants pour qu’un clic sur le nom per-mette d’envoyer un mail à l’étudiant (préfixe mailto:). L’adresse email sera de la [email protected]. Pour cela, créer un template tag personnalisé de laforme :
<td><a href="{% email etudiant.identifiant %}" /></td>
3.2 Moteur de recherche
1. Sur la page d’accueil, ajouter un champ texte en haut de l’écran permettant de chercherdes étudiants en saisissant une partie de leur nom ou de leur identifiant. Ajouter un boutonChercher pour lancer la recherche et retourner les résultats dans une nouvelle page, triéssur le nom par ordre croissant.
2. Améliorer la page de résultats :
(a) n’afficher que les 10 premiers étudiants
(b) ajouter un lien hypertexte “Plus...” :
<a id="more" href="#">Plus...</a>
(c) télécharger la dernière version de la bibliothèque jQuery depuis http ://jquery.com puisl’installer dans zenith/static/js/
(d) insérer du code Javascript dans la page de résultats en utilisant la fonction jQuery ajax()pour charger 10 résultats supplémentaires (retourner un objet JSON depuis le codePython de la vue) :
return HttpResponse(json.dumps(data), content_type="application/json")
(e) modifier le DOM à la volée pour ajouter les nouveaux résultats avec un effet de fondufadeIn()
(f) faire disparaître le lien “Plus...” si tous les résultats sont affichés à l’écran