Programmation Web

Programmation WebCoté serveur : HTML, CSS, PHP, Mysql

Rémy MalgouyresLIMOS UMR 6158, IUT, département info

Université Clermont 1B.P. 86

63172 AUBIERE cedexhttp ://www.malgouyres.fr/

Table des matières

1 Pages web statiques HTML5 31.1 HTML, la norme et son évolution . . . . . . . . . . . . . . . . . . . . . . . . . 31.2 Validation W3C et tests de portabilité . . . . . . . . . . . . . . . . . . . . . . 31.3 Structure d’un document HTML ou XHTML . . . . . . . . . . . . . . . . . . . 51.4 Premier document HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61.5 Mise en forme du texte en HTML : styles CSS . . . . . . . . . . . . . . . . . . 81.6 Définir le graphisme CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91.7 Les Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111.8 Liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151.9 Insertion d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2 Styles CSS et mise en page 202.1 Feuilles de style CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.2 Classes CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.3 Sélecteurs de style CSS par ID . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.4 Exemple : style CSS pour un tableau . . . . . . . . . . . . . . . . . . . . . . . 272.5 Éléments de type block et inline . . . . . . . . . . . . . . . . . . . . . . . . . . 292.6 Positionnement CSS et mise en page . . . . . . . . . . . . . . . . . . . . . . . 322.7 Arborescence de balises et CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 47

3 PHP procédural 503.1 Générer du code HTML avec PHP . . . . . . . . . . . . . . . . . . . . . . . . 503.2 Exemple de fonction en PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . 513.3 Inclure un fichier PHP dans un autre . . . . . . . . . . . . . . . . . . . . . . . 523.4 Arithmétique : types int et float . . . . . . . . . . . . . . . . . . . . . . . . 533.5 Tableaux indexés : avec une clé de type int . . . . . . . . . . . . . . . . . . . 543.6 Tableaux associatifs : avec une clé de type String . . . . . . . . . . . . . . . . 553.7 Passage de paramètre à un script PHP . . . . . . . . . . . . . . . . . . . . . . 56

4 Les classes en PHP 614.1 Exemple de classe PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624.2 Validation en entrée et gestion d’une exception . . . . . . . . . . . . . . . . . 66

5 Formulaires HTML/PHP 725.1 Formulaires HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725.2 Exemple de style CSS pour formulaire . . . . . . . . . . . . . . . . . . . . . . 755.3 Validation : Test de champs obligatoire vide . . . . . . . . . . . . . . . . . . . 78

1

TABLE DES MATIÈRES

5.4 Génération du formulaire dans une fonction . . . . . . . . . . . . . . . . . . . 805.5 Validation : Renvoi des valeurs vers l’utilisateur . . . . . . . . . . . . . . . . . 815.6 Injections et filtrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 835.7 Formulaires dynamiques an javascript . . . . . . . . . . . . . . . . . . . . . . . 87

6 Formulaires PHP : MVC, filtrage, exceptions 896.1 Le Modèle MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 896.2 La vue :Formulaire HTML de base . . . . . . . . . . . . . . . . . . . . . . . . 896.3 La vue : Classe de routines pour la génération de formulaires . . . . . . . . . . 916.4 Le contrôleur : Réception et affichage basique des données . . . . . . . . . . . 956.5 Le MVC : Filtrage des avec une classe et exceptions . . . . . . . . . . . . . . . 96

7 Bases de données : PHP/Mysql 1057.1 Créer la structure d’une base de données dans phpmyadmin . . . . . . . . . . 1057.2 Programmation PHP-Mysql . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1077.3 Approche objet et MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

8 Sessions 1208.1 Données de sessions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1208.2 Données de session complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . 1208.3 Transmettre l’identité d’un utilisateur via une session . . . . . . . . . . . . . . 123

2

Chapitre 1

Pages web statiques HTML5

1.1 HTML, la norme et son évolutionLe langage HTML, ou Hyper Text Markup Language, permet de décrire et de mettre en formedes documents variés, depuis du simple texte jusqu’à des documents multimédia riches avec ladéfinition d’HTML 5.

Une page HTML est en général destinée à être publiée sur le World Wide Web, où toutessortes de gens utilisent toutes sortes de navigateurs qui fonctionnent sous sdifférentes platte-formes (Mac OS, ipad, Linux, Androïd, MS Windows, etc. pour citer les plus courants). Pourque celà fonctionne, il a été nécessaire de définir un standard pour le langage HTML. C’estle standard du World Wide Web Consortium, ou W3C. A noter le rôle déterminant qu’a jouéla libération du code source du navigateur Netscape par la société Netscape CommunicationsCorporation pour que la pluralité des acteurs n’évitent que les standards du web soient de faitpropriétaire.

1.2 Validation W3C et tests de portabilité1.2.1 Validateur W3CLorsqu’on écrit une page web en HTML, pour être sûr que celle-ci soit correctement interprétéeet affichée par tous les navigateurs qui supportent coorectement la norme, il faut valider cettepage pour s’assurer qu’elle est conforme à la norme. Le processus est similaire à l’analyse dela syntaxe d’un programme par un compilateur et peut se faire en ligne en uploadant le fichierou en donnant son URL publique. Certains éditeurs proposent une validation interne ou mêmeà la volée.

Les scripts en PHP et autre ne sont pas directement validables car ce sont en fait desprogrammes. Par contre, leur sortie (ce qu’ils affichent) doit être du HTML conforme à lanorme.

3

Rémy Malgouyres, http ://www.malgouyres.fr/ Programmation Web

(a) L’upload d’un fichier HTML (b) Résultat correct sur le validateur W3C

Figure 1.1: Le processus de validation d’un fichier HTML sur le validateur W3C

1.2.2 Tests de portabilitéMême pour un document validé, les navigateurs n’ont pas tous la même implémentation dumoteur d’analyse et de rendu du document, notamment en ce qui concerne les styles par dé-faut. Pour cette raison, il est indispensable avant de publier un site web, de le tester sur leplus possible de plateformes et de navigateurs. Ceci peut être simplifié par des outils commeVirtualBox (mais il en existe d’autres...), qui permettent en virtualisant de faire tourner si-multanément plusieurs systèmes d’exploitation sur un même ordinateur. Par exemple, sur lafigure 1.2, on voit un exemples où l’affichage de la page est testé simultanément avec InternetExplorer et Safari sous Windows, Firefox, Chrome et Opera sous linux et Chrome sous tabletteet smartphone Android. Le système Windows tourne en virtuel dans VirtualBox (disponibledans la logitèque d’Ubuntu). et le serveur Web (Apache) est instalé en local sous Ubuntu. Lessystèmes Windows et Ubuntu sont connectés par un réseau local virtuel interne au systèmehôte, en l’hoccurence Ubuntu. Notons que les navigateurs sur smartphones sont particulière-ment capricieux car ils n’ont pas les ressources pour implémenter toutes les variantes, surtoutsur du code non validé.

4

Chapitre 1 : Pages web statiques HTML5

Figure 1.2: Le processus de test de portabilité avec VirtualBox.

1.3 Structure d’un document HTML ou XHTMLUn document HTML ou XHTML doit comporter :

1. Sur la première ligne qui ne soit pas constituée d’un commentaire : le doctype qui spécifiele type de document (HTML, XHTML et version). Ceci permet que le navigateur puissesupporter et interpréter plusieurs formats de documents.

2. Une balise de début de description de document <html [+attributs]>.

3. Un en-tête compris dans une balise <head>...</head>.

4. Dans le header, une spécification de l’encoding ou charset : ISO-8859-1, latin1, et mainte-nant systématiquement utf-8. Ce dernier est d’ailleurs le défaut utilisé lorsque l’encodingn’est pas spécifié.

5. Dans le header, de manière optionnelle, une description du style de document (couleurs,polices, tailles, etc.) au format CSS.

6. Un corps du document dans une balise <body>...</body>.

5


Par exemple, le document “Hello World !” en XHTML 1.0 strict se compose comme suit :

exemples/ChapitreHTML/ex01_helloWorldXhtml.html1 <!DOCTYPE html PUBLIC ”−//W3C//DTD␣XHTML␣ 1 .0 ␣ S t r i c t //EN”2 ” http ://www.w3 . org /TR/xhtml1/DTD/xhtml1−s t r i c t . dtd”>3 <!−− Déc lara t ion du debut d ’ un document HTML avec l a langue : −−>4 <html xml : lang=”en” lang=”en” xmlns=”http ://www.w3 . org /1999/ xhtml”>5 <head> <!−− début de l ’ en−t ê t e HTML −−>6 <!−− Déc lara t ion du type d ’ encodage −−>7 <meta http−equiv=”Content−Type” content=” text /html ; cha r s e t=utf−8”/>8 <!−− Ti t re de l a page dans l a f e n ê t r e ou l ’ o n g l e t du nav i ga t eur −−>9 <t i t l e>My f i r s t HTML document</ t i t l e>10 </head>11 <body>12 <p>Hel lo world !</p>13 </body>14 </html>

Le document “Hello World !” en HTML5 se compose comme suit :

exemples/ChapitreHTML/ex02_helloWorldHtml5.html1 <! doctype html>2 <!−− Dec lara t ion du debut d ’ un document HTML avec l a langue : −−>3 <html lang=” f r ”>4 <head>5 <meta charset=”UTF−8”/>6 <!−− Déc lara t ion du type d ’ encodage −−>7 <!−− Ti t re de l a page dans l a f e n ê t r e ou l ’ o n g l e t du nav i ga t eur −−>8 <t i t l e>My f i r s t HTML document</ t i t l e>9 </head>10 <body>11 <p>12 He l lo world !13 </p>14 </body>15 </html>

Le XHTML 1.0 strict possède une syntaxe plus stricte que ses prédécesseurs, simplifiant letravail des navigateurs et des moteurs de recherche. En particulier, toutes les balises sont enminuscules et il y a obligation de fermer les balises, quitte à mettre une balise autofermantecomme <br/>. La norme HTML5 réintroduit un certain laxisme au niveau de la syntaxe maisil est préférable pour la lisibilité du code de respecter la syntaxe XHTML 1.0 strict dans unepage HTML5.

1.4 Premier document HTML5

exemples/ChapitreHTML/ex03_corps_balises.html1 <! doctype html>2 <!−− Dec lara t ion du debut d ’ un document HTML −−>3 <html lang=” f r ”>4 <!−− Voici l ’ en−t e t e qu i d e c l a r e l e s p r o p r i e t e s g ene ra l e s de l a page −−>5 <head> <!−− debut de l ’ en−t e t e HTML −−>

6


6 <!−− d e c l a r a t i o n de l ’ encodage pour l e s accent s . . . −−>7 <meta charset=”UTF−8”/>8 <!−− Ti t re de l a page ( au s s i t i t r e de l a f e n ê t r e du nav i ga t eur ) −−>9 <t i t l e>Ma première Page HTML</ t i t l e>10 </head>11 <body> <!−− début du corps HTML −−>12 <h1>Mon premier f i c h i e r HTML</h1>13 <p> <!−− Nouveau paragraphe ( saut de l i g n e ) −−>14 Ceci e s t mon premier f i c h i e r HTML. <br/> <!−− à l a l i g n e −−>15 Le ”body” r ep r é s en t e l e corps du document ,16 dans l e qu e l on met l e t ex t e .17 </p> <!−− Fin de paragraphe −−>1819 <p>20 HTML es t un langage de d e s c r i p t i o n de documents non WISIWIG,21 c ’ e s t à d i r e que l e f i c h i e r source ne res semble pas vraiment22 au document t e l que l ’ u t i l i s a t e u r f i n a l l e ver ra .<br/>23 WISIWIG : <em>What You See I s What You Get</em>.24 </p>25 <p>26 En HTML, l e s <em>ba l i s e s</em>, qui sont encadrées par des &l t ; e t &gt ; ,27 <strong>d é f i n i s s e n t l a s t r u c tu r e du document</strong> en c a r a c t é r i s a n t

d i f f é r e n t e s28 p a r t i e s du document ( t i t r e s , paragraphes , tableaux , élément important ,29 l i s t e à puces , images , ob j e t s de type vidéo f l a sh , multimédia pour HTML5,

e t c .30 </p>31 <p>32 Par exemple , l a b a l i s e &l t ; p&gt ; &l t ; / p&gt ; d é l im i t e un33 paragraphe . Un couple de b a l i s e s avec du tex t e antre l e s b a l i s e s s ’ appe l l e

un34 <em>élément</em>.35 </p>36 </body> <!−− f i n du corps HTML −−>37 </html> <!−− f i n du code HTML −−>

7


1.5 Mise en forme du texte en HTML : styles CSS

exemples/ChapitreHTML/ex04_mise_en_forme_texte.html1 <! doctype html>2 <!−− Dec lara t ion du debut d ’ un document HTML −−>3 <html lang=” f r ”>4 <!−− Voici l ’ en−t e t e qu i d e c l a r e l e s p r o p r i e t e s g ene ra l e s de l a page −−>5 <head>6 <!−− Dec lara t ion du type d ’ encodage −−>7 <meta charset=”utf−8”/>8 <style>9 /* Dé f i n i t i o n du s t y l e */10 body {11 font−f ami ly : Ar i a l Verdana ;12 font−s i z e : 125%;13 width : 800px ;14 }15 p {16 text−a l i g n : j u s t i f y ;17 }/* mise en forme des paragraphes */18 /* mise en forme du t i t r e */19 h1 {20 text−a l i g n : c en t e r ;21 font−s i z e : 150%;22 }23 /* mise en forme élémentt important l e s 120% sont r e l a t i f au contexte */

8


24 st rong {25 font−var i an t : small−caps ;26 font−s i z e : 120%;27 }28 </ style>29 <t i t l e>Mise en forme du tex t e en HTML</ t i t l e>30 </head>31 <body>32 <!−− début du corps HTML −−>33 <h1>Mise en forme du tex t e en HTML</h1>34 <p>35 I l e x i s t e en HTML des b a l i s e s pour mettre en <i>i t a l i q u e</ i>, en <b>gras</

b>, en <code>36 t ex tw r i t e r</code>37 , e t c . <strong>mais i l e s t recommandé de ne pas l e s u t i l i s e r</strong>38 car i l s ne permettent pas de d i s t i n gu e r l a s t ruc ture , au s s i appe lée39 sémantique .40 </p>41 <p>42 Si l ’ on souha i t e changer l ’ a spect des é léments s t r u c t u r e l s , par exemple43 dont l ’ importance e s t s ou l i gn é e avec44 &l t ; s t rong&gt ; &l t ; / s t rong&gt ; ,45 on l e d é f i n i t au niveau d ’ un <em>s t y l e CSS</em>.46 </p>47 <p>48 On peut a i n s i d é f i n i r l e s s t y l e s typographiques ( fonte , . . . ) e t l a mise49 en page ( al ignement à gauche , à dro i t e , j u s t i f i é , e t c . ) du t ex t e50 dans l e s d i f f é r e n t s é léments d ’ une page HTML au niveau de l ’ en−t ê t e .51 </p>52 <p>53 Enfin , s i l ’ on souha i t e changer l e s t y l e loca lement pour décore r54 sans qu ’ i l s ’ a g i s s e d ’ un élément s t r u c tu r e l , on peut u t i l i s e r55 <span style=” font−f ami ly : Comic␣Sans␣MS; ␣ font−s i z e :150%”> la b a l i s e

génér ique &l t ; span&gt ;& l t ; / span&gt ; . </span>56 </p>57 </body>58 <!−− f i n du corps HTML −−>59 </html>60 <!−− f i n du code HTML −−>

1.6 Définir le graphisme CSS

exemples/ChapitreHTML/ex05_couleurs.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”utf−8”/>5 <style>6 /* Dé f i n i t i o n du s t y l e */7 body {8 font−s i z e : 125%;9 background−c o l o r : #c0c0c0 ; /* f on t e par dé faut */10 c o l o r : #333333;

9


11 font−weight : bold12 }13 p {14 text−a l i g n : j u s t i f y ;15 }/* mise en forme des paragraphes */16 /* mise en forme du t i t r e */17 h1 {18 text−a l i g n : c en t e r ;19 font−s i z e : 150%;20 background−c o l o r : #ddd ;21 }22 /* mise en forme élémentt important l e s 120% sont r e l a t i f au contexte */23 st rong {24 background−c o l o r : white ;25 c o l o r : b lack ;26 font−weight : bo lder ;27 }28 </ style>29 <t i t l e>Dé f i n i t i o n des cou l eu r s</ t i t l e>30 </head>31 <body>32 <!−− début du corps HTML −−>33 <h1> Dé f i n i t i o n des cou l eu r s v ia dans un s t y l e CSS </h1>34 <p>35 Dans l e s t y l e CSS , on peut au s s i d é f i n i r l e s c ou l eu r s des d i f f é r e n t s36 é léments . En généra l , on p r é f è r e d é f i n i r<strong> un s t y l e CSS dans un37 f i c h i e r </strong> séparé qui e s t appe lé dans toute s l e s pages ( ou une38 pa r t i e des pages ) d ’ un s i t e , ce qui permet d ’ avo i r un s t y l e uniforme39 sans s ’ embêter .40 </p>41 <p>42 Les s i t e s web ont en géné ra l une <strong>charte graphique</strong> qui43 comprend un p e t i t nombre de cou l eu r s bien harmonisées qui symbol i sent bien

10


44 l ’ e n t i t é que r ep r é s en t e l e s i t e .45 </p>46 <p>47 Dans l e s e n t r ep r i s e s , ce sont souvent des personnes d i f f é r e n t e s qui48 s ’ occupent du s t y l e CSS ou qui s ’ occupent du contenu et des f o n c t i o n a l i t é s49 du s i t e .50 </p>51 <p>52 On peut en su i t e53 <span style=” co l o r : ␣white ; ␣ font−f ami ly : ␣Comic␣Sans␣MS; ”> mod i f i e r

loca lement </span>54 <strong><span style=” font−var i ant : small−caps ; ”>l e s t y l e .</span></strong>55 </p>56 </body>57 <!−− f i n du corps HTML −−>58 </html>59 <!−− f i n du code HTML −−>

1.7 Les Tableaux

exemples/ChapitreHTML/ex06_tableaux.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”utf−8”/>5 <style>6 /* Dé f i n i t i o n du s t y l e */7 body {8 font−s i z e : 125%;9 background−c o l o r : #c0c0c0 ;/* f on t e par dé faut */10 c o l o r : #333333;11 font−weight : bold12 }13 p {14 text−a l i g n : j u s t i f y ;

11


15 }/* mise en forme des paragraphes */16 /* mise en forme du t i t r e */17 h1 {18 text−a l i g n : c en t e r ;19 font−s i z e : 150%;20 background−c o l o r : #ddd ;21 }22 /* mise en forme élémentt important l e s 120% sont r e l a t i f au contexte */23 st rong {24 c o l o r : b lack ;25 font−weight : bo lder ;26 }27 </ style>28 <t i t l e>Tableaux en HTML</ t i t l e>29 </head>30 <body>31 <!−− début du corps HTML −−>32 <h1>Tableaux en XHTML 1.0</h1>3334 <p>35 Voic i une tab l e avec l e s t y l e par dé faut . Le rendu e s t un peu sommaire .36 </p>37 <table>38 <caption>39 Exemple de tab l e sans mise en forme40 </caption>41 <thead>42 <tr>43 <!−− n o u v e l l e l i g n e ( l i g n e de t i t r e s de co lonnes ) −−>44 <th ></th><!−− case v ide en haut à gauche −−>45 <th ><strong>Colonne 1</strong></th>46 <th><strong>Colonne 2</strong></th>47 <th><strong>Colonne 3</strong></th>48 </ tr>49 </thead>50 <tbody>51 <tr>52 <!−− n o u v e l l e l i g n e −−>53 <th ><!−− t i t r e de l i g n e −−><strong>l i g n e&nbsp ; 1</strong></th>54 <td><!−− n o u v e l l e case −−> Ceci e s t l a case55 <br/>56 d ’ en haut à gauche </td>57 <td><!−− n o u v e l l e case −−> Ceci e s t l a case58 <br/>59 d ’ en haut au mi l i eu </td>60 <td><!−− n o u v e l l e case −−> Ceci e s t l a case61 <br/>62 d ’ en haut à d r o i t e </td>63 </ tr>64 <tr>65 <!−− n o u v e l l e l i g n e −−>66 <th><!−− t i t r e de l i g n e −−><strong>l i g n e&nbsp ; 2</strong></th>67 <td><!−− n o u v e l l e case −−> Ceci e s t l a case68 <br/>69 d ’ en bas à gauche </td>70 <td><!−− n o u v e l l e case −−> Ceci e s t l a case

12


71 <br/>72 d ’ en bas au mi l i eu </td>73 <td><!−− n o u v e l l e case −−> Ceci e s t l a case74 <br/>75 d ’ en bas à d r o i t e </td>76 </ tr>77 </tbody>78 </ table>79 </body><!−− f i n du corps HTML −−>80 </html>81 <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex07_tableaux2.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”utf−8”/>5 <style>6 /* Dé f i n i t i o n du s t y l e */7 body {8 font−s i z e : 125%;9 background−c o l o r : #c0c0c0 ;/* f on t e par dé faut */10 c o l o r : #333333;11 font−weight : bold12 }13 p {14 text−a l i g n : j u s t i f y ;15 }/* mise en forme des paragraphes */

13


16 /* mise en forme du t i t r e */17 h1 {18 text−a l i g n : c en t e r ;19 font−s i z e : 150%;20 background−c o l o r : #ddd ;21 }22 /* mise en forme élémentt important l e s 120% sont r e l a t i f au contexte */23 st rong {24 c o l o r : b lack ;25 font−weight : bo lder ;26 }27 </ style>28 <t i t l e>Tableaux : mise en forme</ t i t l e>29 </head>30 <body>31 <!−− début du corps HTML −−>32 <h1>Tableaux : mise en forme</h1>3334 <p>35 On peut d é f i n i r des t ab l e s en r é g l an t l e s t y l e en ” in−l i n e ” , mais36 ça n ’ e s t pas t r è s pra t ique car l e code n ’ e s t pas l i s i b l e !37 </p>38 <div style=”padding− l e f t : ␣10%;␣padding−r i g h t : ␣10%;”>39 <table style=”min−width :90%; ␣padding : ␣0px ; v e r t i c a l −a l i g n : ␣ top ;40 ␣␣␣␣␣␣background−c o l o r : ␣#ddd ; ␣border−s t y l e : ␣ out s e t ;41 ␣␣␣␣␣␣ border−width : ␣10px ; ␣border−c o l o r : ␣ black ;42 ␣␣␣␣␣␣ border−c o l l a p s e : ␣ c o l l a p s e ; ␣ text−a l i g n : ␣ c ente r ; ”>43 <caption style=”padding : ␣15pt ; ␣background−c o l o r : ␣white ; ”>44 Exemple de tab l e45 </caption>46 <thead>47 <tr>48 <th style=””></th>49 <th style=”border−s t y l e : ␣ s o l i d ; ␣border−width : ␣2px ;50 ␣␣␣␣␣␣␣␣␣␣␣␣ border−c o l o r : ␣ b lack ; ␣padding : ␣20pt ; ”><strong>Colonne 1</strong></th>51 <th style=”border−s t y l e : ␣ s o l i d ; ␣border−width : ␣2px ;52 ␣␣␣␣␣␣␣␣␣␣␣␣ border−c o l o r : ␣ b lack ; ␣padding : ␣20pt ; ”><strong>Colonne 2</strong></th>53 <th style=”border−s t y l e : ␣ s o l i d ; ␣border−width : ␣2px ;54 ␣␣␣␣␣␣␣␣␣␣␣␣ border−c o l o r : ␣ b lack ; ␣padding : ␣20pt ; ”><strong>Colonne 3</strong></th>55 </ tr>56 </thead>57 <tbody>58 <tr>59 <th style=”border−s t y l e : ␣ s o l i d ; ␣border−width : ␣2px ;60 ␣␣␣␣␣␣␣␣␣␣␣␣ border−c o l o r : ␣ b lack ; ␣padding : ␣20pt ; ”><strong>l i g n e&nbsp ; 1</strong></

th>61 <td style=” text−a l i g n : ␣ l e f t ; ␣border−s t y l e : ␣ s o l i d ; ␣border−width : ␣2px ;62 ␣␣␣␣␣␣␣␣␣␣␣␣ border−c o l o r : ␣ b lack ; ␣padding : ␣5pt ; ”> Ceci e s t l a case63 <br/>64 d ’ en haut à gauche</td>65 <td style=” text−a l i g n : ␣ c ente r ; ␣border−s t y l e : ␣ s o l i d ; ␣border−width : ␣2

px ;66 ␣␣␣␣␣␣␣␣␣␣␣␣ border−c o l o r : ␣ b lack ; ␣padding : ␣5pt ; ”> Ceci e s t l a case67 <br/>68 d ’ en haut au mi l i eu</td>69 <td style=” text−a l i g n : ␣ r i g h t ; ␣border−s t y l e : ␣ s o l i d ; ␣border−width : ␣2px

14


;70 ␣␣␣␣␣␣␣␣␣␣␣␣ border−c o l o r : ␣ b lack ; ␣padding : ␣5pt ; ”> Ceci e s t l a case71 <br/>72 d ’ en haut à d r o i t e</td>73 </ tr>74 <tr>75 <th style=” text−a l i g n : ␣ c ente r ; ␣border−r i ght−s t y l e : ␣dashed ; ␣padding : ␣

5pt ; ”><strong>l i g n e&nbsp ; 2</strong></th>76 <td style=” text−a l i g n : ␣ c ente r ; ␣padding : ␣5pt ; ␣border−r i ght−s t y l e : ␣

dashed ; ”> Ceci e s t l a case77 <br/>78 d ’ en bas à gauche </td>79 <td style=” text−a l i g n : ␣ c ente r ; ␣padding : ␣5pt ; ”> Ceci e s t l a case80 <br/>81 d ’ en bas au mi l i eu </td>82 <td style=” text−a l i g n : ␣ r i g h t ; ␣border−l e f t −s t y l e : ␣dashed ; ␣padding : ␣5

pt ; ”> Ceci e s t l a case83 <br/>84 d ’ en bas à d r o i t e</td>85 </ tr>86 </tbody>87 </ table>88 </div>89 <p>90 En c l a i r , i l vaut mieux d é f i n i r l e s t y l e des é léments de l a t ab l e au91 niveau d ’ une f e u i l l e de s t y l e CSS ( vo i r p lus l o i n . . . ) .92 </p>93 </body><!−− f i n du corps HTML −−>94 </html>95 <!−− f i n du code HTML −−>

1.8 Liens

exemples/ChapitreHTML/ex08_liens.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”utf−8”/>5 <style>6 /* Dé f i n i t i o n du s t y l e */7 body {8 font−s i z e : 125%;9 background−c o l o r : white ; /* f on t e par dé faut */10 c o l o r : #333333;11 font−weight : bold12 }13 p {14 text−a l i g n : j u s t i f y ;15 }/* mise en forme des paragraphes */16 /* mise en forme du t i t r e */17 h1 {18 text−a l i g n : c en t e r ;19 font−s i z e : 150%;

15


20 background−c o l o r : #ddd ;21 }22 /* mise en forme élémentt important l e s 120% sont r e l a t i f au contexte */23 st rong {24 c o l o r : b lack ;25 font−weight : bo lder ;26 }27 </ style>28 <t i t l e>Liens hypertexte</ t i t l e>29 </head>30 <body>31 <!−− début du corps HTML −−>32 <h1>Liens hypertexte</h1>33 <div>34 <strong>On peut c r é e r d i f f é r e n t s types de l i e n s :</strong>35 <ul>36 <!−− l i s t e à puces −−>37 < l i>38 l i e n s hypertexte en r e l a t i f : <a href=” ./ ex_images . html” >c l i q u e z i c i<

/a>.39 </ l i>40 < l i>41 l i e n s hypertexte en abso lu : <a href=”http ://www. remysprogwebtuto . org /

exemples /html/ex_images . html” > c l i q u e z i c i</a>.42 </ l i>43 < l i>44 l i e n s ver s une ancre en r e l a t i f : <a href=” ./ ex_images . html#image2” >

Voir l e deuxième exemple d ’ image</a>45 </ l i>46 </ul>47 </div>48 <p style=” font−s i z e : ␣150%;␣ font−weight : ␣ bo lder ; ”>

16


49 Pour f a i r e des l i e n s ver s l e s i t e même, i l vaut tou jour s mieux50 u t i l i s e r des l i e n s en r e l a t i f s car s i on déménage l e s i t e ( ou51 s i on récupère c e r t a i n e s c l a s s e s ) , l e s l i e n s ne ca s s en t pas .52 ( à cond i t i on de garder l ’ a rbore s cence des r é p e r t o i r e s t e l l e q u e l l e )53 <br/>54 &Eacute ; v i t e z l e s chemins du genre :55 <br/>56 <code>57 ”C:/ j e / tourne /pas/ sur /un/ se rveur / l i nux . html”</code>58 </p>59 </body>60 <!−− f i n du corps HTML −−>61 </html>62 <!−− f i n du code HTML −−>

1.9 Insertion d’imagesAvant d’insérer des images dans un site web, des retouches de l’image sont souvent nécessaires :

1. L’usage veut que l’on essaie de réduire le poids en octets de l’image, soit en réduisant lenombre de pixels par redimentionnement de l’image, soit en compressant plus fortementl’images (paramètre d’enregistrement JPEG ou PNG) lorsque c’est possible sans dégraderla qualité.

2. Il faut souvent mettre un fond transparent pour l’image si l’on veut l’incruster sur unfond en couleur.

3. Il faut parfois éclaircir ou foncer l’image pour faire ressortir le contraste avec le texteincrusté dessus.

4. Il faut parfois retoucher les couleurs pour les adapter à la charte graphique.

Le logiciel open-source Gimp permet de réaliser toutes ces opérations (facilement avec unpeu d’habitude).

exemples/ChapitreHTML/ex09_images.html1 <! doctype html>2 <html lang=” f r ”>3 <head >4 <meta charset=”utf−8”/>5 <style>/* d é f i n i t i o n du s t y l e */6 body { c o l o r : b lack ; background−c o l o r : #f 0 f 0 f 0 ; text−a l i g n : j u s t i f y ; }7 h1 {background−c o l o r : #bbb ; text−a l i g n : c en t e r ; }8 </ style>9 <t i t l e>In s e r t i o n d ’ images en HTML</ t i t l e>10 </head>11 <body> <!−− début du corps HTML −−>12 <h1>In s e r t i o n d ’ images en HTML</h1>13 <p>14 On i n s è r e l e s images avec l a b a l i s e &l t ; img&gt ;&nbsp ; :<br/>15 </p>16 <p style=” text−a l i g n : ␣ c ente r ; ”>

17


171819 <img src=” ./ p i c /gimp . png” alt=”The␣GIMP␣Logo” width=”150”20 style=” v e r t i c a l −a l i g n : ␣middle ; ”/>21 <a href=” ./ p i c /3d−gnu−head_fond_transp . png” >22 <img src=” ./ p i c /3d−gnu−head_petit . png” width=”150”23 alt=”The␣GNU␣Logo”24 style=” v e r t i c a l −a l i g n : ␣middle ; ”/>25 </a>26 </p>27 <p>28 On peut re toucher l e s images avec l e l o g i c i e l GNU GIMP<br/>29 voyez l a30 <a href=” ./ p i c /capture_gimp . png”>capture d ’ écran</a> montrant31 comment diminuer l e nombre de p i x e l s d ’ une image pour en diminuer l e32 po ids ( en megaoctets ) .33 </p>3435 </body> <!−− f i n du corps HTML −−>36 </html> <!−− f i n du code HTML −−>

Annexe : Les codage portables des accents

De nos jours les accents dans certains langues comme le français sont pris en compte sansproblème par le stadard unicode UTF (par exemple UTF-8). On peut donc sans crainte ta-per des accents au clavier dans un éditeur HTML. Nous rappelons cependant pour mémoirel’existence des bricolages de l’ancien temps, quand seuls les caractères présents dans la languede Shakespeare étaient utilisables sur le Word Wide Web.

18


Nom de l’accent Lettre HTMLa accent grave à &agrave ;A accent grave À &Agrave ;a accent aigu á &aacute ;A accent aigu Á &Aacute ;

a accent circonflexe â &acirc ;A accent circonflexe Â &Acirc ;

a tilde ã &atilde ;A tilde Ã &Atilde ;a tréma ä &auml ;A tréma Ä &Auml ;a rond å &aring ;A rond Å &Aring ;

ae ligaturé æ &aelig ;AE ligaturé Æ &AElig ;

e accent grave è &egrave ;E accent grave È &Egrave ;e accent aigu é &eacute ;E accent aigu É &Eacute ;

e accent circonflexe ê &ecirc ;E accent circonflexe Ê &Ecirc ;

e tréma ë &euml ;E tréma Ë &Euml ;

i accent grave ì &igrave ;I accent grave Ì &Igrave ;i accent aigu í &iacute ;I accent aigu Í &Iacute ;

i accent circonflexe î &icirc ;I accent circonflexe Î &Icirc ;

i tréma ï &iuml ;I tréma Ï &Iuml ;

o accent grave ò &ograve ;

Nom de l’accent Lettre HTMLO accent grave Ò &Ograve ;o accent aigu ó &oacute ;O accent aigu Ó &Oacute ;

o accent circonflexe ô &ocirc ;O accent circonflexe Ô &Ocirc ;

o tilde õ &otilde ;O tilde Õ &Otilde ;o tréma ö &ouml ;O tréma Ö &Ouml ;o barré ø &oslash ;O barré Ø &Oslash ;

u accent grave ù &ugrave ;U accent grave Ù &Ugrave ;u accent aigu ú &uacute ;U accent aigu Ú &Uacute ;

u accent circonflexe û &ucirc ;U accent circonflexe Û &Ucirc ;

u tréma ü &uuml ;U tréma Ü &Uuml ;n tilde ñ &ntilde ;N tilde Ñ &Ntilde ;c cédille ç &ccedil ;C cédille Ç &Ccedil ;

y accent aigu ý &yacute ;Y accent aigu Ý &Yacute ;

double s allemand ß &szlig ;guillemet français ouvrant « &laquo ;guillemet français fermant » &raquo ;

paragraphe § &para ;copyright © &copy ;

espace blanc &nbsp ;

19

Chapitre 2

Styles CSS et mise en page

Il y a essentiellement 3 manières de modifier le style graphique des différents éléments d’unepage HTML en utilisant CSS :

1. Au niveau des balises avec l’option style="..." (voir chapitre précédent) ;

2. Au niveau du header de la page HTML avec la balise <style type="text/css"> (voirchapitre précédent) ;

3. Au niveau d’une feuille de style séparée avec la balise <link/> (voir ci-dessous).

2.1 Feuilles de style CSS

exemples/ChapitreCSS/ex01_inclusion_css.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”utf−8” />

20

Chapitre 2 : Styles CSS et mise en page

5 <l ink rel=” s t y l e s h e e t ” href=” ./ ex01_inc lus ion_css . c s s ” />6 <t i t l e>Inc l u s i o n d ’ une f e u i l l e de s t y l e CSS</ t i t l e>7 </head>8 <body>9 <h1>Inc l u s i on d ’ une f e u i l l e de s t y l e CSS</h1>10 <p>11 De nos jour , l a mise en forme de s t y l e par CSS e s t en géné ra l complètement12 séparée du contenu d ’ in fo rmat ion ou des f o n c t i o n a l i t é s du s i t e . Dans l e s13 en t r ep r i s e s , c e s deux aspec t s ne sont généralement pas t r a i t é s par l a14 même personne .15 </p>16 <p>17 L ’ o u t i l pour r é a l i s e r c e l à e s t l ’ i n c l u s i o n de18 <a href=” f e u i l l e s _ s t y l e . html” > f e u i l l e s de s t y l e CSS</a>.19 Le s t y l e CSS e s t a l o r s d é f i n i ent iè rement dans un f i c h i e r à part .20 </p>21 <!−− Changement l o c a l du style par sucharge : −−>22 <p style=” font−weight : ␣ bo lder ; ␣ font−s i z e : ␣120%;”>23 Les f e u i l l e s de s t y l e CSS doivent au s s i ê t r e v a l i d é e s W3C24 dans un f o rmu la i r e s p é c i f i q u e . Leur p o r t a b i l i t é do i t25 ê t r e t e s t é e car l ’ implémentation ne r e sp e c t e pas tou jour s26 l a norme , sur tout sur l e s nav iga teur s un peu anc i ens .27 </p>28 </body>29 </html>

exemples/ChapitreCSS/ex01_inclusion_css.css12 /* s t y l e par dé faut du tex t e */3 body {4 font−f ami ly : ”Comic␣Sans␣MS” ;5 font−s i z e : 18pt ;6 background−c o l o r : #f f f ;7 c o l o r : #222;8 }910 /* s t y l e du t i t r e */11 h1 {12 font−weight : bold ;13 font−s i z e : 150%;14 c o l o r : white ;15 text−a l i g n : c en t e r ;16 background−c o l o r : #999;17 padding : 15pt ;18 }1920 /* s t y l e par dé faut des l i e n s */21 a : l i n k {22 text−decora t i on : unde r l i n e ; /* s ou l i gn é */23 c o l o r : #00e ;24 }2526 /* s t y l e des l i e n s v i s i t é s */27 a : v i s i t e d {28 text−decora t i on : unde r l i n e ; /* s ou l i gn é */

21


29 c o l o r : #00c ;/* bleu c l a i r */30 }3132 /* s t y l e des l i e n s v i s i t é s */33 a : hover {34 text−decora t i on : unde r l i n e ; /* s ou l i gn é */35 c o l o r : #e40 ;/* rouge v i f */36 }3738 /* s t y l e des é léments importants */39 st rong {40 font−var i ant : small−caps ;41 font−weight : bo lder ;42 c o l o r : b lack ;43 }4445 /* s t y l e des é léments mis en év idence */46 em {47 font−s t y l e : i t a l i c ;48 c o l o r : b lack ;49 }5051 p {52 background−c o l o r : #ddd ;53 text−a l i g n : j u s t i f y ;54 padding : 5pt ;55 }

2.2 Classes CSS

22


exemples/ChapitreCSS/ex02_classes_css.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l ink rel=” s t y l e s h e e t ” href=” ./ ex02_classes_css . c s s ”/>6 <t i t l e>Clas s e s CSS</ t i t l e>7 </head>8 <body>9 <h1>Clas s e s CSS</h1>10 <ol>11 < l i>12 <a class=” toc ” t a r g e t=”_blank” href=”#part1 ” >Pourquoi f a i r e des c l a s s e s

CSS&nbsp ; ?</a>13 </ l i>14 < l i>15 <a class=” toc ” t a r g e t=”_blank” href=”#part2 ” >Exemple d ’ usage</a>16 </ l i>17 < l i>18 <a class=” toc ” t a r g e t=”_blank” href=”#part2 ” >Résumé</a>19 </ l i>20 </ol>21 <h2 id=”part1 ” class=”number1”>1 Pourquoi f a i r e des c l a s s e s CSS&nbsp ; ?</h2>22 <p >23 Les c l a s s e s permettent de d é f i n i r p l u s i e u r s c l a s s e s de contexte s24 dans l e s q u e l s l e s mises en formes sont d i f f é r e n t e s ( vo i r <a class=”

normalLink ” href=”#part2 ”>pa r t i e&nbsp ; 2</a>)25 </p>26 <h2 id=”part2 ” class=”number2”>2 . Exemple d ’ usage</h2>27 <p>28 Je me permets d ’ i n s i s t e r&nbsp ; : <strong class=” i n s i s t ”>Les c l a s s e s sont

t r è s u t i l e s !</strong>29 </p>30 <h2 id=”part3 ” class=”number3”>3 . Résumé</h2>31 <p>32 N’ oub l i e z pas&nbsp ; : <strong class=”warning ”>Les c l a s s e s sont vraiment

t r è s u t i l e s :</strong>33 </p>34 </body>35 </html>

exemples/ChapitreCSS/ex02_classes_css.css12 /* s t y l e par dé faut du tex t e */3 body {4 font−f ami ly : ”Comic␣Sans␣MS” ;5 font−s i z e : 18pt ;6 background−c o l o r : #f f f ;7 c o l o r : #222;8 }910 /* s t y l e du t i t r e */11 h1 {12 font−weight : bold ;13 font−s i z e : 150%;

23


14 c o l o r : white ;15 text−a l i g n : c en t e r ;16 background−c o l o r : #999;17 padding : 15pt ;18 }1920 h2 {21 font−weight : bold ;22 font−s i z e : 120%;23 }2425 h2 . number1 {26 c o l o r : b lack ;27 }2829 h2 . number2 {30 c o l o r : red ;31 }3233 h2 . number3 {34 c o l o r : green ;35 }3637 /* s t y l e des é léments importants */38 st rong {39 font−var i ant : small−caps ;40 font−weight : bo lder ;41 c o l o r : b lack ;42 }4344 st rong . i n s i s t {45 font−s i z e : 130%;46 }4748 st rong . warning {49 font−s i z e : 150%;50 c o l o r : red ;51 text−decora t i on : b l i nk ;52 }5354 /* s t y l e des é léments mis en év idence */55 em {56 font−s t y l e : i t a l i c ;57 c o l o r : b lack ;58 }5960 p {61 background−c o l o r : #ddd ;62 text−a l i g n : j u s t i f y ;63 padding : 5pt ;64 }6566 /* s t y l e par dé faut des l i e n s */67 a {68 c o l o r : b lue ;69 text−decora t i on : unde r l i n e ; /* non sou l i gn é */

24


70 }7172 /* s t y l e de l i e n s s p é c i a l pour l a t ab l e des mat i è re s */73 a . toc {74 c o l o r : red ;75 text−decora t i on : o v e r l i n e ; /* s u r l i g n é */7677 }

2.3 Sélecteurs de style CSS par ID

exemples/ChapitreCSS/ex03_id_selector_css.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta http−equiv=”Content−Type” content=” text /html ; ␣ cha r s e t=UTF−8” />5 <l ink rel=” s t y l e s h e e t ” type=” text / c s s ” href=” ./ ex03_id_se lector_css . c s s ”/>6 <t i t l e>Sé l e c t e u r s de s t y l e par ID</ t i t l e>7 </head>8 <body>9 <h1>Sé l e c t e u r s de s t y l e par ID</h1>10 <h2 id=” pa r t i e 1 ”>1 D i f f é r e n c e ent re l e s s é l e c t e u r s par ID et pa c l a s s e&nbsp

; ?</h2>11 <p id=”paragraphe1 ”>12 Les s é l e c t e u r s de s t y l e s par ID permeetent d ’ i d e n t i f i e r un unique13 élément correspondant à une c e r t a i n e b a l i s e .14 </p>15 <h2 id=” pa r t i e 2 ”>2 . Exemple d ’ usage</h2>16 <p id=”paragraphe2 ”>17 Contrairement aux c l a s s e s ,18 pour l e s q u e l l e s on peut d é f i n i r autant d ’ é léments qu ’ on veut dans une

25


19 même c l a s s e de s ty l e , <strong>l ’ élément correspondant à un ID e s t unique</strong>.

20 </p>21 <h2 id=” pa r t i e 3 ”>3 . Résumé</h2>22 <p id=”paragraphe3 ”>23 Les ID correspondant à un élément s i n g u l i e r , ou encore <em>s i n g l e t on</em>24 du s i t e25 comme l e header commun à toute s l e s pages .26 </p>27 </body>28 </html>

exemples/ChapitreCSS/ex03_id_selector_css.css12 /* s t y l e par dé faut du tex t e */3 body {4 font−f ami ly : ”Comic␣Sans␣MS” ;5 font−s i z e : 18pt ;6 background−c o l o r : #f f f ;7 c o l o r : #222;8 }910 /* s t y l e du t i t r e */11 h1 {12 font−weight : bold ;13 font−s i z e : 150%;14 c o l o r : white ;15 text−a l i g n : c en t e r ;16 background−c o l o r : #999;17 padding : 15pt ;18 }1920 h2 {21 font−weight : bold ;22 font−s i z e : 120%;23 }2425 h2#pa r t i e 1 {26 c o l o r : b lack ;27 }2829 h2#pa r t i e 2 {30 c o l o r : red ;31 }3233 h2#pa r t i e 3 {34 c o l o r : green ;35 }3637 /* s t y l e des é léments importants */38 st rong {39 font−var i ant : small−caps ;40 font−weight : bo lder ;41 c o l o r : b lack ;42 }

26


434445 /* s t y l e des é léments mis en év idence */46 em {47 font−s t y l e : i t a l i c ;48 c o l o r : b lack ;49 }5051 p {52 background−c o l o r : #ddd ;53 text−a l i g n : j u s t i f y ;54 padding : 5pt ;55 }5657 p#paragraphe1 {58 background−c o l o r : #aaa ;5960 }6162 p#paragraphe2 {63 background−c o l o r : #ccc ;6465 }6667 p#paragraphe3 {68 background−c o l o r : #eee ;6970 }7172 /* p#paragraphe2 {73 background−c o l o r : #ddd ;7475 s t y l e par dé faut des l i e n s */76 a {77 c o l o r : b lue ;78 text−decora t i on : unde r l i n e ; /* non sou l i gn é */79 }

2.4 Exemple : style CSS pour un tableau

exemples/ChapitreCSS/ex04_tableaux_css.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”utf−8”/>5 <l ink rel=” s t y l e s h e e t ” href=” ./ ex01_inc lus ion_css . c s s ” />6 <!−− I n c l u s i o n de s t y l e s supp l émenta i re s avec ” import ” −−>7 <style>8 @import u r l ( ex04_tableaux_css . c s s ) ;9 </ style>10 <t i t l e>Sty l e CSS de Tableaux</ t i t l e>11 </head>12 <body>

27


13 <!−− début du corps HTML −−>14 <h1>Sty l e CSS de Tableaux</h1>1516 <div style=”padding− l e f t : ␣10%;␣padding−r i g h t : ␣10%;”>17 <table>18 <caption>19 Exemple de tab l e20 </caption>21 <thead>22 <tr>23 <th>Colonne 1</th>24 <th>Colonne 2</th>25 <th>Colonne3</th>26 </ tr>27 </thead>28 <tbody>29 <tr>30 <td class=” pa i r ”>Ceci e s t l a case31 <br/>32 d ’ en haut à gauche</td>33 <td class=” impair ”>Ceci e s t l a case34 <br/>35 d ’ en haut au mi l i eu</td>36 <td class=” pa i r ”>Ceci e s t l a case37 <br/>38 d ’ en haut à d r o i t e</td>39 </ tr>40 <tr>41 <td class=” pa i r ”>Ceci e s t l a case42 <br/>43 d ’ en bas à gauche</td>44 <td class=” impair ”>Ceci e s t l a case45 <br/>46 d ’ en bas au mi l i eu</td>47 <td class=” pa i r ”>Ceci e s t l a case48 <br/>49 d ’ en bas à d r o i t e</td>

28


50 </ tr>51 </tbody>52 </ table>53 </div>54 </body>55 <!−− f i n du corps HTML −−>56 </html>57 <!−− f i n du code HTML −−>

exemples/ChapitreCSS/ex04_tableaux_css.css123 tab l e {4 padding : 0px ;5 v e r t i c a l −a l i g n : top ; /* mise en forme des t ab l e s */6 background−c o l o r : #ddd ;7 border−s t y l e : ou t s e t ;8 border−width : 10px ;9 border−c o l o r : b lack ;10 }1112 tr , td {13 border−s t y l e : dashed ; /* mise en forme des c e l l u l e s */14 border−width : 2px ;15 border−c o l o r : b lack ;16 padding : 20px ;17 }1819 tr , td . pa i r {20 background−c o l o r : b lack ;21 c o l o r : white ;22 }2324 tr , td . impair {25 background−c o l o r : white ;26 c o l o r : b lack ;27 }282930 th {31 border−s t y l e : s o l i d ;32 border−width : 2px ;33 border−c o l o r : b lack ;34 text−a l i g n : c en t e r ;35 font−weight : bo lder ;36 c o l o r : b lack ;37 padding : 20px ;38 }

2.5 Éléments de type block et inline2.5.1 Éléments blocks

29


exemples/ChapitreCSS/ex05_blocs.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l ink rel=” s t y l e s h e e t ” href=” ./ ex01_inc lus ion_css . c s s ”/>6 <t i t l e>Éléments de type ” block ”</ t i t l e>7 </head>8 <body>9 <h1>Éléments de type ” block ”</h1>10 <p>11 I l e x i s t e en XHTML deux pr inc ipaux types de b a l i s e s&nbsp ; : i n l i n e ou block

.12 </p>13 <ol>14 < l i>15 <strong>Les b a l i s e de type block comme&nbsp ;</strong>16 <br/>17 <ul>18 < l i>19 &l t ; div&gt ; : changement l o c a l de s t y l e e t20 s t r u c tu r a t i on&nbsp ;;21 </ l i>22 < l i>23 &l t ; p&gt ;&nbsp ; : nouveau paragraphe;24 </ l i>25 < l i>26 &l t ; t ab l e&gt ;&nbsp ; : tab leau contenant des donnée;27 </ l i>28 < l i>29 &l t ; h1&gt ;&nbsp ; , . . . , &l t ; h6&gt ;&nbsp ; : d i f f é r e n t s30 niveaux de t i t r e ;31 </ l i>32 < l i>

30


33 &l t ; d l&gt ;&nbsp ; : l i s t e de d é f i n i t i o n;34 </ l i>35 < l i>36 &l t ; u l&gt ;&nbsp ; : l i s t e non ordonnée;37 </ l i>38 < l i>39 &l t ; o l&gt ;&nbsp ; : l i s t e ordonnée;40 </ l i>41 < l i>42 etc .43 </ l i>44 </ul>45 Ces b a l i s e s changent l ’ apparence de l e u r contenu et l e u r nature46 au niveau s t r u c t u r e l e t éventue l l ement l e u r f on c t i on dans l e cas du l i e n47 ou de l ’ image .48 <br/>49 En <i>HTML5</ i>, on trouve au s s i l e s b a l i s e s sémantiques &l t ; header&gt ; ,

&l t ; f o o t e r&gt ; , &l t ; nav&gt ; , e t c . que nous ver rons p lus l o i n .50 </ l i>51 </ol>52 </body>53 </html>

2.5.2 Éléments inline

exemples/ChapitreCSS/ex06_inline.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l ink rel=” s t y l e s h e e t ” href=” ./ ex01_inc lus ion_css . c s s ”/>6 <t i t l e>Éléments de type ” i n l i n e ”</ t i t l e>

31


7 </head>8 <body>9 <h1>Éléments de type ” i n l i n e ”</h1>10 <ol s t a r t=”2”>11 < l i><strong>Les b a l i s e s en l i g n e ou ” i n l i n e ” comme&nbsp ; :</strong></ l i>12 <ul>13 < l i>&l t ; span&gt ;&nbsp ; : changement l o c a l de s t y l e&nbsp ;;</ l i>14 < l i>&l t ; a&gt ;&nbsp ; : l i e n hypertexte;</ l i>15 < l i>&l t ; s t rong&gt ;&nbsp ; : é lément important;</ l i>16 < l i>&l t ; em&gt ;&nbsp ; : é lément à s ou l i g n e r;</ l i>17 < l i>&l t ; q&gt ;&nbsp ; : c i t a t i o n courte;</ l i>18 < l i>etc .</ l i>19 </ul>20 Ces b a l i s e s changent l ’ apparence de l e u r contenu mais pas l e u r nature21 au niveau s t r u c t u r e l n i l e u r p o s i t i o n dans l e document .22 </ l i>23 </ol>24 <p>25 Tout élément do i t ê t r e contenu dans au moins un block . Le b locks peuvent ê t r e26 imbriqués mais l e s b locks &l t ; p&gt ;&nbsp ; e t l e s b locks t i t r e27 &l t ; h1&gt ;&nbsp ; , . . . , &l t ; h6&gt ;&nbsp ; ne peuvent con t en i r28 d ’ aut r e s b locks .<br/>Un élément i n l i n e ne peut con t en i r aucun élément29 de type block ;30 </p>31 </body>32 </html>

2.6 Positionnement CSS et mise en pageLa position des différents éléments dans une page HTML se définit au niveau du style CSS.

2.6.1 Marges et borduresChaque élément (de type inline ou block) se trouve dans une boîte ayant une bordure, unemarge intérieure, et une marge extérieure. On définit ainsi les épaisseurs et styles de bordure desdifférents éléments, les marges extérieures (margin, qui force l’élément à un certain éloignementdes autres éléments de la page), les marges intérieures (padding, qui force le contenu de l’élémentà se trouver à une certaine distance du bord de l’élément.

32


exemples/ChapitreCSS/ex07_margin_padding.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l ink rel=” s t y l e s h e e t ” href=” ./ ex07_margin_padding . c s s ”/>6 <t i t l e>Propr i é t é s Margin et Padding</ t i t l e>7 </head>8 <body>9 <h1>Propr i é t é s Margin et Padding</h1>10 <div>11 Ceci e s t l e t ex t e f a i s a n t pa r t i e du contenu de l a première bo î t e .12 <div>13 Ceci e s t l e texte , contenu de l a p e t i t e bo î t e .14 Cette p e t i t e bo î t e e s t e l l e même l e contenu de l a grande bo î t e .15 </div>16 </div>17 </body>18 </html>

exemples/ChapitreCSS/ex07_margin_padding.css12 /* s t y l e par dé faut du tex t e */3 body {4 font−f ami ly : Comic Sans MS;5 font−s i z e : 18pt ;6 background−c o l o r : #f f f ;7 c o l o r : #222;8 }910 /* s t y l e du t i t r e */11 h1 {12 font−weight : bold ;13 font−s i z e : 150%;14 c o l o r : white ;15 text−a l i g n : c en t e r ;16 background−c o l o r : #999;17 padding : 15pt ;18 }1920 h2 {21 font−weight : bold ;22 font−s i z e : 120%;23 }2425 div {26 border−width : 2px ;27 border−c o l o r : b lack ;28 border−s t y l e : s o l i d ;29 c o l o r : b lack ;30 margin : 20px ;31 padding : 15px ;32 background−c o l o r : #ddd ;33 }34

33


35 div div {36 border−width : 3px ;37 border−c o l o r : #666;38 border−s t y l e : dashed ; ;39 c o l o r : b lack ;40 margin : 5px ;41 padding : 30px ;42 background−c o l o r : #aaa ;43 }

2.6.2 Positionnement absoluDans le positionnement absolu, la position d’un élément est définie par rapport à la positiondu première ancêtre positionné (soit le parent si celui-ci est positionné, sinon on cherche leparent du parent, etc. jusqu’à trouver un ancêtre positionné. Si le parent n’est pas positionné,on peut le positionner sans changer sa position en mettant sa position relative zéro.

exemples/ChapitreCSS/ex08_position_absolute.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l ink rel=” s t y l e s h e e t ” href=” ./ ex08_pos i t ion_abso lute . c s s ”/>6 <t i t l e>Posit ionnement abso lu</ t i t l e>7 </head>8 <body>9 <h1>Posit ionnement abso lu</h1>10 <div class=” pos i t i onZe ro ”>11 Ceci e s t l e t ex t e f a i s a n t pa r t i e du contenu de l a bo î t e parente . Ce l l e−c i

e s t

34


12 po s i t i onné e mais à sa p lace normale dans l e f l u x (marge de 20px ) .13 <div class=” pos i t i onTrente ”>14 Ceci e s t l e t ex t e contenu de l a première sous−boî te , dont l e co in

supé r i eu r15 gauche po s i t i onné e 30 p i x e l s à d r o i t e et 90 p i x e l s p lus bas que son parent

.16 </div>17 <div class=” po s i t i onSo i xan t e ”>18 Ceci e s t l e t ex t e contenu de l a deuxième sous−boî te , dont l e co in

supé r i eu r19 gauche po s i t i onné e 60 p i x e l s à d r o i t e et 180 p i x e l s p lus bas que son

parent .20 </div>21 </div>22 </body>23 </html>

exemples/ChapitreCSS/ex08_position_absolute.css12 /* s t y l e par dé faut du tex t e */3 body {4 font−f ami ly : Comic Sans MS;5 font−s i z e : 18pt ;6 background−c o l o r : #f f f ;7 c o l o r : #222;8 }910 /* s t y l e du t i t r e */11 h1 {12 font−weight : bold ;13 font−s i z e : 150%;14 c o l o r : white ;15 text−a l i g n : c en t e r ;16 background−c o l o r : #999;17 padding : 15pt ;18 }1920 h2 {21 font−weight : bold ;22 font−s i z e : 120%;23 }2425 div {26 border−width : 2px ;27 border−c o l o r : b lack ;28 border−s t y l e : s o l i d ;29 c o l o r : b lack ;30 margin : 20px ;31 padding : 0px ;32 background−c o l o r : #ddd ;33 }3435 /* pos i t ionnement normale dans l e f lux ,36 d é f i n i j u s t e pour po s i t i o nn e r l ’ é lément */37 . po s i t i onZe ro {

35


38 po s i t i o n : r e l a t i v e ;39 top : 0px ;4041 l e f t : 0px ;42 width : 500px ;43 z−index : 1 ;44 }4546 div div {47 border−width : 2px ;48 border−c o l o r : b lack ;49 border−s t y l e : dashed ;50 margin : 0px ;51 padding : 0px ;52 background−c o l o r : #aaa ;53 }5455 . po s i t i onTrente {56 po s i t i o n : abso lu t e ;57 top : 90px ;58 l e f t : 30px ;59 width : 500px ;60 z−index : 7 ;61 }6263 . po s i t i onSo i xan t e {64 po s i t i o n : abso lu t e ;65 top : 180px ;66 l e f t : 60px ;67 background−c o l o r : #888;68 z−index : 15 ;69 }

2.6.3 Positionnement relatifLe positionnement relatif permet de déplacer un objet relativement à la position qu’il auraiteu sans positionnement. Le positionnement relatif s’obtient avec l’attribut :

position : relative;top: 10px; /* déplacer de 10 pixels vers la gauche */left: 20px; /* déplacer de 20 pixels vers la droite */

exemples/ChapitreCSS/ex08_position_relative.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l ink rel=” s t y l e s h e e t ” href=” ./ ex08_pos i t i on_re l a t ive . c s s ”/>6 <t i t l e>Posit ionnement r e l a t i f</ t i t l e>7 </head>8 <body>9 <h1>Posit ionnement r e l a t i f</h1>10 <div class=” pos i t i onZe ro ”>

36


11 Ceci e s t l e t ex t e f a i s a n t pa r t i e du contenu de l a bo î t e du haut . Ce l l e−c ie s t

12 po s i t i onné e mais à sa p lace normale dans l e f l u x .13 </div>14 <div class=” pos i t i onTrente ”>15 Ceci e s t l e t ex t e contenu de l a bo î t e du mi l i eu , dont l e co in supé r i eu r16 gauche po s i t i onné e 60 p i x e l s à d r o i t e de sa po s i t i o n normale dans l e f l u x .17 </div>1819 <div class=” pos i t ionNormale ”>20 Ceci e s t l e t ex t e contenu de l a bo î t e du bas , qui e s t po s i t i onné e21 normalement dans l e f l u x ( compte tenu de l a p o s i t i o n de l a bo î t e

précédente ) .22 </div>23 </body>24 </html>

exemples/ChapitreCSS/ex08_position_relative.css12 /* s t y l e par dé faut du tex t e */3 body {4 font−f ami ly : Comic Sans MS;5 font−s i z e : 18pt ;6 background−c o l o r : #f f f ;7 c o l o r : #222;8 }910 /* s t y l e du t i t r e */11 h1 {12 font−weight : bold ;13 font−s i z e : 150%;14 c o l o r : white ;15 text−a l i g n : c en t e r ;16 background−c o l o r : #999;

37


17 padding : 15pt ;18 }1920 h2 {21 font−weight : bold ;22 font−s i z e : 120%;23 }2425 div {26 border−width : 2px ;27 border−c o l o r : b lack ;28 border−s t y l e : s o l i d ;29 c o l o r : b lack ;30 margin : 0 ;31 padding : 0 ;32 background−c o l o r : #ddd ;33 }3435 /* pos i t ionnement normale dans l e f lux ,36 d é f i n i j u s t e pour po s i t i o nn e r l ’ é lément */37 . po s i t i onZe ro {38 po s i t i o n : r e l a t i v e ;39 width : 600px ;40 z−index : 1 ;41 }4243 . po s i t i onTrente {44 border−s t y l e : dashed ;45 background−c o l o r : #aaa ;46 po s i t i o n : r e l a t i v e ;47 l e f t : 60px ;48 width : 600px ;49 z−index : 7 ;50 }5152 . pos i t ionNormale {53 border−s t y l e : dashed ;54 background−c o l o r : #888;55 z−index : 15 ;56 }

2.6.4 Exemple de mise en page

exemples/ChapitreCSS/ex09_exemple_miseEnPage.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l ink rel=” s t y l e s h e e t ” href=” ./ ex09_exemple_miseEnPage . c s s ”/>6 <t i t l e>Exemple de mise en page</ t i t l e>7 </head>8 <body>9 <div class=”header ”>10 <h1>Exemple de mise en page</h1>

38


11 </div>12 <div class=” content ”>13 <div class=”nav”>14 <h2>Navigat ion</h2>15 <ul>16 < l i>17 <a href=” ./ coucou . html” >l i e n 1</a>18 </ l i>19 < l i>20 <a href=” ./ toto . html” >l i e n 2</a>21 </ l i>22 < l i>23 <a href=” ./ t i t i . html” >l i e n 2</a>24 </ l i>25 </ul>26 </div>27 <div class=” a r t i c l e ”>28 <h2>Corps du tex t e</h2>29 <p>30 Nous mettons i c i l e corps du tex t e . Paragraphe 1 .31 </p>32 <p>33 Notons que l e contenu (menu plus t ex t e ) e s t <strong>cent r é</strong> et

que l e s l i e n s34 dans l e menu n ’ ont pas l e même aspect que l e s l i e n s dans l e t ex t e .35 </p>36 <p>37 Ceci e s t <a href=” ./ toto . html”>un l i e n</a> normal38 </p>39 </div>40 </div>41 </body>42 </html>

39


exemples/ChapitreCSS/ex09_exemple_miseEnPage.css1 body {2 font−f ami ly : times , s e r i f ;3 font−s i z e : 14pt ;4 background−c o l o r : #ccc ;5 c o l o r : #222;6 }78 div {9 background−c o l o r : #f f f ;10 }1112 div h1 {13 text−a l i g n : c en t e r ;14 width : 600px ;15 margin : 0 ;16 }1718 div . header {19 width : 600px ;20 background−c o l o r : b lack ;21 c o l o r : white ;22 margin : 0 auto ;23 padding : 0px ;24 }2526 div . content {27 width : 600px ;28 background−c o l o r : white ;29 margin : 0 auto ;30 po s i t i o n : r e l a t i v e ;31 top : 0px ;32 padding : 0px ;33 he ight : 300px ;34 }3536 div div . nav {37 c o l o r : white ;38 text−a l i g n : c en t e r ;39 background−c o l o r : #999;40 width : 180px ;41 margin : 0 0 ;42 padding : 0px ;4344 po s i t i o n : abso lu t e ;45 l e f t : 0 px ;46 he ight : i n h e r i t ! important ;47 }4849 div div . nav u l {50 text−a l i g n : c en t e r ;5152 }53

40


54 div div . nav a {55 text−decora t i on : o v e r l i n e ;56 font−var i ant : small−caps ;57 }5859 div div . a r t i c l e {60 c o l o r : b lack ;61 text−a l i g n : j u s t i f y ;62 background−c o l o r : white ;63 width : 400px ; /* encombrement 420 avec l a padding */64 padding : 0 10px ; /* compter 20 dans l a l a r g eu r t o t a l e */65 margin : 0 ;66 po s i t i o n : r e l a t i v e ;67 l e f t : 180px ;68 po s i t i o n : abso lu t e ;69 top : 0px ;70 he ight : i n h e r i t ! important ;71 }7273 div div . a r t i c l e p {74 background−c o l o r : white ;75 }

2.6.5 Structuration d’une page en HTML5La mise en page avec header, navigation et pied de page est si courante que des balises spécia-lisées, appelées balises sémentiques ont été créées en HTML5. On doit les préférer à <div> carelles permettent une plus grande clarté de la structure du document, mais aussi aux moteursde recherche de mieux percevoir quelle place accorder aux différentes parties d’une page web.Les balises sémantiques sont les suivantes :

• header pour l’en-tête ou le bandeau contenant le titre de la page, un logo, etc.

• footer pour le pied de pas contenant le copyright, des logos ou liens, informations légales,etc.

• nav pour la partie navigation avec un menu et des liens pour se déplacer dans le site.

• article contenant un corps de document autosuffisant.

• aside pour des informations annexes sans grand rapport avec le sujet (publicités, etc.)

• section représentant une partie regroupant plusieurs contenus liés entre eux.

Voici un exemple de mise en page typique utilisant ces balises :

exemples/ChapitreCSS/ex10_balisesSemantiques.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l ink rel=” s t y l e s h e e t ” href=” ./ ex10_bal i sesSemant iques2 . c s s ”/>6 <t i t l e>Ba l i s e s sémantiques HTML5</ t i t l e>

41


7 </head>8 <body>9 <header>10 <h1>Ba l i s e s sémantiques HTML5</h1>11 </header>12 <div class=” content ”>13 <nav>14 <h2>Navigat ion</h2>15 <ul>16 < l i>17 <a href=” ./ coucou . html” >l i e n 1</a>18 </ l i>19 < l i>20 <a href=” ./ toto . html” >l i e n 2</a>21 </ l i>22 < l i>23 <a href=” ./ t i t i . html” >l i e n 3</a>24 </ l i>25 </ul>26 </nav>27 <a r t i c l e>28 <h2>Corps du tex t e</h2>29 <p>30 Nous mettons i c i l e corps du tex t e . Paragraphe 1 .31 </p>32 <p>33 Notons que l e contenu (menu plus t ex t e ) e s t <strong>cent r é</strong> et

que l e s l i e n s34 dans l e menu n ’ ont pas l e même aspect que l e s l i e n s dans l e t ex t e .35 </p>36 <p>37 Ceci e s t <a href=” ./ toto . html”>un l i e n</a> normal38 </p>39 </ a r t i c l e>40 </div>41 <f o o t e r>42 &copy ; RM 2012 .43 </ f o o t e r>44 </body>45 </html>

exemples/ChapitreCSS/ex10_balisesSemantiques2.css1 body {2 font−f ami ly : times , s e r i f ;3 font−s i z e : 14pt ;4 background−c o l o r : #ccc ;5 c o l o r : #222;6 }78 div {9 background−c o l o r : #f f f ;10 }1112 header {13 width : 600px ;

42


14 background−c o l o r : b lack ;15 c o l o r : white ;16 margin : 0 auto ;17 border−rad iu s : 20px 20px 0 0 ;18 }192021 header h1 {22 text−a l i g n : c en t e r ;23 width : 600px ;24 margin : 0 ;25 }262728 div . content {29 width : 600px ;30 background−c o l o r : white ;31 margin : 0 auto ;32 po s i t i o n : r e l a t i v e ;33 top : 0px ;3435 he ight : 250px ;36 }3738 div nav {39 c o l o r : white ;40 text−a l i g n : c en t e r ;41 background−c o l o r : #999;42 width : 180px ;4344 po s i t i o n : abso lu t e ;45 l e f t : 0 px ;46 he ight : i n h e r i t ! important ;47 }4849 div nav ul {50 l i s t −s t y l e : none ;51 margin : 0 20px ;52 po s i t i o n : r e l a t i v e ;53 l e f t : −20px ;

43


54 top : −20px ;55 }565758 div nav ul l i {5960 font−weight : bo lder ;6162 border : 8px ;63 border−s t y l e : groove ;64 border−c o l o r : b lack ;65 background−c o l o r : #555;66 }6768 div nav ul l i a{69 c o l o r : white ;70 text−decora t i on : none ;71 padding : 10px 20px ;72 d i sp l ay : i n l i n e −block ;73 }7475 div a r t i c l e {76 c o l o r : b lack ;77 text−a l i g n : j u s t i f y ;78 background−c o l o r : white ;79 width : 400px ; /* encombrement 420 avec l a padding */80 padding : 0 10px ; /* compter 20 dans l a l a r g eu r t o t a l e */81 po s i t i o n : r e l a t i v e ;82 l e f t : 180px ;83 po s i t i o n : abso lu t e ;84 top : 0px ;85 he ight : i n h e r i t ! important ;86 }8788 div a r t i c l e p {89 background−c o l o r : white ;90 }9192 f o o t e r {93 width : 600px ;94 background−c o l o r : #444;95 c o l o r : white ;96 margin : 0 auto ;97 text−a l i g n : c en t e r ;98 border−rad iu s : 0 0 20px 20px ;99 }

La structure du document HTML5 est définie par ces balises, mais pas la disposition de lapage. En changeant uniquement le CSS, on peut obtenir :

exemples/ChapitreCSS/ex10_balisesSemantiques.css1 body {2 font−f ami ly : times , s e r i f ;3 font−s i z e : 14pt ;4 background−c o l o r : #ccc ;5 c o l o r : #222;

44


6 }78 div {9 background−c o l o r : #f f f ;10 }1112 header {13 width : 600px ;14 background−c o l o r : b lack ;15 c o l o r : white ;16 margin : 0 auto ;17 border−rad iu s : 20px 20px 0 0 ;18 }192021 header h1 {22 text−a l i g n : c en t e r ;23 width : 600px ;24 margin : 0 ;25 }262728 div . content {29 width : 600px ;30 background−c o l o r : white ;31 margin : 0 auto ;32 po s i t i o n : r e l a t i v e ;33 top : 0px ;3435 he ight : auto ;36 }3738 div nav {39 c o l o r : white ;40 text−a l i g n : c en t e r ;41 background−c o l o r : #999;42 width : 600px ;43 margint−top : 0 ;

45


44 he ight : 45px ;45 }4647 div nav h2{48 d i sp l ay : none ;49 }5051 div nav ul {52 l i s t −s t y l e : none ;53 margin : 0 20px ;54 po s i t i o n : r e l a t i v e ;55 d i sp l ay : i n l i n e ;56 }575859 div nav ul l i {60 d i sp l ay : i n l i n e ;61 font−weight : bo lder ;62 border : 0 ;63 border−c o l o r : b lack ;64 background−c o l o r : #555;65 margin : 0 10px ;66 po s i t i o n : r e l a t i v e ;67 border−rad iu s : 0 0 10px 10px ;68 top : −5px ;69 }7071 div nav ul l i a{72 padding : 5px 10px ;73 d i sp l ay : i n l i n e −block ;74 c o l o r : white ;75 text−decora t i on : none ;76 }7778 div a r t i c l e {79 c o l o r : b lack ;80 text−a l i g n : j u s t i f y ;81 background−c o l o r : white ;82 width : 580px ; /* encombrement 600 avec l a padding */83 padding : 10px 10px ; /* compter 20 dans l a l a r g eu r t o t a l e */84 he ight : i n h e r i t ! important ;85 }8687 div a r t i c l e p {88 background−c o l o r : white ;89 }9091 f o o t e r {92 width : 600px ;93 background−c o l o r : #444;94 c o l o r : white ;95 margin : 0 auto ;96 text−a l i g n : c en t e r ;97 border−rad iu s : 0 0 20px 20px ;98 po s i t i o n : r e l a t i v e ;99 }

46


2.7 Arborescence de balises et CSSL’imbrication des baslises HTML d’un document crée une arbrorescence, où une balise B1

est fillle d’une autre balise B2 si la balise B1 est immédiatement imbriquée dans B2 dans ledocument (voir la figure 2.1).

a

ul

body

p

p li

div

divh1

span

Figure 2.1: L’arbre d’imbrication des balises de l’exemple ex11_arborescenceCSS_html

Dans le fichier CSS, on peut définir un style (et éventuellement plusieurs classes CSS) pourchaque sous-arbre de l’arborescence. Pour celà, on indique le sous-arbre par la succession desnoeuds de la racine de l’arbre vers la racine du sous-arbre (voir exemple ci-dessous).

exemples/ChapitreCSS/ex11_arborescenceCSS.html1 <! doctype html>

47


2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l ink rel=” s t y l e s h e e t ” href=” ./ ex11_arborescenceCSS . c s s ”/>6 <t i t l e>Arborescence de b a l i s e s</ t i t l e><t i t l e>Arborescence de b a l i s e s e t CSS<

/ t i t l e>7 </head>8 <body>9 <h1>Tit re p r i n c i p a l</h1>10 <p>11 f e u i l l e 112 <a href=” ./my_url . html”> f e u i l l e 2</a>13 </p>14 <div>15 <div>16 <p>17 noeud 3 <span>f e u i l l e 4</span>18 <p>19 </div>20 </div>21 <div>22 <ul>23 < l i>24 f e u i l l e 525 </ l i>26 < l i>27 f e u i l l e 628 </ l i>29 </ul>30 </div>31 </body>32 </html>

exemples/ChapitreCSS/ex11_arborescenceCSS.css1 /* s t y l e par dé faut du tex t e */2 body {3 font−f ami ly : times , s e r i f ;4 font−s i z e : 14 pt ;5 background−c o l o r : #ccc ;6 c o l o r : #222;7 }89 h1 {10 text−a l i g n : c en t e r ;11 }1213 div {14 background−c o l o r : #f f 0 ;15 }1617 p {1819 background−c o l o r : white ;2021 }

48


2223 p a {2425 text−decora t i on : o v e r l i n e ;2627 }2829 div div p {30 c o l o r : red ;31 text−a l i g n : c en t e r ;32 background−c o l o r : #ddd ;3334 }353637 div div p span {38 font−f ami ly : Comic Sans MS;39 font−s i z e : 18 pt ;40 }414243 div u l {44 background−c o l o r : #0 f f ;45 c o l o r : red ;46 }

49

Chapitre 3

PHP procédural

3.1 Générer du code HTML avec PHPLe PHP est un langage de programmation (ou langage de scripts) qui permet de générer etd’afficher des pages webs dynamiques, c’est à dire des pages dont le contenu dépend des actionsde l’utilisateur ou de l’état, par exemple, d’une base de données. En fin de compte, le codeaffiché est toujours du code HTML. Ce code HTML est généré par le programme PHP viala commande echo. La protection des caractères spéciaux du HTML (comme les guillemets)et le mélange du code PHP et du code HTML rend souvent le code d’un script PHP. Nousverrons plus loin comment atténuer ce problème par une approche modulaire fondée sur laprogrammation objet.

Le script PHP est inséré à l’intérieur d’une balise < ?php > qui peut s’insérer au sein ducode HTML.

exemples/php1/ex01_helloWorld.php1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”utf−8”/>5 <t i t l e>Hel lo World en PHP</ t i t l e>6 </head>

50

Chapitre 3 : PHP procédural

7 <body>8 <p>9 <?php // début du script PHP10 echo ” He l lo ␣World␣ ! ” ;11 // On a f f i c h e du code HTML s i l a s o r t i e12 ?> <!−− f i n du script PHP −−>13 </p>14 </body>15 </html>

3.2 Exemple de fonction en PHPIci, nous voyons une fonction PHP qui génère l’en-tête XHTML du document et son header.Cette fonction prend en paramètre le titre, le charset et l’url d’une feuille de style CSS àappliquer dans le header HTML. Le résultat est que lors de l’utilisation de la fonction, presquetout le code HTML disparait pour être remplacé par une seule ligne de code, ce qui en fin decompte allégera de beaucoup le code source PHP.

exemples/php1/ex02_function.php1 <?php // début d ’ un script PHP2 func t i on outputEnTeteHTML5( $ t i t l e , $charset , $css_sheet ) {3 // s o r t i e du doctype . Les gu i l l eme t s HTML sont pro t égé s par \4 echo ”<!doctype ␣html>\n” ;5 echo ”<html␣ lang=\” f r \”>\n” ;6 echo ”<head>\n” ;7 echo ”<meta␣ cha r s e t=\”” ;8 ␣␣ echo␣ $char s e t ;9 ␣␣ echo␣”\”/>\n” ;10 echo ”<l i n k ␣ r e l=\” s t y l e s h e e t \”␣ h r e f=\”” ;11 ␣␣ echo␣ $css_sheet ;12 ␣␣ echo␣”\”␣/>\n” ;13 // concaténat ion de cha îne s de c a r a c t è r e s .14 echo ”<t i t l e >” . $ t i t l e . ”</ t i t l e >\n” ;15 echo ”</head>\n<body>\n” ;16 }

51


17 ?>1819 <?php20 func t i on outputFinFichierHTML5 ( )21 {22 echo ”</body>\n</html>\n” ;23 }24 ?>2526 <?php27 outputEnTeteHTML5 ( ’ He l lo world ve r s i on 2 ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;28 ?>29 <p>30 <?php // début du script PHP31 echo ” He l lo ␣World␣ ! ” ; // On a f f i c h e du code HTML s i l a s o r t i e32 // f i n du script PHP33 ?>34 </p>35 <?php36 outputFinFichierHTML5 ( ) ;37 ?>

3.3 Inclure un fichier PHP dans un autreÉvidemment, si le but des fonctions PHP est de cacher et de réutiliser une partie du code,il est commode de pouvoir écrire une fois pour toutes la fonction dans un seul fichier, puisd’utiliser la fonction dans tous nos scripts par la suite. Ici les fonctions outputEnTeteXHTMLet outputFinFichierXHTML sont utilisées dans tous les scripts qui affichent du code HTML.(en effet, nous verrons plus loin que certains fichiers PHP sont de la pure programmation etn’affichent rien.)

exemples/php1/commonFunctions.php1 <?php // début d ’ un script PHP2 func t i on outputEnTeteHTML5( $ t i t l e , $charset , $css_sheet ) {3 // s o r t i e du doctype . Les gu i l l eme t s HTML sont pro t égé s par \4 echo ”<!doctype ␣html>\n” ;5 echo ”<html␣ lang=\” f r \”>\n” ;6 echo ”<head>\n” ;7 echo ”<meta␣ cha r s e t=\”” ;8 ␣␣ echo␣ $char s e t ;9 ␣␣ echo␣”\”/>\n” ;10 echo ”<l i n k ␣ r e l=\” s t y l e s h e e t \”␣ h r e f=\”” ;11 ␣␣ echo␣ $css_sheet ;12 ␣␣ echo␣”\”␣/>\n” ;13 // concaténat ion de cha îne s de c a r a c t è r e s .14 echo ”<t i t l e >” . $ t i t l e . ”</ t i t l e >\n” ;15 echo ”</head>\n<body>\n” ;16 }17 ?>1819 <?php20 func t i on outputFinFichierHTML5 ( )21 {

52


22 echo ”</body>\n</html>\n” ;23 }24 ?>

exemples/php1/ex03_include.php1 <?php inc lude ( ’ . / commonFunctions . php ’ ) ;23 outputEnTeteHTML5 ( ’ He l lo world ve r s i on 3 ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;4 ?>5 <p>6 <?php // début du script PHP7 echo ” He l lo ␣World␣ ! ” ; // On a f f i c h e du code HTML s i l a s o r t i e8 // f i n du script PHP9 ?>10 </p>11 <?php12 outputFinFichierHTML5 ( ) ;13 ?>

3.4 Arithmétique : types int et floatEn PHP, on ne déclare pas les types des variables ou des paramètres de fonctions. Celui-ci estdéfini lors de l’initialisation de la fonction. Des fonctions permettent cependant de tester letype ou d’accéder au nom du type d’une variable. Nous en verrons par la suite.

exemples/php1/ex04_arithmetique_types.php1 <?php include_once ’ . / commonFunctions . php ’ ; ?>23 <?php4 outputEnTeteHTML5 ( ’ Arithmétique f l o t t a n t e et en t i è r e ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;5 ?>6 <p>7 <?php // début du script PHP8 func t i on appliqueTVA( $prixHT , $taux ) {

53


9 $prixTTC = $prixHT*(1.0+ $taux /100 .0 ) ;10 re turn $prixTTC ;11 }12 ?>13 <h1>Calcu l de TVA</h1>14 <p>15 <?php16 $pr ix = 182 . 0 ;17 echo ”Pour␣un␣ pr ix ␣ hors ␣ taxe ␣de␣” . $pr ix . ”␣&euro ; ␣ et ␣un␣taux␣de␣19 ,6%\n” ;18 echo ” l e ␣ pr ix ␣TTC␣ e s t ␣de␣ : ␣”19 . round ( appliqueTVA( $prix , 19 . 6 ) , 2 ) . ”␣&euro ; . \ n” ;20 echo ”<br/>\nAl lez ␣ ! ␣On␣ ar rond i ␣à␣ : ␣” . i n t v a l ( appliqueTVA( $prix , 19 . 6 ) ) . ”␣&euro

; . \ n” ;21 ?>22 </p>23 <?php24 outputFinFichierHTML5 ( ) ;25 ?>

3.5 Tableaux indexés : avec une clé de type intOn crée un tableau avec la fonction array. On accéde à ses éléments (ici indexés par un int)en utilisant des crochets [ ]. La taille des tableaux peut être obtenue via la fonction sizeof.

exemples/php1/ex05_tableaux_keyInt.php1 <?php include_once ’ . / commonFunctions . php ’ ; ?>23 <?php4 outputEnTeteHTML5 ( ’ Tableaux 1 ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;5 ?>6 <p>7 <h1>Tableaux avec c l é e n t i è r e s</h1>8 <p>

54


9 <?php10 $tab leau = array (23 , 45 , 41 , 6 , 04) ;11 echo ” ( ” ;12 for ( $ i=0 ; $ i < s i z e o f ( $tab leau ) ; $ i++) {13 echo $tab leau [ $ i ] ;14 i f ( $ i + 1 < s i z e o f ( $tab leau ) )15 echo ” , ␣” ;16 }17 echo ” ) \n” ;18 ?>19 </p>20 <?php21 outputFinFichierHTML5 ( ) ;22 ?>

3.6 Tableaux associatifs : avec une clé de type StringIl existe en PHP une deuxième sorte de tableaux : les tableaux associatifs, ainsi nommés carils associent une valeur à une clef qui est une chaîne de caractères. On peut tout de mêmeparcourir l’ensemble du tableau en utilisant une boucle foreach.

exemples/php1/ex06_tableaux_keyString.php1 <?php include_once ’ . / commonFunctions . php ’ ; ?>23 <?php4 outputEnTeteHTML5 ( ’ Tableaux 2 ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;5 ?>6 <p>7 <h1>Tableau avec c l é de type St r ing</h1>8 <p>9 <?php10 $tab leau = array ( ’nom’ => ’ Caesar ’ , ’ prénom ’ => ’ Jules ’ ) ;11 echo ”<ul>\n” ;12 // accè s aux éléments :13 echo ”<l i >Accès␣aux␣ éléments ␣du␣ tab leau ␣:<br/>” ;

55


14 echo ”Nom␣ : ␣” . $tab leau [ ’ nom ’ ] . ”<br/>\n” ;15 echo ”Prénom␣ : ␣” . $tab leau [ ’ prénom ’ ] . ”.<br/></ l i >\n” ;16 // a f f i c h a g e de l ’ ensemble des va l eu r s du tab leau :17 echo ”<l i >Les␣ va l eu r s ␣du␣ tab leau ␣ sont ␣:<br/></ l i >\n” ;18 fo r each ( $tab leau as $chaine ) {19 echo $chaine . ”␣” ;20 }21 echo ”<br/>\n” ;22 // a f f i c h a g e des c l é s e t des va l eu r s du tab leau23 echo ”<l i >Les␣données ␣du␣ tab leau ␣ sont ␣:<br>” ;24 fo r each ( $tab leau as $ c l e => $chaine ) {25 echo $ c l e . ”␣ : ␣” . $chaine . ”<br/></ l i >\n” ;26 }27 echo ”</ul>\n” ;28 ?>29 </p>30 <?php31 outputFinFichierHTML5 ( ) ;32 ?>

3.7 Passage de paramètre à un script PHPDans l’exemple suivant, le premier script passe deux paramètes au second : le titre de la pageet le texte à afficher.

Nous transmettons ici les paramètres par la méthode GET, la méthode POST, qui a

56


l’avantage de ne pas faire apparaître les paramètres dans l’URL, est similaire au niveau pro-grammation et sera vue plus loin.

L’url du second script dans le navigateur est ici :

http://www.remysprogwebtuto.org/exemples/php1/\ex08_passages_parametres2.php?texte=Bonjour&titre=monTitre

exemples/php1/ex07_passages_parametres1.php1 <?php include_once ’ . / commonFunctions . php ’ ; ?>23 <?php4 $ t i t r e = ’Mon t i t r e par défaut ’ ;5 i f ( i s s e t ($_GET[ ’ t i t r e ’ ] ) ) {6 $ t i t r e = $_GET[ ’ t i t r e ’ ] ;7 }8 outputEnTeteHTML5( $ t i t r e , ’UTF−8 ’ , ’ myStyle . css ’ ) ;9 ?>10 <p>11 Pour l anc e r l ’ autre s c r i p t avec comme tex t e12 <?php13 $texte =”Bonjour ” ;14 echo $texte ;15 echo ”<br/>␣ et ␣comme␣ t i t r e ␣” ;16 $ t i t r e = ”monTitre ” ;17 echo $ t i t r e . ”␣” ;18 echo ”<a␣ h r e f=␣\”” ;19 ␣␣ echo␣ ’ . / ex08_passages_parametres2 . php? t ex t e=’20 ␣␣␣␣␣␣ . $ texte21 ␣␣␣␣␣␣ . ”&t i t r e=”22 ␣␣␣␣␣␣ . $ t i t r e23 ␣␣␣␣␣␣ . ’ ”>c l i q u e z i c i</a> ’ ;24 ?>.25 </p>26 <?php27 outputFinFichierHTML5 ( ) ;28 ?>

57


Le second script peut alors récupérer les paramètres texte et titre dans un tableau as-sociatif $_GET. On peut vérifier que les variables texte et titre ont bien été utilisées via lafonction isset.

exemples/php1/ex08_passages_parametres2.php1 <?php include_once ’ . / commonFunctions . php ’ ; ?>23 <?php4 $ t i t r e = ’Mon t i t r e par défaut ’ ;5 i f ( i s s e t ($_GET[ ’ t i t r e ’ ] ) ) {6 $ t i t r e = $_GET[ ’ t i t r e ’ ] ;7 }89 outputEnTeteHTML5( $ t i t r e , ’UTF−8 ’ , ’ myStyle . css ’ ) ;1011 ?>12 <p>13 <?php // début du script PHP14 i f ( i s s e t ($_GET[ ’ texte ’ ] ) ) {15 echo $_GET[ ’ texte ’ ] ;16 } e l s e {17 echo ” He l lo ␣World␣ ! ” ; // On a f f i c h e du code HTML s i l a s o r t i e18 }19 // f i n du script PHP20 ?>21 </p>22 <?php23 outputFinFichierHTML5 ( ) ;24 ?>

Certains navigateurs ne supportant pas les URL avec des caractères comme des accents ouautres caractères UTF-8 quelconques (notamment le & ! ! !), si on veut passer une chaîne unpeu générale en paramètre, on la codera en une string simple via la fonction htmlentities.

Dans l’exemple suivant, l’URL du second script est :

http://www.remysprogwebtuto.org/exemples/php1/ex10_passages_parametres4.php?\texte=L%27%C3%A9t%C3%A9%20va%20%C3%AAtre%20chaud%20cette%20ann%C3%A9e\&titre=Passage%20de%20param%C3%A8tres%20avec%20accents%20et%20espaces

58


exemples/php1/ex09_passages_parametres3.php1 <?php include_once ’ . / commonFunctions . php ’ ; ?>23 <?php4 $ t i t r e = ’Mon t i t r e par défaut ’ ;5 i f ( i s s e t ($_GET[ ’ t i t r e ’ ] ) ) {6 $ t i t r e = $_GET[ ’ t i t r e ’ ] ;7 }8 outputEnTeteHTML5( $ t i t r e , ’UTF−8 ’ , ’ myStyle . css ’ ) ;9 ?>10 <p>11 Pour l anc e r l ’ autre s c r i p t s avec comme tex t e12 <?php13 $texte =”L ’ é t é ␣va␣ ê t r e ␣chaud␣ c e t t e ␣année ” ;14 echo ’ ” ’ . $ t ex te . ’ ” ’ ;15 echo ”<br/>␣ et ␣comme␣ t i t r e ␣” ;16 $ t i t r e = ”Passage ␣de␣paramètres ␣ avec ␣ accent s ␣ et ␣ e space s ” ;17 echo ’ ” ’ . $ t i t r e . ’ ” ’ ;18 echo ”\n<a␣ h r e f=␣\”” ;19 ␣␣ echo␣ ’ . / ex10_passages_parametres4 . php? t ex t e=’20 ␣␣␣␣ . h tm l e n t i t i e s ( $texte , ␣ENT_COMPAT, ␣”UTF−8” )21 ␣␣␣␣ . ”&t i t r e=”22 ␣␣␣␣ . h tm l e n t i t i e s ( $ t i t r e , ␣ENT_COMPAT, ␣”UTF−8” )23 ␣␣␣␣ . ”\”>\n\ t c l i q u e z ␣ i c i \n</a>” ;24 ?>.25 </p>26 <?php27 outputFinFichierHTML5 ( ) ;28 ?>

exemples/php1/ex10_passages_parametres4.php1 <?php include_once ’ . / commonFunctions . php ’ ; ?>23 <?php4 $ t i t r e = ’Mon t i t r e par défaut ’ ;5 i f ( i s s e t ($_GET[ ’ t i t r e ’ ] ) ) {6 $ t i t r e = html_entity_decode ($_GET[ ’ t i t r e ’ ] ) ;

59


7 }89 outputEnTeteHTML5( $ t i t r e , ’UTF−8 ’ , ’ myStyle . css ’ ) ;1011 ?>12 <p>13 <?php // début du script PHP14 i f ( i s s e t ($_GET[ ’ texte ’ ] ) ) {15 echo html_entity_decode ($_GET[ ’ texte ’ ] ) ;16 } e l s e {17 echo ” He l lo ␣World␣ ! ” ; // On a f f i c h e du code HTML s i l a s o r t i e18 }19 // f i n du script PHP20 ?>21 </p>22 <?php23 outputFinFichierHTML5 ( ) ;24 ?>

60

Chapitre 4

Les classes en PHP

La programmation objet permet, en développant une bonne fois pour toutes un ensemble declasses appelé framework, de simplifier grandement le travail de développement et de mainte-nance de logiciels complexes, de manière que ces logiciels soient facilement adaptables. Ainsi,une entreprise telle qu’une société de services, d’un client à l’autre, reprendra tel quel unegrande partie de son code, sans même le retoucher. Ce code doit avoir une interface de déve-loppement, c’est à dire qu’il doit mettre à disposition des développeurs un ensemble de méthodesqui permettent de réaliser toutes les tâches de base dont le programmeur peut avoir besoinpour développer chaque application particulière.

Les caractéristiques d’un framework doivent être :

1. Robustesse : les classes de base du framework doivent être testées et doivent être conçuspour réduire le risque de bugs lorsqu’un développer utilise les classes du framework, oud’attaques lorsqu’un utilisateur malveillant utilise un site construit à partir du framework.

2. Généricité et versatilité : Le code doit pouvoir s’adapter, sans le retoucher, au plus grandnombre d’applications possibles.

3. Facilité de maintenance du framework lui-même avec une modularité interne, les grandoutils (librairies, etc...) utilisés par le framework étant circonscrits à des sous-modulesavec des wrappers de manière à pouvoir changer l’un de ces outils sans revoir l’enembledu code.

4. Une bonne lisibilité et une bonne documentation, notamment parce que les développeursqui utilisent le framework ne sont pas nécessairement les mêmes que les développeurs duframework lui-même.

Par rapport à ces quatre objectifs, des outils sont à disposition des développeurs du frame-work :

1. Robustesse : la visibilité des variables et des méthodes (variables et méthodes privées,protected ou publiques) permet au développeur du framework de garantir que l’utilisateurdu framework n’ira pas faire des bêtises en rentrant dans le code du framework, ce quipourrait amener les classes du framework dans un état incohérent.

2. Généricité : les patrons de conception (ou design patterns) permettent de développer desinterfaces pour le framework qui rendent les code similaire d’une application à l’autre etqui permet de séparer différents aspects du développement d’une application.

61


3. Facilité de maintenance du framework : la conception UML permet d’avoir une visionschématique du framework, qui peut souvent contenir des centaines de classes. Chaqueclasse est si possible très simple et la complexité se situe dans la communication entreclasses. La réécriture ou la modification d’une classe demande alors une interventionlimitée, et ne doit pas affecter les autres classes, pourvu que l’interface entre les classesreste la même.

4. Lisibilité : une forme stéréotypée pour l’interface des classes, les identificateurs, etc. rendle code plus lisible. De plus, des outils permettent de générer automatiquement unedocumentation (HTML, LATEX, PDF, etc.) des classes à partir de commentaires dansle code. C’est le cas de Doxygen pour le PhP.

4.1 Exemple de classe PHPUn classe doit permettre de manipuler un certain type d’objets. La classe doit permettre dereprésenter les caractéristiques des objets, à travers un certain nombre d’attributs, qui sontles variables communes à chacun des objets de ce type. La classe doit aussi permettre à undéveloppeur qui l’utilise de réaliser toutes les opération nécessaires sur ces objets, à traves desméthodes. Les méthodes d’une classe sont les fonctions qui opèrent en interne sur la classe. Lamanipulation des attributs se fait presque systématiquement à travers des méthodes, cet quiévite que l’utilisateur de la classe ne mette les attributs dans un état incohérent (exemple :variables NULL alors qu’elle n’est pas censée l’être, ce qui génère un bug). Pour celà, on metles attributs privés, c’est à dire que seules les méthodes de la classe peuvent accéder à cesattributs. Pour les autres classes, ces attributs ne sont pas visibles : elle ne peuvent pas yaccéder directement mais uniquement à travers des méthodes.

Voici un exemple avec une classe contenant l’adresse d’une personne. Les commentairesont une forme spéciale pour pouvoir générer la documentation du code avec l’outil Doxygen.Les attributs sont privés et sont toujours initialisés via les setters, qui sont des méthodesspacialement conçues qui testent les condition que doivent satisfaire les attributs (ici être nonnull) avant des les initialiser. Le constructeur utilise les setters ce qui a l’avantage de factoriserle code, c’est à dire que les tests sur les valeurs des attributs ne sont réalisés qu’une seule fois.

exemples/php2/ex01_classeAdresse.php1 <?php2 /**3 @br ie f La c l a s s e adr e s s e con t i en t l ’ ad r e s s e d ’ une personne4 ( qui peut ê t r e un c l i e n t , un employé , un f ou rn i s s eu r , e t c . . . )5 */6 class Adresse {7 /** Numéro dans l a rue , ne do i t pas ê t r e nu l l mais peut ê t r e v ide */8 p r i va t e $numeroRue ;9 /** Nom de l a rue , ne do i t pas ê t r e nu l l mais peut ê t r e v ide */10 p r i va t e $rue ;11 /** Complément ( l i e u dit , e t c . ne do i t pas ê t r e nu l l mais peut ê t r e v ide */12 p r i va t e $complementAddr ;13 /** code po s t a l */14 p r i va t e $codePosta l ;15 /** nom de l a v i l l e . ne do i t pas ê t r e nu l l mais peut ê t r e v ide */16 p r i va t e $ v i l l e ;17 /** nom du pays . ne do i t pas ê t r e nu l l mais peut ê t r e v ide */

62

Chapitre 4 : Les classes en PHP

18 p r i va t e $pays ;192021 /** @br ie f : Accesseur : permet d ’ ob t en i r l e numéro dans l a rue . */22 pub l i c func t i on getNumeroRue ( ) {23 return $th i s−>numeroRue ;24 }2526 /** @br ie f : Accesseur : permet d ’ ob t en i r l e nom la rue . */27 pub l i c func t i on getRue ( ) {28 return $th i s−>rue ;29 }3031 /** @br ie f : Accesseur : permet d ’ ob t en i r l e nom l e complément d ’ ad r e s s e . */32 pub l i c func t i on getcomplementAddr ( ) {33 return $th i s−>complementAddr ;34 }3536 /** @br ie f : Accesseur : permet d ’ ob t en i r l e nom l e code po s t a l . */37 pub l i c func t i on getCodePostal ( ) {38 return $th i s−>codePosta l ;39 }4041 /** @br ie f : Accesseur : permet d ’ ob t en i r l e nom la v i l l e . */42 pub l i c func t i on g e tV i l l e ( ) {43 return $th i s−>v i l l e ;44 }454647 /** @br ie f : Accesseur : permet d ’ ob t en i r l e pays . */48 pub l i c func t i on getPays ( ) {49 return $th i s−>pays ;50 }5152 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e nom de l a rue .53 @param $NumeroRue l e numéro à u t i l i s e r . peut ê t r e nu l l .54 */55 pub l i c func t i on setNumeroRue ( $numeroRue ) {56 $th i s−>numeroRue = ($numeroRue == nu l l ) ? ”” : $numeroRue ;57 }5859 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e numéro dans l a rue .60 @param $Rue l e nom de l a rue ou de l a p lace à u t i l i s e r . peut ê t r e nu l l .61 */62 pub l i c func t i on setRue ( $rue ) {63 $th i s−>rue = ( $rue == nu l l ) ? ”” : $rue ;64 }6566 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e complément d ’ ad r e s s e .67 @param $ComplementAddr l e complément d ’ adr e s s e à u t i l i s e r . peut ê t r e nu l l .68 */69 pub l i c func t i on setComplementAddr ( $complementAddr ) {70 $th i s−>complementAddr = ( $complementAddr == nu l l ) ? ”” : cComplementAddr ;71 }7273 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e code po s t a l .

63


74 @param $CodePostal l e numéro à u t i l i s e r . peut ê t r e nu l l75 */76 pub l i c func t i on setCodePosta l ( $codePosta l ) {77 $th i s−>codePosta l = ( $codePosta l == nu l l ) ? ”” : $codePosta l ;78 }7980 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e nom de l a v i l l e .81 @param $V i l l e l e nom de l a v i l l e à u t i l i s e r . peut ê t r e nu l l82 */83 pub l i c func t i on s e tV i l l e ( $ v i l l e ) {84 $th i s−>v i l l e = ( $ v i l l e == nu l l ) ? ”” : $ v i l l e ;85 }8687 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e nom du pays .88 @param $Pays l e nom de pays à u t i l i s e r . peut ê t r e nu l l89 */90 pub l i c func t i on setPays ( $pays ) {91 $th i s−>pays = ( $pays == nu l l ) ? ”” : $pays ;92 }9394 /**95 @br ie f Constructeur : i n i t i a l i s e l e s a t t r i b u t s à p a r t i r des paramètres .96 Les paramètres correspondent aux va l eu r s à mettre dans l e s a t t r i b u t s .97 Tout ob j e t do i t ê t r e i n i t i a l i s é avec l e cons t ruc t eu r ( appel à new) .98 I c i , l e s paramètres peuvent ê t r e nu l l . Les a t t r i b u t s sont a l o r s i n i t i a l i s é s99 à une cha îne vide , permettant l a cohérence de l a c l a s s e .100 */101 pub l i c func t i on __construct ( $numeroRue=nul l , $rue=nul l , $complementAddr=nul l ,102 $codePosta l=nul l , $ v i l l e=nul l , $pays = ’ France ’ ) {103 $th i s−>setNumeroRue ( $numeroRue ) ;104 $th i s−>setRue ( $rue ) ;105 $th i s−>setComplementAddr ( $complementAddr ) ;106 $th i s−>setCodePosta l ( $codePosta l ) ;107 $th i s−>s e tV i l l e ( $ v i l l e ) ;108 $th i s−>setPays ( $pays ) ;109 }110111 /**112 @br ie f Méthode d ’ a f f i c h a g e . Permet d ’ a f f i c h e r une adre s s e en XHTML 1.0

s t r i c t .113 Les a t t r i b u t s do ivent ê t r e non nu l l . ( mais normalement ça ne r i s qu e pas d ’

a r r i v e r114 car l e s a t t r i b u t s sont p r i v é s donc l ’ u t i l i s a t e u r de l a c l a s s e n ’ a pas pu l e s

mettre à nu l l .115 Les s e t t e r s e t l e cons t ruc t eu r e s t a i n s i conçu que l e s a t t r i b u t s ne peuvent

pas ê t r e nu l l .116 */117 pub l i c func t i on a f f i c h e ( ) {118 echo ”<strong>Adresse ␣ : ␣</strong><br/>\n” ;119 echo $th i s−>numeroRue ;120 i f ( s t r l e n ( $th i s−>numeroRue ) >=1)121 echo ” , ␣” ;122 echo $th i s−>rue ;123 i f ( s t r l e n ( $th i s−>rue ) >=1)124 echo ”<br/>” ;125 echo $th i s−>complementAddr ;

64


126 i f ( s t r l e n ( $th i s−>complementAddr ) >=1)127 echo ”<br/>” ;128 echo $th i s−>codePosta l . ”␣” ;129 echo $th i s−>v i l l e ;130 i f ( s t r l e n ( $th i s−>v i l l e ) >=2)131 echo ”<br/>” ;132 echo $th i s−>pays . ”<br/>” ;133 }134 }135 ?>

Voyons maintenant un petit script de test qui crée des adresses et les affiche. Seul le scriptde test génère du code HTML et comporte un en-tête HTML (même si ce code HTML est enfait généré dans la méthode affiche de la classe adresse).

exemples/php2/ex02_classesPHP.php1 <?php2 include_once ’ . / commonFunctions . php ’ ;3 include_once ’ . / ex01_classeAdresse . php ’ ;4 ?>56 <?php7 outputEnTeteHTML5 ( ’Ma première c l a s s e PHP’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;8 ?>

65


910 <p>11 <?php12 $adre s s e1 = new Adresse ( ’ 10 ’ , ’ a l l é e du net ’ , ’ Quart ie r de l \ ’ avenir ’ ,13 ’63000 ’ , ’ Clermont−Ferrand ’ ) ;14 $adresse1−>a f f i c h e ( ) ;1516 $adre s s e2 = new Adresse ( ’ 10 ’ , ’Downing Street ’ , NULL,17 NULL, ’London ’ , ’ United Kingdom ’ ) ;18 $adresse2−>a f f i c h e ( ) ;1920 $adre s s e3 = new Adresse ( ) ;21 $adresse3−>a f f i c h e ( ) ;22 ?>23 </p>24 <?php25 outputFinFichierHTML5 ( ) ;26 ?>

4.2 Validation en entrée et gestion d’une exceptionLes setters de la classe vont jouer un rôlr important de filtrage des données. En particulier,lorque les données viendront de la saisie d’un formulaire, ces données devront être systémati-quement filtrées car l’utilisateur, qui n’est pas toujours bienveillant, peut mettre n’importe quoidans les champs d’un formulaire. Le filtrage jouera donc un rôle très important pour la sécurité.Par exemple, on prendra soin de limiter la longueur des attributs de type String à la fois auniveau du filtrage, puis au niveau de la base de données (voir chapitres ultérieurs). On pourraaussi utiliser des expressions régulières lors du filtrage grâce aux fonctions preg_match_all oupreg_match (voir man regex(7) pour la formation des expressions régulières). Le gros avantagedu PHP par rapport à d’autres langages comme javascript, est que PHP s’exécute côté serveurdonc un pirate n’aura pas la possibilité d’analyser précisément ce que fait le filtrage.

Si une valeur invalide est détectée au niveau du filtrage, on générera une exception avec unmessage d’erreur. Cette exception pourra être gérée à un autre niveau dans l’application, iciau niveau du script de test qui affiche quelques employés.

exemples/php2/ex03_classeEmploye.php1 <?php2 include_once ’ . / ex01_classeAdresse . php ’ ;3 ?>4 <?php5 /**6 @br ie f La c l a s s e Employe r ep r é s en t e un employé de l ’ e n t r e p r i s e .7 E l l e c on t i en t l ’ i d e n t i t é (nom prénom) , l ’ adresse , l e noméro de té l éphone8 et l e s a l a i r e mensuel de l ’ employé .9 */10 class Employe {11 /** nom de l ’ employé : o b l i g a t o i r e . Le nom de l ’ employé ne peut pas ê t r e nu l l

ou v ide . */12 p r i va t e $nom ;13 /** prénom de l ’ employé */14 p r i va t e $prenom ;15 /** adre s s e de l ’ employé */

66


16 p r i va t e $adre s s e ;17 /** premier numéro de té l éphone */18 p r i va t e $te lephone1 ;19 /** deuxième numéro de té l éphone */20 p r i va t e $te lephone2 ;21 /** c a t é g o r i e de l ’ employé : ” s e c r é t a i r e ” , ” commercial ” , ” technique ” ou ”pdg”

*/22 p r i va t e $ c a t e g o r i e ;23 /** s a l a i r e mensuel de l a personne en euros /mois */24 p r i va t e $ sa l a i r eMensue l ;2526 /**27 tab leau de toute s l e s c a t é g o r i e s d ’ employés p o s s i b l e s .28 un a t t r i bu t s t a t i qu e e s t un a t t r i bu t qui e x i s t e en un s eu l exempla i re29 commun à tous l e s ob j e t s de l a c l a s s e .30 Cela é v i t e d ’ avo i r autant de cop i e s du tab leau $categor ie sEmployes31 qu ’ i l y a d ’ i n s t ance de l a c l a s s e Employe en mémoire .32 */33 p r i va t e s t a t i c $categor ie sEmployes = array ( ” s e c r é t a i r e ” , ” commercial ” , ”

techn ique ” , ” boss ” ) ;3435 /** Méthode s t a t i qu e de va l i d a t i o n d ’ un paramètre de c a t é g o r i e .36 l a va l eur do i t se t rouver dans l e s tab leau $categor ie sEmployes .37 Une méthode s t a t i qu e e s t une méthode qui ne s ’ app l ique pas à un ob j e t

p a r t i c u l i e r .38 On l ’ u t i l i s e avec s e l f : : ou à l ’ e x t é r i e u r de l a c l a s s e avec Employe : :39 */40 pub l i c s t a t i c func t i on va l i dCat ego r i e ( $ c a t e g o r i e ) {41 i f ( $ c a t e g o r i e == nu l l | | ! i s_ s t r i n g ( $ c a t e g o r i e ) )42 re turn f a l s e ;43 for ( $ i=0 ; $i<s i z e o f ( s e l f : : $categor ie sEmployes ) ; $ i++) {44 i f ( strcmp ( s e l f : : $categor ie sEmployes [ $ i ] , $ c a t e g o r i e )==0) {45 return true ;46 }47 }48 return f a l s e ;49 }50 /** @br ie f a c c e s s eu r : permet d ’ ob t en i r l e nom de l ’ employé */51 pub l i c func t i on getNom ( ) {52 return $th i s−>nom;53 }5455 /** @br ie f a c c e s s eu r : permet d ’ ob t en i r l e prénom de l ’ employé */56 pub l i c func t i on getPrenom ( ) {57 return $th i s−>prenom ;58 }5960 /** @br ie f a c c e s s eu r : permet d ’ ob t en i r l ’ ad r e s s e de l ’ employé */61 pub l i c func t i on getAdresse ( ) {62 return $th i s−>adre s s e ;63 }6465 /** @br ie f a c c e s s eu r : permet d ’ ob t en i r l e té l éphone 1 de l ’ employé */66 pub l i c func t i on getTelephone1 ( ) {67 return $th i s−>te lephone1 ;68 }

67


6970 /** @br ie f a c c e s s eu r : permet d ’ ob t en i r l e té l éphone 2 de l ’ employé */71 pub l i c func t i on getTelephone2 ( ) {72 return $th i s−>te lephone2 ;73 }7475 /** @br ie f a c c e s s eu r : permet d ’ ob t en i r l a c a t é g o r i e de l ’ employé */76 pub l i c func t i on ge tCategor i e ( ) {77 return $th i s−>ca t e g o r i e ;78 }798081 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e nom de l a personne82 @param $Nom l e nom de l a personne . Doit ê t r e non nu l l e t comporter83 au moins 1 c a r a c t è r e .84 */85 pub l i c func t i on setNom($nom) {86 i f ($nom == nu l l | | s t r l e n ($nom)<1 | | s t r l e n ($nom) > 50) {87 throw new Exception ( ’ Désolé , toute personne do i t avo i r un nom et l e nom a

au plus 50 c a r a c t è r e s ! ’ ) ;88 } e l s e {89 $th i s−>nom = $nom ;90 }91 }9293 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e nom de l a personne */94 pub l i c func t i on setPrenom ( $prenom) {95 $th i s−>prenom = ($prenom == nu l l | | s t r l e n ( $prenom) > 50) ? ”” : $prenom ;96 }979899 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l ’ ad r e s s e de l a personne */100 pub l i c func t i on se tAdres se ( $adre s s e ) {101 i f ( $adre s s e == nu l l | | strcmp ( ge t_c la s s ( $adre s s e ) , ’ Adresse ’ ) != 0) {102 $th i s−>adre s s e = new Adresse ( ) ;103 } e l s e {104 $th i s−>adre s s e = $adre s s e ;105 }106 }107108 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e té l éphone 1 de l a personne

*/109 pub l i c func t i on setTelephone1 ( $te lephone1 ) {110 $th i s−>te lephone1 = ( $te lephone1 == nu l l | | s t r l e n ( $te lephone1 ) > 15) ? ”” :

$te lephone1 ;111 }112113 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e té l éphone 2 de l a personne

*/114 pub l i c func t i on setTelephone2 ( $te lephone2 ) {115 $th i s−>te lephone2 = ( $te lephone2 == nu l l | | s t r l e n ( $te lephone2 ) > 15) ? ”” :

$te lephone2 ;116 }117118 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e s a l a i r e mensuel de l a

personne

68


119 @param $Sa l a i r e s a l a i r e mensuel en euros /mois120 */121 pub l i c func t i on s e tSa l a i r eMensue l ( $ s a l a i r e ) {122 i f ( $ s a l a i r e == nu l l | | ! is_numeric ( $ s a l a i r e ) ) {123 $th i s−>sa la i r eMensue l = 0 . 0 ;124 } e l s e {125 $th i s−>sa la i r eMensue l = $ s a l a i r e ;126 }127 }128129 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l a c a t é g o r i e de l a personne130 @param $Categor i e do i t cor re spondre à une c a t é g o r i e d ’ employé r é p e r t o r i é e .131 */132 pub l i c func t i on s e tCat ego r i e ( $ c a t e g o r i e ) {133 i f ( ! s e l f : : v a l i dCa t ego r i e ( $ c a t e g o r i e ) ) {134 throw new Exception ( ”Erreur , ␣ c a t é g o r i e ␣d ’ employé␣” . $ c a t e g o r i e . ”␣ i n v a l i d e

. ” ) ;135 } e l s e {136 $th i s−>ca t e g o r i e = $ca t e g o r i e ;137 }138 }139 /**140 @br ie f Constructeur : i n i t i a l i s e l e s a t t r i b u t s à p a r t i r des paramètres .141 Les paramètres correspondent aux va l eu r s à mettre dans l e s a t t r i b u t s .142 Tout ob j e t do i t ê t r e i n i t i a l i s é avec l e cons t ruc t eu r ( appel à new) .143 Des except i on s sont r e j e t é e s en cas de paramètres i n v a l i d e .144 */145 pub l i c func t i on __construct ($nom , $prenom=nul l , $adre s s e=nul l ,146 $te lephone1=nul l , $ te l ephone2=nul l , $ s a l a i r e =0.0 ,147 $ c a t e g o r i e =’ technique ’ ) {148 $th i s−>setNom($nom) ;149 $th i s−>setPrenom ( $prenom) ;150 $th i s−>setAdres se ( $adre s s e ) ;151 $th i s−>setTelephone1 ( $te lephone1 ) ;152 $th i s−>setTelephone2 ( $te lephone2 ) ;153 $th i s−>se tSa l a i r eMensue l ( $ s a l a i r e ) ;154 $th i s−>se tCat ego r i e ( $ c a t e g o r i e ) ;155 }156157 /**158 @br ie f Méthode d ’ a f f i c h a g e . Permet d ’ a f f i c h e r une adre s s e en XHTML 1.0

s t r i c t .159 Les a t t r i b u t s do ivent ê t r e non nu l l . ( mais normalement ça ne r i s qu e pas d ’



pas ê t r e nu l l .162 */163 pub l i c func t i on a f f i c h e ( ) {164 echo ”<strong>Employé␣ : ␣</strong><br/>” ;165 echo ”nom␣ : ␣” . $ th i s−>nom. ”<br/>\n” ;166 i f ( s t r l e n ( $th i s−>prenom)>=1)167 echo ”Prénom␣ : ␣” . $ th i s−>prenom . ”<br/>\n” ;168 echo ” Catégor i e ␣ : ␣” . $ th i s−>ca t e g o r i e . ”<br/>\n” ;169 $th i s−>adresse−>a f f i c h e ( ) ;

69


170 i f ( s t r l e n ( $th i s−>te lephone1 )>=1){171 echo ”Téléphone␣1␣ : ␣” . $ th i s−>te lephone1 . ”<br/>\n” ;172 }173 i f ( s t r l e n ( $th i s−>te lephone2 )>=1){174 echo ”Téléphone␣2␣ : ␣” . $ th i s−>te lephone2 . ”<br/>\n” ;175 }176 echo ” S a l a i r e ␣mensuel ␣ : ␣” . $ th i s−>sa la i r eMensue l . ”␣&euro ; ␣par␣mois<br/>\n” ;177 }178 }179 ?>

Notons l’attribut categoriesEmployes et la méthode validCategorie qui sont déclaréestatiques. Celà signifie qu’ils s’appliquent à la classe et non pas à un objet de la classe. Onparle de variables de classe et méthodes de classe. Une variable de classe n’existe qu’en un seulexemplaire commun à tous les objets de la classe.

Voici le script de test qui crée quelques employés. Lorsque’une exception est reçue, aulieu d’afficher l’employé, on affiche le message d’erreur. Nous verrons plus loin comment cemécanisme de gestion des exceptions permet de renvoyer à l’utilisateur des informations surles attributs invalides qu’il a saisi dans le formulaire.

exemples/php2/ex04_classesPHP2.php1 <?php2 include_once ’ . / commonFunctions . php ’ ;3 include_once ’ . / ex01_classeAdresse . php ’ ;4 include_once ’ . / ex03_classeEmploye . php ’ ;5 ?>6

70


7 <?php8 outputEnTeteHTML5 ( ’ Gest ion d\ ’ une except ion ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;9 ?>10 <p>11 <?php12 try {13 $adre s s e1 = new Adresse ( ’ 10 ’ , ’ a l l é e du net ’ , ’ Quart ie r de l \ ’ avenir ’ ,14 ’63000 ’ , ’ Clermont−Ferrand ’ ) ;15 $employe1 = new Employe ( ”Modèle” , nu l l , $adresse1 ,16 ”04␣73␣00␣00␣00” , ”18” , 100 .5 , ’ s e c r é t a i r e ’ ) ;17 $employe1−>a f f i c h e ( ) ;18 } catch ( Exception $e ) {19 echo ’ Exception reçue : ’ , $e−>getMessage ( ) , ”\n” ;20 } echo ”<br/>\n” ;21 try {22 $adre s s e2 = new Adresse ( ’ 10 ’ , ’Downing Street ’ , nu l l ,23 nu l l , ’ London ’ , ’ United Kingdom ’ ) ;24 $employe2 = new Employe ( ”Thatcher ” , ”Margaret ” , $adresse2 ,25 ”911” , nu l l , nu l l , ’ boss ’ ) ;26 $employe2−>a f f i c h e ( ) ;27 } catch ( Exception $e ) {28 echo ’ Exception reçue : ’ , $e−>getMessage ( ) , ”\n” ;29 }30 try {31 echo ”<br/>\n” ;32 $adre s s e3 = new Adresse ( ’ 10 ’ , ’ a l l é e du net ’ , ’ Quart ie r de l \ ’ avenir ’ ,33 ’63000 ’ , ’ Clermont−Ferrand ’ , ’ s e c r e t a i r e ’ ) ;34 $employe3 = new Employe ( ”Modèle” , nu l l , $adresse3 ,35 ”04␣73␣00␣00␣00” , ”18” , 100 .5 , ’ badCategory ’ ) ;36 $employe3−>a f f i c h e ( ) ;37 } catch ( Exception $e ) {38 echo ’ Exception reçue : ’ , $e−>getMessage ( ) , ”\n” ;39 }40414243 ?>44 </p>45 <?php46 outputFinFichierHTML5 ( ) ;47 ?>

71

Chapitre 5

Formulaires HTML/PHP

Les formulaires HTML permettent de faire saisir des données par l’utilisateur via son naviga-teur. Ces données sont saisies dans des champs appelés inputs, qui sont définis avec la balise<input>. Les données sont ensuite récupérées dans un script, ici un script PHP. Ces donnéesdoivent impérativement être testées et filtrées pour qu’elles soient cohérentes (par exempleles champs obligatoires ne doivent pas être vides). Renvoyer le formulaire à l’utilisateur aprèsune saisie erronée nécessite de l’organisation au niveau du code, surtout si l’on souhaite quel’utilisateur n’ait pas à ressaisir toutes ses données. Il faut alors initialiser les valeurs du formu-laire qu’on représente avec les données précédemment saisies. Nous présentons deux approchespour ce problème : l’approche naïve et l’approche objet avec gestion des exceptions et mo-dème MVC. Nous penssons que le lecteur adoptera ensuite sans hésiter l’approche objet carl’approche naïve devient vite ingérable. La lecture de l’approche naïve permettra tout de mêmed’étudier la base de la syntaxe des formulaires et de la récupération des données saisies.

5.1 Formulaires HTMLUn formulaire est créé par une balise <form> qui contient la méthode de transmission desdonnées (GET ou POST) et l’action, qui est l’URL du script (ici un script PHP) qui varécupérer les données du formulaire. Chaque input a son label, qui explique à l’utilisateurce qu’il doit saisir dans ce champ. La correspondance entre les inputs et le labels se fait vial’attribut for du label qui doit correspondre à l’attrinut id de l’input. L’attribut name del’input servira lors de la récupération des données. Les attributs id et name de l’input peuventêtre égaux si on veut simplifier.

exemples/forms1/ex01_form_html.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <t i t l e>Mon premier f o rmu la i r e HTML</ t i t l e>6 </head>7 <body>8 <h1>Sa i s i e d ’ un employé</h1>9 <form method=”post ” action=” ex02_recept ion . php”>10 <p>11 <label for=”nomEmploye”>Nom</ label>12 <input type=” text ” name=”nom” id=”nomEmploye” s ize=”30”/>

72

Chapitre 5 : Formulaires HTML/PHP

13 </p>14 <p>15 <label for=”prenomEmploye”>Prénom</ label>16 <input type=” text ” name=”prenom” id=”prenomEmploye” s ize=”30”/><br/>17 </p>18 <p>19 <label for=” te lephone ”>Téléphone</ label>20 <input type=” text ” name=” te lephone ” id=” te lephone ” s ize=”10”/><br/>21 </p>22 <p>23 <strong>Catégor i e :</strong>24 </p>25 <p>26 <label for=” s e c r e t a i r e ”>S e c r é t a i r e</ label>27 <input type=” rad io ” name=” ca t e g o r i e ” value=” s e c r é t a i r e ” id=” s e c r e t a i r e ”

checked=” checked ”/><br/>28 </p>29 <p>30 <label for=”commercial ”>Commercial</ label>31 <input type=” rad io ” name=” ca t e g o r i e ” value=”commercial ” id=”commercial ”/><br

/>32 </p>33 <p>34 <label for=” technique ”>Personnel techn ique</ label>35 <input type=” rad io ” name=” ca t e g o r i e ” value=” technique ” id=” technique ”/><br/>

73


36 </p>37 <p>38 <label for=”boss ”>The Big Boss</ label>39 <input type=” rad io ” name=” ca t e g o r i e ” value=”boss ” id=”boss ”/><br/>40 </p>41 <p>42 <label for=”submit ” style=” d i sp l ay : ␣none ; ”>submit</ label>43 <input type=”submit ” value=”Envoyer”/>44 </p>45 </form>46 </body>47 </html>

La réception des données se fait ici par la méthode POST (comme indiqué dans la balise<form>). Les données sont récupérées dans un tableau associatif $_POST, dont les clefs sont lesattributs name des inputs du formulaire précédent. On teste si ces attributs existent bien viala fonction isset.

exemples/forms1/ex02_reception.php12 <?php inc lude ( ’ . / commonFunctions . php ’ ) ; ?>3 <?php4 outputEnTeteHTML5 ( ’ Réception d\ ’un formula i r e ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;5 ?>

74


6 <?php7 $nom=”” ;8 i f ( i s s e t ($_POST[ ’ nom ’ ] ) ) {9 $nom = $_POST[ ’ nom ’ ] ;10 }11 $prenom=”” ;12 i f ( i s s e t ($_POST[ ’ prenom ’ ] ) ) {13 $prenom = $_POST[ ’ prenom ’ ] ;14 }1516 $te l ephone=”” ;17 i f ( i s s e t ($_POST[ ’ te lephone ’ ] ) ) {18 $te l ephone = $_POST[ ’ te lephone ’ ] ;19 }20 $ c a t e g o r i e=”” ;21 i f ( i s s e t ($_POST[ ’ c a t ego r i e ’ ] ) ) {22 $ c a t e g o r i e = $_POST[ ’ c a t ego r i e ’ ] ;23 }24 echo ”<h1>Données␣ reçues </h1>\n” ;25 echo ”<p>\n” ;26 echo ”nom␣ : ␣” . $nom . ”<br/>\n” ;27 echo ”prenom␣ : ␣” . $prenom . ”<br/>\n” ;28 echo ”Téléphone␣ : ␣” . $te l ephone . ”<br/>\n” ;29 echo ” Catégor i e ␣ : ␣” . $ c a t e g o r i e . ”<br/>\n” ;30 echo ”</p>\n” ;31 ?>3233 <?php34 outputFinFichierHTML5 ( ) ;35 ?>

5.2 Exemple de style CSS pour formulaire

exemples/forms1/ex03_form_html.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l ink rel=” s t y l e s h e e t ” href=” ./ myStyle . c s s ” />6 <t i t l e>Mon premier f o rmu la i r e HTML</ t i t l e>7 </head>8 <body>9 <h1>Sa i s i e d ’ un employé</h1>10 <form method=”post ” action=” ex04_recept ion . php”>11 <p>12 <label for=”nomEmploye”>Nom</ label>13 <input type=” text ” name=”nom” id=”nomEmploye” s ize=”30”/>14 </p>15 <p>16 <label for=”prenomEmploye”>Prénom</ label>17 <input type=” text ” name=”prenom” id=”prenomEmploye” s ize=”30”/><br/>18 </p>19 <p>

75


20 <label for=” te lephone ”>Téléphone</ label>21 <input type=” text ” name=” te lephone ” id=” te lephone ” s ize=”10”/><br/>22 </p>23 <p>24 <strong>Catégor i e :</strong>25 </p>26 <p>27 <label for=” s e c r e t a i r e ”>S e c r é t a i r e</ label>28 <input type=” rad io ” name=” ca t e g o r i e ” value=” s e c r é t a i r e ” id=” s e c r e t a i r e ”

checked=” checked ”/><br/>29 </p>30 <p>31 <label for=”commercial ”>Commercial</ label>32 <input type=” rad io ” name=” ca t e g o r i e ” value=”commercial ” id=”commercial ”/><br

/>33 </p>34 <p>35 <label for=” technique ”>Personnel techn ique</ label>36 <input type=” rad io ” name=” ca t e g o r i e ” value=” technique ” id=” technique ”/><br/>37 </p>38 <p>39 <label for=”boss ”>The Big Boss</ label>40 <input type=” rad io ” name=” ca t e g o r i e ” value=”boss ” id=”boss ”/><br/>41 </p>42 <p>43 <input type=”submit ” value=”Envoyer” class=” sansLabel ”></ input>

76


44 </p>45 </form>46 </body>47 </html>

exemples/forms1/myStyle.css12 /* s t y l e par dé faut du tex t e */3 body {4 font−f ami ly : ”Comic␣Sans␣MS” ;5 font−s i z e : 18pt ;6 background−c o l o r : #f f f ;7 c o l o r : #222;8 }910 /* s t y l e du t i t r e */11 h1 {12 font−weight : bold ;13 font−s i z e : 150%;14 c o l o r : white ;15 text−a l i g n : c en t e r ;16 background−c o l o r : #999;17 padding : 15px ;18 }1920 /******************************************21 | mise en forme du fo rmu la i r e |22 \*****************************************/2324 /* tous l e s l a b e l s ont l a même l a r g eu r pour a l i g n e r l e s inputs */25 form p l a b e l {26 f l o a t : l e f t ;27 width : 400px ;28 text−a l i g n : r i g h t ;29 padding : 6px ;30 font−weight : bold ;31 }3233 form p input {34 padding : 6px ;35 margin− l e f t : 20px ;36 background−c o l o r : #ddd ;37 border−s t y l e : groove ;38 border−width : 5px ;39 border−c o l o r : #444;40 border−rad iu s : 10 px ;41 }4243 /* input s p é c i a l pour l e boutton submit */44 form p input . sansLabe l {45 margin− l e f t : 432px ; /* 400+6+6+20 : a l i g n é sur l e s aut r e s inputs */46 font−s i z e : 130%;47 font−weight : bo lder ;48 background−c o l o r :# f f 3 333 ;49 c o l o r : white ;

77


50 }5152 form p {53 background−c o l o r : #f f f ;54 padding : 0px ;55 }5657 /****************************************/585960 /* s t y l e par dé faut des l i e n s */61 a : l i n k {62 text−decora t i on : unde r l i n e ; /* s ou l i gn é */63 c o l o r : #00e ;64 }6566 /* s t y l e des l i e n s v i s i t é s */67 a : v i s i t e d {68 text−decora t i on : unde r l i n e ; /* s ou l i gn é */69 c o l o r : #00c ;/* bleu c l a i r */70 }7172 /* s t y l e des l i e n s v i s i t é s */73 a : hover {74 text−decora t i on : unde r l i n e ; /* s ou l i gn é */75 c o l o r : #e40 ;/* rouge v i f */76 }7778 /* s t y l e des é léments importants */79 st rong {80 font−var i ant : small−caps ;81 font−weight : bo lder ;82 c o l o r : b lack ;83 }8485 /* s t y l e des é léments mis en év idence */86 em {87 font−s t y l e : i t a l i c ;88 c o l o r : b lack ;89 }9091 p {92 background−c o l o r : #ddd ;93 text−a l i g n : j u s t i f y ;94 padding : 5pt ;95 }

5.3 Validation : Test de champs obligatoire videLa forme la plus simple du filtrage consiste à tester que tous les attributs sont non vides et àrenvoyer le formulaire à l’utilisateur en cas de champs vide. Ici, l’utilisateur doit ressaisir tousles attributs du formulaire à partir de zéro ce qui est très désagréable (déconseillé pour un sitede e-commerce).

78


exemples/forms1/ex04_reception.php12 <?php3 inc lude ( ’ . / commonFunctions . php ’ ) ;4 i n c lude ( ’ . / ex05_formFunctions . php ’ ) ;5 ?>6 <?php7 outputEnTeteHTML5 ( ’ Réception d\ ’un formula i r e ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;8 ?>9 <?php10 $nom=”” ;11 i f ( i s s e t ($_POST[ ’ nom ’ ] ) ) {12 $nom = $_POST[ ’ nom ’ ] ;13 }14 $prenom=”” ;15 i f ( i s s e t ($_POST[ ’ prenom ’ ] ) ) {16 $prenom = $_POST[ ’ prenom ’ ] ;17 }1819 $te l ephone=”” ;20 i f ( i s s e t ($_POST[ ’ te lephone ’ ] ) ) {21 $te l ephone = $_POST[ ’ te lephone ’ ] ;22 }23 $ c a t e g o r i e=”” ;

79


24 i f ( i s s e t ($_POST[ ’ c a t ego r i e ’ ] ) ) {25 $ c a t e g o r i e = $_POST[ ’ c a t ego r i e ’ ] ;26 }27 i f ( s t r l e n ($nom)>=1 && s t r l e n ( $prenom)>=1 &&28 s t r l e n ( $te l ephone )>=1) {29 echo ”<h1>Données␣ reçues </h1>\n” ;30 echo ”<p>\n” ;31 echo ”nom␣ : ␣” . $nom . ”<br/>\n” ;32 echo ”prenom␣ : ␣” . $prenom . ”<br/>\n” ;33 echo ”Téléphone␣ : ␣” . $te l ephone . ”<br/>\n” ;34 echo ” Catégor i e ␣ : ␣” . $ c a t e g o r i e . ”<br/>\n” ;35 echo ”</p>\n” ;36 } e l s e {37 displayFormSais ieEmploye ($nom , $prenom , $te lephone , $ c a t e g o r i e ) ;38 }39 ?>4041 <?php42 outputFinFichierHTML5 ( ) ;43 ?>

5.4 Génération du formulaire dans une fonctionIci, une fonction génère le formulaire en prenant en paramètre les valeurs initiales. Cette fonc-tion facilitera le renvoi des données saisies vers l’utilisateur en cas de données incomplètes.Cependant, le code de cette fonction est très peu lisible et difficile à maintenir.

exemples/forms1/ex05_formFunctions.php1 <?php2 func t i on displayFormSais ieEmploye ($nom , $prenom , $te lephone , $ c a t e g o r i e ) {3 echo ”<h1>Sa i s i e ␣d ’ un␣employé</h1>\n” ;4 echo ”<span␣ s t y l e=\” color : red ; font−s ize :120%;\ ”>Problème , ␣ tous ␣ l e s ␣champs␣

sont ␣ ob l i g a t o i r e s </span>” ;5 echo ”<form␣method=\” post \”␣ ac t i on=\” ex04_recept ion . php\”>\n” ;6 echo ”<p>\n” ;7 echo ”<l a b e l ␣ f o r=\”nomEmploye\”>Nom</labe l >\n” ;8 echo ”<input ␣ type=\” text\”␣name=\”nom\”␣␣␣ id=\”nomEmploye\”␣ s i z e=\”30\”/>\n”

;9 echo ”</p>\n” ;10 echo ”␣␣<p>\n” ;11 echo ”<l a b e l ␣ f o r=\”prenomEmploye\”>Prénom</labe l >␣\n” ;12 echo ”<input ␣ type=\” text\”␣name=\”prenom\”␣␣␣ id=\”prenomEmploye\”␣␣ s i z e=\”30

\”/><br/>␣␣\n” ;13 echo ”␣␣</p>\n” ;14 echo ”<p>\n” ;15 echo ”<l a b e l ␣ f o r=\” te l ephone \”>Téléphone</labe l >␣\n” ;16 echo ”<input ␣ type=\” text\”␣name=\” te l ephone \”␣ id=\” te l ephone \”␣ s i z e=\”10\”

/><br/>\n” ;17 echo ”</p>\n” ;18 echo ”<p>\n” ;19 echo ”␣␣<strong>Catégor i e ␣:</ strong>\n” ;20 echo ”</p>\n” ;21 echo ”␣␣<p>\n” ;22 echo ”␣␣<l a b e l ␣ f o r=\” s e c r e t a i r e \”>Sec r é t a i r e </labe l >␣␣\n” ;

80


23 echo ”␣␣<input ␣ type=\” rad io \”␣name=\” c a t e g o r i e \”␣ value=\” s e c r é t a i r e \”␣ id=\”s e c r e t a i r e \”/><br/>\n” ;

24 echo ”</p>\n” ;25 echo ”<p>\n” ;26 echo ”␣␣<l a b e l ␣ f o r=\” commercial \”>Commercial</labe l >␣\n” ;27 echo ”␣␣␣␣<input ␣ type=\” rad io \”␣name=\” c a t e g o r i e \”␣ value=\” commercial \”␣ id=\

” commercial \”/><br/>\n” ;28 echo ”</p>\n” ;29 echo ”<p>\n” ;30 echo ”␣␣<l a b e l ␣ f o r=\” technique \”>Personne l ␣ technique </labe l >␣\n” ;31 echo ”␣␣␣␣<input ␣ type=\” rad io \”␣name=\” c a t e g o r i e \”␣ value=\” technique \”␣ id=\”

technique \”/><br/>\n” ;32 echo ”</p>\n” ;33 echo ”<p>\n” ;34 echo ”␣␣␣␣<l a b e l ␣ f o r=\” boss \”>The␣Big␣Boss</labe l >␣\n” ;35 echo ”␣␣<input ␣ type=\” rad io \”␣name=\” c a t e g o r i e \”␣ value=\” boss \”␣ id=\” boss \”

/><br/>\n” ;36 echo ”</p>\n” ;37 echo ”<p>\n” ;38 echo ”␣␣<input ␣ type=\” submit\”␣ value=\”Envoyer\”␣ c l a s s=\” sansLabel \”></input

>\n” ;39 echo ”␣␣</p>\n” ;40 echo ”</form>\n” ;41 }42 ?>

5.5 Validation : Renvoi des valeurs vers l’utilisateur

exemples/forms1/ex08_receptionRenvoieValeur.php12 <?php3 inc lude ( ’ . / commonFunctions . php ’ ) ;4 i n c lude ( ’ . / ex07_formFunctionsRenvoieValeur . php ’ ) ;5 ?>6 <?php7 outputEnTeteHTML5 ( ’ Réception d\ ’un formula i r e ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;8 ?>9 <?php10 $nom=”” ;11 i f ( i s s e t ($_POST[ ’ nom ’ ] ) ) {12 $nom = $_POST[ ’ nom ’ ] ;13 }14 $prenom=”” ;15 i f ( i s s e t ($_POST[ ’ prenom ’ ] ) ) {16 $prenom = $_POST[ ’ prenom ’ ] ;17 }1819 $te l ephone=”” ;20 i f ( i s s e t ($_POST[ ’ te lephone ’ ] ) ) {21 $te l ephone = $_POST[ ’ te lephone ’ ] ;22 }23 $ c a t e g o r i e=”” ;24 i f ( i s s e t ($_POST[ ’ c a t ego r i e ’ ] ) ) {

81


25 $ c a t e g o r i e = $_POST[ ’ c a t ego r i e ’ ] ;26 }27 i f ( s t r l e n ($nom)>=1 && s t r l e n ( $prenom)>=1 && s t r l e n ( $te l ephone )>=1) {28 echo ”<h1>Données␣ reçues </h1>\n” ;29 echo ”<p>\n” ;30 echo ”nom␣ : ␣” . $nom . ”<br/>\n” ;31 echo ”prenom␣ : ␣” . $prenom . ”<br/>\n” ;32 echo ”Téléphone␣ : ␣” . $te l ephone . ”<br/>\n” ;33 echo ” Catégor i e ␣ : ␣” . $ c a t e g o r i e . ”<br/>\n” ;34 echo ”</p>\n” ;35 } e l s e {36 displayFormSais ieEmploye ($nom , $prenom , $te lephone , $ c a t e g o r i e ) ;37 }38 ?>3940 <?php41 outputFinFichierHTML5 ( ) ;42 ?>

82


5.6 Injections et filtrage5.6.1 InjectionsLes injections sont un moyen pour un pirate d’exécuter du code non prévu en exploitant lesinterfaces entre PHP et d’autres langages (HTML, Javascript, SQL, etc...). Pour celà, le piraterentre dans un input du code, qui n’est pas détecté par PHP (on a simplement une chaîne decaractères au niveau de PHP), mais qui est interprété par un autre langage interfacé avec PHP.

Voyons un exemple d’injection HTML. L’utilisateur malveillant va entrer dans un input“Nom” du code HTML pour introduire dans le site victime un lien vers un site pirate. Sil’utilisateur inaverti ou distrait clique sur ce lien, le pirate peut alors demander à l’utilisateurde rentrer ses identifiants (usurpation d’identité) ou ses données de carte bancaire (escroquerie),etc.

Voyons tout d’abord de formulaire et sa réception dans le cadre de son utilisation normale.

Figure 5.1: Un gentil formulaire

Figure 5.2: Le site affiche en HTML les données saisies dans le gentil formulaire

Le code source du formulaire et de sa réception est le suivant :

exemples/forms3/ex06_form_piratable.php1 <!DOCTYPE html PUBLIC ”−//W3C//DTD␣XHTML␣ 1 .0 ␣ S t r i c t //EN” ” http ://www.w3 . org /TR/

xhtml1/DTD/xhtml1−s t r i c t . dtd”>2 <html xmlns=”http ://www.w3 . org /1999/ xhtml” xml : lang=” f r ” lang=” f r ”>3 <head>4 <meta http−equiv=”Content−Type” content=” text /html ; ␣ cha r s e t=UTF−8” />5 <t i t l e></ t i t l e>6 </head>7 <body>8 <form method=”post ” action=” ./ ex07_recept ion_piratab le . php”>9 <p>10 <label for=”nom”>Nom</ label>11 <input type=” text ” name=”nom” id=”nom” s ize=”40” />12 </p>13 <p>

83


14 <input type=”submit ” value=”Envoyer”/>15 </p>16 </form>17 </body>18 </html>

exemples/forms3/ex07_reception_piratable.php1 <!DOCTYPE html PUBLIC ”−//W3C//DTD␣XHTML␣ 1 .0 ␣ S t r i c t //EN” ” http ://www.w3 . org /TR/

xhtml1/DTD/xhtml1−s t r i c t . dtd”>2 <html xmlns=”http ://www.w3 . org /1999/ xhtml” xml : lang=” f r ” lang=” f r ”>3 <head>4 <meta http−equiv=”Content−Type” content=” text /html ; ␣ cha r s e t=UTF−8” />5 <t i t l e></ t i t l e>6 </head>7 <body>8 Le nom du c l i e n t e s t&nbsp ; :9 <?php10 i f ( i s s e t ($_POST[ ’ nom ’ ] ) ) {11 echo $_POST[ ’ nom ’ ] ;12 }13 ?>14 <p>15 Ceci e s t l a s u i t e du document .16 </p>17 </body>18 </html>

Le pirate entre alors dans un input du code HTML :

Figure 5.3: Injection HTML ajoutant un lien au site

Le résultat est l’apparition d’un lien non prévu sur le site :

Figure 5.4: L’affichage des données du formulaire sort le code HTML entré par le pirate

Ceci est juste un exemple un peu simpliste mais peut conduire à des attaques très grave,surtout quand, comme dans l’exemple ci-dessous, le pirate fait exécuter tout un programmejavascript chargé à partir de son propre site :

84


Figure 5.5: Insersion HTML faisant exécuter un programma javascript.

5.6.2 Se prémunir contre les injections : le filtrage5.6.2.a htmlentities

Différents outils de filtrage sont disponibles en PHP. Le plus simple pour la sécurité consiste àutiliser la méthode htmlentities qui tranforme dans une chaîne tous les caractères spéciauxen leurs entités HTML (code spécial pour afficher un caractère en HTML).

Il faut cependant prendre garde que si l’utilisateur ne rentre pas les caratères en entréeavec le même encodage que celui utilisé par PHP en sortie, les caractères spéciaux n’ont pasle même code et la fonction htmlentities ne fonctionnera pas bien, laissant la porte ouverteà des attaques. On peut spécifier l’encoding de sortie de htmlentities dans son troisièmeparamètre.

Dans l’exemple d’injection HTML ajoutant un lien ci-dessus, on obtiendrait lors de l’affichage :

Figure 5.6: Un gentil formulaire

Ça n’est pas très joli mais c’est inoffensif sauf si l’utilisateur fait vraiment exprès de copierl’adresse du lien dans sa barre d’adresse.

5.6.3 Expressions régulièresLes expressions régulières sont un moyen de vérifier d’une manière très générale qu’une chaînede caractère a une certaine forme.

L’extension PRCE en PHP permet, via des fonctions comme preg_match, de vérifier qu’unechaîne est conforme à une expression régulière. Un bon tutorial sur la syntaxe et l’utilisationdes expressions régulières en PHP se trouve à l’adresse suivante :

http://php.net/manual/en/book.pcre.php

Exemples.Par exemple, pour valider un nom ou un prénom entre 1 et 50 caractères alphabétiques

français avec des espaces ou traits d’unions, on peut utiliser quelque-chose du genre :

85


/^(([a-zA-ZàâéèêôùûçÀÂÉÈÔÙÛÇäöëüÄÖËÜ](\-|( )*)){1,50})$/

Notez que pour que le filtrage puiise servir à éviter les injections, il ne faut pas omettre le ̂ audébut et le $ à la fin de l’expression pour que l’expression régulière représente l’ensemble del’input utilisateur et non pas simplement une sous-chaîne.

Le filtrage avec preg_match se fait alors par un code du genre :

exemples/forms3/ex15_reception_regex.php1 <!DOCTYPE html PUBLIC ”−//W3C//DTD␣XHTML␣ 1 .0 ␣ S t r i c t //EN” ” http ://www.w3 . org /TR/

xhtml1/DTD/xhtml1−s t r i c t . dtd”>2 <html xmlns=”http ://www.w3 . org /1999/ xhtml” xml : lang=” f r ” lang=” f r ”>3 <head>4 <meta http−equiv=”Content−Type” content=” text /html ; ␣ cha r s e t=UTF−8” />5 <t i t l e></ t i t l e>6 </head>7 <body>8 <?php9 $pattern = ” /^ ( ( [ a−zA−ZàâéèêôùûçÀÂÉÈÔÙÛÇäöëüÄÖËÜ](\ − | ( ␣ ) *) ) {1 ,50}) $/” ;10 i f ( i s s e t ($_POST[ ’ nom ’ ] ) ) {11 $nbMatches = preg_match ( $pattern , $_POST[ ’ nom ’ ] ) ;12 i f ( $nbMatches && $nbMatches==1){13 echo $_POST[ ’ nom ’ ] ;14 } e l s e {15 echo h tm l e n t i t i e s ($_POST[ ’ nom ’ ] , ENT_COMPAT, ”UTF−8” ) . ”␣n ’ e s t ␣pas␣une␣

expr e s s i on ␣ va l i d e ␣pour␣ l ’ exp r e s s i on ␣ r é g u l i è r e ␣<br/>” . $pattern . ’ . ’ ;1617 }18 }19 ?>20 </body>21 </html>

Figure 5.7: Résultat du filtrage d’un nom par expression régulière

Pour un numéro de téléphone français sous la forme de 10 chiffres commençant par 0 et pargroupes de deux séparés par des espaces :

/^(0{1}[0-9]{1}( [0-9]{2}){4})$/

En option, avec un +33 devant pour les appels internationaux :

/^(((\+33 )|0){1}[0-9]{1}( [0-9]{2}){4})$/

En option, avec la possibilité de ne pas laisser d’espaces ou de mettre des tires ou des pointsentre les groupes de chiffres (exemples : +33-1.02-0304.05) :

/^(((\+33(| |\-|\.))|0){1}[0-9]{1}((| |\-|\.)[0-9]{2}){4})$/

86


5.7 Formulaires dynamiques an javascriptNous voyons ici un exemple d’utilisation du javascript pour créer un formulaire dont les attri-buts dépendent de la valeur d’un premier champ. Lorsqu’on sélectionne “deuxième année”, unnouveau champ apparaît. Pour celà, on utilise l’évennement onchange sur l’input de l’année,qui est géré par la fonction anneeChange. On teste alors la valeur de l’attribut, puis le caséchéant on génére un nouveau champ dans un div d’id attributSupplementaire. Pour plusd’unformation sur les pages webs dynamiques en javascript, voir le cours correspondant surwww.malgouyres.fr.

exemples/javascript/formulaire_dynamique.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8”/>5 <t i t l e>Formulaire dynamique</ t i t l e>6 </head>7 <body>8 <form method=”post ” action=” re c ep t i on . php”>9 <p>10 <label for=”nom”>Nom</ label><input name=”nom” id=”nom”/>11 </p>12 <p>13 <select name=”annee ” id=”annee ” pattern=” ( premiere ) ␣ | ␣ ( deuxieme ) ”

onchange=’anneeChange ( ) ; ’>14 <option value=” c h o i s i s s e z ” selected disabled>−− c h o i s i s s e z −−</option>15 <option value=”premiere ”>Première année</option>16 <option value=”deuxième”>Deuxième année</option>

87


17 </ select>18 </p>19 <div id=” att r ibutSupp l ementa i r e ”>2021 </div>22 <p>23 <input type=”submit ” value=”−−␣OK␣−−”/>24 </p>25 </form>26 <script>27 func t i on anneeChange ( ) {28 var paragraphe = document . getElementById ( ” at t r ibutSupp l ementa i r e ” ) ;29 paragraphe . innerHTML=document . getElementById ( ” annee ” ) . va lue+”␣année . ” ;30 i f ( document . getElementById ( ” annee ” ) . va lue == ”deuxième” ) {31 paragraphe . innerHTML+=”<labe l >Or i entat i on ␣prévue␣pour␣ l ’ année␣ prochaine ␣

:</ labe l >”32 +’<select name=” o r i e n t a t i o n ” id=” o r i e n t a t i o n ”> ’33 +’<option value=”LP”>LP</option>’34 +’<option value=”master ”>master</option>’35 +”<opt ion ␣ value=\” inge \”>Ecole ␣d ’ ingé</option>”36 +’<option value=” boulot ”>Boulot</option>’37 +’<option value=” autre ”>Autre</option>’38 +’</ select> ’ ;3940 }41 }42 anneeChange ( ) ;43 </ script>44 </body>45 </html>

exemples/javascript/reception.php1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8”/>5 <t i t l e>Formulaire dynamique</ t i t l e>6 </head>7 <body>8 <?php9 $nom= ( i s s e t ($_POST[ ”nom” ] ) ) ? $_POST[ ”nom” ] : ”nom␣ indéterminé ” ;10 $annee = ( i s s e t ($_POST[ ” annee ” ] ) ) ? $_POST[ ” annee ” ] : ” année␣ indéteminée ” ;11 echo ”Nom␣ : ␣” . $nom . ”<br/>” ;12 echo ”Année␣ : ␣” . $annee . ”<br/>” ;13 i f ( $annee==”deuxième” )14 echo ”␣Or i entat ion ␣ : ␣” .$_POST[ ” o r i e n t a t i o n ” ] ;151617 ?>18 </body>19 </html>

88

Chapitre 6

Formulaires PHP : MVC, filtrage,exceptions

Nous voyons que la gestion des formulaires en PHP par l’approche naïve, où les codes PHP etHTML sont inextricablement mélés, devient vite ingérable et qu’il n’est pas envisageable dedévelopper des sites complexes en se basant sur cette technique. Dans l’approche suivante, nousfaisons l’effort de concevoir une fois pour toute des clases PHP bien faites pour nos données debase. La manipulation des formulaires s’en trouve grandement facilitée, avec un gain de tempsconsidérables sur le moyen terme. L’approche est fondée sur le modèle MVC. Le MVC peutêtre développé sans classes. Cependant, depuis PHP 5, les design patterns sont beaucoup plusélégament codés avec des classes.

6.1 Le Modèle MVCLa compréhension de l’architecture globale du système de saisie d’un formulaire, de filtrageet de renvoi des données vers l’utilisateur est grandement facilitée par l’évocation du modèleMVC (voir figure 6.1). Dans cette architecture, la vue gère les interactions avec l’utilisateur(mise en page, graphisme, saisie des formulaires, etc...). Le contrôleur centralise les décisionset transmets les informations (récupération des données du formulaire d’une part, gestion desexceptions d’autre part, execution des requêtes SQL,...). Enfin, le modèle représente les donnéesen mémoire, les met en forme, effectue le filtrage et génère les exceptions.

6.2 La vue :Formulaire HTML de baseNous présentons ici en HTML le formulaire sur lequel nous allons ensuite illustrer notre archi-tecture d’application.

exemples/forms2/ex01_formAdresse.html1 <! doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l ink rel=” s t y l e s h e e t ” href=” ./ myStyle . c s s ” />6 <t i t l e>Mon premier f o rmu la i r e HTML</ t i t l e>7 </head>

89


ecran

cree

code HT

ML

utilisateur

met

hode

PO

ST

Vueaffichage

style graphiqueclavier

Controleur

transmission de donneesreception des donnees

creation des objets

l’applicationdonnees de

generation d’HTML

Modele

Figure 6.1: Les rôles respectifs de la vue, du contrôleur et du modèle dans l’architecture MVC.

8 <body>9 <h1>Sa i s i e d ’ une adre s s e</h1>10 <form method=”post ” action=” ex03_recept ionAdresse . php”>11 <p>12 <label for=”numeroRue”>Numéro</ label>13 <input type=” text ” name=”numeroRue” id=”numeroRue” s ize=”4”/><br/>14 </p>15 <p>16 <label for=” rue ”>Place /Rue</ label>17 <input type=” text ” name=” rue ” id=”numeroRue” s ize=”30”/>18 </p>1920 <p>21 <label for=”complementAdresse ”>Complément d ’ adr e s s e</ label>22 <input type=” text ” name=”complementAdresse ” id=”complementAdresse ” s ize=”30”/>

<br/>23 </p>24 <p>25 <label for=” codePosta l ”>Code po s t a l</ label>26 <input type=” text ” name=” codePosta l ” id=” codePosta l ” s ize=”10”/><br/>27 </p>28 <p>29 <label for=” v i l l e ”>V i l l e</ label>30 <input type=” text ” name=” v i l l e ” id=” v i l l e ” s ize=”10”/><br/>31 </p>32 <p>33 <input type=”submit ” value=”Envoyer” class=” sansLabel ”></ input>34 </p>35 </form>36 </body>37 </html>

90

Chapitre 6 : Formulaires PHP : MVC, filtrage, exceptions

6.3 La vue : Classe de routines pour la génération deformulaires

Pour simplifier la gestion des formulaires, au lieu d’écrire les formulaires en mélangeant com-plètement le PHP et le HTML de manière inextricable, nous allons limiter le code HTML àquelques méthodes de 4 à 5 lignes de code dans une classe dédiée. Nous utiliserons ensuitecette classe avec une génération des formulaires beaucoup plus lisible et compacte. Dans laclasse FormManager, une méthode générique permet de définir n’importe quelle sorte d’input.Différentes méthodes permettent ensuite de définit différents types d’inputs plus spécifiques(texte, radio, submit,...).

exemples/forms2/ex02_formManagerClass.php1 <?php2 /**3 @br ie f Cette c l a s s e s e r t à f a c i l i t é l a géné ra t i on de f o rmu l a i r e s HTML4 en PHP. E l l e f o u r n i t de méthodes pour génére r l e début , l a f i n du formula i r e ,5 a i n s i que l e s inputs avec l e s opt ions de base .6 Les opt ions complémentaires des inputs peuvent ê t r e s é l e c t i o n n é e s7 v ia une va r i ab l e $extraOptions des méthodes (mais c ’ e s t un peu p lus complexe ) .8 */9 class FormManager {10 /**11 @br ie f génère l a b a l i s e form avec sa méthode ( Post ou Get ) et sont action (

u r l )12 */13 pub l i c s t a t i c func t i on beginForm ( $method , $act ion , $extraOptions=”” ) {14 echo ”<form␣method=\”” . $method . ”\”␣ ac t i on=\”” . $ac t i on . ”\”” . $extraOptions . ”>\

91


n” ;15 }1617 /**18 @br ie f ferme l e f o rmu la i r e19 */20 pub l i c s t a t i c func t i on endForm ( ) {21 echo ”</form>” ;22 }2324 /**25 méthode génér ique de géné ra t i on d ’ un input26 @param $labe lText t ex t e du label correspondant à l ’ input27 @param $type type d ’ input : t ex t e textarea , chackbox , radio , submit . . .28 @param $id ID de l ’ input pour l a correspondance label / input29 @param $value va l eur i n i t i a l e du champs de l ’ input30 @paarm $extraOptions cha ine de c a r a c t è r e s contenant l e s opt ions

supp lémenta i re s31 de l ’ input su ivant l a syntaxe HTML.32 */33 pub l i c s t a t i c func t i on addInput ( $ labe lText , $type , $name , $id , $value=nul l ,

$extraOptions=”” ) {34 $valueOption = ( $value == nu l l ) ? ”” : ”␣ value=\”” . $value . ”\”␣” ;35 i f ( $extraOptions == nu l l ) {36 $extraOptions=”” ;37 }38 echo ”<p>\n” ;39 i f ( $ labe lText != nu l l && $labe lText !=”” ) {40 echo ”<l a b e l ␣ f o r=\”” . $ id . ”\”>” . $ labe lText . ”</labe l >\n” ;41 }42 echo ”<input ␣ type=\”” . $type . ”\”␣name=\”” . $name . ”\”␣ id=\”” . $ id . ”\”␣” .

$valueOption . ”␣” . $extraOptions . ”␣/>\n” ;4344 echo ”</p>\n” ;45 }4647 /**48 @br ie f méthode s im p l i f i é e pour génére r un input de type text49 */50 pub l i c s t a t i c func t i on addTextInput ( $ labe lText , $name , $id , $ s i z e , $value=nul l

, $extraOptions=”” ) {51 s e l f : : addInput ( $ labe lText , ” t ex t ” , $name , $id , $value , ” s i z e ␣=\”” . $ s i z e . ”\”␣

” . $extraOptions ) ;52 }5354 /**55 @br ie f méthode s im p l i f i é e pour génére r un input de type password56 */57 pub l i c s t a t i c func t i on addPasswordInput ( $ labe lText , $name , $id , $ s i z e , $value=

nul l , $extraOptions=”” ) {58 s e l f : : addInput ( $ labe lText , ” password ” , $name , $id , $value , ” s i z e ␣=\”” . $ s i z e .

”\”␣” . $extraOptions ) ;59 }60 /**61 @br ie f méthode s im p l i f i é e pour génére r un input de type rad io62 */

92


63 pub l i c s t a t i c func t i on addRadioInput ( $ labe lText , $name , $id , $checked , $value=nul l , $extraOptions=”” ) {

64 s e l f : : addInput ( $ labe lText , ” rad io ” , $name , $id , $value , ( strcmp ( $checked , ’checked ’ ) ==0)? ” checked␣=\”checked\”␣” : ”␣” . $extraOptions ) ;

65 }666768 /**69 @br ie f méthode s im p l i f i é e pour génére r un input de type rad io70 */71 pub l i c s t a t i c func t i on addCheckboxInput ( $ labe lText , $name , $id , $checked ,

$value=nul l , $extraOptions=”” ) {72 s e l f : : addInput ( $ labe lText , ” checkbox ” , $name , $id , $value , ( strcmp ( $checked ,

’checked ’ ) ==0)? ” checked␣=\”checked\”␣” : ”␣” . $extraOptions ) ;73 }7475 /**76 @br ie f méthode s im p l i f i é e pour génére r un input de type rad io77 */78 pub l i c s t a t i c func t i on addHiddenInput ($name , $id , $value , $extraOptions=”” ) {79 s e l f : : addInput ( ”” , ” hidden ” , $name , $id , ( string ) ( $value ) , $extraOptions ) ;80 }8182 /**83 @br ie f méthode s im p l i f i é e pour génére r un input de type textarea84 */85 pub l i c s t a t i c func t i on addTextAreaInput ( $ labe lText , $name , $id , $rows , $co l s ,

$value=nul l , $extraOptions=”” ) {86 $valueOption = ( $value == nu l l ) ? ”” : $value ;87 i f ( $extraOptions == nu l l ) {88 $extraOptions=”” ;89 }90 echo ”<p>\n” ;91 i f ( $ labe lText != nu l l && $labe lText !=”” ) {92 echo ”<l a b e l ␣ f o r=\”” . $ id . ”\”>” . $ labe lText . ”</labe l >\n” ;93 }94 echo ”<tex ta r ea ␣name=\”” . $name . ”\”␣ id=\”” . $ id . ”\”␣rows=\”” . $rows . ”\”␣ c o l s=\”

” . $ c o l s . ”\”␣” . $extraOptions . ”␣>” . $valueOption . ”</textarea >\n” ;95 echo ”</p>\n” ;96 }9798 /**99 @br ie f méthode s im p l i f i é e pour génére r un input de type f i l e ( upload )100 */101 pub l i c s t a t i c func t i on addUploadInput ( $ labe lText , $name , $id , $ s i z e , $value=””

, $extraOpt ions=”” ) {102 $valueOption = ( $value == nu l l ) ? ” va lue=\”\”” : ”␣ value=\”” . $value . ”\”␣” ;103 i f ( $extraOptions == nu l l ) {104 $extraOptions=”” ;105 }106 s e l f : : addInput ( $ labe lText , ” f i l e ” , $name , $id , $value , ” s i z e ␣=\”” . $ s i z e . ”\”␣

” . $valueOption . ”␣” . $extraOptions ) ;107 }108109 /**110 @br ie f méthode pour commencer un select

93


111 */112 pub l i c s t a t i c func t i on beg i nSe l e c t ( $ labe lText , $name , $id , $mul t ip l e=f a l s e ,

$ s i z e =5) {113 i f ( $mul t ip l e )114 $mult ip leOpt ion=”mul t ip l e=\”multiple\”␣ s i z e=\”” . $ s i z e . ”\”” ;115 e l s e116 $mult ip leOpt ion=”” ;117 i f ( $ labe lText != nu l l && $labe lText !=”” ) {118 echo ”<p><l ab e l ␣ f o r=\”” . $ id . ”\”>” . $ labe lText . ”</labe l >\n” ;119 }120 echo ”<s e l e c t ␣name=\”” . $name . ”\”␣ id=\”” . $ id . ”\”” . $mult ip leOpt ion . ”>\n” ;121 }122123 /**124 @br ie f méthode s im p l i f i é e pour terminer un select125 */126 pub l i c s t a t i c func t i on endSe l e c t ( ) {127 echo ”</s e l e c t ></p>\n” ;128 }129130 /**131 @br ie f méthode s im p l i f i é e pour a j ou t e r une option de select132 */133 pub l i c s t a t i c func t i on addSelectOption ( $value , $displayText , $ s e l e c t e d=f a l s e ) {134 i f ( $ s e l e c t e d )135 $se l e c t edOpt ion=” s e l e c t e d=\” selected\”” ;136 e l s e137 $se l e c t edOpt ion=”” ;138 echo ”<opt ion ␣ value=\”” . $value . ”\”␣” . $ se l e c t edOpt ion . ”>” . $d isp layText . ”</

option>\n” ;139 }140141 /**142 @br ie f méthode s im p l i f i é e pour génére r un bouton submit143 */144 pub l i c s t a t i c func t i on addSubmitButton ( $value=”Envoyer” , $extraOptions=”” ) {145 s e l f : : addInput ( nu l l , ” submit ” , ”” , ”” , $value , ”␣” . $extraOptions ) ;146 }147 }148 ?>

La génération de notre formulaire devient alors plus compacte et ne fait plus apparaîtred’HTML (le code HTML est confiné dans quelques méthodes bien délimitées) :

exemples/forms2/ex04_formAdresse.php1 <?php2 include_once ’ . / commonFunctions . php ’ ;3 include_once ’ . / ex02_formManagerClass . php ’ ;4 ?>5 <h1>Sa i s i e d ’ une adre s s e</h1>6 <?php7 outputEnTeteHTML5 ( ’ S a i s i e d\ ’ une adresse ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;89 FormManager : : beginForm ( ” post ” , ” ex03_recept ionAdresse . php” ) ;10 FormManager : : addTextInput ( ”Numéro” , ”numeroRue” , ”numeroRue” , ”4” ) ;11 FormManager : : addTextInput ( ”Rue/ p lace ” , ” rue ” , ” rue ” , ”30” ) ;

94


12 FormManager : : addTextInput ( ”Complément␣d ’ ad r e s s e ” , ” complementAdresse ” , ”complementAdresse ” , ”30” ) ;

13 FormManager : : addTextInput ( ”Code␣ po s t a l ” , ” codePosta l ” , ” codePosta l ” , ”10” ) ;14 FormManager : : addTextInput ( ” V i l l e ” , ” v i l l e ” , ” v i l l e ” , ”20” ) ;15 FormManager : : addTextInput ( ”Pays” , ” pays ” , ” pays ” , ”15” ) ;16 FormManager : : addSubmitButton ( ”−−−␣OK␣−−−” , ” c l a s s=\” sansLabel \”” ) ;17 FormManager : : endForm ( ) ;1819 outputFinFichierHTML5 ( ) ;20 ?>21 </body>22 </html>

6.4 Le contrôleur : Réception et affichage basique desdonnées

exemples/forms2/ex03_receptionAdresse.php12 <?php3 include_once ( ’ . / commonFunctions . php ’ ) ;4 include_once ( ’ . / commonFunctions . php ’ ) ;5 ?>6 <?php7 outputEnTeteHTML5 ( ’ Réception d\ ’un formula i r e ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;8 ?>

95


9 <?php10 $numeroRue=”” ;11 i f ( i s s e t ($_POST[ ’ numeroRue ’ ] ) ) {12 $numeroRue = h tm l en t i t i e s ($_POST[ ’ numeroRue ’ ] , ENT_QUOTES, ’UTF−8 ’) ;13 }14 $rue=”” ;15 i f ( i s s e t ($_POST[ ’ rue ’ ] ) ) {16 $rue = h tm l e n t i t i e s ($_POST[ ’ rue ’ ] , ENT_QUOTES, ’UTF−8 ’) ;17 }1819 $complementAdresse=”” ;20 i f ( i s s e t ($_POST[ ’ complementAdresse ’ ] ) ) {21 $complementAdresse = h tm l en t i t i e s ($_POST[ ’ complementAdresse ’ ] , ENT_QUOTES, ’

UTF−8 ’) ;22 }23 $codePosta l=”” ;24 i f ( i s s e t ($_POST[ ’ codePostal ’ ] ) ) {25 $codePosta l = h tm l e n t i t i e s ($_POST[ ’ codePostal ’ ] , ENT_QUOTES, ’UTF−8 ’) ;26 }27 $ v i l l e=”” ;28 i f ( i s s e t ($_POST[ ’ v i l l e ’ ] ) ) {29 $ v i l l e = h tm l e n t i t i e s ($_POST[ ’ v i l l e ’ ] , ENT_QUOTES, ’UTF−8 ’) ;30 }31 $pays=”France ” ;32 i f ( i s s e t ($_POST[ ’ pays ’ ] ) && $_POST[ ’ pays ’ ] != ”” ) {33 $pays = h tm l e n t i t i e s ($_POST[ ’ pays ’ ] , ENT_QUOTES, ’UTF−8 ’) ;34 }3536 echo ”<h1>Données␣ reçues </h1>\n” ;37 echo ”<p>\n” ;38 echo ”numéro␣ : ␣” . $numeroRue . ”<br/>\n” ;39 echo ” rue ␣ : ␣” . $rue . ”<br/>\n” ;40 echo ”Complément␣d ’ adr e s s e ␣ : ␣” . $complementAdresse . ”<br/>\n” ;41 echo ”Code␣Posta l ␣ : ␣” . $codePosta l . ”<br/>\n” ;42 echo ” V i l l e ␣ : ␣” . $ v i l l e . ”<br/>\n” ;43 echo ”Pays␣ : ␣” . $pays . ”<br/>\n” ;4445 echo ”</p>\n” ;46 ?>4748 <?php49 outputFinFichierHTML5 ( ) ;50 ?>

6.5 Le MVC : Filtrage des avec une classe et exceptionsLa figure 6.2 schématise l’expression de l’architecture MVC dans notre implémentation.

6.5.0.a La vue

exemples/forms2/ex06_formClasseAdresse.php1 <?php2 include_once ’ . / commonFunctions . php ’ ;

96


Controleur

reception des donnees

Modele

classe adresse

ecran

utilisateurVue

en−tete HTMLclavier

exceptions

methode getAdresseFromForm

met

hode

PO

ST m

ethode affiche

methode genereF

orm

Figure 6.2: Implémentation de l’architecture MVC pour le formulaire de la classe adresse.

3 include_once ’ . / ex02_formManagerClass . php ’ ;4 ?>5 <h1>Sa i s i e d ’ une adre s s e</h1>6 <?php7 outputEnTeteHTML5 ( ’ S a i s i e d\ ’ une adresse ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;89 FormManager : : beginForm ( ” post ” , ” ex05_recept ionClasseAdresse . php” ) ;10 FormManager : : addTextInput ( ”Numéro” , ”numeroRue” , ”numeroRue” , ”4” ) ;11 FormManager : : addTextInput ( ”Rue/ p lace ” , ” rue ” , ” rue ” , ”30” ) ;12 FormManager : : addTextInput ( ”Complément␣d ’ ad r e s s e ” , ” complementAdresse ” , ”

complementAdresse ” , ”30” ) ;13 FormManager : : addTextInput ( ”Code␣ po s t a l ” , ” codePosta l ” , ” codePosta l ” , ”10” ) ;14 FormManager : : addTextInput ( ” V i l l e ” , ” v i l l e ” , ” v i l l e ” , ”20” ) ;15 FormManager : : addTextInput ( ”Pays” , ” pays ” , ” pays ” , ”15” ) ;16 FormManager : : addSubmitButton ( ”−−−␣OK␣−−−” , ” c l a s s=\” sansLabel \”” ) ;17 FormManager : : endForm ( ) ;1819 outputFinFichierHTML5 ( ) ;

97


20 ?>21 </body>22 </html>

6.5.1 Le ContrôleurLe contrôleur réceptionne les données du formulaires, demande au modèle la création d’unobjet de classe Adresse à l’aide de la méthode getAdresseFromForm, puis teste s’il y a desexceptions. S’il n’y a aucune exception, le contrôleur affiche simplement l’adresse. (dans unevéritable application, on aurait probablement une injection dans une table de base de données).S’il y a des exceptions, le contrôleur demande au modèle de générer un nouveau formulaireprérempli avec les valeurs précédement saisies, et en affichant les exceptions. (l’action de labalise <form> étant l’URL du contrôleur lui-même.)

exemples/forms2/ex05_receptionClasseAdresse.php12 <?php3 inc lude ( ’ . / commonFunctions . php ’ ) ;4 i n c lude ( ’ . / c l a s s e s / c l a s s eAdr e s s e . php ’ ) ;5 ?>6 <?php7 outputEnTeteHTML5 ( ’ Réception d\ ’un formula i r e ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;8 ?>9 <?php10 $numeroRue=”” ;11 i f ( i s s e t ($_POST[ ’ numeroRue ’ ] ) ) {12 $numeroRue = h tm l en t i t i e s ($_POST[ ’ numeroRue ’ ] , ENT_QUOTES, ’UTF−8 ’) ;

98


13 }14 $rue=”” ;15 i f ( i s s e t ($_POST[ ’ rue ’ ] ) ) {16 $rue = h tm l e n t i t i e s ($_POST[ ’ rue ’ ] , ENT_QUOTES, ’UTF−8 ’) ;17 }1819 $complementAdresse=”” ;20 i f ( i s s e t ($_POST[ ’ complementAdresse ’ ] ) ) {21 $complementAdresse = h tm l en t i t i e s ($_POST[ ’ complementAdresse ’ ] , ENT_QUOTES, ’

UTF−8 ’) ;22 }23 $codePosta l=”” ;24 i f ( i s s e t ($_POST[ ’ codePostal ’ ] ) ) {25 $codePosta l = h tm l e n t i t i e s ($_POST[ ’ codePostal ’ ] , ENT_QUOTES, ’UTF−8 ’) ;26 }27 $ v i l l e=”” ;28 i f ( i s s e t ($_POST[ ’ v i l l e ’ ] ) ) {29 $ v i l l e = h tm l e n t i t i e s ($_POST[ ’ v i l l e ’ ] , ENT_QUOTES, ’UTF−8 ’) ;30 }31 $pays=”France ” ;32 i f ( i s s e t ($_POST[ ’ pays ’ ] ) && $_POST[ ’ pays ’ ] != ”” ) {33 $pays = h tm l e n t i t i e s ($_POST[ ’ pays ’ ] , ENT_QUOTES, ’UTF−8 ’) ;34 }3536 $messagesExcept ions=”” ;3738 $adre s s e = Adresse : : getAdresseFromForm ( $messagesExceptions , $numeroRue , $rue ,

$complementAdresse ,39 $codePostal , $ v i l l e , $pays ) ;4041 i f ( empty ( $messagesExcept ions ) ) {42 $adresse−>a f f i c h e ( ) ;43 } e l s e {44 $current_fi le_name = basename ($_SERVER[ ’REQUEST_URI’ ] , ” . php” ) ;45 $adresse−>generateForm ( ” post ” , $current_fi le_name , $messagesExcept ions ) ;46 }4748 ?>4950 <?php51 outputFinFichierHTML5 ( ) ;52 ?>

6.5.2 Le ModèleLe Modèle est implémenté par la classe Adresse. Voir les explication sur les différentes mé-thodes dans les commentaires (documentation Doxygen).

exemples/forms2/classes/classeAdresse.php1 <?php2 include_once ’ . / ex02_formManagerClass . php ’ ;3 ?>4 <?php5 /**6 @br ie f La c l a s s e adr e s s e con t i en t l ’ ad r e s s e d ’ une personne

99


7 ( qui peut ê t r e un c l i e n t , un employé , un f ou rn i s s eu r , e t c . . . )8 */9 class Adresse {10 /** Numéro dans l a rue , ne do i t pas ê t r e nu l l mais peut ê t r e v ide */11 p r i va t e $numeroRue ;12 /** Nom de l a rue , ne do i t pas ê t r e nu l l mais peut ê t r e v ide */13 p r i va t e $rue ;14 /** Complément ( l i e u dit , e t c . ne do i t pas ê t r e nu l l mais peut ê t r e v ide */15 p r i va t e $complementAddr ;16 /** code po s t a l */17 p r i va t e $codePosta l ;18 /** nom de l a v i l l e . ne do i t pas ê t r e nu l l mais peut ê t r e v ide */19 p r i va t e $ v i l l e ;20 /** nom du pays . ne do i t pas ê t r e nu l l mais peut ê t r e v ide */21 p r i va t e $pays ;2223 /** @br ie f : Accesseur : permet d ’ ob t en i r l e numéro dans l a rue . */24 pub l i c func t i on getNumeroRue ( ) {25 return $ th i s −> numeroRue ;26 }2728 /** @br ie f : Accesseur : permet d ’ ob t en i r l e nom la rue . */29 pub l i c func t i on getRue ( ) {30 return $ th i s −> rue ;31 }3233 /** @br ie f : Accesseur : permet d ’ ob t en i r l e nom l e complément d ’ ad r e s s e . */34 pub l i c func t i on getComplementAddr ( ) {35 return $ th i s −> complementAddr ;36 }3738 /** @br ie f : Accesseur : permet d ’ ob t en i r l e nom l e code po s t a l . */39 pub l i c func t i on getCodePostal ( ) {40 return $ th i s −> codePosta l ;41 }4243 /** @br ie f : Accesseur : permet d ’ ob t en i r l e nom la v i l l e . */44 pub l i c func t i on g e tV i l l e ( ) {45 return $ th i s −> v i l l e ;46 }4748 /** @br ie f : Accesseur : permet d ’ ob t en i r l e pays . */49 pub l i c func t i on getPays ( ) {50 return $ th i s −> pays ;51 }5253 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e nom de l a rue .54 @param $numeroRue l e numéro à u t i l i s e r . peut ê t r e nu l l .55 */56 pub l i c func t i on setNumeroRue ( $numeroRue ) {57 i f ( $numeroRue != nu l l && s t r l e n ( $numeroRue ) > 50 | | ! preg_match ( ” / ^ ( ( ( [ a−zA

−ZêéèëàöÉÈÊÀÖË\␣\−␣\.\ ,0−9\␣ ] ) |(& quot ; ) ) |(') ) {0 ,20} $/” , $numeroRue ))

58 throw new Exception ( ”Erreur , ␣ l e ␣numéro␣de␣ l a ␣ rue ␣ do i t ␣ comporter ␣au␣ p lus ␣20␣␣ c a r a c t è r e s ␣ ( a lphabét iques , ␣ c h i f f r e s ␣ou␣ ponctuat ion ) ” ) ;

59 $ th i s −> numeroRue = ($numeroRue == nu l l ) ? ”” : $numeroRue ;

100


60 }6162 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e numéro dans l a rue .63 @param $Rue l e nom de l a rue ou de l a p lace à u t i l i s e r . peut ê t r e nu l l .64 */65 pub l i c func t i on setRue ( $rue ) {66 i f ( $rue == nu l l | | ! i s_ s t r i n g ( $rue ) | | ! preg_match ( ” / ^ ( ( ( [ a−zA−

ZêéèëàöÉÈÊÀÖË\␣\−␣\.\ ,0−9\␣ ] ) |(& quot ; ) ) |(') ) {2 ,300} $/” , $rue ) ) {67 throw new Exception ( ”Erreur , ␣ l a ␣ rue / p lace / l i e u ␣ d i t ␣ do i t ␣ comporter ␣au␣moins

␣2␣ c a r a c t è r e s ␣ et ␣au␣ p lus ␣300␣ c a r a c t è r e s ␣ ( a lphabét iques , ␣ c h i f f r e s ␣ou␣ponctuat ion ) . ” ) ;

68 } e l s e {69 $ th i s −> rue = $rue ;70 }71 }7273 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e complément d ’ ad r e s s e .74 @param $ComplementAddr l e complément d ’ adr e s s e à u t i l i s e r . peut ê t r e nu l l .75 */76 pub l i c func t i on setComplementAddr ( $complementAddr ) {77 i f ( $complementAddr != nu l l && s t r l e n ( $complementAddr ) > 50 | | ! preg_match ( ”

/ ^ ( ( ( [ a−zA−œZéèëàöÉÈÊÀÖËçÇûÛâêôÔæ0−9\␣\−␣\.\ ,0−9\␣ ] ) |(& quot ; ) ) |(') ){0 ,300} $/” , $complementAddr ) )

78 throw new Exception ( ”Erreur , ␣ l e ␣complément␣d ’ adr e s s e ␣ do i t ␣ comporter ␣au␣p lus ␣300␣ c a r a c t è r e s ␣ ( a lphabét iques , ␣ c h i f f r e s ␣ou␣ ponctuat ion ) ) ” ) ;

79 $ th i s −> complementAddr = ( $complementAddr == nu l l ) ? ”” : $complementAddr ;80 }8182 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e code po s t a l .83 @param $CodePostal l e numéro à u t i l i s e r . peut ê t r e nu l l84 */85 pub l i c func t i on setCodePosta l ( $codePosta l ) {86 i f ( $codePosta l == nu l l | | ! i s_ s t r i n g ( $codePosta l ) | | ! preg_match ( ”

/^[0−9]{5}$/” , $codePosta l ) ) {87 throw new Exception ( ”Erreur , ␣ l e ␣ code␣ po s t a l ␣n ’ e s t ␣pas␣ va l i d e . ␣ ( code␣ po s t a l

␣ f r a n ç a i s ␣ sans ␣ cedex␣ n i ␣B.P . ) ” ) ;88 } e l s e {89 $ th i s −> codePosta l = $codePosta l ;90 }91 }9293 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e nom de l a v i l l e .94 @param $V i l l e l e nom de l a v i l l e à u t i l i s e r . peut ê t r e nu l l95 */96 pub l i c func t i on s e tV i l l e ( $ v i l l e ) {97 i f ( $ v i l l e == nu l l | | ! i s_ s t r i n g ( $ v i l l e ) | | s t r l e n ( $ v i l l e ) < 2 | | s t r l e n (

$ v i l l e ) > 50) {98 throw new Exception ( ”Erreur , ␣ l e ␣nom␣de␣ l a ␣ v i l l e ␣ do i t ␣ comporter ␣au␣moins␣2␣

et ␣au␣ p lus ␣50␣ c a r a c t è r e s . ” ) ;99 } e l s e {100 $ th i s −> v i l l e = $ v i l l e ;101 }102 }103104 /** s e t t e r : permet d ’ i n i t i a l i s e r ou de mod i f i e r l e nom du pays .105 @param $Pays l e nom de pays à u t i l i s e r . peut ê t r e nu l l

101


106 */107 pub l i c func t i on setPays ( $pays ) {108 i f ( $pays == nu l l | | ! preg_match ( ” / ^ ( ( ( [ a−zA−ZêéèëàöÉÈÊÀÖË\␣\−␣ \ .\ ,0 −9]) |(&

quot ; ) ) |(') ) {5 ,300} $/” , $pays ) ) {109 throw new Exception ( ”Erreur , ␣ l e ␣nom␣du␣pays␣ do i t ␣ comporter ␣au␣ p lus ␣300␣

c a r a c t è r e s ␣ ( a lphabét iques , ␣ c h i f f r e s ␣ou␣ ponctuat ion ) ” ) ;110 } e l s e111 $ th i s −> pays = ( $pays == nu l l ) ? ”France ” : $pays ;112 }113114 /**115 @br ie f Constructeur : i n i t i a l i s e l e s a t t r i b u t s à p a r t i r des paramètres .116 Les paramètres correspondent aux va l eu r s à mettre dans l e s a t t r i b u t s .117 Tout ob j e t do i t ê t r e i n i t i a l i s é avec l e cons t ruc t eu r ( appel à new) .118 Des except i ons sont r e j e t é e s en cas de paramètre i n v a l i d e .119 */120 pub l i c func t i on __construct ( $numeroRue , $rue , $complementAddr = nul l ,

$codePostal , $ v i l l e , $pays = ’ France ’ ) {121 $ th i s −> setNumeroRue ( $numeroRue ) ;122 $ th i s −> setRue ( $rue ) ;123 $ th i s −> setComplementAddr ( $complementAddr ) ;124 $ th i s −> setCodePosta l ( $codePosta l ) ;125 $ th i s −> s e tV i l l e ( $ v i l l e ) ;126 $ th i s −> setPays ( $pays ) ;127 }128129 /**130 @br ie f i n i t t i a l i s a t i o n par dé faut : i n i t i a l i s e l e s a t t r i b u t s à cha îne v ide .131 */132 pub l i c func t i on d e f a u l t I n i t ( ) {133 $ th i s −> numeroRue = ”” ;134 $ th i s −> rue = ”” ;135 $ th i s −> complementAddr = ”” ;136 $ th i s −> codePosta l = ”” ;137 $ th i s −> v i l l e = ”” ;138 $ th i s −> pays = ”” ;139 }140141 /**142 @br ie f c on s t ru c t i on d ’ une adre s s e v ide : i n i t i a l i s e l e s a t t r i b u t s à cha îne

v ide .143 Cette méthode permet de c r é e r une adre s s e v ide dans génére r d ’ except i on s .144 E l l e permet de c r é e r un ob j e t en contournant l e cons t ruc t eu r .145 */146147 pub l i c s t a t i c func t i on getEmptyAdresse ( ) {148 $adr = new Adresse ( ”10” , ” A l l é e ␣des ␣ t i l l e u l s ” , ” l e ␣bourg ” , ” 63450 ” , ”La␣

Comptée” , ”France ” ) ;149 $adr −> de f a u l t I n i t ( ) ;150 return $adr ;151 }152153 /**154 @br ie f Obtension d ’ un ob j e t de c l a s s e Adresse à p a r t i r des155 données s a i s i e s dans un f o rmu la i r e .156 Cette méthode prend l e s mêmes paramètres que l e cons t ruc t eu r

102


157 p lus un paramètre passé par r é f é r e n c e qui re tourne l e s messages d ’ except ion .158 I n i t i a l i s e l e s a t t r i b u t s à p a r t i r des paramètre .159 Pour chaque a t t r i b u t e de l a c l a s s e , s i une except ion e s t générée160 au niveau du s e t t e r , l e message d ’ except ion e s t concaténé dans161 l a va r i ab l e messagesExcept ions . Ces messages d ’ except ion sont162 a i n s i renvoyés au con t r ô l eu r .163 */164 pub l i c s t a t i c func t i on getAdresseFromForm(&$messagesExceptions , $numeroRue =

nul l , $rue = nul l ,165 $complementAddr = nul l , $codePosta l = nul l , $ v i l l e = nul l , $pays =

’ France ’ ) {166 $adr = s e l f : : getEmptyAdresse ( ) ;167168 try {169 $adr −> setNumeroRue ( $numeroRue ) ;170 } catch ( Exception $e ) {171 $messagesExcept ions .= $e −> getMessage ( ) . ”<br/>\n” ;172 }173 try {174 $adr −> setRue ( $rue ) ;175 } catch ( Exception $e ) {176 $messagesExcept ions .= $e −> getMessage ( ) . ”<br/>\n” ;177 }178 try {179 $adr −> setComplementAddr ( $complementAddr ) ;180 } catch ( Exception $e ) {181 $messagesExcept ions .= $e −> getMessage ( ) . ”<br/>\n” ;182 }183 try {184 $adr −> setCodePosta l ( $codePosta l ) ;185 } catch ( Exception $e ) {186 $messagesExcept ions .= $e −> getMessage ( ) . ”<br/>\n” ;187 }188 try {189 $adr −> s e tV i l l e ( $ v i l l e ) ;190 } catch ( Exception $e ) {191 $messagesExcept ions .= $e −> getMessage ( ) . ”<br/>\n” ;192 }193 try {194 $adr −> setPays ( $pays ) ;195 } catch ( Exception $e ) {196 $messagesExcept ions .= $e −> getMessage ( ) . ”<br/>\n” ;197 }198 return $adr ;199 }200201 /**202 @br ie f méthode de géné ra t i on d ’ un f o rmu la i r e de s a i s i e d ’ une adresse ,203 l e s a t t r i b u t s du f o rmu la i r e étant i n i t i a l i s é s avec l e s va l eu r s des a t t r i b u t s204 de l ’ ob j e t de c l a s s e Adresse .205 La méthode a f f i c h e au s s i l e s messages d ’ except ion pas s é s en paramètre206 pour que l ’ u t i l i s a t e u r pu i s s e vo i r s ’ i l do i t mod i f i e r sa s a i s i e .207 */208 pub l i c func t i on generateForm ( $method , $act ion , $messagesExcept ions ) {209 echo ”<span␣ s t y l e=\” c o l o r : red ; font−s i z e :120%;\ ”>” . $messagesExcept ions . ”

</span>\n” ;

103


210 FormManager : : beginForm ($method , $ac t i on ) ;211 FormManager : : addTextInput ( ”Numéro” , ”numeroRue” , ”numeroRue” , ”4” , $ t h i s −>

numeroRue ) ;212 FormManager : : addTextInput ( ”Rue/ p lace ” , ” rue ” , ” rue ” , ”30” , $ t h i s −> rue ) ;213 FormManager : : addTextInput ( ”Complément␣d ’ ad r e s s e ” , ” complementAdresse ” , ”

complementAdresse ” , ”30” , $ t h i s −> complementAddr ) ;214 FormManager : : addTextInput ( ”Code␣ po s t a l ” , ” codePosta l ” , ” codePosta l ” , ”10” ,

$ t h i s −> codePosta l ) ;215 FormManager : : addTextInput ( ” V i l l e ” , ” v i l l e ” , ” v i l l e ” , ”20” , $ t h i s −> v i l l e ) ;216 FormManager : : addTextInput ( ”Pays” , ” pays ” , ” pays ” , ”15” , $ t h i s −> pays ) ;217 FormManager : : addSubmitButton ( ”−−−␣OK␣−−−” , ” c l a s s=\” sansLabel \”” ) ;218 FormManager : : endForm ( ) ;219 }220221 /**222 @br ie f Méthode d ’ a f f i c h a g e . Permet d ’ a f f i c h e r une adre s s e en XHTML 1.0 s t r i c t

.223 Les a t t r i b u t s do ivent ê t r e non nu l l . ( mais normalement ça ne r i s qu e pas d ’



pas ê t r e nu l l .226 */227 pub l i c func t i on a f f i c h e ( ) {228 echo ”<strong>Adresse ␣ : ␣</strong><br/>\n” ;229 echo $ th i s −> numeroRue ;230 i f ( s t r l e n ( $ th i s −> numeroRue ) >= 1)231 echo ” , ␣” ;232 echo $ th i s −> rue ;233 i f ( s t r l e n ( $ th i s −> rue ) >= 1)234 echo ”<br/>” ;235 echo $ th i s −> complementAddr ;236 i f ( s t r l e n ( $ th i s −> complementAddr ) >= 1)237 echo ”<br/>” ;238 echo $ th i s −> codePosta l . ”␣” ;239 echo $ th i s −> v i l l e ;240 i f ( s t r l e n ( $ th i s −> v i l l e ) >= 2)241 echo ”<br/>” ;242 echo $ th i s −> pays . ”<br/>” ;243 }244245 }246 ?>

104

Chapitre 7

Bases de données : PHP/Mysql

7.1 Créer la structure d’une base de données dans php-myadmin

7.1.1 Création d’une base de données

7.1.2 Création d’une table

105


7.1.3 Gestion des relations

106

Chapitre 7 : Bases de données : PHP/Mysql

7.1.4 Schéma de conception

7.2 Programmation PHP-Mysql7.2.1 Saisie et enregistrement d’un formulaire

exemples/phpMysql1/ex00_formClasseAdresse.php1 <?php2 include_once ’ . / commonFunctions . php ’ ;3 include_once ’ . / formManagerClass . php ’ ;4 include_once ’ c l a s s e s / c l a s s eAdr e s s e . php ’ ;5 ?>6 <?php7 outputEnTeteXHTML( ’ S a i s i e d\ ’ une adresse ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;8 echo ”<h1>Sa i s i e ␣d ’ une␣ adresse </h1>” ;9 $adre s s e = Adresse : : getEmptyAdresse ( ) ;10 $adresse−>generateForm ( ” post ” , ” . / ex01_ecritureBD_naive . php” , ”” ) ;1112 outputFinFichierHTML5 ( ) ;13 ?>

107


L’insertion dans la base de données se fait par une requête INSERT

exemples/phpMysql1/ex01_ecritureBD_naive.php12 <?php3 inc lude ( ’ . / commonFunctions . php ’ ) ;4 ?>5 <?php6 outputEnTeteHTML5 ( ’ Af f i chage d\ ’ une table ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;7 ?>8 <?php9 $numeroRue=”” ;10 i f ( i s s e t ($_POST[ ’ numeroRue ’ ] ) ) {11 $numeroRue = $_POST[ ’ numeroRue ’ ] ;12 }13 $rue=”” ;14 i f ( i s s e t ($_POST[ ’ rue ’ ] ) ) {15 $rue = $_POST[ ’ rue ’ ] ;16 }1718 $complementAdresse=”” ;

108


19 i f ( i s s e t ($_POST[ ’ complementAdresse ’ ] ) ) {20 $complementAdresse = $_POST[ ’ complementAdresse ’ ] ;21 }22 $codePosta l=”” ;23 i f ( i s s e t ($_POST[ ’ codePostal ’ ] ) ) {24 $codePosta l = $_POST[ ’ codePostal ’ ] ;25 }26 $ v i l l e=”” ;27 i f ( i s s e t ($_POST[ ’ v i l l e ’ ] ) ) {28 $ v i l l e = $_POST[ ’ v i l l e ’ ] ;29 }30 $pays=”” ;31 i f ( i s s e t ($_POST[ ’ pays ’ ] ) ) {32 $pays = $_POST[ ’ pays ’ ] ;33 }3435 // On se connecte au se rveur de bases de données .36 // Adapter l e nom d ’ hote où se trouve l e s e rveur mysql37 $lienBD = mysq l i_ in i t ( ) ;38 mysql i_real_connect ( $lienBD , ’www. remysprogwebtuto . org ’ , ”remy” , ”my_password”

, ’ ExampleDataBase ’ )39 or d i e ( ’ Imposs ib l e de se connecter à mysql (base de donnée ExampleDataBase ) :

’ . mysql_error ( ) ) ;40 echo ’ Connecté au se rveur de bases de données mysql . ’ ;4142 // Récupérat ion de toute s l e s ad r e s s e s ( r equête SQL) :43 $requete = ’INSERT INTO Adresse (numeroRue , rue , complementAdresse , codePostal

, ’44 . ’ v i l l e , pays ) VALUES ( ’ .45 ’ ” ’ . $numeroRue . ’ ” , ” ’ . $rue . ’ ” , ” ’ . $complementAdresse . ’ ” , ’ .46 ’ ” ’ . $codePosta l . ’ ” , ” ’ . $ v i l l e . ’ ” , ” ’ . $pays . ’ ” ) ’ ;47 $ r e s u l t = mysqli_query ( $lienBD , $requete ) or d i e ( ’ Query f a i l e d : ’ .

mysql_error ( ) ) ;4849 // On ferme l a connect ion50 mysq l i_c lose ( $lienBD ) ;51 ?>52 <p>53 <a href=” ./ ex02_affichageTableBD_naive . php” >Af f i c h e r l e contenu</a> de l a t ab l e

<code>Adresse</code>.54 </p>55 <?php56 outputFinFichierHTML5 ( ) ;57 ?>

7.2.2 Affichage des données d’une table

exemples/phpMysql1/ex02_affichageTableBD_naive.php12 <?php3 inc lude ( ’ . / commonFunctions . php ’ ) ;4 ?>5 <?php

109


6 outputEnTeteHTML5 ( ’ Af f i chage du contenu d\ ’ une table 1 ’ , ’UTF−8 ’ , ’ myStyle . css’ ) ;

7 ?>8 <h1>Récupérat ion des r é s u l t a t s d ’ une requête :<br/> tableaux numérique</h1>9 <?php10 // On se connecte au se rveur de bases de données .11 // Adapter l e nom d ’ hote où se trouve l e s e rveur mysql12 $lienBD = mysq l i_ in i t ( ) ;13 mysql i_real_connect ( $lienBD , ’ l o c a l ho s t ’ , ”remy” , ”my_password” , ’

ExampleDataBase ’ )14 or d i e ( ’ Imposs ib l e de se connecter à mysql (base de donnée ExampleDataBase ) :

’ . mysql_error ( ) ) ;15 echo ’ Connecté au se rveur de bases de données mysql . ’ ;1617 // Récupérat ion de toute s l e s ad r e s s e s ( r equête SQL) :18 $requete = ’SELECT * FROM Adresse ’ ;19 $ r e s u l t = mysqli_query ( $lienBD , $requete ) or d i e ( ’ Query f a i l e d : ’ .

mysql_error ( ) ) ;2021 // Af f i chage des r é s u l t a t s22 echo ”<table >\n” ;23 // en−t ê t e de l a table :24 echo ”\t<tr >\n” ;25 echo ”\ t \t<th>ID</th>\n” ;26 echo ”\ t \t<th>No</th>\n” ;27 echo ”\ t \t<th>Rue</th>\n” ;28 echo ”\ t \t<th>Complément</th>\n” ;29 echo ”\ t \t<th>Code␣Postal </th>\n” ;30 echo ”\ t \t<th>Vi l l e </th>\n” ;31 echo ”\ t \t<th>Pays</th>\n” ;32 echo ”\t</tr >\n” ;33 // Récupérat ion de chaque l i g n e du r é s u l t a t de l a requête34 // avec des i n d i c e s numériques35 whi l e ( $l igneResReq = mysql i_fetch_array ( $ r e su l t , MYSQL_NUM) ) {36 echo ”\t<tr >\n” ;

110


37 // a f f i c h a g e de l a l i g n e38 for ( $ i=0 ; $i<s i z e o f ( $l igneResReq ) ; $ i++){39 echo ”<td>” . $l igneResReq [ $ i ] . ”</td>” ;40 }41 echo ”\t</tr >\n” ;42 }43 echo ”</table >\n” ;4445 // L ibé ra t i on des r é s u l t a t s en mémoire46 mysq l i_ f ree_resu l t ( $ r e s u l t ) ;4748 // fermeture de l a connect ion49 mysq l i_c lose ( $lienBD ) ;50 ?>5152 <?php53 outputFinFichierHTML5 ( ) ;54 ?>

exemples/phpMysql1/ex03_affichageTableAssocBD_naive.php12 <?php3 inc lude ( ’ . / commonFunctions . php ’ ) ;4 ?>5 <h1>Récupérat ion des r é s u l t a t s d ’ une requête :<br/>tableaux a s s o c i a t i f</h1>6 <?php7 outputEnTeteHTML5 ( ’ Af f i chage du contenu d\ ’ une table 1 ’ , ’UTF−8 ’ , ’ myStyle . css

’ ) ;8 ?>9 <?php10 // On se connecte au se rveur de bases de données .11 // Adapter l e nom d ’ hote où se trouve l e s e rveur mysql12 $lienBD = mysq l i_ in i t ( ) ;

111


13 mysql i_real_connect ( $lienBD , ’www. remysprogwebtuto . org ’ , ”remy” , ”my_password”, ’ ExampleDataBase ’ )

14 or d i e ( ’ Imposs ib l e de se connecter à mysql (base de donnée ExampleDataBase ) :’ . mysql_error ( ) ) ;

15 echo ’ Connecté au se rveur de bases de données mysql . ’ ;1617 // Récupérat ion de toute s l e s ad r e s s e s ( r equête SQL) :18 $requete = ’SELECT * FROM Adresse ’ ;19 $ r e s u l t = mysqli_query ( $lienBD , $requete ) or d i e ( ’ Query f a i l e d : ’ .

mysql_error ( ) ) ;2021 // Af f i chage des r é s u l t a t s22 echo ”<table >\n” ;23 // en−t ê t e de l a table :24 echo ”\t<tr >\n” ;25 echo ”\ t \t<th>ID</th>\n” ;26 echo ”\ t \t<th>No</th>\n” ;27 echo ”\ t \t<th>Rue</th>\n” ;28 echo ”\ t \t<th>Complément</th>\n” ;29 echo ”\ t \t<th>Code␣Postal </th>\n” ;30 echo ”\ t \t<th>Vi l l e </th>\n” ;31 echo ”\ t \t<th>Pays</th>\n” ;32 echo ”\t</tr >\n” ;33 // Récupérat ion de chaque l i g n e du r é s u l t a t de l a requête34 // avec des i n d i c e s a s s o c i a t i f s ( cha îne s de c a r a c t è r e s )35 whi l e ( $l igneResReq = mysql i_fetch_array ( $ r e su l t , MYSQL_ASSOC) ) {36 echo ”\t<tr >\n” ;37 // a f f i c h a g e de l a l i g n e38 echo ”<td>” . $l igneResReq [ ’ id ’ ] . ”</td>” ;39 echo ”<td>” . $l igneResReq [ ’ numeroRue ’ ] . ”</td>” ;40 echo ”<td>” . $l igneResReq [ ’ rue ’ ] . ”</td>” ;41 echo ”<td>” . $l igneResReq [ ’ complementAdresse ’ ] . ”</td>” ;42 echo ”<td>” . $l igneResReq [ ’ codePostal ’ ] . ”</td>” ;43 echo ”<td>” . $l igneResReq [ ’ v i l l e ’ ] . ”</td>” ;44 echo ”<td>” . $l igneResReq [ ’ pays ’ ] . ”</td>” ;45 echo ”\t</tr >\n” ;46 }47 echo ”</table >\n” ;4849 // L ibé ra t i on des r é s u l t a t s en mémoire50 mysq l i_ f ree_resu l t ( $ r e s u l t ) ;5152 // fermeture de l a connect ion53 mysq l i_c lose ( $lienBD ) ;54 ?>5556 <?php57 outputFinFichierHTML5 ( ) ;58 ?>

7.2.3 Suppression d’une ligne d’une table

exemples/phpMysql1/ex04_suppressionBD_naive.php1

112


2 <?php3 inc lude ( ’ . / commonFunctions . php ’ ) ;4 ?>5 <?php6 outputEnTeteHTML5 ( ’ Réception d\ ’un formula i r e ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;7 ?>8 <?php9 // On se connecte au se rveur de bases de données .10 // Adapter l e nom d ’ hote où se trouve l e s e rveur mysql11 $lienBD = mysq l i_ in i t ( ) ;12 mysql i_real_connect ( $lienBD , ’www. remysprogwebtuto . org ’ , ”remy” , ”my_password”

, ’ ExampleDataBase ’ )13 or d i e ( ’ Imposs ib l e de se connecter à mysql (base de donnée ExampleDataBase ) :

’ . mysql_error ( ) ) ;14 echo ’ Connecté au se rveur de bases de données mysql . ’ ;1516 // Suppress ion de l ’ ad r e s s e dont l ’ID e s t 4 ( requête SQL) :17 $ id=4;18 $requete = ’DELETE FROM Adresse WHERE id= ’. $ id ;19 $ r e s u l t = mysqli_query ( $lienBD , $requete ) or d i e ( ’ Query f a i l e d : ’ .

mysql_error ( ) ) ;2021 // On ferme l a connect ion22 mysq l i_c lose ( $lienBD ) ;23 ?>24 <a href=” ./ ex02_affichageTableBD_naive . php” >Af f i c h e r l e contenu</a> de l a t ab l e

<code>Adresse</code>.2526 <?php27 outputFinFichierHTML5 ( ) ;28 ?>

7.3 Approche objet et MVC

7.3.1 Classe de gestion de la base de donnéesNous créons une classe pour gérer la connection à la base de données. Suivant notre schéma,il ne doit exister qu’une seule connection à la base de données simultanément. Celà simplifiegrandement la gestion. Pour celà, nous utilisons le patron de conception Singleton, qui permetde créer une classe pour laquelle il ne peut y avoir qu’une seule instance. L’instance unique decette classe est accessible par la méthode getInstance. Lors du premier appel à cette méthode,l’unique instance est créée par un appel au constructeur, et sa référence est mémorisée dansune variable statique de classe instance. Lors des appels suivants de la méthode getInstance,cette même instance est simplement retournée.

exemples/phpMysql1/classes/classeDataBaseManager.php1 <?php2 /**3 @br ie f C las se permettant de gé r e r l a connect ion au se rveur mysql4 a i n s i que l ’ exécut ion de r equê t e s SQL.5 La c l a s s e e s t g é r é s avec l e pattern SINGLETON, qui permet6 d ’ avo i r un exempla i re unique du g e s t i o n a i r e de connect ion .

113


7 En e f f e t , i l e s t beaucoup plus f a c i l e de gé r e r l e s connect i ons8 à l a base de donnée une s eu l e à l a f o i s , p lu tô t que par pool .9 */10 class DataBaseManager{11 s t a t i c p r i va t e $lienBD = nu l l ;1213 s t a t i c p r i va t e $ in s tance=nu l l ;1415 s t a t i c pub l i c func t i on ge t In s tance ( )16 {17 i f ( nu l l === s e l f : : $ in s tance ) {18 s e l f : : $ i n s tance = new s e l f ;19 }20 return s e l f : : $ i n s tance ;21 }2223 p r i va t e func t i on __construct ( ) {24 try {25 // On se connecte au se rveur de bases de données .26 // Adapter l e nom d ’ hote où se trouve l e s e rveur mysql27 s e l f : : $lienBD = mysq l i_ in i t ( ) ;28 mysql i_real_connect ( s e l f : : $lienBD , ’www. remysprogwebtuto . org ’ , ”remy” ,

”my_password” , ’ ExampleDataBase ’ )29 or d i e ( ’ Imposs ib l e de se connecter à mysql (base de donnée

ExampleDataBase ) : ’ . mysql_error ( ) . ’<br/> ’ ) ;30 echo ’ Connecté au se rveur de bases de données mysql .<br/> ’ ;31 } catch ( Exception $e ) {32 d i e ( $e−>getMessage ( ) ) ;33 }34 }3536 pub l i c func t i on execRequete ( $requete ) {37 try {38 $ r e s u l t = mysqli_query ( s e l f : : $lienBD , $requete )39 or d i e ( ’ Erreur dans l \ ’ exécut ion de l a requête : ’ . $ requete ) ;40 } catch ( Exception $e ) {41 $ r e s u l t=f a l s e ;42 }43 re turn $ r e s u l t ;44 }4546 pub l i c func t i on mysql_real_escape_str ing ( $ s t r i n g ) {47 re turn mysql i_rea l_escape_str ing ( s e l f : : $lienBD , $ s t r i n g ) ;48 }4950 pub l i c func t i on l i b e r eResu l t a tReque t e ( $ r e s u l t ) {51 i f ( strcmp ( gettype ( $ r e s u l t ) , ’ Object ’ )==0 && strcmp ( ge t_c la s s ( $ r e s u l t )

, ’ mysq l i_resu l t ’ )==0)52 mysq l i_f ree_resu l t ( $ r e s u l t ) ;53 }5455 p r i va t e func t i on __clone ( ) {}56 }575859 ?>

114


7.3.2 Le modèleDans la classe Adresse, on ajoute simplement une méthode pour chaque type de requête.Voyons la méthode qui renvoie une requête d’insertion d’une instance de la classe Adressedans la table Adresse de la base de données ou pour l’affichage de la bse de données. Notez lefiltrage avec l’utilistaire mysql_real_escape_string de la classe DataBaseManager qui permetd’éviter les injections MySQL.

1 /**2 @br ie f r e tourne l a requête d ’ i n s e r t i o n dans l a t ab l e Adresse3 */4 pub l i c func t i on get Inse r tRequete ( $ i d e n t i f i a n t ) {5 $dbManager = DataBaseManager : : g e t In s tance ( ) ;6 $requete = ’INSERT INTO Adresse (numeroRue , rue , complementAdresse ,

codePostal , ’7 . ’ v i l l e , pays ) VALUES ( ” ’ . $dbManager−>mysql_real_escape_str ing ( $th i s−>

numeroRue ) . ’ ” , ” ’8 ␣␣␣␣␣ . $dbManager−>mysql_real_escape_str ing ( $th i s−>rue ) . ’ ” , ” ’9 ␣␣␣␣␣ . $dbManager−>mysql_real_escape_str ing ( $th i s−>complementAddr ) . ’ ” , ’ . ’ ” ’10 ␣␣␣␣␣ . $dbManager−>mysql_real_escape_str ing ( $th i s−>codePosta l ) . ’ ” , ” ’11 ␣␣␣␣␣ . $dbManager−>mysql_real_escape_str ing ( $th i s−>v i l l e ) . ’ ” , ’ . ’ ” ’12 ␣␣␣␣␣ . $dbManager−>mysql_real_escape_str ing ( $th i s−>pays ) . ’ ” ) ’ ;13 re turn $requete ;14 }1516 /**17 @br ie f i n s é r e une adre s s e dans l a t ab l e Adresse18 */19 pub l i c func t i on insertIntoDB ( $ i d e n t i f i a n t ) {20 $dbManager = DataBaseManager : : g e t In s tance ( ) ;21 $ r e s u l t = $dbManager−>execRequete ( $th i s−>get Inse r tRequete ( $ i d e n t i f i a n t ) ) ;22 // On l i b è r e l e s r é s u l t a t s en mémoire :23 $dbManager−>l ibe r eResu l t a tReque t e ( $ r e s u l t ) ;2425 }262728 /**29 @br ie f a f f i c h e toute l a t ab l e adr e s s e .30 */31 pub l i c s t a t i c func t i on afficheAdresseFromDB () {32 $requete = ’SELECT * FROM Adresse ’ ;33 $dbManager = DataBaseManager : : g e t In s tance ( ) ;34 $ r e s u l t = $dbManager−>execRequete ( $requete ) ;35 $messagesExcept ions=”” ;36 whi l e ( $l igneResReq = mysql i_fetch_array ( $ r e su l t , MYSQL_ASSOC) ) {37 $adre s s e = s e l f : : getAdresseFromForm ( $messagesExceptions , $l igneResReq [ ’

numeroRue ’ ] ,38 $l igneResReq [ ’ rue ’ ] , $ l igneResReq [ ’ complementAdresse ’ ] ,39 $l igneResReq [ ’ codePostal ’ ] , $ l igneResReq [ ’ v i l l e

’ ] , $ l igneResReq [ ’ pays ’ ] ) ;40 $adresse−>a f f i c h e ( ) ;41 }42 $dbManager−>l ibe r eResu l t a tReque t e ( $ r e s u l t ) ;43 }

115


4445 /** @br ie f r écupère toute s l e s ad r e s s e s d ’ une v i l l e dans un tab leau4647 */48 pub l i c s t a t i c func t i on getAdresseInTownFromDB( $ v i l l e , $codePosta l ) {49 $requete = ’SELECT * FROM Adresse WHERE v i l l e=” ’ . $ v i l l e . ’ ” AND codePosta l=”

’ . $codePosta l . ’ ” ’ ;50 $dbManager = DataBaseManager : : g e t In s tance ( ) ;51 $ r e s u l t = $dbManager−>execRequete ( $requete ) ;52 $messagesExcept ions=”” ;53 $tabAdresse = array ( ) ;54 $compt=0;55 whi l e ( $l igneResReq = mysql i_fetch_array ( $ r e su l t , MYSQL_ASSOC) ) {56 $tabAdresse [ $compt ] = s e l f : : getAdresseFromForm ( $messagesExceptions ,

$l igneResReq [ ’ numeroRue ’ ] ,57 $l igneResReq [ ’ rue ’ ] , $ l igneResReq [ ’ complementAdresse ’ ] ,58 $l igneResReq [ ’ codePostal ’ ] , $ l igneResReq [ ’ v i l l e ’ ] ,

$ l igneResReq [ ’ pays ’ ] ) ;59 $compt++;60 }61 $dbManager−>l ibe r eResu l t a tReque t e ( $ r e s u l t ) ;62 i f ( $compt==0)63 return nu l l ;64 re turn $adre s s e ;65 }66 }

exemples/phpMysql1/ex07_formClasseAdresse.php1 <?php2 include_once ’ . / commonFunctions . php ’ ;

116


3 include_once ’ c l a s s e s / c l a s s eAdr e s s e . php ’ ;4 ?>5 <?php6 outputEnTeteHTML5 ( ’ S a i s i e d\ ’ une adresse ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;7 echo ”<h1>Sa i s i e ␣d ’ une␣ adresse </h1>” ;8 $adre s s e = Adresse : : getEmptyAdresse ( ) ;9 $adresse−>generateForm ( ” post ” , ” . / ex06_ecritureBD_classe . php” , ”” ) ;1011 outputFinFichierHTML5 ( ) ;12 ?>13 </body>14 </html>

7.3.3 Le contrôleur

exemples/phpMysql1/ex06_ecritureBD_classe.php12 <?php3 include_once ( ’ . / commonFunctions . php ’ ) ;4 include_once ( ’ c l a s s e s / c l a s s eAdr e s s e . php ’ ) ;5 ?>6 <?php7 outputEnTeteHTML5 ( ’ Réception d\ ’un formula i r e ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;8 ?>9 <?php10 $numeroRue=”” ;11 i f ( i s s e t ($_POST[ ’ numeroRue ’ ] ) ) {12 $numeroRue = h tm l en t i t i e s ($_POST[ ’ numeroRue ’ ] , ENT_QUOTES, ’UTF−8 ’) ;13 }14 $rue=”” ;15 i f ( i s s e t ($_POST[ ’ rue ’ ] ) ) {16 $rue = h tm l e n t i t i e s ($_POST[ ’ rue ’ ] , ENT_QUOTES, ’UTF−8 ’) ;17 }1819 $complementAdresse=”” ;

117


20 i f ( i s s e t ($_POST[ ’ complementAdresse ’ ] ) ) {21 $complementAdresse = h tm l en t i t i e s ($_POST[ ’ complementAdresse ’ ] , ENT_QUOTES, ’

UTF−8 ’) ;22 }23 $codePosta l=”” ;24 i f ( i s s e t ($_POST[ ’ codePostal ’ ] ) ) {25 $codePosta l = h tm l e n t i t i e s ($_POST[ ’ codePostal ’ ] , ENT_QUOTES, ’UTF−8 ’) ;26 }27 $ v i l l e=”” ;28 i f ( i s s e t ($_POST[ ’ v i l l e ’ ] ) ) {29 $ v i l l e = h tm l e n t i t i e s ($_POST[ ’ v i l l e ’ ] , ENT_QUOTES, ’UTF−8 ’) ;30 }31 $pays=”France ” ;32 i f ( i s s e t ($_POST[ ’ pays ’ ] ) && $_POST[ ’ pays ’ ] != ”” ) {33 $pays = h tm l e n t i t i e s ($_POST[ ’ pays ’ ] , ENT_QUOTES, ’UTF−8 ’) ;34 }3536 $messagesExcept ions=”” ;3738 $adre s s e = Adresse : : getAdresseFromForm ( $messagesExceptions , $numeroRue , $rue ,

$complementAdresse ,39 $codePostal , $ v i l l e , $pays ) ;4041 i f ( empty ( $messagesExcept ions ) ) {42 echo ”Adresse ␣ s a i s i e <br/>\n” ;43 $adresse−>insertIntoDB ( ) ;44 echo ”done<br/>\n” ;45 } e l s e {46 $current_fi le_name = basename ($_SERVER[ ’REQUEST_URI’ ] , ” . php” ) ;47 $adresse−>generateForm ( ” post ” , $current_fi le_name , $messagesExcept ions ) ;48 }49 ?>50 <a href=” ./ ex05_aff ichageTableClasseBD . php” >Af f i c h e r l e contenu</a> de l a t ab l e

<code>Adresse</code>.51 <?php52 outputFinFichierHTML5 ( ) ;53 ?>

7.3.4 La vue

exemples/phpMysql1/ex05_affichageTableClasseBD.php12 <?php3 inc lude ( ’ . / commonFunctions . php ’ ) ;4 i n c lude ( ’ . / c l a s s e s / c l a s s eAdr e s s e . php ’ ) ;5 ?>6 <h1>Récupérat ion des r é s u l t a t s d ’ une requête :<br/>Via une c l a s s e</h1>7 <?php8 outputEnTeteHTML5 ( ’ Af f i chage du contenu d\ ’ une table 1 ’ , ’UTF−8 ’ , ’ myStyle . css

’ ) ;9 ?>10 <?php11 Adresse : : aff icheAdresseFromDB () ;12 ?>

118


1314 <?php15 outputFinFichierHTML5 ( ) ;16 ?>

119

Chapitre 8

Sessions

8.1 Données de sessionsLes sessions permettent de tranmettre des données d’un srcipt PHP à l’aure, de manière cachéeet plus simple que les méthodes POST ou GET. Voici un exemple où un message est transmisd’une page à l’autre.

Il faut d’abord initialiser la session. La session est automatiquement interrompue et lesdonnées perdues lorsque l’utilisateur quitte le navigateur. Pour conserver les données d’unutilisateur d’une visite à l’autre, il faudrait utiliser des techniques de type Cookie (hors pro-gramme) pour identifier l’utilisateur et stocker les données dans une base de données.

exemples/sessions/ex01_exempleSession.php1 <?php2 // mettre en premier avnt tout code HTML3 s e s s i on_s t a r t ( ) ; // démarage de s e s s i o n4 include_once ’ . / commonFunctions . php ’ ;5 outputEnTeteHTML5 ( ’ Données de s e s s i o n s 1 ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;6 ?>78 <?php9 $_SESSION [ ’ message ’ ] = ” coucou␣ ! ” ;10 echo ”Pour␣ a f f i c h e r ␣ l e ␣message , ␣<a␣ h r e f=\” . / ex02_recuperat ion_sess ion . php\”>

c l i q u e z ␣ i c i </a><br/>\n” ;11 ?>121314 <?php15 outputFinFichierHTML5 ( ) ;16 ?>

8.2 Données de session complexesPour transmettre des données de session complexes, le plus simple est de mettre toutes lesdonnées dans une classe et de transmettre une instance de la classe d’un script à l’autre. Pourtransmettre un objet d’une classe dans les données de session, il faut sérialiser l’objet, c’est àdire qu’il faut le coder en binaire. Pas de panique, ils suffit d’appeler la fonctions serialize.

120

Chapitre 8 : Sessions

exemples/sessions/ex02_recuperation_session.php1 <?php2 // mettre en premier avnt tout code HTML3 s e s s i on_s t a r t ( ) ; // démarage de s e s s i o n4 include_once ’ . / commonFunctions . php ’ ;5 include_once ’ . / ex01_commande_classe . php ’ ;6 outputEnTeteHTML5 ( ’ Données de s e s s i o n s 2 ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;7 ?>89 <?php10 i f ( i s s e t ($_SESSION [ ’ message ’ ] ) ) {11 $message = $_SESSION [ ’ message ’ ] ;12 echo ”message␣ : ␣” . $message . ”<br/>\n” ;13 } e l s e {14 echo ” Imposs ib l e ␣de␣ r é cupé r e r ␣ l e ␣message<br/>\n” ;15 }16 ?>171819 <?php20 outputFinFichierHTML5 ( ) ;21 ?>

exemples/sessions/ex03_commande_classe.php12 <?php3 class Commande {4 p r i va t e $numClient ;56 pub l i c func t i on getNumClient ( ) {78 }910 pub l i c func t i on setNumClient ( $NumClient ) {11 i f ( $NumClient == nu l l | | ! is_numeric ( $NumClient ) ) {12 throw new Exception ( ”Problème␣ : ␣numéro␣de␣ c l i e n t ␣ i n c o r r e c t ” ) ;13 } e l s e {14 $th i s−>numClient = $NumClient ;15 }16 }1718 pub l i c func t i on __construct ( $NumClient ) {19 $th i s−>setNumClient ( $NumClient ) ;20 }2122 pub l i c func t i on a f f i c h e ( ) {23 echo ”Numéro␣de␣ c l i e n t ␣ : ␣” . $ th i s−>numClient . ”<br/>\n” ;24 }25 }262728 ?>

exemples/sessions/ex04_exempleSerialize.php

121


1 <?php2 // mettre en premier avnt tout code HTML3 s e s s i on_s t a r t ( ) ; // démarage de s e s s i o n4 include_once ’ . / commonFunctions . php ’ ;5 include_once ’ . / ex03_commande_classe . php ’ ;6 outputEnTeteHTML5 ( ’ Données de s e s s i o n s : s e r i a l i z e ’ , ’UTF−8 ’ , ’ myStyle . css ’ ) ;7 ?>89 <?php10 try {11 $commande = new Commande(15) ;12 //$commande−>a f f i c h e ( ) ;13 $_SESSION [ ’ commandeEnCours ’ ] = s e r i a l i z e ($commande) ;14 echo ”Pour␣ a f f i c h e r ␣ l a ␣commande , ␣<a␣ hr e f=\” . / ex05_recupe ra t i on_se r i a l i z e . php

\”>c l i q u e z ␣ i c i </a><br/>\n” ;15 }16 catch ( Exception $e ) {17 echo ”Problème␣avec ␣ l e ␣numéro␣de␣ c l i e n t ␣!<br>\n” ;18 echo $e−>getMessage ( ) . ”<br/>\n” ;19 }2021 ?>222324 <?php25 outputFinFichierHTML5 ( ) ;26 ?>

exemples/sessions/ex05_recuperation_serialize.php1 <?php2 // mettre en premier avnt tout code HTML3 s e s s i on_s t a r t ( ) ; // démarage de s e s s i o n4 include_once ’ . / commonFunctions . php ’ ;5 include_once ’ . / ex03_commande_classe . php ’ ;6 outputEnTeteHTML5 ( ’ Données de s e s s i o n s : u n s e r i a l i z e ’ , ’UTF−8 ’ , ’ myStyle . css ’ )

;7 ?>89 <?php10 i f ( i s s e t ($_SESSION [ ’ commandeEnCours ’ ] ) ) {11 $commande = un s e r i a l i z e ($_SESSION [ ’ commandeEnCours ’ ] ) ;12 $commande−>a f f i c h e ( ) ;13 } e l s e {14 echo ” Imposs ib l e ␣de␣ r é cupé r e r ␣ l a ␣commande␣en␣ cours<br/>\n” ;15 }16 ?>171819 <?php20 outputFinFichierHTML5 ( ) ;21 ?>

122

Chapitre 8 : Sessions

8.3 Transmettre l’identité d’un utilisateur via une ses-sion

8.3.1 Initialisation de la sessionLa session doit être réinitialisée par un appel à session_destroy lorque l’utilisateur s’identifie.(Sinon, un pirate pourrait créer une session puis transmettre l’identifiant de session à un uti-lisateur légitime pour lui prendre son mot de passe.) Le formulaire de création d’un nouvelutilisateur va ressembler à :

<form action="./receptionLogin.php" method="POST"><p>

<label for="identifiant">Identifiant</label><input type="text" name="identifiant" value="" size="10"/>

</p><p>

<label for="password">Mot de passe</label><input type="password" name="password" value="" size="10"/>

</p><p><label for="passwordVerif">Confirmation du mot de passe</label><input type="password" name="passwordVerif" value="" size="10"/>

</form>

Lors de la réception du mot de passe dans le script receptionLogin.php après que l’utilisateurait rempli le formulaire d’identification ou de création d’un mot de passe, on détruit la sessionavec session_destroy.

<?php// destruction de la session si elle existe.// les données précédentes seront perdues !session_start();session_destroy();

if (!isset($_POST([login]))){echo 'Bonjour, pour afficher cette page, vous devez'.

.'créer un compte et vous identifier.\n';}else{

if (!valid_login_and_password($_POST([login]), $_POST([password]),$_POST([passwordVerif]))){

echo 'Bonjour, désolé mais l'authentification est invalide.';}else{// on démare la session// permet de transmettre l'identifiant de l'utilisateur// aux autres scripts qui savent ainsi reconnaître// l'utisateur identifié pour maintenir ses données.session_start();$_SESSUION['user'] = $_POST([login]);

123


echo "bonjour, bienvenue dans votre espace perso !";}

}?>

La fonction valid_login_and_password (qui pourra être une méthode de classe, est àimplémenter et doit réaliser au moins les opération suivantes :a) Lors de la création d’un compte

1. Vérifier que les chaînes $_POST([login]) et $_POST([password]) et $_POST([passwordVerif])existent etsont conformes (chaînes de caractères de taille raisonnables) ;

2. Vérifier par une requête dans la base de données que le login n’existe pas déjà.

3. Vérifier que la vérification du mot de passe et le mot de passe coïncident.

Par ailleurs, le mot de passe doit être chiffré (par exemple en sha avant d’être entré dansla base de données.b) Lors de l’identification d’un utilisateur existant

1. Vérifier que les chaînes $_POST([login]) et $_POST([password]) et $_POST([passwordVerif])existent etsont conformes (chaînes de caractères de taille raisonnables) ;

2. Vérifier par un accès à la basse de données que le mot de passe (après chiffrement)correspond bien à celui d’un utilisateur existant.

8.3.2 Risques pour la sécuritéLa gestion des utilisateurs et des sessions, ainsi que celles des cookies, comporte de nombreuxrisques d’usurpation d’identité, récupération de mots de passe par un pirtae, etc. Les rêglesde précautions présentées ci-dessus sont de simples remarques de bon sens et ne sont pasexhaustives des précautions à prendre. La sécurité complète d’un site en PHP/MySql dépassele cadre de ce cours et on aura intérêt à se renseigner, notamment sur toutes les techniquesd’insertion que peuvent utiliser les pirates pour hacker un site.

124

Documents

Programmation Web