You are on page 1of 67

Pierre Alexis et Hugues Bersini 1 tud

cas in e de
sp
Faceb ire de
ook !

Apprendre
Apprendre
lalaprogrammation web
programmation web
avec avec
Python
Python
Django
Django et
et
Principes
Principesetet bonnes pratiques
bonnes pratiques
pour
pourles
les sites web dynamiques
sites web dynamiques

Groupe Eyrolles, 2012,


ISBN : 978-2-212-13499-5
Avant-propos
Cet ouvrage se base sur Django, un outil de cration de sites dynamiques crit en Python, langage
aujourdhui trs populaire pour apprendre programmer. Ce livre enseigne la programmation web
de faon aussi moderne que possible et sadresse aussi bien aux enseignants qu leurs lves. Il vous
demande peu de pr-requis, mais reste ambitieux, de sorte que vous naurez pas rougir devant les
professionnels.

SOMMAIRE
B Rsumer lambition de ce livre
B Resituer Django et Python dans lvolution des technologies logicielles
B qui sadresse ce livre
B Plan de louvrage
Apprendre la programmation web avec Python et Django
VI

CULTURE Du Web prhistorique au Web 2.0 moderne et dynamique


Il y a vingt ans, on dambulait entre les pages du Web comme entre deux tableaux de matre dans un
muse ; seule diffrence, on tait assis face son cran, souris la main. Au fil des clics, les sites web
saffichaient : ils taient dj jolis et colors, riches en information et minemment utiles mais inalt-
rables et rtifs toute autre forme dinterfrence que ce vagabondage de page en page.
Il tait impossible pour linternaute dy crire son numro de carte de crdit pour acqurir une toile, de
rserver sa place pour une visite du muse, de senregistrer comme utilisateur du site et dpingler sur le
sourire de Mona Lisa un commentaire ou des moustaches. Vous reveniez sur la mme page quelques minu-
tes plus tard ? Le contenu tait inchang. Tout tait placidement statique ; en un mot, le Web fonctionnait
pour lessentiel dans une seule direction : des serveurs dinformation vers les clients. Les utilisateurs taient
la merci de ce que les dveloppeurs ct serveur avaient choisi de leur dvoiler. Le serveur ne percevait
que le clic dentre dans le site et se bornait renvoyer en retour la page sollicite ; il tait sourd et indiff-
rent toute autre requte. Le Web dalors, certes impressionnant et rvolutionnaire, tait statique.
James Gosling, le concepteur du langage de programmation Java (dont le succs devra beaucoup au
Web), prsenta en 1995 un nouveau concept de navigateur lors dune confrence consacre au Web. Il fit
dabord apparatre la reprsentation en 2D dune molcule dans un navigateur web classique, laissant
lassistance de marbre. Quels ne furent la surprise et lenthousiasme de ce mme public lorsqu laide de
sa souris, il se mit bouger la molcule ! Elle ragissait aux stimuli de la souris, obissait aux injonctions
de linternaute. Un programme Java, appel applet , sexcutait dans le navigateur (Mosaic, lpo-
que) rendant cette interaction effective. Le Web venait de gagner ses premiers galons de dynamisme et
dinteractivit. Il en devenait chatouilleux.
En 2004, prenant conscience que lutilisateur passait de spectateur passif acteur essentiel du fonction-
nement du Web, sursaturant ce dernier de ses vidos de vacances, son savoir, ses copains de lyce ou ses
prises de position politique, Tim OReilly dcida de couronner le Web 2.0. Ce nouveau Web, aussi royal
quil ft, devenait compltement assujetti au bon vouloir de ses sujets qui, au-del des sempiternels clics
de navigation, pouvaient dornavant commenter, prorer, refuser, voter, voler, acheter, vendre, ngocier,
rserver, prter, jouer, couter, visionner, projeter, et tant dautres activits encore lloignant de lcran
de tlvision pour celui de son PC. La confiscation du Web par cette multiplicit dego, choisissant den
faire cette excroissance narcissique quil est devenu, fut considre ce point rvolutionnaire que le
clbre hebdomadaire amricain Time choisit dlire You la personne de lanne 2006.

Laffichage dun site web selon le bon vouloir de son crateur ncessite la matrise
dun langage de prsentation de contenu appel HTML (XHTML ou HTML5,
vous comprendrez ces nuances par la suite), dcrivant et paramtrant lorganisation
de la page, la taille et le style des diffrents lments de celle-ci. Cest le seul langage
compris par les navigateurs, qui affichent la page de la manire prcise et transmise
dans les instructions HTML.
Rendre la page dynamique requiert, de faon un peu plus exigeante, la matrise dun
langage de programmation comme il en existe malheureusement trop : JavaScript,
C++, Java, .Net, Python, PHP, Ruby, SmallTalk, Eiffel, OCaml et tant dautres. Ainsi,
la mise en place dun site web dynamique capable de se comporter comme un pro-
gramme, ragissant comme il se doit aux sollicitations de son utilisateur, exige de mixer
ces deux savoirs dans une proportion dpendant de lattention accorde soit son inte-
ractivit, soit son apparence.
Avant-propos
VII

Heureusement, depuis lapport pionnier des applets et des servlets Java, de multiples
technologies logicielles sont apparues afin de combiner efficacement programmation
et physionomie dun site. Qui, dans le monde informatique, na entendu parler de
PHP, JSP (dans la mouvance Java) ou ASP.Net (offre de Microsoft), qui structurent
les milliards de sites interactifs disponibles aujourdhui sur le Web ? Au-dessus de ces
langages apparaissent de multiples botes outils logicielles facilitant la conception
des plates-formes web : Symfony et Zend pour PHP, Spring pour Java et, sujet de ce
livre, Django pour Python.
Elles font partie de ces multiples solutions, relativement quivalentes (mme si bien
entendu leurs concepteurs sen dfendront avec vigueur), facilitant la prise en charge
conjointe de la prsentation de la page et de son interactivit.
Bien que ces diffrentes technologies puissent galement simplmenter ct client,
cet ouvrage portera principalement sur celles qui sexcutent ct serveur, les plus
sollicites. Le code excut ct serveur a pour mission de produire destination du
client une page rpondant ses desiderata. Pour ce faire, il est frquemment nces-
saire dobtenir et dexploiter des informations stockes dans une base de donnes
relationnelle et de glisser ces dernires de manire judicieuse entre les instructions
HTML5 qui se chargent de clairement les prsenter.

Pourquoi cet ouvrage ?


Programmation, HTML5/CSS3, bases de donnes, les technologies se multiplient
et semblent exiger de la part des dveloppeurs web un CV pais et noirci dacro-
nymes incomprhensibles pour la plupart des directeurs du personnel. La tentation
est grande de les laisser sur le bas-ct du cursus universitaire, malgr leur omnipr-
sence et une importance stratgique grandissante pour les entreprises.
Cest pour combler ce foss entre la ralit mouvante des technologies web et le pro-
gramme plus install et stable du monde universitaire daucuns diraient un peu
poussireux et envahi de toiles daraignes que Python et Django sont apparus et
ont chang la donne.

Le choix de Python et de Django


Depuis quelques annes, grce Python et Django, il est devenu possible daborder
en douceur le cocktail de technologies informatiques la base de la programmation
web. Ils ont pour eux la simplicit dutilisation. Ainsi, le langage Python est trs sou-
Apprendre la programmation web avec Python et Django
VIII

vent plbiscit pour sa facilit dusage, sa rapidit dacquisition, ce qui en fait un lan-
gage de prdilection pour lapprentissage de la programmation. Son utilisation est
lmentaire dmarrer et trs interactive. Les instructions tant plus simples et plus
intuitives, on parvient plus rapidement au rsultat escompt. Bien que lexcution de
ces codes conduise au mme message lcran, print ("Hello World") en Python est
incontestablement plus simple crire mais aussi comprendre que le fameux
public static void main (String[] args) {System.out.println "Hello World"} rdig
avec stupeur par tous les dbutants en programmation Java.
Langage de programmation disponible pour plusieurs plates-formes, Python est
donc simple demploi : pas de typage explicite, instructions concises, structures de
donnes dun usage lmentaire (listes, dictionnaires et chanes de caractres). Pour
autant, il nen prserve pas moins les fonctions essentielles de tout langage rput
puissant. Il semble, un peu mieux que les autres, russir concilier efficacit et sim-
plicit, se positionner entre ces deux acteurs exigeants que sont, dune part, le pro-
cesseur qui cherche lefficience et lconomie de mmoire et, dautre part, le pro-
grammeur qui cherche la simplicit et la clart dutilisation.

EN PRATIQUE Des gots et des couleurs en programmation


Bien sr, en matire de langage de programmation, ce genre de prfrence tient pour beaucoup de lacte
de foi et il en va des guerres de langages comme de celles de religions ou de gots culinaires. Toutefois,
suffisamment denseignants ont fait de Python le premier langage enseigner aux tudiants pour nous
conforter dans notre choix.

Django, entirement dvelopp et bas sur le langage Python, fut lorigine dvelopp
pour faciliter et acclrer la programmation de sites web dans un milieu journalistique
(le journal Lawrence Journal-World publi quotidiennement dans la ville de Lawrence
au Kansas), donc pas vraiment vers dans les technologies de dveloppement logiciel.
Les sites web en question exigeaient dtre dvelopps et mis jour un rythme trs
lev ; les outils devaient pour cela tre faciles prendre en main et les logiciels produits
aisment rutilisables. Il tait de surcrot prfrable de sparer le mtier dergonome de
sites web, proccup pour lessentiel par lapparence et la physionomie du site, du
mtier de dveloppeur, proccup par le fonctionnement optimal et scuris dun code
dont lcriture devait rester trs abordable et facilement modifiable.
Django est devenu cette bote outils logicielle (framework dans le jargon profes-
sionnel), ce canif suisse du dveloppement web. Aujourdhui, cette aventure se pro-
longe selon le modle collaboratif de lopen source, impliquant des dizaines de mil-
liers dutilisateurs et de dveloppeurs passionns tout autour de la plante.
Avant-propos
IX

Ainsi, lorigine de la programmation web, la technologie CGI excuter ct ser-


veur donnait naissance dhorribles codes comme celui ci-dessous (pour afficher une
liste demploys dun service stocke dans une base de donnes relationnelle) :
EXEMPLE 0.1 lancienne mode CGI, tout est mlang !

# -*- coding: utf-8 -*-

import sqlite3
import cgi

print "Content-Type: application/xhtml+xml; charset=utf-8\n"

print '<?xml version="1.0" encoding="UTF-8" ?>'


print '<!DOCTYPE html>'
print '<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">'
print ' <head>'
print ' <title>eCarnet - Employs dun service</title>'
print ' </head>'
print ' <body>'

form = cgi.FieldStorage()
service_id = str(form["service"].value)
db_connection = sqlite3.connect('database.sqlite3')
db_connection.row_factory = sqlite3.Row
cursor = db_connection.cursor()
cursor.execute("SELECT nom FROM service WHERE id=" + service_id)
row = cursor.fetchone()
service_nom = str(row['nom'])

print ' <h1>Employs du service ' + service_nom + ' </h1>'

cursor.execute("SELECT prenom, nom, tel_fixe FROM employe


X WHERE id_service=" + service_id)
rows = cursor.fetchall()

print ' <ol>'


for row in rows:
print ' <li>' + row['prenom'] + ', ' + row['nom'] + ', '
X + row['tel_fixe'] + '</li>'
print ' </ol>'
print ' </body>'
print '</html>'

db_connection.close()

Sans quil soit ncessaire den saisir toutes les lignes, tout informaticien, mme dbu-
tant, dcouvrira un mlange plutt indigeste de trois ralits informatiques fonda-
Apprendre la programmation web avec Python et Django
X

mentales pourtant assez faciles tenir distinctes, trois langages dont lusage correct
vite ce charabia pnible. Ces trois langages sont le SQL pour la gestion et linterro-
gation des bases de donnes relationnelles, le Python pour la programmation et le
HTML5 pour laffichage et lapparence des pages web.
Cest le pari russi de Django de maintenir ces trois ralits informatiques suffisam-
ment diffrentiables pour, par exemple, pargner lartiste des pages web les subti-
lits du stockage relationnel et les joies de la programmation. De surcrot, adopter
une technologie alternative daffichage ou de stockage de donnes devrait laisser suf-
fisamment inaltrs les autres aspects du dveloppement, contribuant ainsi stabi-
liser lintgralit du dveloppement (souci essentiel dune informatique dont les tech-
nologies ne cessent dvoluer et de projets logiciels dont le cahier des charges se
modifie en continu). Cette sparation dcoule dune recette de conception bien
connue des informaticiens et dnomme MVC (Modle Vue Contrleur), que nous
aurons loccasion de prsenter largement par la suite, recette qui facilite la fois la vie
du dveloppeur et celle de lenseignant de cette pratique de dveloppement.

qui sadresse cet ouvrage ?


De par la simplicit de la syntaxe Python, les outils de dveloppement web mis dis-
position par Django, ainsi que le souci de ce dernier de maintenir les aspects esthti-
ques et les besoins du dveloppement assez logiquement spars, cet ouvrage prsen-
tant la fois Python et Django vise pour lessentiel trois types de lecteurs.
Tout dabord, les enseignants du monde universitaire et des coles dingnieurs,
tout spcialistes quils soient en programmation, en bases de donnes relationnel-
les ou en technologies de prsentation de contenu web (HTML5/CSS3,
XHTML) verront un intrt cet ouvrage. Lexprience de lun des auteurs,
Hugues Bersini, le montre. Il enseigne la programmation depuis 25 ans dans dif-
frentes facults bruxelloises. Pour la partie plus applique et exprimentale de
son enseignement, les tudiants sont ravis de mettre en uvre le langage Python
dans le cadre du dveloppement web. Ils se plaisent faire fonctionner une biblio-
thque ou vidothque sur le Web, un site bancaire ou de commerce lectronique.
Ces projets leur donnent limpression dtre en phase avec la ralit de linforma-
tique telle quelle se pratique aujourdhui. Nombreux sont ceux qui, ayant dcou-
vert Python et Django, leur sont rests fidles dans la vie professionnelle, dans
leur entreprise ou leur start-up.
videmment, les tudiants suivant cette mme formation trouveront de quoi
facilement concevoir une varit infinie dautres sites web que celui prsent dans
cet ouvrage. Au-del de Django et Python, ils se sensibiliseront au mtier de
Avant-propos
XI

dveloppeur web, ses recettes, ses exigences, et les multiples solutions logicielles
capables de leur mcher la besogne.
La troisime cible pouvant tirer profit de la lecture de ce livre comprend les profes-
sionnels impliqus dans le dveloppement web en qute dune entre en douceur
dans cet univers technologique somme toute assez exigeant. Mme si leur environ-
nement professionnel les contraint lune ou lautre technologie web diffrente de
Django (base sur ASP.Net, Java/JSP, PHP, Ruby on Rail), ce quils dcouvriront
la lecture de ce livre, (les diffrentes technologies de programmation, stockage
relationnel, modles en HTML ou en CSS, le besoin dune claire sparation entre
elles, la rutilisation de fonctionnalits) leur demeurera dune grande utilit. Et
pourquoi pas, si cette libert leur est offerte, ils pourront faire le choix de Django
pour leur entreprise, plateforme logicielle lgre et formidablement ractive ! Pierre
Alexis, lautre auteur de ce livre qui assiste Hugues Bersini dans son enseignement,
peut en tmoigner dans cet ouvrage commun !

Le plan du cours
RESSOURCES EN LIGNE Code source du projet Trombinoscoop
Le code source du site dvelopp dans le livre est librement tlchargeable depuis la fiche du livre sur le
site des ditions Eyrolles.
B www.editions-eyrolles.com/livre/9782212134995

Notre propos est dcoup en deux grandes parties : nous prsentons dabord lessen-
tiel des aspects thoriques pour ensuite dcrire en dtail un projet concret.
La premire partie a comme objectif de vous donner toutes les bases indispensables
pour comprendre ce quest un site web et comment il fonctionne. Nous y prsentons
la fois des notions thoriques (web dynamique, MVC, programmation objet, bases
de donnes relationnelles) et les langages ncessaires leur mise en uvre (HTML5,
CSS, JavaScript, SQL, Python).
Le premier chapitre aborde les rudiments thoriques de la programmation web :
HTTP, URL, notions de Web statique et dynamique, de serveurs web et de ser-
veurs de bases de donnes.
Le chapitre 2 insiste sur la ncessit de sparer les tches de programmation, de
prsentation et de structure/stockage des informations. Nous y prsentons le
modle MVC et la programmation oriente objet. Nous expliquons en outre la
notion de framework de dveloppement et montrons en quoi lutilisation dun fra-
mework tel que Django facilite la tche du dveloppeur.
Apprendre la programmation web avec Python et Django
XII

Le chapitre 3 balaie les notions lmentaires de programmation indispensables


lutilisation de Python : variables, structures de contrle, fonctions, rudiments de
programmation objet. Ce chapitre suffira comprendre les exemples de code
Python prsents dans louvrage et, de manire gnrale, la plupart des applica-
tions dveloppes sous Django.

Aller plus loin


Ce livre nest pas un manuel approfondi dutilisation de Python. Dautres ouvrages existent pour cela,
dont lexcellent livre de Grard Swinnen :
R Apprendre Programmer avec Python, Grard Swinnen, Eyrolles 2012

Le chapitre 4 sintresse aux langages de prsentation des pages web, HTML5 et


CSS, ainsi qu la manire de rendre les pages plus interactives et plus dynamiques
(ct client cette fois) par lutilisation du langage JavaScript.
Le chapitre 5 dcrit le travail prliminaire toute programmation web : llabora-
tion dlments danalyse qui permettent davoir une vue claire et rflchie sur le
projet quon dsire dvelopper. cet effet, nous verrons ce que sont cas dutilisa-
tion, wireframes et modle de donnes. Pour appuyer notre propos, nous analyse-
rons le projet dvelopp dans la seconde partie de louvrage. Nous fournissons
galement dans ce chapitre les notions essentielles concernant les bases de don-
nes relationnelles.
Mme si Django masque les changes avec les bases de donnes, il est ncessaire
dacqurir les rudiments du langage SQL qui sert dialoguer avec ces dernires.
Cest lobjet du chapitre 6. Nous nous y appuyons sur les scripts CGI. Les limita-
tions de cet anctre des technologies de programmation web dmontrent la
ncessit dutiliser le MVC.
La deuxime partie met en application de faon concrte toutes ces notions et langages.
Nous y dcrivons tape par tape la construction dun projet web complet inspir de
Facebook en nous appuyant sur le framework Django.
Le chapitre 7 sintresse larchitecture et lorchestration du site. Il prsente ce
quon appelle les vues sous Django, ce qui correspond laspect Contrle du
MVC (attention la confusion dans les termes).
Le chapitre 8 spare ce qui concerne la prsentation du site. Les rendus HTML
deviennent rutilisables. Cela se fait grce aux templates de Django et corres-
pond laspect Vue du MVC.
Le chapitre 9 traite sparment le transfert de donnes entre lutilisateur et le site,
par lintermdiaire des formulaires.
Avant-propos
XIII

Dans le chapitre 10, nous voyons comment dcrire et implmenter les


modles avec Django (ce qui correspond laspect Modle du MVC).
lment indispensable aux sites web modernes, la gestion des sessions garantit
une bonne authentification des utilisateurs et la persistance momentane de leurs
donnes. Cela fait lobjet du chapitre 11.
Nous terminons llaboration de notre site exemple en construisant dans le
chapitre 12 les pages qui manquent encore.
Le chapitre 13 propose daller plus loin en ajoutant encore plus de dynamisme
aux pages web grce la technologie Ajax.
Enfin, lannexe dcrit les tapes suivre afin dinstaller les outils de dveloppement,
dont Python et Django, quel que soit le systme dexploitation que vous utilisez
(Windows, Mac OS X ou Linux). Les exemples dapplication tant dvelopps
partir de lenvironnement Eclipse, le chapitre en dcrit galement linstallation, la
configuration et la prise en main (intgrant lemploi de Django).

Remerciements
Pierre et Hugues adressent Xavier Devos, Gal Rabier et Jonathan Unikowski leurs
remerciements les plus sincres pour leur suivi, leur relecture attentive et les nom-
breuses corrections et amliorations qui leur sont dues dans les pages qui vont suivre.
Un immense merci aussi lquipe ditoriale dEyrolles : Muriel Shan Sei Fan pour,
tout dabord, y croire dur comme fer, et nous communiquer lenthousiasme, les
repres et les balises essentiels la bonne conduite dun tel projet, Laurne Gibaud
et Anne Bougnoux pour le formidable travail de remaniement et Gal Thomas
pour avoir transform lessai en une impeccable mise en forme.
Table des matires

Avant-propos ................................................................................. V
Pourquoi cet ouvrage ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . VII
Le choix de Python et de Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . VII
qui sadresse cet ouvrage ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . X
Le plan du cours . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XI
Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIII

PREMIRE PARTIE
Les notions essentielles .................................................1
CHAPITRE 1
Comment fonctionne un site web ?............................................. 3
Quest-ce que le Web ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Fonctionnement dun site web statique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Le protocole HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
LURL, adresse dune page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Le serveur web : la fois ordinateur et logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Des sites web qui se mettent jour tout seuls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Fonctionnement dun site web dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Utilisation dune base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Passage de paramtres une page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

CHAPITRE 2
Programmation oriente objet et framework MVC ................. 15
Des programmes modulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Une criture simplifie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Des modules rutilisables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Un travail dquipe facilit et plus efficace . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Les langages orients objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Les cas dutilisation (use cases) et le MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Apprendre la programmation web avec Python et Django
XVI

Le principe de la sparation modle-vue-contrleur (MVC) . . . . . . . . . . . . . . 18


Le diagramme des cas dutilisation (use cases) . . . . . . . . . . . . . . . . . . . . . . . . . 20
Correspondances entre MVC et cas dutilisation . . . . . . . . . . . . . . . . . . . . . . . 21
Django et le MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Le framework Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

CHAPITRE 3
Rappels sur le langage Python ................................................... 25
Qualits et dfauts de Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Qualit : la simplicit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Dfaut : la simplicit ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Les bases : variables et mmoire centrale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Dclaration et initialisation des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Type des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Modification et transtypage des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Copie de variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Se renseigner sur une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Quelques oprations sur les types simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Le type int . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Le type float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Le type string . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Les types composites : listes et dictionnaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Les dictionnaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Les instructions de contrle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Les instructions conditionnelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Aiguillage deux directions : instruction if (...) else . . . . . . . . . . . . . . . . . . . . . 37
Aiguillage plus de deux directions : instruction if (...) elif (...) else . . . . . . . . . 39
Les boucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
La boucle while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
La boucle for (...) in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Les variables locales et les variables globales . . . . . . . . . . . . . . . . . . . . . . . . . . 44
La programmation objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Les classes et les objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Lassociation entre classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Hritage et polymorphisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Import et from : accs aux bibliothques Python . . . . . . . . . . . . . . . . . . . . . . . . . 54
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Table des matires
XVII

CHAPITRE 4
Rappels sur HTML5, CSS et JavaScript........................................ 57
Structurer les pages web avec HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Le concept de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Structure dun document HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Lencodage de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Quelques lments HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Principaux lments de structuration HTML . . . . . . . . . . . . . . . . . . . . . . . . . 66
lments de structuration annexes : en-ttes, pieds de page et sections . . . . . . . 68
Les liens hypertextes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Les images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Mise en vidence du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Les formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Autres lments HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Mettre en forme avec les feuilles de styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Les proprits CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Les slecteurs CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Slectionner toutes les balises de mme nom. . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Slectionner un lment particulier : id en HTML et # en CSS . . . . . . . . . . . . 80
Slectionner quelques lments de mme nature : class en HTML et . en CSS . . . 81
Appliquer une proprit seulement quand llment est dans un tat donn. . . . 81
Combiner les slecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Slectionner tous les lments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Lier CSS et HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Placer le code CSS dans les balises HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Placer le code CSS dans len-tte du fichier HTML . . . . . . . . . . . . . . . . . . . . . 84
Placer le code CSS dans un fichier spar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Dimensions des lments en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Imbrication des lments (botes) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Positionnement par dfaut des lments en CSS . . . . . . . . . . . . . . . . . . . . . . . 88
Sortir certains lments du flux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Application un exemple concret plus complet . . . . . . . . . . . . . . . . . . . . . . . . 91
Dynamiser les pages web la vole avec JavaScript . . . . . . . . . . . . . . . . . . . . . 96
Les vnements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Langage de programmation de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Un premier exemple de DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
jQuery et les frameworks JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Apprendre la programmation web avec Python et Django
XVIII

CHAPITRE 5
Mise en application : un site web inspir de Facebook ......... 103
Notre site web : Trombinoscoop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Les cas dutilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Maquette du site : les wireframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Lcran dauthentification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Lcran de cration dun compte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Lcran daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Lcran de modification du profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Lcran daffichage dun profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Lcran dajout dun ami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Scnario complet du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Modle de donnes et petit rappel sur les bases de donnes relationnelles . . . . . 113
Cl primaire et cl trangre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Relation 1-n . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Relation 1-1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Relation n-n . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
La problmatique de la mise en correspondance relationnel/objet . . . . . . . . . 118
Avec Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Retour au modle de donnes de Trombinoscoop : son diagramme de classes . . 119
Des personnes : tudiants et employs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
... qui travaillent ou tudient luniversit. . . . . . . . . . . . . . . . . . . . . . . . . . . 120
... et qui changent des messages avec des amis. . . . . . . . . . . . . . . . . . . . . . . . . 122
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

CHAPITRE 6
Premier contact avec les bases relationnelles et SQL
partir dun exemple en CGI.................................................... 125
Analyse du carnet dadresses : des cas dutilisation au modle de donnes . . . . . 127
Trois cas dutilisation simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Maquette des crans (wireframes) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Le modle de donnes du carnet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Cration de la base de donnes avec SQLite . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Accs la base de donnes via SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Syntaxe des requtes SQL les plus courantes . . . . . . . . . . . . . . . . . . . . . . . . . 131
Quelques exemples lis notre base de donnes . . . . . . . . . . . . . . . . . . . . . . 132
Ralisation du carnet dadresses avec SQL et CGI . . . . . . . . . . . . . . . . . . . . . . 133
Lancement dun serveur web Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Lcran daccueil de lULB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
La page principale du carnet dadresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Table des matires
XIX

La liste des employs dun service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140


Ajout dun employ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
CGI : ce quil ne faut plus faire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

DEUXIME PARTIE
Mise en application avec Django ..............................147
CHAPITRE 7
Les vues Django : orchestration et architecture ..................... 149
Utilit des vues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Le fichier urls.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Le fichier views.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Enfin ! Notre premire page web en Django . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Lancement de lenvironnement Eclipse et cration du projet . . . . . . . . . . . . . 155
Le fichier urls.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Le fichier views.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Importation de la fonction dans urls.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Configuration de Django pour quil crive du XHTML 5 . . . . . . . . . . . . . . . 160
Test de notre bauche de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Bel effort, mais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

CHAPITRE 8
Les templates Django : sparation et rutilisation
des rendus HTML ....................................................................... 165
Principe des templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Notre premier template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Dynamisons ce premier template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Le langage des templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Formatage des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Sauts conditionnels et boucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Hritage et rutilisation de templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Et si on avanait dans la ralisation de Trombinoscoop ? . . . . . . . . . . . . . . . . . . 176
Amlioration visuelle de la page de login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Apprendre la programmation web avec Python et Django
XX

CHAPITRE 9
Les formulaires Django ............................................................. 185
Patron courant de gestion des formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Lobjet request . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Traitement du formulaire de login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Ajout du formulaire dans la vue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Gestion du message derreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Prsentation du message derreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
La bibliothque forms de Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Cration dun formulaire avec la bibliothque forms . . . . . . . . . . . . . . . . . . . 191
Intgration du formulaire dans la vue et le template . . . . . . . . . . . . . . . . . . . . 192
Validation du formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Prsentation des messages derreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Validation de ladresse de courriel et du mot de passe . . . . . . . . . . . . . . . . . . 197
Faut-il se contenter dun seul visiteur autoris ? . . . . . . . . . . . . . . . . . . . . . . . . . 199
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

CHAPITRE 10
Les modles Django .................................................................. 201
Les modles Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Cration dun premier modle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Le modle Personne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Cration de la base de donnes et du compte administrateur (superutilisateur) . 205
Cration des autres modles et de leurs liens . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Le modle Message : relation 1-n . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
La relation ami : relation n-n . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Les modles simples Facult, Campus, Fonction et Cursus . . . . . . . . . . . . . . 209
Les modles Employ et tudiant : hritage . . . . . . . . . . . . . . . . . . . . . . . . . 209
Le lien entre Facult et Personne : relation 1-n . . . . . . . . . . . . . . . . . . . . . . . 210
Regnration de la base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Utilisation des modles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Cration et modification dun enregistrement . . . . . . . . . . . . . . . . . . . . . . . . 211
Rcupration de plusieurs enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Tri des donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Rcupration dun enregistrement unique . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Suppression denregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Accs des objets lis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Remplissage de la base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Configuration de linterface dadministration des bases de donnes . . . . . . . . 214
Table des matires
XXI

Gestion de la base de donnes avec linterface dadministration . . . . . . . . . . . 216


Authentification utilisant la base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Les ModelForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Cration du formulaire tudiant dans le fichier forms.py . . . . . . . . . . . . . . . 221
Cration de lURL et de la vue de cration de compte . . . . . . . . . . . . . . . . . . 222
Cration du template de cration de compte . . . . . . . . . . . . . . . . . . . . . . . . . 223
Un peu de mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Finalisation de la page de cration de compte . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Cration de deux formulaires : un pour les tudiants et un pour les employs . 225
Gestion des deux formulaires dans la vue . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Gestion des deux formulaires dans le template . . . . . . . . . . . . . . . . . . . . . . . 227
Un peu de dynamisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

CHAPITRE 11
Comprendre et utiliser les sessions ......................................... 231
quoi servent les sessions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Les sessions selon Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Utilisation dune session . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Maniement dune variable de session . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Enregistrement de lutilisateur authentifi . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Vrification que lutilisateur est bien authentifi . . . . . . . . . . . . . . . . . . . . . . 236
Utilisation des donnes de la session . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Que trouve-t-on dans le cookie ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Que trouve-t-on dans la session ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Protection des pages prives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Amlioration de notre page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Personnalisation de la bannire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Division du corps de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Liste des messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Rcupration des messages de la liste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Prsentation de la liste des messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Liste des amis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Publication dun message destination de ses amis . . . . . . . . . . . . . . . . . . . . 250
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251

CHAPITRE 12
En finir avec Trombinoscoop .................................................... 253
La page dajout dun ami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Apprendre la programmation web avec Python et Django
XXII

Ajout dun formulaire dans forms.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254


Cration de la vue add_friend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Cration du template add_friend.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Ajout dune URL dans urls.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Ajout du lien dans la page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
La page de visualisation dun profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Cration du template show_profile.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Cration de la vue show_profile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Ajout de lURL dans urls.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Amlioration de la prsentation dans style.css . . . . . . . . . . . . . . . . . . . . . . . . 260
Ajout des liens dans la page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
La page de modification dun profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Cration du template modify_profile.html . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Cration de la vue modify_profile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Ajout de lURL dans urls.py . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Ajout des liens dans la page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

CHAPITRE 13
Des sites web encore plus dynamiques avec Ajax.................. 267
Exemple de linteractivit attendue entre client et serveur . . . . . . . . . . . . . . . . . 268
Validation de la cration dun compte avec Ajax . . . . . . . . . . . . . . . . . . . . . . . . 271
Ajout dune URL pour la requte Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Vue traitant la requte Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Ajout du code JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Dtecter que lutilisateur a bien termin de remplir le champ courriel . . . . . . . 274
Validation du courriel saisi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Insrer la liste des erreurs au-dessus du champ fautif . . . . . . . . . . . . . . . . . 277
Ajout dun ami via Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Ajout dun champ texte et dun lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Ajout de lURL et de la vue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Cration du JavaScript dajout dun ami . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Insertion du HTML dans la page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

ANNEXE A
Installation de lenvironnement de dveloppement ............. 287
Que faut-il installer ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Table des matires
XXIII

Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
En rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Installation de Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Pour Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Pour Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Vrification de linstallation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Installation de Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Pour Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Pour Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Pour Ubuntu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Vrification de linstallation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Installation de Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Pour Windows et Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Pour Ubuntu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Installation dEclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Installation du plug-in Eclipse PyDev . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Installation de Web Developer Tools pour Eclipse . . . . . . . . . . . . . . . . . . . . . . 310
Premier projet de test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Ai-je bien compris ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314

Index........................................................................................... 315
PREMIRE PARTIE

Les notions
essentielles
Cette premire partie vise vous donner toutes les cls pour comprendre ce quest
un site web, comment il se construit et comment il fonctionne :
protocole HTTP, URL, notions de web statique et dynamique, serveurs ;
programmation oriente objet, modle MVC, notion de framework ;
lments de base du langage de programmation Python ;
structuration des pages web avec HTML5, prsentation avec les feuilles de sty-
les CSS, interactivit ct client avec JavaScript ;
laboration du modle de donnes : cas dutilisation (use cases), schmas de pr-
sentation (wireframes), bases de donnes relationnelles ;
lments de base du langage dinterrogation de bases de donnes SQL, utilisa-
tion par le biais de lancienne technologie CGI, discussion des limitations de
cette dernire.
1
Comment fonctionne un site web ?
Ce chapitre rappelle les bases du Web, ses origines statiques et son passage graduel vers plus de
dynamisme avec, notamment, lexploitation dune base de donnes ct serveur, dont les mises jour
se rpercutent ct client. Sont galement expliques les notions dURL, de protocole HTTP, de
serveur web et le passage de paramtres du client vers le serveur.

SOMMAIRE
B Petite histoire du Web
B Du Web statique au Web dynamique
B URL, protocole HTTP et serveur web
B Passage de paramtres vers le serveur
2
Programmation oriente objet
et framework MVC
Ce chapitre a pour mission dexpliquer la conception logicielle respectueuse du dcoupage MVC et sa
version sous Django. Nous exposons dabord les principes de la programmation oriente objet.
Ensuite, nous verrons comment la mise disposition dun framework sinscrit dans cette logique.

SOMMAIRE
B Explication de la conception respectant le dcoupage MVC
B Mise en place du MVC sous Django
B Explication de la notion de framework
3
Rappels sur le langage Python
Ce chapitre a pour mission de prsenter le langage de programmation Python, sur lequel repose le
projet Django. Les rgles syntaxiques brivement dcrites ici devraient vous suffire pour comprendre
les diffrentes applications de Django que nous verrons par la suite, ainsi que pour matriser les
aspects contrle de votre projet.

SOMMAIRE
B Introduction au langage de programmation Python
B Les aspects procduraux du langage
B Python et lorient objet
4
Rappels sur HTML5,
CSS et JavaScript
Ce chapitre va sintresser aux langages de prsentation des pages web, HTML5 et CSS, ainsi qu
la manire de rendre les pages plus interactives et plus dynamiques ct client, par lutilisation du
JavaScript. Ces trois technologies sont devenues incontournables, quelle que soit la plate-forme de
dveloppement web choisie.

SOMMAIRE
B Synthse rapide des technologies HTML5, CSS et JavaScript
B HTML5, CSS, JavaScript : pices matresses du Web communes tous les environnements de dveloppement web
5
Mise en application :
un site web inspir de Facebook
Ce chapitre prsente le projet de dveloppement qui servira de base pour tous les autres chapitres :
Trombinoscoop. Tout projet web dmarre par la rdaction de ses cas dutilisation (use cases) et la
conception de ses wireframes, et dune base de donnes relationnelle ct serveur. Quelques rappels
thoriques sur le modle relationnel se rvlent indispensables. Django exige que le modle de donnes
soit ralis via un diagramme de classes, donc dans une perspective purement oriente objet. Par
consquent, quelques lignes sont consacres lpineux problme de la mise en correspondance entre le
modle relationnel et le modle objet.

SOMMAIRE
B Trombinoscoop : le projet auquel ce livre va se consacrer
B Cas dutilisation et maquettage (wireframes)
B Rappels thoriques sur les bases de donnes relationnelles et diffrence avec la modlisation oriente objet
B Diagramme de classes de Trombinoscoop
6
Premier contact avec
les bases relationnelles et SQL
partir dun exemple en CGI
Le site web doit pouvoir interroger et modifier la base relationnelle o sont stockes toutes les donnes
du modle. Il lui faut pour cela un langage particulier : le SQL. Les notions de SQL dont nous
aurons besoin par la suite, mais qui sont le plus souvent caches par le framework Django, seront
exposes dans un contexte web ralis en CGI. Cette technologie nest plus de mise aujourdhui pour le
dveloppement web ct serveur, mais titre pdagogique, ce chapitre nous permettra de lvoquer
comme un parfait exemple dun mlange de genres viter.

Linstallation des outils de dveloppement est explique en annexe A

SOMMAIRE
B Aperu des requtes SQL ct serveur
B Introduction CGI : un condens des mauvaises pratiques du Web
DEUXIME PARTIE

Mise en application
avec Django
Dans cette deuxime partie, nous allons construire notre site Trombinoscoop en
nous appuyant sur le framework Django. Nous dtaillerons chacune des tapes
dlaboration dun site web :
vues Django (correspondant laspect Contrle du MVC) ;
templates Django (correspondant laspect Vue du MVC) ;
formulaires ;
modles Django (correspondant laspect Modle du MVC) ;
gestion des sessions ;
supplments en Ajax.
7
Les vues Django :
orchestration et architecture
Ce chapitre va nous lancer dans lutilisation du framework Django et nous permettre den dcouvrir
les premiers aspects : URL et Views . MVC, la recette de conception fondamentale de tout
dveloppement web mise en place par Django, commencera tre mieux comprise. Un premier projet
Django sera ralis se bornant renvoyer une page HTML trs lmentaire, un peu comme on le
ferait pour une application statique toute basique.

SOMMAIRE
B Le modle MVC selon Django
B Utilit des vues
B Dfinition des URL
B Dfinition des mthodes vues
B Cration dun projet Django dans Eclipse
B Ralisation de notre premire page web
B Dmarrage et test dun projet dans Eclipse
8
Les templates Django : sparation
et rutilisation des rendus HTML
Tout en continuant le dveloppement de notre projet Trombinoscoop , ce chapitre aide
comprendre comment la mise en place des templates Django tient les instructions HTML (ddies
la prsentation du site web) spares des instructions Python (plus centres sur son
fonctionnement). Le rle et lutilisation des templates constituent lessentiel de ce qui va suivre.

SOMMAIRE
B Introduction aux templates de Django qui sparent au mieux le HTML du code Python
B Description de tout ce que lon peut faire et produire partir de ces templates
B La suite de notre projet Trombinoscoop
9
Les formulaires Django
Lobjectif de ce chapitre est dtudier comment grer les formulaires HTML avec Django. Nous nous
poserons les questions suivantes :
Quallons-nous mettre comme URL dans lattribut action ?
Comment allons-nous grer dans Django la rception des donnes du formulaire ?
Comment grer des donnes errones du formulaire ?
Comment ragir lorsque toutes les donnes du formulaire sont correctes ?

SOMMAIRE
B Comment raliser les formulaires en Django ?
B Installation de nos premiers formulaires dans Trombinoscoop
10
Les modles Django
Lobjectif de ce chapitre est dtudier comment mettre en place une base de donnes laide des
modles Django et comment interagir avec elle. Plus prcisment, nous allons apprendre :
dcrire les donnes enregistrer dans la base de donnes ;
crer la base de donnes ;
insrer des donnes dans la base de donnes ;
accder aux donnes pour ensuite les utiliser dans notre code.

SOMMAIRE
B Ralisation de la base de donnes la manire de Django
B Introduction aux modles Django, version objet de la base de donnes sous-jacente
B Suite du projet Trombinoscoop
11
Comprendre et utiliser les sessions
Ce chapitre va nous familiariser avec les sessions, qui servent sauvegarder un contexte global
dinteraction entre deux visites sur le serveur web. Les sessions fonctionnent grce aux clbres et tant
dcris cookies qui mmorisent les accs au serveur. Django a sa propre manire de rpartir cette
mmoire entre le client et la base de donnes ct serveur. Le projet Trombinoscoop sera enrichi par
exemple par la mmorisation de lidentit du visiteur du site.

EN PRATIQUE Les applications Django travaillent pour vous


Notez que lapplication django.contrib.auth peut faire pour vous la grande partie de ce que nous expli-
quons dans ce chapitre, mais nous choisissons bien sr de nous en passer, pour lintrt de lexercice.

SOMMAIRE
B Explication de la notion de session
B Explication et utilisation des cookies avec Django
B Prise en charge des sessions dans Trombinoscoop
12
En finir avec Trombinoscoop
Finalisons notre projet de dveloppement web en ralisant les derniers wireframes. Nous
appliquerons pour cela tout ce que nous avons appris dans les prcdents chapitres.

SOMMAIRE
B Finition de Trombinoscoop
13
Des sites web encore plus
dynamiques avec Ajax
Ce chapitre va se pencher sur la technologie Ajax qui permet au client de solliciter le serveur sans
quitter la page actuellement active de son ct. Le rsultat du serveur viendra juste sinsrer dans la
page client courante sans quil faille entirement la remplacer par une autre. Cest du JavaScript
sexcutant ct client qui va se charger de raliser la connexion avec le serveur, la rcupration des
informations et leur insertion dans la page client courante. Linteraction sera dite asynchrone car,
lorsque le client envoie la requte, il nest pas contraint dattendre la rponse du serveur pour
poursuivre sa tche.

SOMMAIRE
B Prsentation de la technologie Ajax
B Discussion sur la rpartition de la partie programme du site web entre le client et le serveur
B Mise en place de solutions Ajax pour enrichir le dynamisme de Trombinoscoop
B Point final de Trombisnoscoop
A
Installation de lenvironnement
de dveloppement
Cette annexe dcrit tape par tape linstallation des diffrents lments logiciels ncessaires la
ralisation du projet Trombinoscoop.

SOMMAIRE
B Annexe dcrivant linstallation des diffrents outils ncessaires au dveloppement web sous Django : Python, Java,
Django, Eclipse et plug-ins permettant lexcution de code Python dans lenvironnement Eclipse.
B Cette installation est dcrite pour les trois systmes dexploitation les plus rpandus : Windows, Mac OS et Linux.
Apprendre la programmation web avec Python et Django
288

Avant de se lancer dans la programmation Python/Django, il est ncessaire de confi-


gurer son environnement de travail. Lobjectif de ce chapitre est dexpliquer chacune
des tapes qui permettront dinstaller et de configurer les divers outils ncessaires
pour se constituer un environnement de dveloppement optimal. Les explications
sont dclines pour trois systmes dexploitation :
Microsoft Windows 7 ;
Mac OS X Mountain Lion ;
Ubuntu 12.
Nous esprons couvrir la grande majorit des systmes dexploitation utiliss
aujourdhui, sachant que les explications sont facilement adaptables pour leurs
variantes. Par exemple, la procdure dcrite pour Mac OS X Moutain Lion reste
valable pour les versions infrieures Lion et Snow Leopard.

Que faut-il installer ?

Python
Le premier outil installer, et dont on ne pourra pas se passer, est le langage de pro-
grammation Python qui nous permettra de compiler et dexcuter des programmes
crits dans ce langage.
Python est accompagn dune importante bibliothque standard offrant de nombreux
modules pr-crits (types de donnes complexes, cryptographie, traitement dimages,
traitement audio, envoi de courriels, etc.). Cest par linstruction import quon appelle
ces diffrents utilitaires dans les codes qui en font usage.
Il existe plusieurs implmentations du langage Python et de sa bibliothque standard.
Nous utiliserons limplmentation traditionnelle de rfrence, propose sur le site
web python.org et disponible pour de nombreuses plates-formes (Windows, Linux, etc.).
Python, comme tout langage de programmation qui se respecte, est en constante
volution ; il en existe plusieurs versions. La dernire version majeure est la 3 et mrite
quon sy attarde un peu. Elle a eu notamment pour objectif de simplifier le langage en
lui retirant certaines constructions juges redondantes. La compatibilit ascendante a
t brise. En dautres mots, et la grande dconvenue de nombreux programmeurs, le
compilateur Python 3 nest plus capable de compiler tous les programmes crits en
Python 2. Or, Django a t crit la base pour Python 2 et sa migration vers Python 3
na pas encore abouti. Nous installerons donc la version 2.7 de Python, qui est la der-
nire prcdant la version 3. Toutefois rassurez-vous, ladaptation de Django la der-
Installation de lenvironnement de dveloppement
289
ANNEXE A

nire version de Python, qui se fera bien un jour, ne devrait pas modifier pour lessentiel
notre enseignement et le projet que nous vous proposons.

Django
Une fois Python install, il faut lenrichir avec le framework Django, qui nest pas
prvu de base dans la bibliothque standard Python. Ce framework se tlcharge sur
le site officiel de Django.
Un des avantages de Django est lintgration dun serveur web lger. On nest donc pas
oblig dinstaller un serveur web tiers, tel Apache. Bien entendu, si le serveur web lger
inclus dans Django suffit amplement pour tester son site durant la phase de dveloppe-
ment, il nen sera pas de mme lorsquon ouvrira son site au public. Un serveur web
tiers plus robuste sera ncessaire, car il permettra de mieux supporter un nombre lev
de visites sur le site et permettra une configuration plus fine des utilitaires web.

Eclipse
Python et Django suffiraient dbuter le dveloppement de notre premier site web.
laide dun simple diteur de texte et dune interface en ligne de commande, nous
pourrions crire notre premier code et le lancer. Ce serait nanmoins laborieux et peu
convivial. Cest pourquoi nous allons installer un environnement de dveloppement
intgr ou IDE (Integrated Development Environment).

DFINITION IDE
Un environnement de dveloppement intgr est un ensemble doutils facilitant et rendant plus convivial
le dveloppement dapplications.

Gnralement, les IDE offrent au moins les utilitaires suivants, plutt prcieux :
un diteur de texte capable de colorer le code, de dtecter les erreurs de syntaxe en
ligne ou daider la saisie de code en affichant toutes les constructions possibles ;
une interface graphique conviviale pour simplifier la compilation dun programme
ou le lancement de lapplication ;
un dbogueur graphique permettant dexcuter pas pas un programme et dobser-
ver son tat tout instant (valeurs des variables, position dans le code, etc.).
Notre choix denvironnement de dveloppement intgr sest port sur Eclipse car il
sagit dun environnement trs populaire et complet, capable de grer plusieurs lan-
gages de programmation, dont Python et Django.
Apprendre la programmation web avec Python et Django
290

Eclipse est un IDE crit en Java. Cest aussi ce jour lenvironnement de dveloppe-
ment Java le plus utilis, sachant que Java est actuellement le langage de programma-
tion le plus rpandu et le plus enseign. Le moteur dexcution Java, qui permet de
lancer des programmes crits dans ce langage, devra donc faire partie de la panoplie
doutils installer, sans quoi Eclipse ne pourra pas tre lanc.
Linstallation de base dEclipse ne contient pas les modules permettant de grer le lan-
gage Python et le framework Django. Ces modules, regroups dans le plug-in nomm
PyDev, doivent tre ajouts manuellement par la suite, ce que nous ferons galement.

En rsum
La mise en place de notre environnement de dveloppement passera par linstallation
successive de ces cinq composants :
le langage Python, dans sa version 2.7 ;
le framework Django ;
le moteur dexcution Java (Java Runtime Environment) ;
lIDE Eclipse ;
le plug-in Eclipse PyDev.
Les sections suivantes sont consacres linstallation de ces lments sous diffrents
systmes dexploitation. Vous pouvez bien entendu ne lire que les sections qui corres-
pondent votre environnement.

Figure A-1
Windows 7
professionnel 32 bits
Installation de lenvironnement de dveloppement
291
ANNEXE A

Les diffrentes tapes ont t ralises et testes sous Windows 7 Professionnel


32 bits, sans service pack install, Mac OS X Lion et Ubuntu 12.04 dans sa version
32 bits. Elles devraient rester pour lessentiel identiques pour les autres versions des
systmes dexploitation.

Figure A-2
Mac OS X Lion

Figure A-3
Ubuntu 12.04 32 bits
Apprendre la programmation web avec Python et Django
292

Installation de Python
Commenons par une bonne nouvelle : sous Ubuntu, Python est dj pr-install.
Pour Windows et Mac OS X, la premire tape consiste installer limplmentation
officielle CPython.

EN PRATIQUE Vieilles versions de Python sous Mac OS X


Mac OS X est livr en standard avec Python. Malheureusement, celui-ci nest mis jour qu chaque sor-
tie dune nouvelle version du systme, soit environ tous les deux ans. On se retrouve souvent avec une
version de Python largement dpasse. Il est donc indispensable dinstaller la version qui nous intresse
ct de celle existante et qui cohabitera en trs bon voisinage avec cette dernire.

EN PRATIQUE Version de Python


La version installer est la 2.7 et non la 3, cette dernire ntant pas compatible avec Django.
Nous recommandons dinstaller la dernire version de la ligne 2.7. lheure o ces lignes sont crites, il
sagit de la version 2.7.3.

Pour la tlcharger, il faut se rendre dans la section Download de www.python.org. Diff-


rents paquets sont disponibles. Nous avons choisi :
pour Windows, le paquet Windows x86 MSI Installer, comprenant un installeur
destin aux Windows 32 bits ;
pour Mac OS X, le paquet Mac OS X 64-bit/32-bit x86-64/i386 Installer.
Cest en ralit une image disque DMG quil suffit de monter en louvrant.

B www.python.org

Pour Windows
Une fois le paquet tlcharg, il suffit de lexcuter et de suivre les tapes de lassis-
tant dinstallation. la premire tape, lassistant vous demande si vous dsirez ins-
taller Python pour tous les utilisateurs de lordinateur ou juste pour lutilisateur
courant ; il est recommand de choisir Install for all users.
Lassistant demande ensuite de choisir un emplacement pour linstallation. Afin de
respecter les standards Windows, nous recommandons dinstaller Python dans
Program Files et non la racine du disque systme, comme propos par dfaut par
linstalleur.
Installation de lenvironnement de dveloppement
293
ANNEXE A

Figure A-4
Premire tape de lassistant
dinstallation

Figure A-5
Deuxime tape de lassistant
dinstallation

la troisime tape, linstalleur demande quels composants de Python installer.


Nous recommandons de tout slectionner, afin de tout installer.
Apprendre la programmation web avec Python et Django
294

Figure A-6
Troisime tape de lassistant
dinstallation

ltape suivante, linstallation commence.

Figure A-7
Quatrime tape de lassistant
dinstallation

Python demeurant un langage et un environnement somme toute trs lger, linstal-


lation est termine aprs quelques minutes. Il ne reste plus qu cliquer sur le bouton
Finish pour fermer lassistant.
Installation de lenvironnement de dveloppement
295
ANNEXE A

Figure A-8
Dernire tape de lassistant
dinstallation

Pour Mac OS X
Une fois limage monte, il suffit dexcuter lapplication Python.mpkg et de suivre les
tapes de lassistant dinstallation. la fin du processus, on obtient cette fentre :

Figure A-9
Dernire tape de lassistant
dinstallation

Cet installateur met Python dans le dossier Applications de votre Mac.


Apprendre la programmation web avec Python et Django
296

Vrification de linstallation
Il reste valider la bonne installation du langage en lanant par exemple la ligne de
commande graphique Python :
Dmarrer > Tous les programmes > Python > IDLE (Python GUI) sous Windows ;
Applications > Python 2.7 > IDLE sous Mac OS X.
Ensuite, il suffit de saisir un peu de code, par exemple le sempiternel hello world ,
bien connu des programmeurs :
EXEMPLE A.1 Petit programme de test

print('Hello World !')

Ce code devrait afficher le texte Hello World ! dans la console, comme illustr sur
la figure suivante. Vous pourriez refaire lexercice avec Bonjour Monde ! , mais
sachez que cela fait tout de suite beaucoup moins pro.

Figure A-10
Test de linstallation

Sous Ubuntu, il suffit de lancer un terminal (via le Tableau de bord, on lance lappli-
cation Terminal) et de taper la commande python. Apparat alors le numro de ver-
sion du langage :

Figure A-11
Version de Python
incluse dans Ubuntu
Installation de lenvironnement de dveloppement
297
ANNEXE A

Installation de Django
Django, crit en Python, nest pas livr en standard avec ce dernier. Il sagit dun fra-
mework tiers installer manuellement.
Pour Windows et Mac OS X, le framework est disponible en tlchargement sur le
site du projet Django. Il faut se rendre dans la section Download et prendre la der-
nire version officielle. lheure o ces lignes sont crites, il sagit de la version 1.4.
Le fichier tlcharger se prsente sous la forme dun fichier tar.gz, en dautres
mots une archive TAR qui a t compresse en format GZIP.

B www.djangoproject.com

Pour Windows
Il faut utiliser une application tierce qui va ouvrir, dcompresser et extraire les
fichiers dinstallation de Django que renferme le fichier tar.gz. Lapplication que
nous avons utilise est 7-Zip, disponible gratuitement. Dautres dcompresseurs et
extracteurs peuvent bien entendu tre utiliss. Ouvrez le fichier .gz laide de
lapplication 7-Zip. Un seul dossier se prsente dans lexplorateur de larchive : dist.

Figure A-12
Contenu de larchive TAR

Double-cliquez sur le dossier dist pour en afficher le contenu. Un seul fichier sy


trouve : Django-1.4.tar. nouveau, double-cliquez sur ce fichier TAR pour en affi-
cher le contenu. Dans cette archive, se trouve un seul dossier, nomm Django-1.4 ;
cliquez sur le bouton Extraire de 7-Zip. Un emplacement destin accueillir le dos-
sier extrait vous est demand ; choisissez celui qui vous convient le mieux.
Apprendre la programmation web avec Python et Django
298

Larchive extraite, nous pouvons lancer linstalleur qui sy trouve. Cet installeur tant
crit en Python, on ne peut pas le lancer comme un excutable Windows traditionnel en
double-cliquant dessus. Il va falloir le lancer en ligne de commande en utilisant Python.
Il faut dabord lancer une ligne de commande Windows, avec les droits dadministrateur.
La ligne de commande Windows se trouve dans Menu dmarrer>Tous les programmes>
Accessoires>Invite de commande. Pour la lancer avec les droits dadministrateur, il faut
cliquer droit sur son raccourci et choisir Excuter en tant quadministrateur.
Une fois linvite de commande lance, il faut se rendre, laide de la commande cd,
dans le dossier dinstallation de Django que lon vient dextraire. Par exemple, ayant
extrait ce dossier dans C:\Users\Pierre\Downloads\, nous avons tap la ligne de
commande suivante :
EXEMPLE A.2 Positionnement dans le dossier dinstallation

cd Downloads\Django-1.4

Nous navons pas spcifi le chemin absolu dans la commande, car en ouvrant la con-
sole, celle-ci nous avait dj positionns dans le dossier c:\Users\Pierre.
Pour lancer linstallation de Django, il faut entrer la commande suivante :
SYNTAXE. Lancement de linstallation

"c:\Program Files\Python27\python.exe" setup.py install

La figure suivante illustre lutilisation de ces deux commandes.

Figure A-13
Lancement de linstallation de
Django

Si aucune erreur ne survient, cest que linstallation sest bien droule.


Installation de lenvironnement de dveloppement
299
ANNEXE A

Figure A-14
Installation termine de Django

Pour Mac OS X
Pour larchive sous Mac, il faut utiliser la ligne de commande. Ouvrez dabord un Ter-
minal (dans Applications > Utilitaires). Rendez-vous ensuite dans le dossier o a t
tlcharge larchive, laide de la commande cd :
EXEMPLE A.3 Positionnement dans le dossier de tlchargement

cd Downloads

Puis lancez la dcompression de larchive et rendez-vous dans le dossier cr :


SYNTAXE. Dcompression de larchive

tar xzvf Django-1.4.tar.gz


cd Django-1.4

Ensuite, lancez linstallation de Django laide de linterprteur Python que nous


venons dinstaller (et non de celui fourni de base dans Mac OS X). Il se trouve dans
Library > Frameworks. Utilisez la commande sudo car linstallation doit se faire en
tant quadministrateur.
SYNTAXE. Installation de Django

sudo /Library/Frameworks/Python.framework/Versions/2.7/bin/python
setup.py install

Attention, il va falloir entrer le mot de passe administrateur.


La figure suivante illustre lutilisation de cette commande.
Apprendre la programmation web avec Python et Django
300

Figure A-15
Lancement de linstallation
de Django

Si aucune erreur ne survient, linstallation sest bien droule.

Figure A-16
Installation termine de Django

Pour Ubuntu
Django est disponible dans la Logithque dUbuntu. Il suffit de chercher le logiciel
python-django et, celui-ci trouv, de cliquer sur Installer.

Figure A-17
Django dans la Logithque
Ubuntu
Installation de lenvironnement de dveloppement
301
ANNEXE A

Vrification de linstallation
Sous Windows et Mac OS X, on peut tester si linstallation sest excute correcte-
ment en lanant une console Python et en tapant le code suivant :
SYNTAXE. Vrification de la bonne installation de Django sous Windows et Mac OS X

>>> import django


>>> print(django.get_version())
1.4

Le code doit afficher la version de Django, soit 1.4 , comme illustr la figure sui-
vante.

Figure A-18
Vrification de la bonne
installation de Django sous
Windows et Mac OS X

Sous Ubuntu, on peut tester la bonne installation de Django en lanant un terminal


et en tapant le code suivant :
SYNTAXE. Vrification de la bonne installation de Django sous Ubuntu

python
>>> import django
>>> print(django.get_version())
1.3.1

Le code doit afficher la version de Django, soit 1.3.1 , comme illustr la figure
suivante.

Figure A-19
Vrification de la bonne
installation de Django
sous Ubuntu
Apprendre la programmation web avec Python et Django
302

Installation de Java
Si Java nest pas dj install sur votre ordinateur (ce qui est peu probable), vous
devrez y remdier.

Pour Windows et Mac OS X


Sur la page daccueil du site officiel de Java, un lien mis en vidence vous permet de
tlcharger linstallateur. Choisissez la version de Java correspondant votre systme
(32 ou 64 bits). Linstallation ne ncessite pas de paramtrage particulier.

B www.java.com

Pour Ubuntu
Rendez-vous nouveau dans la Logithque. Il suffit dy chercher Java , de slec-
tionner OpenJDK Java 7 Runtime et de cliquer sur Installer.

Figure A-20
Installation de Java
avec Ubuntu
Installation de lenvironnement de dveloppement
303
ANNEXE A

Installation dEclipse
Nous allons maintenant installer Eclipse, notre environnement de dveloppement intgr.
Le tlchargement dEclipse se fait via le site officiel du projet pour Windows et
Mac OS X. On retrouve sur cette page plusieurs versions de loutil, chacune ciblant
un langage de programmation ou un usage bien prcis. Elles ne sont en fait que la
version de base de loutil sur laquelle ont t pr-installs les plug-ins ad hoc.

B http://www.eclipse.org/downloads/

Comme il nen existe pas pour Python et Django, nous allons simplement tlcharger la
version de base, Eclipse Classic pour Windows ou Mac (version 3.7.2 au moment o
nous crivons ces lignes), et nous installerons par la suite les plug-ins qui nous intressent.
Une fois tlcharg, Eclipse se prsente sous la forme dune archive (ZIP pour Win-
dows et tar.gz pour Mac), quil suffit de dcompresser comme nous lavons fait pour
Django. Elle contient un dossier reprenant tous les fichiers de lapplication. Aucun
installateur nest donc lancer ; il suffit de dplacer le dossier que lon a dcompress
de larchive lemplacement de son choix. Pour notre part, nous avons choisi de
dplacer le dossier dans C:\Program Files sur Windows et Applications pour Mac.
Pour Ubuntu, nous allons faire usage une fois encore de la Logithque. Il suffit de
chercher Eclipse, de le slectionner et de cliquer sur Installer.

Figure A-21
Installation dEclipse
sous Ubuntu
Apprendre la programmation web avec Python et Django
304

Nous pouvons maintenant lancer Eclipse :


Sous Windows, double-cliquez sur eclipse.exe.
Sous Mac, si Java nest pas install ce stade, Mise jour de logiciels permet de le
faire en affichant un dialogue le proposant.
Sous Ubuntu, dmarrez Eclipse laide du tableau de bord.
Au dmarrage, Eclipse nous demande de choisir un workspace (espace de travail) et
nous propose, par dfaut, dutiliser C:\Users\XXXXX\workspace pour Windows et
Ubuntu ou /Users/XXXXX/Documents/workspace pour Mac. Un workspace regroupe
diffrents projets, spcifie leur emplacement sur le disque et enregistre un certain
nombre de prfrences propres Eclipse. Dfinir plusieurs workspaces permet donc
davoir des environnements de travail diffrents (paramtrs diffremment) contenant
des projets diffrents. Tout au long de ce livre, nous nutilisons quun seul workspace.
Vous pouvez trs bien utiliser le workspace propos par dfaut. Nanmoins, nous
avons prfr crer et utiliser un nom plus convivial : C:\Users\Pierre\Projets
pour Windows et Ubuntu ou /Users/Pierre/Documents/Projets pour Mac. Pour
crer un nouveau workspace, il suffit dentrer son nom dans la bote de dialogue de
choix de workspace.
Vous pouvez galement cocher la case Use this as the default and do not ask again afin
quau prochain dmarrage, Eclipse ne vous demande plus quel workspace utiliser.

Figure A-22
Cration et utilisation
du workspace
C:\Users\Pierre\Projets
(Windows)
Installation de lenvironnement de dveloppement
305
ANNEXE A

Figure A-23
Cration et utilisation
du workspace
C:\Users\Pierre\Projets
(Ubuntu)

Il reste cliquer sur OK. Eclipse souvre alors et affiche sa page daccueil.

Figure A-24
cran daccueil dEclipse

Et voil ! Eclipse est install, Nous navons plus nous occuper que du plug-in PyDev.

Installation du plug-in Eclipse PyDev


Avant de pouvoir commencer dvelopper en Python et Django dans Eclipse, il
nous faut installer le plug-in PyDev.
Les plug-ins sinstallent via le menu Help > Install New Software La fentre suivante
apparat :
Apprendre la programmation web avec Python et Django
306

Figure A-25
cran dinstallation de plug-ins

Tout dabord, nous devons renseigner le site sur lequel se trouve le plug-in PyDev.
Cliquez sur le bouton Add et, dans la fentre qui apparat, inscrivez PyDev et
http://pydev.org/updates.

B pydev.org/updates

Figure A-26
Ajout du site pour
le plug-in PyDev

Cliquez sur OK. Choisissez ensuite PyDev dans la liste des plug-ins disponibles ins-
taller.
Installation de lenvironnement de dveloppement
307
ANNEXE A

Figure A-27
Choix de PyDev

On clique sur Next deux fois, on accepte la licence, on clique sur Finish et linstallation
dbute.

Figure A-28
Installation de PyDev

Au cours de linstallation, Eclipse vous demandera de valider un certificat. Il suffit de


sassurer quils sont tous slectionns et de cliquer sur OK.
Apprendre la programmation web avec Python et Django
308

Figure A-29
Installation de PyDev

Il est possible qu ce stade, on vous demande de redmarrer votre ordinateur, pour que
les plug-ins sinstallent vraiment. Vous pouvez vous contenter de rexcuter Eclipse.
Il reste maintenant configurer PyDev pour lui indiquer o se trouve le compilateur
Python et ses bibliothques (que nous avons installes au tout dbut de ce chapitre).
Pour ce faire, il faut aller dans le menu Window > Preference (ou Eclipse > Preference).
Dans larborescence de paramtres, rendez-vous la section PyDev > Interpreter
Python.
Cliquez sur le bouton Auto Config. Dans la fentre qui apparat, choisissez tous les
lments du dossier dinstallation de Python. Cliquez sur OK pour valider.
Si Auto Config ne marche pas, il suffit alors de faire New et de spcifier comme empla-
cement lendroit o se trouve lexcutable de linterprteur Python que lon dsire
utiliser. Par exemple, pour Mac OS X, il sagira de /Library/Frameworks/
Python.framework/Versions/2.7/bin/python.

La configuration est maintenant termine, cliquez sur OK pour fermer la fentre de


prfrences.
Installation de lenvironnement de dveloppement
309
ANNEXE A

Figure A-30
Configuration de PyDev

Figure A-31
Configuration de PyDev
Apprendre la programmation web avec Python et Django
310

Figure A-32
Configuration de PyDev

Installation de Web Developer Tools pour Eclipse


Ce paquet supplmentaire dans Eclipse nous sert dans le chapitre 8 pour diter
directement nos HTML. Il suffit de procder de la mme manire que pour PyDev.
Rendez-vous dans le menu Help > Install New Software et cliquez sur le bouton Add.
Comme nom de site, indiquez ce que vous voulez, par exemple Eclipse. Comme
emplacement (location), mettez http://download.eclipse.org/releases/indigo (du moins, si vous
travaillez avec la version Indigo dEclipse). Si vous utilisez une autre version, il faut
remplacer indigo dans ladresse par le nom de celle-ci (regardez bien lcran de dmar-
rage dEclipse, il y est indiqu).
Le site ajout, slectionnez-le et patientez pendant que la liste des paquets disponi-
bles se met jour. Rendez-vous ensuite dans Web, XML, Java EE and OSGi Enterprise
Development et slectionnez le paquet Eclipse Web Developer Tools.
Suivez les instructions de lassistant dinstallation et rpondez aux questions quil
vous pose. Aprs un redmarrage dEclipse, vous voil en mesure dditer vos
HTML directement dans Eclipse.
Installation de lenvironnement de dveloppement
311
ANNEXE A

Figure A-33
Installation du plugin Web
Developer Tools

Premier projet de test


Les diffrentes installations termines, nous pouvons raliser un premier petit projet
de test. Cela permet de valider que tout fonctionne la perfection. Ce petit projet na
dautre but que de raliser un programme Python affichant toujours notre sempi-
ternel texte Hello World ! la console. Pour crer un nouveau projet, cliquez sur
le menu File > New > Project puis choisissez PyDev Project.
Aprs avoir cliqu sur Next, un assistant de cration de projet se lance. la premire
tape, il suffit de donner un nom au projet.
Cliquez alors sur Finish. Notre projet est cr et apparat dans lcran principal
dEclipse.
Apprendre la programmation web avec Python et Django
312

Figure A-34
Cration dun projet de test

Figure A-35
Cration dun projet de test
Installation de lenvironnement de dveloppement
313
ANNEXE A

Figure A-36
Cration dun projet de test

Il reste ajouter notre projet un fichier py qui va contenir nos sources. Cliquez-
droit sur le projet Test et choisissez New > PyDev Module. Une fentre apparat dans
laquelle on prcise un nom pour le projet (Main) et un template de base ; dans notre
cas, nous allons choisir le template Module: Main, car nous allons crire notre code au
niveau du point dentre du programme.

Figure A-37
Cration dun projet de test
Apprendre la programmation web avec Python et Django
314

Cliquez sur Finish, le fichier est alors cr. Supprimez-en tout le contenu, en particulier les
commentaires ajouts par dfaut par Eclipse, car pour peu quils contiennent des accents,
Python plantera. Nous verrons comment grer correctement les accents dans le chapitre 8.
Cela nous permettra de garder le code propos en standard dans ces fichiers.
Il reste insrer le code suivant dans le fichier frachement cr :
EXEMPLE A.4 HelloWorld ! en Python
if __name__ == '__main__':
print('Hello World !')

On peut maintenant excuter le programme en utilisant licne Run reprsente par


un triangle blanc sur un rond vert. Une fois excut, le programme affiche
HelloWorld ! la console.

Figure A-38
Cration dun projet de test

Et voil ! Nous avons cr un programme Python en utilisant Eclipse et son plug-in


PyDev. Nous sommes prts pour des projets plus complexes ayant recours au fra-
mework Django.

Ai-je bien compris ?


Pourquoi faut-il installer Java alors que lon va programmer en Python ?
Eclipse est-il obligatoire pour dvelopper un site en Django ?
quoi sert le plug-in Eclipse PyDev ?
Index
A dimension des lments 86
Access 131 display 98
Ajax (Asynchronous JavaScript and XML) 270 font-family 79
height 79, 86
B hover 82
base de donnes 12 inline 88
nettoyer 234 link 82
base de donnes relationnelle 214 marges par dfaut 95
cl primaire 114, 119 margin 86
lien 208 padding 86
relation 1-1 116 position 89
relation 1-n 114 positionnement par dfaut 88
relation n-n 117 proprit 79
C relative 89
cardinalit d'un lien 122 slecteur 79
cas d'utilisation 104 sortir un lment du flux 89
CGI (Common Gateway Interface) 126, 131, static 89
133, 145 top 89
cgi-bin 133, 139 visited 82
classe 45 width 86
attribut 45 D
attribut statique 48 DHTML (Dynamic HTML) 9697
constructeur 47 diagramme de classes 202
cl Django 23, 289
primaire 115, 129 __startswith 212
cookie 233, 238 __str__ 218
dure de vie 235 __unicode__ 218
CSS (Cascaded Style Sheets) 58, 60 _set 213
* (slecteur) 83 action 186, 188
absolute 90 admin.py 215
active 82 ajax/ 272
background-color 79 all 248
block 88 as_p 193
border 86 as_table 193
border-width 79 autodiscover() 215
Apprendre la programmation web avec Python et Django
316

blank 208, 211 ready 274275


BooleanField 192 redmarrer lapplication 169
clean 198, 273 redirection 186
cleaned_data 198 render_to_response 167, 186
commit 222 request 154, 187, 195
configuration 157, 160, 168, 234235 save 221
datetime 170 session 233
DEFAULT CONTENT TYPE 160 settings.py 157, 160, 180, 204, 215216
DEFAULT_CHARSET 157 super 198
delete 213 Sync DB 205, 211, 241
django-admin.py cleanup 234 template 150, 166
EmailField 191 TEMPLATE_DIRS 168
emplacement des fichiers projet 180 try...except 273
errorList 196 tuple 152
Field 273 urlpatterns 152
filter 212 urls.py 152, 158, 171, 178, 215, 222, 250
focusout 274275 valider un courriel 197
Form 191, 221 valider un formulaire 194
forms 190, 254 view 150
forms.py 221 views.py 153, 158, 168, 172, 179
formulaire 186, 188, 221, 225227, 280 vue 151, 153, 192
GET 187 XHTML 5 160
get 212 document HTML
hidden 229 encodage 65
HttpRequest 187 structure 63
HttpResponse 154
HttpResponseRedirect 188
E
installation 297 Eclipse 155, 289
is_bound 228 installation 303
is_valid 195 plug-in PyDev 305, 310
message d'erreur 189 encodage
Model 203 ISO 8859-1 66
model 150 UTF-8 66, 138, 157, 167
modle 202 vnement 96
ModelForm 220, 226, 263 exception 273
expression rgulire 153
models 204
models.ForeignKey 207 F
models.ManyToManyField 207 faille de scurit 232
models.OneToOneField 207 feuille de styles 78
models.py 203 fonction anonyme 275
none 239 formulaire 270
PasswordInput 192 framework
patterns 152 Django 150
raise 198
Index
317

H script 99
hritage 17, 120 section 66
HTML (HyperText Markup Language) 5859, src 72
126, 138, 145 strong 73
a 70 style 8384
action 76 submit 7576
alt 72 text 75
article 66 title 61
aside 68 type 75
attribut 62 ul 71
balise 60 value 76
body 63 width 72
change 96 XHTML 60
class 81 xmlns 63
click 96 HTTP (HyperText Transfer Protocol)
dblclick 96 redirection 186
dl 259 requte 75, 187
em 73
I
encoding 65
Informix 131
figcaption 72
instruction Python
figure 72
__init__ 45
footer 68
__str__ 47
form 75
append 35
formulaire 75
class 45
h1, h2, h3 67
def...return 43
head 63
del 36
header 68
for...in 41
height 72
if...elif...else 39
html 63
if...else 37
id 80
import 288
image 72
indentation 38
img 72
insert 35
input 75
len 35
lang 62
print 31, 138
li 71
self 47
link 85
type 31
liste 71
while 40
method 76
instruction SQL
mise en vidence de texte 73
DELETE FROM...WHERE 132
mouseover 96
INSERT INTO...VALUES 132
name 76
SELECT...FROM...WHERE 131
ol 71
UPDATE...SET...WHERE 132
onclick 99
intgrit des donnes 233
p 66
Apprendre la programmation web avec Python et Django
318

interactivit client-serveur 268269 P


Internet 4 page web 4
istruction SQL dynamique 10, 135
ORDER BY 132 passage de paramtres 13
statique 134
J
PK (Primary Key) 116
Java
port 162
installation 302
port de communication 133
JavaScript 58, 96, 270, 275, 280
programmation
getElementById 98
oriente Objet 17
jQuery 99, 229, 272, 274276
procdurale 17
ajax 276
programmation Objet 45
manipulation d'lment 101
association entre classes 47
prepend 283
hritage 51
slection d'lment 101
polymorphisme 53
L programme modulaire 16
langage protection des pages 238
SQL (Structured Query Language) 131 protocole HTTP (HyperText Transfer
langage de programmation Protocol) 4, 7
Python 145, 288 Python 17, 2627
script 96 bibliothque 54
lien hypertexte 4, 60, 70 installation 292
interprteur 138
M ordre des classes 210
modle de donnes 104, 113, 119, 122, 127 script 126, 133
modle Django
accder des objets lis 213 S
cration 202 scenario d'un site 112
crer un enregistrement 211 scurit des donnes 233
rcuprer plusieurs enregistrements 212 serveur de bases de donnes 12
rcuprer un enregistrement 212 serveur web 6, 9
superuser 206 serveur web Python 133
supprimer des enregistrements 213 session 231233, 238
trier des donnes 212 configuration 234
utilisation 211 donnes 237
MTV (Model Templates Views) 150, 166 utilisation 235
MVC (Modle Vue Contrleur) 58, 150 SGBD (Systme de gestion de bases de
MVC (Modle-Vue-Contrleur) 18 donnes) 12
site web
N dynamique 9, 11, 13
navigateur web 6, 11 page de dconnexion 234
O page par dfaut 250
Oracle 131 statique 5
Index
319

SQL (Structured Query Language) 126, 131, variable 172


133, 145, 202
SQLite 129, 139, 214
U
sqlite.db 206, 211, 217 UML (Unified Modeling Language) 20
Sybase 131 URL (Uniform Resource Locator) 4, 8
use case 2021, 105, 127
T
template
V
{%block%}{%endblock%} 175 variable
{%extends%} 176 chane de caractres 33
{%for%}{%endfor%} 174 de classe 48
{%if%}{%else%}{%endif%} 173 dclaration 28
{{current_date_time}} 170 dictionnaire 36
{{logged_user_name}} 166 entier 31
attribut de variable 172 liste 35
bodyId 177 locale/globale 44
condition 173 rel 32
content 177 transtypage 29
lment dune liste 172 type 29
first 173 Von Neumann 29
genericPage 177 W
headerContent 177 Web 4
hritage 174 Web Developer Tools 167
langage 172 wireframe 104, 106, 127
length 173 World Wide Web 4
lower 173
principe 166 X
title 177 XHTML 138

You might also like