Hugues Bersini eae Ue A Gilles Degols Apprendre la programmation web avec Python UATE EYROLLES eeEnfin un ouvrage pour étudiants détaillant tous les principes de la programmation web moderne, avec l'un des frameworks Ce ee ne ee UE Cue ACAI UT Gy ‘Abondamment ilustréd'exemples et rappelant es bonnes pratiques du domaine (modéle MVC, diagrammes UML, patterns), voici un livre de cours magistral et moderne sur la programmation web dynamique, que tous les enseignants en informatique peuvent utilise. COT eeu ee eS ‘dynamisme alimenté par bases relationnelles SQL, sessions, JavaScript et Ajax, sans oublier de fournir au lecteur d’essentiels rappels en programmation objet, voire de montrer...ce qu'il nefaut pas faire en CGI! Le langage Python et le framework Django sont introduits en douceur, et l'utilisation des vues, templates, formulaires et modéles Django, conformément aux principes MVC exposés dans la premiére partie, est illustrée au fil de l'étude de cas, un site web inspiré de Facebook. Cette étude est oe ene eee oe ee eer er de linstallation de l'environnement de développement, tant sous Windows et Mac OS X que sous GNU/Linux : Python, Django, Se eae POMS ed ++ Aux étudiants en informatique (IUT, écoles d'ingénieurs) et leurs enseignants. De A Rea EL ee ee See CLS Oe UG ue Au sommaire Les notions essentilles. Comment un site web fonctome‘til? = Pragrammation arientée objet et framework WNC = Bases du langage Python Be LA cme oie RUNG in ec one nen CSC SCI Smee nt Eee ese DT cco cone se es en Cee esr a oi ee Coe Rees coc aM eC et een eA} SPS Ou ee Ce Me Oecd Tae Peet a et ete ae eC ene ee ere DO eC On ce oS CO eee Rr eee ae ee) SU Uy an nae ee a Dt neice ce Reon oc en ce Ces ere en eee eee ee eee eee Mn ere aero eee EO ane ee ery CON ee ee ee ge tee ce POS IC cee Peres Tee eee eee cornApprendre la programmation web avec Python et Django Principes et bonnes pratiques pour les sites web dynamiquesyrigh DANS LA MEME COLLECTION H, Brrstvr, — La programmation orientée objet. N° 67399, 7° édition, 2017, 696 pages. C. Detannoy. ~ Programmer en langage C++. N° 67386, 9° édition, 2017, 850 pages. C. Sovrow. — Programmer avec MySQL. N° 67379, 5° édition, 2017, 522 pages. C. Detannoy. ~ Exercices en langage C++. N° 67387, 3° édition, 2017, 354 pages. C. DetaNnoy. ~ S'initier & la programmation et & Vorienté objet. Avec des exemples en C, C++, C4, Python, Java et PHB N° 14067, 2° édition, 2016, 360 pages. A. Tasso. ~ Le livre de Java premier langage. N° 67486, 12° édition, 2017, 618 pages. C. Ditannoy. ~ Programmer en Java, N° 67536, 10° édition, 2017, 984 pages. E, Sarton. ~ Programmation avec Node,js, [Link] et MongoDB. N° 13994, 2014, 586 pages. S. Conetion, JC. Fintiiree ~ Apprendre & programmer avec OCaml. N° 13678, 2014, 430 pages. SUR LE MEME THEME M, Lonawr, M. Xtonneux. ~ Développer. votre site web avec le framework Django. N? 21626, 2015, 285 pages. Y. Ganony. — Django avaneé. NP 13415, 2013, 402 pages. A. Bacco, ~ Développer votre site web avec le framework Symfony3. N° 14403, 2016, 536 pages M. Cuaveutt. - Découvrer le framework PHP Laravel, N° 14398, 2016, 326 pages. Retrouver. nos bundles (livres papier + e-book) et livres numériques sur hetp://[Link]Pierre Alexis, Hugues Bersini et Gilles Degols Apprendre la programmation web avec Python et Django Principes et honnes pratiques nour les sites web dynamiques EYROLLES ———pyright © 2018 Eyrolles. co EDITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 [Link] En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans l'autorisation de I'Editeur ou du Centre frangais exploitation du droit de copie, 20, ruc des Grands Augustins, 75006 Paris. © Groupe Eyrolles, 2018. ISBN : 978-2-212-67515-3Copyright © 2018 Eyrolles. Avant-propos Cet oworage se base sur Django, un outil de eréation de sites dynamiques écrit en Python, langage aujourd'hui tres populaire pour apprendre a programmer. Ce livre enseigne la programmation tweb de fagon aussi moderne que possible et adresse aussi bien aucx enseignants quia leurs éléves. I! vous demande peu de prévequis, mais reste ambitieux, de sorte que vous Waurez pas a rougir devant les profissionnelsfv | Apprendre la programmation web avec Python et Django Curuit Du Web préhistorique au Web 2.0 moderne et «dynamique» Ilya vingt-cing ans, on déambulait entre les pages du Web comme entre deux tableaux de maitre dans tun musée; seule dfférence, on était assis face & son écran, sours la main. Au il des clic, les sites web saffichaient: ils étaient dea jois et colores, riches en information et éminemment utiles... mais inlté- rable et rif 8 toute autre forme dinterférence que ce vagabondage de page en page. Il était impossible pour linternaute dy écrie son numéro de carte de crédit pour aequérit une tole, de réserver sa place pour une visite du musée, de s'enregistrer comme utisateur du site et 'épingler sur le sourire de Mona Lisa un commentaire ou des moustaches. Vous reveniez sur la méme page quelques minutes plus tard? Le contenu état inchangé. Tout était placidement statique; en un mot, le Web fonction nait pour I'essentiel dans une seule direction: des serveurs dinformation vers les clients. Les utiisateurs ‘étaient & la merci de ce que les développeurs cOté serveur avaient choisi de leur dévoler. Le serveur ne percevait que le clic entrée sur le site et se borat & renvoyer en retour la page sollctée; il état sourd cet incfférenta toute autre requete. Le Web d‘alors, certesimpressionnant et révolutionnaie,étaitstatique. James Gosing, le concepteur du langage de programmation Java (dont le succes devra beaucoup au Web), présenta en 1995 un nouveau concept de navigateur lors d'une conférence consacrée au Web. I fit e'abord apparaite la représentation en 2D d'une molécule dans un navigateur web classique, lalsant assistance de marbre. Quels ne furent pas la surprise et enthousiasme de ce méme public lorsqu'a aide de sa souris, il se mit & bouger la molécule! Elle réagissit aux stimuli de la souris, béissat aux injonc- tions de 'interaute. Un programme Java, appelé « applet, s‘exécutait dans le navigateur (Mosaic, 2 F époque),rendant cette interaction effective, Le Web venait de gagner ses premiers galons de dynamismme ‘et dinteractivité. Il en devenait chatouileux. En 200¢, prenant conscience que 'utilsateur passait de spectateur passif& acteur essentel du fonction nement du Web, sursaturant ce dernier de ses vidéos de vacances, de son savoir, de ses copains de lycée ‘ou de ses prises de position politique, Tim O'Reilly décida de couronner le Web 2.0. Ce nouveau Web, aussi royal qu'il fat, devenait complétement assujett au bon vouloir de ses sujets qui au-dela des sempiternels lcs de navigation, pouvaient dorénavant commenter, pérorer,refuser, voter vole, acheter, vendre, négo- cies, réserver,préter, jouer, écouter, vsionner,projeter,etraliser tant d'autres activité 'éloignant encore de Técran de télévision pour celui de son PC. La confiscation du Web par cette multplcité d’ego di rents, choisissant en faire cette excroissance narcissique quillest devenu, fut considérée & ce point révo- lutionnaire que le célébre hebdomadaire américain Time choistd'élire You la personne de I'année 2006. Laffichage d'un site web selon le bon vouloir de son créateur nécessite la maitrise dun langage de présentation de contenu appelé HTML (XHTML ou HTML 5, vous comprendrez, ces nuances par la suite), décrivant et paramétrant organisation de la page, la taille et le style des différents éléments de celle-ci. C’est le seul langage compris par les navigateurs, qui affichent la page de la maniére précisée et transmise dans les instructions HTML. Rendre la page «dynamique» requiert, de fagon un peu plus exigeante, la maitrise d'un langage de programmation comme il en existe malheureusement trop: JavaScript, Ci, C++, Java, .Net, Python, PHP, Ruby, Small Talk, Eiffel, OCaml et tant dautres. Ainsi, la mise en place d'un site web dynamique capable de se comporter comme un programme, réagissant comme il se doit aux sollicitations de son utilisateus, exige de mixer ces deux savoirs dans une proportion dépendant de l'attention accordée soit a son interactivité, soit 4 son apparence.Avant-propos xm Heureusement, depuis Papport pionnier des applets et des serviets Java, de multiples technologies logicielles sont apparues afin de combiner efficacement programmation et physionomie d'un site. Qui, dans le monde informatique, n'a entendu parler de PHP, JSP (dans la mouvance Java) ou ASPNet (offre de Microsoft), qui structurent les milliards de sites interactifs disponibles aujourd'hui sur le Web? Au-dessus de ces langages apparaissent de multiples boites 4 outils logicielles facilitant la conception des plates-formes web: Symfony et Zend pour PHP, JavaScript (telles les technolo- gies Node,js et Angularjs), Spring pour Java et, sujet de ce livre, Django pour Python. Elles font partie de ces multiples solutions, relativement équivalentes (méme si bien entendu leurs concepteurs s'en défendront avec vigueur), qui facilitent la prise en charge conjointe de la présentation de la page et de son interactivité. Bien que ces différentes technologies puissent également s'implémenter coté client, cet ouvrage portera principalement sur celles qui s‘exécutent c6té serveus, les plus sollicitées. Le code exécuté c6té serveur a pour mission de produire a destination du client une page répondant & ses desiderata. Pour ce faire il est fréquemment néces- saire d'obtenir et dexploiter des informations stockées dans une base de données relationnelle et de glisser ces demiéres de maniére judicieuse entre les instructions HTML 5 qui se chargent de clairement les présenter. Pourquoi cet ouvrage? Programmation, HTML 5/CSS 3, bases de données, les technologies se multiplient et semblent exiger de la part des développeurs web un CV épais et noirci d’acro- rymes incompréhensibles pour la plupart des directeurs du personnel, La tentation est grande de les laisser sur le bas-c6té du cursus universitaire, malgré leur omnipré- sence et une importance stratégique grandissante pour les entreprises. Crest pour combler ce fossé entre la réalité mouvante des technologies web et le pro gramme plus installé et stable du monde universitaire ~ d’aucuns diraient un peu poussiéreux et envahi de toiles... d’araignées ~ que Python et Django sont apparus et ont changé la donne. Le choix de Python et Django Depuis quelques années, grace Python et Django, il est devenu possible d’aborder en douceur le cocktail de technologies informatiques & la base de la programmation web. Us ont pour eux la simplicité d'utilisation. Ainsi, le langage Python est trés souvent pyright © 2018 E) coPv | Apprendre la programmation web avec Python et Django plébiscité pour sa facilité d’usage, sa rapidité d'acquisition, ce qui en fait un langage de prédilection pour Papprentissage de la programmation, Son utilisation est élémentaire au démarrage, et trés interactive. Les instructions étant plus simples et plus intuitives, on parvient plus rapidement au résultat escompté. Bien que lexécution de ces codes conduise au méme message A ’écran, print ("HeT1o World") en Python est incontes tablement plus simple & écrire, mais aussi a comprendre, que le fameux public static void main (String[] args) {[Link] "Hello World"} rédigé avec stupeur par tous les débutants en programmation Java. Langage de programmation disponible pour plusieurs plates-formes, Python est done simple d'emploi: pas de typage explicite, instructions concises, structures de données d'un usage élémentaire (listes, dictionnaires et chaines de caractéres). Pour autant, il fen préserve pas moins les fonctions essentielles de tout langage réputé puissant. Il semble, un peu mieux que les autres, réussir & concilier efficacité et simplicité, a se positioner entre ces deux acteurs exigeants que sont, d'une part, le processeur qui cherche Vefficience et l'économie de mémoire et, d’autre part, le programmeur qui cherche la simplicité et la clarté d'utilisation, En pranique Des goats et des couleurs en programmatior Bien sir, en matiére de langages de programmation, ce genre de préférence tient pour beaucoup de Vacte de foi, et en va des guertes de langages comme des guerres de religion ou des gots culinaires, Toutefois, sufisamment d'enseignants ont fait de Python le premier langage & enseigner aux étudiants pour nous conforter dans notre choix. Django, entigrement développé et basé sur le langage Python, fut a Porigine développé pour faciliter et accélérer la programmation de sites web dans un milieu journalistique (le journal Lawrence Journal-World, publié quotidiennement dans la ville de Lawrence au Kansas), done pas vraiment versé dans les technologies de développement logiciel. Les sites web en question exigeaient d'étre développés et mis & jour a un rythme tres élevé; les outils devaient pour cela étre faciles 4 prendre en main et les logiciels produits aisément réutilisables. Il était de surcroit préférable de séparer le métier d’er- gonome de sites web, préoccupé pour lessentiel par l'apparence et la physionomie duu site, du métier de développeur, chargé d’assurer le fonctionnement optimal et sécurisé d'un code dont Pécriture devait rester trés abordable et facilement modifiable. 3 Diango est devenu cette boite & outils logicielle (framework dans le jargon profession- nN nel), ce canif suisse du développement web. Aujourd’hui, cette aventure se prolonge 2 selon le modéle collaboratif de open source, impliquant des dizaines de milliers utilisateurs et de développeurs passionnés tout autour de la planete.pyright © 2018 Eyrolles. co Avant-propos =e Ainsi, a Vorigine de la programmation web, la technologie CGI a exécuter coté ser- veur donnait naissance a d’horribles codes comme celui ci-dessous (pour afficher une liste d’employés d'un service stockée dans une base de données relationnelle) : Exempte 0.1 A 'ancienne mode CGI, tout est mélangé! # -* coding: utf-8 ~*~ import sqlite3 inport cgi print("Content-Type: application/xhtml+xn]; charset=utf-8\n") print('') print¢'chtm) xnins="http: //waw.w3.0rg/1999/xhtmI" lang="Fr">') print(' ") print(’ ") print(’ ") "UTF-8" 2") form = [Link]() service_id = str(form["service"] .value) db_connection = [Link](' database. sqlite3") db_connection.rom factory = [Link] cursor = [Link] [Link]("'SELECT name FRO service WHERE ids" + service id) row = cursor. fetchone() [Link] = str(ron{'name"]) print(' Employés du service « ' + [Link] + ' »') [Link]("SELECT name, first_name, phone_nunber FROM enployee WHERE id_service=" + service_id) rows = [Link]() print(’

") for row in rows: print(’
1. " + row{'first_nane'] + ', ' + row[*name'] +", ' © + row{'phone_number'] + '") print¢' ") print('") db_connection.close() Sans quiil soit nécessaire d’en saisir toutes les lignes, tout informaticien, méme débutant, découvrira un mélange plutdt indigeste de trois réalités informatiquesf= Apprendre la programmation web avec Python et Django fondamentales, pourtant assez faciles a différencier, trois langages dont Pusage correct évite ce charabia pénible. Ces trois langages sont le SQL. pour la gestion et linter- rogation des bases de données relationnelles, le Python pour la programmation ct le HTML 5 pour laflichage et 'apparence des pages web. Crest le pari réussi de Django de maintenir ces trois réalités informatiques suffisam- ment distinctes pour, par exemple, épargner a Vartiste des pages web les subtilités du stockage relationnel et les joies de la programmation. De sureroit, adopter une technologie alternative d'affichage ou de stockage de données devrait laisser suffi- samment inaltérés les autres aspects du développement, contribuant ainsi A stabiliser Vintégralité du développement (souci essentiel d'une informatique dont les technolo- gies ne cessent d’évoluer et de projets logiciels dont le cahier des charges se modifie en continu). Cette séparation découle d'une recette de conception bien connue des infor- maticiens et dénommée MVC (Modéle Vue Contréleur), que nous aurons Poccasion de présenter largement par la suite, recette qui facilite 2 la fois la vie du développeur et celle de Venseignant de cette pratique de développement. A quis'adresse cet ouvrage? De par la simplicité de la syntaxe Python, les outils de développement web mis a disposition par Django, ainsi que le souci de ce dernier de maintenir les aspects esthé- tiques et les besoins du développement assez logiquement séparés, cet ouvrage pré- sentant a la fois Python et Django vise pour I'essentiel trois types de lecteurs. + Tout d’abord, les enseignants du monde universitaire et des écoles d’ingénicurs, tout spécialistes qu’ils soient en programmation, en bases de données relation- nelles ou en technologies de présentation de contenu web (HTML 5/CSS 3, XHTML...) verront un intérét 4 cet ouvrage. Lexpérience de un des auteurs, Hugues Bersini, le montre. Il enseigne la programmation depuis 25 ans dans dif- férentes facultés bruxelloises. Pour la partie plus appliquée et expérimentale de son enseignement, les étudiants sont ravis de mettre en ceuvre le langage Python dans le cadre du développement web. Ils se plaisent & faire fonctionner une biblio- théque ou vidéothéque sur le Web, un site bancaire ou de commerce électronique. Ces projets leur donnent impression d’étre en phase avec la réalité de Vinforma- tique telle qu’elle se pratique aujourd'hui, Nombreux sont ceux qui, ayant décou- vert Python et Django, leur sont restés fidéles dans la vie professionnelle, dans leur entreprise ou leur start-up. + Evidemment, les étudiants suivant cette méme formation trouveront de quoi facilement concevoir une variété infinie d'autres sites web que celui présenté dans cet ouvrage. Au-deli de Django et Python, ils se sensibiliseront au métier 2018 Eyroll pyright © copyright © 2018 Eyrolles. co Avant-propos En de développeur web, & ses recettes, ses exigences, ainsi qu’aux multiples solutions logicielles capables de leur macher la besogne. + La troisiéme cible pouvant tirer profit de la lecture de ce livre comprend les professionnels impliqués dans le développement web des technologies web en quéte d'une entrée en douceur dans cet univers technologique somme toute assez exigeant. Méme si leur environnement professionnel les contraint a l'une ou autre des technologies web différentes de Django (basée sur [Link], Java/JSP, Node,js, PHP, Ruby on Rails...), ce qu’ils découvriront a la lecture de ce livre (les différentes technologies de programmation, le stockage relationnel, les modéles en HTML ou en CSS, le besoin d'une claire séparation entre elles, la réutilisa- tion de fonctionnalités) demeurera d'une grande utilité. Et pourquoi pas, si cette liberté leur est offerte, ils pourront faire le choix de Django pour leur entreprise, plate-forme logicielle léyere et formidablement réactive! Pierre Alexis et Gilles Degols, les autres auteurs de ce livre qui assistent Hugues Bersini dans son ensei- gnement, peuvent en témoigner dans cet ouvrage commun ! Le plan du cours Ressources év ce Code source du projet Trombinoscoop Le code source du site développé dans le lve est ibrement téléchargeable depuis la fiche du livre, sur ke site des éitions Eyolles > wivweditions-eyrollescomilivre!9782212134995 Notre propos est découpé en deux grandes parties: nous présentons @abord Pessentiel des aspects théoriques, pour ensuite décrire en détail un projet concret. La premiére partie a comme objectif de vous donner toutes les bases indispensables pour comprendre ce qu’est un site web et comment il fonctionne. Nous y présentons ala fois des notions théoriques (Web dynamique, MVC, programmation objet, bases de données relationnelles) et les langages nécessaires & leur mise en ceuvre (HTML 5, CSS, JavaScript, SQL, Python). + Le premier chapitre aborde les rudiments théoriques de la programmation web HTTP, URL, notions de Web statique et dynamique, de serveurs web et de ser- veurs de bases de données. + Le chapitre 2 insiste sur la nécessité de séparer les taches de programmation, de présentation et de structure/stockage des informations. Nous y présentons le modéle MVC et la programmation orientée objet. Nous expliquons en outre la notion de framework de développement et montrons en quoi l'utilisation d’un framework tel que Django facilite la tiche du développeur.pyright © 2018 Eyro co Ea Apprendre la programmation web avec Python et Django * Le chapitre 3 balaie les notions élémentaires de programmation indispensables 4 l'utilisation de Python: variables, structures de contréle, fonctions, rudiments de programmation objet. Ce chapitre suffira 4 comprendre les exemples de code Python présentés dans Pouvrage et, de maniére générale, la plupart des applica~ ions développées sous Django. Aller plus loin Ce livre n‘est pas un manuel approfondi d'utilisation de Python. D’autres ouvrages existent pour cela, dont excellent livre de Gérard Swvinnen: 2 Gérard Swinnen, Apprendre a Programmer avec Python, Eyrolles 2012 + Le chapitre 4 s‘intéresse aux langages de présentation des pages web, i HTML 5 ct CSS, ainsi qu’a la maniére de rendre les pages plus interactives et plus dyna~ miques (c6té client cette fois) par Putilisation du langage JavaScript. + Le chapitre 5 décrit le travail préliminaire 4 toute programmation web: I'élabo- ration d’éléments d’analyse qui permettent d’avoir une vue claire et réféchic sur le projet qu’on désire développer. A cet effet, nous verrons ce que sont cas d’u sation, wireframes et modéle de données. Pour appuyer notre propos, nous analy serons le projet développé dans la seconde partie de Touvrage. Nous fournissons également dans ce chapitre les notions essentielles concernant les bases de don- nées relationnelles. + Méme si Django masque les échanges avec les bases de données, il est néce dlacquérir les rudiments du langage SQL. qui sert 4 dialoguer avec ces derniéres. ‘Cest Fobjet du chapitre 6, Nous nous y appuyons sur les scripts CGI. Les limita- tions de cet ancétre des technologies de programmation web démontrent la néces- sité d'utiliser le MVC. La deuxiéme partie met en application de fagon concréte toutes ces notions et lan- gages. Nous y décrivons étape par étape la construction d’un projet web complet inspiré de Facebook, en nous appuyant sur le framework Django. * Le chapitre 7 siintéresse & Varchitecture et a Vorchestration du site. Il présente ce qu'on appelle les «vues» sous Django, ce qui correspond a Vaspect Con¢rale du MVC (attention & la confusion dans les termes). * Le chapitre 8 sépare ce qui concerne la présentation du site. Les rendus HTML. deviennent réutilisables. Cela se fait grice aux «templates» de Django et corres- pond a Vaspect Vue du MVC. + Le chapitre 9 traite séparément le transfert de données entre l'utilisateur et le site, par l'intermédiaire des formulaires.Avant-propos El * Dans le chapitre 10, nous voyons comment décrire et implémenter les « modéles» avec Django (ce qui correspond a l'aspect Madéle du MVC). + Elément indispensable aux sites web modernes, la gestion des sessions garantit, une bonne authentification des utilisateurs et la persistance momentanée de leurs données. Cela fait Vobjet du chapitre 11. + Nous terminons I'élaboration de notre site exemple en construisant dans le cha- pitre 12 les pages qui manquent encore. + Le chapitre 13 propose daller plus loin en ajoutant encore plus de dynamisme aux pages web grace a la technologie Ajax. + Le chapitre 14 vous permet finalement de mettre en ligne votre projet Django en Vinstallant chez un hébergeur professionnel. Enfin, Vannexe décrit les étapes a suivre afin d’installer les outils de développement, dont Python et Django, quel que soit le systéme d'exploitation que vous utilise, (Windows, Mac OS X ou Linux). Les exemples d’application étant développés a partir de l'environnement Eclipse, le chapitre en décrit également Vinstallation, la configuration et la prise en main (intégrant l'emploi de Django). Remerciements Pierre, Hugues et Gilles adressent a Xavier Devos, Gaél Rabier et Jonathan Unikowski leurs remerciements les plus sincéres pour leur suivi, leur relecture attentive et les nombreuses corrections et améliorations qui leur sont dues dans les pages qui vont suivre. Hugues soubaiterait dédier cet ouvrage & Colin Molter (1973-2017), qui fut le premier 3 assister dans Penseignement de la programmation sous la forme de pro~ jets et de stages intensif’. Colin était un as de la programmation, un chercheur d’une grande eréativité et un pédagogue formidable. Il aurait grandement apprécié le pari fait dans cet ouvrage d'un enseignement de la programmation web a l'aide des tech- nologics Python ct de la réalisation d'un projet lointaincment inspiré de Facebook. «Merci Colin de tout ce que tu m’as apporté et de ce long bout de chemin parcourn ensemble*s9|j04A3 BTOZ @ IYyBuAdoDTable des matiéres PREMIERE PARTIE Les notions essentielles CHAPITRE 1 Comment un site web fonctionne-t-il ?. Qurest-ce que le Web? Fonctionnement d'un site web statique Le protocole HTTP. LURL, adresse d'une page web. Le serveur web : la fois ordinateur et logicis Des sites web qui se mettent a jour tout seuls. Fonctionnement d'un site web dynamique Utilisation d’une base de données.. Passage de paramétres a une page wel Ai-je bien compris? CHAPITRE 2 Programmation orientée objet et framework MVC. Des programmes modulaires. Une écriture simplifie. Des modules réutilisables : Un travail d’équipe facilité et plus efficace.. Les langages orientés objet..... Les cas (utilisation (use cases) et le MVC. Le principe de la séparation modele-vue-controleur (MVC) Le diagramme des cas d'utilisation (use cases) Correspondances entre MVC et cas d'utilisation Django et le MVC. Le framework Django . Ai-je bien compris? ..Ew Apprendre la programmation web avec Python et Django CHAPITRE 3 Bases du langage Python. 27 Qualités et défauts de Python 28 Qualité: la simplicité 28 Défaut: la simplicité 29 Les bases: variables et mémoire centrale 30 Déclaration et initialisation des variable 30 ‘Type des variables: 31 Modification et transtypage des variables. 32 Copie de variables 32 Se renseigner sur une variable. 33 Quelques opérations sur les types simples. 33 Le type int. 33 Le type float 35 Le type string nn 35 Les types composites: listes et dictionnaires 37 Les listes... 37 Les dictionnaires .. 38 Les instructions de contréle 39 Les instructions conditionnell 39 Aiguillage a deux directions: instruction if (...) else 39 Aiguillage a plus de deux directions: instruction if (..) elif (..) els... 41 Les boucles.. 42 La Boucle while re 42 La boucle for (..) in 43 Les fonctions 46 Les variables locales et les variables globales 47 La programmation objet. 48 Les classes et les objets 48 Lassociation entre classes 31 Heritage et polymorphism : 54 Passage d'objet comme argument d'une fonction. 37 Import et from: accés aux bibliothéques Python. 58 Aicje bien compris 59 CHAPITRE 4 Bases du HTML 5, CSS et JavaScript. 61 Structurer les pages web avec HTML 5. 64 Le concept de «balise » 65 Structure d’un document 67pyright © 2018 Eyrolles. co Table des matiéres Liencodage de la page -....0600ccccseeeetecesteeteseeees 69 Quelques éléments HTML . . : zi eee Principause éments de structuration HTML.» +- + v+ + a Elements de structuration annexes: en-tétes,pieds de page et sections. 2B Les liens ype ; 74 Les liste 5 Les images... ..ecveees 76 Mite en evidence du texte. 7 Les formulaires. 0.0... 78 ‘Autres déments HTML... 81 ‘Mettre en forme avec les fe es de ses CSS 82 Les propriétés CSS. 82 Les sélecteurs CSS : 83 Sclectionmer toute les balises de méme nom 83 Selectionner un élément particulier: id en HTML et # en CSS....... 84 Selectionner quelques éléments de méme nature: class en HTML [Link] CSS 84 Abpliquer une propriété seulement quand Uélément est dans un état donné, 85 Combiner les selecteurs 85 Selectionner tous les éléments ... 7 Lier CSS et HTML.......- 87 Placer le code OSS dans les bales HTML. «ss vv seve rEg Placer lecode OSS dans Ven-téte du fichier HTML........0000-... 88 Placer le code CSS dans un fichier séparé 89 Dimensions des éléments en CSS... . 2200 ec eeeeeeee ene 90 Imbrication des éléments (boites)........-. n Positionnement par défaut des éléments en CSS 92 Sortir certains éléments du flux 93 Application & un exemple concret plus complet 95 Créer un site web «responsive» ..... : 99 Dynamiser les pages web «i la volée» avec JavaScript 102 Les événements .....000. 0.2202 103 Langage de programmation de scripts . 103 Un premier exemple de DHTML . 103 jQuery et les frameworks JavaScript 106 Ai-jebien compris? .......5.6000 107 CHAPITRE 5 Mise en application: un site web inspiré de Facebook 109 Notre site web: Trombinoscoop coe 110 Les cas d'utilisation a Pa)Apprendre la programmation web avec Python et Django ‘Maquette du site: les wireframes Lécran d’authentification... ... Léeran de création d’un compte. Léeran accueil . Léeran de modification du profil. Lécran daffichage d'un profil. Léeran ajout d'un ami. Scénario complet du site. Modéle de données et petit rappel sur les bases de données relationnelles. Clé primaire et clé étrangére .. Relation I-n .... Relation 1-1 Relation n-n La problématique de la mice en correspondance ronald. Avec Django Retour aur modéle de données de‘Trombinoscoop: son diagramme de classes Des personnes: étudiants et employés .. gui travaillent ou étudient a Puniversité .. et qui échangent des messages avec des amis... Aije bien compris? .. CHAPITRE 6 Premier contact avec les bases relationnelles et SQL a partir d’un exemple en CGI.. Analyse du carnet d’adresses: des cas d'utilisation au modeéle de données . ‘Trois cas d'utilisation simples. . ‘Maquette des écrans (wireframes) . Le modeéle de données du carnet . Création de la base de données avec SQLite . Acces a la base de données via SQL Syntaxe des requétes SQL les plus courantes....... ‘Quelques exemples liés 4 notre base de données ..... Réalisation du carnet d’adresses avec SQL et CGI. Lancement d'un serveur web Python . Lécran d'accueil de ULB... La page principale du carnet d’adresses La liste des employés d'un service Ajout d'un employe ...... CGI: ce qu'il ne faut plus faire Ai-je bien compris? .. 112 113 114 114 114 114 114 118 119 121 121 122 123 124 125 125 126 127 128 129 131 133 133 133 134 135 137 137 138 139 139 141 142 146 149 151 151Table des matiéres Ea . 153 DEUXIEME PARTIE Mise en application avec Django . CHAPITRE 7 Les vues Django: orchestration et ihelihabiimaal 155 Utilicé des vues 157 Le fichier [Link]. 158 Le fichier [Link] 159 Enfin | Notre premigre page web en Django 161 Lancement de environnement Eclipse et création du projet. ...... 161 Le fichier [Link] 165 Le fichier [Link] . 165 Importation de la fonction dans [Link] . 166 Test de notre ébauche de site . 167 Bel effort, mais. 169 Ai-je bien compris? 169 CHAPITRE 8 Les templates Django: séparation et réutilisation des rendus HTML... 171 Principe des templates . 172 Notre premier template 173 Dynamisons ce premier template 176 Le langage des templates. 178 Les variables. ... 178 Formatage des variables ..... 178 Sauts conditionnels et boucles . 179 Héritage et réutilisation de templates. 180 Etsion avangait dans la réalisation de Trombinoscoop > 182 Amélioration visuelle de la page de login. . 186 Ai-je bien compris? .........-....5 192 3 CHapiTRE 9 £ Les formulaires Django .. 193 a Patron courant de gestion des formulaires. . . 194 3 Lobjet request... 195 Ajout du formulaire dans la vue . 196 2 Gestion du message d’erreu 198 = Présentation du message erreur . 198Ea Apprendre la programmation web avec Python et Django La bibliothéque forms de Django.......eccseceeseesesseseteteseeses 199 Création d'un formulaire avec la bibliothéque forms... . . aes . 199 Intégration du formulaire dans la vue et le template. 200 Validation du formulaire. : 203 Présentation des messages d’erreur. . 205 Validation de adresse de courriel et du mot de passe ..... 206 Faut-il se contenter d’un seul visiteur autorisé? 208 Ai-je bien compris? ..........0--.0.5 209 CHAPITRE 10 Les modéles Django.. 211 Les modéles Django. 212 Création d’un premier modéle ......0..--.00000cc0cceeeeeeseeeeeess 212 Le modele Person. 213 Configuration... . . eee a Création de la base de données et du compte administrateur (superuser)... 215 Création des autres modéles et deleursliens........s0c0ssssecsseeeeeses 219 Le modéle Message: relation I-n.... 219 La relation «friend »: relation n-n .. . aes . . . 220 Les modeles simples Faculty, Campus, Job et Cursus.- 221 Les modeles Employee et Student: héritage . . 221 Le lien entre Faculty et Person: relation 1-n.......-.. 4 See aa: ‘Mise jour de la base de données. . 222 Utilisation des modéles 223 Création et modification d'un enregistrement 223 Récupération de plusieurs enregistrements. . : : 225 ‘Tri des données 225 Récupération d'un enregistrement unique .........6e0ceceeeeeeeeeeee 225 Suppression d’enregistrements .... 226 Acccés A des objets «igs»... -- 226 Remplissage de la base de données........ see 227 Configuration de Vinterface d’administration des bases de données... .. 227 Gestion de la base de données avec Vinterface d’administration. .. 230 Authentification utilisant la base de données ...... 233 Les ModelForm . . : 234 S Création du formulaire Erudiant dans le fichier [Link] 2.22... BE 7 Création de !URL et de la vue de création de compte. 235 S Création du template de création de compte .... . 7 H 236 a Un peu de mise en forme 236 Finalisation de la page de création de compte 238 yrigh Création de deux formulaires: un pout les érudiants et un pout les employés 239Gestion des deux formulaires dans la vue... - Gestion des deux formulaires dans le template. Un peu de dynamisme Ai-jebien compris? .....0...esccscsessseeeeseeees CHAPITRE 11 Comprendre et utiliser les sessions A quoi servent les sessions Les sessions selon Django Utilisation d'une session . Configuration... ee Maniement d'une variable de session Enregistrement de Tutilisateur authentifié. Verification que l'utilisateur est bien authentifié .. Utilisation des données de la session Que trouve-t-on dans le cookie? .. Protection des pages privées...... Amélioration de notre page d'accueil . Personalisation de la banniére Division du corps de la page. . Liste des messages ...... + : Récuptration des messages dela liste. sus vsvse+ Présentation de la liste des messages Liste des amis... : Publication d'un message a destination de ses amis Récapitulatif du passage d’informations entre pages Le formulaire de type POST ou GET. LURL accompagnée de paramétres La session oe Ai-je bien compris? Chapitre 12 En finir avec Trombinoscoop.. La page d’ajout d’un ami Ajout d'un formulaire dans [Link] Création de la vue add_friend Création du template add_friend.html. Ajout d'une URL dans urls py . Ajout du lien dans la page d'accueil Table des matiéres En 239 240 242 244Ea Apprendre la programmation web avec Python et Django La page de visualisation d’un profil... Création du template show_profile.html . Création de la vue show_profile Ajout de URL dans [Link]... 00... .22.+ Amélioration de la présentation dans [Link] .. Ajout des liens dans la page d’accueil La page de modification d'un profil Création du template modify_profile.html Création de la vue modify_profile . Ajout de URL dans [Link]. .. Hea Ajout des liens dans la page d’accuel see Ai-je bien compris? .. CHAPITRE 13 Des sites web encore plus dynamiques avec Ajax. Exemple de l'interactivité attendue entre client et serveur. Validation de la création d'un compte avec Ajax Ajout d'une URL pour la requéte Ajax Vue traitant la requéte Ajax . .. Ajout du code JavaScript . Détecter que Vutilisateur a bien termind de remplir le champ Email - Validation du courriel sais. Instron la Tite des erreurs au-dessus du champ «fei Ajout d'un ami via Ajax . Ajout d’un champ texte et d'un lien. Ajout de URL et de la vue . .. Création du JavaScript d'ajout d'un ami. Insertion du HTML dans la page web. Aicje bien compris? .. CHAPITRE 14, Mettre en ligne son site web.. Les différents types de serveurs. . Louer un serveur de déploiement Installation du serveur . Se connecter au serveur Envoyer son projet... i Lancer son projet sur le serveur . ‘Modifications pour la mise en production . . Désactiver le mode DEBUG ........ 275 276 217 278 278 279 280 281 281 282 283 283 285 286 289 290 290 292 292 294 296 297 298 299 300 301 302 303 304 305 312 312 318 321 326 327Table des matiéres En ‘Mise en place de Gunicomn : 328 Prendre en charge les fichiers statiques. 331 Réserver son nom de domaine 333 Conclusions .. 336 ANNEXE Installation de l’environnement de développement. 339 Que faut-il installer 340 Python . 340 Django 341 Eclipse 341 En résumé 342 Installation de Python « 344 Pour Windows 344 Pour macOS....... 347 Vérification de V'nstallation 348 Installation de Django. 349 Pour Windows 349 Pour macOS. 350 Pour Ubuntu. a H a Beet a 351 Verification de Pinstallation ......[Link] Eoetaae Installation de Java. 353 Pour Windows i Eeertitses Pour macOS. Ft a - i aoe - u 353 Pour Ubuntu. eee 353 Installation d’Eclipse . 354 Installation du module Eclipse PyDev. 357 Premier projet de test. 361 Ai-je bien compris 364 Index... 365*s9|j04A3 BTOZ @ IYyBuAdoDpyright © 2018 Ey co ean ain sya Les notions essentielles Cette premiere partie vise & vous donner toutes les clés pour comprendre ce qu’est un site web, comment il se construit et comment il fonctionne: + protocole HTTP, URL, notions de Web statique et dynamique, serveurs; * programmation orientée objet, modéle MVC, notion de framework; + Aéments de base du langage de programmation Python; + structuration des pages web avec HTML 5, présentation avec les feuilles de styles * elaboration du modéle de données : cas d'utilisation (use cases), schémas de présen- tation (wireframes), bases de données relationnelles; + dléments de base du langage d'interrogation des bases de données SQL, utilisa- tion parle biais de l'ancienne technologie CGI, discussion des limitations de cette derniére.*s9|j04A3 BTOZ @ IYyBuAdoDCopyright © 2018 Eyrolles. 1 Comment un site web fonctionne-t-il ? Ce chapitre rappelle les bases du Web, ses origines statiques et son passage graduel vers plus de dynamisme avec, notamment, Vexploitation d'une base de données cété serveur, dont les mises & jour se répercutent cété client, Sont également expliquées les notions d’URL, de protocole HTTR, de serveur web et le passage de paramdtres du client vers le serveur.2018 Eyrol ght € co Ea Apprendre la programmation web avec Python et Django Qu’est-ce que le Web? C'est dans les années 1980, alors qu’il effectuc un séjour de six mois comme consul- tant informatique au Cern (le laboratoire européen de physique des particules), que ‘Tim Berners-Lee développe un programme appelé «Enquire». A Paide d'un langage adéquat, ce dernier organise le contenu et la visualisation des documents produits par le laboratoire et, grice a la technologie hypertexte, permet également a ces pages de faire référence a d'autres pages. Le Web, abréviation du World Wide Web (en francais, la etoile [@araignée] mondiale»), était né. Quelque vinge ans plus tard, la reine Eli sabeth II anoblira notre talentueux informaticien pour le remercier des nombreuses heures passées sur Facebook en compagnie de ses sujets. Le Web est un systéme permettant l'organisation visuelle et la publication de docu- ments, leur consultation via un navigateur web (par exemple Safari, Google Chrome, Firefox ou Internet Explorer) et leur interconnexion Vaide de liens. Trois technolo- gies ont été inventées, ou du moins formalisées et adaptées par Tim Berners-Lee, et sont a Vorigine du Web: + le concept de page web, au centre de tout, les pages renfermant le contenu textuel que Ton désire publiers + le concept de liens hypertextes, lesquels relient des pages web par l'insertion dans une page de liens vers d’autres (pour mettre en ceuvre ce concept, il a fallu ima~ giner un mécanisme d'adressage identifiant de maniére unique chaque page web Cest !URL, ou Uniform Resource Locator, que nous étudierons plus en détail dans ce chapitre). * un mécanisme permettant aux navigateurs d’accéder aux pages web (il agit du protocole HTTP, ou HyperText Transfer Protocol, qui interroge un serveur HTTP pour en récupérer le contenu; ces concepts seront également étudiés et détaillés par la suite). ‘CULTURE Terminologie: Internet vs Web ‘Trés souvent sont confondus les termes Internet et Web. I n'est pas rare d’entendte expression erronée «sit Intemet» pour désigner en réalté un «site web. Internet est un réseau mondial permettant dnterconnecter des petits réseaux d'ordinateurs (dot ‘appellation «inter Networks) par interméciaire de leurs serveurs. Cest grace a Intemet qu’un inter naute situé en Belgique peut diloguer avec un autre internautelocalsé en Australie. ‘Le Web, quant & lu n'est qu'une application internet parm d'autres comme le cour, Telnet (connexion 8 distance sur un ordinateur) ou le peer-to-peer (de préférence legal) En fait ily a a deux réseaux superposes, mais de natures tres différentes: un réseau c'hyperliens «juste cdéposés » sur un réseau de connexions physiques. La page de votre voisin de bureau pourrait se trouver & ‘une vingtaine de clics de votre page web; sloignés sur le Web mais proches sur Internet, ou inverse, les deux topologies ne se superposent pas.Comment un site web fonctionne-t-il? ig ‘CHaPrTRe 1 Aprés son invention, trés vite, le Web connut un succés grandissant et les premiers sites web apparurent. Aux départs trés basiques, ces sites étaient pour la plupart résolument «statiques». Un site statique se caractérise par des pages dont le contenu ne change pas (ou quasiment pas) au fil du temps. Limage suivante, représentant le site web de PUniversité libre de Bruxelles tel qui était en 1997, illustre trés bien le concept de site statique. re t-1 Site web de I'ULB dans sa version du 28 juin 1997 On le voit au premier coup deel, la page daccueil est trés simple et le contenu ne semble pas destiné & varier au fil du temps. Revenez visiter le site dans un jour, une semaine ou un mois; il est fort probable que la page n/aura pas changé d'un iota. Fonctionnement d'un site web statique Dériuiron Site web statique Un site web statique est un site qui ne change que si son webmestre en modifi les pages @ la main. Ine posséde aucun automatisme de modification de page du cbté du serveur Imaginons qu'un internaute désire se rendre sur la page web d'accueil du site de !Uni- versité libre de Bruxelles, dont Vadresse est [Link] (cette adresse est fictive, inutile de l'essayer dans votre navigateut). Pour ce faire, sur son ordinateur, Vinternaute va ouvrir un navigateur web (Google Chrome, Safari, Internet Explorer, Firefox ou autre) et saisir dans la barre d'adresse, [Link] beshomepagyCopyright © 2018 Eyrolles. [aq Apprendre la programmation web avec Python et Django Serveur web ~ [Link] Ordinateur du visiteur Sernd sr ewsthcbehomepoge Figure 1-2 Récupération d'une page web statique Le navigateur cété client va contacter le serveur web de luniversité, Ce dernier est un ordinateur, pas trés différent de ceux que nous utilisons tous les jours, dont le réle est de servir du contenu a la demande. En pratique, les ordinateurs serveurs sont spé- cialement adaptés & leur fonction: plus robustes, plus compacts, ne possédant aucun gadget (webcam, haut-parleur, manette de jeu, etc.), jusqu’a étre dépourvus d’écran. Cela dit, n'importe quel ordinateur peut faire office de serveur web, que ce soit votre ordinateur fixe & la maison ou votre portable. “Mis ott ces serveurs web se cachent-ils done? Généralement dans des centres de trai- tement des données (data centers en. anglais), gérés par des entreprises spécialisées et qui peuvent héberger de nombreux serveurs et sites web, souvent au bénéfice de phi- sieurs clients, Dans le cas de Université libre de Bruxelles (qui, comme beaucoupComment un site web fonctionne- a Cane duniversités, possade plus d'espace que de moyens), le serveur web ne se trouve pas dans un centre de données externe, mais en son sein méme. Une fois la connexion établie entre le navigateur client et le serveur web, le premier va envoyer la requéte suivante au second: «Donne-moi la page d’accueil omepage, s'il te plait». Comme il s'agit d'un site statique, le serveur web va simplement lire sur son disque dur (ou plutét dans son systéme de fichiers) le fichier contenant la page web homepage et le renvoyer au navigateur. Pour notre exemple, nous avons imaginé un fichier nommé horepage se trouvant dans le dossier ¢:\website. Une fois la page transmise par le serveur au client, le navigateur va en décoder le contenu et laflicher & l’écran. On le comprend aisément, 4 moins de changer le contenu du fichier horepage qui se trouve sur le disque dur e6té serveur, la page web renvoyée sera toujours la méme. Le seul dynamisme sera dii a Vinformaticien chargé de mettre a jour les pages web stoc- kées sur le serveur... Beau mais dur métier, méme pour un professeur la retraite! Autant Pautomatiser, Le protocole HTTP ‘Afin que le navigateur et le serveur web puissent dialoguer et se comprendre, ila fallu définir ce qu'on appelle un protacale, qui détermine le langage et le vocabulaire utilises pour communiquer. Dériirion Protocole Un protocole définit la signification des bits échangés entre les deux machines qui dialoguent. Le protocole utilisé pour accéder un site web est appelé HTTP (HyperText Transfer Protocol). Il définit par exemple comment doit étre formatée la commande «donne- moi la page Bomepage», que le navigateur envoie au serveur de T'université lorsquion tape Padresse vwnvulbacberhomepage. En réalité, la commande envoyée est transformée en celle-ci. ExeMPLE 1.1 Traduction de la commande en HTTP GET homepage HTTP/1.1 a Host: [Link] a Cette commande est appelée reguéte HTTP. La réponse donnée par le serveur (dans 7 notre cas, la page web demandée) est appelée réponse HTTP. La réponse aurait pu ne pas étre la page web demandée, mais, par exemple, une erreur indiquant que celle-ci coght © 2018 Eyro co Ea Apprendre la programmation web avec Python et Django nlexiste pas (doit Ie recours au protocole qui fera parfaitement la différence entre ces deux messages renvoyés par le serveur). Le protocole utilisé étant HT'TP, on parlera parfois de client HTTP pour désigner le navigateur, et pour le serveur, sans grande surprise, de serveur HTTP. L'URL, adresse d'une page web Dans notre exemple de site statique, nous avons supposé que son adresse était [Link]. Examinons plus en détail cette adresse et Ia maniére dont elle ‘est composée. En réalité, Yadresse exacte de la page est hitp:/wwwulbacbe/homepage. Diailleurs, si vous saisissez, adresse dans votre navigateur sans la commencer par http, ce dernier Yajoute automatiquement. Cette adresse est appelée URL (abréviation de Uniform Resource Locator). Son format a été défini par Pinventeur du Web, Tim Berners-Lee (qui a reconnu, dans un article paru dans le Times en 2009, qu'il nous avait bernés et que les // ne servaient stricte- ment a rien). Les adresses URL que nous avons utilisées jusqu’a présent sont composées de trois éléments. * Le protocole: une adresse commence toujours par un nom de protocole, dans notre cas hip, suivi des). D'autres protocoles existent (par exemple tenet! pour utilisation d'un terminal & distance ou smtp:/ pour les échanges de courriels), car les adresses URL peuvent étre utilisées a d'autres desseins que Paccés & un site web. + Unnom de domaine: le nom de domaine, dans notre cas vnwwulbacbe, identifie le serveur web sur lequel est héberg€ le site. + Un emplacement pour la resource: dans notre cas, il sagit simplement de homepage, soit le nom d'un fichier se trouvant dans le dossier C:\website sur le ser~ veur. Le chemin vers la ressource aurait pu étre plus complexe ct se trouver dans ier. Par exemple, la page d'adresse [Link], recteur identifie une resource dont emplacement sur le disque dur est C:\website\ biographies\bio_recteur. un sous-dosComment un site web fonctionne- Coe A Le serveur web: a la fois ordinateur et logiciel Pour terminer notre présentation des sites statiques, il nous reste & clarifier la notion de serveur web. Nous avons vu que cela désigne Pordinateur dans lequel est stocké Ie site web et qui se charge de renvoyer les pages demandées par les navigateurs web coté client. En réalité, Vexpression «serveur web» peut désigner deux choses qui méritent d’étre distinguées. + Lordinateur physique sur lequel est hébergé le site web. C'est ce que nous enten- dions jusqu'a présent par «serveur web». + Le programme qui tourne constamment en arrigre-plan sur cet ordinateur, avec pour mission dintercepter les requétes HTTP er dy donner suite. Il existe de nombreux logiciels de serveur HTTP sur le marché, les plus connus étant le logiciel libre Apache de l'Apache Software Foundation, NGINX, le petit nouveau qui ale vent en poupe, également «libre», et les IIS (Internet Information Services) de Microsoft. Pourquoi cette nuance? Lordinateur qui fait office de serveur web peut également, dans le méme temps, jouer d'autres r6les et offtir d'autres services: serveur de cour- riels, serveur de bases de données, etc. Dans ce cas, plusieurs programmes tourneront constamment en arriére-plan, l'un pour intercepter les requétes HTTP, Pautre pour accueillir les courriels entrants, ete. On verra également par la suite que le méme serveur web peut faire office de client HTTP. En d'autres mots, on peut trés bien installer un navigateur sur le serveur web et utiliser pour consulter le site web hébergé sur cette méme machine. Quoi quil en soit, c'est pourtant bien cette configuration que nous utiliserons par la suite lorsque nous développerons notre propre site web, et ce afin d’éviter d’investir dans de multiples ordinateurs (un pour le navigateur web, un pour le serveur HTTP, un pour la base de données, etc.). Nous travaillons a Vuniversité, ne Voublions pas. Des sites web qui se mettent a jour tout seuls Dérwimon Site web dynamique Un site web dit «dynamique » comprend, du cété du serveur, des meécanismes automatiques de mise & jour des pages serves. A la différence d'un site statique, le contenu d’un site dynamique évolue constam- ment. Un exemple typique est le site de Reuters (igure suivante), lequel affiche enza Apprendre la programmation web avec Python et Django temps réel les cours d’actions cotées en bourse. II vaut mieux, on le concevra aisément, que l'information sur le cours d'une action puisse se modifier au fil du temps. igure 1-3, Page du site web de Reuters affichant le cours de Maction Apple ata) Si au début du Web les sites statiques satisfaisaient la plupart des besoins, ce n'est vraiment plus le cas aujourd'hui. Certes, il en existe encore (notamment certains onnels), mais ils ne forment pas la majorité de ceux présents sur Certains sites, que l'on pourrait a priori croire statiques, sont de fait dynamiques; pensons par exemple a un blog sur lequel Pauteur ne publie que trés peu d’articles, En réalité, les qualificatifs «statiques» et «dynamiques» dépendent de la maniére dont sont fabriquées les pages web. = Deriirion Page web dynamique Une page est dite « dynamique »dés que son contenu est produit a volée.Fonctionnement d'un site web dynamique Afin de mieux comprendre ce que l'on entend par «produit a la volée», reprenons exemple du site de Reuters. Imaginons qu'un internaute désire se rendre sur la page affichant le cours de action d'InBev (une multinationale brassicole), dont V'adresse est htp/inwrceuterscom/stoctsabi (cette adresse est fictive, inutile de Pessayer dans votre navigateur). Pour ce faire, il va ouvrir un navigareur web (Google Chrome, Safari, Internet Explo- rer, Firefox ou autre) et saisir htp:/mwwireuters convstockslabi dans la barre d’adresse. Serveur web — [Link] Q, _ a Cwebstelstotsabi java Ordinateur du visiteur ee Serend a Mp /feme reescomtecs/e @ Figure 1-4 Création d'une page dynamique Tout comme pour un site statique, le navigateur web cété client contacte le serveur sweb de Reuters. Une fois la connexion établic entre le navigateur et le serveur, le pre- mier envoie la requéte suivante au deuxigme: « Donne-moi la page stocks/abi. Toutefois, le serveur ne va pas lire sur son disque dur un fichier contenant le contenu de la page web. A la place, il lance un programme dont le rdle est de eréer le contenu de la page web demandée. Dans ce livre, nous utiliserons Python, mais ce programme peut étre écrit en nlim- porte quel langage de programmation: Java, C, C#, ete. Sur I'illustration, nous avons imaginé le programme écrit en Java et se trouvant 4 Pemplacement suivant sur le disque dur: C:\website\stocks\abi java, Une fois la page produite par le programme, le serveur web 'envoie au client dans un format compris par le navigateur (le méme format quune page statique). Ce dernier en décode alors le contenu et Vaffiche a P’écran,za Apprendre la programmation web avec Python et Django Utilisation d'une base de données Liutilisation d’un programme pour produire la page web offre de nombreux avantages cet une souplesse bien plus grande que les pages statiques. Le premier d’entre eux est le possible accés du programme & une base de données en vue d’exploiter les données quelle recéle. Notre exemple du site Reuters utilise une telle base de données afin d'y cenregistrer le cours des actions au fil du temps. C’est elle que Reuters met & jour a la vitesse des transactions, plutot que d’aviser personnellement tous les traders. La figure suivante illustre V'utilisation d'une base de données par le programme Java en charge de calculer la page web affichant le cours de Paction InBev. Serveur web —wwa reuters com B— a edinateur du visteur Figure 1-5 Création d'une page dynamique en utilisant une base de données Sur ce schéma, la base de données se trouve sur le méme serveur que le serveur web. A Tinstar des serveurs web, ceux en charge des bases de données sont interrogés & Taide d'un protocole bien déterminé. Comme pour le serveur HTTP, le terme «serveur de bases de données» caractérise ala foi * ordinateur physique sur lequel se trouve hébergée la base de données; + le programme qui tourne constamment en arriére-plan dans Vordinateur en ques tion et qui a pour mission de répondre aux requétes des clients désirant consulter ou modifier Ia base de données. Ce programme est appelé Systeme de gestion de bases de données (SGBD). Il en existe de nombreux sur le marché: MySQL, Oracle Database, Microsoft SQL Serveur, PostgreSQL, DB2, etc. Un logiciel de gestion de bases de données peut se trouver sur une autre machine qu’un serveur de bases de données dédié. On peut aussi installer sur une méme machine un serveur web et un systéme de gestion de bases de données. De multiples répartitions des taches sont possibles; elles font appel 4 de multiples serveurs. t € coDe trés nombreux sites web dynamiques ont recours & une base de données. Aujourd’hui, en réaction a I'explosion des données qu'il est nécessaire de stocker coté serveur, de nouvelles technologies, plus efficaces, de stockage, d’accés et de traitement, de ces montagnes de données ont vu le jour, sous la dénomination de «big data». ‘Nous parlerons souvent des bases de données relationnelles dans cet ouvrage, mais a présentation et utilisation que nous ferons de Django demeurent pratiquement indépendantes du mode de stockage et dorganisation de ces données. Passage de paramétres a une page web Un autre avantage important des pages web dynamiques, c'est quiil est possible de passer des paramétres au programme chargé de composer la page. Un exemple typique cst illustré a la figure suivante: le moteur de recherche Google. Sur la page d’accucil, Jorsqu'un utilisateur entre l'un ou l'autre mot-clé démarrant la recherche et qu'il cli- que sur le bouton Recherche, la page appelée est [Link] (htpvnuw google-rsearch pour la France). A cette page est joint un paramétre: les mots-clés ou expression au départ de la recherche. Figure 1-6 Exemple de page web avec un paramétre Ta fi Hl 8 ay t i s. ‘Comment ce paramétre est-il passé & la page? Pour le savoir, analysons plus en detail TURL qui est appelée. On voit en haut de la capture d'écran que Padresse est en réalité http:[Link]?q=Solvay (cette adresse n'est pas fictive ; vous pouvez Ves- sayer dans votre navigateur). Le paramétre est done ajouté a la fin de "URL. Pour séparer le nom de la page des paramétres qui suivent, on fait usage du point d'interrogation. Ensuite, pour chaque paramétre, on spécifie un nom (dans notre exemple, le paramétre s'appelle q) et une ght © 2018 Ey2018 Eyrolles. za Apprendre la programmation web avec Python et Django valeur (dans notre exemple, on recherche l'expression Solvay). Le nom du paramétre et sa valeur sont séparés par un signe égal (non_paran=valeur_paran). Plusicurs paramétres peuvent étre transmis & une page, séparés & l'aide de lesper- luette (8). Google permet, par exemple, de préciser la langue dans laquelle la page de résultats doit étre affichée, & Taide du paramétre hi. Par exemple, si on désize cher l'expression «Solvay» et afficher la page de résultats en néerland: TURL suivante: > http:[Link]?q=Solvay&hl=nl Si l'on résume, les URL contenant des paramétres sont construites selon la forme suivante Figure 1-7 [Link]/pageweb ? nom_param1=valeur & nom_param2=valeur Construction d’une URL l J avec paramétres ‘Stparele nm Sela page _Sépargun paramatre ‘ess parametres, ‘eunaute Les paramétres ainsi passés peuvent étre utilises directement dans le programme, comme illustré la figure suivante: Serveur web — wu. google be Ordinateur du visteur serene Mone ge tee ay Figure 1-8 Création d'une page dynamique avec parametres Ai-je bien compris? © Quelles sont les trois technologies qui furent inventées a 'origine du Web? + Au niveau des traitements réalisés par un serveur web, quelle est la différence fon- damental qui distingue un site web dynamique d'un site statique? + Comment peut-on passer des paramétres & une page web?Copyright © 2018 Eyrolles. 2 Programmation orientée objet et framework MVC Ce chapitre a pour mission d'expliquer la conception logicielle respectueuse du découpage MVC et sa version sous Django. Nous expaserons d'abord les principes de la programmation orientée objet. Ensuite, nous verrons comment la mise disposition d'un framework sinscrit dans cette logique.pyright © 2018 Eyrolles. c zw Apprendre la programmation web avec Python et Django Des programmes modulaires Lécriture d'un logiciel important en taille et en nombre de fonctionnalités, comptant des dizaines de milliers de lignes de code et des centaines heures passées devant son écran, exige sans surprise un découpage adéquat. Une écriture simplifiée Le premier avantage & découper le programme est den simplifier considérablement écriture, a condition que les différents modules offrent des contenus fonctionnels relativement indépendants les uns des autres et que la modification de l'un rventraine pas systématiquement la réécriture des autres. Des modules réutilisables 11 sensuit assez logiquement le bénéfice de la réutilisabilité. En effet, si les modules sont relativement indépendants les uns des autres, on congoit aisément quils puissent atre réutilisés dans de multiples et successives applications logicielles. Ainsi, une par- tie de logiciel chargée d’inscrire un internaute sur un site web queleonque peut se réutiliser dun site 4 Pautre. Il en va de méme pour toute forme de transaction financitre ou tout paiement par carte de crédit: cela fonctionne toujours de la méme fagon, que vous achet livre de programmation Python ou un billet pour Hawai. De cette maniére, des pans entiers d'un premier développement logiciel sont aisément récupérés dans un second si les traits pointillés qui permettent ce découpage sont tracés avec soin et si chaque découpage fonctionne de et par lui-méme. Zan Un travail d'équipe facilité et plus efficace Le travail en équipe s'en trouve facilité, puisqu'l devient naturel de diviser et répartir les taiches entre les différents spécialistes. Comme tout bon économiste le sait depuis Adam Smith, chaque spécialiste aura dés lors Poccasion de se spécialiser davantage encore, pour un bénéfice collectif plus important ~ du moins en théorie. La division du travail en informatique est tout aussi avantageuse que dans les chaines de montage. Linformatique offre de multiples visages: informatique graphique, ergonomic de sites web, développement et programmation, stockage et exploitation des données, business intelligence... qui exigent des compétences spécifiques.Copyright © 2018 Eyrolles. Programmation orientée objet et framework MVC Cone? Les langages orientés objet Avant toute chose, les langages de programmation orientée objet (OO), dont Python, mettent leur syntaxe au service de ce découpage. Un programme écrit dans un langage objet répartit leffort de résolution de problémes sur un ensemble objets logiciels collaborant par envoi de messages. Le tout s‘opére en respectant un principe de dis- tribution des responsabilités on ne peut plus simple, chaque objet, tel un micropro gramme, s‘occupant de gérer ses propres données. Lorsqu'un objet exige de sinformer ou de modifier les données d'un autre, il charge cet autre objet de s'acquitter de cette tiche. Chaque objet expose a ses interlocuteurs un mode d’emploi restreint, une carte de visite limitée aux seuls services qui est apte a fournir; il continuera & les fournir dans le temps, malgré de possibles modifications dans implantation concréte de ces services. Lorienté objet inscrit la programmation dans une démarche somme toute trés clas sique pour affronter la complexité, quel que soit le probleme: une découpe naturelle ct intuitive en des parties plus simples. A fortiori, cette découpe sera d'autant plus intuitive qu’elle sinspire de notre maniere «cognitive» de découper la réalité qui nous entoure. Lhéritage, reflet fidéle de notre organisation cognitive, en est le témoignage Ie plus éclatant.yrigh za Apprendre la programmation web avec Python et Django Ev pratique Approche procédurale LLapproche procédurale qui pour t'essentiel sépare le code en un grand bloc de données et toutes les fonctions chargées de le manipuler, rend cette découpe moins naturelle, plus contraignante,«forcée », Side nombreux adeptes de la programmation procédurale sont en effet conscients qu'une maniére incon ‘ourable de simplfier le développement d'un programme complexe est de e dé&couper physiquement en de petits modules plus lisibes. ils soutirent de I'absence d'une prise en compte naturelle et syntaxique de cette découpe dans les langages de programmation utilis, Les langages orientés objet rendent au contraire le découpage du programme beaucoup plus intuit. Pour une introduction & la programmation orientée objet. voir: (2 Hugues Bersini, La programmation orientée objet, Eyrolles 2012 La programmation objet permet ce découpage suivant deux dimensions orthogonales: * horizontalement, les classes se déléguant mutuellement des services; + verticalement, les classes Jeritant les unes des autres d’attributs et de méthodes installés & différents niveaux d'une hiérarchie taxonomique, Pour chacune de ces dimensions, reproduisant fidélement nos mécanismes cognitifs de conceptualisation, en plus de simplifier Pécriture des codes, la récupération de ces parties dans de nouveaux contextes en est facilitée. S'en trouve également mieux garantie la robustesse de ces parties aux changements survenus dans d'autres. Un code orienté objet, idéalement, sera aussi simple a créer qu'a maintenir, réutiliser et faire évoluer. En programmation objet, les fonctions et les données ne sont plus d'un seul tenant, mais éclatées en un ensemble de modules (dénommés «classes») reprenant, chacun 4 son compte, une sous-partie de ces données et les seules méthodes qui les manipulent. II faut apprendre & programmer en sessayant au développement d'une succ de microprogrammes et au couplage soigné et réduit au minimum de ces micropro~ grammes. En découpant 1 000 lignes de code en 10 modules de 100 lignes, le gain, bien plus que linéaire, réside dans la simplicité extraordinairement accrue consistant 4 programmer 100 lignes plutét que 1 000. En substance, la programmation objet pourrait reprendre & son compte ce slogan devenu trés célébre parmi les adeptes des courants altermondialistes: « Agir localement, penser globalement». sion Les cas d'utilisation (use cases) et le MVC Le principe de la separation modéle-vue-contréleur (MVC) Imaginez la programmation en Python du petit menu de V'application visible sur la figure suivante. Lorsqu’on clique sur un élément du menu, une fenétre apparait,Programmation orientée objet et framework MVC za ‘CuaprTRe 2 contenant juste un bouton Do nothing button. Totalement inutile, certes, mais c'est pour l'exemple. Figure 2-1 Une application avec juste un menu Le code Python dont Pexécution affiche ce menu est repris ci-aprés, mais il est inutile, ace stade, d’en comprendre le fonctionnement en détail. ExeMpte 2.1 Code Python permettant d’afficher un menu a l'écran fron tkinter import * def_donothingd): filewin = Toplevel (root) button = Button(filewin, tex button. pack() root = Tk() menubar = Menu(root) filenenu = Menu(menubar, tearoff=0) filemenu.add_conmand abe filenenu.add_conmand(labe filenenu..add_command (1abe’ filenenu.add_conmand(1abeT=' filemenu.add_conmand(label=' conmand=donothing) + conmand=donothing) ‘Close, conmand=donothing) filenenu.add_separator() filenenu.add_conmand(1abel="Exit", command=[Link]) menubar .add_cascade(label="File", menusfilemenu) editnenu = Nenu(menubar, tearoff=0) editnenu.add_conmand(labe1="Undo", comnand=donothing) les, editnenu.add_separator() edi tmenu.add_conmand (1abe1= edi tmenu..add_conmand (1 abe =" ‘edi tnenu..add_conmand (abe. ‘editmenu. add_command (1abe’ edi tmenu.add_cormand (abe ut", conmand=donothing) copy", conmandedonothing) aste", conmand=donothing) jelete”, connand=donothing) elect ATI", conmand=donothing) ght © 2018 EyEa Apprendre la programmation web avec Python et Django menubar.add_cascade(label="Edit", men helpmenu = Menu(menubar, tearoff=0) helpmenu.add_conmand(labeT="Help Index", conman helpmenu.add_conmand(label="About..." menubar .add_cascadeClabel="#elp", menushelpmenu) ditmenu) [Link](menu=nenubar) root mainloop() Laffichage et utilisation d’un tel menu exigent la prise en compte de trois fonction- nalités logicielles assez distinctes (mais pourtant en partie mélangées dans le code) : + le graphisme du menu (par exemple sa couleur, le nombre d'items qui apparaissent ala suite de activation du menu, le type de caractéres utilisé pour les items du menu); « les items qui composent le menu; + le fonctionnement du menu (qu’advient-il lorsqu’on choisit un des items?). On congoit aisément que, méme si le code affiché ne le fait pas délibérément, il est préférable de tenir séparés ces trois aspects. Ainsi, on pourrait décider de modifier Ja liste des items sans pour autant qu'il soit nécessaire de changer la représentation du menu ou lexécution associée a certains des items, On devrait de meme pouvoir aisément changer la couleur du menu sans affecter en rien son fonctionnement. On. pourrait méme récupérer la liste des items pour un tout autre composant graphique, un ensemble de «checkboxes» par exemple. Hen découle quil est plus logique et bien plus aéré que le haut du code se découpe comme suit: d'abord Ia liste contenant tous les items, ensuite une boucle permettant de créer les éléments graphiques associés A ces items. ExemPLe 2.2 Version améliorée du code précédent menultens = ["New", “Open”, "Save", "Save as...", “Close”] root = Tk menubar = Menu(root) filemenu = Menu(menubar, tearoff=0) for x in menuTtems: filemenu.add_conmand(label=x, conmand=donothing) 7 Cet exemple, quoique modeste, montre bien la séparation des trois fonctionnalités i logicielles selon la recette de conception MVC. Ici, le madéle serait la liste des items 2 (que Yon pourrait installer dans un fichier séparé), la ove serait la représentation gra~ phique de ce menu (type de composant graphique pour afficher la liste, disposition coProgrammation orientée objet et framework MVC = ‘CuaprTRe 2 géométrique du menu, couleur et taille des items) et son contréleur le mode de fone tionnement du menu et des items qui lui sont associés (dans Ie code, la déclaration séparée des fonctions donothing©). Autre avantage, un développeur tiers pourrait récupérer votre formidable menu, mais pour une toute autre liste d’items. Imaginez le cas Pun restaurateur chinois qui vou- drait récupérer le menu d'un collégue italien. Le diagramme des cas d'utilisation (use cases) Depuis Pavenement dUML (Unified Modeling Language) comme langage de modé- lisation graphique des développements logiciels, tout projet informatique débute généralement par la mise au point du diagramme use cases (dit «cas d'utilisation» en francais). Ce diagramme a pour mission d’identifier les différents usages de ce logiciel vu du cété utilisateur; il compose son «cahier des charges» La figure qui suit illustre un tel diagramme pour un distributeur automatique d'argent. Figure 2-2 Diagramme « use cases» Distributeur ‘un distibuteur automatique ) Décrivons la figure. On y voit trois types d'acteurs: Je client, 1a_banque et 1’en- ployé de maintenance. Chacun de ces acteurs, et cest ce qui les différencie, en fera un ensemble @usages (appelé les use cases) qui lui sont propres. Ainsi le client pourra retirer de largent ou effectuer un virenent, mais pas effectuer 1a maintenance.Ea Apprendre la programmation web avec Python et Django Correspondances entre MVC et cas d'utilisation Figure 2-3 Madéle MVC et Use Case Ss Use Case N & <> o © <> < ‘ea Ss Comme Vindique la figure qui précéde, les use cases vont donner naissance & trois types de fonctionnalités logicielles: comtréles, entités et interfaces, qui reprennent parfaitement la recette de conception MVC (il suffit d’effectuer la substitution Modéle = Entités et Vue = Interfaces). Chaque use case sera pris en charge par les éléments contrdles, Ainsi, effectuer un vire- ‘ment sera la responsabilité d’un ensemble eacteurs logiciels particuliers qui maura a se préoccuper ni de l'interface avec le client ni de celles avec les bases de données ou les éléments entités. Le controle se devrait de fonctionner de fagon identique si Ton change Ja maniére dont le client voit sa bangue sur son navigateur et la fagon dont les comptes en banque sont finalement stockés sur le disque dur. A chaque intersection entre les acteurs et les use case doit correspondre un ensemble d’éléments interfaces (ou vues) dont le role sera en effet de gérer linterface GUI (Graphic User Interface) avec Vutilisateur. Enfin, les objets fondamentaux utilisés par Papplication (qu'on appelle parfois objets «meétier»), tels que Conptetnanque, Virenent ou Client, seront représentés chacun parProgrammation orientée objet et framework MVC [=] ‘CuaprTRe 2 une classe ou des éléments logiciels qui, in fine, s'associeront a des versions perma- nentes stockées sur disque dur (par exemple des tables clients et conpte en banque dans une base de données relationnelle).. Comme la figure ci-aprés Vindique, les éléments controles demeurent au centre de tout et sont les éléments pivots de application. Les interfaces regoivent les sollici tations des utilisateurs et s'adressent aux contréles pour relayer ces derniéres. A leur tour, les contréles parlent aux éléments entités (par exemple, ils vont chercher le sta- tut des comptes en banque ou créer de nouveaux virements) et sollicitent en retour les éléments interfaces pour recevoir de la part des utilisateurs d'autres informations utiles & la continuation de V'interaction (combien retirer du compte, sur quel autre compte effectuer le virement...). Figure 2-4 MVC et distributeur O d'argent automatique ey aan Compe Banque Django et le MVC Dans Django, les trois réles modéle-vue-contréleur sont joués respectivement pai * les classes Models, qui s‘occuperont de la mise en correspondance avec la base de données relationnelle; * les templates HTML, qui permettront de coder en HTML et CSS a visualisa- tion des pages web; + les fonctionnalités view qui, par Vintermédiaire de méthodes Python, s‘occuperont de toute la logique de fonctionnement de application. ‘Ev pranique Django: ambiguité sémantique entre controle et view ‘Attention: dans Django, le contrdle est donc plut6t joué par les view.pyright © 2018 Eyro co Ea Apprendre la programmation web avec Python et Django Le framework Django Un framework est une boite & outils logicielle, un ensemble de solutions qui sont & votre disposition pour répondre le plus simplement possible a la plupart de vos besoins. ANALOGIE Une maison ouverte La maison est votre disposition, clé sur la porte; il vous reste 8 décider du paper peint et des posters de plage ou de voiture punaiser au mur. Par exemple, supposez que votre application gére des livres. Afin de créer une entité book avec son titre et sa date de publication dans la base de données relationnelle, il suffira d’utiliser les modéles Django et d’écrire les lignes suivantes. ExemPte 2.3 Modéle Django pour créer une classe et une table livre Class Book(nade1s. Model) title = [Link](nax_length=50) publicationdate = [Link] La création de cette classe Book exige d’hériter (I’héritage en orienté objet sera expli- ‘qué dans le chapitre suivant) de la classe [Link], qui fait partie en effet du framework Django et qui se chargera de la mise en correspondance avec la table book associée dans la base de données relationnelle. Ce faisant, toute la gestion de la base de données relationnelle vous est entiérement épargnée. Les amateurs de SQL, le lan= gage d’interrogation des bases de données relationnelles, seront dégus, sinon frustrés, car les bibliothéques Django s‘occupent de cette partie de application a leur place. De méme, pour obtenir les dix derniers livres parus, il vous suffit d’écrire une méthode view telle que celle qui suit. ExeMPLE 2.4 View pour extraire les derniers livres de la base de données relationnelle def last_books (request) : Vistof_books = [Link].order_by('-publication_date' ) return render_to_response(' last_books.html' {*Tist_of_books" :1ist_of_books}) 10) A nouveau, on se rend compte de la simplicité d'écriture de cette requete et de 'ex- ploitation de fonctionnalités déja. précodées, comme objects.order_by (...) pour ordonner les ouvrages compris dans la liste. Tout cela est en place et & votre dispo- sition dans le framework Django. Pourquoi réinventer la roue et ne pas aller au plus vite a lessentiel? N’oubliez pas que Django fut congu a Vorigine pour des journa- listes, pressés comme il se doit de publier leurs scoops sans devoir rédiger de lourdes requétes SQL pour remplir la base de données.Programmation orientée objet et framework MVC Za ‘CHaprTRe 2 Ai-je bien compris? * Quelle découpe le modéle de développement MVC propose + Quelles sont es similitudes et les différences entre la découpe proposée par Papproche orientée objet et la découpe MVC? + A quoi un framework sert-il?*s9|j04A3 BTOZ @ IYyBuAdoDCopyright © 2018 Eyrolles. 3 Bases du langage Python Ce chapitre a pour mission de présenter le langage de programmation Python, sur lequel repose le projet Django. Les ragles syntaxiques brigvement décrites ici devraient vous suffre pour comprendre ‘es différentes applications de Django que nous verrons par la suite, ainsi que pour maitriser les aspects «contréle» de votre projet.2018 Eyrol ght € co Ea Apprendre la programmation web avec Python et Django Qualités et défauts de Python I rest pas question dans ce chapitre de faire de vous, lecteurs, des experts en program- mation Python: le but est de vous permettre de comprendre tous les développements ct utilisations de Django qui vont suivre. Le B.A.-BA de Ia programmation Cest-i- dire les variables, les typages de base, les instructions d’affectation et de contréle, le découpage des programmes par Putilisation de fonctions et une rapide introduction aux aspects orientés objet, devrait suffire. ‘Cuuture Python et son papa, Guido Van Rossum Guido Van Rossum, inventeur et «superviseur» du langage Python, est hollandais d'origine, détenteur des mattises de mathématiques et d'informatique de I Université libre d’Amsterdam. I fat parti, 2 la fin des années 1980, d'un groupe de développeurs dont le but est de mettre au point un langage de programmation accessible & des non-expers, doll son nom: «ABC». Das 1991, il s‘attaque & Python, écrit en Cet exécutable sur toutes les plates-formes, Guido Van Rossum travalle alors au CWI (Centrum voor Wiskunde en Informatica). En 1995, il en prend la direction, aux Etats-Unis, et travaille pour le CCNRI (Corporation for National Research Initiatives) jusqu'en 2000. A cette époque, il publie Computer Programming for Everybody, sa profession de foi pour I'enseignement de la programmation. C’est égale- iment & cette période qu'il est nommé directeur des Python Labs de Zope Corporation, qui comprennent aujourd'hui une demi-douzaine de développeurs. Entre 2005 et 2012, i travallle pour Google, qui semble investir beaucoup dans le langage Python. Guido y civise son temps de travail entre le projet Open Source Python et les développements de Google util- sant ce langage. Depuis il travalle pour le systeme de stockage en ligne Dropbox. Notre homme se tarque de porter le titre trés ambigu de « Dictateur Bénévole & Vie» (Cest un des raes a pouvoir se le permettre en tout bien tout [Link], toute proposition de modification du langage est débattue par le noyau et soumise & la communauté Python, mais la prise en compte de celle-ci dans le langage reste la préro- ative de Guido, qui conserve le dernier mot (d’ou ses qualificatifs, gentil eta 'écoute... mais dictateur tout de méme, ces modifications n’étant pas soumises & un vote majorite). Python en est aujourd'hui a sa troisiéme version, que nous vous présentons par la suite, étant donné que Django a enfin fait le grand saut (pendant trés longtemps, il en est resté a la deuxiéme version), Néanmoins, la présentation que nous en faisons ne devrait pas souffrir d'adaptations conséquentes si, pour des raisons de nostalgie difficilement compréhensibles, vous préfériez rester aux anciennes versions. Qualité: la simplicité En tant que langage de programmation, Python présente énormément de qualités liges pour essentiel a sa facilité d’accés, de téléchargement et de mise en ceuvre, a la clarté de sa syntaxe, a son cbté «open source», au fait qu'il soit interprété plutot que compilE puis exécuté, permettant de voir directement les résultats des instructions saf- ficher sans étape préalable de compilation. Python a visé dés son origine une grande simplicité d'écriture, tout en conservant tous les mécanismes de programmation objet2018 Eyrol ght € co Défaut: la simplicité Bases du langage Python Ea CHapre 3 de haut niveau, I cherche & soulager au maximum le programmeur des problémes syntaxiques non essentiels aux fonctionnalités clés du programme. Les informaticiens disent souvent de lui qu'il constitue un excellent langage de prototypage, a remplacer par un langage plus «solide », plus «robuste» (Java, .Net ou C++) lorsqu’on arrive aux termes de application. Autre avantage certain: tout ce qui est nécessaire & lutilisa tion du langage et & sa compréhension se trouve réuni sur un site unique. Curruke Communauté: un site unique La communauté Python reste tres structurée, autour d'un seul site web. > [Link] est un atout considérable, surtout los de lapprentissage et de la découverte du langage: toutes les sources restent accessible et disponibles, Monsieur Tout-le-Monde peut participer 8 Iévolution du pro- duit, mais la prise en charge officielle des évolutions reste sous la responsabilité d'un seul. A quelques subtilités prés, Python est dans le prolongement de I'aventure « open source», dont le représentant le plus embiématique reste Linux. Il pourrait devenir le langage de programmation phare de Fopen source, ‘out comme Linux est celui du systéme d' exploitation. I semble que les éditeurs informatiques, aussi bien Oracle que Microsoft aent décidé d’évoluer pour leur propre bébé, vers ce méme modéle de dévelop- ppement. Java est en effet devenu open source, et le projet Mono poursuit donc aventure Net en open source, Pour un retour aux sources du logiciel libre et de open source: 2 Richard Stallman et la révolution du logiciel libre - Une biographie autorsée, Eyrolles 2010 Par sa simplicité d'usage, Python stimpose assez naturellement lorsqu’on démarre la programmation. De nombreuses universités le préférent aujourd'hui & Java et C++. Sa popularité n’a cessé de croitre et de nombreuses solutions logicielles dans le monde Linux ou Microsoft y ont recours. Cuurure ‘ou vient le nom «Python»? Python ne doit rien au reptile. se réfere aux humorstes anglais que sont les Monty Python, lesquels ont révolutionné dans les années 1970 et 1980 & la fois humour et la télévision; d’ol la nécessité de les remplacer par un jumeau ouvert sur le Web et fa programmation ! Revers de la médaille, a simplicité de sa syntaxe se retourne contre Python; Pabsence de typage explicite et de compilation devient un défaut. Pour les critiques, il est dif ficile d'aborder des projets complexes dans un idiome aussi primitif, Peut-on écrire Hamlet en espéranto? C’est le Python qui se mord la queue! Tout langage de programmation est toujours a la recherche d’un Graal au carrefour de la simplicité usage et d’écriture, de Vefficience machine et de la robustesse. Au vu du nombre et de la diversité des programmeurs, on peut douter quil soit possible de le trouver un jour. Il est plutdt difficile de rationaliser ses préférences, et il en vaEa Apprendre la programmation web avec Python et Django — presque! —des guerres de langages comme de celles de religions. Nous ne nous posi~ tionnerons pas dans ce débat, Python nous étant de toute fagon imposé par Django, comme Java est imposé par la technologie JSP. Ex peanique Simplicité ou puissance? Python est trés souvent plébiscité pour la simplicité de son fonctionnement, ce qu en fait un langage de choix pour I'apprentissage et enseignement du code. La programmation est, de fait, trés interactive. Vous ‘tapez 1+1 8 'écran et 2 apparait comme par magi. On ative au résultatescompté par des écritures plus ‘simples et plus intuitives, donc plus rapidement. Nous restons pourtant un peu sceptiques quant a lextension de cette méme simplicté& la toalité de la syntaxe. Python est un langage puissant, car il est & la fois orienté objet et procédural, Pour I'essentie, iT r’arien& envier& des langages comme Java ou C++ et exige donc de maftrser, comme pour ceux ‘toutes les bases logiques de la programmation afin de parvenir & des codes dune certaine sophisticatio Ce langage de programmation veut préserver la simplicité qu caractérise les langages de script interpré- ‘és plutat que compilés: + exécutions traduites dans un bytecode intermédiaire et s'exécutant au fur et & mesure qu‘elles sont rencontrées; + disponible pour toutes les plates-formes; *+ pas de typage statique; * structures de données trés simples d'emploi lists, cictionnaires et chaines de caractéres). I souhite en outre préserver toutes les fonctionnalités qui caractérisent les langages puissants (orienté ‘objet, ramasse-miettes, héritage multiple t bibiotheques d'utlitaies tes fournies, comme nous le ver rors dans les chapitrs qui suivent). Une telle hybridation, pour autant qu'elle soit réusse, en ferait un Fangage de tout premier choix pour le prototypage de projet, quite & revenir parla suite & des langages plus robustes pour la phase finale du projet (comme C++ et Java, avec lesquels d'ailleurs, Python se ‘couple parfaitement: il peut hériter ou spécialiser des classes Java ou C++). Les bases: variables et mémoire centrale Déclaration et Pendant execution d'un programme, les données que ce dernier manipule sont stockées en mémoire centrale. Les variables permettent de manipuler ces données é sans avoir a se préoccuper de l'adresse explicite qu’elles occuperont effectivement en mémoire. Pour cela, il suffit de leur choisir un nom, Bien entendu, cela n'est possible que parce quill existe un programme de traduction du programme (V‘interpréteur) qui, 4 insu du programmeur mais pour son plus grand confort, soccupe d'attribuer tune adresse & chaque variable et de superviser tous les éventuels futurs changements adresse. 2018 EyCopyright © 2018 Eyrolles. Bases du langage Python Scone Etant donné la liberté autorisée dans le choix du nom des variables, il est préférable, pour de simples raisons mnémotechniques mais également pour améliorer la lisibilité des programmes, de choisir des noms de variables en fonction de ce qu'elles repré- sentent réellement. Préférerez des dénominations parlantes telles que color, size ou priceax,y ouz, En Python, la simple déclaration d'une variable ne suffit pas a la créer. Aprés avoir choisi son nom, il est nécessaire de lui affecter une valeur initiale. Exemte 3.1 Déclaration et isation de variables ‘my_number=5 pi=3.14159 smal _sentence= "Quoi de neuf 7” Type des variables Comme le montre exemple précédent, différents types d'information (nombres, chaines de caractéres...) peuvent étre placés dans une variable, ct il est capital de connaitre comment la valeur qui s'y trouve a été codée. Cette distinction correspond 4 la notion de éype, fondamentale en informatique, puisqu’elle débouche in fine sur le codage binaire de la variable (un entier numérique sur 32 bits et un caractére sur 16 bits, par exemple), ainsi que sur les usages qui peuvent en étre faits (on ne peut pas multiplier un caraetére par un nombre). On aura ainsi: + une variable recevant une valeur numérique entire, du type int ; * une variable recevant un réel, du type float ; * une variable recevant au moins un caractére, du type string. Il sagit 18 des trois types dits simples, qui nous occuperont pour T'essentiel dans la suite,Ea Apprendre la programmation web avec Python et Django Modification et transtypage des variables Linstruction d’affectation réalise done la création et la mémorisation de la variable, Yattribution d'un type a la variable, la création et la mémorisation d'une valeur et, finalement, l’établissement d’un lien entre le nom de la variable et Yemplacement mémoire. C’est ainsi qu’on a les deux instructions suivantes. ExeMPLe 3.2 Modifier une variable my_variable = 5 my_variable = 2.567 Ces deux instructions modifient simplement le contenu de la «boite aux lettres» [Link]. A la premiére ligne, on indique qu’a adresse ny_variable est stockée la valeur 5 et, Ja seconde, on remplace cette valeur par 2.567. Aprés exécution des deux lignes, la valeur sauvegardée en mémoire a adresse ny_variable est done 2.567. Notons au passage que le type de ny_variable a changé: il est passé de int A Float. Cette speécificité est une facilité essentielle de plus permise par le langage Python. A la difference autres langages de programmation plus contraignants, Python est dit ¢ypé dynamiquement et non statiquement. Dénwion Typage dynamique et typage statique ‘Avec le typage dynamique il n'est plus nécessaire de préciser & avance le type des informations exploi- ‘tées dans le programme, celui-ci devenant «implicite». Python devine le type par la valeur que nous installons dans la « borte aux lettres » ~ et ce type peut changer auf des valeuts que la boite va contenit Le choix entre typages statique et dynamique fait partie de ces controverses qui ont amusé, cstrait et iméme déchiré la communauté informatique depuis la nuit ds temps (les années 1960, en informatique). Copie de variables ‘Nous pouvons également prendre le contenu de ay_variable et le copier dans your. variable par une simple instruction. SYNTAXE | your_variable=my_variable Le contenu de ny_variable reste inchangé, car il s'agit d’un recopiage de valeur et non dun transport physique a proprement parler (ici la métaphore de Ta boite aux lettres montre ses limites). En fait, l'information est dupliquée d’un lieu de la mémoire vers un autre co