Django Tps

CHAPITRE 1
TP 1
09/04/2013 Lobjet de ce TP est la dcouverte du framework web Django et la familiarisation avec ses concepts de base. Laccent est mis sur laptitude congurer son environnement de travail sous UNIX et crer rapidement une application web fonctionnelle laide 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 ofcielle : https ://docs.djangoproject.com Contact cours/TPs : Mathias Monnerville, mathias.monnerville@univ-montp2.fr
1.1 Prparation de lenvironnement

Linstallation de Django va se faire localement dans votre rpertoire utilisateur $HOME. Cela permet dinstaller facilement et tout moment la dernire version du framework. 1. Lancer le script tpinit.sh qui positionne les variables denvironnement et garantit lutilisation dune version de Python compatible avec Django :
$ /net/local/django/tpinit.sh
Ce script cre un rpertoire $HOME/local et un lien symbolique vers Python 2.7. Il modie votre $PATH an que lxcution de la commande python dans le terminal lance la version 2.7. Pour que les changements soient pris en compte immdiatement, se dconnecter en fermant sa session ou bien forcer la prise en compte de la nouvelle conguration dans le terminal courant avec :
$ source ~/.bash_profile
2. Crer un rpertoire django qui comprendra le code source des projets tudis en scance de TP :
$ mkdir ~/django && cd ~/django
puis rcuprer et dcompresser larchive 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 rpertoire $HOME/local avec la commande :

$ python setup.py install --prefix=~/local $ cd ~/django
Enn, vrier que Django est correctement install en rcuprant son numro de version :
$ python -c "import django; print django.get_version()" 1.5.1
1.2 Hello, world !

1. Crer le projet hello :
$ django-admin.py startproject hello $ cd hello
2. Lister le contenu du rpertoire avec la commande tree :

+-| | | | +-hello +-- __init__.py +-- settings.py +-- urls.py +-- wsgi.py manage.py
(a) Quelle est lutilit du script manage.py ? (b) Quel est le rle du cher settings.py ? 3. Lancer manage.py avec la sous-commande runserver pour dmarrer le serveur de dveloppement sur le port 8000. Visiter la page par dfaut en faisant pointer votre navigateur sur http://localhost:8000. 4. Crer une nouvelle application world dans ce projet avec la sous-commande startapp de manage.py. Le contenu du rpertoire 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 modiant le chier hello/settings.py pour que la variable INSTALLED_APPS (qui est un tuple) contienne lentre :
INSTALLED_APP = ( ... world, )
6. Changer la page daccueil du site en (a) ajoutant une entre dans la variable urlpatterns du chier hello/urls.py de manire router les requtes destination de / (GET /) vers une vue nomme home (b) Implmentant une fonction def home(request) dans le chier world/views.py qui retourne un objet django.http.HttpResponse ayant pour paramtre la chane de caractres Hello, world ! 7. Ajouter une entre dans urlpatterns pour que lon puisse spcier un nom en minuscules dans lurl et implmenter une fonction hello() dans views.py qui retourne un objet HttpResponse de la forme :
return HttpResponse("Hello, <b>%s</b>!" % name)
Quel le code HTTP retourn si vous utilisez lurl /julien01 ? Pourquoi ?
1.3 Templates HTML

Jusqu prsent, les vues dnies dans views.py ne retournent pas de document HTML bien form. Dans la suite du TP, le code HTML de lapplication sera dni dans un ou plusieurs chiers externes. 1. Crer le rpertoire templates dans lapplication world puis ajouter un chier home.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;"> trs bientt.</p>  <hr/> <div style="font-size: 10px;">Message daccueil gnr automatiquement.</div> </body> </html>
2. Modier la fonction hello() dans world/views.py de manire utiliser la fonction render_to_response() du package django.shortcuts. La fonction render_to_response() doit utiliser un dictionnaire Python contenant une clef nom dont la valeur sera passe au moteur de rendu du template HTML. 3. Modier la fonction hello() de manire ce quelle calcule et retourne au template la date du jour dans la variable {{ date }}. 4. Crer un template base.html dnissant laspect gnral du site laide du template tag {% block %}...{% endblock %} pour que base.html puisse tre rutilis sur dautres pages du site. 5. Modier le template home.html en simpliant grandement sa structure de manire hriter du template base.html. 6. Dans le template base.html, remplacer tous les attributs CSS style= par des attributs class= et externaliser les dnitions de styles CSS dans un chier world/static/css/hello.css. 7. Charger les fonctions de gestion des ressources statiques de Django en compltant le template 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 rfrencer facilement des ressources statiques (CSS, images, javascript etc.) utilises par lapplication.
CHAPITRE 2
TP 2
16/04/2013 Lobjectif de ce TP est de dvelopper en une seule sance une application web fonctionnelle utilisant le framework Django selon le scnario suivant : Un ancien client vous contacte pour vous proposer le dveloppement du back ofce dun site dannonces immobilires. Il dispose dj dune quipe de cra performante compose dun designer, de deux graphistes et dun intgrateur. Les dlais sont courts : il souhaite avoir un site prsenter dans deux jours, cra incluse, et vous demande la livraison dun site fonctionnel en une demi-journe (la dure de ce TP !), prt tre utilis par ses quipes. Vous acceptez sa proposition et parvenez ngocier un contrat de 600 euros pour la demi-journe. 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 ofcielle : https ://docs.djangoproject.com Contact cours/TPs : Mathias Monnerville, mathias.monnerville@univ-montp2.fr
2.1 Dboguer efcacement

An de faciliter le dbogage de lapplication tout au long du cycle de dveloppement, vous utiliserez lapplication Django tierce (ou Django app) nomme Django Debug Toolbar. 1. Crer le projet fastimmo (immobilier rapide) 2. Dans fastimmo, crer puis activer lapplication vitrine 3. Crer un template home.html dans lapplication vitrine et dnir un chemin daccs la page daccueil / dans le chier vitrine/urls.py. Utiliser les proprits dhritage des templates pour dnir un template commun base.html puis sparer lentte et le pied de page dans les chiers header.html et footer.html respectivement. La page daccueil home.html doit afcher le texte :
<h2 class="title">Bienvenue sur FastImmo !</h2>
4. Installer lapplication libre Django Debug Toolbar en rcuprant la dernire version sur github depuis https ://github.com/django-debug-toolbar/django-debug-toolbar, soit en clonant le code avec git, soit en rcuprant un chier zip de la dernire version de la branche master. Suivre la procdure dinstallation suivante : (a) Copier le rpertoire django_toolbar dans le rpertoire du projet fastimmo (b) Modier settings.py en ajoutant au tuple MIDDLEWARE_CLASSES la chane debug_toolbar.middleware.DebugToolbarMiddleware (c) Dnir la variable suivante dans settings.py :
INTERNAL_IPS = (127.0.0.1,)
(d) Activer lapplication debug_toolbar (e) Relancer le serveur web de dveloppement : une barre de contrle Javascript doit apparaitre sur la partie droite de la fentre Vous pouvez par exemple utiliser cet outil pour inspecter le contenu des variables passes aux templates HTML, analyser lefcacit des requtes SQL effectues ou remonter la hirarchie des templates utiliss pour gnrer la page courante.
2.2 Persistence des donnes

Le client prvoit la gestion dune centaine dannonces immobilires. Lutilisation dune base de donnes SQLite conviendra parfaitement et sera trs facile dployer en production. 1. Vrier que Python 2.7 supporte sqlite3 nativement en lanant Python dans un terminal et en important le module sqlite3 2. Spcier les paramtres de connexion la base de donnes en modiant la variable DATABASES de settings.py pour que ENGINE contienne django.db.backends.sqlite3 et NAME dnisse le nom de la base fastimmo.db 3. Crer la base de donnes en utilisant la commande syncdb de manage.py et choisir un login et un mot de passe pour le compte administrateur de lapplication. 4. Se connecter la base de donnes depuis un terminal avec dbshell et afcher la structure de la base avec la commande .schema :
$ python manage.py dbshell SQLite version 3.7.11 2012-03-20 11:35:50 Enter ".help" for instructions Enter SQL statements terminated with a ";" sqlite> .schema
Interprter la sortie de la commande .schema
3. On souhaite enregistrer les annonces immobilires dans deux tables Annonce et TypeBien ayant les champs suivants :
Annonce Titre Description Type du bien Date et heure cration Surface m2 Nombre de pices Ville Prix 1,1
est de type
1,n TypeBien Type (maison, appart, ...)
(a) Implmenter les modles Annonce et TypeBien dans vitrine/models.py avec les signatures suivantes :
from django.db import models class Annonce(models.Model): ... class TypeBien(models.Model): ...
Dnir les attributs suivants de type django.db.models.*Field pour la classe Annonce en utilisant la documentation de rfrence https ://docs.djangoproject.com/en/1.5/ref/models/elds/ :
Nom Type titre String description String type_bien clef trangre ForeignKey vers table TypeBien::Type creation Date et heure surface Entier pieces Entier ville String prix Decimal Procder de faon identique pour la classe TypeBien : Nom Type type_bien String (b) Resynchroniser la base puis xcuter la commande :
$ python manage.py sql vitrine
Expliciter la rgle de nommage des tables de la base.
2.3 Interface dadministration

Pour gagner du temps, nous allons utiliser linterface dadministration fournie par le framework permettant la gnration automatique des formulaires ncessaires lajout dannonces immobilires dans la base de donnes. Il sagit dune fonctionnalit majeure de Django qui permet en quelques lignes doffrir au client une interface dadministration conviviale lui permettant de commencer immdiatement la saisie des annonces pendant que le dveloppement de lapplication se poursuit. 1. Dcommenter lentre django.contrib.admin de INSTALLED_APPS dans settings.py 2. Ajouter les nouvelles tables relatives la partie admin en synchronisant nouveau la base avec lajout de cette nouvelle application 3. Dcommenter les 3 lignes suivantes dans vitrine/urls.py de manire activer linterface dadministration pour lapplication :
from django.contrib import admin admin.autodiscover() urlpatterns = patterns(, ... url(r^admin/, include(admin.site.urls)), )
4. Se connecter linterface dadministration depuis http://localhost:8000/admin/ et saisir les identiants utiliss lors du premier syncdb
Linterface dadministration permet dajouter de nouveaux utilisateurs et/ou des groupes avec des droits diffrents. Cependant, vous ne pouvez pas encore ajouter dannonces. Pour cela, indiquer explicitement Django que vous souhaitez pouvoir modier les modles Annonce et TypeBien depuis linterface dadmin :
# Dans vitrine/admin.py from django.contrib import admin from vitrine.models import Annonce, TypeBien admin.site.register(Annonce) admin.site.register(TypeBien)
Relancer le serveur de dveloppement et raffraichir la page du navigateur.
2.4 Prparation du front ofce

Lobjectif est de prparer un layout simple qui pourra tre enrichi par lquipe de cratifs. Laccent sera donc mis sur la clart des templates et lajout de commentaires si ncessaire. 1. Saisir une dizaine dannonces et les afcher dans le template home.html avec les contraintes suivantes : (a) Afcher lensemble des annonces dans une boucle {% for %} classes par dfaut de la plus rcente la plus ancienne (b) Une seule annonce par ligne o doivent apparaitre uniquement le titre de lannonce en majuscule (utiliser un ltre standard), la date dajout et le prix. Placer chaque annonce dans un div avec un attribute class="annonce" (c) Le titre de lannonce doit tre un lien vers une che dtaille dans un template spar bienimmo.html, o toutes les informations doivent gurer. Utiliser le template tag {% url %} (d) Ajouter un lien de retour vers la page daccueil depuis le template bienimmo.html 2. Crer les rpertoires static/css, static/js et static/img dans lapplication vitrine et dnir un chier fastimmo.css par dfault charg avec le tag {% static %} 3. Si ce nest pas dj fait, modier base.html pour que les templates header.html et footer.html soient contenus dans des div avec un attribut class spcique
2.5 Moteur de recherche

1. Implmenter un simple moteur de recherche permettant laide dun formulaire de chercher dans le titre et la description dune annonce et dafcher les rsultats ordonns de lannonce la plus rcente la plus ancienne :
<form method="post" action="{% url ... %}"> {% csrf_token %} ... </form>
Rfrences : https ://docs.djangoproject.com/en/1.5/ref/contrib/csrf/ https ://docs.djangoproject.com/en/dev/ref/request-response/ 2. Indiquer le nombre de rsulats retourns 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 ofcielle du framework : https ://docs.djangoproject.com Contact cours/TPs : Mathias Monnerville, mathias.monnerville@univ-montp2.fr
3.1 Gestion des tudiants

crire une application Django zenith qui permettra aux services administratifs dinscrire les tudiants. Vous utiliserez une base de donnes SQLite. 1. Chaque tudiant a 5 champs dinformations : un identiant numrique, le nom, la date de naissance, le grade (LMD) et une indication prcisant sil est boursier. 2. Sur la page principale du site, crer un menu permettant (a) dafcher la liste des tudiants sur une page distincte dans un tableau contenant lensemble des tudiants avec les informations les concernants (b) dajouter un nouvel tudiant laide dun formulaire. Mettre en place une validation des champs avec afchage des erreurs dans la page (utiliser django.forms.ModelForm) (c) de supprimer un tudiant en saisissant son identiant numrique 3. Ajouter une centaine dtudiants automatiquement dans la base depuis la ligne de commande en 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 gnrer alatoirement les informations sachant que : (a) lidentiant numrique est suprieur 10000 (b) le nom fait entre 4 et 9 caractres choisis dans lintervalle [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 chanes de caractres L1, L2, L3, M1, M2 (e) la mention de la bourse est un boolen 4. Enrichir le menu de la page daccueil avec une option permettant dafcher la liste de tous les tudiants boursiers de moins de 21 ans. 5. Crer un rapport accessible depuis la page daccueil rpertoriant le nombre dtudiants par grade 6. Modier lafchage de la liste de tous les tudiants pour quun clic sur le nom permette denvoyer un mail ltudiant (prxe mailto:). Ladresse email sera de la forme nom@etud.univ-montp2.fr. Pour cela, crer un template tag personnalis de la forme :
<td><a href="{% email etudiant.identifiant %}" /></td>
3.2 Moteur de recherche

1. Sur la page daccueil, ajouter un champ texte en haut de lcran permettant de chercher des tudiants en saisissant une partie de leur nom ou de leur identiant. Ajouter un bouton Chercher pour lancer la recherche et retourner les rsultats dans une nouvelle page, tris sur le nom par ordre croissant. 2. Amliorer la page de rsultats : (a) nafcher que les 10 premiers tudiants (b) ajouter un lien hypertexte Plus... :
<a id="more" href="#">Plus...</a>
(c) tlcharger la dernire version de la bibliothque jQuery depuis http ://jquery.com puis linstaller dans zenith/static/js/ (d) insrer du code Javascript dans la page de rsultats en utilisant la fonction jQuery ajax() pour charger 10 rsultats supplmentaires (retourner un objet JSON depuis le code Python de la vue) :
return HttpResponse(json.dumps(data), content_type="application/json")
(e) modier le DOM la vole pour ajouter les nouveaux rsultats avec un effet de fondu fadeIn() (f) faire disparatre le lien Plus... si tous les rsultats sont afchs lcran

Django Tps

Transféré par

Droits d'auteur :

Formats disponibles

Django Tps

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Django Tps

Transféré par

Droits d'auteur :

Formats disponibles

CHAPITRE 1

1.1 Prparation de lenvironnement

$ mkdir ~/django && cd ~/django

puis rcuprer et dcompresser larchive de la version Django 1.5.1 :

Installer Django dans son rpertoire $HOME/local avec la commande :

1.2 Hello, world !

2. Lister le contenu du rpertoire avec la commande tree :

Quel le code HTTP retourn si vous utilisez lurl /julien01 ? Pourquoi ?

1.3 Templates HTML

2.1 Dboguer efcacement

2.2 Persistence des donnes

Interprter la sortie de la commande .schema

1,n TypeBien Type (maison, appart, ...)

Expliciter la rgle de nommage des tables de la base.

2.3 Interface dadministration

Relancer le serveur de dveloppement et raffraichir la page du navigateur.

2.4 Prparation du front ofce

2.5 Moteur de recherche

<form method="post" action="{% url ... %}"> {% csrf_token %} ... </form>

3.1 Gestion des tudiants

3.2 Moteur de recherche

Vous aimerez peut-être aussi