Académique Documents
Professionnel Documents
Culture Documents
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
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
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.
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.
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
import sqlite3
import cgi
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'])
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.
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
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
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
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
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
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.
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.
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
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
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.
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
Figure A-6
Troisime tape de lassistant
dinstallation
Figure A-7
Quatrime tape de lassistant
dinstallation
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
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
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
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
Figure A-13
Lancement de linstallation de
Django
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
sudo /Library/Frameworks/Python.framework/Versions/2.7/bin/python
setup.py install
Figure A-15
Lancement de linstallation
de Django
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
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
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.
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
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.
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
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.
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
Figure A-33
Installation du plugin Web
Developer Tools
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 !')
Figure A-38
Cration dun projet de test
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