Résumé

Enfin un ouvrage pour étudiants détaillant tous les principes de la programmation web moderne, avec l’un des frameworks de développement web les plus ambitieux : Django, basé sur le langage Python !

Un manuel autonome reprenant tous les fondements de la programmation web, au fil d’une étude de cas inspirée de Facebook

Abondamment illustré d’exemples inspirés de Facebook et rappelant les 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 utiliser. Complet et autonome, il pose solidement les fondamentaux de la conception web, avec ou sans framework : HTML5/CSS3, 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 ne faut 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. L’annexe complète le manuel par une description pas à pas de l’installation de l’environnement de développement, tant sous Windows et Mac OS X que sous GNU/Linux : Python, Django, Eclipse, PyDev et les Web Developer Tools.

À qui s'adresse ce livre ?

• Étudiants en informatique (IUT, écoles d’ingénieurs) et leurs enseignants ;

• Développeurs web (PHP, Java, etc.) qui souhaitent passer à Python & Django ;

• Développeurs C, C++ qui souhaitent une introduction systématique à la programmation web.

Au sommaire

Fonctionnement d’un site web • HTTP et notion de serveur web • Statique versus dynamique • Passer des paramètres à une page • Programmation orientée objet et framework MVC • Modularité, simplicité et réutilisabilité • Travail d’équipe • Cas d’utilisation (use cases) • Séparation modèle-vue-contrôleur • Le langage Python • Déclaration et initialisation des variables • Types et transtypage • Copie de variables • Opérations sur les types simples int, float et string • Listes et dictionnaires • Instructions conditionnelles et boucles while • Fonctions • Variables locales et globales • Classes et objets • Variables de classe (attributs statiques) et d’instance • Héritage et polymorphisme • Accès aux bibliothèques Python avec import et from • Structurer les pages avec HTML5 • Encodage • Balises et éléments HTML : en-têtes, pieds de page et sections, liens hypertextes, listes, images, mise en évidence du texte, formulaires, etc. • Mettre en forme avec les feuilles de styles CSS • Propriétés CSS et principes de sélection d’éléments (sélecteurs) • Dimension et imbrication des éléments • Positionnement par défaut • Sortir des éléments du flux • Dynamiser les pages à la volée avec JavaScript • Événements • DHTML, jQuery et frameworks JavaScript • Une étude de cas inspirée de Facebook • Cas d’utilisation et maquette du site (wireframes) • Modèle de données et rappel sur les bases relationnelles • Clés primaires et étrangères • Relation 1-n, 1-1 et n-n• Correspondance relationnel/objet (ORM) • Diagramme de classes • Premier contact avec les bases relationnelles SQL • Un exemple en CGI : ce qu’il ne faut plus faire • Les vues Django : orchestration et architecture • Configurer Django pour écrire du XHTML 5 • Les templates Django : séparation et réutilisation des rendus HTML • Langage des templates • Variables, sauts conditionnels et boucles, héritage et réutilisation de templates • Les formulaires Django • L’objet request • Formulaire de login • Gestion du message d’erreur • La bibliothèque forms de Django • Valider l’adresse et le mot de passe • Les modèles Django • Créer la base de données et le compte administrateur • Regénérer la base • Configurer l’interface d’administration de la base de données • Générer des formulaires à partir de modèles (ModelForms) • Comprendre et utiliser les sessions • Manier une variable de session • Authentification • Cookie versus session • Protéger des pages privées • Des sites encore plus dynamiques grâce à Ajax • Annexe : installer l’environnement de développement sous Linux, Mac OS X et Windows • Python, Django, Eclipse, PyDev et les Web Developer Tools.

Sur le site www.editions-eyrolles.com

Le code source de l’étude de cas est disponible sur le site d’accompagnement du livre.

Biographie auteur

Hugues Bersini et Pierre Alexis

Membre de l’Académie Royale de Belgique, Hugues Bersini enseigne l’informatique et la programmation aux facultés polytechnique et Solvay de l’Université Libre de Bruxelles, dont il dirige le laboratoire d’Intelligence Artificielle. Il est l’auteur de très nombreuses publications (systèmes complexes, génie logiciel, sciences cognitives et bioinformatique).

Pierre Alexis est titulaire d’une licence en informatique et travaille au service informatique de la plus grande banque privée belge. Intéressé depuis toujours par l’enseignement et la vulgarisation informatique, il assiste Hugues Bersini à l’Université libre de Bruxelles et dispense un cours de Django/Python à destination d’étudiants en ingénierie commerciale.

www.editions-eyrolles.com

Pierre Alexis et Hugues Bersini

Apprendre

la programmation web

avec

Python

et Django

Principes et bonnes pratiques
pour les sites web dynamiques

ÉDITIONS EYROLLES
61, bd Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com

Remerciements à Anne Bougnoux et Thomas Petillon
pour leurs relectures et contributions

Attention : la version originale de cet ebook est en couleur, lire ce livre numérique sur un support de lecture noir et blanc peut en réduire la pertinence et la compréhension.

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 l’Éditeur ou du Centre Français d’exploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris.
© Groupe Eyrolles, 2012, ISBN : 978-2-212-13499-5

DANS LA COLLECTION NOIRE

P. CEGIELSKI. – Conception de systèmes d’exploitation. Le cas Linux.

N°G11479, 2e édition, 2004, 680 pages.

J. ENGELS. HTML5 ET CSS3. Cours et exercices corrigés.

N°13400, 2012, 550 pages.

G. SWINNEN. Apprendre à programmer avec Python 3.

N°13434, 3e édition, 2012, 435 pages.

H. BERSINI. La programmation orientée objet. Cours et exercices en UML 2 avec Java 6, C# 4, C++, Python, PHP 5 et LinQ.

N°12806, 5e édition, 2011, 644 pages.

É. SARRION. – jQuery et jQuery UI.

N°12892, 2011, 132 pages.

A. BRILLANT. XML - Cours et exercices.

N°12691, 2e édition, 2010, 336 pages.

CHEZ LE MÊME ÉDITEUR

Développer soi-même son site web avec HTML, CSS, PHP, JavaScript

R. RIMELÉ. – HTML5.

N°12982, 2011, 600 pages.

F. DRAILLARD. – Premiers pas en CSS et HTML.

N°13338, 2011, 464 pages.

R. GOETTER. – CSS avancées. Vers HTML5 et CSS3.

N°13405, 2e édition, 2012, 385 pages.

R. GOETTER. – CSS 2 : pratique du design web.

N°12461, 3e édition, 2009, 340 pages.

R. RIMELÉ. – Mémento HTML5.

N°13420, 2012, 14 pages.

R. GOETTER. – Mémento CSS 3.

N°13281, 2011, 14 pages.

É. DASPET et C. PIERRE DE GEYER. PHP 5 avancé.

N°13435, 6e édition, 2012, 870 pages.

C. PORTENEUVE. – Bien développer pour le Web 2.0.

N°12391, 2e édition, 2008, 674 pages.

Développer pour le Web mobile

F. DAOUST, D. HAZAËL-MASSIEUX. – Bonnes pratiques pour le Web mobile. Conception et développement.

N°12828, 2011, 300 pages.

T. BAILLET. Créer son thème WordPress mobile en HTML5 et CSS3.

N°13441, 2012, 128 pages.

É. SARRION. – XHTML/CSS et JavaScript pour le Web mobile. Développement iPhone et Android avec et iUI et XUI.

N°12775, 2010, 274 pages.

É. SARRION. – jQuery Mobile.

N°13388, 2012, 601 pages.

Ressources autour du Web : design, ergonomie, bonnes pratiques

A. BOUCHER. – Ergonomie web. Pour des sites web efficaces.

N°13215, 3e édition, 2011, 380 pages.

A. BOUCHER. – Ergonomie web illustrée. 60 sites à la loupe.

...

Avant-propos

Cet ouvrage se base sur Django, un outil de création de sites dynamiques écrit en Python, langage aujourd’hui très populaire pour apprendre à programmer. Ce livre enseigne la programmation web de façon aussi moderne que possible et s’adresse aussi bien aux enseignants qu’à leurs élèves. Il vous demande peu de pré-requis, mais reste ambitieux, de sorte que vous n’aurez pas à rougir devant les professionnels.

SOMMAIRE

images Résumer l’ambition de ce livre

images Resituer Django et Python dans l’évolution des technologies logicielles

images À qui s’adresse ce livre

images Plan de l’ouvrage

CULTURE Du Web préhistorique au Web 2.0 moderne et « dynamique »

Il y a vingt ans, on déambulait entre les pages du Web comme entre deux tableaux de maître dans un musée ; seule différence, on était assis face à son écran, souris à la main. Au fil des clics, les sites web s’affichaient : ils étaient déjà jolis et colorés, riches en information et éminemment utiles… mais inaltérables et rétifs à toute autre forme d’interférence que ce vagabondage de page en page.

Il était impossible pour l’internaute d’y écrire son numéro de carte de crédit pour acquérir une toile, de réserver sa place pour une visite du musée, de s’enregistrer comme utilisateur du site et d’é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 était inchangé. Tout était placidement statique ; en un mot, le Web fonctionnait pour l’essentiel dans une seule direction : des serveurs d’information vers les clients. Les utilisateurs étaient à la merci de ce que les développeurs côté serveur avaient choisi de leur dévoiler. Le serveur ne percevait que le clic d’entrée dans le site et se bornait à renvoyer en retour la page sollicitée ; il était sourd et indifférent à toute autre requête. Le Web d’alors, certes impressionnant et révolutionnaire, était statique.

James Gosling, le concepteur du langage de programmation Java (dont le succès devra beaucoup au Web), présenta en 1995 un nouveau concept de navigateur lors d’une conférence consacrée au Web. Il fit d’abord apparaître la représentation en 2D d’une molécule dans un navigateur web classique, laissant l’assistance de marbre. Quels ne furent la surprise et l’enthousiasme de ce même public lorsqu’à l’aide de sa souris, il se mit à bouger la molécule ! Elle réagissait aux stimuli de la souris, obéissait aux injonctions...

PREMIÈRE PARTIE

Les notions essentielles

Cette première 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 ;

• éléments de base du langage de programmation Python ;

• structuration des pages web avec HTML5, présentation avec les feuilles de styles CSS, interactivité côté client avec JavaScript ;

• élaboration du modèle de données : cas d’utilisation (use cases), schémas de présentation (wireframes), bases de données relationnelles ;

• éléments de base du langage d’interrogation de bases de données SQL, utilisation par le biais de l’ancienne technologie CGI, discussion des limitations de cette dernière.

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, l’exploitation 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 HTTP, de serveur web et le passage de paramètres du client vers le serveur.

SOMMAIRE

images Petite histoire du Web

images Du Web statique au Web dynamique

images URL, protocole HTTP et serveur web

images Passage de paramËtres vers le serveur

Qu’est-ce que le Web ?

C’est dans les années 1980, alors qu’il effectue un séjour de six mois comme consultant informatique au CERN (le laboratoire européen de physique des particules), que Tim Berners-Lee développe un programme appelé « Enquire ». À l’aide d’un langage adéquat, ce dernier organise le contenu et la visualisation des documents produits par le laboratoire et, grâce à la technologie hypertexte, permet également à ces pages d’en référer d’autres. Le Web, abréviation du World Wide Web (en français la toile [d’araignée] mondiale) était né. Quelque vingt ans plus tard, la reine Elisabeth 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 documents, leur consultation via un navigateur web (par exemple Safari, Google Chrome, Firefox ou Internet Explorer.) et leur interconnexion à l’aide de liens. Trois technologies ont été inventées, ou du moins formalisées et adaptées par Tim Berners-Lee et sont à l’origine du Web :

• le concept de page web, au centre de tout, les pages renfermant le contenu textuel que l’on désire publier ;

• le concept de liens hypertextes, lesquels relient des pages web par l’insertion dans une page de liens vers d’autres. Pour mettre en œuvre ce concept, il a fallu imaginer un mécanisme d’adressage identifiant de manière unique chaque page web : c’est l’URL (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 s’agit du protocole HTTP (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....

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 exposons d’abord les principes de la programmation orientée objet. Ensuite, nous verrons comment la mise à disposition d’un framework s’inscrit dans cette logique.

SOMMAIRE

images Explication de la conception respectant le découpage MVC

images Mise en place du MVC sous Django

images Explication de la notion de framework

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 d’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 d’en simplifier considérablement l’écriture, à condition que les différents modules offrent des contenus fonctionnels relativement indépendants les uns des autres et que la modification de l’un n’entraîne pas systématiquement la réécriture des autres.

Des modules réutilisables

S’ensuit assez logiquement le bénéfice de la réutilisabilité. En effet, si les modules sont relativement indépendants les uns des autres, on conçoit aisément qu’ils puissent être réutilisés dans de multiples et successives applications logicielles. Ainsi, une partie de logiciel chargée d’inscrire un internaute sur un site web quelconque peut se réutiliser d’un site à l’autre. Il en va de même pour toute forme de transaction financière ou tout paiement par carte de crédit : cela fonctionne toujours de la même façon, que vous achetiez un livre de programmation Python ou un billet pour Hawaï. 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.

Un travail d’équipe facilité et plus efficace

Le travail en équipe s’en trouve facilité puisqu’il devient naturel de diviser et répartir les tâches entre les différents spécialistes. Comme tout...

3

Rappels sur le langage Python

Ce chapitre a pour mission de présenter le langage de programmation Python, sur lequel repose le projet Django. Les règles syntaxiques brièvement décrites ici devraient vous suffire pour comprendre les différentes applications de Django que nous verrons par la suite, ainsi que pour maîtriser les aspects « contrôle » de votre projet.

SOMMAIRE

images Introduction au langage de programmation Python

images Les aspects procéduraux du langage

images Python et l’orienté objet

Qualités et défauts de Python

Il n’est pas question dans ce chapitre de faire de vous, lecteurs, des experts en programmation Python : le but est de vous permettre de comprendre tous les développements et utilisations de Django qui vont suivre. Le B.A.-BA de la programmation, c’est-à-dire les variables, les typages de base, les instructions d’affectation et de contrôle, le découpage des programmes par l’utilisation de fonctions et une rapide introduction aux aspects orientés objet devrait suffire.

CULTURE Python et son papa, Guido Van Rossum

Guido Van Rossum, inventeur et « superviseur » du langage Python, est hollandais d’origine, détenteur de maîtrises en mathématiques et en informatique de l’université libre d’Amsterdam. Il fait partie, à la fin des années 1980, d’un groupe de développeurs dont le but est de mettre au point un langage de programmation abordable par des non-experts, d’où son nom : « ABC ». Dès 1991, il s’attaque à Python, écrit en C et exécutable sur toutes les plates-formes. Guido Van Rossum travaille alors au CWI (Centrum voor Wiskunde en Informatica). En 1995, il prend la direction des États-Unis et travaille pour le CNRI (Corporation for National Research Initiatives) jusqu’en 2000. À cette époque, il publie Computer Programming for Everybody, sa profession de foi pour l’enseignement de la programmation. C’est également à cette période qu’il est nommé directeur des Python Labs de Zope Corporation, qui comprennent aujourd’hui une demi-douzaine de développeurs.

Depuis 2005, il travaille pour Google, qui semble investir beaucoup dans le langage Python. Guido y divise son temps de travail entre le projet Open Source Python et les développements de Google utilisant ce langage. Il se targue de porter le titre très ambigu de Dictateur Bénévole à Vie. Ainsi, 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érogative de Guido, qui conserve le dernier mot (d’où son titre : gentil et à l’écoute… mais dictateur tout de même, ces modifications n’étant pas soumises à un vote majoritaire).

Python en est aujourd’hui à sa troisième version, mais nous abordons ici la version 2.7, la seule que Django prenne en charge à ce jour. Néanmoins, la présentation que nous en faisons ne devrait pas souffrir de l’éventuelle migration que vous seriez amenés à faire lorsque Django s’adaptera aux nouvelles versions de Python.

Qualité : la simplicité

En tant que langage de programmation, Python présente énormément de qualités liées pour l’essentiel à sa facilité d’accès, de téléchargement et de mise en œuvre, à la clarté de sa syntaxe, à son côté « open source », au fait qu’il soit interprété plutôt que compilé puis exécuté, rendant possible de voir directement les résultats des instructions s’afficher 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 de haut niveau. Il cherche à soulager au maximum le programmeur de problèmes syntaxiques non essentiels aux fonctionnalités clés du programme. Les informaticiens disent souvent de lui qu’il est un excellent langage de prototypage, à remplacer par un langage plus « solide », plus « robuste » (Java, .Net ou C++) lorsqu’on arrive aux termes de l’application. Autre avantage certain, tout ce qui est nécessaire à l’utilisation du langage et à sa compréhension se trouve réuni sur un site unique.

CULTURE Communauté : un site unique

La communauté Python reste très structurée autour d’un seul site web.

imageshttp://www.python.org

C’est un atout considérable, surtout lors de l’apprentissage et de la découverte du langage : toutes les sources restent accessibles et disponibles. Monsieur-tout-le-monde peut participer à l’évolution du produit, mais la prise en charge officielle des évolutions reste sous la responsabilité d‘un seul. À quelques subtilités près, Python est dans le prolongement de l’aventure Open Source, dont le représentant le plus emblématique reste Linux. Il pourrait devenir le langage de programmation phare de l’Open Source, tout comme Linux est celui du système d’exploitation. Il semble que les éditeurs informatiques, tant Sun que Microsoft, aient décidé d’évoluer pour leur propre bébé, vers ce même modèle de développement. Java est en effet devenu Open Source et le projet Mono poursuit en Open Source l’aventure .Net.

Pour un retour aux sources du logiciel libre et de l’open source :

imagesRichard Stallman et la révolution du logiciel libre - Une biographie autorisée, Eyrolles 2010

Par sa simplicité d’usage, Python s’impose 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 croître et de nombreuses solutions logicielles dans le monde Linux ou Microsoft y ont recours. Un Python.Net est même sur le point d’éclore.

CULTURE D’où vient le nom « Python » ?

Python ne doit...

4

Rappels sur HTML5, CSS et JavaScript

Ce chapitre va s’intéresser aux langages de présentation des pages web, HTML5 et CSS, ainsi qu’à la manière de rendre les pages plus interactives et plus dynamiques côté client, par l’utilisation du JavaScript. Ces trois technologies sont devenues incontournables, quelle que soit la plate-forme de développement web choisie.

SOMMAIRE

images Synthèse rapide des technologies HTML5, CSS et JavaScript

images HTML5, CSS, JavaScript : pièces maîtresses du Web communes à tous les environnements de développement web

L’objectif de ce chapitre est de présenter brièvement HTML, CSS et JavaScript, pas d’en étudier tous les aspects. Le but est de vous donner les bases élémentaires pour réaliser vos premiers sites. Si le besoin s’en fait sentir, n’hésitez pas à approfondir ces trois sujets par le biais d’autres livres ou sources d’informations. De nombreux ouvrages abordent ces technologies à différents degrés de profondeur.

À LIRE HTML, CSS et JavaScript

images Jean Engels, HTML5 et CSS3, Eyrolles, 2012

images Rodolphe Rimelé, HTML5, Eyrolles, 2011

images Raphaël Goetter, CSS avancées, Eyrolles, 2012

images Christophe Porteneuve, Bien développer pour le Web 2.0, Eyrolles, 2008

images Thierry Templier et Arnaud Gougeon, JavaScript pour le Web 2.0, Eyrolles, 2007 (ebook)

Créer un site web, qu’il soit statique ou dynamique, c’est avant tout créer des pages web. Ces dernières contiennent l’information que l’on désire partager et afficher. Dans ce chapitre, nous allons étudier les langages et technologies qui permettent de les construire.

Le premier de ces langages est HTML (HyperText Markup Language) ; il décrit le contenu et la structure d’une page web. Nous nous intéresserons ensuite aux CSS (Cascaded Style Sheets), qui décrivent l’aspect d’une page web (couleurs, polices, position des éléments, etc.). Nous terminerons par un aperçu de JavaScript, qui ajoute de l’interactivité et du dynamisme aux pages web.

On retrouve à un autre niveau la fameuse trinité modèle-contrôle-apparence évoquée au chapitre 2. Ici, c’est HTML qui s’occupe du modèle et de l’information à présenter, les CSS de l’aspect et JavaScript du contrôle. La recette gagnante est de séparer au mieux ces trois aspects du site web, de les confier à des spécialistes différents et de jouer au mieux la division du travail.

Ces trois langages sont exécutés et interprétés côté client par le navigateur web, a contrario de Python ou Java qui sont des langages exécutés côté serveur. Reprenons le schéma vu au chapitre 1 pour mieux comprendre cette distinction.

Sur ce schéma, un internaute désire consulter le site de Reuters. Le serveur web de Reuters est contacté par le navigateur de l’internaute. Java (il pourrait s’agir de Python, ASP.Net ou PHP) entre alors en action pour créer la page à renvoyer ; plus précisément, Java écrit le code HTML (accompagné de ses CSS et JavaScript) à renvoyer au navigateur. Le code Java est donc exécuté côté serveur. Lorsque la page web parvient au navigateur, ce dernier en interprète le HTML, les CSS et le JavaScript, afin d’en construire son rendu graphique et de l’afficher à l’écran. Ces trois langages sont donc exécutés côté client par le navigateur.

Figure 4–1 Création d’une page dynamique

EN PRATIQUE Partage du travail sur le Web

Le développement web exige de répartir les rôles entre ce qui doit s’exécuter côté serveur et ce qui doit s’exécuter côté client. Ainsi, l’accès à la base de données s’exécute côté serveur alors que la saisie d’un formulaire s’exécute côté client.

Il n’est donc pas nécessaire d’avoir un serveur web pour construire une page web et visualiser son rendu : on peut très bien composer la page à l’aide d’un éditeur HTML et la visualiser avec un navigateur, sans passer par un serveur web. C’est ce nous ferons tout au long de ce chapitre pour tester nos pages HTML, CSS et JavaScript. Laissons notre serveur se reposer un peu, nous ne tarderons pas à le solliciter de nouveau.

Structurer les pages web avec HTML5

Nous l’avons évoqué au chapitre 1, HTML constitue l’un des trois fondements du Web. Ce langage imaginé par Tim Berners-Lee sert à construire des pages et à les lier entre elles par des liens hypertextes.

HTML est un sigle qui signifie HyperText Markup Language (et non « Hyper Trop Moche Langage » comme les mauvais esprits le pensent). Que signifie exactement ce sigle ?

• Language : HTML est effectivement un langage (vous le saviez déjà !). Il obéit à des règles d’écriture et à une sémantique bien précises. Des erreurs de syntaxe sont aisément détectables.

• Markup : la traduction française est « balise ». Ce langage est construit à l’aide de balises (qu’on retrouve parfois sous les yeux des webmestres qui travaillent tard dans la nuit). Nous reviendrons abondamment sur cette notion par la suite.

• HyperText : la navigation dans le site se fait interactive par l’insertion dans chaque page de liens vers d’autres pages : les liens hypertextes.

CULTURE HTML, plus de vingt ans déjà

HTML est un langage relativement ancien (inventé à la fin des années 1980) et a beaucoup évolué au fil de ses versions successives. Les premières années, il évolua sous l’impulsion des développeurs de navigateurs. Par conséquent, aucune norme réellement formelle ne s’imposait et il fallait parfois compter avec des implémentations différentes du langage d’un navigateur à l’autre. Vers le milieu des années 1990, un effort de normalisation fut accompli par la création d’un consortium, le World Wide Web Consortium (abrégé en W3C) dont la mission était, et est toujours, de normaliser les technologies du Web.

Au départ, HTML était destiné à représenter à la fois le contenu d’une page web et son aspect graphique. À partir de la quatrième version du langage, dans l’esprit de séparation des fonctionnalités, son rôle a évolué afin de se concentrer uniquement sur le contenu et la structure de la page. L’aspect graphique n’était plus du ressort de HTML, mais des CSS.

Récemment, le langage a encore subi une évolution majeure par l’introduction d’une cinquième version. Elle standardise de nombreuses nouvelles fonctionnalités, comme l’ajout de vidéos ou de sons dans une page. Nous étudierons cette version, même si elle est toujours en cours de développement et de normalisation, car ses bases sont déjà largement stabilisées. HTML5 est de plus en plus utilisé par les développeurs, que ce soit pour les sites web ou pour les applications mobiles.

Depuis sa version 4, HTML propose deux standards de syntaxe : la syntaxe d’origine basée sur SGML, et le XHTML basé sur...

5

Mise en application : un site web inspiré de Facebook

Ce chapitre présente le projet de développement qui servira de base pour tous les autres chapitres : Trombinoscoop. Tout projet web démarre par la rédaction de ses cas d’utilisation (use cases) et la conception de ses wireframes, et d’une base de données relationnelle côté serveur. Quelques rappels théoriques sur le modèle relationnel se révèlent indispensables. Django exige que le modèle de données soit réalisé via un diagramme de classes, donc dans une perspective purement orientée objet. Par conséquent, quelques lignes sont consacrées à l’épineux problème de la mise en correspondance entre le modèle relationnel et le modèle objet.

SOMMAIRE

images Trombinoscoop : le projet auquel ce livre va se consacrer

images Cas d’utilisation et maquettage (wireframes)

images Rappels théoriques sur les bases de données relationnelles et différence avec la modélisation orientée objet

images Diagramme de classes de Trombinoscoop

Ce chapitre décrit le projet de site web que nous réaliserons à partir de Django. Son développement sera exposé sous forme de tutoriel qui servira de fil conducteur à l’apprentissage du framework Django. Il sera construit progressivement, à mesure que de nouvelles notions seront introduites. Il permettra de comprendre par la pratique et concrètement chaque aspect du framework.

Comme pour tout projet de développement informatique, nous allons également passer par une phase préalable d’analyse. Décrire brièvement les fonctionnalités que l’on désire voir sur le site web ne suffit pas. Avant d’écrire la moindre ligne de code, il est important de se poser un instant, prendre un peu de recul, réfléchir à ce que l’on va réellement développer et à certains éléments de structure du code.

C’est pourquoi ce chapitre se propose également de vous exposer brièvement quelques méthodes d’analyse. Rassurez-vous, cet exposé sera plus que sommaire, à mille lieues de la complexité que l’on trouve parfois dans certains projets réels. Nous allons nous limiter à décrire et exploiter au plus pressé trois éléments d’analyse :

• Les use cases du site web (ou en français « cas d’utilisation ») entrevus dans le chapitre deux. Ils décrivent sommairement les fonctionnalités principales du site et délimitent l’étendue du projet. À quoi va bien pouvoir servir ce site ?

• Les wireframes du site web, plus en rapport avec la conception graphique. En d’autres mots, on va décrire les différents écrans du site web et leur enchaînement (« lorsque je clique sur tel bouton, j’arrive sur tel écran »).

• Le modèle objet de la base de données. Il est en effet déjà utile à ce stade de réfléchir sur les données que l’on voudra sauvegarder et traiter dans notre site web.

Les use cases, les wireframes et le modèle objet ne doivent pas être figés : ils peuvent être modifiés et évoluer au gré des développements.

Notre site web : Trombinoscoop

Notre projet trouve ses origines (fictives) à l’Université libre de Bruxelles, qui avait lancé il y a quelques années un carnet d’adresses électronique. Ce carnet reprenait les coordonnées de l’ensemble de la communauté universitaire et permettait d’y effectuer des recherches.

En découvrant ce carnet web un peu statique, Marc Van Saltberg, étudiant en informatique de l’Université, eut une idée géniale pour le rendre plus personnel et plus vivant : pourquoi ne pas créer un site web où chaque personne gèrerait elle-même son profil, pourrait indiquer quels sont ses amis et publier des messages (à destination de tous ou uniquement de ses amis).

Une fois développé, le site de Marc connut un tel succès qu’il décida de le rendre disponible à d’autres universités, puis également au monde non universitaire. On connaît la suite de cette fameuse histoire belge : le succès du site fut...

6

Premier contact avec les bases relationnelles et SQL à partir d’un exemple en CGI

Le site web doit pouvoir interroger et modifier la base relationnelle où sont stockées toutes les données du modèle. 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 cachées par le framework Django, seront exposées dans un contexte web réalisé en CGI. Cette technologie n’est plus de mise aujourd’hui pour le développement web côté serveur, mais à titre pédagogique, ce chapitre nous permettra de l’évoquer comme un parfait exemple d’un mélange de genres à éviter.

L’installation des outils de développement est expliquée en annexe A

SOMMAIRE

images Aperçu des requêtes SQL côté serveur

images Introduction à CGI : un condensé des mauvaises pratiques du Web

Dans le chapitre précédent, nous avons élaboré notre modèle de données et décidé de stocker les informations de notre projet dans une base de données relationnelle. Il nous faut maintenant étudier comment faire communiquer notre site avec ces bases. C’est le rôle du langage SQL (Structured Query Language).

Il y a quelques années, la mise en place de l’interactivité et de la dynamique côté serveur recourait à la technologie CGI (Common Gateway Interface). Cette technologie s’accommode de petits scripts côté serveur, écrits en langage interprété (comme Perl ou Python) ou en langage compilé (très souvent C++), qui créent sur le fil des pages HTML pour les renvoyer et les afficher côté client.

Rien ne vous interdit de continuer à la pratiquer, mais vous risquez de sérieux maux de tête ! Nous vous le déconseillons très vivement, sinon en désespoir de cause ou pour de très petits projets bien ciblés.

Malgré tout, nous vous la présentons très succinctement dans deux optiques :

• d’une part pour mettre rapidement en pratique les notions de SQL qui vous seront nécessaires pour comprendre les chapitres suivants, bien que souvent cachées par les objets de Django ;

• d’autre part pour vous montrer, à titre pédagogique, ce qu’il ne faut pas faire : un code fourre-tout dans lequel se mélangent indigestement langage de programmation, HTML et SQL.

Pour conduire notre propos, nous allons « construire » un simple carnet d’adresses web. Trois fonctionnalités seront développées : « afficher tous les employés de l’université », « les afficher par service » et « ajouter de nouveaux employés ».

EN PRATIQUE Et si on faisait le site Trombinoscoop en CGI ?

En guise d’exemple, nous pourrions développer en CGI notre projet Trombinoscoop. Ce serait de fait une tâche titanesque et un si gros projet n’est pas utile pour vous donner un aperçu de la technologie CGI. C’est pourquoi nous allons nous atteler à un projet beaucoup plus modeste : un simple carnet d’adresses électronique.

Aussi modeste soit ce carnet d’adresses, nous n’allons pas nous épargner la phase d’analyse, afin de déterminer exactement ce que l’on veut développer et d’esquisser le résultat final attendu.

Analyse du carnet d’adresses : des cas d’utilisation au modèle de données

Trois cas d’utilisation simples

Les cas d’utilisation sont très simples et découlent des trois fonctionnalités que nous avons énumérées à la section précédente.

Figure 6–1 Cas d’utilisation du carnet d’adresses

Maquette des écrans (wireframes)

Les wireframes sont également assez simples. Nous avons groupé tous les écrans et leurs liens en un seul dessin (voir figure 6-2, page suivante).

Le modèle

...

DEUXIÈME PARTIE

Mise en application avec Django

Dans cette deuxième partie, nous allons construire notre site Trombinoscoop en nous appuyant sur le framework Django. Nous détaillerons chacune des étapes d’élaboration d’un site web :

• « vues » Django (correspondant à l’aspect Contrôle du MVC) ;

• « templates » Django (correspondant à l’aspect Vue du MVC) ;

• formulaires ;

• « modèles » Django (correspondant à l’aspect Modèle du MVC) ;

• gestion des sessions ;

• suppléments en Ajax.

12

En finir avec Trombinoscoop

Finalisons notre projet de développement web en réalisant les derniers wireframes. Nous appliquerons pour cela tout ce que nous avons appris dans les précédents chapitres.

SOMMAIRE

images Finition de Trombinoscoop