Programmation Web

Programmation Web
Cot serveur : HTML, CSS, PHP, Mysql

Rmy Malgouyres LIMOS UMR 6158, IUT, dpartement info Universit Clermont 1 B.P. 86 63172 AUBIERE cedex http ://www.malgouyres.fr/
Table des matires

1 Pages web statiques HTML5 1.1 HTML, la norme et son volution . . . . . . . 1.2 Validation W3C et tests de portabilit . . . . 1.3 Structure dun document HTML ou XHTML . 1.4 Premier document HTML5 . . . . . . . . . . 1.5 Mise en forme du texte en HTML : styles CSS 1.6 Dnir le graphisme CSS . . . . . . . . . . . . 1.7 Les Tableaux . . . . . . . . . . . . . . . . . . 1.8 Liens . . . . . . . . . . . . . . . . . . . . . . . 1.9 Insertion dimages . . . . . . . . . . . . . . . 2 Styles CSS et mise en page 2.1 Feuilles de style CSS . . . . . . . . . 2.2 Classes CSS . . . . . . . . . . . . . . 2.3 Slecteurs de style CSS par ID . . . . 2.4 Exemple : style CSS pour un tableau 2.5 lments de type block et inline . . . 2.6 Positionnement CSS et mise en page 2.7 Arborescence de balises et CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 3 3 5 6 8 9 11 15 17 20 20 22 25 27 29 32 47 50 50 51 52 53 54 55 56 61 62 66 72 72 75 78
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
3 PHP procdural 3.1 Gnrer du code HTML avec PHP . . . . . . . . 3.2 Exemple de fonction en PHP . . . . . . . . . . . 3.3 Inclure un chier PHP dans un autre . . . . . . . 3.4 Arithmtique : types int et float . . . . . . . . 3.5 Tableaux indexs : avec une cl de type int . . . 3.6 Tableaux associatifs : avec une cl de type String 3.7 Passage de paramtre un script PHP . . . . . .
4 Les classes en PHP 4.1 Exemple de classe PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.2 Validation en entre et gestion dune exception . . . . . . . . . . . . . . . . . 5 Formulaires HTML/PHP 5.1 Formulaires HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.2 Exemple de style CSS pour formulaire . . . . . . . . . . . . . . . . . . . . . . 5.3 Validation : Test de champs obligatoire vide . . . . . . . . . . . . . . . . . . . 1
TABLE DES MATIRES 5.4 5.5 5.6 5.7 Gnration du formulaire dans une fonction . . Validation : Renvoi des valeurs vers lutilisateur Injections et ltrage . . . . . . . . . . . . . . . Formulaires dynamiques an javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 81 83 87 89 89 89 91 95 96
6 Formulaires PHP : MVC, ltrage, exceptions 6.1 Le Modle MVC . . . . . . . . . . . . . . . . . . . . . . . . 6.2 La vue :Formulaire HTML de base . . . . . . . . . . . . . . 6.3 La vue : Classe de routines pour la gnration de formulaires 6.4 Le contrleur : Rception et achage basique des donnes . 6.5 Le MVC : Filtrage des avec une classe et exceptions . . . . .
7 Bases de donnes : PHP /Mysql 105 7.1 Crer la structure dune base de donnes dans phpmyadmin . . . . . . . . . . 105 7.2 Programmation PHP-Mysql . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 7.3 Approche objet et MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 8 Sessions 120 8.1 Donnes de sessions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 8.2 Donnes de session complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 8.3 Transmettre lidentit dun utilisateur via une session . . . . . . . . . . . . . . 123
Chapitre 1 Pages web statiques HTML5

1.1 HTML, la norme et son volution
Le langage HTML, ou Hyper Text Markup Language, permet de dcrire et de mettre en forme des documents varis, depuis du simple texte jusqu des documents multimdia riches avec la dnition dHTML 5. Une page HTML est en gnral destine tre publie sur le World Wide Web, o toutes sortes de gens utilisent toutes sortes de navigateurs qui fonctionnent sous sdirentes platteformes (Mac OS, ipad, Linux, Androd, MS Windows, etc. pour citer les plus courants). Pour que cel fonctionne, il a t ncessaire de dnir un standard pour le langage HTML. Cest le standard du World Wide Web Consortium, ou W3C. A noter le rle dterminant qua jou la libration du code source du navigateur Netscape par la socit Netscape Communications Corporation pour que la pluralit des acteurs nvitent que les standards du web soient de fait propritaire.
1.2 Validation W3C et tests de portabilit

1.2.1 Validateur W3C
Lorsquon crit une page web en HTML, pour tre sr que celle-ci soit correctement interprte et ache par tous les navigateurs qui supportent coorectement la norme, il faut valider cette page pour sassurer quelle est conforme la norme. Le processus est similaire lanalyse de la syntaxe dun programme par un compilateur et peut se faire en ligne en uploadant le chier ou en donnant son URL publique. Certains diteurs proposent une validation interne ou mme la vole. Les scripts en PHP et autre ne sont pas directement validables car ce sont en fait des programmes. Par contre, leur sortie (ce quils achent) doit tre du HTML conforme la norme.
Rmy Malgouyres, http ://www.malgouyres.fr/
Programmation Web
(a) Lupload dun chier HTML
(b) Rsultat correct sur le validateur W3C
Figure 1.1: Le processus de validation dun chier HTML sur le validateur W3C
1.2.2 Tests de portabilit

Mme pour un document valid, les navigateurs nont pas tous la mme implmentation du moteur danalyse et de rendu du document, notamment en ce qui concerne les styles par dfaut. Pour cette raison, il est indispensable avant de publier un site web, de le tester sur le plus possible de plateformes et de navigateurs. Ceci peut tre simpli par des outils comme VirtualBox (mais il en existe dautres...), qui permettent en virtualisant de faire tourner simultanment plusieurs systmes dexploitation sur un mme ordinateur. Par exemple, sur la gure 1.2, on voit un exemples o lachage de la page est test simultanment avec Internet Explorer et Safari sous Windows, Firefox, Chrome et Opera sous linux et Chrome sous tablette et smartphone Android. Le systme Windows tourne en virtuel dans VirtualBox (disponible dans la logitque dUbuntu). et le serveur Web (Apache) est instal en local sous Ubuntu. Les systmes Windows et Ubuntu sont connects par un rseau local virtuel interne au systme hte, en lhoccurence Ubuntu. Notons que les navigateurs sur smartphones sont particulirement capricieux car ils nont pas les ressources pour implmenter toutes les variantes, surtout sur du code non valid.
Chapitre 1 : Pages web statiques HTML5
Figure 1.2: Le processus de test de portabilit avec VirtualBox.
1.3 Structure dun document HTML ou XHTML

Un document HTML ou XHTML doit comporter : 1. Sur la premire ligne qui ne soit pas constitue dun commentaire : le doctype qui spcie le type de document (HTML, XHTML et version). Ceci permet que le navigateur puisse supporter et interprter plusieurs formats de documents. 2. Une balise de dbut de description de document <html [+attributs]>. 3. Un en-tte compris dans une balise <head>...</head>. 4. Dans le header, une spcication de lencoding ou charset : ISO-8859-1, latin1, et maintenant systmatiquement utf-8. Ce dernier est dailleurs le dfaut utilis lorsque lencoding nest pas spci. 5. Dans le header, de manire 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
Programmation Web
Par exemple, le document Hello World ! en XHTML 1.0 strict se compose comme suit : exemples/ChapitreHTML/ex01_helloWorldXhtml.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 < !DOCTYPE html PUBLIC //W3C//DTDXHTML 1 . 0 S t r i c t //EN h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1 s t r i c t . dtd > < ! D c l a r a t i o n du d e b u t d un document H T M L a v e c l a l a n g u e : > <html xml : lang= en lang= en xmlns= h t t p : / /www. w3 . o r g /1999/ xhtml > <head> < ! d b u t de l en t t e H T M L > < ! D c l a r a t i o n du type d encodage > <meta http e q u i v= Content Type content= t e x t / html ; c h a r s e t=u t f 8 /> < ! T i t r e de l a page dans l a f e n t r e ou l o n g l e t du n a v i g a t e u r > < t i t l e >My f i r s t HTML document</ t i t l e > </ head> <body> <p>H e l l o world !</p> </ body> </ html>
Le document Hello World ! en HTML5 se compose comme suit : exemples/ChapitreHTML/ex02_helloWorldHtml5.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 < ! doctype html> < ! D e c l a r a t i o n du d e b u t d un document H T M L a v e c l a l a n g u e : > <html lang= f r > <head> <meta charset=UTF8 /> < ! D c l a r a t i o n du type d encodage > < ! T i t r e de l a page dans l a f e n t r e ou l o n g l e t du n a v i g a t e u r > < t i t l e >My f i r s t HTML document</ t i t l e > </ head> <body> <p> H e l l o world ! </p> </ body> </ html>
Le XHTML 1.0 strict possde une syntaxe plus stricte que ses prdcesseurs, simpliant le travail des navigateurs et des moteurs de recherche. En particulier, toutes les balises sont en minuscules et il y a obligation de fermer les balises, quitte mettre une balise autofermante comme <br/>. La norme HTML5 rintroduit un certain laxisme au niveau de la syntaxe mais il est prfrable pour la lisibilit du code de respecter la syntaxe XHTML 1.0 strict dans une page HTML5.
1.4 Premier document HTML5

exemples/ChapitreHTML/ex03_corps_balises.html
1 < ! doctype html> 2 < ! D e c l a r a t i o n du d e b u t d un document H T M L > 3 <html lang= f r > 4 < ! V o i c i l en t e t e q u i d e c l a r e l e s p r o p r i e t e s g e n e r a l e s de l a page > 5 <head> < ! d e b u t de l en t e t e H T M L >
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
< ! d e c l a r a t i o n de l encodage pour l e s a c c e n t s . . . > <meta charset=UTF8 /> < ! T i t r e de l a page ( a u s s i t i t r e de l a f e n t r e du n a v i g a t e u r ) > < t i t l e >Ma p r e m i r e Page HTML </ t i t l e > </ head> <body> < ! d b u t du c o r p s H T M L > <h1>Mon p r e m i e r f i c h i e r HTML </ h1> <p> < ! Nouveau p a r a g r a p h e ( s a u t de l i g n e ) > C e c i e s t mon p r e m i e r f i c h i e r HTML. <br /> < ! l a l i g n e > Le body r e p r s e n t e l e c o r p s du document , dans l e q u e l on met l e t e x t e . </p> < ! Fin de p a r a g r a p h e > <p> HTML e s t un l a n g a g e de d e s c r i p t i o n de documents non WISIWIG, c e s t d i r e que l e f i c h i e r s o u r c e ne r e s s e m b l e pas vraiment 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 v e r r a .<br /> WISIWIG : <em >What You See I s What You Get</em >. </p> <p> En HTML, l e s <em > b a l i s e s</em > , q u i s o n t e n c a d r e s par d e s &l t ; e t &g t ; , <strong> d f i n i s s e n t l a s t r u c t u r e du document</ strong> en c a r a c t r i s a n t diffrentes p a r t i e s du document ( t i t r e s , p a ra g r a ph e s , t a b l e a u x , l m e n t important , l i s t e puces , images , o b j e t s de type v i d o f l a s h , multimdia pour HTML5, etc . </p> <p> Par exemple , l a b a l i s e &l t ; p&g t ; &l t ; / p&g t ; d l i m i t e un p a r a g rap h e . Un c o u p l e de b a l i s e s avec du t e x t e a n t r e l e s b a l i s e s s a p p e l l e un <em > l m e n t</em >. </p> </ body> < ! f i n du c o r p s H T M L > </ html> < ! f i n du code H T M L >
Programmation Web
1.5 Mise en forme du texte en HTML : styles CSS
exemples/ChapitreHTML/ex04_mise_en_forme_texte.html
1 < ! doctype html> 2 < ! D e c l a r a t i o n du d e b u t d un document H T M L > 3 <html lang= f r > 4 < ! V o i c i l en t e t e q u i d e c l a r e l e s p r o p r i e t e s g e n e r a l e s de l a page > 5 <head> 6 < ! D e c l a r a t i o n du type d encodage > 7 <meta charset= u t f 8 /> 8 < s t y l e> 9 /* D f i n i t i o n du s t y l e */ 10 body { 11 f o n t f a m i l y : A r i a l Verdana ; 12 f o n t s i z e : 125%; 13 width : 800 px ; 14 } 15 p { 16 t e x t a l i g n : j u s t i f y ; 17 }/* mise en forme d e s p a r a g r a p h e s */ 18 /* mise en forme du t i t r e */ 19 h1 { 20 t e x t a l i g n : c e n t e r ; 21 f o n t s i z e : 150%; 22 } 23 /* mise en forme l m e n t t i m p o r t a n t l e s 120% s o n t r e l a t i f au c o n t e x t e */
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
strong { f o n t v a r i a n t : s m a l l c a p s ; f o n t s i z e : 120%; } </ s t y l e> < t i t l e >Mise en forme du t e x t e en HTML </ t i t l e > </ head> <body> < ! d b u t du c o r p s H T M L > <h1>Mise en forme du t e x t e en HTML </ h1> <p> I l e x i s t e en HTML d e s b a l i s e s pour m e t t r e en < i> i t a l i q u e</ i> , en <b>g r a s</ b> , en <code> t e x t w r i t e r</ code> , 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> c a r i l s ne p e r m e t t e n t pas de d i s t i n g u e r l a s t r u c t u r e , a u s s i a p p e l e smantique . </p> <p> S i l on s o u h a i t e c h a n g e r l a s p e c t d e s l m e n t s s t r u c t u r e l s , par exemple dont l i m p o r t an c e e s t s o u l i g n e avec &l t ; s t r o n g&g t ; &l t ; / s t r o n g&g t ; , on l e d f i n i t au n i v e a u d un <em > s t y l e CSS</em >. </p> <p> On peut a i n s i d f i n i r l e s s t y l e s t y p o g r a p h i q u e s ( f o n t e , . . . ) e t l a mise en page ( a l i g n e m e n t gauche , d r o i t e , j u s t i f i , e t c . ) du t e x t e dans l e s d i f f r e n t s l m e n t s d une page HTML au n i v e a u de l en t t e . </p> <p> Enfin , s i l on s o u h a i t e c h a n g e r l e s t y l e l o c a l e m e n t pour d c o r e r s a n s qu i l s a g i s s e d un l m e n t s t r u c t u r e l , on peut u t i l i s e r <span s t y l e= f o n t f a m i l y : Comic Sans MS; f o n t s i z e :150% > l a b a l i s e g n r i q u e &l t ; span&g t ;& l t ; / span&g t ; . </ span> </p> </ body> < ! f i n du c o r p s H T M L > </ html> < ! f i n du code H T M L >
1.6 Dnir le graphisme CSS

exemples/ChapitreHTML/ex05_couleurs.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset= u t f 8 /> 5 < s t y l e> 6 /* D f i n i t i o n du s t y l e */ 7 body { 8 f o n t s i z e : 125%; 9 background c o l o r : #c 0 c 0 c 0 ; /* f o n t e par d f a u t */ 10 c o l o r : #333333;
Programmation Web
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
f o n t w e i g h t : b o l d } p { t e x t a l i g n : j u s t i f y ; }/* mise en forme d e s p a r a g r a p h e s */ /* mise en forme du t i t r e */ h1 { t e x t a l i g n : c e n t e r ; f o n t s i z e : 150%; background c o l o r : #ddd ; } /* mise en forme l m e n t t i m p o r t a n t l e s 120% s o n t r e l a t i f au c o n t e x t e */ strong { background c o l o r : w h i t e ; color : black ; f o n t w e i g h t : b o l d e r ; } </ s t y l e> < t i t l e >D f i n i t i o n d e s c o u l e u r s</ t i t l e > </ head> <body> < ! d b u t du c o r p s H T M L > <h1> D f i n i t i o n d e s c o u l e u r s v i a dans un s t y l e CSS </ h1> <p> Dans l e s t y l e CSS , on peut a u s s i d f i n i r l e s c o u l e u r s d e s d i f f r e n t s l m e n t s . En g n r a l , on p r f r e d f i n i r<strong> un s t y l e CSS dans un f i c h i e r </ strong> s p a r q u i e s t a p p e l dans t o u t e s l e s p a g e s ( ou une p a r t i e d e s p a g e s ) d un s i t e , c e q u i permet d a v o i r un s t y l e u n i f o r m e s a n s s embter . </p> <p> Les s i t e s web ont en g n r a l une <strong>c h a r t e g r a p h i q u e</ strong> q u i comprend un p e t i t nombre de c o u l e u r s b i e n h a r m o n i s e s q u i s y m b o l i s e n t b i e n
10
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
l e n t i t que r e p r s e n t e l e s i t e . </p> <p> Dans l e s e n t r e p r i s e s , c e s o n t s o u v e n t d e s p e r s o n n e s d i f f r e n t e s q u i s o c c u p e n t du s t y l e CSS ou q u i s o c c u p e n t du contenu e t d e s f o n c t i o n a l i t s du s i t e . </p> <p> On peut e n s u i t e <span s t y l e= c o l o r : w h i t e ; f o n t f a m i l y : Comic Sans MS; > m o d i f i e r l o c a l e m e n t </ span> <strong><span s t y l e= f o n t v a r i a n t : s m a l l c a p s ; >l e s t y l e .</ span></ strong> </p> </ body> < ! f i n du c o r p s H T M L > </ html> < ! f i n du code H T M L >
1.7 Les Tableaux
exemples/ChapitreHTML/ex06_tableaux.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset= u t f 8 /> 5 < s t y l e> 6 /* D f i n i t i o n du s t y l e */ 7 body { 8 f o n t s i z e : 125%; 9 background c o l o r : #c 0 c 0 c 0 ; / * f o n t e par d f a u t */ 10 c o l o r : #333333; 11 f o n t w e i g h t : b o l d 12 } 13 p { 14 t e x t a l i g n : j u s t i f y ;
11
Programmation Web
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
}/* mise en forme d e s p a r a g r a p h e s */ /* mise en forme du t i t r e */ h1 { t e x t a l i g n : c e n t e r ; f o n t s i z e : 150%; background c o l o r : #ddd ; } /* mise en forme l m e n t t i m p o r t a n t l e s 120% s o n t r e l a t i f au c o n t e x t e */ strong { color : black ; f o n t w e i g h t : b o l d e r ; } </ s t y l e> < t i t l e >Tableaux en HTML </ t i t l e > </ head> <body> < ! d b u t du c o r p s H T M L > <h1>Tableaux en XHTML 1 . 0</ h1> <p> V o i c i une t a b l e avec l e s t y l e par d f a u t . Le rendu e s t un peu sommaire . </p> <table> <caption> Exemple de t a b l e s a n s mise en forme </ caption> <thead> < tr> < ! 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 c o l o n n e s ) > <th ></ th>< ! c a s e v i d e en h a u t gauche > <th ><strong>Colonne 1</ strong></ th> <th><strong>Colonne 2</ strong></ th> <th><strong>Colonne 3</ strong></ th> </ tr> </ thead> <tbody> < tr> < ! n o u v e l l e l i g n e > <th ><! t i t r e de l i g n e ><strong>l i g n e&nbsp ; 1</ strong></ th> <td>< ! n o u v e l l e c a s e > C e c i e s t l a c a s e <br /> d en haut gauche </ td> <td>< ! n o u v e l l e c a s e > C e c i e s t l a c a s e <br /> d en haut au m i l i e u </ td> <td>< ! n o u v e l l e c a s e > C e c i e s t l a c a s e <br /> d en haut d r o i t e </ td> </ tr> < tr> < ! n o u v e l l e l i g n e > <th>< ! t i t r e de l i g n e ><strong>l i g n e&nbsp ; 2</ strong></ th> <td>< ! n o u v e l l e c a s e > C e c i e s t l a c a s e <br /> d en bas gauche </ td> <td>< ! n o u v e l l e c a s e > C e c i e s t l a c a s e
12
71 <br /> 72 d en bas au m i l i e u </ td> 73 <td>< ! n o u v e l l e c a s e > C e c i e s t l a c a s e 74 <br /> 75 d en bas d r o i t e </ td> 76 </ tr> 77 </ tbody> 78 </ table> 79 </ body>< ! f i n du c o r p s H T M L > 80 </ html> 81 < ! f i n du code H T M L >
exemples/ChapitreHTML/ex07_tableaux2.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset= u t f 8 /> 5 < s t y l e> 6 /* D f i n i t i o n du s t y l e */ 7 body { 8 f o n t s i z e : 125%; 9 background c o l o r : #c 0 c 0 c 0 ; / * f o n t e par d f a u t */ 10 c o l o r : #333333; 11 f o n t w e i g h t : b o l d 12 } 13 p { 14 t e x t a l i g n : j u s t i f y ; 15 }/* mise en forme d e s p a r a g r a p h e s */
13
Programmation Web
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
/* mise en forme du t i t r e */ h1 { t e x t a l i g n : c e n t e r ; f o n t s i z e : 150%; background c o l o r : #ddd ; } /* mise en forme l m e n t t i m p o r t a n t l e s 120% s o n t r e l a t i f au c o n t e x t e */ strong { color : black ; f o n t w e i g h t : b o l d e r ; } </ s t y l e> < t i t l e >Tableaux : mise en forme</ t i t l e > </ head> <body> < ! d b u t du c o r p s H T M L > <h1>Tableaux : mise en forme</ h1> <p> On peut d f i n i r d e s t a b l e s en r g l a n t l e s t y l e en in l i n e , mais a n e s t pas t r s p r a t i q u e c a r l e code n e s t pas l i s i b l e ! </p> <div s t y l e= padding l e f t : 10%; padding r i g h t : 10%; > <table s t y l e=minwidth : 9 0 % ; padding : 0px ; v e r t i c a l a l i g n : top ; background c o l o r : #ddd ; border s t y l e : o u t s e t ; border width : 10 px ; border c o l o r : b l a c k ; border c o l l a p s e : c o l l a p s e ; t e x t a l i g n : c e n t e r ; > <caption s t y l e= padding : 15 pt ; background c o l o r : w h i t e ; > Exemple de t a b l e </ caption> <thead> < tr> <th s t y l e= ></ th> <th s t y l e= border s t y l e : s o l i d ; border width : 2px ; border c o l o r : b l a c k ; padding : 20 pt ; ><strong>Colonne 1</ strong></ th> <th s t y l e= border s t y l e : s o l i d ; border width : 2px ; border c o l o r : b l a c k ; padding : 20 pt ; ><strong>Colonne 2</ strong></ th> <th s t y l e= border s t y l e : s o l i d ; border width : 2px ; border c o l o r : b l a c k ; padding : 20 pt ; ><strong>Colonne 3</ strong></ th> </ tr> </ thead> <tbody> < tr> <th s t y l e= border s t y l e : s o l i d ; border width : 2px ; border c o l o r : b l a c k ; padding : 20 pt ; ><strong>l i g n e&nbsp ; 1</ strong></ th> <td s t y l e= t e x t a l i g n : l e f t ; border s t y l e : s o l i d ; border width : 2px ; border c o l o r : b l a c k ; padding : 5 pt ; > C e c i e s t l a c a s e <br /> d en haut gauche</ td> <td s t y l e= t e x t a l i g n : c e n t e r ; border s t y l e : s o l i d ; border width : 2 px ; border c o l o r : b l a c k ; padding : 5 pt ; > C e c i e s t l a c a s e <br /> d en haut au m i l i e u</ td> <td s t y l e= t e x t 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
; border c o l o r : b l a c k ; padding : 5 pt ; > C e c i e s t l a c a s e <br /> d en haut d r o i t e</ td> </ tr> < tr> <th s t y l e= t e x t a l i g n : c e n t e r ; border r i g h t s t y l e : dashed ; padding : 5 pt ; ><strong>l i g n e&nbsp ; 2</ strong></ th> <td s t y l e= t e x t a l i g n : c e n t e r ; padding : 5 pt ; border r i g h t s t y l e : dashed ; > C e c i e s t l a c a s e <br /> d en bas gauche </ td> <td s t y l e= t e x t a l i g n : c e n t e r ; padding : 5 pt ; > C e c i e s t l a c a s e <br /> d en bas au m i l i e u </ td> <td s t y l e= t e x t a l i g n : r i g h t ; border l e f t s t y l e : dashed ; padding : 5 pt ; > C e c i e s t l a c a s e <br /> d en bas d r o i t e</ td> </ tr> </ tbody> </ table> </ div> <p> En c l a i r , i l vaut mieux d f i n i r l e s t y l e d e s l m e n t s de l a t a b l e au n i v e a u d une f e u i l l e de s t y l e CSS ( v o i r p l u s l o i n . . . ) . </p> </ body>< ! f i n du c o r p s H T M L > </ html> < ! f i n du code H T M L >
1.8 Liens
exemples/ChapitreHTML/ex08_liens.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset= u t f 8 /> 5 < s t y l e> 6 /* D f i n i t i o n du s t y l e */ 7 body { 8 f o n t s i z e : 125%; 9 background c o l o r : w h i t e ; /* f o n t e par d f a u t */ 10 c o l o r : #333333; 11 f o n t w e i g h t : b o l d 12 } 13 p { 14 t e x t a l i g n : j u s t i f y ; 15 }/* mise en forme d e s p a r a g r a p h e s */ 16 /* mise en forme du t i t r e */ 17 h1 { 18 t e x t a l i g n : c e n t e r ; 19 f o n t s i z e : 150%;
15
Programmation Web
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
background c o l o r : #ddd ; } /* mise en forme l m e n t t i m p o r t a n t l e s 120% s o n t r e l a t i f au c o n t e x t e */ strong { color : black ; f o n t w e i g h t : b o l d e r ; } </ s t y l e> < t i t l e >L i e n s h y p e r t e x t e</ t i t l e > </ head> <body> < ! d b u t du c o r p s H T M L > <h1>L i e n s h y p e r t e x t e</ h1> <div> <strong>On peut c r e r d i f f r e n t s t y p e s de l i e n s :</ strong> <ul> < ! l i s t e p u c e s > < l i> l i e n s h y p e r t e x t e en r e l a t i f : <a href= . / ex_images . html >c l i q u e z i c i< / a> . </ l i > < l i> l i e n s h y p e r t e x t e en a b s o l u : <a href= h t t p : / /www. remysprogwebtuto . o r g / exemples / html / ex_images . html > c l i q u e z i c i</ a> . </ l i > < l i> l i e n s v e r s une a n c r e en r e l a t i f : <a href= . / ex_images . html#image2 > Voir l e deuxime exemple d image</ a> </ l i > </ ul> </ div> <p s t y l e= f o n t s i z e : 150%; f o n t w e i g h t : b o l d e r ; >
16
49 Pour f a i r e d e s l i e n s v e r s l e s i t e mme , i l vaut t o u j o u r s mieux 50 u t i l i s e r d e s l i e n s en r e l a t i f s c a r s i on dmnage l e s i t e ( ou 51 s i on r c u p r e 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 c a s s e n t pas . 52 ( c o n d i t i o n de g a r d e r l a r b o r e s c e n c e d e s 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 g e n r e : 55 <br /> 56 <code> 57 C: / j e / t o u r n e / pas / s u r /un/ s e r v e u r / l i n u x . html </ code> 58 </p> 59 </ body> 60 < ! f i n du c o r p s H T M L > 61 </ html> 62 < ! f i n du code H T M L >
1.9 Insertion dimages

Avant dinsrer des images dans un site web, des retouches de limage sont souvent ncessaires : 1. Lusage veut que lon essaie de rduire le poids en octets de limage, soit en rduisant le nombre de pixels par redimentionnement de limage, soit en compressant plus fortement limages (paramtre denregistrement JPEG ou PNG) lorsque cest possible sans dgrader la qualit. 2. Il faut souvent mettre un fond transparent pour limage si lon veut lincruster sur un fond en couleur. 3. Il faut parfois claircir ou foncer limage pour faire ressortir le contraste avec le texte incrust dessus. 4. Il faut parfois retoucher les couleurs pour les adapter la charte graphique. Le logiciel open-source Gimp permet de raliser toutes ces oprations (facilement avec un peu dhabitude). exemples/ChapitreHTML/ex09_images.html
1 < ! doctype html> 2 <html lang= f r > 3 <head > 4 <meta charset= u t f 8 /> 5 < s t y l e>/* d f i n i t i o n du s t y l e */ 6 body { c o l o r : b l a c k ; background c o l o r : #f 0 f 0 f 0 ; t e x t a l i g n : j u s t i f y ; } 7 h1 { background c o l o r : #bbb ; t e x t a l i g n : c e n t e r ; } 8 </ s t y l e> 9 < t i t l e >I n s e r t i o n d images en HTML </ t i t l e > 10 </ head> 11 <body> < ! d b u t du c o r p s H T M L > 12 <h1>I n 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&g t ;& nbsp ; :<br /> 15 </p> 16 <p s t y l e= t e x t a l i g n : c e n t e r ; >
17
Programmation Web
17 18 19 <img src= . / p i c /gimp . png a l t =TheGIMP Logo width= 150 20 s t y l e= v e r t i c a l a l i g n : middle ; /> 21 <a href= . / p i c /3dgnuhead_fond_transp . png > 22 <img src= . / p i c /3dgnuh e a d _ p e t i t . png width= 150 23 a l t =TheGNU Logo 24 s t y l e= v e r t i c a l a l i g n : middle ; /> 25 </ a> 26 </p> 27 <p> 28 On peut r e t o u c h e r l e s images avec l e l o g i c i e l GNU GIMP<br /> 29 voyez l a 30 <a href= . / p i c / capture_gimp . png >c a p t u r e d c r a n</ a> montrant 31 comment d i m i n u e r l e nombre de p i x e l s d une image pour en d i m i n u e r l e 32 p o i d s ( en m e g a o c t e t s ) . 33 </p> 34 35 </ body> < ! f i n du c o r p s H T M L > 36 </ html> < ! f i n du code H T M L >
Annexe : Les codage portables des accents

De nos jours les accents dans certains langues comme le franais sont pris en compte sans problme par le stadard unicode UTF (par exemple UTF-8). On peut donc sans crainte taper des accents au clavier dans un diteur HTML. Nous rappelons cependant pour mmoire lexistence des bricolages de lancien temps, quand seuls les caractres prsents dans la langue de Shakespeare taient utilisables sur le Word Wide Web. 18
Chapitre 1 : Pages web statiques HTML5 Nom de laccent a accent grave A accent grave a accent aigu A accent aigu a accent circonexe A accent circonexe a tilde A tilde a trma A trma a rond A rond ae ligatur AE ligatur e accent grave E accent grave e accent aigu E accent aigu e accent circonexe E accent circonexe e trma E trma i accent grave I accent grave i accent aigu I accent aigu i accent circonexe I accent circonexe i trma I trma o accent grave Lettre HTML &agrave ; &Agrave ; &aacute ; &Aacute ; &acirc ; &Acirc ; &atilde ; &Atilde ; &auml ; &Auml ; &aring ; &Aring ; &aelig ; &AElig ; &egrave ; &Egrave ; &eacute ; &Eacute ; &ecirc ; &Ecirc ; &euml ; &Euml ; &igrave ; &Igrave ; &iacute ; &Iacute ; &icirc ; &Icirc ; &iuml ; &Iuml ; &ograve ; Nom de laccent Lettre O accent grave o accent aigu O accent aigu o accent circonexe O accent circonexe o tilde O tilde o trma O trma o barr O barr u accent grave U accent grave u accent aigu U accent aigu u accent circonexe U accent circonexe u trma U trma n tilde N tilde c cdille C cdille y accent aigu Y accent aigu double s allemand guillemet franais ouvrant guillemet franais fermant paragraphe copyright espace blanc HTML &Ograve ; &oacute ; &Oacute ; &ocirc ; &Ocirc ; &otilde ; &Otilde ; &ouml ; &Ouml ; &oslash ; &Oslash ; &ugrave ; &Ugrave ; &uacute ; &Uacute ; &ucirc ; &Ucirc ; &uuml ; &Uuml ; &ntilde ; &Ntilde ; &ccedil ; &Ccedil ; &yacute ; &Yacute ; &szlig ; &laquo ; &raquo ; &para ; &copy ; &nbsp ;
19
Chapitre 2 Styles CSS et mise en page

Il y a essentiellement 3 manires de modier le style graphique des dirents lments dune page HTML en utilisant CSS : 1. Au niveau des balises avec loption style="..." (voir chapitre prcdent) ; 2. Au niveau du header de la page HTML avec la balise <style type="text/css"> (voir chapitre prcdent) ; 3. Au niveau dune feuille de style spare avec la balise <link/> (voir ci-dessous).
2.1 Feuilles de style CSS
exemples/ChapitreCSS/ex01_inclusion_css.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset= u t f 8 />
20
Chapitre 2 : Styles CSS et mise en page
5 < l i n k r e l = s t y l e s h e e t href= . / e x 0 1 _ i n c l u s i o n _ c s s . c s s /> 6 < t i t l e >I n c 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>I n c l u s i o n d une f e u i l l e de s t y l e CSS</ h1> 10 <p> 11 De nos j o u r , l a mise en forme de s t y l e par CSS e s t en g n r a l compltement 12 s p a r e du contenu d i n f o r m a t i o n ou d e s f o n c t i o n a l i t s du s i t e . Dans l e s 13 e n t r e p r i s e s , c e s deux a s p e c t s ne s o n t g n r a l e m e n t pas t r a i t s par l a 14 mme p e r s o n n e . 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 de 18 <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 e n t i r e m e n t dans un f i c h i e r p a r t . 20 </p> 21 < ! Changement l o c a l du s t y l e par s u c h a r g e : > 22 <p s t y l e= f o n t w e i g h t : b o l d e r ; f o n t s i z e : 120%; > 23 Les f e u i l l e s de s t y l e CSS d o i v e n t a u s s i t r e v a l i d e s W3C 24 dans un f o r m u l a i r e s p c i f i q u e . Leur p o r t a b i l i t d o i t 25 t r e t e s t e c a r l i m p l m e n t a t i o n ne r e s p e c t e pas t o u j o u r s 26 l a norme , s u r t o u t s u r l e s n a v i g a t e u r s un peu a n c i e n s . 27 </p> 28 </ body> 29 </ html>
exemples/ChapitreCSS/ex01_inclusion_css.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 /* s t y l e par d f a u t du t e x t e */ body { f o n t f a m i l y : Comic Sans MS ; f o n t s i z e : 18 pt ; background c o l o r : # f f f ; c o l o r : #222; } /* s t y l e du t i t r e */ h1 { f o n t w e i g h t : b o l d ; f o n t s i z e : 150%; c o l o r : white ; t e x t a l i g n : c e n t e r ; background c o l o r : #999; padding : 15 pt ; } /* s t y l e par d f a u t d e s l i e n s */ a : link { t e x t d e c o r a t i o n : u n d e r l i n e ; /* s o u l i g n */ c o l o r : #00e ; } /* s t y l e d e s l i e n s v i s i t s */ a: visited { t e x t d e c o r a t i o n : u n d e r l i n e ; /* s o u l i g n */
21
Programmation Web
29 c o l o r : #00c ; / * b l e u c l a i r */ 30 } 31 32 /* s t y l e d e s l i e n s v i s i t s */ 33 a : hover { 34 t e x t d e c o r a t i o n : u n d e r l i n e ; /* s o u l i g n */ 35 c o l o r : #e40 ; / * r o u g e v i f */ 36 } 37 38 /* s t y l e d e s l m e n t s i m p o r t a n t s */ 39 s t r o n g { 40 f o n t v a r i a n t : s m a l l c a p s ; 41 f o n t w e i g h t : b o l d e r ; 42 color : black ; 43 } 44 45 /* s t y l e d e s l m e n t s mis en v i d e n c e */ 46 em { 47 f o n t s t y l e : i t a l i c ; 48 color : black ; 49 } 50 51 p { 52 background c o l o r : #ddd ; 53 t e x t a l i g n : j u s t i f y ; 54 padding : 5 pt ; 55 }
2.2 Classes CSS
22
Chapitre 2 : Styles CSS et mise en page exemples/ChapitreCSS/ex02_classes_css.html

1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset=UTF8 /> 5 < l i n k r e l = s t y l e s h e e t href= . / e x 0 2 _ c l a s s e s _ c s s . c s s /> 6 < t i t l e >C l a s s e s CSS</ t i t l e > 7 </ head> 8 <body> 9 <h1>C l a s s e s CSS</ h1> 10 < o l> 11 < l i> 12 <a c l a s s= t o c t a r g e t= _blank href=#p a r t 1 >Pourquoi f a i r e d e s c l a s s e s CSS&nbsp ; ?</ a> 13 </ l i > 14 < l i> 15 <a c l a s s= t o c t a r g e t= _blank href=#p a r t 2 >Exemple d u s a g e</ a> 16 </ l i > 17 < l i> 18 <a c l a s s= t o c t a r g e t= _blank href=#p a r t 2 >Rsum</ a> 19 </ l i > 20 </ o l> 21 <h2 id= p a r t 1 c l a s s= number1 >1 Pourquoi f a i r e d e s c l a s s e s CSS&nbsp ; ?</ h2> 22 <p > 23 Les c l a s s e s p e r m e t t e n t de d f i n i r p l u s i e u r s c l a s s e s de c o n t e x t e s 24 dans l e s q u e l s l e s m i s e s en f o r m e s s o n t d i f f r e n t e s ( v o i r <a c l a s s= normalLink href=#p a r t 2 >p a r t i e&nbsp ; 2</ a>) 25 </p> 26 <h2 id= p a r t 2 c l a s s= number2 >2 . Exemple d u s a g e</ h2> 27 <p> 28 Je me permets d i n s i s t e r&nbsp ; : <strong c l a s s= i n s i s t >Les c l a s s e s s o n t t r s u t i l e s !</ strong> 29 </p> 30 <h2 id= p a r t 3 c l a s s= number3 >3 . Rsum</ h2> 31 <p> 32 N o u b l i e z pas&nbsp ; : <strong c l a s s= warning >Les c l a s s e s s o n t vraiment t r s u t i l e s :</ strong> 33 </p> 34 </ body> 35 </ html>
exemples/ChapitreCSS/ex02_classes_css.css
1 2 3 4 5 6 7 8 9 10 11 12 13 /* s t y l e par d f a u t du t e x t e */ body { f o n t f a m i l y : Comic Sans MS ; f o n t s i z e : 18 pt ; background c o l o r : # f f f ; c o l o r : #222; } /* s t y l e du t i t r e */ h1 { f o n t w e i g h t : b o l d ; f o n t s i z e : 150%;
23
Programmation Web
14 c o l o r : white ; 15 t e x t a l i g n : c e n t e r ; 16 background c o l o r : #999; 17 padding : 15 pt ; 18 } 19 20 h2 { 21 f o n t w e i g h t : b o l d ; 22 f o n t s i z e : 120%; 23 } 24 25 h2 . number1 { 26 color : black ; 27 } 28 29 h2 . number2 { 30 c o l o r : red ; 31 } 32 33 h2 . number3 { 34 c o l o r : green ; 35 } 36 37 /* s t y l e d e s l m e n t s i m p o r t a n t s */ 38 s t r o n g { 39 f o n t v a r i a n t : s m a l l c a p s ; 40 f o n t w e i g h t : b o l d e r ; 41 color : black ; 42 } 43 44 s t r o n g . i n s i s t { 45 f o n t s i z e : 130%; 46 } 47 48 s t r o n g . warning { 49 f o n t s i z e : 150%; 50 c o l o r : red ; 51 t e x t d e c o r a t i o n : b l i n k ; 52 } 53 54 /* s t y l e d e s l m e n t s mis en v i d e n c e */ 55 em { 56 f o n t s t y l e : i t a l i c ; 57 color : black ; 58 } 59 60 p { 61 background c o l o r : #ddd ; 62 t e x t a l i g n : j u s t i f y ; 63 padding : 5 pt ; 64 } 65 66 /* s t y l e par d f a u t d e s l i e n s */ 67 a { 68 c o l o r : blue ; 69 t e x t d e c o r a t i o n : u n d e r l i n e ; /* non s o u l i g n */
24
70 71 72 73 74 75 76 77
} /* s t y l e de l i e n s s p c i a l pour l a t a b l e d e s m a t i r e s */ a . toc { c o l o r : red ; t e x t d e c o r a t i o n : o v e r l i n e ; /* s u r l i g n */ }
2.3 Slecteurs de style CSS par ID
exemples/ChapitreCSS/ex03_id_selector_css.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta http e q u i v= Content Type content= t e x t / html ; c h a r s e t=UTF8 /> 5 < l i n k r e l = s t y l e s h e e t type= t e x t / c s s href= . / e x 0 3 _ i d _ s e l e c t o r _ c s s . 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= p a r t i e 1 >1 D i f f r e n c e e n t r e l e s s l e c t e u r s par ID e t pa c l a s s e&nbsp ; ?</ h2> 11 <p id= par agr ap h e 1 > 12 Les s l e c t e u r s de s t y l e s par ID pe r m e e t e n t d i d e n t i f i e r un unique 13 l m e n t c o r r e s p o n d a n t une c e r t a i n e b a l i s e . 14 </p> 15 <h2 id= p a r t i e 2 >2 . Exemple d u s a g e</ h2> 16 <p id= par agr ap h e 2 > 17 C o n t r air e me n t 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 a u t a n t d l m e n t s qu on veut dans une
25
Programmation Web
19 20 21 22 23 24 25 26 27 28
mme c l a s s e de s t y l e , <strong>l l m e n t c o r r e s p o n d a n t un ID e s t unique</ strong> . </p> <h2 id= p a r t i e 3 >3 . Rsum</ h2> <p id= par agr ap h e 3 > Les ID c o r r e s p o n d a n t un l m e n t s i n g u l i e r , ou e n c o r e <em >s i n g l e t o n</em > du s i t e comme l e h e a d e r commun t o u t e s l e s p a g e s . </p> </ body> </ html>
exemples/ChapitreCSS/ex03_id_selector_css.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 /* s t y l e par d f a u t du t e x t e */ body { f o n t f a m i l y : Comic Sans MS ; f o n t s i z e : 18 pt ; background c o l o r : # f f f ; c o l o r : #222; } /* s t y l e du t i t r e */ h1 { f o n t w e i g h t : b o l d ; f o n t s i z e : 150%; c o l o r : white ; t e x t a l i g n : c e n t e r ; background c o l o r : #999; padding : 15 pt ; } h2 { f o n t w e i g h t : b o l d ; f o n t s i z e : 120%; } h2#p a r t i e 1 { color : black ; } h2#p a r t i e 2 { c o l o r : red ; } h2#p a r t i e 3 { c o l o r : green ; } /* s t y l e d e s l m e n t s i m p o r t a n t s */ strong { f o n t v a r i a n t : s m a l l c a p s ; f o n t w e i g h t : b o l d e r ; color : black ; }
26
43 44 45 /* s t y l e d e s l m e n t s mis en v i d e n c e */ 46 em { 47 f o n t s t y l e : i t a l i c ; 48 color : black ; 49 } 50 51 p { 52 background c o l o r : #ddd ; 53 t e x t a l i g n : j u s t i f y ; 54 padding : 5 pt ; 55 } 56 57 p#pa r a g ra p he1 { 58 background c o l o r : #aaa ; 59 60 } 61 62 p#pa r a g ra p he2 { 63 background c o l o r : #c c c ; 64 65 } 66 67 p#pa r a g ra p he3 { 68 background c o l o r : #e e e ; 69 70 } 71 72 /* p#pa ra g rap h e2 { 73 background c o l o r : #ddd ; 74 75 s t y l e par d f a u t d e s l i e n s */ 76 a { 77 c o l o r : blue ; 78 t e x t d e c o r a t i o n : u n d e r l i n e ; /* non s o u l i g n */ 79 }
2.4 Exemple : style CSS pour un tableau

exemples/ChapitreCSS/ex04_tableaux_css.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset= u t f 8 /> 5 < l i n k r e l = s t y l e s h e e t href= . / e x 0 1 _ i n c l u s i o n _ c s s . c s s /> 6 < ! I n c l u s i o n de s t y l e s s u p p l m e n t a i r e s a v e c import > 7 < s t y l e> 8 @import u r l ( ex04_tableaux_css . c s s ) ; 9 </ s t y l e> 10 < t i t l e >S t y l e CSS de Tableaux</ t i t l e > 11 </ head> 12 <body>
27
Programmation Web
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
< ! d b u t du c o r p s H T M L > <h1>S t y l e CSS de Tableaux</ h1> <div s t y l e= padding l e f t : 10%; padding r i g h t : 10%; > <table> <caption> Exemple de t a b l e </ caption> <thead> < tr> <th>Colonne 1</ th> <th>Colonne 2</ th> <th>Colonne3</ th> </ tr> </ thead> <tbody> < tr> <td c l a s s= p a i r >C e c i e s t l a c a s e <br /> d en haut gauche</ td> <td c l a s s= i m p a i r >C e c i e s t l a c a s e <br /> d en haut au m i l i e u</ td> <td c l a s s= p a i r >C e c i e s t l a c a s e <br /> d en haut d r o i t e</ td> </ tr> < tr> <td c l a s s= p a i r >C e c i e s t l a c a s e <br /> d en bas gauche</ td> <td c l a s s= i m p a i r >C e c i e s t l a c a s e <br /> d en bas au m i l i e u</ td> <td c l a s s= p a i r >C e c i e s t l a c a s e <br /> 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 c o r p s H T M L > 56 </ html> 57 < ! f i n du code H T M L >
exemples/ChapitreCSS/ex04_tableaux_css.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 table { padding : 0px ; v e r t i c a l a l i g n : top ; /* mise en forme d e s t a b l e s */ background c o l o r : #ddd ; border s t y l e : o u t s e t ; border width : 10 px ; border c o l o r : b l a c k ; } t r , td { border s t y l e : dashed ; /* mise en forme d e s c e l l u l e s */ border width : 2px ; border c o l o r : b l a c k ; padding : 20 px ; } t r , td . p a i r { background c o l o r : b l a c k ; c o l o r : white ; } t r , td . i m p a i r { background c o l o r : w h i t e ; color : black ; }
th { border s t y l e : s o l i d ; border width : 2px ; border c o l o r : b l a c k ; t e x t a l i g n : c e n t e r ; f o n t w e i g h t : b o l d e r ; color : black ; padding : 20 px ; }
2.5 lments de type block et inline

2.5.1 lments blocks
29
Programmation Web
exemples/ChapitreCSS/ex05_blocs.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset=UTF8 /> 5 < l i n k r e l = s t y l e s h e e t href= . / e x 0 1 _ i n c l u s i o n _ c s s . c s s /> 6 < t i t l e >lments de type b l o c k </ t i t l e > 7 </ head> 8 <body> 9 <h1>lments de type b l o c k </ h1> 10 <p> 11 I l e x i s t e en XHTML deux p r i n c i p a u x t y p e s de b a l i s e s&nbsp ; : i n l i n e ou b l o c k . 12 </p> 13 < o l> 14 < l i> 15 <strong>Les b a l i s e de type b l o c k comme&nbsp ;</ strong> 16 <br /> 17 <ul> 18 < l i> 19 &l t ; d i v&g t ; : changement l o c a l de s t y l e e t 20 s t r u c t u r a t i o n&nbsp ;; 21 </ l i > 22 < l i> 23 &l t ; p&g t ;& nbsp ; : nouveau p a ra g ra p h e ; 24 </ l i > 25 < l i> 26 &l t ; t a b l e&g t ;& nbsp ; : t a b l e a u c o n t e n a n t d e s donne; 27 </ l i > 28 < l i> 29 &l t ; h1&g t ;& nbsp ; , . . . , &l t ; h6&g t ;& nbsp ; : d i f f r e n t s 30 n i v e a u x de t i t r e ; 31 </ l i > 32 < l i>
30
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
&l t ; d l&g t ;& nbsp ; : l i s t e de d f i n i t i o n ; </ l i > < l i> &l t ; u l&g t ;& nbsp ; : l i s t e non ordonne ; </ l i > < l i> &l t ; o l&g t ;& nbsp ; : l i s t e ordonne ; </ l i > < l i> etc . </ l i > </ ul> Ces b a l i s e s changent l a p p a r e n c e de l e u r contenu e t l e u r n a t u r e au n i v e a u s t r u c t u r e l e t v e n t u e l l e m e n t l e u r f o n c t i o n dans l e c a s du l i e n ou de l image . <br /> En < i>HTML5 </ i> , on t r o u v e a u s s i l e s b a l i s e s s m a n t i q u e s &l t ; h e a d e r&g t ; , &l t ; f o o t e r&g t ; , &l t ; nav&g t ; , e t c . que nous v e r r o n s p l u s l o i n . </ l i > </ o l> </ body> </ html>
2.5.2 lments inline
exemples/ChapitreCSS/ex06_inline.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset=UTF8 /> 5 < l i n k r e l = s t y l e s h e e t href= . / e x 0 1 _ i n c l u s i o n _ c s s . c s s /> 6 < t i t l e >lments de type i n l i n e </ t i t l e >
31
Programmation Web
7 </ head> 8 <body> 9 <h1>lments de type i n l i n e </ h1> 10 < o l 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&g t ;& nbsp ; : changement l o c a l de s t y l e&nbsp ;;</ l i > 14 < l i >&l t ; a&g t ;& nbsp ; : l i e n h y p e r t e x t e ;</ l i > 15 < l i >&l t ; s t r o n g&g t ;& nbsp ; : l m e n t i m p o r t a n t ;</ l i > 16 < l i >&l t ; em&g t ;& nbsp ; : l m e n t s o u l i g n e r ;</ l i > 17 < l i >&l t ; q&g t ;& nbsp ; : c i t a t i o n c o u r t e ;</ l i > 18 < l i >e t c .</ l i > 19 </ ul> 20 Ces b a l i s e s changent l ap p a r e n c e de l e u r contenu mais pas l e u r n a t u r e 21 au n i v e a u 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 </ o l> 24 <p> 25 Tout l m e n t d o i t t r e contenu dans au moins un b l o c k . Le b l o c k s peuvent t r e 26 i m b r i q u s mais l e s b l o c k s &l t ; p&g t ;& nbsp ; e t l e s b l o c k s t i t r e 27 &l t ; h1&g t ;& nbsp ; , . . . , &l t ; h6&g t ;& nbsp ; ne peuvent c o n t e n i r 28 d a u t r e s b l o c k s .<br />Un l m e n t i n l i n e ne peut c o n t e n i r aucun l m e n t 29 de type b l o c k ; 30 </p> 31 </ body> 32 </ html>
2.6 Positionnement CSS et mise en page

La position des dirents lments dans une page HTML se dnit au niveau du style CSS.
2.6.1 Marges et bordures

Chaque lment (de type inline ou block) se trouve dans une bote ayant une bordure, une marge intrieure, et une marge extrieure. On dnit ainsi les paisseurs et styles de bordure des dirents lments, les marges extrieures (margin, qui force llment un certain loignement des autres lments de la page), les marges intrieures (padding, qui force le contenu de llment se trouver une certaine distance du bord de llment.
32
Chapitre 2 : Styles CSS et mise en page exemples/ChapitreCSS/ex07_margin_padding.html

1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset=UTF8 /> 5 < l i n k r e l = s t y l e s h e e t href= . / ex07_margin_padding . c s s /> 6 < t i t l e >P r o p r i t s Margin e t Padding</ t i t l e > 7 </ head> 8 <body> 9 <h1>P r o p r i t s Margin e t Padding</ h1> 10 <div> 11 C e c i e s t l e t e x t e f a i s a n t p a r t i e du contenu de l a p r e m i r e b o t e . 12 <div> 13 C e c i e s t l e t e x t e , contenu de l a p e t i t e b o t e . 14 C e t t e p e t i t e b o t e e s t e l l e mme l e contenu de l a grande b o t e . 15 </ div> 16 </ div> 17 </ body> 18 </ html>
exemples/ChapitreCSS/ex07_margin_padding.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 /* s t y l e par d f a u t du t e x t e */ body { f o n t f a m i l y : Comic Sans MS; f o n t s i z e : 18 pt ; background c o l o r : # f f f ; c o l o r : #222; } /* s t y l e du t i t r e */ h1 { f o n t w e i g h t : b o l d ; f o n t s i z e : 150%; c o l o r : white ; t e x t a l i g n : c e n t e r ; background c o l o r : #999; padding : 15 pt ; } h2 { f o n t w e i g h t : b o l d ; f o n t s i z e : 120%; } div { border width : 2px ; border c o l o r : b l a c k ; border s t y l e : s o l i d ; color : black ; margin : 20 px ; padding : 15 px ; background c o l o r : #ddd ; }
33
Programmation Web
35 36 37 38 39 40 41 42 43
div div { border width : 3px ; border c o l o r : #666; border s t y l e : dashed ; ; color : black ; margin : 5px ; padding : 30 px ; background c o l o r : #aaa ; }
2.6.2 Positionnement absolu

Dans le positionnement absolu, la position dun lment est dnie par rapport la position du premire anctre positionn (soit le parent si celui-ci est positionn, sinon on cherche le parent du parent, etc. jusqu trouver un anctre positionn. Si le parent nest pas positionn, on peut le positionner sans changer sa position en mettant sa position relative zro.
exemples/ChapitreCSS/ex08_position_absolute.html
1 2 3 4 5 6 7 8 9 10 11 < ! doctype html> <html lang= f r > <head> <meta charset=UTF8 /> < l i n k r e l = s t y l e s h e e t href= . / e x 0 8 _ p o s i t i o n _ a b s o l u t e . c s s /> < t i t l e >P o s i t i o n n e m e n t a b s o l u</ t i t l e > </ head> <body> <h1>P o s i t i o n n e m e n t a b s o l u</ h1> <div c l a s s= p o s i t i o n Z e r o > C e c i e s t l e t e x t e f a i s a n t p a r t i e du contenu de l a b o t e p a r e n t e . C e l l e c i est
34
12 13 14 15 16 17 18 19 20 21 22 23
p o s i t i o n n e mais s a p l a c e normale dans l e f l u x ( marge de 20 px ) . <div c l a s s= p o s i t i o n T r e n t e > C e c i e s t l e t e x t e contenu de l a p r e m i r e sous b o t e , dont l e c o i n suprieur gauche p o s i t i o n n e 30 p i x e l s d r o i t e e t 90 p i x e l s p l u s bas que son p a r e n t . </ div> <div c l a s s= p o s i t i o n S o i x a n t e > C e c i e s t l e t e x t e contenu de l a deuxime sous b o t e , dont l e c o i n suprieur gauche p o s i t i o n n e 60 p i x e l s d r o i t e e t 180 p i x e l s p l u s bas que son parent . </ div> </ div> </ body> </ html>
exemples/ChapitreCSS/ex08_position_absolute.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 /* s t y l e par d f a u t du t e x t e */ body { f o n t f a m i l y : Comic Sans MS; f o n t s i z e : 18 pt ; background c o l o r : # f f f ; c o l o r : #222; } /* s t y l e du t i t r e */ h1 { f o n t w e i g h t : b o l d ; f o n t s i z e : 150%; c o l o r : white ; t e x t a l i g n : c e n t e r ; background c o l o r : #999; padding : 15 pt ; } h2 { f o n t w e i g h t : b o l d ; f o n t s i z e : 120%; } div { border width : 2px ; border c o l o r : b l a c k ; border s t y l e : s o l i d ; color : black ; margin : 20 px ; padding : 0px ; background c o l o r : #ddd ; } /* p o s i t i o n n e m e n t normale dans l e f l u x , d f i n i j u s t e pour p o s i t i o n n e r l l m e n t */ . positionZero {
35
Programmation Web
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
position : relative ; top : 0px ; l e f t : 0px ; width : 500 px ; zi n d e x : 1 ; } div div { border width : 2px ; border c o l o r : b l a c k ; border s t y l e : dashed ; margin : 0px ; padding : 0px ; background c o l o r : #aaa ; } . positionTrente { position : absolute ; top : 90 px ; l e f t : 30 px ; width : 500 px ; zi n d e x : 7 ; } . positionSoixante { position : absolute ; top : 180 px ; l e f t : 60 px ; background c o l o r : #888; zi n d e x : 1 5 ; }
2.6.3 Positionnement relatif

Le positionnement relatif permet de dplacer un objet relativement la position quil aurait eu sans positionnement. Le positionnement relatif sobtient avec lattribut : position : relative; top: 10px; /* dplacer de 10 pixels vers la gauche */ left: 20px; /* dplacer de 20 pixels vers la droite */ exemples/ChapitreCSS/ex08_position_relative.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset=UTF8 /> 5 < l i n k r e l = s t y l e s h e e t href= . / e x 0 8 _ p o s i t i o n _ r e l a t i v e . c s s /> 6 < t i t l e >P o s i t i o n n e m e n t r e l a t i f</ t i t l e > 7 </ head> 8 <body> 9 <h1>P o s i t i o n n e m e n t r e l a t i f</ h1> 10 <div c l a s s= p o s i t i o n Z e r o >
36
11 12 13 14 15 16 17 18 19 20 21
C e c i e s t l e t e x t e f a i s a n t p a r t i e du contenu de l a b o t e du haut . C e l l e c i est p o s i t i o n n e mais s a p l a c e normale dans l e f l u x . </ div> <div c l a s s= p o s i t i o n T r e n t e > C e c i e s t l e t e x t e contenu de l a b o t e du m i l i e u , dont l e c o i n s u p r i e u r gauche p o s i t i o n n e 60 p i x e l s d r o i t e de s a p o s i t i o n normale dans l e f l u x . </ div>
<div c l a s s= p o s i t i o n N o r m a l e > C e c i e s t l e t e x t e contenu de l a b o t e du bas , q u i e s t p o s i t i o n n e normalement dans l e f l u x ( compte tenu de l a p o s i t i o n de l a b o t e prcdente ) . 22 </ div> 23 </ body> 24 </ html>
exemples/ChapitreCSS/ex08_position_relative.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 /* s t y l e par d f a u t du t e x t e */ body { f o n t f a m i l y : Comic Sans MS; f o n t s i z e : 18 pt ; background c o l o r : # f f f ; c o l o r : #222; } /* s t y l e du t i t r e */ h1 { f o n t w e i g h t : b o l d ; f o n t s i z e : 150%; c o l o r : white ; t e x t a l i g n : c e n t e r ; background c o l o r : #999;
37
Programmation Web
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
padding : 15 pt ; } h2 { f o n t w e i g h t : b o l d ; f o n t s i z e : 120%; } div { border width : 2px ; border c o l o r : b l a c k ; border s t y l e : s o l i d ; color : black ; margin : 0 ; padding : 0 ; background c o l o r : #ddd ; } /* p o s i t i o n n e m e n t normale dans l e f l u x , d f i n i j u s t e pour p o s i t i o n n e r l l m e n t */ . positionZero { position : relative ; width : 600 px ; zi n d e x : 1 ; } . positionTrente { border s t y l e : dashed ; background c o l o r : #aaa ; position : relative ; l e f t : 60 px ; width : 600 px ; zi n d e x : 7 ; } . positionNormale { border s t y l e : dashed ; background c o l o r : #888; zi n d e x : 1 5 ; }
2.6.4 Exemple de mise en page

exemples/ChapitreCSS/ex09_exemple_miseEnPage.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset=UTF8 /> 5 < l i n k r e l = 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 c l a s s= h e a d e r > 10 <h1>Exemple de mise en page</ h1>
38
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
</ div> <div c l a s s= c o n t e n t > <div c l a s s= nav > <h2>N a v i g a t i o n</ h2> <ul> < l i> <a href= . / coucou . html > l i e n 1</ a> </ l i > < l i> <a href= . / t o t o . html > l i e n 2</ a> </ l i > < l i> <a href= . / t i t i . html > l i e n 2</ a> </ l i > </ ul> </ div> <div c l a s s= a r t i c l e > <h2>Corps du t e x t e</ h2> <p> Nous mettons i c i l e c o r p s du t e x t e . Paragraphe 1 . </p> <p> Notons que l e contenu ( menu p l u s t e x t e ) e s t <strong>c e n t r </ strong> e t que l e s l i e n s dans l e menu n ont pas l e mme a s p e c t que l e s l i e n s dans l e t e x t e . </p> <p> C e c i e s t <a href= . / t o t o . html >un l i e n</ a> normal </p> </ div> </ div> </ body> </ html>
39
Programmation Web
exemples/ChapitreCSS/ex09_exemple_miseEnPage.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 body { f o n t f a m i l y : times , s e r i f ; f o n t s i z e : 14 pt ; background c o l o r : #c c c ; c o l o r : #222; } div { background c o l o r : # f f f ; } d i v h1 { t e x t a l i g n : c e n t e r ; width : 600 px ; margin : 0 ; } div . header { width : 600 px ; background c o l o r : b l a c k ; c o l o r : white ; margin : 0 auto ; padding : 0px ; } div . content { width : 600 px ; background c o l o r : w h i t e ; margin : 0 auto ; position : relative ; top : 0px ; padding : 0px ; h e i g h t : 300 px ; } d i v d i v . nav { c o l o r : white ; t e x t a l i g n : c e n t e r ; background c o l o r : #999; width : 180 px ; margin : 0 0 ; padding : 0px ; position : absolute ; l e f t : 0 px ; h e i g h t : i n h e r i t ! i m p or t a nt ; } d i v d i v . nav u l { t e x t a l i g n : c e n t e r ; }
40
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
d i v d i v . nav a { t e x t d e c o r a t i o n : o v e r l i n e ; f o n t v a r i a n t : s m a l l c a p s ; } div div . a r t i c l e { color : black ; t e x t a l i g n : j u s t i f y ; background c o l o r : w h i t e ; width : 400 px ; /* encombrement 420 avec l a padding */ padding : 0 10 px ; /* compter 20 dans l a l a r g e u r t o t a l e */ margin : 0 ; position : relative ; l e f t : 180 px ; position : absolute ; top : 0px ; h e i g h t : i n h e r i t ! i m p or t an t ; } div div . a r t i c l e p { background c o l o r : w h i t e ; }
2.6.5 Structuration dune page en HTML5

La mise en page avec header, navigation et pied de page est si courante que des balises spcialises, appeles balises smentiques ont t cres en HTML5. On doit les prfrer <div> car elles permettent une plus grande clart de la structure du document, mais aussi aux moteurs de recherche de mieux percevoir quelle place accorder aux direntes parties dune page web. Les balises smantiques sont les suivantes : header pour len-tte 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 lgales, etc. nav pour la partie navigation avec un menu et des liens pour se dplacer dans le site. article contenant un corps de document autosusant. aside pour des informations annexes sans grand rapport avec le sujet (publicits, etc.) section reprsentant une partie regroupant plusieurs contenus lis entre eux. Voici un exemple de mise en page typique utilisant ces balises : exemples/ChapitreCSS/ex10_balisesSemantiques.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset=UTF8 /> 5 < l i n k r e l = s t y l e s h e e t href= . / e x 1 0 _ b a l i s e s S e m a n t i q u e s 2 . c s s /> 6 < t i t l e >B a l i s e s s m a n t i q u e s HTML5 </ t i t l e >
41
Programmation Web
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
</ head> <body> <h e a d e r> <h1>B a l i s e s s m a n t i q u e s HTML5 </ h1> </ h e a d e r> <div c l a s s= c o n t e n t > <nav> <h2>N a v i g a t i o n</ h2> <ul> < l i> <a href= . / coucou . html > l i e n 1</ a> </ l i > < l i> <a href= . / t o t o . html > l i e n 2</ a> </ l i > < l i> <a href= . / t i t i . html > l i e n 3</ a> </ l i > </ ul> </ nav> < a r t i c l e> <h2>Corps du t e x t e</ h2> <p> Nous mettons i c i l e c o r p s du t e x t e . Paragraphe 1 . </p> <p> Notons que l e contenu ( menu p l u s t e x t e ) e s t <strong>c e n t r </ strong> e t que l e s l i e n s dans l e menu n ont pas l e mme a s p e c t que l e s l i e n s dans l e t e x t e . </p> <p> C e c i e s t <a href= . / t o t o . html >un l i e n</ a> normal </p> </ a r t i c l e> </ div> <f o o t e r> &copy ; RM 2 0 1 2 . </ f o o t e r> </ body> </ html>
exemples/ChapitreCSS/ex10_balisesSemantiques2.css
1 2 3 4 5 6 7 8 9 10 11 12 13 body { f o n t f a m i l y : times , s e r i f ; f o n t s i z e : 14 pt ; background c o l o r : #c c c ; c o l o r : #222; } div { background c o l o r : # f f f ; } header { width : 600 px ;
42
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
background c o l o r : b l a c k ; c o l o r : white ; margin : 0 auto ; border r a d i u s : 20 px 20 px 0 0 ; }
h e a d e r h1 { t e x t a l i g n : c e n t e r ; width : 600 px ; margin : 0 ; }
div . content { width : 600 px ; background c o l o r : w h i t e ; margin : 0 auto ; position : relative ; top : 0px ; h e i g h t : 250 px ; } d i v nav { c o l o r : white ; t e x t a l i g n : c e n t e r ; background c o l o r : #999; width : 180 px ; position : absolute ; l e f t : 0 px ; h e i g h t : i n h e r i t ! i m p or t a nt ; } d i v nav u l { l i s t s t y l e : none ; margin : 0 20 px ; position : relative ; l e f t : 20px ;
43

top : 20px ; }
Programmation Web
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
d i v nav u l l i { f o n t w e i g h t : b o l d e r ; b o r d e r : 8px ; border s t y l e : g r o o v e ; border c o l o r : b l a c k ; background c o l o r : #555; } d i v nav u l l i a{ c o l o r : white ; t e x t d e c o r a t i o n : none ; padding : 10 px 20 px ; d i s p l a y : i n l i n e b l o c k ; } div a r t i c l e { color : black ; t e x t a l i g n : j u s t i f y ; background c o l o r : w h i t e ; width : 400 px ; /* encombrement 420 avec l a padding */ padding : 0 10 px ; /* compter 20 dans l a l a r g e u r t o t a l e */ position : relative ; l e f t : 180 px ; position : absolute ; top : 0px ; h e i g h t : i n h e r i t ! i m p or t an t ; } div a r t i c l e p { background c o l o r : w h i t e ; } footer { width : 600 px ; background c o l o r : #444; c o l o r : white ; margin : 0 auto ; t e x t a l i g n : c e n t e r ; border r a d i u s : 0 0 20 px 20 px ; }
La structure du document HTML5 est dnie par ces balises, mais pas la disposition de la page. En changeant uniquement le CSS, on peut obtenir : exemples/ChapitreCSS/ex10_balisesSemantiques.css
1 2 3 4 5 body { f o n t f a m i l y : times , s e r i f ; f o n t s i z e : 14 pt ; background c o l o r : #c c c ; c o l o r : #222;
44
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
} div { background c o l o r : # f f f ; } header { width : 600 px ; background c o l o r : b l a c k ; c o l o r : white ; margin : 0 auto ; border r a d i u s : 20 px 20 px 0 0 ; }
h e a d e r h1 { t e x t a l i g n : c e n t e r ; width : 600 px ; margin : 0 ; }
div . content { width : 600 px ; background c o l o r : w h i t e ; margin : 0 auto ; position : relative ; top : 0px ; h e i g h t : auto ; } d i v nav { c o l o r : white ; t e x t a l i g n : c e n t e r ; background c o l o r : #999; width : 600 px ; margint top : 0 ;
45
Programmation Web
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
h e i g h t : 45 px ; } d i v nav h2{ d i s p l a y : none ; } d i v nav u l { l i s t s t y l e : none ; margin : 0 20 px ; position : relative ; display : inline ; }
d i v nav u l l i { display : inline ; f o n t w e i g h t : b o l d e r ; border : 0 ; border c o l o r : b l a c k ; background c o l o r : #555; margin : 0 10 px ; position : relative ; border r a d i u s : 0 0 10 px 10 px ; top : 5px ; } d i v nav u l l i a{ padding : 5px 10 px ; d i s p l a y : i n l i n e b l o c k ; c o l o r : white ; t e x t d e c o r a t i o n : none ; } div a r t i c l e { color : black ; t e x t a l i g n : j u s t i f y ; background c o l o r : w h i t e ; width : 580 px ; /* encombrement 600 avec l a padding */ padding : 10 px 10 px ; /* compter 20 dans l a l a r g e u r t o t a l e */ h e i g h t : i n h e r i t ! i m p or t an t ; } div a r t i c l e p { background c o l o r : w h i t e ; } footer { width : 600 px ; background c o l o r : #444; c o l o r : white ; margin : 0 auto ; t e x t a l i g n : c e n t e r ; border r a d i u s : 0 0 20 px 20 px ; position : relative ; }
46
2.7 Arborescence de balises et CSS

Limbrication des baslises HTML dun document cre une arbrorescence, o une balise B1 est llle dune autre balise B2 si la balise B1 est immdiatement imbrique dans B2 dans le document (voir la gure 2.1).
body
div
h1 ul
div
li
span
Figure 2.1: Larbre dimbrication des balises de lexemple ex11_arborescenceCSS_html Dans le chier CSS, on peut dnir un style (et ventuellement plusieurs classes CSS) pour chaque sous-arbre de larborescence. Pour cel, on indique le sous-arbre par la succession des noeuds de la racine de larbre vers la racine du sous-arbre (voir exemple ci-dessous).
exemples/ChapitreCSS/ex11_arborescenceCSS.html
1 < ! doctype html>
47
Programmation Web
2 <html lang= f r > 3 <head> 4 <meta charset=UTF8 /> 5 < l i n k r e l = s t y l e s h e e t href= . / ex11_arborescenceCSS . c s s /> 6 < t i t l e >A r b o r e s c e n c e de b a l i s e s</ t i t l e >< t i t l e >A r b o r e s c e n c e de b a l i s e s e t CSS< / t i t l e> 7 </ head> 8 <body> 9 <h1>T i t r e p r i n c i p a l</ h1> 10 <p> 11 feuille 1 12 <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 feuille 5 25 </ l i > 26 < l i> 27 feuille 6 28 </ l i > 29 </ ul> 30 </ div> 31 </ body> 32 </ html>
exemples/ChapitreCSS/ex11_arborescenceCSS.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 /* s t y l e par d f a u t du t e x t e */ body { f o n t f a m i l y : times , s e r i f ; f o n t s i z e : 1 4 pt ; background c o l o r : #c c c ; c o l o r : #222; } h1 { t e x t a l i g n : c e n t e r ; } div { background c o l o r : #f f 0 ; } p { background c o l o r : w h i t e ; }
48
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
p a { t e x t d e c o r a t i o n : o v e r l i n e ; } div div p { c o l o r : red ; t e x t a l i g n : c e n t e r ; background c o l o r : #ddd ; }
d i v d i v p span { f o n t f a m i l y : Comic Sans MS; f o n t s i z e : 1 8 pt ; }
div ul { background c o l o r : #0 f f ; c o l o r : red ; }
49
Chapitre 3 PHP procdural

3.1 Gnrer du code HTML avec PHP
Le PHP est un langage de programmation (ou langage de scripts) qui permet de gnrer et dacher des pages webs dynamiques, cest dire des pages dont le contenu dpend des actions de lutilisateur ou de ltat, par exemple, dune base de donnes. En n de compte, le code ach est toujours du code HTML. Ce code HTML est gnr par le programme PHP via la commande echo. La protection des caractres spciaux du HTML (comme les guillemets) et le mlange du code PHP et du code HTML rend souvent le code dun script PHP. Nous verrons plus loin comment attnuer ce problme par une approche modulaire fonde sur la programmation objet. Le script PHP est insr lintrieur dune balise < ?php > qui peut sinsrer au sein du code HTML.
exemples/php1/ex01_helloWorld.php
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset= u t f 8 /> 5 < t i t l e >H e l l o World en PHP</ t i t l e > 6 </ head>
50
Chapitre 3 : PHP procdural
7 <body> 8 <p> 9 <?php // dbut du s c r i p t PHP 10 echo H e l l o World ! ; 11 // On a f f i c h e du code H T M L si la sortie 12 ?> < ! f i n du s c r i p t PHP > 13 </p> 14 </ body> 15 </ html>
3.2 Exemple de fonction en PHP

Ici, nous voyons une fonction PHP qui gnre len-tte XHTML du document et son header. Cette fonction prend en paramtre le titre, le charset et lurl dune feuille de style CSS appliquer dans le header HTML. Le rsultat est que lors de lutilisation de la fonction, presque tout le code HTML disparait pour tre remplac par une seule ligne de code, ce qui en n de compte allgera de beaucoup le code source PHP.
exemples/php1/ex02_function.php
1 <?php // dbut d un s c r i p t PHP 2 f u n c t i o n outputEnTeteHTML5 ( $ t i t l e , $ c h a r s e t , $ c s s _ s h e e t ) { 3 // s o r t i e du doctype . Les g u i l l e m e t s H T M L s o n t p r o t g s par \ 4 echo <! doctype html>\n ; 5 echo <html l a n g=\ f r \ >\n ; 6 echo <head>\n ; 7 echo <meta c h a r s e t =\ ; 8 echo $ c h a r 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 $ c s s _ s h e e t ; 12 echo \ />\n ; 13 // c o n c a t n a t i o n de c h a n e 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
Programmation Web
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
?> <?php f u n c t i o n outputFinFichierHTML5 ( ) { echo </body>\n</html>\n ; } ?> <?php outputEnTeteHTML5 ( H e l l o world v e r s i o n 2 , UTF 8 , myStyle . c s s ) ; ?> <p> <?php // dbut du s c r i p t PHP echo H e l l o World ! ; // On a f f i c h e du code H T M L si la sortie // f i n du s c r i p t PHP ?> </p> <?php outputFinFichierHTML5 ( ) ; ?>
3.3 Inclure un chier PHP dans un autre

videmment, si le but des fonctions PHP est de cacher et de rutiliser une partie du code, il est commode de pouvoir crire une fois pour toutes la fonction dans un seul chier, puis dutiliser la fonction dans tous nos scripts par la suite. Ici les fonctions outputEnTeteXHTML et outputFinFichierXHTML sont utilises dans tous les scripts qui achent du code HTML. (en eet, nous verrons plus loin que certains chiers PHP sont de la pure programmation et nachent rien.) exemples/php1/commonFunctions.php
1 <?php // dbut d un s c r i p t PHP 2 f u n c t i o n outputEnTeteHTML5 ( $ t i t l e , $ c h a r s e t , $ c s s _ s h e e t ) { 3 // s o r t i e du doctype . Les g u i l l e m e t s H T M L s o n t p r o t g s par \ 4 echo <! doctype html>\n ; 5 echo <html l a n g=\ f r \ >\n ; 6 echo <head>\n ; 7 echo <meta c h a r s e t =\ ; 8 echo $ c h a r 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 $ c s s _ s h e e t ; 12 echo \ />\n ; 13 // c o n c a t n a t i o n de c h a n e 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 ?> 18 19 <?php 20 f u n c t i o n outputFinFichierHTML5 ( ) 21 {
52
22 23 24
echo </body>\n</html>\n ; } ?>
exemples/php1/ex03_include.php
1 2 3 4 5 6 7 8 9 10 11 12 13 <?php i n c l u d e ( . / commonFunctions . php ) ; outputEnTeteHTML5 ( H e l l o world v e r s i o n 3 , UTF 8 , myStyle . c s s ) ; ?> <p> <?php // dbut du s c r i p t PHP echo H e l l o World ! ; // On a f f i c h e du code H T M L si la sortie // f i n du s c r i p t PHP ?> </p> <?php outputFinFichierHTML5 ( ) ; ?>
3.4 Arithmtique : types int et float

En PHP, on ne dclare pas les types des variables ou des paramtres de fonctions. Celui-ci est dni lors de linitialisation de la fonction. Des fonctions permettent cependant de tester le type ou daccder au nom du type dune variable. Nous en verrons par la suite. exemples/php1/ex04_arithmetique_types.php
1 2 3 4 5 6 7 8 <?php i n c l u d e _ o n c e . / commonFunctions . php ; ?> <?php outputEnTeteHTML5 ( A r i t h m t i q u e f l o t t a n t e e t e n t i r e , UTF 8 , myStyle . c s s ) ; ?> <p> <?php // dbut du s c r i p t PHP f u n c t i o n appliqueTVA ( $prixHT , $taux ) {
53
Programmation Web
9 $prixTTC = $prixHT *(1.0+ $taux / 1 0 0 . 0 ) ; 10 r e t u r n $prixTTC ; 11 } 12 ?> 13 <h1>C a l c u l de TVA </ h1> 14 <p> 15 <?php 16 $prix = 182.0; 17 echo Pour un p r i x h o r s t a x e de . $ p r i x . &e u r o ; e t un taux de 19 ,6%\n ; 18 echo l e p r i x TTC e s t de : 19 . round ( appliqueTVA ( $ p r i x , 1 9 . 6 ) , 2 ) . &e u r o ; . \ n ; 20 echo <br/>\ n A l l e z ! On a r r o n d i : . i n t v a l ( appliqueTVA ( $ p r i x , 1 9 . 6 ) ) . &e u r o ; . \ n ; 21 ?> 22 </p> 23 <?php 24 outputFinFichierHTML5 ( ) ; 25 ?>
3.5 Tableaux indexs : avec une cl de type int

On cre un tableau avec la fonction array. On accde ses lments (ici indexs par un int) en utilisant des crochets [ ]. La taille des tableaux peut tre obtenue via la fonction sizeof. exemples/php1/ex05_tableaux_keyInt.php
1 2 3 4 5 6 7 8 <?php i n c l u d e _ o n c e . / commonFunctions . php ; ?> <?php outputEnTeteHTML5 ( Tableaux 1 , UTF 8 , myStyle . c s s ) ; ?> <p> <h1>Tableaux avec c l e n t i r e s</ h1> <p>
54
9 <?php 10 $tableau = array (23 , 45 , 41 , 6 , 04) ; 11 echo ( ; 12 fo r ( $ i =0 ; $ i < s i z e o f ( $ t a b l e a u ) ; $ i ++) { 13 echo $ t a b l e a u [ $ i ] ; 14 i f ( $i + 1 < s i z e o f ( $tableau ) ) 15 echo , ; 16 } 17 echo ) \n ; 18 ?> 19 </p> 20 <?php 21 outputFinFichierHTML5 ( ) ; 22 ?>
3.6 Tableaux associatifs : avec une cl de type String

Il existe en PHP une deuxime sorte de tableaux : les tableaux associatifs, ainsi nomms car ils associent une valeur une clef qui est une chane de caractres. On peut tout de mme parcourir lensemble du tableau en utilisant une boucle foreach. exemples/php1/ex06_tableaux_keyString.php
1 2 3 4 5 6 7 8 9 10 11 12 13 <?php i n c l u d e _ o n c e . / commonFunctions . php ; ?> <?php outputEnTeteHTML5 ( Tableaux 2 , UTF 8 , myStyle . c s s ) ; ?> <p> <h1>Tableau avec c l de type S t r i n g</ h1> <p> <?php $ t a b l e a u = a r r a y ( nom = > Caesar , prnom => J u l e s ) ; echo <ul >\n ; // a c c s aux l m e n t s : echo < l i >Accs aux l m e n t s du t a b l e a u :< br/> ;
55
Programmation Web
14 echo Nom : . $ t a b l e a u [ nom ] . <br/>\n ; 15 echo Prnom : . $ t a b l e a u [ prnom ] . .< br/></ l i >\n ; 16 // a f f i c h a g e de l ensemble d e s v a l e u r s du t a b l e a u : 17 echo < l i >Les v a l e u r s du t a b l e a u s o n t :< br/></ l i >\n ; 18 for each ( $tableau as $chaine ) { 19 echo $ c h a i n e . ; 20 } 21 echo <br/>\n ; 22 // a f f i c h a g e d e s c l s e t d e s v a l e u r s du t a b l e a u 23 echo < l i >Les donnes du t a b l e a u s o n t :<br> ; 24 f o r e a c h ( $ t a b l e a u a s $ c l e => $ c h a i n e ) { 25 echo $ c l e . : . $ c h a i n e . <br/></ l i >\n ; 26 } 27 echo </ul >\n ; 28 ?> 29 </p> 30 <?php 31 outputFinFichierHTML5 ( ) ; 32 ?>
3.7 Passage de paramtre un script PHP

Dans lexemple suivant, le premier script passe deux paramtes au second : le titre de la page et le texte acher. Nous transmettons ici les paramtres par la mthode GET, la mthode POST, qui a 56
Chapitre 3 : PHP procdural lavantage de ne pas faire apparatre les paramtres dans lURL, est similaire au niveau programmation et sera vue plus loin. Lurl 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.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?php i n c l u d e _ o n c e . / commonFunctions . php ; ?> <?php $ t i t r e = Mon t i t r e par d f a u t ; i f ( i s s e t ($_GET[ t i t r e ] ) ) { $ t i t r e = $_GET[ t i t r e ] ; } outputEnTeteHTML5 ( $ t i t r e , UTF 8 , myStyle . c s s ) ; ?> <p> Pour l a n c e r l a u t r e s c r i p t avec comme t e x t e <?php $ t e x t e = Bonjour ; echo $ t e x t e ; echo <br/> e t comme t i t r e ; $ t i t r e = monTitre ; echo $ t i t r e . ; echo <a h r e f=\ ; echo . / ex08_passages_parametres2 . php? t e x t e = . $ t e x t e . &t i t r e= . $ t i t r e . >c l i q u e z i c i</ a> ; ? >. </p> <?php outputFinFichierHTML5 ( ) ; ?>
57
Programmation Web
Le second script peut alors rcuprer les paramtres texte et titre dans un tableau associatif $_GET. On peut vrier que les variables texte et titre ont bien t utilises via la fonction isset.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <?php i n c l u d e _ o n c e . / commonFunctions . php ; ?> <?php $ t i t r e = Mon t i t r e par d f a u t ; i f ( i s s e t ($_GET[ t i t r e ] ) ) { $ t i t r e = $_GET[ t i t r e ] ; } outputEnTeteHTML5 ( $ t i t r e , UTF 8 , myStyle . c s s ) ; ?> <p> <?php // dbut du s c r i p t PHP i f ( i s s e t ($_GET[ t e x t e ] ) ) { echo $_GET[ t e x t e ] ; }else{ echo H e l l o World ! ; // On a f f i c h e du code H T M L si la sortie } // f i n du s c r i p t PHP ?> </p> <?php outputFinFichierHTML5 ( ) ; ?>
Certains navigateurs ne supportant pas les URL avec des caractres comme des accents ou autres caractres UTF-8 quelconques (notamment le & ! ! !), si on veut passer une chane un peu gnrale en paramtre, on la codera en une string simple via la fonction htmlentities. Dans lexemple suivant, lURL 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?php i n c l u d e _ o n c e . / commonFunctions . php ; ?> <?php $ t i t r e = Mon t i t r e par d f a u t ; i f ( i s s e t ($_GET[ t i t r e ] ) ) { $ t i t r e = $_GET[ t i t r e ] ; } outputEnTeteHTML5 ( $ t i t r e , UTF 8 , myStyle . c s s ) ; ?> <p> Pour l a n c e r l a u t r e s c r i p t s avec comme t e x t e <?php $ t e x t e =L t va t r e chaud c e t t e anne ; echo . $ t e x t e . ; echo <br/> e t comme t i t r e ; $ t i t r e = Passage de p a r a m t r e s avec a c c e n t s e t e s p a c e s ; echo . $ t i t r e . ; echo \n<a h r e f=\ ; echo . / ex10_passages_parametres4 . php? t e x t e = . h t m l e n t i t i e s ( $ t e x t e , ENT_COMPAT, UTF8 ) . &t i t r e= . h t m l e n t i t i e s ( $ t i t r e , ENT_COMPAT, UTF8 ) . \ >\n\ t c l i q u e z i c i \n</a> ; ?> . </p> <?php outputFinFichierHTML5 ( ) ; ?>
1 <?php i n c l u d e _ o n c e . / commonFunctions . php ; ?> 2 3 <?php 4 $ t i t r e = Mon t i t r e par d f a u t ; 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
Programmation Web
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
} outputEnTeteHTML5 ( $ t i t r e , UTF 8 , myStyle . c s s ) ; ?> <p> <?php // dbut du s c r i p t PHP i f ( i s s e t ($_GET[ t e x t e ] ) ) { echo html_entity_decode ($_GET[ t e x t e ] ) ; }else{ echo H e l l o World ! ; // On a f f i c h e du code H T M L si la sortie } // f i n du s c r i p t PHP ?> </p> <?php outputFinFichierHTML5 ( ) ; ?>
60
Chapitre 4 Les classes en PHP

La programmation objet permet, en dveloppant une bonne fois pour toutes un ensemble de classes appel framework, de simplier grandement le travail de dveloppement et de maintenance de logiciels complexes, de manire que ces logiciels soient facilement adaptables. Ainsi, une entreprise telle quune socit de services, dun client lautre, reprendra tel quel une grande partie de son code, sans mme le retoucher. Ce code doit avoir une interface de dveloppement, cest dire quil doit mettre disposition des dveloppeurs un ensemble de mthodes qui permettent de raliser toutes les tches de base dont le programmeur peut avoir besoin pour dvelopper chaque application particulire. Les caractristiques dun framework doivent tre : 1. Robustesse : les classes de base du framework doivent tre testes et doivent tre conus pour rduire le risque de bugs lorsquun dvelopper utilise les classes du framework, ou dattaques lorsquun utilisateur malveillant utilise un site construit partir du framework. 2. Gnricit et versatilit : Le code doit pouvoir sadapter, sans le retoucher, au plus grand nombre dapplications possibles. 3. Facilit de maintenance du framework lui-mme avec une modularit interne, les grand outils (librairies, etc...) utiliss par le framework tant circonscrits des sous-modules avec des wrappers de manire pouvoir changer lun de ces outils sans revoir lenemble du code. 4. Une bonne lisibilit et une bonne documentation, notamment parce que les dveloppeurs qui utilisent le framework ne sont pas ncessairement les mmes que les dveloppeurs du framework lui-mme. Par rapport ces quatre objectifs, des outils sont disposition des dveloppeurs du framework : 1. Robustesse : la visibilit des variables et des mthodes (variables et mthodes prives, protected ou publiques) permet au dveloppeur du framework de garantir que lutilisateur du framework nira pas faire des btises en rentrant dans le code du framework, ce qui pourrait amener les classes du framework dans un tat incohrent. 2. Gnricit : les patrons de conception (ou design patterns) permettent de dvelopper des interfaces pour le framework qui rendent les code similaire dune application lautre et qui permet de sparer dirents aspects du dveloppement dune application. 61
Programmation Web
3. Facilit de maintenance du framework : la conception UML permet davoir une vision schmatique du framework, qui peut souvent contenir des centaines de classes. Chaque classe est si possible trs simple et la complexit se situe dans la communication entre classes. La rcriture ou la modication dune classe demande alors une intervention limite, et ne doit pas aecter les autres classes, pourvu que linterface entre les classes reste la mme. 4. Lisibilit : une forme strotype pour linterface des classes, les identicateurs, etc. rend le code plus lisible. De plus, des outils permettent de gnrer automatiquement une documentation (HTML, LATEX, PDF, etc.) des classes partir de commentaires dans le code. Cest le cas de Doxygen pour le PhP.
4.1 Exemple de classe PHP

Un classe doit permettre de manipuler un certain type dobjets. La classe doit permettre de reprsenter les caractristiques des objets, travers un certain nombre dattributs, qui sont les variables communes chacun des objets de ce type. La classe doit aussi permettre un dveloppeur qui lutilise de raliser toutes les opration ncessaires sur ces objets, traves des mthodes. Les mthodes dune classe sont les fonctions qui oprent en interne sur la classe. La manipulation des attributs se fait presque systmatiquement travers des mthodes, cet qui vite que lutilisateur de la classe ne mette les attributs dans un tat incohrent (exemple : variables NULL alors quelle nest pas cense ltre, ce qui gnre un bug). Pour cel, on met les attributs privs, cest dire que seules les mthodes de la classe peuvent accder ces attributs. Pour les autres classes, ces attributs ne sont pas visibles : elle ne peuvent pas y accder directement mais uniquement travers des mthodes. Voici un exemple avec une classe contenant ladresse dune personne. Les commentaires ont une forme spciale pour pouvoir gnrer la documentation du code avec loutil Doxygen. Les attributs sont privs et sont toujours initialiss via les setters, qui sont des mthodes spacialement conues qui testent les condition que doivent satisfaire les attributs (ici tre non null) avant des les initialiser. Le constructeur utilise les setters ce qui a lavantage de factoriser le code, cest dire que les tests sur les valeurs des attributs ne sont raliss quune seule fois. exemples/php2/ex01_classeAdresse.php
1 <?php 2 /** 3 @ b r i e f La c l a s s e a d r e s s e c o n t i e n t l a d r e s s e d une p e r s o n n e 4 ( q u i peut t r e un c l i e n t , un employ , un f o u r n i s s e u r , e t c . . . ) 5 */ 6 class Adresse { 7 /** Numro dans l a rue , ne d o i t pas t r e n u l l mais peut t r e v i d e */ 8 p r i v a t e $numeroRue ; 9 /** Nom de l a rue , ne d o i t pas t r e n u l l mais peut t r e v i d e */ 10 p r i v a t e $rue ; 11 /** Complment ( l i e u d i t , e t c . ne d o i t pas t r e n u l l mais peut t r e v i d e */ 12 p r i v a t e $complementAddr ; 13 /** code p o s t a l */ 14 private $codePostal ; 15 /** nom de l a v i l l e . ne d o i t pas t r e n u l l mais peut t r e v i d e */ 16 private $ v i l l e ; 17 /** nom du pays . ne d o i t pas t r e n u l l mais peut t r e v i d e */
62
Chapitre 4 : Les classes en PHP
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
p r i v a t e $pays ;
/** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e numro dans l a r u e . */ p u b l i c f u n c t i o n getNumeroRue ( ) { return $this >numeroRue ; } /** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e nom l a r u e . */ p u b l i c f u n c t i o n getRue ( ) { r e t u r n $ t h i s >r u e ; } /** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e nom l e complment d a d r e s s e . */ p u b l i c f u n c t i o n getcomplementAddr ( ) { r e t u r n $ t h i s >complementAddr ; } /** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e nom l e code p o s t a l . */ public function getCodePostal ( ) { r e t u r n $ t h i s >c o d e P o s t a l ; } /** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e nom l a v i l l e . */ public function getVille () { r e t u r n $ t h i s > v i l l e ; }
/** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e pays . */ p u b l i c f u n c t i o n getPays ( ) { r e t u r n $ t h i s >pays ; } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e nom de l a r u e . @param $NumeroRue l e numro u t i l i s e r . peut t r e n u l l . */ p u b l i c f u n c t i o n setNumeroRue ( $numeroRue ) { $ t h i s >numeroRue = ( $numeroRue == n u l l ) ? : $numeroRue ; } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e numro dans l a r u e . @param $Rue l e nom de l a r u e ou de l a p l a c e u t i l i s e r . peut t r e n u l l . */ p u b l i c f u n c t i o n setRue ( $ r u e ) { $ t h i s >r u e = ( $ r u e == n u l l ) ? : $ r u e ; } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e complment d a d r e s s e . @param $ComplementAddr l e complment d a d r e s s e u t i l i s e r . peut t r e n u l l . */ p u b l i c f u n c t i o n setComplementAddr ( $complementAddr ) { $ t h i s >complementAddr = ( $complementAddr == n u l l ) ? : cComplementAddr ; } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e code p o s t a l .
63
Programmation Web
74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125
@param $CodePostal l e numro u t i l i s e r . peut t r e n u l l */ public function setCodePostal ( $codePostal ) { $ t h i s >c o d e P o s t a l = ( $ c o d e P o s t a l == n u l l ) ? : $ c o d e P o s t a l ; } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e nom de l a v i l l e . @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 n u l l */ public function setVille ( $ v i l l e ) { $ t h i s > v i l l e = ( $ v i l l e == n u l l ) ? : $ v i l l e ; } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e nom du pays . @param $Pays l e nom de pays u t i l i s e r . peut t r e n u l l */ p u b l i c f u n c t i o n s e t P a y s ( $pays ) { $ t h i s >pays = ( $pays == n u l l ) ? : $pays ; } /** @brief 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 paramtres . Les p a r a m t r e s c o r r e s p o n d e n t aux v a l e u r s m e t t r e dans l e s a t t r i b u t s . Tout o b j e t d o i t t r e i n i t i a l i s avec l e c o n s t r u c t e u r ( a p p e l new ) . I c i , l e s p a r a m t r e s peuvent t r e n u l l . Les a t t r i b u t s s o n t a l o r s i n i t i a l i s s une c h a n e vide , p er m e tt a n t l a c o h r e n c e de l a c l a s s e . */ p u b l i c f u n c t i o n __construct ( $numeroRue=n u l l , $ r u e=n u l l , $complementAddr=n u l l , $ c o d e P o s t a l=n u l l , $ v i l l e=n u l l , $pays = France ) { $ t h i s >setNumeroRue ( $numeroRue ) ; $ t h i s >setRue ( $ r u e ) ; $ t h i s >setComplementAddr ( $complementAddr ) ; $ t h i s >s e t C o d e P o s t a l ( $ c o d e P o s t a l ) ; $ t h i s >s e t V i l l e ( $ v i l l e ) ; $ t h i s >s e t P a y s ( $pays ) ; } /** @ b r i e f Mthode d a f f i c h a g e . Permet d a f f i c h e r une a d r e s s e en XHTML 1 . 0 strict . Les a t t r i b u t s d o i v e n t t r e non n u l l . ( mais normalement a ne r i s q u e pas d arriver c a r l e s a t t r i b u t s s o n t 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 n u l l . Les s e t t e r s e t l e c o n s t r u c t e u r e s t a i n s i conu que l e s a t t r i b u t s ne peuvent pas t r e n u l l . */ public function affiche () { echo <s t r o n g >A d r e s s e : </s t r o n g ><br/>\n ; echo $ t h i s >numeroRue ; i f ( s t r l e n ( $ t h i s >numeroRue ) >=1) echo , ; echo $ t h i s >r u e ; i f ( s t r l e n ( $ t h i s >r u e ) >=1) echo <br/> ; echo $ t h i s >complementAddr ;
64

i f ( s t r l e n ( $ t h i s >complementAddr ) >=1) echo <br/> ; echo $ t h i s >c o d e P o s t a l . ; echo $ t h i s > v i l l e ; i f ( s t r l e n ( $ t h i s > v i l l e ) >=2) echo <br/> ; echo $ t h i s >pays . <br/> ;
126 127 128 129 130 131 132 133 } 134 } 135 ?>
Voyons maintenant un petit script de test qui cre des adresses et les ache. Seul le script de test gnre du code HTML et comporte un en-tte HTML (mme si ce code HTML est en fait gnr dans la mthode affiche de la classe adresse).
exemples/php2/ex02_classesPHP.php
1 <?php 2 i n c l u d e _ o n c e . / commonFunctions . php ; 3 i n c l u d e _ o n c e . / e x 0 1 _ c l a s s e A d r e s s e . php ; 4 ?> 5 6 <?php 7 outputEnTeteHTML5 ( Ma p r e m i r e c l a s s e PHP , UTF 8 , myStyle . c s s ) ; 8 ?>
65
Programmation Web
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
<p> <?php $ a d r e s s e 1 = new A d r e s s e ( 1 0 , a l l e du net , Q u a r t i e r de l \ a v e n i r , 6 3 0 0 0 , Clermont Ferrand ) ; $adresse1 >a f f i c h e () ; $ a d r e s s e 2 = new A d r e s s e ( 1 0 , Downing S t r e e t , NULL, NULL, London , United Kingdom ) ; $ a d r e s s e 2 >a f f i c h e ( ) ; $ a d r e s s e 3 = new A d r e s s e ( ) ; $ a d r e s s e 3 >a f f i c h e ( ) ; ?> </p> <?php outputFinFichierHTML5 ( ) ; ?>
4.2 Validation en entre et gestion dune exception

Les setters de la classe vont jouer un rlr important de ltrage des donnes. En particulier, lorque les donnes viendront de la saisie dun formulaire, ces donnes devront tre systmatiquement ltres car lutilisateur, qui nest pas toujours bienveillant, peut mettre nimporte quoi dans les champs dun formulaire. Le ltrage jouera donc un rle trs important pour la scurit. Par exemple, on prendra soin de limiter la longueur des attributs de type String la fois au niveau du ltrage, puis au niveau de la base de donnes (voir chapitres ultrieurs). On pourra aussi utiliser des expressions rgulires lors du ltrage grce aux fonctions preg_match_all ou preg_match (voir man regex(7) pour la formation des expressions rgulires). Le gros avantage du PHP par rapport dautres langages comme javascript, est que PHP sexcute ct serveur donc un pirate naura pas la possibilit danalyser prcisment ce que fait le ltrage. Si une valeur invalide est dtecte au niveau du ltrage, on gnrera une exception avec un message derreur. Cette exception pourra tre gre un autre niveau dans lapplication, ici au niveau du script de test qui ache quelques employs. exemples/php2/ex03_classeEmploye.php
1 <?php 2 i n c l u d e _ o n c e . / e x 0 1 _ c l a s s e A d r e s s e . php ; 3 ?> 4 <?php 5 /** 6 @ b r i e f La c l a s s e Employe r e p r s e n t e un employ de l e n t r e p r i s e . 7 E l l e c o n t i e n t l i d e n t i t (nom prnom ) , l a d r e s s e , l e nomro de t l p h o n e 8 e t l e s a l a i r e mensuel de l employ . 9 */ 10 c l a s s 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 n u l l ou v i d e . */ 12 p r i v a t e $nom ; 13 /** prnom de l employ */ 14 p r i v a t e $prenom ; 15 /** a d r e s s e de l employ */
66
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
private $adresse ; /** p r e m i e r numro de t l p h o n e */ private $telephone1 ; /** deuxime numro de t l p h o n e */ private $telephone2 ; /** c a t g o r i e de l employ : s e c r t a i r e , commercial , t e c h n i q u e ou pdg */ private $categorie ; /** s a l a i r e mensuel de l a p e r s o n n e en e u r o s / mois */ private $salaireMensuel ; /** t a b l e a u de t o u t e s l e s c a t g o r i e s d employs p o s s i b l e s . un a t t r i b u t s t a t i q u e e s t un a t t r i b u t q u i e x i s t e en un s e u l e x e m p l a i r e commun t o u s l e s o b j e t s de l a c l a s s e . Cela v i t e d a v o i r a u t a n t de c o p i e s du t a b l e a u $ c a t e g o r i e s E m p l o y e s qu i l y a d i n s t a n c e de l a c l a s s e Employe en mmoire . */ p r i v a t e s t a t i c $ c a t e g o r i e s E m p l o y e s = a r r a y ( s e c r t a i r e , commercial , technique , boss ) ; /** Mthode s t a t i q u e de v a l i d a t i o n d un paramtre de c a t g o r i e . l a v a l e u r d o i t s e t r o u v e r dans l e s t a b l e a u $ c a t e g o r i e s E m p l o y e s . Une mthode s t a t i q u e e s t une mthode q u i ne s a p p l i q u e pas un o b j e t particulier . 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 : : */ public st atic function validCategorie ( $categorie ) { i f ( $ c a t e g o r i e == n u l l | | ! i s _ s t r i n g ( $ c a t e g o r i e ) ) return f a l s e ; f o r ( $ i =0 ; $ i <s i z e o f ( s e l f : : $ c a t e g o r i e s E m p l o y e s ) ; $ i ++) { i f ( strcmp ( s e l f : : $ c a t e g o r i e s E m p l o y e s [ $ i ] , $ c a t e g o r i e )==0) { return true ; } } return f a l s e ; } /** @ b r i e f a c c e s s e u r : permet d o b t e n i r l e nom de l employ */ p u b l i c f u n c t i o n getNom ( ) { return $this >nom ; } /** @ b r i e f a c c e s s e u r : permet d o b t e n i r l e prnom de l employ */ p u b l i c f u n c t i o n getPrenom ( ) { r e t u r n $ t h i s >prenom ; } /** @ b r i e f a c c e s s e u r : permet d o b t e n i r l a d r e s s e de l employ */ public function getAdresse () { r e t u r n $ t h i s >a d r e s s e ; } /** @ b r i e f a c c e s s e u r : permet d o b t e n i r l e t l p h o n e 1 de l employ */ public function getTelephone1 ( ) { r e t u r n $ t h i s >t e l e p h o n e 1 ; }
67
Programmation Web
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
/** @ b r i e f a c c e s s e u r : permet d o b t e n i r l e t l p h o n e 2 de l employ */ public function getTelephone2 ( ) { r e t u r n $ t h i s >t e l e p h o n e 2 ; } /** @ b r i e f a c c e s s e u r : permet d o b t e n i r l a c a t g o r i e de l employ */ public function getCategorie () { r e t u r n $ t h i s >c a t e g o r i e ; }
/** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e nom de l a p e r s o n n e @param $Nom l e nom de l a p e r s o n n e . Doit t r e non n u l l e t comporter au moins 1 c a r a c t r e . */ p u b l i c f u n c t i o n setNom ( $nom ) { i f ( $nom == n u l l | | s t r l e n ( $nom )< 1 | | s t r l e n ( $nom ) > 5 0 ) { throw new E x c e p t i o n ( Dsol , t o u t e p e r s o n n e d o i t a v o i r un nom e t l e nom a au p l u s 50 c a r a c t r e s ! ) ; }else{ $ t h i s >nom = $nom ; } } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e nom de l a p e r s o n n e */ p u b l i c f u n c t i o n setPrenom ( $prenom ) { $ t h i s >prenom = ( $prenom == n u l l | | s t r l e n ( $prenom ) > 5 0 ) ? : $prenom ; }
/** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l a d r e s s e de l a p e r s o n n e */ public function setAdresse ( $adresse ) { i f ( $ a d r e s s e == n u l l | | strcmp ( g e t _ c l a s s ( $ a d r e s s e ) , Adresse ) != 0 ) { $ t h i s >a d r e s s e = new A d r e s s e ( ) ; }else{ $ t h i s >a d r e s s e = $ a d r e s s e ; } } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e t l p h o n e 1 de l a p e r s o n n e */ public function setTelephone1 ( $telephone1 ) { $ t h i s >t e l e p h o n e 1 = ( $ t e l e p h o n e 1 == n u l l | | s t r l e n ( $ t e l e p h o n e 1 ) > 1 5 ) ? : $telephone1 ; } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e t l p h o n e 2 de l a p e r s o n n e */ public function setTelephone2 ( $telephone2 ) { $ t h i s >t e l e p h o n e 2 = ( $ t e l e p h o n e 2 == n u l l | | s t r l e n ( $ t e l e p h o n e 2 ) > 1 5 ) ? : $telephone2 ; } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e s a l a i r e mensuel de l a personne
68
119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
@param $ S a l a i r e s a l a i r e mensuel en e u r o s / mois */ public function setSalaireMensuel ( $salaire ) { i f ( $ s a l a i r e == n u l l | | ! is_numeric ( $ s a l a i r e ) ) { $ t h i s >s a l a i r e M e n s u e l = 0 . 0 ; }else { $ t h i s >s a l a i r e M e n s u e l = $ s a l a i r e ; } } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l a c a t g o r i e de l a p e r s o n n e @param $ C a t e g o r i e d o i t c o r r e s p o n d r e une c a t g o r i e d employ r p e r t o r i e . */ public function setCategorie ( $categorie ) { i f (! s e l f : : validCategorie ( $categorie ) ){ throw new E x c e p t i o n ( 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 . ) ; }else{ $ t h i s >c a t e g o r i e = $ c a t e g o r i e ; } } /** @brief 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 paramtres . Les p a r a m t r e s c o r r e s p o n d e n t aux v a l e u r s m e t t r e dans l e s a t t r i b u t s . Tout o b j e t d o i t t r e i n i t i a l i s avec l e c o n s t r u c t e u r ( a p p e l new ) . Des e x c e p t i o n s s o n t r e j e t e s en c a s de p a r a m t r e s i n v a l i d e . */ p u b l i c f u n c t i o n __construct ( $nom , $prenom=n u l l , $ a d r e s s e=n u l l , $ t e l e p h o n e 1=n u l l , $ t e l e p h o n e 2=n u l l , $ s a l a i r e =0.0 , $ c a t e g o r i e = t e c h n i q u e ) { $ t h i s >setNom ( $nom ) ; $ t h i s >setPrenom ( $prenom ) ; $ t h i s >s e t A d r e s s e ( $ a d r e s s e ) ; $ t h i s >s e t T e l e p h o n e 1 ( $ t e l e p h o n e 1 ) ; $ t h i s >s e t T e l e p h o n e 2 ( $ t e l e p h o n e 2 ) ; $ t h i s >s e t S a l a i r e M e n s u e l ( $ s a l a i r e ) ; $ t h i s >s e t C a t e g o r i e ( $ c a t e g o r i e ) ; } /** @ b r i e f Mthode d a f f i c h a g e . Permet d a f f i c h e r une a d r e s s e en XHTML 1 . 0 strict . Les a t t r i b u t s d o i v e n t t r e non n u l l . ( mais normalement a ne r i s q u e pas d arriver c a r l e s a t t r i b u t s s o n t 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 n u l l . Les s e t t e r s e t l e c o n s t r u c t e u r e s t a i n s i conu que l e s a t t r i b u t s ne peuvent pas t r e n u l l . */ public function affiche () { echo <s t r o n g >Employ : </s t r o n g ><br/> ; echo nom : . $ t h i s >nom . <br/>\n ; i f ( s t r l e n ( $ t h i s >prenom )>=1) echo Prnom : . $ t h i s >prenom . <br/>\n ; echo C a t g o r i e : . $ t h i s >c a t e g o r i e . <br/>\n ; $ t h i s >a d r e s s e >a f f i c h e ( ) ;
69
Programmation Web
170 i f ( s t r l e n ( $ t h i s >t e l e p h o n e 1 )>=1){ 171 echo Tlphone 1 : . $ t h i s >t e l e p h o n e 1 . <br/>\n ; 172 } 173 i f ( s t r l e n ( $ t h i s >t e l e p h o n e 2 )>=1){ 174 echo Tlphone 2 : . $ t h i s >t e l e p h o n e 2 . <br/>\n ; 175 } 176 echo S a l a i r e mensuel : . $ t h i s >s a l a i r e M e n s u e l . &e u r o ; par mois<br/>\n ; 177 } 178 } 179 ?>
Notons lattribut categoriesEmployes et la mthode validCategorie qui sont dclare statiques. Cel signie quils sappliquent la classe et non pas un objet de la classe. On parle de variables de classe et mthodes de classe. Une variable de classe nexiste quen un seul exemplaire commun tous les objets de la classe. Voici le script de test qui cre quelques employs. Lorsqueune exception est reue, au lieu dacher lemploy, on ache le message derreur. Nous verrons plus loin comment ce mcanisme de gestion des exceptions permet de renvoyer lutilisateur des informations sur les attributs invalides quil a saisi dans le formulaire.
exemples/php2/ex04_classesPHP2.php
1 2 3 4 5 6 <?php include_once include_once include_once ?> . / commonFunctions . php ; . / e x 0 1 _ c l a s s e A d r e s s e . php ; . / ex03_classeEmploye . php ;
70
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<?php outputEnTeteHTML5 ( G e s t i o n d \ une e x c e p t i o n , UTF 8 , myStyle . c s s ) ; ?> <p> <?php try { $ a d r e s s e 1 = new A d r e s s e ( 1 0 , a l l e du net , Q u a r t i e r de l \ a v e n i r , 6 3 0 0 0 , Clermont Ferrand ) ; $employe1 = new Employe ( Modle , n u l l , $ a d r e s s e 1 , 04 73 00 00 00 , 18 , 1 0 0 . 5 , s e c r t a i r e ) ; $employe1 >a f f i c h e () ; } c a t c h ( E x c e p t i o n $e ) { echo E x c e p t i o n r e u e : , $e >getMessage ( ) , \n ; } echo <br/>\n ; try { $ a d r e s s e 2 = new A d r e s s e ( 1 0 , Downing S t r e e t , n u l l , n u l l , London , United Kingdom ) ; $employe2 = new Employe ( Thatcher , Margaret , $ a d r e s s e 2 , 911 , n u l l , n u l l , boss ) ; $employe2 >a f f i c h e ( ) ; } c a t c h ( E x c e p t i o n $e ) { echo E x c e p t i o n r e u e : , $e >getMessage ( ) , \n ; } try { echo <br/>\n ; $ a d r e s s e 3 = new A d r e s s e ( 1 0 , a l l e du net , Q u a r t i e r de l \ a v e n i r , 6 3 0 0 0 , Clermont Ferrand , s e c r e t a i r e ) ; $employe3 = new Employe ( Modle , n u l l , $ a d r e s s e 3 , 04 73 00 00 00 , 18 , 1 0 0 . 5 , badCategory ) ; $employe3 >a f f i c h e ( ) ; } c a t c h ( E x c e p t i o n $e ) { echo E x c e p t i o n r e u e : , $e >getMessage ( ) , \n ; }
?> </p> <?php outputFinFichierHTML5 ( ) ; ?>
71
Chapitre 5 Formulaires HTML/PHP

Les formulaires HTML permettent de faire saisir des donnes par lutilisateur via son navigateur. Ces donnes sont saisies dans des champs appels inputs, qui sont dnis avec la balise <input>. Les donnes sont ensuite rcupres dans un script, ici un script PHP. Ces donnes doivent imprativement tre testes et ltres pour quelles soient cohrentes (par exemple les champs obligatoires ne doivent pas tre vides). Renvoyer le formulaire lutilisateur aprs une saisie errone ncessite de lorganisation au niveau du code, surtout si lon souhaite que lutilisateur nait pas ressaisir toutes ses donnes. Il faut alors initialiser les valeurs du formulaire quon reprsente avec les donnes prcdemment saisies. Nous prsentons deux approches pour ce problme : lapproche nave et lapproche objet avec gestion des exceptions et modme MVC. Nous penssons que le lecteur adoptera ensuite sans hsiter lapproche objet car lapproche nave devient vite ingrable. La lecture de lapproche nave permettra tout de mme dtudier la base de la syntaxe des formulaires et de la rcupration des donnes saisies.
5.1 Formulaires HTML

Un formulaire est cr par une balise <form> qui contient la mthode de transmission des donnes (GET ou POST) et laction, qui est lURL du script (ici un script PHP) qui va rcuprer les donnes du formulaire. Chaque input a son label, qui explique lutilisateur ce quil doit saisir dans ce champ. La correspondance entre les inputs et le labels se fait via lattribut for du label qui doit correspondre lattrinut id de linput. Lattribut name de linput servira lors de la rcupration des donnes. Les attributs id et name de linput peuvent tre gaux si on veut simplier. exemples/forms1/ex01_form_html.html
1 2 3 4 5 6 7 8 9 10 11 12 < ! doctype html> <html lang= f r > <head> <meta charset=UTF8 /> < t i t l e >Mon p r e m i e r f o r m u l a i r e HTML </ t i t l e > </ head> <body> <h1> S a i s i e d un employ</ h1> <form method= p o s t action= e x 0 2 _ r e c e p t i o n . php> <p> < l a b e l f o r=nomEmploye>Nom</ l a b e l> <input type= t e x t name=nom id=nomEmploye s i z e= 30 />
72
Chapitre 5 : Formulaires HTML/PHP
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
</p> <p> < l a b e l f o r= prenomEmploye >Prnom</ l a b e l> <input type= t e x t name= prenom id= prenomEmploye s i z e= 30 /><br /> </p> <p> < l a b e l f o r= t e l e p h o n e >Tlphone</ l a b e l> <input type= t e x t name= t e l e p h o n e id= t e l e p h o n e s i z e = 10 /><br /> </p> <p> <strong>C a t g o r i e :</ strong> </p> <p> < l a b e l f o r= s e c r e t a i r e >S e c r t a i r e</ l a b e l> <input type= r a d i o 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 checked= checked /><br /> </p> <p> < l a b e l f o r= commercial >Commercial</ l a b e l> <input type= r a d i o name= c a t e g o r i e value= commercial id= commercial /><br /> </p> <p> < l a b e l f o r= t e c h n i q u e >P e r s o n n e l t e c h n i q u e</ l a b e l> <input type= r a d i o name= c a t e g o r i e value= t e c h n i q u e id= t e c h n i q u e /><br />
73
Programmation Web
36 37 38 39 40 41 42 43 44 45 46 47
</p> <p> < l a b e l fo r= b o s s >The Big Boss</ l a b e l> <input type= r a d i o name= c a t e g o r i e value= b o s s id= b o s s /><br /> </p> <p> < l a b e l f o r= submit s t y l e= d i s p l a y : none ; >submit</ l a b e l> <input type= submit value= Envoyer /> </p> </ form> </ body> </ html>
La rception des donnes se fait ici par la mthode POST (comme indiqu dans la balise <form>). Les donnes sont rcupres dans un tableau associatif $_POST, dont les clefs sont les attributs name des inputs du formulaire prcdent. On teste si ces attributs existent bien via la fonction isset.
exemples/forms1/ex02_reception.php
1 2 <?php i n c l u d e ( . / commonFunctions . php ) ; ?> 3 <?php 4 outputEnTeteHTML5 ( R c e p t i o n d \ un f o r m u l a i r e , UTF 8 , myStyle . c s s ) ; 5 ?>
74
6 <?php 7 $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 } 15 16 $ t e l e p h o n e= ; 17 i f ( i s s e t ($_POST [ t e l e p h o n e ] ) ) { 18 $ t e l e p h o n e = $_POST [ t e l e p h o n e ] ; 19 } 20 $ c a t e g o r i e= ; 21 i f ( i s s e t ($_POST [ c a t e g o r i e ] ) ) { 22 $ c a t e g o r i e = $_POST [ c a t e g o r i e ] ; 23 } 24 echo <h1>Donnes r e u e s </h1>\n ; 25 echo <p>\n ; 26 echo nom : . $nom . <br/>\n ; 27 echo prenom : . $prenom . <br/>\n ; 28 echo Tlphone : . $ t e l e p h o n e . <br/>\n ; 29 echo C a t g o r i e : . $ c a t e g o r i e . <br/>\n ; 30 echo </p>\n ; 31 ?> 32 33 <?php 34 outputFinFichierHTML5 ( ) ; 35 ?>
5.2 Exemple de style CSS pour formulaire

exemples/forms1/ex03_form_html.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 < ! doctype html> <html lang= f r > <head> <meta charset=UTF8 /> < l i n k r e l = s t y l e s h e e t href= . / myStyle . c s s /> < t i t l e >Mon p r e m i e r f o r m u l a i r e HTML </ t i t l e > </ head> <body> <h1> S a i s i e d un employ</ h1> <form method= p o s t action= e x 0 4 _ r e c e p t i o n . php> <p> < l a b e l f o r=nomEmploye>Nom</ l a b e l> <input type= t e x t name=nom id=nomEmploye s i z e= 30 /> </p> <p> < l a b e l f o r= prenomEmploye >Prnom</ l a b e l> <input type= t e x t name= prenom id= prenomEmploye s i z e= 30 /><br /> </p> <p>
75
Programmation Web
20 < l a b e l f o r= t e l e p h o n e >Tlphone</ l a b e l> 21 <input type= t e x t name= t e l e p h o n e id= t e l e p h o n e s i z e = 10 /><br /> 22 </p> 23 <p> 24 <strong>C a t g o r i e :</ strong> 25 </p> 26 <p> 27 < l a b e l f o r= s e c r e t a i r e >S e c r t a i r e</ l a b e l> 28 <input type= r a d i o 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 checked= checked /><br /> 29 </p> 30 <p> 31 < l a b e l f o r= commercial >Commercial</ l a b e l> 32 <input type= r a d i o name= c a t e g o r i e value= commercial id= commercial /><br /> 33 </p> 34 <p> 35 < l a b e l f o r= t e c h n i q u e >P e r s o n n e l t e c h n i q u e</ l a b e l> 36 <input type= r a d i o name= c a t e g o r i e value= t e c h n i q u e id= t e c h n i q u e /><br /> 37 </p> 38 <p> 39 < l a b e l fo r= b o s s >The Big Boss</ l a b e l> 40 <input type= r a d i o name= c a t e g o r i e value= b o s s id= b o s s /><br /> 41 </p> 42 <p> 43 <input type= submit value= Envoyer c l a s s= s a n s L a b e l ></ input>
76
44 </p> 45 </ form> 46 </ body> 47 </ html>
exemples/forms1/myStyle.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 /* s t y l e par d f a u t du t e x t e */ body { f o n t f a m i l y : Comic Sans MS ; f o n t s i z e : 18 pt ; background c o l o r : # f f f ; c o l o r : #222; } /* s t y l e du t i t r e */ h1 { f o n t w e i g h t : b o l d ; f o n t s i z e : 150%; c o l o r : white ; t e x t a l i g n : c e n t e r ; background c o l o r : #999; padding : 15 px ; } /****************************************** | mise en forme du f o r m u l a i r e | \*****************************************/ /* t o u s l e s l a b e l s ont l a mme l a r g e u r pour a l i g n e r l e s i n p u t s */ form p l a b e l { float : left ; width : 400 px ; t e x t a l i g n : r i g h t ; padding : 6px ; f o n t w e i g h t : b o l d ; } form p i n p u t { padding : 6px ; margin l e f t : 20 px ; background c o l o r : #ddd ; border s t y l e : g r o o v e ; border width : 5px ; border c o l o r : #444; border r a d i u s : 1 0 px ; } /* i n p u t s p c i a l pour l e boutton submit */ form p i n p u t . s a n s L a b e l { margin l e f t : 432 px ; /* 400+6+6+20 : a l i g n s u r l e s a u t r e s i n p u t s */ f o n t s i z e : 130%; f o n t w e i g h t : b o l d e r ; background c o l o r :# f f 3 3 3 3 ; c o l o r : white ;
77
Programmation Web
50 } 51 52 form p { 53 background c o l o r : # f f f ; 54 padding : 0px ; 55 } 56 57 /****************************************/ 58 59 60 /* s t y l e par d f a u t d e s l i e n s */ 61 a : l i n k { 62 t e x t d e c o r a t i o n : u n d e r l i n e ; /* s o u l i g n */ 63 c o l o r : #00e ; 64 } 65 66 /* s t y l e d e s l i e n s v i s i t s */ 67 a : v i s i t e d { 68 t e x t d e c o r a t i o n : u n d e r l i n e ; /* s o u l i g n */ 69 c o l o r : #00c ; / * b l e u c l a i r */ 70 } 71 72 /* s t y l e d e s l i e n s v i s i t s */ 73 a : hover { 74 t e x t d e c o r a t i o n : u n d e r l i n e ; /* s o u l i g n */ 75 c o l o r : #e40 ; / * r o u g e v i f */ 76 } 77 78 /* s t y l e d e s l m e n t s i m p o r t a n t s */ 79 s t r o n g { 80 f o n t v a r i a n t : s m a l l c a p s ; 81 f o n t w e i g h t : b o l d e r ; 82 color : black ; 83 } 84 85 /* s t y l e d e s l m e n t s mis en v i d e n c e */ 86 em { 87 f o n t s t y l e : i t a l i c ; 88 color : black ; 89 } 90 91 p { 92 background c o l o r : #ddd ; 93 t e x t a l i g n : j u s t i f y ; 94 padding : 5 pt ; 95 }
5.3 Validation : Test de champs obligatoire vide

La forme la plus simple du ltrage consiste tester que tous les attributs sont non vides et renvoyer le formulaire lutilisateur en cas de champs vide. Ici, lutilisateur doit ressaisir tous les attributs du formulaire partir de zro ce qui est trs dsagrable (dconseill pour un site de e-commerce). 78
exemples/forms1/ex04_reception.php
1 2 <?php 3 i n c l u d e ( . / commonFunctions . php ) ; 4 i n c l u d e ( . / ex05_formFunctions . php ) ; 5 ?> 6 <?php 7 outputEnTeteHTML5 ( R c e p t i o n d \ un f o r m u l a i r e , UTF 8 , myStyle . c s s ) ; 8 ?> 9 <?php 10 $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 } 18 19 $ t e l e p h o n e= ; 20 i f ( i s s e t ($_POST [ t e l e p h o n e ] ) ) { 21 $ t e l e p h o n e = $_POST [ t e l e p h o n e ] ; 22 } 23 $ c a t e g o r i e= ;
79
Programmation Web
24 i f ( i s s e t ($_POST [ c a t e g o r i e ] ) ) { 25 $ c a t e g o r i e = $_POST [ c a t e g o 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 ( $ t e l e p h o n e )>=1) { 29 echo <h1>Donnes r e u e s </h1>\n ; 30 echo <p>\n ; 31 echo nom : . $nom . <br/>\n ; 32 echo prenom : . $prenom . <br/>\n ; 33 echo Tlphone : . $ t e l e p h o n e . <br/>\n ; 34 echo C a t g o r i e : . $ c a t e g o r i e . <br/>\n ; 35 echo </p>\n ; 36 }else{ 37 d i s p l a y F o r m S a i s i e E m p l o y e ( $nom , $prenom , $ t e l e p h o n e , $ c a t e g o r i e ) ; 38 } 39 ?> 40 41 <?php 42 outputFinFichierHTML5 ( ) ; 43 ?>
5.4 Gnration du formulaire dans une fonction

Ici, une fonction gnre le formulaire en prenant en paramtre les valeurs initiales. Cette fonction facilitera le renvoi des donnes saisies vers lutilisateur en cas de donnes incompltes. Cependant, le code de cette fonction est trs peu lisible et dicile maintenir. exemples/forms1/ex05_formFunctions.php
1 <?php 2 f u n c t i o n d i s p l a y F o r m S a i s i e E m p l o y e ( $nom , $prenom , $ t e l e p h o n e , $ c a t e g o r i e ) { 3 echo <h1>S a i s i e d un employ </h1>\n ; 4 echo <span s t y l e =\ color : r e d ; font s i z e :1 2 0 % ; \ >Problme , t o u s l e s champs s o n t o b l i g a t o i r e s </span> ; 5 echo <form method=\ p o s t \ a c t i o n =\ e x 0 4 _ r e c e p t i o n . php\ >\n ; 6 echo <p>\n ; 7 echo <l a b e l f o r =\nomEmploye\ >Nom</ l a b e l >\n ; 8 echo <i n p u t type=\ text \ name=\nom\ i d=\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 \ >Prnom</ l a b e l >\n ; 12 echo <i n p u t type=\ text \ name=\ prenom\ i d=\ 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 =\ t e l e p h o n e \ >Tlphone </ l a b e l >\n ; 16 echo <i n p u t type=\ text \ name=\ t e l e p h o n e \ i d=\ t e l e p h o n e \ s i z e =\ 10\ /><br/>\n ; 17 echo </p>\n ; 18 echo <p>\n ; 19 echo <s t r o n g >C a t g o r i e :</ s t r o n g >\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 \ >S e c r t a i r e </ l a b e l > \n ;
80
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
echo <i n p u t type=\ r a d i o \ name=\ c a t e g o r i e \ v a l u e=\ s e c r t a i r e \ i d=\ s e c r e t a i r e \ /><br/>\n ; echo </p>\n ; echo <p>\n ; echo <l a b e l f o r =\ commercial \ >Commercial </ l a b e l >\n ; echo <i n p u t type=\ r a d i o \ name=\ c a t e g o r i e \ v a l u e=\ commercial \ i d=\ commercial \ /><br/>\n ; echo </p>\n ; echo <p>\n ; echo <l a b e l f o r =\ t e c h n i q u e \ >P e r s o n n e l t e c h n i q u e </ l a b e l >\n ; echo <i n p u t type=\ r a d i o \ name=\ c a t e g o r i e \ v a l u e=\ t e c h n i q u e \ i d=\ t e c h n i q u e \ /><br/>\n ; echo </p>\n ; echo <p>\n ; echo <l a b e l f o r =\ b o s s \ >The Big Boss </ l a b e l >\n ; echo <i n p u t type=\ r a d i o \ name=\ c a t e g o r i e \ v a l u e=\ b o s s \ i d=\ b o s s \ /><br/>\n ; echo </p>\n ; echo <p>\n ; echo <i n p u t type=\ submit \ v a l u e=\ Envoyer \ c l a s s =\ s a n s L a b e l \ ></input >\n ; echo </p>\n ; echo </form>\n ; } ?>
5.5 Validation : Renvoi des valeurs vers lutilisateur

exemples/forms1/ex08_receptionRenvoieValeur.php
1 2 <?php 3 i n c l u d e ( . / commonFunctions . php ) ; 4 i n c l u d e ( . / ex07_formFunctionsRenvoieValeur . php ) ; 5 ?> 6 <?php 7 outputEnTeteHTML5 ( R c e p t i o n d \ un f o r m u l a i r e , UTF 8 , myStyle . c s s ) ; 8 ?> 9 <?php 10 $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 } 18 19 $ t e l e p h o n e= ; 20 i f ( i s s e t ($_POST [ t e l e p h o n e ] ) ) { 21 $ t e l e p h o n e = $_POST [ t e l e p h o n e ] ; 22 } 23 $ c a t e g o r i e= ; 24 i f ( i s s e t ($_POST [ c a t e g o r i e ] ) ) {
81
Programmation Web
25 $ c a t e g o r i e = $_POST [ c a t e g o 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 ( $ t e l e p h o n e )>=1) { 28 echo <h1>Donnes r e u e s </h1>\n ; 29 echo <p>\n ; 30 echo nom : . $nom . <br/>\n ; 31 echo prenom : . $prenom . <br/>\n ; 32 echo Tlphone : . $ t e l e p h o n e . <br/>\n ; 33 echo C a t g o r i e : . $ c a t e g o r i e . <br/>\n ; 34 echo </p>\n ; 35 }else{ 36 d i s p l a y F o r m S a i s i e E m p l o y e ( $nom , $prenom , $ t e l e p h o n e , $ c a t e g o r i e ) ; 37 } 38 ?> 39 40 <?php 41 outputFinFichierHTML5 ( ) ; 42 ?>
82
5.6 Injections et ltrage

5.6.1 Injections
Les injections sont un moyen pour un pirate dexcuter du code non prvu en exploitant les interfaces entre PHP et dautres langages (HTML, Javascript, SQL, etc...). Pour cel, le pirate rentre dans un input du code, qui nest pas dtect par PHP (on a simplement une chane de caractres au niveau de PHP), mais qui est interprt par un autre langage interfac avec PHP. Voyons un exemple dinjection HTML. Lutilisateur malveillant va entrer dans un input Nom du code HTML pour introduire dans le site victime un lien vers un site pirate. Si lutilisateur inaverti ou distrait clique sur ce lien, le pirate peut alors demander lutilisateur de rentrer ses identiants (usurpation didentit) ou ses donnes de carte bancaire (escroquerie), etc. Voyons tout dabord de formulaire et sa rception dans le cadre de son utilisation normale.
Figure 5.1: Un gentil formulaire
Figure 5.2: Le site ache en HTML les donnes saisies dans le gentil formulaire Le code source du formulaire et de sa rception est le suivant : exemples/forms3/ex06_form_piratable.php
1 < !DOCTYPE html PUBLIC //W3C//DTDXHTML 1 . 0 S t r i c t //EN h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1 s t r i c t . dtd > 2 <html xmlns= h t t p : / /www. w3 . o r g /1999/ xhtml xml : lang= f r lang= f r > 3 <head> 4 <meta http e q u i v= Content Type content= t e x t / html ; c h a r s e t=UTF8 /> 5 < t i t l e ></ t i t l e > 6 </ head> 7 <body> 8 <form method= p o s t action= . / e x 0 7 _ r e c e p t i o n _ p i r a t a b l e . php> 9 <p> 10 < l a b e l f o r=nom>Nom</ l a b e l> 11 <input type= t e x t name=nom id=nom s i z e= 40 /> 12 </p> 13 <p>
83
Programmation Web
14 15 16 17 18
<input type= submit value= Envoyer /> </p> </ form> </ body> </ html>
exemples/forms3/ex07_reception_piratable.php
1 < !DOCTYPE html PUBLIC //W3C//DTDXHTML 1 . 0 S t r i c t //EN h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1 s t r i c t . dtd > 2 <html xmlns= h t t p : / /www. w3 . o r g /1999/ xhtml xml : lang= f r lang= f r > 3 <head> 4 <meta http e q u i v= Content Type content= t e x t / html ; c h a r s e t=UTF8 /> 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 <?php 10 i f ( i s s e t ($_POST [ nom ] ) ) { 11 echo $_POST [ nom ] ; 12 } 13 ?> 14 <p> 15 C e c i 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 rsultat est lapparition dun lien non prvu sur le site :
Figure 5.4: Lachage des donnes du formulaire sort le code HTML entr par le pirate Ceci est juste un exemple un peu simpliste mais peut conduire des attaques trs grave, surtout quand, comme dans lexemple ci-dessous, le pirate fait excuter tout un programme javascript charg partir de son propre site : 84
Figure 5.5: Insersion HTML faisant excuter un programma javascript.
5.6.2 Se prmunir contre les injections : le ltrage

5.6.2.a htmlentities Dirents outils de ltrage sont disponibles en PHP. Le plus simple pour la scurit consiste utiliser la mthode htmlentities qui tranforme dans une chane tous les caractres spciaux en leurs entits HTML (code spcial pour acher un caractre en HTML). Il faut cependant prendre garde que si lutilisateur ne rentre pas les caratres en entre avec le mme encodage que celui utilis par PHP en sortie, les caractres spciaux nont pas le mme code et la fonction htmlentities ne fonctionnera pas bien, laissant la porte ouverte des attaques. On peut spcier lencoding de sortie de htmlentities dans son troisime paramtre. Dans lexemple dinjection HTML ajoutant un lien ci-dessus, on obtiendrait lors de lachage :
Figure 5.6: Un gentil formulaire a nest pas trs joli mais cest inoensif sauf si lutilisateur fait vraiment exprs de copier ladresse du lien dans sa barre dadresse.
5.6.3 Expressions rgulires

Les expressions rgulires sont un moyen de vrier dune manire trs gnrale quune chane de caractre a une certaine forme. Lextension PRCE en PHP permet, via des fonctions comme preg_match, de vrier quune chane est conforme une expression rgulire. Un bon tutorial sur la syntaxe et lutilisation des expressions rgulires en PHP se trouve ladresse suivante : http://php.net/manual/en/book.pcre.php Exemples. Par exemple, pour valider un nom ou un prnom entre 1 et 50 caractres alphabtiques franais avec des espaces ou traits dunions, on peut utiliser quelque-chose du genre : 85
Rmy Malgouyres, http ://www.malgouyres.fr/ /^(([a-zA-Z](\-|( )*)){1,50})$/
Programmation Web
Notez que pour que le ltrage puiise servir viter les injections, il ne faut pas omettre le au dbut et le $ la n de lexpression pour que lexpression rgulire reprsente lensemble de linput utilisateur et non pas simplement une sous-chane. Le ltrage avec preg_match se fait alors par un code du genre : exemples/forms3/ex15_reception_regex.php
1 < !DOCTYPE html PUBLIC //W3C//DTDXHTML 1 . 0 S t r i c t //EN h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1 s t r i c t . dtd > 2 <html xmlns= h t t p : / /www. w3 . o r g /1999/ xhtml xml : lang= f r lang= f r > 3 <head> 4 <meta http e q u i v= Content Type content= t e x t / html ; c h a r s e t=UTF8 /> 5 < t i t l e ></ t i t l e > 6 </ head> 7 <body> 8 <?php 9 $ p a t t e r n = / ^ ( ( [ azAZ ] ( \ | ( ) * ) ) { 1 , 5 0 } ) $ / ; 10 i f ( i s s e t ($_POST [ nom ] ) ) { 11 $nbMatches = preg_match ( $ p a t t e r n , $_POST [ nom ] ) ; 12 i f ( $nbMatches && $nbMatches==1){ 13 echo $_POST [ nom ] ; 14 }else{ 15 echo h t m l e n t i t i e s ($_POST [ nom ] , ENT_COMPAT, UTF8 ) . n e s t pas une e x p r e s s i o n v a l i d e pour l e x p r e s s i o n r g u l i r e <br/> . $ p a t t e r n . . ; 16 17 } 18 } 19 ?> 20 </ body> 21 </ html>
Figure 5.7: Rsultat du ltrage dun nom par expression rgulire Pour un numro de tlphone franais sous la forme de 10 chires commenant par 0 et par groupes de deux spars 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 despaces ou de mettre des tires ou des points entre les groupes de chires (exemples : +33-1.02-0304.05) : /^(((\+33(| |\-|\.))|0){1}[0-9]{1}((| |\-|\.)[0-9]{2}){4})$/ 86
5.7 Formulaires dynamiques an javascript

Nous voyons ici un exemple dutilisation du javascript pour crer un formulaire dont les attributs dpendent de la valeur dun premier champ. Lorsquon slectionne deuxime anne, un nouveau champ apparat. Pour cel, on utilise lvennement onchange sur linput de lanne, qui est gr par la fonction anneeChange. On teste alors la valeur de lattribut, puis le cas chant on gnre un nouveau champ dans un div did attributSupplementaire. Pour plus dunformation sur les pages webs dynamiques en javascript, voir le cours correspondant sur www.malgouyres.fr.
exemples/javascript/formulaire_dynamique.html
1 < ! doctype html> 2 <html lang= f r > 3 <head> 4 <meta charset=UTF8 /> 5 < t i t l e >F o r m u l a i r e dynamique</ t i t l e > 6 </ head> 7 <body> 8 <form method= p o s t action= r e c e p t i o n . php> 9 <p> 10 < l a b e l for=nom>Nom</ l a b e l><input name=nom id=nom /> 11 </p> 12 <p> 13 < s e l e c t name= annee id= annee p a t t e r n= ( p r e m i e r e ) | ( 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= p r e m i e r e >Premire anne</ option> 16 <option value= deuxime >Deuxime anne</ option>
87
Programmation Web
17 </ s e l e c t> 18 </p> 19 <div id= a t t r i b u t S u p p l e m e n t a i r e > 20 21 </ div> 22 <p> 23 <input type= submit value=OK /> 24 </p> 25 </ form> 26 < s c r i p t> 27 f u n c t i o n anneeChange ( ) { 28 var p a ra gra p h e = document . getElementById ( a t t r i b u t S u p p l e m e n t a i r e ) ; 29 p a r a g ra p h e . innerHTML=document . getElementById ( annee ) . v a l u e+ anne . ; 30 i f ( document . getElementById ( annee ) . v a l u e == deuxime ) { 31 par a g r aph e . innerHTML+=<l a b e l >O r i e n t a t i o n prvue pour l anne p r o c h a i n e :</ l a b e l > 32 +< s e l e c t 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 +<o p t i o n v a l u e=\ i n g e \ >E c o l e d i n g </o p t i o n > 36 +<option value= b o u l o t >Boulot</ option> 37 +<option value= a u t r e >Autre</ option> 38 +</ s e l e c t> ; 39 40 } 41 } 42 anneeChange ( ) ; 43 </ s c r i p t> 44 </ body> 45 </ html>
exemples/javascript/reception.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 < ! doctype html> <html lang= f r > <head> <meta charset=UTF8 /> < t i t l e >F o r m u l a i r e dynamique</ t i t l e > </ head> <body> <?php $nom= ( i s s e t ($_POST [ nom ] ) ) ? $_POST [ nom ] : nom i n d t e r m i n ; $annee = ( i s s e t ($_POST [ annee ] ) ) ? $_POST [ annee ] : anne i n d t e m i n e ; echo Nom : . $nom . <br/> ; echo Anne : . $annee . <br/> ; i f ( $annee== deuxime ) echo O r i e n t a t i o n : . $_POST [ o r i e n t a t i o n ] ;
?> </ body> </ html>
88
Chapitre 6 Formulaires PHP : MVC, ltrage, exceptions

Nous voyons que la gestion des formulaires en PHP par lapproche nave, o les codes PHP et HTML sont inextricablement mls, devient vite ingrable et quil nest pas envisageable de dvelopper des sites complexes en se basant sur cette technique. Dans lapproche suivante, nous faisons leort de concevoir une fois pour toute des clases PHP bien faites pour nos donnes de base. La manipulation des formulaires sen trouve grandement facilite, avec un gain de temps considrables sur le moyen terme. Lapproche est fonde sur le modle MVC. Le MVC peut tre dvelopp sans classes. Cependant, depuis PHP 5, les design patterns sont beaucoup plus lgament cods avec des classes.
6.1 Le Modle MVC

La comprhension de larchitecture globale du systme de saisie dun formulaire, de ltrage et de renvoi des donnes vers lutilisateur est grandement facilite par lvocation du modle MVC (voir gure 6.1). Dans cette architecture, la vue gre les interactions avec lutilisateur (mise en page, graphisme, saisie des formulaires, etc...). Le contrleur centralise les dcisions et transmets les informations (rcupration des donnes du formulaire dune part, gestion des exceptions dautre part, execution des requtes SQL,...). Enn, le modle reprsente les donnes en mmoire, les met en forme, eectue le ltrage et gnre les exceptions.
6.2 La vue :Formulaire HTML de base

Nous prsentons ici en HTML le formulaire sur lequel nous allons ensuite illustrer notre architecture dapplication. exemples/forms2/ex01_formAdresse.html
1 2 3 4 5 6 7 < ! doctype html> <html lang= f r > <head> <meta charset=UTF8 /> < l i n k r e l = s t y l e s h e e t href= . / myStyle . c s s /> < t i t l e >Mon p r e m i e r f o r m u l a i r e HTML </ t i t l e > </ head>
89
Programmation Web
ecran utilisateur clavier

OS T eP
Vue
affichage style graphique
TM eH cod
me th
od
Controleur
reception des donnees transmission de donnees creation des objets
cree
Modele
donnees de lapplication generation dHTML
Figure 6.1: Les rles respectifs de la vue, du contrleur et du modle dans larchitecture MVC.
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <body> <h1> S a i s i e d une a d r e s s e</ h1> <form method= p o s t action= e x 0 3 _ r e c e p t i o n A d r e s s e . php> <p> < l a b e l f o r= numeroRue >Numro</ l a b e l> <input type= t e x t name= numeroRue id= numeroRue s i z e= 4 /><br /> </p> <p> < l a b e l f o r= r u e >P l a c e /Rue</ l a b e l> <input type= t e x t name= r u e id= numeroRue s i z e = 30 /> </p> <p> < l a b e l f o r= complementAdresse >Complment d a d r e s s e</ l a b e l> <input type= t e x t name= complementAdresse id= complementAdresse s i z e= 30 /> <br /> </p> <p> < l a b e l f o r= c o d e P o s t a l >Code p o s t a l</ l a b e l> <input type= t e x t name= c o d e P o s t a l id= c o d e P o s t a l s i z e= 10 /><br /> </p> <p> < l a b e l f o r= v i l l e > V i l l e</ l a b e l> <input type= t e x t name= v i l l e id= v i l l e s i z e= 10 /><br /> </p> <p> <input type= submit value= Envoyer c l a s s= s a n s L a b e l ></ input> </p> </ form> </ body> </ html>
90
Chapitre 6 : Formulaires PHP : MVC, ltrage, exceptions
6.3 La vue : Classe de routines pour la gnration de formulaires

Pour simplier la gestion des formulaires, au lieu dcrire les formulaires en mlangeant compltement le PHP et le HTML de manire inextricable, nous allons limiter le code HTML quelques mthodes de 4 5 lignes de code dans une classe ddie. Nous utiliserons ensuite cette classe avec une gnration des formulaires beaucoup plus lisible et compacte. Dans la classe FormManager, une mthode gnrique permet de dnir nimporte quelle sorte dinput. Direntes mthodes permettent ensuite de dnit dirents types dinputs plus spciques (texte, radio, submit,...). exemples/forms2/ex02_formManagerClass.php
1 <?php 2 /** 3 @ b r i e f C e t t e c l a s s e s e r t f a c i l i t l a g n r a t i o n de f o r m u l a i r e s H T M L 4 en PHP. E l l e f o u r n i t de mthodes pour g n r e r l e dbut , l a f i n du f o r m u l a i r e , 5 a i n s i que l e s i n p u t s avec l e s o p t i o n s de base . 6 Les o p t i o n s c o m p l m e n t a i r e s d e s i n p u t s peuvent t r e s l e c t i o n n e s 7 v i a une v a r i a b l e $ e x t r a O p t i o n s d e s mthodes ( mais c e s t un peu p l u s complexe ) . 8 */ 9 c l a s s FormManager { 10 /** 11 @ b r i e f g n r e l a b a l i s e form avec s a mthode ( Post ou Get ) e t s o n t action ( url ) 12 */ 13 p u b l i c s t a t i c f u n c t i o n beginForm ( $method , $ a c t i o n , $ e x t r a O p t i o n s= ) { 14 echo <form method=\ . $method . \ a c t i o n =\ . $ a c t i o n . \ . $ e x t r a O p t i o n s . >\
91
Programmation Web
n ; 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 } /** @ b r i e f ferme l e f o r m u l a i r e */ p u b l i c s t a t i c f u n c t i o n endForm ( ) { echo </form> ; } /** mthode g n r i q u e de g n r a t i o n d un input @param $ l a b e l T e x t t e x t e du l a b e l c o r r e s p o n d a n t l input @param $type type d input : t e x t e textarea , chackbox , r a d i o , submit . . . @param $ i d ID de l input pour l a c o r r e s p o n d a n c e l a b e l / input @param $ v a l u e v a l e u r i n i t i a l e du champs de l input @paarm $ e x t r a O p t i o n s c h a i n e de c a r a c t r e s c o n t e n a n t l e s o p t i o n s supplmentaires de l input s u i v a n t l a s y n t a x e H T M L. */ p u b l i c s t a t i c f u n c t i o n addInput ( $ l a b e l T e x t , $type , $name , $id , $ v a l u e=n u l l , $ e x t r a O p t i o n s= ) { $ v a l u e O p t i o n = ( $ v a l u e == n u l l ) ? : v a l u e=\ . $ v a l u e . \ ; i f ( $ e x t r a O p t i o n s == n u l l ) { $ e x t r a O p t i o n s= ; } echo <p>\n ; i f ( $ l a b e l T e x t != n u l l && $ l a b e l T e x t != ) { echo <l a b e l f o r =\ . $ i d . \ > . $ l a b e l T e x t . </ l a b e l >\n ; } echo <i n p u t type=\ . $type . \ name=\ . $name . \ i d=\ . $ i d . \ . $ v a l u e O p t i o n . . $ e x t r a O p t i o n s . />\n ; echo </p>\n ; } /** @ b r i e f mthode s i m p l i f i e pour g n r e r un input de type text */ p u b l i c s t a t i c f u n c t i o n addTextInput ( $ l a b e l T e x t , $name , $id , $ s i z e , $ v a l u e=n u l l , $ e x t r a O p t i o n s= ) { s e l f : : addInput ( $ l a b e l T e x t , t e x t , $name , $id , $v alue , s i z e =\ . $ s i z e . \ . $extraOptions ) ; } /** @ b r i e f mthode s i m p l i f i e pour g n r e r un input de type password */ p u b l i c s t a t i c f u n c t i o n addPasswordInput ( $ l a b e l T e x t , $name , $id , $ s i z e , $ v a l u e= n u l l , $ e x t r a O p t i o n s= ) { s e l f : : addInput ( $ l a b e l T e x t , password , $name , $id , $v alue , s i z e =\ . $ s i z e . \ . $extraOptions ) ; } /** @ b r i e f mthode s i m p l i f i e pour g n r e r un input de type r a d i o */
92
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
p u b l i c s t a t i c f u n c t i o n addRadioInput ( $ l a b e l T e x t , $name , $id , $checked , $ v a l u e= n u l l , $ e x t r a O p t i o n s= ) { s e l f : : addInput ( $ l a b e l T e x t , r a d i o , $name , $id , $v alue , ( strcmp ( $checked , checked ) ==0)? checked =\ checked \ : . $ e x t r a O p t i o n s ) ; }
/** @ b r i e f mthode s i m p l i f i e pour g n r e r un input de type r a d i o */ p u b l i c s t a t i c f u n c t i o n addCheckboxInput ( $ l a b e l T e x t , $name , $id , $checked , $ v a l u e=n u l l , $ e x t r a O p t i o n s= ) { s e l f : : addInput ( $ l a b e l T e x t , checkbox , $name , $id , $v alue , ( strcmp ( $checked , checked ) ==0)? checked =\ checked \ : . $ e x t r a O p t i o n s ) ; } /** @ b r i e f mthode s i m p l i f i e pour g n r e r un input de type r a d i o */ p u b l i c s t a t i c f u n c t i o n addHiddenInput ( $name , $id , $ valu e , $ e x t r a O p t i o n s= ) { s e l f : : addInput ( , hidden , $name , $id , ( string ) ( $ v a l u e ) , $ e x t r a O p t i o n s ) ; } /** @ b r i e f mthode s i m p l i f i e pour g n r e r un input de type textarea */ p u b l i c s t a t i c f u n c t i o n addTextAreaInput ( $ l a b e l T e x t , $name , $id , $rows , $ c o l s , $ v a l u e=n u l l , $ e x t r a O p t i o n s= ) { $ v a l u e O p t i o n = ( $ v a l u e == n u l l ) ? : $ v a l u e ; i f ( $ e x t r a O p t i o n s == n u l l ) { $ e x t r a O p t i o n s= ; } echo <p>\n ; i f ( $ l a b e l T e x t != n u l l && $ l a b e l T e x t != ) { echo <l a b e l f o r =\ . $ i d . \ > . $ l a b e l T e x t . </ l a b e l >\n ; } echo <t e x t a r e a name=\ . $name . \ i d=\ . $ i d . \ rows=\ . $rows . \ c o l s =\ . $ c o l s . \ . $ e x t r a O p t i o n s . > . $ v a l u e O p t i o n . </ t e x t a r e a >\n ; echo </p>\n ; } /** @ b r i e f mthode s i m p l i f i e pour g n r e r un input de type f i l e ( upload ) */ p u b l i c s t a t i c f u n c t i o n addUploadInput ( $ l a b e l T e x t , $name , $id , $ s i z e , $ v a l u e= , $ e x t r a O p t i o n s= ) { $ v a l u e O p t i o n = ( $ v a l u e == n u l l ) ? v a l u e=\ \ : v a l u e=\ . $ v a l u e . \ ; i f ( $ e x t r a O p t i o n s == n u l l ) { $ e x t r a O p t i o n s= ; } s e l f : : addInput ( $ l a b e l T e x t , f i l e , $name , $id , $v alue , s i z e =\ . $ s i z e . \ . $valueOption . . $extraOptions ) ; } /** @ b r i e f mthode pour commencer un s e l e c t
93
Programmation Web
111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
*/ p u b l i c s t a t i c f u n c t i o n b e g i n S e l e c t ( $ l a b e l T e x t , $name , $id , $ m u l t i p l e=f a l s e , $ s i z e =5) { i f ( $multiple ) $ m u l t i p l e O p t i o n= m u l t i p l e =\ multiple \ s i z e =\ . $ s i z e . \ ; else $ m u l t i p l e O p t i o n= ; i f ( $ l a b e l T e x t != n u l l && $ l a b e l T e x t != ) { echo <p><l a b e l f o r =\ . $ i d . \ > . $ l a b e l T e x t . </ l a b e l >\n ; } echo < s e l e c t name=\ . $name . \ i d=\ . $ i d . \ . $ m u l t i p l e O p t i o n . >\n ; } /** @ b r i e f mthode s i m p l i f i e pour t e r m i n e r un s e l e c t */ public s t a t i c function endSelect () { echo </ s e l e c t ></p>\n ; } /** @ b r i e f mthode s i m p l i f i e pour a j o u t e r une option de s e l e c t */ p u b l i c s t a t i c f u n c t i o n a d d S e l e c t O p t i o n ( $value , $ d i s p l a y T e x t , $ s e l e c t e d=f a l s e ) { i f ( $selected ) $ s e l e c t e d O p t i o n= s e l e c t e d =\ selected \ ; else $ s e l e c t e d O p t i o n= ; echo <o p t i o n v a l u e=\ . $ v a l u e . \ . $ s e l e c t e d O p t i o n . > . $ d i s p l a y T e x t . </ o p t i o n >\n ; } /** @ b r i e f mthode s i m p l i f i e pour g n r e r un bouton submit */ p u b l i c s t a t i c f u n c t i o n addSubmitButton ( $ v a l u e= Envoyer , $ e x t r a O p t i o n s= ) { s e l f : : addInput ( n u l l , submit , , , $v alue , . $ e x t r a O p t i o n s ) ; } } ?>
La gnration de notre formulaire devient alors plus compacte et ne fait plus apparatre dHTML (le code HTML est conn dans quelques mthodes bien dlimites) : exemples/forms2/ex04_formAdresse.php
1 <?php 2 i n c l u d e _ o n c e . / commonFunctions . php ; 3 i n c l u d e _ o n c e . / ex02_formManagerClass . php ; 4 ?> 5 <h1> S a i s i e d une a d r e s s e</ h1> 6 <?php 7 outputEnTeteHTML5 ( S a i s i e d \ une a d r e s s e , UTF 8 , myStyle . c s s ) ; 8 9 FormManager : : beginForm ( p o s t , e x 0 3 _ r e c e p t i o n A d r e s s e . php ) ; 10 FormManager : : addTextInput ( Numro , numeroRue , numeroRue , 4 ) ; 11 FormManager : : addTextInput ( Rue/ p l a c e , r u e , r u e , 30 ) ;
94
12
13 14 15 16 17 18 19 outputFinFichierHTML5 ( ) ; 20 ?> 21 </ body> 22 </ html>
FormManager : : addTextInput ( Complmentd a d r e s s e , complementAdresse , complementAdresse , 30 ) ; FormManager : : addTextInput ( Code p o s t a l , c o d e P o s t a l , c o d e P o s t a l , 10 ) ; FormManager : : addTextInput ( V i l l e , v i l l e , v i l l e , 20 ) ; FormManager : : addTextInput ( Pays , pays , pays , 15 ) ; FormManager : : addSubmitButton ( OK , c l a s s =\ s a n s L a b e l \ ) ; FormManager : : endForm ( ) ;
6.4 Le contrleur : Rception et achage basique des donnes
exemples/forms2/ex03_receptionAdresse.php
1 2 <?php 3 i n c l u d e _ o n c e ( . / commonFunctions . php ) ; 4 i n c l u d e _ o n c e ( . / commonFunctions . php ) ; 5 ?> 6 <?php 7 outputEnTeteHTML5 ( R c e p t i o n d \ un f o r m u l a i r e , UTF 8 , myStyle . c s s ) ; 8 ?>
95
Programmation Web
9 <?php 10 $numeroRue= ; 11 i f ( i s s e t ($_POST [ numeroRue ] ) ) { 12 $numeroRue = h t m l e n t i t i e s ($_POST [ numeroRue ] , ENT_QUOTES, UTF 8 ) ; 13 } 14 $ r u e= ; 15 i f ( i s s e t ($_POST [ rue ] ) ) { 16 $ r u e = h t m l e n t i t i e s ($_POST [ rue ] , ENT_QUOTES, UTF 8 ) ; 17 } 18 19 $complementAdresse= ; 20 i f ( i s s e t ($_POST [ complementAdresse ] ) ) { 21 $complementAdresse = h t m l e n t i t i e s ($_POST [ complementAdresse ] , ENT_QUOTES, UTF 8 ) ; 22 } 23 $ c o d e P o s t a l= ; 24 i f ( i s s e t ($_POST [ c o d e P o s t a l ] ) ) { 25 $ c o d e P o s t a l = h t m l e n t i t i e s ($_POST [ c o d e P o s t a l ] , 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 t m 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 t m l e n t i t i e s ($_POST [ pays ] , ENT_QUOTES, UTF 8 ) ; 34 } 35 36 echo <h1>Donnes r e u e s </h1>\n ; 37 echo <p>\n ; 38 echo numro : . $numeroRue . <br/>\n ; 39 echo r u e : . $ r u e . <br/>\n ; 40 echo Complmentd a d r e s s e : . $complementAdresse . <br/>\n ; 41 echo Code P o s t a l : . $ c o d e P o s t a l . <br/>\n ; 42 echo V i l l e : . $ v i l l e . <br/>\n ; 43 echo Pays : . $pays . <br/>\n ; 44 45 echo </p>\n ; 46 ?> 47 48 <?php 49 outputFinFichierHTML5 ( ) ; 50 ?>
6.5 Le MVC : Filtrage des avec une classe et exceptions

La gure 6.2 schmatise lexpression de larchitecture MVC dans notre implmentation. 6.5.0.a La vue exemples/forms2/ex06_formClasseAdresse.php
1 <?php 2 include_once . / commonFunctions . php ;
96

ecran utilisateur clavier
eP OS T
Vue
entete HTML
rm Fo ere gen e de ich aff tho de me tho me
me th
Controleur
reception des donnees
od
methode getAdresseFromForm exceptions
Modele
classe adresse
Figure 6.2: Implmentation de larchitecture MVC pour le formulaire de la classe adresse.
3 i n c l u d e _ o n c e . / ex02_formManagerClass . php ; 4 ?> 5 <h1> S a i s i e d une a d r e s s e</ h1> 6 <?php 7 outputEnTeteHTML5 ( S a i s i e d \ une a d r e s s e , UTF 8 , myStyle . c s s ) ; 8 9 FormManager : : beginForm ( p o s t , e x 0 5 _ r e c e p t i o n C l a s s e A d r e s s e . php ) ; 10 FormManager : : addTextInput ( Numro , numeroRue , numeroRue , 4 ) ; 11 FormManager : : addTextInput ( Rue/ p l a c e , r u e , r u e , 30 ) ; 12 FormManager : : addTextInput ( Complmentd a d r e s s e , complementAdresse , complementAdresse , 30 ) ; 13 FormManager : : addTextInput ( Code p o s t a l , c o d e P o s t a l , c o d e P o s t a 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 =\ s a n s L a b e l \ ) ; 17 FormManager : : endForm ( ) ; 18 19 outputFinFichierHTML5 ( ) ;
97
Programmation Web
20 ?> 21 </ body> 22 </ html>
6.5.1 Le Contrleur
Le contrleur rceptionne les donnes du formulaires, demande au modle la cration dun objet de classe Adresse laide de la mthode getAdresseFromForm, puis teste sil y a des exceptions. Sil ny a aucune exception, le contrleur ache simplement ladresse. (dans une vritable application, on aurait probablement une injection dans une table de base de donnes). Sil y a des exceptions, le contrleur demande au modle de gnrer un nouveau formulaire prrempli avec les valeurs prcdement saisies, et en achant les exceptions. (laction de la balise <form> tant lURL du contrleur lui-mme.)
exemples/forms2/ex05_receptionClasseAdresse.php
1 2 <?php 3 i n c l u d e ( . / commonFunctions . php ) ; 4 i n c l u d e ( . / c l a s s e s / c l a s s e A d r e s s e . php ) ; 5 ?> 6 <?php 7 outputEnTeteHTML5 ( R c e p t i o n d \ un f o r m u l a i r e , UTF 8 , myStyle . c s s ) ; 8 ?> 9 <?php 10 $numeroRue= ; 11 i f ( i s s e t ($_POST [ numeroRue ] ) ) { 12 $numeroRue = h t m l e n t i t i e s ($_POST [ numeroRue ] , ENT_QUOTES, UTF 8 ) ;
98
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
} $ r u e= ; i f ( i s s e t ($_POST [ rue ] ) ) { $ r u e = h t m l e n t i t i e s ($_POST [ rue ] , ENT_QUOTES, UTF 8 ) ; } $complementAdresse= ; i f ( i s s e t ($_POST [ complementAdresse ] ) ) { $complementAdresse = h t m l e n t i t i e s ($_POST [ complementAdresse ] , ENT_QUOTES, UTF 8 ) ; } $ c o d e P o s t a l= ; i f ( i s s e t ($_POST [ c o d e P o s t a l ] ) ) { $ c o d e P o s t a l = h t m l e n t i t i e s ($_POST [ c o d e P o s t a l ] , ENT_QUOTES, UTF 8 ) ; } $ v i l l e= ; i f ( i s s e t ($_POST [ v i l l e ] ) ) { $ v i l l e = h t m l e n t i t i e s ($_POST [ v i l l e ] , ENT_QUOTES, UTF 8 ) ; } $pays= France ; i f ( i s s e t ($_POST [ pays ] ) && $_POST [ pays ] != ) { $pays = h t m l e n t i t i e s ($_POST [ pays ] , ENT_QUOTES, UTF 8 ) ; } $ m e s s a g e s E x c e p t i o n s= ; $ a d r e s s e = A d r e s s e : : getAdresseFromForm ( $ m e s s a g e s E x c e p t i o n s , $numeroRue , $rue , $complementAdresse , $ c o d e P o s t a l , $ v i l l e , $pays ) ;
39 40 41 i f ( empty ( $ m e s s a g e s E x c e p t i o n s ) ) { 42 $adresse >a f f i c h e () ; 43 }else{ 44 $ c u r r e n t _ f i l e _ n a m e = basename ($_SERVER[ REQUEST_URI ] , . php ) ; 45 $ a d r e s s e >generateForm ( p o s t , $current _f ile _n ame , $ m e s s a g e s E x c e p t i o n s ) ; 46 } 47 48 ?> 49 50 <?php 51 outputFinFichierHTML5 ( ) ; 52 ?>
6.5.2 Le Modle
Le Modle est implment par la classe Adresse. Voir les explication sur les direntes mthodes dans les commentaires (documentation Doxygen). exemples/forms2/classes/classeAdresse.php
1 <?php 2 i n c l u d e _ o n c e . / ex02_formManagerClass . php ; 3 ?> 4 <?php 5 /** 6 @ b r i e f La c l a s s e a d r e s s e c o n t i e n t l a d r e s s e d une p e r s o n n e
99
Programmation Web
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
( q u i peut t r e un c l i e n t , un employ , un f o u r n i s s e u r , e t c . . . ) */ class Adresse { /** Numro dans l a rue , ne d o i t pas t r e n u l l mais peut t r e v i d e */ p r i v a t e $numeroRue ; /** Nom de l a rue , ne d o i t pas t r e n u l l mais peut t r e v i d e */ p r i v a t e $rue ; /** Complment ( l i e u d i t , e t c . ne d o i t pas t r e n u l l mais peut t r e v i d e */ p r i v a t e $complementAddr ; /** code p o s t a l */ private $codePostal ; /** nom de l a v i l l e . ne d o i t pas t r e n u l l mais peut t r e v i d e */ private $ v i l l e ; /** nom du pays . ne d o i t pas t r e n u l l mais peut t r e v i d e */ p r i v a t e $pays ; /** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e numro dans l a r u e . */ p u b l i c f u n c t i o n getNumeroRue ( ) { r e t u r n $ t h i s > numeroRue ; } /** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e nom l a r u e . */ p u b l i c f u n c t i o n getRue ( ) { r e t u r n $ t h i s > r u e ; } /** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e nom l e complment d a d r e s s e . */ p u b l i c f u n c t i o n getComplementAddr ( ) { r e t u r n $ t h i s > complementAddr ; } /** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e nom l e code p o s t a l . */ public function getCodePostal ( ) { r e t u r n $ t h i s > c o d e P o s t a l ; } /** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e nom l a v i l l e . */ public function getVille () { r e t u r n $ t h i s > v i l l e ; } /** @ b r i e f : A c c e s s e u r : permet d o b t e n i r l e pays . */ p u b l i c f u n c t i o n getPays ( ) { r e t u r n $ t h i s > pays ; } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e nom de l a r u e . @param $numeroRue l e numro u t i l i s e r . peut t r e n u l l . */ p u b l i c f u n c t i o n setNumeroRue ( $numeroRue ) { i f ( $numeroRue != n u l l && s t r l e n ( $numeroRue ) > 50 | | ! preg_match ( / ^ ( ( ( [ azA Z\\ \.\ ,0 9\ ] ) |(& quot ; ) ) |(') ) { 0 , 2 0 } $ / , $numeroRue ) ) throw new E x c e p t i o n ( Erreur , l e numro de l a r u e d o i t comporter au p l u s 20 c a r a c t r e s ( a l p h a b t i q u e s , c h i f f r e s ou p o n c t u a t i o n ) ) ; $ t h i s > numeroRue = ( $numeroRue == n u l l ) ? : $numeroRue ;
58 59
100
60 61 62 63 64 65 66 67
} /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e numro dans l a r u e . @param $Rue l e nom de l a r u e ou de l a p l a c e u t i l i s e r . peut t r e n u l l . */ p u b l i c f u n c t i o n setRue ( $ r u e ) { i f ( $ r u e == n u l l | | ! i s _ s t r i n g ( $ r u e ) | | ! preg_match ( / ^ ( ( ( [ azA Z\\ \.\ ,0 9\ ] ) |(& quot ; ) ) |(') ) { 2 , 3 0 0 } $ / , $ r u e ) ) { throw new E x c e p t i o n ( Erreur , l a r u e / p l a c e / l i e u d i t d o i t comporter au moins 2 c a r a c t r e s e t au p l u s 300 c a r a c t r e s ( a l p h a b t i q u e s , c h i f f r e s ou ponctuation ) . ) ; } else { $ t h i s > r u e = $ r u e ; } } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e complment d a d r e s s e . @param $ComplementAddr l e complment d a d r e s s e u t i l i s e r . peut t r e n u l l . */ p u b l i c f u n c t i o n setComplementAddr ( $complementAddr ) { i f ( $complementAddr != n u l l && s t r l e n ( $complementAddr ) > 50 | | ! preg_match ( / ^ ( ( ( [ azAZ09\\ \.\ ,0 9\ ] ) |(& quot ; ) ) |(') ) { 0 , 3 0 0 } $/ , $complementAddr ) ) throw new E x c e p t i o n ( Erreur , l e complment d a d r e s s e d o i t comporter au p l u s 300 c a r a c t r e s ( a l p h a b t i q u e s , c h i f f r e s ou p o n c t u a t i o n ) ) ) ; $ t h i s > complementAddr = ( $complementAddr == n u l l ) ? : $complementAddr ; } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e code p o s t a l . @param $CodePostal l e numro u t i l i s e r . peut t r e n u l l */ public function setCodePostal ( $codePostal ) { i f ( $ c o d e P o s t a l == n u l l | | ! i s _ s t r i n g ( $ c o d e P o s t a l ) | | ! preg_match ( /^[0 9]{5} $/ , $ c o d e P o s t a l ) ) { throw new E x c e p t i o n ( Erreur , l e code p o s t a l n e s t pas v a l i d e . ( code p o s t a l f r a n a i s s a n s cedex n i B . P . ) ) ; } else { $ t h i s > c o d e P o s t a l = $ c o d e P o s t a l ; } } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e nom de l a v i l l e . @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 n u l l */ public function setVille ( $ v i l l e ) { i f ( $ v i l l e == n u 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) { throw new E x c e p t i o n ( Erreur , l e nom de l a v i l l e d o i t comporter au moins 2 e t au p l u s 50 c a r a c t r e s . ) ; } else { $ t h i s > v i l l e = $ v i l l e ; } } /** s e t t e r : permet d i n i t i a l i s e r ou de m o d i f i e r l e nom du pays . @param $Pays l e nom de pays u t i l i s e r . peut t r e n u l l
68 69 70 71 72 73 74 75 76 77
78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
101
Programmation Web
106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156
*/ p u b l i c f u n c t i o n s e t P a y s ( $pays ) { i f ( $pays == n u l l | | ! preg_match ( / ^ ( ( ( [ azAZ\ \ \ . \ , 0 9 ] ) |(& quot ; ) ) |(') ) { 5 , 3 0 0 } $/ , $pays ) ) { throw new E x c e p t i o n ( Erreur , l e nomdu pays d o i t comporter au p l u s 300 c a r a c t r e s ( a l p h a b t i q u e s , c h i f f r e s ou p o n c t u a t i o n ) ) ; } else $ t h i s > pays = ( $pays == n u l l ) ? France : $pays ; } /** @brief 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 paramtres . Les p a r a m t r e s c o r r e s p o n d e n t aux v a l e u r s m e t t r e dans l e s a t t r i b u t s . Tout o b j e t d o i t t r e i n i t i a l i s avec l e c o n s t r u c t e u r ( a p p e l new ) . Des e x c e p t i o n s s o n t r e j e t e s en c a s de paramtre i n v a l i d e . */ p u b l i c f u n c t i o n __construct ( $numeroRue , $rue , $complementAddr = n u l l , $ c o d e P o s t a l , $ v i l l e , $pays = France ) { $ t h i s > setNumeroRue ( $numeroRue ) ; $ t h i s > setRue ( $ r u e ) ; $ t h i s > setComplementAddr ( $complementAddr ) ; $ t h i s > s e t C o d e P o s t a l ( $ c o d e P o s t a l ) ; $ t h i s > s e t V i l l e ( $ v i l l e ) ; $ t h i s > s e t P a y s ( $pays ) ; } /** @ b r i e f i n i t t i a l i s a t i o n par d f a u t : i n i t i a l i s e l e s a t t r i b u t s c h a n e v i d e . */ public function defaultInit () { $ t h i s > numeroRue = ; $ t h i s > r u e = ; $ t h i s > complementAddr = ; $ t h i s > c o d e P o s t a l = ; $ t h i s > v i l l e = ; $ t h i s > pays = ; } /** @ b r i e f c o n s t r u c t i o n d une a d r e s s e v i d e : i n i t i a l i s e l e s a t t r i b u t s c h a n e vide . C e t t e mthode permet de c r e r une a d r e s s e v i d e dans g n r e r d e x c e p t i o n s . E l l e permet de c r e r un o b j e t en c o n t o u r n a n t l e c o n s t r u c t e u r . */ p u b l i c s t a t i c f u n c t i o n getEmptyAdresse ( ) { $adr = new A d r e s s e ( 10 , A l l e d e s t i l l e u l s , l e bourg , 63450 , La Compte , France ) ; $adr > d e f a u l t I n i t ( ) ; r e t u r n $adr ; } /** @ b r i e f Obtension d un o b j e t de c l a s s e A d r e s s e p a r t i r d e s donnes s a i s i e s dans un f o r m u l a i r e . C e t t e mthode prend l e s mmes p a r a m t r e s que l e c o n s t r u c t e u r
102
157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209
p l u s un paramtre p a s s par r f r e n c e q u i r e t o u r n e l e s me s sa g es d e x c e p t i o n . 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 d e s paramtre . Pour chaque a t t r i b u t e de l a c l a s s e , s i une e x c e p t i o n e s t g n r e au n i v e a u du s e t t e r , l e message d e x c e p t i o n e s t c o n c a t n dans l a v a r i a b l e m e s s a g e s E x c e p t i o n s . Ces m e ss a g es d e x c e p t i o n s o n t a i n s i r e n v o y s au c o n t r l e u r . */ p u b l i c s t a t i c f u n c t i o n getAdresseFromForm(& $ m e s s a g e s E x c e p t i o n s , $numeroRue = null , $rue = null , $complementAddr = n u l l , $ c o d e P o s t a l = n u l l , $ v i l l e = n u l l , $pays = France ) { $adr = s e l f : : getEmptyAdresse ( ) ; try { $adr > setNumeroRue ( $numeroRue ) ; } c a t c h ( E x c e p t i o n $e ) { $ m e s s a g e s E x c e p t i o n s .= $e > getMessage ( ) . } try { $adr > setRue ( $ r u e ) ; } c a t c h ( E x c e p t i o n $e ) { $ m e s s a g e s E x c e p t i o n s .= $e > getMessage ( ) . } try { $adr > setComplementAddr ( $complementAddr ) ; } c a t c h ( E x c e p t i o n $e ) { $ m e s s a g e s E x c e p t i o n s .= $e > getMessage ( ) . } try { $adr > s e t C o d e P o s t a l ( $ c o d e P o s t a l ) ; } c a t c h ( E x c e p t i o n $e ) { $ m e s s a g e s E x c e p t i o n s .= $e > getMessage ( ) . } try { $adr > s e t V i l l e ( $ v i l l e ) ; } c a t c h ( E x c e p t i o n $e ) { $ m e s s a g e s E x c e p t i o n s .= $e > getMessage ( ) . } try { $adr > s e t P a y s ( $pays ) ; } c a t c h ( E x c e p t i o n $e ) { $ m e s s a g e s E x c e p t i o n s .= $e > getMessage ( ) . } r e t u r n $adr ; } /** @ b r i e f mthode de g n r a t i o n d un f o r m u l a i r e de s a i s i e d une a d r e s s e , l e s a t t r i b u t s du f o r m u l a i r e t a n t i n i t i a l i s s avec l e s v a l e u r s d e s a t t r i b u t s de l o b j e t de c l a s s e A d r e s s e . La mthode a f f i c h e a u s s i l e s m e ssa ge s d e x c e p t i o n p a s s s en paramtre pour que l u t i l i s a t e u r p u i s s e v o i r s i l d o i t m o d i f i e r s a s a i s i e . */ p u b l i c f u n c t i o n generateForm ( $method , $ a c t i o n , $ m e s s a g e s E x c e p t i o n s ) { echo <span s t y l e =\ c o l o r : r e d ; f o n t s i z e : 1 2 0 % ; \ > . $ m e s s a g e s E x c e p t i o n s . </span >\n ;
<br/>\n ;
<br/>\n ;
<br/>\n ;
<br/>\n ;
<br/>\n ;
<br/>\n ;
103
Programmation Web
210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 } 246 ?>
FormManager : : beginForm ( $method , $ a c t i o n ) ; FormManager : : addTextInput ( Numro , numeroRue , numeroRue , 4 , $ t h i s > numeroRue ) ; FormManager : : addTextInput ( Rue/ p l a c e , r u e , r u e , 30 , $ t h i s > r u e ) ; FormManager : : addTextInput ( Complmentd a d r e s s e , complementAdresse , complementAdresse , 30 , $ t h i s > complementAddr ) ; FormManager : : addTextInput ( Code p o s t a l , c o d e P o s t a l , c o d e P o s t a l , 10 , $ t h i s > c o d e P o s t a l ) ; 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 ) ; FormManager : : addTextInput ( Pays , pays , pays , 15 , $ t h i s > pays ) ; FormManager : : addSubmitButton ( OK , c l a s s =\ s a n s L a b e l \ ) ; FormManager : : endForm ( ) ; } /** @ b r i e f Mthode d a f f i c h a g e . Permet d a f f i c h e r une a d r e s s e en XHTML 1 . 0 s t r i c t . Les a t t r i b u t s d o i v e n t t r e non n u l l . ( mais normalement a ne r i s q u e pas d arriver c a r l e s a t t r i b u t s s o n t 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 n u l l . Les s e t t e r s e t l e c o n s t r u c t e u r e s t a i n s i conu que l e s a t t r i b u t s ne peuvent pas t r e n u l l . */ public function affiche () { echo <s t r o n g >A d r e s s e : </s t r o n g ><br/>\n ; echo $ t h i s > numeroRue ; i f ( s t r l e n ( $ t h i s > numeroRue ) >= 1 ) echo , ; echo $ t h i s > r u e ; i f ( s t r l e n ( $ t h i s > r u e ) >= 1 ) echo <br/> ; echo $ t h i s > complementAddr ; i f ( s t r l e n ( $ t h i s > complementAddr ) >= 1 ) echo <br/> ; echo $ t h i s > c o d e P o s t a l . ; echo $ t h i s > v i l l e ; i f ( s t r l e n ( $ t h i s > v i l l e ) >= 2 ) echo <br/> ; echo $ t h i s > pays . <br/> ; }
104
Chapitre 7 Bases de donnes : PHP /Mysql

7.1 Crer la structure dune base de donnes dans phpmyadmin
7.1.1 Cration dune base de donnes
7.1.2 Cration dune table
105
Programmation Web
7.1.3 Gestion des relations
106
Chapitre 7 : Bases de donnes : PHP /Mysql
7.1.4 Schma de conception
7.2 Programmation PHP-Mysql

7.2.1 Saisie et enregistrement dun formulaire
exemples/phpMysql1/ex00_formClasseAdresse.php
1 <?php 2 i n c l u d e _ o n c e . / commonFunctions . php ; 3 i n c l u d e _ o n c e . / formManagerClass . php ; 4 i n c l u d e _ o n c e c l a s s e s / c l a s s e A d r e s s e . php ; 5 ?> 6 <?php 7 outputEnTeteXHTML ( S a i s i e d \ une a d r e s s e , UTF 8 , myStyle . c s s ) ; 8 echo <h1>S a i s i e d une a d r e s s e </h1> ; 9 $ a d r e s s e = A d r e s s e : : getEmptyAdresse ( ) ; 10 $adresse >generateForm ( p o s t , . / ex01_ecritureBD_naive . php , ) ; 11 12 outputFinFichierHTML5 ( ) ; 13 ?>
107
Programmation Web
Linsertion dans la base de donnes se fait par une requte INSERT
exemples/phpMysql1/ex01_ecritureBD_naive.php
1 2 <?php 3 i n c l u d e ( . / commonFunctions . php ) ; 4 ?> 5 <?php 6 outputEnTeteHTML5 ( A f f i c h a g e d \ une table , UTF 8 , myStyle . c s s ) ; 7 ?> 8 <?php 9 $numeroRue= ; 10 i f ( i s s e t ($_POST [ numeroRue ] ) ) { 11 $numeroRue = $_POST [ numeroRue ] ; 12 } 13 $ r u e= ; 14 i f ( i s s e t ($_POST [ rue ] ) ) { 15 $ r u e = $_POST [ rue ] ; 16 } 17 18 $complementAdresse= ;
108
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
i f ( i s s e t ($_POST [ complementAdresse ] ) ) { $complementAdresse = $_POST [ complementAdresse ] ; } $ c o d e P o s t a l= ; i f ( i s s e t ($_POST [ c o d e P o s t a l ] ) ) { $ c o d e P o s t a l = $_POST [ c o d e P o s t a l ] ; } $ v i l l e= ; i f ( i s s e t ($_POST [ v i l l e ] ) ) { $ v i l l e = $_POST [ v i l l e ] ; } $pays= ; i f ( i s s e t ($_POST [ pays ] ) ) { $pays = $_POST [ pays ] ; } // On s e c o n n e c t e au s e r v e u r de b a s e s de donnes . // Adapter l e nom d h o t e o s e t r o u v e l e s e r v e u r mysql $lienBD = m y s q l i _ i n i t ( ) ; m y s q l i _ r e a l _ c o n n e c t ( $lienBD , www. remysprogwebtuto . org , remy , my_password , ExampleDataBase ) o r d i e ( I m p o s s i b l e de s e c o n n e c t e r mysql ( base de donne ExampleDataBase ) : . mysql_error ( ) ) ; echo Connect au s e r v e u r de b a s e s de donnes mysql . ; // R c u p r a t i o n de t o u t e s l e s a d r e s s e s ( r e q u t e SQL) : $ r e q u e t e = INSERT INTO A d r e s s e ( numeroRue , rue , complementAdresse , c o d e P o s t a l , . v i l l e , pays ) VALUES ( . . $numeroRue . , . $ r u e . , . $complementAdresse . , . . $ c o d e P o s t a l . , . $ v i l l e . , . $pays . ) ; $ r e s u l t = mysqli_query ( $lienBD , $ r e q u e t e ) o r d i e ( Query f a i l e d : . mysql_error ( ) ) ;
48 49 // On ferme l a c o n n e c t i o n 50 m y s q l i _ c l o s e ( $lienBD ) ; 51 ?> 52 <p> 53 <a href= . / ex02_affichageTableBD_naive . php >A f f i c h e r l e contenu</ a> de l a t a b l e <code>A d r e s s e</ code> . 54 </p> 55 <?php 56 outputFinFichierHTML5 ( ) ; 57 ?>
7.2.2 Achage des donnes dune table

exemples/phpMysql1/ex02_achageTableBD_naive.php
1 2 <?php 3 i n c l u d e ( . / commonFunctions . php ) ; 4 ?> 5 <?php
109
Programmation Web
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
outputEnTeteHTML5 ( A f f i c h a g e du contenu d \ une table 1 , UTF 8 , myStyle . c s s ) ; ?> <h1>R c u p r a t i o n d e s r s u l t a t s d une r e q u t e :<br /> t a b l e a u x numrique</ h1> <?php // On s e c o n n e c t e au s e r v e u r de b a s e s de donnes . // Adapter l e nom d h o t e o s e t r o u v e l e s e r v e u r mysql $lienBD = m y s q l i _ i n i t ( ) ; m y s q l i _ r e a l _ c o n n e c t ( $lienBD , l o c a l h o s t , remy , my_password , ExampleDataBase ) o r d i e ( I m p o s s i b l e de s e c o n n e c t e r mysql ( base de donne ExampleDataBase ) : . mysql_error ( ) ) ; echo Connect au s e r v e u r de b a s e s de donnes mysql . ; // R c u p r a t i o n de t o u t e s l e s a d r e s s e s ( r e q u t e SQL) : $ r e q u e t e = SELECT * FROM Adresse ; $ r e s u l t = mysqli_query ( $lienBD , $ r e q u e t e ) o r d i e ( Query f a i l e d : . mysql_error ( ) ) ; // A f f i c h a g e d e s r s u l t a t s echo <t a b l e >\n ; // en t t e de l a table : echo \ t<t r >\n ; echo \ t \ t<th>ID</th >\n ; echo \ t \ t<th>No</th >\n ; echo \ t \ t<th>Rue</th >\n ; echo \ t \ t<th>Complment</th >\n ; echo \ t \ t<th>Code P o s t a l </th >\n ; echo \ t \ t<th>V i l l e </th >\n ; echo \ t \ t<th>Pays</th >\n ; echo \ t </t r >\n ; // R c u p r a t i o n de chaque l i g n e du r s u l t a t de l a r e q u t e // avec d e s i n d i c e s numriques w h i l e ( $ l i g n e R e s R e q = m y s q l i _ f e t c h _ a r r a y ( $ r e s u l t , MYSQL_NUM) ) { echo \ t<t r >\n ;
110
37 // a f f i c h a g e de l a l i g n e 38 fo r ( $ i =0 ; $ i <s i z e o f ( $ l i g n e R e s R e q ) ; $ i ++){ 39 echo <td> . $ l i g n e R e s R e q [ $ i ] . </td> ; 40 } 41 echo \ t </t r >\n ; 42 } 43 echo </t a b l e >\n ; 44 45 // L i b r a t i o n d e s r s u l t a t s en mmoire 46 mysqli_free_result ( $result ) ; 47 48 // f e r m e t u r e de l a c o n n e c t i o n 49 m y s q l i _ c l o s e ( $lienBD ) ; 50 ?> 51 52 <?php 53 outputFinFichierHTML5 ( ) ; 54 ?>
exemples/phpMysql1/ex03_achageTableAssocBD_naive.php
1 2 <?php 3 i n c l u d e ( . / commonFunctions . php ) ; 4 ?> 5 <h1>R c u p r a t i o n d e s r s u l t a t s d une r e q u t e :<br />t a b l e a u x a s s o c i a t i f</ h1> 6 <?php 7 outputEnTeteHTML5 ( A f f i c h a g e du contenu d \ une table 1 , UTF 8 , myStyle . c s s ) ; 8 ?> 9 <?php 10 // On s e c o n n e c t e au s e r v e u r de b a s e s de donnes . 11 // Adapter l e nom d h o t e o s e t r o u v e l e s e r v e u r mysql 12 $lienBD = m y s q l i _ i n i t ( ) ;
111
Programmation Web
13 14 15 16 17 18 19
m y s q l i _ r e a l _ c o n n e c t ( $lienBD , www. remysprogwebtuto . org , remy , my_password , ExampleDataBase ) o r d i e ( I m p o s s i b l e de s e c o n n e c t e r mysql ( base de donne ExampleDataBase ) : . mysql_error ( ) ) ; echo Connect au s e r v e u r de b a s e s de donnes mysql . ; // R c u p r a t i o n de t o u t e s l e s a d r e s s e s ( r e q u t e SQL) : $ r e q u e t e = SELECT * FROM Adresse ; $ r e s u l t = mysqli_query ( $lienBD , $ r e q u e t e ) o r d i e ( Query f a i l e d : . mysql_error ( ) ) ;
20 21 // A f f i c h a g e d e s r s u l t a t s 22 echo <t a b l e >\n ; 23 // en t t e de l a table : 24 echo \ t<t r >\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>Complment</th >\n ; 29 echo \ t \ t<th>Code P o s t a l </th >\n ; 30 echo \ t \ t<th>V i l l e </th >\n ; 31 echo \ t \ t<th>Pays</th >\n ; 32 echo \ t </t r >\n ; 33 // R c u p r a t i o n de chaque l i g n e du r s u l t a t de l a r e q u t e 34 // avec d e s i n d i c e s a s s o c i a t i f s ( c h a n e s de c a r a c t r e s ) 35 w h i l e ( $ l i g n e R e s R e q = m y s q l i _ f e t c h _ a r r a y ( $ r e s u l t , MYSQL_ASSOC) ) { 36 echo \ t<t r >\n ; 37 // a f f i c h a g e de l a l i g n e 38 echo <td> . $ l i g n e R e s R e q [ id ] . </td> ; 39 echo <td> . $ l i g n e R e s R e q [ numeroRue ] . </td> ; 40 echo <td> . $ l i g n e R e s R e q [ rue ] . </td> ; 41 echo <td> . $ l i g n e R e s R e q [ complementAdresse ] . </td> ; 42 echo <td> . $ l i g n e R e s R e q [ c o d e P o s t a l ] . </td> ; 43 echo <td> . $ l i g n e R e s R e q [ v i l l e ] . </td> ; 44 echo <td> . $ l i g n e R e s R e q [ pays ] . </td> ; 45 echo \ t </t r >\n ; 46 } 47 echo </t a b l e >\n ; 48 49 // L i b r a t i o n d e s r s u l t a t s en mmoire 50 mysqli_free_result ( $result ) ; 51 52 // f e r m e t u r e de l a c o n n e c t i o n 53 m y s q l i _ c l o s e ( $lienBD ) ; 54 ?> 55 56 <?php 57 outputFinFichierHTML5 ( ) ; 58 ?>
7.2.3 Suppression dune ligne dune table

exemples/phpMysql1/ex04_suppressionBD_naive.php
1
112
2 <?php 3 i n c l u d e ( . / commonFunctions . php ) ; 4 ?> 5 <?php 6 outputEnTeteHTML5 ( R c e p t i o n d \ un f o r m u l a i r e , UTF 8 , myStyle . c s s ) ; 7 ?> 8 <?php 9 // On s e c o n n e c t e au s e r v e u r de b a s e s de donnes . 10 // Adapter l e nom d h o t e o s e t r o u v e l e s e r v e u r mysql 11 $lienBD = m y s q l i _ i n i t ( ) ; 12 m y s q l i _ r e a l _ c o n n e c t ( $lienBD , www. remysprogwebtuto . org , remy , my_password , ExampleDataBase ) 13 o r d i e ( I m p o s s i b l e de s e c o n n e c t e r mysql ( base de donne ExampleDataBase ) : . mysql_error ( ) ) ; 14 echo Connect au s e r v e u r de b a s e s de donnes mysql . ; 15 16 // S u p p r e s s i o n de l a d r e s s e dont l ID e s t 4 ( r e q u t e SQL) : 17 $ i d =4; 18 $ r e q u e t e = DELETE FROM A d r e s s e WHERE id = . $ i d ; 19 $ r e s u l t = mysqli_query ( $lienBD , $ r e q u e t e ) o r d i e ( Query f a i l e d : . mysql_error ( ) ) ; 20 21 // On ferme l a c o n n e c t i o n 22 m y s q l i _ c l o s e ( $lienBD ) ; 23 ?> 24 <a href= . / ex02_affichageTableBD_naive . php >A f f i c h e r l e contenu</ a> de l a t a b l e <code>A d r e s s e</ code> . 25 26 <?php 27 outputFinFichierHTML5 ( ) ; 28 ?>
7.3 Approche objet et MVC

7.3.1 Classe de gestion de la base de donnes
Nous crons une classe pour grer la connection la base de donnes. Suivant notre schma, il ne doit exister quune seule connection la base de donnes simultanment. Cel simplie grandement la gestion. Pour cel, nous utilisons le patron de conception Singleton, qui permet de crer une classe pour laquelle il ne peut y avoir quune seule instance. Linstance unique de cette classe est accessible par la mthode getInstance. Lors du premier appel cette mthode, lunique instance est cre par un appel au constructeur, et sa rfrence est mmorise dans une variable statique de classe instance. Lors des appels suivants de la mthode getInstance, cette mme instance est simplement retourne. exemples/phpMysql1/classes/classeDataBaseManager.php
1 <?php 2 /** 3 @brief 4 5 6 C l a s s e p e r m e t t a nt de g r e r l a c o n n e c t i o n au s e r v e u r mysql a i n s i que l e x c u t i o n de r e q u t e s SQL . La c l a s s e e s t g r s avec l e p a t t e r n SINGLETON, q u i permet d a v o i r un e x e m p l a i r e unique du g e s t i o n a i r e de c o n n e c t i o n .
113
Programmation Web
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
En e f f e t , i l e s t beaucoup p l u s f a c i l e de g r e r l e s c o n n e c t i o n s l a base de donne une s e u l e l a f o i s , p l u t t que par p o o l . */ c l a s s DataBaseManager { s t a t i c p r i v a t e $lienBD = n u l l ; s t a t i c p r i v a t e $ i n s t a n c e=n u l l ; stat ic public function getInstance () { i f ( n u l l === s e l f : : $ i n s t a n c e ) { s e l f : : $ i n s t a n c e = new s e l f ; } return s e l f : : $instance ; } p r i v a t e f u n c t i o n __construct ( ) { try { // On s e c o n n e c t e au s e r v e u r de b a s e s de donnes . // Adapter l e nom d h o t e o s e t r o u v e l e s e r v e u r mysql s e l f : : $lienBD = m y s q l i _ i n i t ( ) ; m y s q l i _ r e a l _ c o n n e c t ( s e l f : : $lienBD , www. remysprogwebtuto . org , remy , my_password , ExampleDataBase ) o r d i e ( I m p o s s i b l e de s e c o n n e c t e r mysql ( base de donne ExampleDataBase ) : . mysql_error ( ) . < br /> ) ; echo Connect au s e r v e u r de b a s e s de donnes mysql .<br /> ; } c a t c h ( E x c e p t i o n $e ) { d i e ( $e >getMessage ( ) ) ; } } p u b l i c f u n c t i o n e xecRequete ( $ r e q u e t e ) { try { $ r e s u l t = mysqli_query ( s e l f : : $lienBD , $ r e q u e t e ) o r d i e ( E r r e u r dans l \ e x c u t i o n de l a r e q u t e : . $ r e q u e t e ) ; } c a t c h ( E x c e p t i o n $e ) { $ r e s u l t=f a l s e ; } return $result ; } public function mysql_real_escape_string ( $ s t r i n g ) { r e t u r n m y s q l i _ r e a l _ e s c a p e _ s t r i n g ( s e l f : : $lienBD , $ s t r i n g ) ; } public function libereResultatRequete ( $result ){ i f ( strcmp ( g e t t y p e ( $ r e s u l t ) , Object ) ==0 && strcmp ( g e t _ c l a s s ( $ r e s u l t ) , m y s q l i _ r e s u l t ) ==0) mysqli_free_result ( $result ) ; } p r i v a t e f u n c t i o n __clone ( ) {}
52 53 54 55 56 } 57 58 59 ?>
114
7.3.2 Le modle
Dans la classe Adresse, on ajoute simplement une mthode pour chaque type de requte. Voyons la mthode qui renvoie une requte dinsertion dune instance de la classe Adresse dans la table Adresse de la base de donnes ou pour lachage de la bse de donnes. Notez le ltrage avec lutilistaire mysql_real_escape_string de la classe DataBaseManager qui permet dviter les injections MySQL.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 /** @ b r i e f r e t o u r n e l a r e q u t e d i n s e r t i o n dans l a t a b l e A d r e s s e */ public function getInsertRequete ( $ i d e n ti f i a n t ){ $dbManager = DataBaseManager : : g e t I n s t a n c e ( ) ; $ r e q u e t e = INSERT INTO A d r e s s e ( numeroRue , rue , complementAdresse , codePostal , . v i l l e , pays ) VALUES ( . $dbManager>m y s q l _ r e a l _ e s c a p e _ s t r i n g ( $ t h i s > numeroRue ) . , . $dbManager>m y s q l _ r e a l _ e s c a p e _ s t r i n g ( $ t h i s >r u e ) . , . $dbManager>m y s q l _ r e a l _ e s c a p e _ s t r i n g ( $ t h i s >complementAddr ) . , . . $dbManager>m y s q l _ r e a l _ e s c a p e _ s t r i n g ( $ t h i s >c o d e P o s t a l ) . , . $dbManager>m y s q l _ r e a l _ e s c a p e _ s t r i n g ( $ t h i s > v i l l e ) . , . . $dbManager>m y s q l _ r e a l _ e s c a p e _ s t r i n g ( $ t h i s >pays ) . ) ; return $requete ; } /** @ b r i e f i n s r e une a d r e s s e dans l a t a b l e A d r e s s e */ public function insertIntoDB ( $ i d e n t i f i a n t ) { $dbManager = DataBaseManager : : g e t I n s t a n c e ( ) ; $ r e s u l t = $dbManager>execReq ue te ( $ t h i s >g e t I n s e r t R e q u e t e ( $ i d e n t i f i a n t ) ) ; // On l i b r e l e s r s u l t a t s en mmoire : $dbManager>l i b e r e R e s u l t a t R e q u e t e ( $ r e s u l t ) ; }
/** @brief a f f i c h e toute la table adresse . */ p u b l i c s t a t i c f u n c t i o n afficheAdresseFromDB ( ) { $ r e q u e t e = SELECT * FROM Adresse ; $dbManager = DataBaseManager : : g e t I n s t a n c e ( ) ; $ r e s u l t = $dbManager>execReq ue te ( $ r e q u e t e ) ; $ m e s s a g e s E x c e p t i o n s= ; w h i l e ( $ l i g n e R e s R e q = m y s q l i _ f e t c h _ a r r a y ( $ r e s u l t , MYSQL_ASSOC) ) { $ a d r e s s e = s e l f : : getAdresseFromForm ( $ m e s s a g e s E x c e p t i o n s , $ l i g n e R e s R e q [ numeroRue ] , $ l i g n e R e s R e q [ rue ] , $ l i g n e R e s R e q [ complementAdresse ] , $ligneResReq [ codePostal ] , $ligneResReq [ v i l l e ] , $ l i g n e R e s R e q [ pays ] ) ; $ a d r e s s e >a f f i c h e ( ) ; } $dbManager>l i b e r e R e s u l t a t R e q u e t e ( $ r e s u l t ) ; }
115
Programmation Web
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
/** @ b r i e f r c u p r e t o u t e s l e s a d r e s s e s d une v i l l e dans un t a b l e a u */ p u b l i c s t a t i c f u n c t i o n getAdresseInTownFromDB ( $ v i l l e , $ c o d e P o s t a l ) { $ r e q u e t e = SELECT * FROM A d r e s s e WHERE v i l l e = . $ v i l l e . AND c o d e P o s t a l= . $codePostal . ; $dbManager = DataBaseManager : : g e t I n s t a n c e ( ) ; $ r e s u l t = $dbManager>execReq ue te ( $ r e q u e t e ) ; $ m e s s a g e s E x c e p t i o n s= ; $tabAdresse = array ( ) ; $compt =0; w h i l e ( $ l i g n e R e s R e q = m y s q l i _ f e t c h _ a r r a y ( $ r e s u l t , MYSQL_ASSOC) ) { $ t a b A d r e s s e [ $compt ] = s e l f : : getAdresseFromForm ( $ m e s s a g e s E x c e p t i o n s , $ l i g n e R e s R e q [ numeroRue ] , $ l i g n e R e s R e q [ rue ] , $ l i g n e R e s R e q [ complementAdresse ] , $ligneResReq [ codePostal ] , $ligneResReq [ v i l l e ] , $ l i g n e R e s R e q [ pays ] ) ; $compt++; } $dbManager>l i b e r e R e s u l t a t R e q u e t e ( $ r e s u l t ) ; i f ( $compt==0) return null ; return $adresse ; } }
exemples/phpMysql1/ex07_formClasseAdresse.php
1 <?php 2 include_once . / commonFunctions . php ;
116
3 4 5 6 7 8 9 10 11 12 13 14
i n c l u d e _ o n c e c l a s s e s / c l a s s e A d r e s s e . php ; ?> <?php outputEnTeteHTML5 ( S a i s i e d \ une a d r e s s e , UTF 8 , myStyle . c s s ) ; echo <h1>S a i s i e d une a d r e s s e </h1> ; $ a d r e s s e = A d r e s s e : : getEmptyAdresse ( ) ; $adresse >generateForm ( p o s t , . / e x 0 6 _ e c r i t u r e B D _ c l a s s e . php , ) ; outputFinFichierHTML5 ( ) ; ?> </ body> </ html>
7.3.3 Le contrleur
exemples/phpMysql1/ex06_ecritureBD_classe.php
1 2 <?php 3 i n c l u d e _ o n c e ( . / commonFunctions . php ) ; 4 i n c l u d e _ o n c e ( c l a s s e s / c l a s s e A d r e s s e . php ) ; 5 ?> 6 <?php 7 outputEnTeteHTML5 ( R c e p t i o n d \ un f o r m u l a i r e , UTF 8 , myStyle . c s s ) ; 8 ?> 9 <?php 10 $numeroRue= ; 11 i f ( i s s e t ($_POST [ numeroRue ] ) ) { 12 $numeroRue = h t m l e n t i t i e s ($_POST [ numeroRue ] , ENT_QUOTES, UTF 8 ) ; 13 } 14 $ r u e= ; 15 i f ( i s s e t ($_POST [ rue ] ) ) { 16 $ r u e = h t m l e n t i t i e s ($_POST [ rue ] , ENT_QUOTES, UTF 8 ) ; 17 } 18 19 $complementAdresse= ;
117
Programmation Web
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
i f ( i s s e t ($_POST [ complementAdresse ] ) ) { $complementAdresse = h t m l e n t i t i e s ($_POST [ complementAdresse ] , ENT_QUOTES, UTF 8 ) ; } $ c o d e P o s t a l= ; i f ( i s s e t ($_POST [ c o d e P o s t a l ] ) ) { $ c o d e P o s t a l = h t m l e n t i t i e s ($_POST [ c o d e P o s t a l ] , ENT_QUOTES, UTF 8 ) ; } $ v i l l e= ; i f ( i s s e t ($_POST [ v i l l e ] ) ) { $ v i l l e = h t m l e n t i t i e s ($_POST [ v i l l e ] , ENT_QUOTES, UTF 8 ) ; } $pays= France ; i f ( i s s e t ($_POST [ pays ] ) && $_POST [ pays ] != ) { $pays = h t m l e n t i t i e s ($_POST [ pays ] , ENT_QUOTES, UTF 8 ) ; } $ m e s s a g e s E x c e p t i o n s= ; $ a d r e s s e = A d r e s s e : : getAdresseFromForm ( $ m e s s a g e s E x c e p t i o n s , $numeroRue , $rue , $complementAdresse , $ c o d e P o s t a l , $ v i l l e , $pays ) ;
39 40 41 i f ( empty ( $ m e s s a g e s E x c e p t i o n s ) ) { 42 echo A d r e s s e s a i s i e <br/>\n ; 43 $adresse >i n s e r t I n t o D B ( ) ; 44 echo done<br/>\n ; 45 }else{ 46 $ c u r r e n t _ f i l e _ n a m e = basename ($_SERVER[ REQUEST_URI ] , . php ) ; 47 $ a d r e s s e >generateForm ( p o s t , $current _f ile _n ame , $ m e s s a g e s E x c e p t i o n s ) ; 48 } 49 ?> 50 <a href= . / e x 0 5 _ a f f i c h a g e T a b l e C l a s s e B D . php >A f f i c h e r l e contenu</ a> de l a t a b l e <code>A d r e s s e</ code> . 51 <?php 52 outputFinFichierHTML5 ( ) ; 53 ?>
7.3.4 La vue
exemples/phpMysql1/ex05_achageTableClasseBD.php
1 2 <?php 3 i n c l u d e ( . / commonFunctions . php ) ; 4 i n c l u d e ( . / c l a s s e s / c l a s s e A d r e s s e . php ) ; 5 ?> 6 <h1>R c u p r a t i o n d e s r s u l t a t s d une r e q u t e :<br />Via une c l a s s e</ h1> 7 <?php 8 outputEnTeteHTML5 ( A f f i c h a g e du contenu d \ une table 1 , UTF 8 , myStyle . c s s ) ; 9 ?> 10 <?php 11 A d r e s s e : : afficheAdresseFromDB ( ) ; 12 ?>
118
13 14 <?php 15 outputFinFichierHTML5 ( ) ; 16 ?>
119
Chapitre 8 Sessions
8.1 Donnes de sessions
Les sessions permettent de tranmettre des donnes dun srcipt PHP laure, de manire cache et plus simple que les mthodes POST ou GET. Voici un exemple o un message est transmis dune page lautre. Il faut dabord initialiser la session. La session est automatiquement interrompue et les donnes perdues lorsque lutilisateur quitte le navigateur. Pour conserver les donnes dun utilisateur dune visite lautre, il faudrait utiliser des techniques de type Cookie (hors programme) pour identier lutilisateur et stocker les donnes dans une base de donnes. exemples/sessions/ex01_exempleSession.php
1 <?php 2 // m e t t r e en p r e m i e r avnt t o u t code H T M L 3 s e s s i o n _ s t a r t ( ) ; // dmarage de s e s s i o n 4 i n c l u d e _ o n c e . / commonFunctions . php ; 5 outputEnTeteHTML5 ( Donnes de s e s s i o n s 1 , UTF 8 , myStyle . c s s ) ; 6 ?> 7 8 <?php 9 $_SESSION [ message ] = coucou ! ; 10 echo Pour a f f i c h e r l e message , <a h r e f =\ . / e x 0 2 _ r e c u p e r a t i o n _ s e s s i o n . php\ > c l i q u e z i c i </a><br/>\n ; 11 ?> 12 13 14 <?php 15 outputFinFichierHTML5 ( ) ; 16 ?>
8.2 Donnes de session complexes

Pour transmettre des donnes de session complexes, le plus simple est de mettre toutes les donnes dans une classe et de transmettre une instance de la classe dun script lautre. Pour transmettre un objet dune classe dans les donnes de session, il faut srialiser lobjet, cest dire quil faut le coder en binaire. Pas de panique, ils sut dappeler la fonctions serialize. 120
Chapitre 8 : Sessions exemples/sessions/ex02_recuperation_session.php

1 <?php 2 // m e t t r e en p r e m i e r avnt t o u t code H T M L 3 s e s s i o n _ s t a r t ( ) ; // dmarage de s e s s i o n 4 i n c l u d e _ o n c e . / commonFunctions . php ; 5 i n c l u d e _ o n c e . / ex01_commande_classe . php ; 6 outputEnTeteHTML5 ( Donnes de s e s s i o n s 2 , UTF 8 , myStyle . c s s ) ; 7 ?> 8 9 <?php 10 i f ( i s s e t ($_SESSION [ message ] ) ) { 11 $message = $_SESSION [ message ] ; 12 echo message : . $message . <br/>\n ; 13 }else{ 14 echo I m p o s s i b l e de r c u p r e r l e message<br/>\n ; 15 } 16 ?> 17 18 19 <?php 20 outputFinFichierHTML5 ( ) ; 21 ?>
exemples/sessions/ex03_commande_classe.php
1 2 <?php 3 c l a s s Commande { 4 p r i v a t e $numClient ; 5 6 p u b l i c f u n c t i o n getNumClient ( ) { 7 8 } 9 10 p u b l i c f u n c t i o n setNumClient ( $NumClient ) { 11 i f ( $NumClient == n u l l | | ! is_numeric ( $NumClient ) ) { 12 throw new E x c e p t i o n ( Problme : numro de c l i e n t i n c o r r e c t ) ; 13 }else{ 14 $this >numClient = $NumClient ; 15 } 16 } 17 18 p u b l i c f u n c t i o n __construct ( $NumClient ) { 19 $ t h i s >setNumClient ( $NumClient ) ; 20 } 21 22 public function affiche () { 23 echo Numro de c l i e n t : . $ t h i s >numClient . <br/>\n ; 24 } 25 } 26 27 28 ?>
exemples/sessions/ex04_exempleSerialize.php 121
Programmation Web
1 <?php 2 // m e t t r e en p r e m i e r avnt t o u t code H T M L 3 s e s s i o n _ s t a r t ( ) ; // dmarage de s e s s i o n 4 i n c l u d e _ o n c e . / commonFunctions . php ; 5 i n c l u d e _ o n c e . / ex03_commande_classe . php ; 6 outputEnTeteHTML5 ( Donnes de s e s s i o n s : s e r i a l i z e , UTF 8 , myStyle . c s s ) ; 7 ?> 8 9 <?php 10 try { 11 $commande = new Commande ( 1 5 ) ; 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 h r e f =\ . / e x 0 5 _ r e c u p e r a t i o n _ s e r i a l i z e . php \ >c l i q u e z i c i </a><br/>\n ; 15 } 16 c a t c h ( E x c e p t i o n $e ) { 17 echo Problme avec l e numro de c l i e n t !<br >\n ; 18 echo $e >getMessage ( ) . <br/>\n ; 19 } 20 21 ?> 22 23 24 <?php 25 outputFinFichierHTML5 ( ) ; 26 ?>
exemples/sessions/ex05_recuperation_serialize.php
1 <?php 2 // m e t t r e en p r e m i e r avnt t o u t code H T M L 3 s e s s i o n _ s t a r t ( ) ; // dmarage de s e s s i o n 4 i n c l u d e _ o n c e . / commonFunctions . php ; 5 i n c l u d e _ o n c e . / ex03_commande_classe . php ; 6 outputEnTeteHTML5 ( Donnes de s e s s i o n s : u n s e r i a l i z e , UTF 8 , myStyle . c s s ) ; 7 ?> 8 9 <?php 10 i f ( i s s e t ($_SESSION [ commandeEnCours ] ) ) { 11 $commande = u n s e r i a l i z e ($_SESSION [ commandeEnCours ] ) ; 12 $commande >a f f i c h e () ; 13 }else{ 14 echo I m p o s s i b l e de r c u p r e r l a commande en c o u r s <br/>\n ; 15 } 16 ?> 17 18 19 <?php 20 outputFinFichierHTML5 ( ) ; 21 ?>
122
Chapitre 8 : Sessions
8.3 Transmettre lidentit dun utilisateur via une session

8.3.1 Initialisation de la session
La session doit tre rinitialise par un appel session_destroy lorque lutilisateur sidentie. (Sinon, un pirate pourrait crer une session puis transmettre lidentiant de session un utilisateur lgitime pour lui prendre son mot de passe.) Le formulaire de cration dun nouvel utilisateur 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" n </form> Lors de la rception du mot de passe dans le script receptionLogin.php aprs que lutilisateur ait rempli le formulaire didentication ou de cration dun mot de passe, on dtruit la session avec session_destroy. <?php // destruction de la session si elle existe. // les donnes prcdentes seront perdues ! session_start(); session_destroy(); if (!isset($_POST([login]))){ echo 'Bonjour, pour afficher cette page, vous devez'. .'crer un compte et vous identifier.\n'; }else{ if (!valid_login_and_password($_POST([login]), $_POST([password]), $_POST([passwordVerif]))){ echo 'Bonjour, dsol mais l'authentification est invalide.'; }else{ // on dmare la session // permet de transmettre l'identifiant de l'utilisateur // aux autres scripts qui savent ainsi reconnatre // l'utisateur identifi pour maintenir ses donnes. session_start(); $_SESSUION['user'] = $_POST([login]); 123
Rmy Malgouyres, http ://www.malgouyres.fr/ echo "bonjour, bienvenue dans votre espace perso !"; } } ?>
Programmation Web
La fonction valid_login_and_password (qui pourra tre une mthode de classe, est implmenter et doit raliser au moins les opration suivantes : a) Lors de la cration dun compte 1. Vrier que les chanes $_POST([login]) et $_POST([password]) et $_POST([passwordVerif]) existent etsont conformes (chanes de caractres de taille raisonnables) ; 2. Vrier par une requte dans la base de donnes que le login nexiste pas dj. 3. Vrier que la vrication du mot de passe et le mot de passe concident. Par ailleurs, le mot de passe doit tre chir (par exemple en sha avant dtre entr dans la base de donnes. b) Lors de lidentication dun utilisateur existant 1. Vrier que les chanes $_POST([login]) et $_POST([password]) et $_POST([passwordVerif]) existent etsont conformes (chanes de caractres de taille raisonnables) ; 2. Vrier par un accs la basse de donnes que le mot de passe (aprs chirement) correspond bien celui dun utilisateur existant.
8.3.2 Risques pour la scurit

La gestion des utilisateurs et des sessions, ainsi que celles des cookies, comporte de nombreux risques dusurpation didentit, rcupration de mots de passe par un pirtae, etc. Les rgles de prcautions prsentes ci-dessus sont de simples remarques de bon sens et ne sont pas exhaustives des prcautions prendre. La scurit complte dun site en PHP/MySql dpasse le cadre de ce cours et on aura intrt se renseigner, notamment sur toutes les techniques dinsertion que peuvent utiliser les pirates pour hacker un site.
124

Programmation Web

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Programmation Web

Загружено:

Авторское право:

Доступные форматы

Programmation Web

Cot serveur : HTML, CSS, PHP, Mysql

Table des matires

Chapitre 1 Pages web statiques HTML5

1.2 Validation W3C et tests de portabilit

Rmy Malgouyres, http ://www.malgouyres.fr/

(a) Lupload dun chier HTML

(b) Rsultat correct sur le validateur W3C

1.2.2 Tests de portabilit

Chapitre 1 : Pages web statiques HTML5

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

1.3 Structure dun document HTML ou XHTML

Rmy Malgouyres, http ://www.malgouyres.fr/

Le document Hello World ! en HTML5 se compose comme suit : exemples/ChapitreHTML/ex02_helloWorldHtml5.html

1.4 Premier document HTML5

Chapitre 1 : Pages web statiques HTML5

Rmy Malgouyres, http ://www.malgouyres.fr/

1.5 Mise en forme du texte en HTML : styles CSS

Chapitre 1 : Pages web statiques HTML5

1.6 Dnir le graphisme CSS

Rmy Malgouyres, http ://www.malgouyres.fr/

Chapitre 1 : Pages web statiques HTML5

1.7 Les Tableaux

Rmy Malgouyres, http ://www.malgouyres.fr/

Chapitre 1 : Pages web statiques HTML5

Rmy Malgouyres, http ://www.malgouyres.fr/

Chapitre 1 : Pages web statiques HTML5

Rmy Malgouyres, http ://www.malgouyres.fr/

Chapitre 1 : Pages web statiques HTML5

1.9 Insertion dimages

Rmy Malgouyres, http ://www.malgouyres.fr/

Annexe : Les codage portables des accents

Chapitre 2 Styles CSS et mise en page

2.1 Feuilles de style CSS

Chapitre 2 : Styles CSS et mise en page

Rmy Malgouyres, http ://www.malgouyres.fr/

2.2 Classes CSS

Chapitre 2 : Styles CSS et mise en page exemples/ChapitreCSS/ex02_classes_css.html

Rmy Malgouyres, http ://www.malgouyres.fr/

Chapitre 2 : Styles CSS et mise en page

} /* s t y l e de l i e n s s p c i a l pour l a t a b l e d e s m a t i r e s */ a . toc { c o l o r : red ; t e x t d e c o r a t i o n : o v e r l i n e ; /* s u r l i g n */ }

2.3 Slecteurs de style CSS par ID

Rmy Malgouyres, http ://www.malgouyres.fr/

Chapitre 2 : Styles CSS et mise en page

2.4 Exemple : style CSS pour un tableau

Rmy Malgouyres, http ://www.malgouyres.fr/

Chapitre 2 : Styles CSS et mise en page

th { border s t y l e : s o l i d ; border width : 2px ; border c o l o r : b l a c k ; t e x t a l i g n : c e n t e r ; f o n t w e i g h t : b o l d e r ; color : black ; padding : 20 px ; }

2.5 lments de type block et inline

Rmy Malgouyres, http ://www.malgouyres.fr/

Chapitre 2 : Styles CSS et mise en page

2.5.2 lments inline

Rmy Malgouyres, http ://www.malgouyres.fr/

2.6 Positionnement CSS et mise en page

2.6.1 Marges et bordures

Chapitre 2 : Styles CSS et mise en page exemples/ChapitreCSS/ex07_margin_padding.html

Rmy Malgouyres, http ://www.malgouyres.fr/

2.6.2 Positionnement absolu

Chapitre 2 : Styles CSS et mise en page

Rmy Malgouyres, http ://www.malgouyres.fr/

2.6.3 Positionnement relatif

Chapitre 2 : Styles CSS et mise en page

Rmy Malgouyres, http ://www.malgouyres.fr/

2.6.4 Exemple de mise en page

} /* s t y l e de l i e n s s p c i a l pour l a t a b l e d e s m a t i r e s / a . toc { c o l o r : red ; t e x t d e c o r a t i o n : o v e r l i n e ; / s u r l i g n */ }