Cours Projet
Cours Projet
XHTML et CSS
Chapitre 1
(X)HTML
1.1
1.1.1
Principes g en eraux
Motivation initiale
La motivation initiale est de pouvoir echanger des documents sur Internet en utilisant le protocole HTTP (HyperText Tranfer Protocol). La solution propos ee a et e le langage HTML (HyperText Markup Language). Celui-ci est ind ependant de la machine et ouvert. Il ne sagit pas dun langage de programmation : HTML permet uniquement de structurer un document. Un chier HTML est un simple chier texte que lon peut ouvrir et modier avec un editeur quelconque. Outre le texte du document, le chier contient des balises qui vont pr eciser la structure ou lapparence du document.
1.1.2
Balises et attributs
Les balises introduites en HTML ont evolu e au cours du temps, notamment avec lintroduction de XML et XHTML. Dans ce cours, nous les pr esenterons directement dans leur notation XHTML. Une balise peut prendre deux formes, ` a savoir les noeuds et les marqueurs.
Les noeuds Les noeuds se retrouvent sous trois formes : La premi` ere, la plus simple, un simple nom de balise encadr e par les signes inf erieur et sup erieur :
< n o m d e b a l i s e />
Chapitre 1. (X)HTML
Ce sera le cas des balises <br /> ou <hr /> Dans un deuxi` eme temps, la balise peut porter sur une partie pr ecise du document, auquel cas, elle doit souvrir et se refermer :
< n o m d e b a l i s e> t e x t e c o n c e r n e</ n o m d e b a l i s e>
Le signe / annonce la balise fermante. Voir par exemple la balise <em> qui met le texte encapsul e en gras. Enn, il peut etre n ecessaire de pr eciser le comportement de la balise, cela se fait avec des attributs, selon la syntaxe suivante :
< n o m d e b a l i s e n o m a t t r i b u t=v a l e u r n o m a t t r i b u t 2=v a l e u r . . . > t e x t e c o n c e r n e </ n o m d e b a l i s e>
Ainsi, une image etant d eni par la balise <img>, lattribut src pr ecisera le chier a acher. `
Les entit es Une entit e est un code encadr e par une esperluette (&) et un point-virgule ( ;). Ils permettent principalement dencoder les caract` eres sp eciaux, pour quils ne soient pas interpr et es comme des balises. Les seuls ` a connaitre sont pour lespace ins ecable, < pour le symbole <, > pour >, & pour &. Mais il en existe aussi pour d ecrire de nombreux symboles : œ © ... Toutefois, il est plus lisible de les entrer directement dans le code source avec un encodage comme utf-8 qui les supporte.
1.1.3
Le squelette de base que lon retrouvera dans tout document XHTML est le suivant :
< !DOCTYPE html PUBLIC //W3C//DTD XHTML 1 . 0 T r a n s i t i o n a l //EN h t t p : / / www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1 t r a n s i t i o n a l . dtd > <html xmlns=h t t p : / /www. w3 . o r g /1999/ xhtml xml : lang= f r lang= f r > <head> < t i t l e >Le t i t r e de l a page</ t i t l e > <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> </ head> <body> Le contenu de l a page </ body> </ html>
Le squelette ci-dessus respecte les contraintes dun langage XML : il mentionne un DOCTYPE, cest-` a-dire le langage (HTML) que lon va utiliser dans la suite.
Si on choisit de se restreindre aux balises purement s emantiques (ce qui est vivement conseill e), on fait du XHTML strict. Si on sautorise les balises de mise en forme on fait du Transitional. Une autre pr ecision important est lencodage utilis e pour les caract` eres : il pourrait sagir de iso-8859-1, de utf8, etc.
1.2
1.2.1
La structure globale dun document peut presque toujours etre d ecrite en termes de blocs emboit es les uns dans les autres.
Les blocs Voici les balises de bloc div h1 h2,h3,...,h6 p img pre un bloc g en erique rectangulaire Titre de niveau 1 (Sous)-Titres de niveaux 2 ` a6 Paragraphe Une image Du texte mis en forme (code source)
les ots A lint erieur dun bloc, le contenu s etend en g en eral sur plusieurs lignes. Il est parfois necessaire de selectionner un morceau de ces lignes, mais qui peut etre eventuellement coup e. Par exemple, choisir une proposition pour la mettre en italique. On utilise alors des balises de ot span em strong u strike sub sup une zone de texte pouvant s etendre sur plusieurs lignes une zone importante (italique) une zone tr` es importante une zone soulign ee une zone barr ee un indice un exposant
Chapitre 1. (X)HTML
les ornements hr br img object un let horizontal un retour chariot une image un objet multim edia
Listes Il Il est pas. est possible en HTML de d enir di erents types de listes : des listes non ordonn ees (balise <ul> et ses items <li>) ; des listes ordonn ees (balise <ol> et ses items <li>) ; des listes de d enition (balise <dl> et ses items <dt>,<dd>). naturellement possible dimbriquer plusieurs listes, quelles soient de m eme type ou
Par Exemple
<p> Quelques l a n g a g e s</ p> <dl> <dt> f o n c t i o n n e l s </ dt> <dd>Langages dans l e s q u e l s l e s e l ements d eclar e s sont des f o n c t i o n s non m o d i f i a b l e s . Par exemple : <ul> < l i >Caml</ l i > < l i > X s l t</ l i > </ ul> </dd> <dt> I m p e r a t i f s</ dt> <dd>Langages c o n t e n a n t d e s z o n e s memoires a c c e s s i b l e s par r e f e r e n c e s e t dont l e contenu peut etre r eassign e . Par exemple : < o l> < l i >C</ l i > < l i >Java</ l i > </ o l> </dd> </ dl>
Les tableaux Les tableaux restent ` a ce jour le seul moyen de juxtaposer plusieurs blocs de donn ee dune mani` ere support ee par tous les navigateurs. Dun point de vue hi erarchique, il faut se souvenir quune table html est un ensemble de lignes, et que les lignes sont des ensembles de cellules (de m eme cardinal). Une cellule peut etre g en erique, ou de titre. Le code ci-dessous
<t a b l e > <t r > <th > t i t r e 1</th > <th > t i t r e 2</th > </t r > <t r >
<td >s t a n d a r d 3</td > <td >s t a n d a r d 4</td > </t r > </ t a b l e >
produira ce tableau (par d efaut, sans les bordures) titre 1 Case standard 1 titre 2 Case standard 2
1.2.2
Contenu Dynamique
Liens hypertextes Une seule balise, la balise <a>, permet ` a partir dun document de pointer sur un autre. Cest cette balise qui tisse les ls du web. Cette balise permet egalement de cr eer des liens ` a lint erieur dun document ou encore de proposer lenvoi dun mail.
Formulaires Une premi` ere balise permet de d elimiter le formulaire et de pr eciser le traitement qui devra etre eectu e sur les donn ees recueillies : <form>. La majorit e des entr ees (texte et boutons) peuvent etre r ealis ees avec la balise <input>. Si lon a besoin dune saisie de texte s etendant sur plusieurs lignes, on utilisera la balise <textarea>. Pour une liste d eroulante, il sagira de la balise <select> associ ee ` a la balise option pour d enir chacun des items de la liste.
1.3
Depuis les premi` eres heures du Web, les principaux fabricants de navigateurs ont tent e de se cr eer un public captif en cr eant des extensions HTML propri etaires, restitu ee uniquement par leurs produits respectifs. Le Web sest ainsi divis e en deux camps : MSIE et Netscape. Pour que leurs sites soient accessibles aux deux principaux navigateurs, les d eveloppeurs Web ne pouvaient opter que pour des choix aussi insatisfaisants les uns que les autres : nutiliser quune syntaxe commune aux deux navigateurs, et se retrouver avec un site tr` es pauvre, se d emarquant peu de la concurrence, ne sadresser qu` a lun des deux camps et sacrier ainsi une grande partie de son audience et de sa client` ele potentielle ou
Chapitre 1. (X)HTML
faire deux versions du m eme site, au prix dun travail bien plus important et forc ement plus co uteux.
1.3.1
Unication du web
De nos jours, le nombre de navigateurs, syst` emes dexploitation et de machines etant capables dacc eder ` a internet est en pleine explosion : ordinateurs, PDA, Iphones, Tablettes. Si chacun de ces outils continuaient davoir leur propres sp ecications, il serait quasi impossile pour un developpeur dobtenir un site qui sache de mani` ere satisfaidante partout. Heureusement, la situation est en cours dam elioration. Depuis 1994, un organisme de standardisation, le W3C, met en oeuvre des normes Web. Les fabricants de navigateurs font ` a pr esent preuve dune volont e commune de respecter ces normes, mettant n ` a ces contraintes co uteuses pesant sur les d eveloppeurs.
1.3.2
Le valideur w3c
Le principe pour le developpeur est simple : tout document doit etre soumis au valideur interactif W3C ([Link] Si le document satisfait les standards, le valideur ache que le document est valide. Sinon, le valideur mentionne la liste des r` egle qui ne sont pas satisfaites, ainsi que les endroits dans le code source qui posent probl` eme (balise ouverte et pas ferm ee, pr esence de balises de forme au lieu de styles CSS, manque len-t ete...). Ces erreurs sont souvent simples ` a corriger. Le programmeur doit donc corriger les erreurs et recommencer le processus jusqu` a ce que le document soit valide. Il obtient alors la garantie que son document valide appara tra correctement dans tous les navigateurs, que ce soit maintenant, ou m eme dans le futur.
1.4
Conclusion
HTML reste aujourdhui le langage de publication sur le web par excellence. Cependant, on note labandon des balises de pure mise en page, celles-ci etant avantageusement remplac ees par les feuilles de style. Ainsi, il est recommand e de ne plus utiliser de balises comme FONT, B, I, etc. De mani` ere g en erale, les balises HTML ne doivent etre utilis ees que pour structurer le document, et non plus pour pr eciser son apparence.
Chapitre 2
2.1
G en eralit es
La solution retenue pour d ecrire des mises en forme se nomme donc feuilles de style ou, en anglais, Cascading Style Sheets (CSS). En cascade signie que sont prises en compte les feuilles du navigateur, de lutilisateur, puis de lauteur du document. Les CSS peuvent etre rapproch ees des mod` eles de document des traitements de texte
10
Les styles sont support es depuis longtemps par la plupart des navigateurs graphiques : Mozilla 1.1 (et ses descendants FireFox et IceWeasel), Phoenix 0.4, Netscape 6, Konqueror 2.2.1, Galeon 0.12.1, Internet Explorer 5.5, Opera 4. De plus, les styles font partie des standards W3C, et ` a linstar du XHTML, il existe un valideur pour les feuilles de styles. Toutefois, si ` a lavenir les navigateurs tendront ` a respecter les standards, il est possible quactuellement, ils g` erent une m eme feuille de style de mani` ere di erente... le probl` eme est surtout visible lorsque lon utilise des el ements de la sp ecication CSS level 2 sortie en mai 1998, ou avec plus de risques encore, des el ements de la sp ecication CSS level 3 ` a venir. Dans tous les cas, apr` es avoir ecrit une feuille de style, il conviendra donc de v erier lapparence du document avec un maximum de navigateurs. Enn, et surtout, il faut sassurer imp erativement que le document reste lisible m eme sans la feuille de style.
2.2
Les d eclaration de style peuvent etre plac es soit : 1. Ponctuellement dans une balise, avec lattribut style="color:silver;">Du texte argent e</div> style, comme <div
2. Dans len-t ete <head>, apr` es la balise <title>. Lexemple qui suit colorera tous les paragraphes de la page (balise <p>) en rouge.
< s t y l e type= t e x t / c s s > < ! p { color : b l u e ; } > </ s t y l e>
On notera que le standard recommende de placer la balise de commentaires HTML pour que les navigateurs non compatibles ignorent le bloc. 3. Port ee globale ` a toutes les pages du site : la feuille de style est plac ee dans un chier texte [Link], puis ce chier est appel e dans len-t ete de chaque chier XHTML :
< s t y l e type= t e x t / c s s > < ! @import u r l ( f i c h i e r . c s s ) ; > </ s t y l e>
2.2.1
Avec la version 2 de la sp ecication CSS, on peut indiquer le m edia auquel est d edi e une feuille de style. Pour linstant, les m edias possibles sont : all, aural, braille, embossed, handheld, print, projection, screen, tty, tv. La pr ecision du m edia peut se faire au sein dune m eme feuille de style :
11
2.2.2
Un style peut sappliquer ` a un ou plusieurs el ements de la page. Le choix des el ements sur lequel porte le style se fait avec les s electeurs de types, plac es avant laccolade ouvrante dans les feuilles de style.
Selecteur de balises Dans ce cas, on ne pr ecise que les noms des balises concern ees par la d enition du style :
h1 { c o l o r : r e d ; } h2 { c o l o r : b l u e ; } h3 { c o l o r : g r e e n ; } h1 , h2 , h3 { t e x t d e c o r a t i o n : u n d e r l i n e ; }
S electeurs dattributs (class ou id) Il est egalement possible de proposer des apparences di erentes pour une m eme balise. Nous avons pr ec edemment d ecrit le style associ e de mani` ere g en erale aux balises h1 et nous allons maintenant d enir un autre style pour certains titres dits principaux. Cela passe par une distinction dans le code HTML.
<h1 c l a s s= p r i n c i p a l >Un grand t i t r e </ h1>
Puis, on utilisera la syntaxe suivante pour d ecrire les caract eristiques de ces titres particuliers :
h1 . p r i n c i p a l { f o n t s i z e : 40 pt ; }
Plus g en eralement, on peut sp ecier lapparence dune classe sans pr eciser de balise :
. p r i n c i p a l { f o n t s i z e : 40 pt ; }
Cela aura pour eet de faire appara tre en enorme toutes les textes contenus dans balises de classe principal, cest ` a dire dans lexemple qui suit, le gros titre et le paragraphe important, mais pas le titre normal :
12
<h1 c l a s s= p r i n c i p a l >Gros t i t r e </ h1> <p c l a s s= p r i n c i p a l >un p a r a g r a p h e u l t r a i m p o r t a n t . . . </ p> <h1>Un t i t r e normal</ h1>
A noter que les autres styles de la page sappliquent aussi, donc le gros titre et le titre normal seront rouge en tant quh1. Une classe donn ee peut rassembler plusieurs el ements html, et un m eme el ement html peut appartenir ` a plusieurs classes. On s epare les di erentes classes dun el ement par un espace.
<p c l a s s =i m p o r t a n t d e f i n i t i o n >
Enn, plut ot que de parler dune classe, il est possible de ne donner un style que pour une apparition unique dune balise donn ee. Pour cela, il faut rep erer cette balise en lui donnant un identiant unique id :
< d i v i d =menu> <a h r e f =page1 . html> Page 1</a> <a h r e f =page2 . html> Page 2</a> </div >
Cette pratique nest plus tout ` a fait dans lesprit que nous avons d ecrit jusqu` a maintenant ` a savoir d ecrire des styles g en eraux qui seront repris sur lensemble dun site. Elle peut cependant se r ev eler utile dans quelques cas particuliers.
Selecteur par contexte On peut selectionner des el ements parmi les descendants dun selecteur donn e:
selecteur1 selecteur2 {...}
Par exemple, selectionner toutes les balises <a> qui parmi les descendants de la balise did menu
#menu a { display : block ; float : left ; width : 200 px ; h e i g h t : 50 px ; }
On peut selectionner les descendants des descendants en ajoutant encore dautres selecteurs
ul l i l i { f o n t s i z e : x s m a l l }
13
Selecteur de pseudo-classes On peut donner un style particulier ` a un el ement lorsque la souris le survole :
s e l e c t e u r : hover { background c o l o r : y e l l o w ; }
ou encore ajouter du texte avant ou apr` es un el ement (par exemple pour transformer un div en une liste ` a puce.
selecteur : before { . . . } selecteur : after {...}
2.3
Il sagit de balises HTML dont le seul r ole est de d elimiter une zone associ ee ` a un style : div pour les blocs de texte (` a la mani` ere dun paragraphe), span pour une suite de mots dans un texte. Sans style, ces balises ne produisent rien de particulier. On notera quen utilisant les styles CSS, on peut reproduire nimporte quelle mise en forme en nutilisant dans le document que des balises div et span et des classes ou des id.
2.4
2.4.1
La mise en page ` a laide de CSS repose sur la notion de bo tes : il faut imaginer que tout contenu entre une balise ouvrante et une balise fermante est en fait dans une bo te. ` laide des feuilles de style, on va pouvoir sp A ecier lapparence du contenu de la bo te (color, font, background, etc.), les espacements ` a lext erieur de la bo te (margin) et les espacements ` a lint erieur (padding). Naturellement, limbrication des balises implique une imbrication des bo tes. Ainsi, les el ements <li> sont vus comme des bo tes contenus dans une bo te repr esentant la balise <ul>.
Unit es de mesure px (pixel), mm, cm, in, pt, pc, em (hauteur des majuscules de la police en cours), en (hauteur des minuscules de la police en cours)
14
Propri et es de police font-family suite de noms de polices s epar ees par des virgules, termin ee par le nom dune famille de polices (si aucune police na et e trouv ee, on prendra une police dans la famille sp eci ee). Cinq familles sont distingu ees : serif (Times, etc.) sans-serif (Arial, Helvetica, etc.) cursive monospace (machine ` a ecrire comme Courrier) fantasy font-size font-style (normal, italic, oblique) font-variant (normal, small-caps) font-weight (de 100 ` a 900, normal, bold)
Mise en forme du texte white-space (normal, pre, nowrap) ; word-spacing lespace entre les mots ; letter-spacing lespace entre deux lettres au sein dun m eme mot ; text-decoration (none, underline, overline, line-through, blink) Par exemple, pour faire dispara tre le soulignement des liens :
a { t e x t d e c o r a t i o n : none ; }
Agencement du texte display (block, inline, none) text-align (left, center, right, justify) text-indent (taille du retrait de premi` ere ligne) line-height (hauteur de ligne) vertical-align (baseline, super, top, text-top, middle, text-bottom bottom, sub)
Mise en forme de listes list-style-type (none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, disc, circle, square) : type de num erotation ou de puce ; list-style-image (none ou url(nom de chier image)) : permet de sp ecier une image servant de puce pour les listes ; list-style-position (inside, outside) : position de la liste par rapport au reste du texte (d ecalage vers la droite ou pas) ;
15
Couleurs et arri` ere-plans color (rgb(0,0,255), #00f, #0000, blue) : couleur du texte ; background-color : couleur du fond ; background-image (url(image)) : image de fond ; background-repeat (repeat, repeat-x, repeat-y, no-repeat) : mode de r eplication de limage de fond ; background-attachement (scroll, xed) : d element ou non de limage de fond ; background-position.
marges ext erieures et int erieures et bordures Chacun des styles suivants peut etre sp ecialis e avec -top, -left, -top, -bottom. margin retraits ext erieurs ; padding retraits int erieurs. border border-style (solid, double, groove, ridge, inset, outset, dotted, dashed) ; border-width border-color.
Positionnement absolu des el ements position (static, absolute, relative, xed) top left width height visibility (visible, hidden) z-index : indique dans quel ordre doivent appara tre des el ements superpos es (uniquement pour des el ements positionn es de mani` ere absolue).
16
17
Chapitre 3
XML et DOM
3.1 G en eralit es
XML nest pas un langage ` a proprement parler comme peut l etre HTML : XML est une famille de langages ayant en commun le respect de certaines r` egles. En pratique, un chier XML est un simple chier texte, contenant des balises. La particularit e de XML est quaucune balise nest pr ed enie : cest au concepteur de d enir les balises qui ont du sens pour lui. Ces el ements permettent dores et d ej` a de d egager les int er ets de XML : Les documents sont faciles ` a compl eter ou ` a modier, il sut dun simple editeur de texte parce quil sagit de chiers texte avec un format connu et simple ; laspect textuel autorise egalement des recherches de base, soit ` a travers l editeur de texte, soit ` a laide des commandes de base du syst` eme dexploitation (grep sous Linux) ; comme il sagit dun format ouvert, des outils g en eriques sont disponibles et directement utilisable, du parser (lecture et chargement du chier en m emoire) ` a la transformation automatique avec XSLT ; lutilisateur peut di erencier le fond de la forme, ne travailler que sur la structure logique du document sans se soucier de sa pr esentation, cela car XML est clairement avant tout une solution de stockage et pas de publication. Sur laspect stockage et recherche, le langage XML semble sopposer aux bases de donn ees. On la vu XML permet la saisie et les modications sans autre logiciel quun traitement de texte. M eme une modication du sch ema est facile ` a g erer en XML, au moins sur un unique document XML. De plus, XML ne n ecessite pas dans un premier temps lapprentissage dun langage comme SQL. Cependant, lecacit e des recherches reste lavantage des bases de donn ees. XML est donc un standard ouvert et universel. On le trouve aujourdhui dans les domaines les plus vari es : edition (description douvrage avec DocBook), graphisme (format SVG), math ematiques (formules avec MathML),
18
chimie (CML permet la description de mol ecules en 3D), musique (partition musicale avec MusicML), etc.
3.2
On a dit quun document XML etait essentiellement du texte. Au milieu de ce texte, on va pouvoir trouver des el ements (ou balises), des attributs associ es aux el ements et enn des entit es. Les r` egles que doit suivre un document XML sont les suivantes (si toutes ces contraintes sont respect ees, le document XML est dit bien form e) : la premi` ere ligne doit etre de la forme
<? xml version= 1 . 0 e n c o d i n g=u t f 8 ?>
Les deux attributs sp ecient la version de XML utilis ee (1.0 ou 1.1) et le codage des caract` eres (utf-8 par d efaut) ; 1 les balises sont rep er ees par les caract` eres < et >, on ecrira par exemple <balise>contenu</balise> ; la balise ouvrante peut contenir des attributs ; Il faut toujours donner une valeur (cha ne de caract` ere m eme vide) aux attributs, en suivant la syntaxe <balise attr="val"> (les guillemets sont obligatoires, les attributs ne sont pas r ep et es dans la balise fermante) ; Les entit es sont syst ematiquement de la forme &nom; fermer toutes les balises ouvertes, la derni` ere ouverte devant etre la premi` ere ferm ee ; une balise sans contenu pourra etre ouverte et imm ediatement ferm ee en faisant suivre son nom dun slash, par exemple avec la balise br (passage ` a la ligne en HTML) : <br /> ; respecter la casse : on peut utiliser majuscules et minuscules dans les noms de balises mais une fois quun nom d el ement a et e x e, il faut sy tenir, la balise <cv> ne pourra etre ferm ee ni par </Cv> ni par </CV> ; ne pas utiliser de caract` eres r eserv es ` a XML dans le texte du document : <, > et & ; ces caract` eres pourront etre respectivement obtenues ` a laide des entit es <, > et & ; les noms de balises et dattributs doivent etre des noms XML : le premier caract` ere est une lettre quelconque ou un (underscore ou tiret bas) ; les caract` eres suivants peuvent etre des lettres, des chires, des tirets bas ( ), des traits dunion (-) ou des points (.) ; il ny a pas de limitation sur la longueur dun nom XML. ` noter que cette derni` A ere r` egle interdit ` a un nom de balise de commencer par un chire. Cependant, la libert e pour choisir un nom d el ement reste grande car on peut y faire gurer nimporte quelle lettre... or, le codage privil egi e dans les documents et applications XML est lUTF-8 qui contient les alphabets latin, arabe, japonais, etc. Plus sp eciquement, on nh esitera pas ` a utiliser des lettres accentu ees dans les noms d el ements. Finalement, voici un exemple de document XML bien form e:
1. Toutefois, les documents XHTML poss edant un DOCTYPE Strict ou Transitional et d eclarant un encodage dans une balise <meta> sont consid er es comme des documents XML m eme si le header < ?xml version=1.0 ?> est absent.
19
<? xml version= 1 . 0 e n c o d i n g=u t f 8 ?> < ! commentaire : v o i c i mon c u r r i c u l u m v i t a e > <cv> < ! commentaire : e t a t c i v i l > <i d e n t i t e n a i s s a n c e=1980 > <nom>Moustique</nom> <pr e nom> J u l e s</pr e nom> <pr e nom>Edouard</pr e nom> <n a t i o n a l i t e > g r o l a n d a i s e</ n a t i o n a l i t e> </ i d e n t i t e> < ! commentaire : mes d i p l o m e s maintenant > < diplome ann e e=2005 intitul e =Master S e c r e t s mention=TB> < s t a g e> C i s c o</ s t a g e> </ diplome> < diplome ann e e=2003 intitul e = L i c e n c e mention=AB /> </ cv>
3.3
Tout document xml peut etre vu comme un arbre, dont les noeuds et feuilles sont les balises et leur contenu. Larbre correspondant ` a lexemple pr ec edent est le suivant...
<cv>
<diplomes>
<nom>
<pr enom>
<pr enom>
<nationalit e>
Text
Text
Text
Text
<stage>
Text
Un el ement du DOM peut donc etre un noeud (correspondant ` a une balise), ou bien un noeud textuel (correspondant ` a du texte entre les balises). Tout noeud du document (sauf la racine) a un unique p` ere, qui est la balise qui le contient directement. Par exemple, <cv> est le p` ere (parent node ) de <identit e> et aussi de <diplomes>, et le p` ere du noeud textuel Cisco est la balise <stage> qui le contient. Un noeud peut r eciproquement avoir des ls (child nodes ), par exemple, <identit e> a quatre ls <nom>, <pr enom>, <pr enom> et <nationalit e>. On notera que lon a ici omis
20
les noeuds textuels contenant seulement des retours ` a la ligne et des espaces et qui servent a indenter les balises : certaines impl ` ementations, comme le DOM par d efaut de javascript les auraient pris en compte, ce qui aurait ajout e 5 ls textuels. Deux noeuds ayant le m eme p` ere sont dits fr` eres (siblings ), et sont num erot es dans lordre de lecture du document xml. Enn, les ascendants (ancestors ) dun noeud dont ceux que lon rencontre de proche en proche en remontant larbre de p` ere en p` ere jusqu` a la racine. R eciproquement, les descendants dun noeud (descendants ) sont tous ceux du sousarbre ayant le noeud courant comme racine.
21
Chapitre 4
4.1
La syntaxe g en erale
Le premier concept est celui de noeud courant : cest lendroit do` u lon part. En premi` ere lecture on peut imaginer quil sagit de la racine du document, mais nimporte ` partir de l` quel noeud peut jour ce r ole. A a, on consid` ere trois el ements : un axe la direction dans laquelle on se dirige ` a partir du noeud courant (vers le p` ere, vers les ls, vers les fr` eres de gauche, etc.) ; un ltre le type de noeuds qui nous int eresse dans laxe choisi (des noeuds quelconques, des el ements quelconques ou un el ement pr ecis, des commentaires, etc.) ; un pr edicat optionnel des conditions suppl ementaires pour s electionner des noeuds parmi ceux retenus par le ltre dans laxe. Ils constituent ` a eux trois une etape et on les note
axe : : f i l t r e [ p r edicat ]
22
Si le chemin commence par un /, il sagit dun chemin absolu, cest-` a-dire prenant son origine ` a la racine du document et non pas au noeud courant. Puis on descend jusqu` a toutes les balises <stage> dont le contenu contient la cha ne Cisco, et depuis chacune de ces balises, on remonte dun cran et on accepte si la balise est <diplome>. Le r esultat de la requ ete est donc lensemble des diplomes ayant un stage chez Cisco. Il est possible de faire une disjonction de requ etes XPath avec le signe | ; on obtient alors lunion des deux ensembles de noeuds correspondants.
request1 | request2
Les axes Les axes possibles sont self : le noeud courant lui-m eme ; child : les enfants du noeud courant ; descendant, descendant-or-self : tous les descendants du noeud courant ; parent : le p` ere du noeud courant ; ancestor, ancestor-or-self : les anc etres du noeud courant ; preceding, following : les noeuds, pr ec edants ou suivants, du noeud courant, dans lordre de lecture du document ; preceding-sibling, following-sibling : les fr` eres, pr ec edant ou suivant, le noeud courant ; namespace: les espaces de noms. attribute: les attributs du noeud courant ;
Les ltres
node() : tous les noeuds ; text() : les noeuds textuels ; * tous les el ements ; nom : les el ements portant ce nom ; comment() : les noeuds commentaires ;
Les pr edicats Ils prennent la forme de conditions que les noeuds s electionn es devront v erier. Ces tests peuvent impliquer des fonctions ou de nouveaux chemins XPath.
c h i l d : : t o t o [ p o s i t i o n ( ) =2] c h i l d : : t o t o [ @ref = id125 ]
Il est possible de combiner ces tests ` a laide des op erateurs logiques classiques (and, or et not) ou de les encha ner :
c h i l d : : t o t o [ @ref = id125 o r @ref = id47 ] c h i l d : : t o t o [ c o n t a i n s ( t e x t ( ) , coucou ) and p o s i t i o n ( ) =2] c h i l d : : t o t o [ c o n t a i n s ( t e x t ( ) , coucou ) ] [ p o s i t i o n ( ) =2]
23
Attention, les deux derni` eres requ etes ne sont pas equivalentes : la premi` ere renvoie le deuxi` eme ls toto si celui-ci contient le texte coucou tandis que la seconde s electionne tous les ls toto qui contiennent le texte coucou et parmi ceux-ci renvoie le deuxi` eme.
Les fonctions Ces fonctions peuvent appara tre dans des pr edicats ou etre utilis ees directement dans un evaluateur dexpressions XPath. Il y a des fonctions sur les cha nes de caract` eres et qui vont donc porter sur les contenus textuels de noeuds : concat : colle ensemble les cha nes de caract` eres pass ees en param` etres ; string-length : la longueur de la cha ne fournie ; contains, starts-with, ends-with : tests dappartenance dune cha ne dans une autre. Des fonctions qui prennent en argument une requ ete XPath et vont donc porter sur des ensembles de noeuds : count : le nombre de noeuds dans lensemble s electionn e par la requ ete ; name : le nom de l el ement courant. Et enn, nous disposons de fonctions sans param` etre mais li ees au noeud courant : position() : le num ero du noeud courant dans la liste des noeuds consid er es ; last() : le nombre de noeuds s electionn es ` a l etape courante.
La syntaxe abr eg ee Cette notation est plus simple mais pas aussi expressive que la notation etendue. De plus, l equivalent etendu de certaines notations abr eg ees nest pas toujours celui que lon pense. Syntaxe abr eg ee . toto ../toto @titi //toto .//toto toto[2] Syntaxe etendue self::node() child::toto parent::toto attribute::titi /descendant-or-self::node()/child::toto descendant-or-self::node()/child::toto child::toto[position() = 2]
Notez bien que la notation // implique de repartir depuis la racine ; si lon veut un descendant-or-self depuis le noeud courant, on ecrira .//. Il faut prendre garde egalement au fait que //toto[2] se traduit /descendantor-self::node()/child::toto[position()=2], et non pas /descendant-orself::toto[position()=2]. Autrement dit : //toto[2] fournit tous les noeuds toto qui sont deuxi` eme ls de leur p` ere alors que /descendant-or-self::toto[position()=2] d esigne le deuxi` eme noeud toto du document.
24
4.2
Nous avons d ej` a rencontr e un autre langage qui permettait de retrouver des noeuds particuliers dans le cas de documents XHTML, ` a savoir les accesseurs CSS. Et en effet, tout selecteur CSS peut etre traduit en une requ ete XPath. Les principales raisons pour lesquelles XPath na pas et e utilis e dans CSS est dabord que CSS est plus ancien que XPath, et que le W3C souhaite garder dans ses standards un maximum de r etrocompatibilit e, puis aussi que lutilisation la plus fr equente de CSS est de rep erer tous les el ements dune classe donn ee. Une notation [Link] a est tout de m eme plus concise que //div[@class=toto]//a et cest sans parler de la syntaxe etendue ! Voici un tableau r ecapitulatif des correspondances entre les selecteurs CSS3 et XPath. Selecteur CSS nom .toto [Link] #titi nom[attr=val] xCSS yCSS xCSS > yCSS xCSS + yCSS xCSS ~ yCSS Requ ete XPath //nom //node()[@class=toto] //nom[@class=toto] //node()[@id=titi] //nom[@attr=val] xXPath yXPath xXPath /child::yXPath xXPath /following::node()[1]/self::yXPath xXPath /following::yXPath
25
Chapitre 5
5.1
Si les informations contenues dans le document XML peuvent principalement appara tre dans lordre de lecture du document XML (comme le cas dXHTML), alors il sut dassigner un style ` a chaque balise dans un chier [Link] :
cv { d i s p l a y : b l o c k ; b o r d e r : b l a c k s o l i d o u t s e t ; } identit e { display : block ; border : thin blue i n s e t ;} nom { d i s p l a y : i n l i n e ; c o l o r : b l u e } prenom { d i s p l a y : i n l i n e ; c o l o r : b l u e } [...]
On notera que seules les seules cha nes de caract` eres qui apparaitront ` a l ecran avec un rendu CSS sont celles des noeuds textuels. En r esum e, les CSS sont utilisables avec les documents XML mais pr esentent plusieurs d efauts : Les CSS ne permettent pas dextraire les valeurs des attributs pour les faire appara tre ; au mieux, ceux-ci permettent juste de moduler le style. Il est possible avec les CSS de placer les blocs les uns par rapport aux autres, den faire dispara tre certains, mais pas de tout r eorganiser de fond en comble, encore moins de cr eer de nouvelles donn ees.
26
5.2
Transformation XSLT
Il existe donc une famille de langages XSL plus puissante que CSS pour mettre en forme des documents XML, et autorisant beaucoup plus de possibilit es, comme le fait de pouvoir acher un element ` a plusieurs endroits, dajouter des en-t etes xes, etc... Il y a deux strat egies : lune (XSL-FO pour XSL Formating Objects) met en forme directement le document en d etaillant toute la mise en forme de A ` a Z. Lautre strat egie (XSLT pour XSL Transform), consiste ` a convertir le document en un autre format que lon sait d ej` a acher (par exemple XHTML+CSS, ou SVG, ou PDF. Dans ce cours, on ne sint eresse qu` a la strat egie XSLT. Une transformation XSLT est donc dabord un chier XML, auquel on donne en g en eral lextension .xsl et qui au minimum contient :
<? xml version= 1 . 0 ?> < x s l : s t y l e s h e e t version= 1 . 0 x m l n s : x s l= h t t p : //www. w3 . o r g /1999/XSL/ Transform > . . . . i c i des r ` e g l e s de t r a n s f o r m a t i o n . . . . </ x s l : s t y l e s h e e t >
De mani` ere g en erale, XSLT permet de transformer un document XML en un autre document XML. Parmi les formats utilis es comme sortie de XSLT citons : FO, XHTML, SVG, DocBook, etc. Pour appliquer une feuille de transformation XSLT ` a un document XML, une premi` ere solution consiste ` a introduire un lien dans la transformation dans le document :
<? xml version= 1 . 0 ?> <? xml s t y l e s h e e t type= t e x t / x s l h r e f=doc2html . x s l ?> <document> ... </ document>
Ainsi, les programmes traitant le document et disposant dun processeur XSLT pourront choisir dappliquer la transformation, cest le cas par exemple des navigateurs. Une autre solution est dindiquer explicitement la feuille XSLT ` a appliquer au moment de la transformation, par exemple avec xsltproc :
x s l t p r o c doc2html . x s l doc . xml > doc . html
Terminons avec OpenOce qui est lui aussi capable dappliquer des transformations XSLT pour charger des documents dans un format XML quelconque.
5.2.1
Il sagit de la forme la plus simple du langage, contenant une seule r` egle que lon applique depuis la racine. Cela donne une feuille de style de la forme :
<? xml version= 1 . 0 ?> < x s l : s t y l e s h e e t version= 1 . 0
27
x m l n s : x s l= h t t p : //www. w3 . o r g /1999/XSL/ Transform > < x s l : t e m p l a t e match= / > [ i n s t r u c t i o n s XSL ] </ x s l : t e m p l a t e> </ x s l : s t y l e s h e e t >
du contenu du texte celui-ci sera recopi e tel-quel dans le document nal, ` a condition quil y ait autre chose que des espaces, tabulations ou retour ` a la ligne. <xsl:text>bla bla </xsl:text> L` a encore, le texte entre les balises sera copi e tel quel dans le document nal, mais cette fois, m eme sil ne contient que des espaces. <xsl:value-of select= requete /> La valeur XML de la requ ete XPath (le texte lorsque toutes les balises ont et e supprim ees). Linstruction value-of poss` ede un autre attribut disable-output-escaping qui peut prendre deux valeurs yes ou no. Vaut no par d efaut indiquant que les caract` eres comme < ou > doivent etre remplac es par leurs entit es : respectivement < et >. On le met donc ` a yes pour contraindre la sortie de ces caract` eres sans modication. <xsl:copy-of select= requete /> une copie de tous les noeuds selectionn es par la requ ete XPATH. Les descendants sont eux aussi copi es. <xsl :copy select=requete /> Linstruction copy elle ne recopie que le noeud courant lui-m eme, sans son contenu et sans ses ls (il va donc falloir d enir le nouveau contenu et les nouveaux descendants).
des boucles ou structures de contr ole On peut ecrire des tests sur des pr edicat XPath
< x s l : i f t e s t= p r e d i c a t > [ i n s t r u c t i o n s XSL ] </ x s l : i f >
28
<xsl:for each s e l e c t= r e q u e t e > [ i n s t r u c t i o n s XSL ` a f a i r e pour chaque noeud , avec p o i n t d o r i g i n e l e noeud en q u e s t i o n ] </ x s l : f o r e a c h >
5.2.2
[Link]
Une dicult e appara t lorsque lon faire appara tre une valeur r ecup er ee par value-of comme valeur dattribut dans le nouveau document. Cela conduirait ` a un code XML mal form e:
<a h r e f=< x s l : v a l u e o f s e l e c t= l i e n / @url /> > <xsl:value of s e l e c t= l i e n / t e x t e /> </ a>
[Link]
Les variables
On peut vouloir stocker des valeurs pour les r eutiliser plusieurs fois. On peut d eclarer une variable avec un el ement not e xsl:variable, un attribut name pour nommer la variable et, ` a nouveau, un attribut select contenant une requ ete XPath.
< x s l : v a r i a b l e name=n b i t e m s s e l e c t= 1 0 0 . / count ( / / menu/ item ) />
Une fois la variable d enie, on peut lutiliser (typiquement dans une nouvelle requ ete XPath) en utilisant son nom avec le signe dollar devant :
<xsl:for each s e l e c t=//menu/ item > <td width= { $ n b i t e m s }%> <xsl:value of s e l e c t= s e l f : : t e x t ( ) /> </ td> </ xsl:for each>
XSLT est un langage de programmation fonctionnel et par cons equent les variables ne sont pas modiables. Il est donc interdit d ecrire quelque chose comme :
< x s l : v a r i a b l e name= i s e l e c t=$ i +1 />
29
[Link]
Les fonctions
Il est possible d ecrire une fonction, eventuellement ` a plusieurs variables, et de lappeler. Par exemple, on veut une fonction faireunlien qui prend en param` etres ladresse et le texte du lien et renvoie <a href= adresse >texte</a>. On va d enir faireunlien comme un xsl :template, dans lequel on d eclare ses deux param` etres avec xsl :param, et on ajoute le corps de la fonction.
<xsl:template name= f a i r e u n l i e n > <xsl:param name= u r l /> <xsl:param name= t e x t e /> <a h r e f= { $ u r l } > <xsl:value of s e l e c t=$ t e x t e /> </ a> </ xsl:template>
On peut ainsi appeler la fonction en faisant un xsl:call-template, dans lequel on instanciera les param` etres avec des xsl:with-param.
<xsl:template s e l e c t=p e r s o n n e mode= l i e n > <xsl:call template name= f a i r e u n l i e n > <xsl:with param name= t e x t e s e l e c t=c o n c a t ( pr e nom , , nommarital , , nom) /> <xsl:with param name= u r l s e l e c t=@ a dr es s e /> </ xsl:call template> </ xsl:template>
[Link]
On a parfois envie de passer des param` etres ` a la feuille XSLT pour conditionner la sortie, par exemple pour produire des documents di erents ` a partir du m eme document dorigine. Pour cela, on d eclare les param` etres comme pour des templates param etr es, sauf que ceux-ci sont des ls directs de l el ement xsl :stylesheet :
<?xml v e r s i o n = 1 . 0 ?> < x s l : s t y l e s h e e t v e r s i o n = 1 . 0 xmlns : x s l =h t t p : / /www. w3 . o r g /1999/XSL/ Transform> < x s l : param name=e n t r e e d u j o u r /> < x s l : param name=p l a t d u j o u r /> < x s l : t e m p l a t e match=/> <h2>Menu du j o u r </h2> <div >Entree : < x s l : va lue o f s e l e c t =e n t r e e d u j o u r /></div > <div >P l a t : < x s l : va lue o f s e l e c t =p l a t d u j o u r /></div > </ x s l : template > </ x s l : s t y l e s h e e t >
Il reste ` a pr eciser les valeurs de ces param` etres au moment de la transformation. Avec xsltproc, cela se fait comme suit :
x s l t p r o c s t r i n g p a r a m e n t r e e d u j o u r C a r o t t e s Rap e es \ s t r i n g p a r a m p l a t d u j o u r P o i s s o n \
30
s t y l e . x s l document . xml
5.2.3
Les r` egles vues pr ecedemment permettent de transformer des documents dont larborescence compl` ete est connue ` a lavance. Cependant, cela ne surait pas pour convertir un document pouvant contenir un nombre arbitraire de balises di erentes imbriqu ees, par exemple pour convertir un document XHTML arbitraire en un chier doc ou rtf. On peut avoir besoin de suivre larborescence du document initial et adapter la transformation en fonction du noeud courant. Cest le principe des r` egles de transformations. On va y d ecrire une transformation portant sur un certains type de noeuds. Une telle r` egle est (encore) repr esent ee par l el ement xsl:template et contient le code XML ` a produire pour cr eer le nouveau document. Dans lutilisation la plus courante, l el ement xsl:template est muni dun attribut match contenant une requ ete XPath : les noeuds concern es par la transformation sont ceux qui v erient cette requ ete.
<xsl:template match= r e q u e t e > . . . </ xsl:template>
Lorsque lon d ecrit une r` egle de transformation, il faut garder ` a lesprit que les requ etes XPath sont evalu ees par rapport aux noeud courant. Dans lexemple suivant, nom et @ann ee sont respectivement un sous el ement et un attribut du dipl ome que lon est en train de transformer.
< x s l : t e m p l a t e match=diplome > <h2>< x s l : va lue o f s e l e c t =i n t i t u l e /></h2> <p>Obtenu en < x s l : va lue o f s e l e c t =@ann e e /></p> </ x s l : template >
Enn, les appels se font ` a laide de linstruction apply-templates et dun attribut select contenant une requ ete XPath : celle-ci s electionne des noeuds pour lesquels on va chercher des r` egles de transformation ` a activer. Ci dessous, une feuille XSLT compl` ete, qui commence par traiter la racine.
<? xml version= 1 . 0 ?> < x s l : s t y l e s h e e t version= 1 . 0 x m l n s : x s l= h t t p : //www. w3 . o r g /1999/XSL/ Transform > <xsl:template match=/ > <html><head>< t i t l e >Mes d i p l o m e s</ t i t l e ></ head><body> <xsl:apply templates s e l e c t=d i p l o m e s /> </ body></ html> </ xsl:template> <xsl:template match=d i p l o m e s > <h1>Mon c u r s u s</h1> <xsl:apply templates s e l e c t=diplome /> </ xsl:template> <xsl:template match=diplome >
31
<h2><xsl:value of s e l e c t= i n t i t u l e /></h2> <p>Obtenu en <xsl:value of s e l e c t=@ann e e /></p> </ xsl:template> </ x s l : s t y l e s h e e t>
Pr ecisons que lattribut select de apply-templates nest pas obligatoire, il peut etre omis. Dans ce cas, on va chercher ` a appliquer les r` egles de transformation ` a chacun des noeuds ls (ce qui revient ` a poser select="node()" par d efaut). Cela est particuli` erement int eressant dans le cas dun contenu mixte :
<xsl:template match=paragraph > <p><xsl:apply templates /></p> </ xsl:template> <xsl:template match=i m p o r t a n t > <em><xsl:value of s e l e c t= . /></em> </ xsl:template>
Lors de la transformation dun paragraphe, les noeuds texte seront recopi es ` a lidentique, tandis que les el ements important seront trait es par la seconde r` egle.
[Link]
Les modes
Pour pouvoir traiter plusieurs fois mais de mani` ere di erente les m emes el ements, il est possible de sp ecier un mode, dans la r` egle de transformation et dans son appel.
<? xml version= 1 . 0 ?> < x s l : s t y l e s h e e t version= 1 . 0 x m l n s : x s l= h t t p : //www. w3 . o r g /1999/XSL/ Transform > <xsl:template match=/ > <html><body> <h1>Mon c u r s u s</h1> < u l> <xsl:apply templates s e l e c t=diplome mode=sommaire /> </ u l> <xsl:apply templates s e l e c t=diplome mode= t o u t /> </ body></ html> </ xsl:template> <xsl:template match=diplome mode=sommaire > < l i ><xsl:value of s e l e c t= @ i n t i t u l e /></ l i > </ xsl:template> <xsl:template match=diplome mode= t o u t > <h2><xsl:value of s e l e c t= @ i n t i t u l e /></h2> <p> Obtenu en <xsl:value of s e l e c t=@ann e e /> </p> </ xsl:template> </ x s l : s t y l e s h e e t>
32
[Link]
Dapr` es la recommandation du W3C, les r` egles suivantes sont implicitement d enies dans toute feuille de style :
<xsl:template match= * | / > <xsl:apply templates /> </ xsl:template> <xsl:template match= t e x t ( ) | @* > <xsl:value of s e l e c t= . /> </ xsl:template> <xsl:template match= p r o c e s s i n g i n s t r u c t i o n ( ) | comment ( ) />
Il faut observer que le premier xsl:apply-template s electionne tous les noeuds qui ne sont pas des attributs, par cons equent la deuxi` eme r` egle produira le contenu textuel des el ements mais pas celui des attributs puisque ceux-ci ne lui sont pas fournis. On remarque que, pour un noeud s electionn e, plusieurs r` egles de transformation peuvent sappliquer et il sagit den choisir une. Le princippe est que les r` egles les plus sp eciques ont une priorit e plus haute que les r` egles g en eriques, ou implicites. On peut modier soi-m eme la priorit e dune r` egle avec lattribut priority de l el ement xsl:template.
[Link]
Que ce soit pour un apply-templates ou une boucle for-each, il est possible dordonner les noeuds s electionn es avant de les traiter.
<xsl:apply templates s e l e c t=diplome > < x s l : s o r t s e l e c t=@ann e e o r d e r= d e s c e n d i n g /> </ xsl:apply templates>
Dans le cas du xsl:for-each, linstruction xsl:sort doit obligatoirement etre la premi` ere instruction.
<xsl:for each s e l e c t=diplome > < x s l : s o r t s e l e c t=@ann e e o r d e r= d e s c e n d i n g /> [ i n s t r u c t i o n s XSL ] </ xsl:for each>
[Link]
Conditionner la sortie
Linstruction xsl:output peut appara tre comme ls direct de l el ement xsl:stylesheet et permet de pr eciser la sortie voulue, en particulier ` a travers les attributs suivants : method : indication de ce que lon veut produire (xml, html ou text) ; doctype-public : la DTD respect ee par le document nal (le processeur ajoutera de lui m eme la ligne DOCTYPE qui convient) ; omit-xml-declaration : comme son nom lindique ; indent : indenter ou pas le document produit (yes ou no) ;
33
encoding : le codage ` a utiliser pour la sortie ; media-type : le type MIME du document produit. Un exemple :
<?xml v e r s i o n = 1 . 0 ?> < x s l : s t y l e s h e e t v e r s i o n = 1 . 0 xmlns : x s l =h t t p : / /www. w3 . o r g /1999/XSL/ Transform> < x s l : output method=xml e n c o d i n g =u t f 8 i n d e n t =y e s doctype p u b l i c =//W3C//DTD XHTML 1 . 1 / /EN /> [...]
34
35
Chapitre 6
Javascript et Ajax
36
37
39
Chapitre 7
7.1
7.1.1
40
Dans la requ ete, on a demand e la page /[Link] du serveur [Link]. Dans la r eponse, le serveur envoie dans len-t ete certaines infos d ecrivant le chier : tout dabord le code de retour HTTP (200 pour dire que tout va bien, 404 si la page nexiste pas, etc...), puis dautres infos par exemple Content-Type : text/html pr ecise que malgr e lextension .php, le contenu est bien une page html, donc transmise au format texte. Le serveur pr ecise aussi quil coupera la connection apr` es lenvoi de la r eponse (Connection : close). Le serveur demande au client de ne pas stocker la page en cache, mais de bien refaire la requ ete au serveur ` a chaque utilisation. En eet, les pages php sont dynamiques, et le contenu pourrait avoir chang e dun appel ` a lautre.
7.1.2
Les donn ees gurant sur les formulaires html sont envoy es selon le mode sp eci e dans la balise <form>.
<form a c t i o n =r e s u l t a t s . php method=g e t > <div > < i n p u t =t e x t name=a /> < i n p u t =password name=b /> </div > </form >
Si la m ethode est GET, les donn ees sont appos ees ` a ladresse de la page, et transmises telles quelle au serveur dans une requ ete HTTP de type GET.
GET / r e s u l t a t s ? a=b l a&b=t o t o HTTP/ 1 . 0 Host : www. h o s t . n e t
41
Si la m ethode est POST, les donn ees sont ajout ees dans le contenu de la requ ete de type POST, qui pr ecise alors le type et la taille. Dans lexemple suivant, le serveur r epond d` es quil a recu le 10-` eme octet de contenu.
POST / r e s u l t a t s HTTP/ 1 . 0 Host : www. h o s t . n e t Content Type : a p p l i c a t i o n /xwww form u r l e n c o d e d Content Length : 10 a=b l a&b=t o t o
Dans tous les cas, on constate que la valeur du mot de passe est transmise en clair dans les requ etes HTTP. Le probl` eme de condentialit e doit etre r esolu ` a un autre niveau, par exemple en chirant lensemble de la connexion avec SSL, ou en chirant le mot de passe en javascript.
7.1.3
Certaines pages dun site peuvent etre en acc` es restreint par login-mot de passe au niveau du protocole HTTP : il existe deux principales m ethodes : Basic et Digest. Pour avertir le client quun acc` es est prot eg e, il envoie tout dabord la r eponse HTTP 401 : Authorization required. Le navigateur ouvre alors une boite de dialogue demandant un login et un mot de passe, puis renvoie la m eme requ ete en y ajoutant la ligne
HTTP A u t h e n t i c a t i o n : B a s i c cGllcnJlOm1vbm1vdGRlcGFzc2U=
Ici encore, le mot de passe nest pas vraiment chir e, il est juste encod e en base 64. Pour le d ecoder, il sut dutiliser la commande unix base64 -d. La m ethode Digest est un plus s ure, car lauthentication se fait au moyen dun challenge-reponse utilisant des fonctions de hachages cryptographiques. Toutefois, dans le cas o` u un adversaire aurait les moyens despionner la ligne, le reste des donn ees des pages visit ees continue ` a circuler en clair. La seule v eritable mani` ere de se prot eger reste SSL.
7.1.4
Cookies et sessions
Un serveur re coit beaucoup de connections du monde entier en m eme temps. Parfois, il est necessaire de pouvoir distinguer et suivre les utilisateurs. Par exemple, si je suis loggu e sur mon webmail, et que mon voisin utilise le m eme webmail, le serveur doit menvoyer le contenu de mes e-mails lorsque jappuie sur le bouton boite de reception, et pas les mails de mon voisin. Pour assurer le suivi de connexions, le serveur pr ecise aussi au client lors de la premi` ere requ ete de conserver en memoire une variable (cookie). Par exemple, il enverra
Set Cookie : PHPSESSID=6b e 5 5 9 b 2 f 9 e b c 4 0 2 c 4 1 5 4 b c 2 b f 4 a 7 4 a b ; path=/ Expire : date
42
appel ee PHPSESSID et dont la valeur est 6be559b2f9ebc402c4154bc2bf4a74ab, valable sur tout le site (path=/). Il sagit dun m ecanisme de sessions, utilis e lorsque certaines zones du site necessitent que lutilisateur soit logu e. Dans les futures requ etes, et jusqu` a date dexpiration indiqu ee, le client devra ajouter ` a toutes ses requ etes la ligne.
Cookie : PHPSESSID=6b e 5 5 9 b 2 f 9 e b c 4 0 2 c 4 1 5 4 b c 2 b f 4 a 7 4 a b
7.2
Sous linux, le serveur le plus courant est Apache. La version 2 est en g en eral packag ee sur toutes les distributions. Sous ubuntu,
apt g e t i n s t a l l apache2
fera laaire.
7.2.1
les modules
Apache2 est un serveur modulaire, certaines fonctionnalit es optionnelles sont installables et activables sous forme de modules. Par exemple, le mod-ssl si lon veut pouvoir utiliser des connections chir ees, mod-php5 si lon veut pouvoir executer des scripts php, mod-proxy si lon veut pouvoir passer la main ` a des serveurs internes (java par exemple). Les modules poss` edent leur conguration respective dans le dossier /etc/apache2/conf.d. Une fois congur es proprement, le module est activ e` a laide de la commande a2enmod module.
7.2.2
Apache2 permet ` a un m eme serveur dh eberger plusieurs sites sur le m eme port tcp de la m eme machine. Par exemple, [Link] et [Link] sont tous deux h eberg es sur le m eme serveur, ` a la m eme addresse IP. Lors de la requ ete HTTP, le serveur d eterminera quelle page acher gr ace ` a la ligne Host : de la requ ete. Cest le m ecanisme des h otes virtuels Les sites ou h otes virtuels ont chacun leur conguration dans /etc/apache2/sitesavailable/. Les chiers de conguration permettent de param etrer le nom de lhote virtuel (dans le cas o` u il y a plusieurs sites) DocumentRoot : le dossier qui contient les chiers ` a servir Les permissions, et restrictions dacc` es : par exemple si certains sous-dossiers sont accessibles seulement par certaines addresses IP, ou sil faut demander une authentication par mot de passe Dans le cas de communications chir ees (avec SSL), les modalit es : cl e de chirement, certicat pour sauthentier.
7.3- HTTPS
43
7.3
HTTPS
Crypto ` a cl e publique Certicat (cl e publique + cha ne) Cl e priv ee Le serveur connait la cl e priv ee
44
45
Chapitre 8
PHP
Par d efaut, le serveur apache neectue aucun traitement sur les chiers quil sert : il va les chercher sur le disque dur et renvoie le contenu tel quel en sortie. Cest ce que lon appelle des pages statiques, car toute personne qui tape ladresse de la page obtiendra exactement le m eme achage. Si lon souhaite personnaliser la r eponse du serveur, par exemple pour r eagir aux entr ees utilisateur dans des formulaires (param` etres de la requ ete), ou pour r epondre en fonction des requ etes pass ees (session), ou pour actualiser automatiquement la page en fonction de donn ees du moment, le serveur doit executer un programme pour g en erer ` a la vol ee sa r eponse. Le langage PHP permet de r ealiser exactement cette fonctionnalit e : lorsque le client demande ` a voir une page dont lextension est .php, le serveur web va chercher le chier php sur le disque dur ` a lendroit habituel, puis va executer le code quil contient avant de renvoyer la r eponse (souvent du xhtml) au client.
Client
Requete: GET /[Link] ...
Serveur
[Link]
Stockage
Lors de son execution, le programme PHP a acc` es ` a tous les param` etres de la requ ete HTTP, ainsi qu` a toutes les ressources du serveur (disque dur, bases de donn ees) en lecture et en ecriture.
46
Chapitre 8. PHP
8.1
Syntaxe du langage
Le code PHP doit etre ins er e entre des balises < ?php et ?>, et tout ce qui est en dehors de ces balises est envoy e tel quel sur la sortie (comme si le contenu etait pass e dans la fonction dachage echo). Le code PHP est constitu e dune succession dinstructions s epar ees par des ;. Les espaces, tabulations et retour ` a la ligne sont en g en eral non signicatifs, et il est dusage dindenter automatiquement son code pour le rendre lisible.
8.1.1
Variables
On peut d enir et utiliser des variables, dont le nom commence par $. Le type des variable est d etermin e lors de lexecution du code, et les variables sont automatiquement converties si besoin (nombre en cha ne de caract` ere et vice versa, entier en ottant, etc...).
// d e f i n i t i o n de l a v a r i a b l e $ t o t o $toto = 12; // u t i l i s a t i o n de l a v a r i a b l e echo $ t o t o +15; // a f f i c h e 27 echo Le nombre e s t . $ t o t o ;
Lors du debuggage, on peut acher le type et le contenu dune variable en faisant var dump($toto);. Les variables non d enies sont par d efaut ` a la valeur null, et on peut tester si une variable est d enie avec la fonction isset ($toto), qui vaudra true ou false selon que $toto est d enie ou pas. Si besoin, la fonction unset($toto); permet de d e-d enir la variable. En dehors de isset (...) , toute utilisation dune variable non d enie produira un message davertissement PHP.
8.1.2
Tableaux
En PHP, on peut utiliser des tableaux indic es par des entiers ou des cha nes de caract` eres. Les tableaux sont tous consid er es comme associatifs, m eme si les indices sont entiers. De plus, on peut m elanger les types de donn ees dans le tableau.
// d e f i n i t i o n d un t a b l e a u $ t u t u = array ( ) ; // r e m p l i s s a g e d un t a b l e a u $tutu [ 0 ] = 1 ; $ t u t u [ 1 ] = coucou ; $tutu [ 5 ] = 3 2 . 5 ; $tutu [ chien ] =4 7 . 2 5 ; // u t i l i s a t i o n de l a v a r i a b l e echo $ t u t u [ 1 ] ; // a f f i c h e coucou echo $ t u t u [ c h i e n ] // a f f i c h e 4 7 . 2 5 ;
Les el ements dun tableau sutilisent comme des variables, sauf pour le test dexistence o` u on utilisera array key exists ($tutu, chat) au lieu de isset ($tutu[ chat ]) , car ce dernier
47
produit un avertissement PHP. Au cours du debuggage, on pourra aussi utiliser var dump ($toto); pour acher le contenu du tableau. Il existe en PHP quelques tableaux pr ed enis : $ GET est un tableau contenant les param` etres de requ ete pass es dans lurl (methode get des formulaires par exemple) ; $ POST contient les param` etres pass es avec la methode post ; $ COOKIE contient les variables des cookies $ REQUEST contient la r eunion des trois pr ec edents $ SESSION contient les variables que lon a mis dans la session la fois pr ec edente (seulement si on demande ` a utiliser les sessions au d ebut du code php)
8.1.3
Tout le but du PHP est de produire des cha nes de caract` eres pour la sortie. Les cha nes de caract` eres peuvent etre d enies de trois mani` eres : entre quotes (), entre guillemets () ou sur plusieurs lignes entre <<EOD et EOD ; Les variables $qqch et les el ements de tableaux {$tableau[$indice]} sont remplac es par leur valeur dans les cha nes entre guillemet et sur plusieurs lignes, mais pas les cha nes entre quote (). Les caract` eres sp eciaux escap es comme \n pour un retour ` a la ligne sont utilisables uniquement les cha nes entre guillemet. Enn, on peut concat ener des cha nes de caract` eres avec lop erateur point (.)
// d e f i n i t i o n d un t a b l e a u $ s a = b o n j o u r $ s a \ nComment ca va ? ; $sb = b o n j o u r $ s a \ nComment ca va ? ; $sb = j \ a i . 12 $ dans ma poche . \ n ; echo $ s a ; // b o n j o u r $ sa \ nComment ca va ? echo $sb ; // b o n j o u r t o t o // Comment ca va ? $tab = array ( ) ; tab [ t o t o ] = 1 2 ; echo t o t o a { $tab [ t o t o ] } ans ! ; // r e m p l i s s a g e d un t a b l e a u $sd = <<<EOD C e c i e s t une c h a ne sur p l u s i e u r s l i g n e s dans l a q u e l l e l e s v a r i a b l e s comme $ s a ou comme { $tab [ t o t o ] } s o n t substitu e e s par l e u r s v a l e u r s EOD;
8.1.4
Les structures de contr ole et de boucles suivent la syntaxe du C. Pour le test conditionnel, on utilisera
48
Chapitre 8. PHP
Les blocs else ne sont pas obligatoires, et les accolades peuvent etre supprim ees si lorsque instruction ` a executer est unique. Pour les it erations, on utilisera
while ( c o n d i t i o n ) { ..... } // ou b i e n f o r ( $ i =0; i < 5; i ++) { .... }
et si lit eration porte sur les indices et/ou valeurs dun tableau :
foreach ( $ t a b l e a u a s $ i n d i c e => $ v a l e u r ) { echo l \ e l e m e n t d \ i n d i c e $ i n d i c e vaut $ v a l e u r ; }
Comme en C, les it erations peuvent etre abort ees avec break; ou continue;.
8.1.5
Fonctions
PHP contient une multitude de fonctions pr ed enies, aussi bien pour faire des maths (abs, oor, rand, cos, sin, ...), traiter les cha nes de caract` eres (strlen, substr, etc...), ouvrir des chiers, se connecter ` a une base de donn ee. On se r ef` erera ` a la documentation en ligne de PHP pour plus dinformation. On peut aussi d enir ses propres fonctions
f u n c t i o n somme ( $x , $y ) { r e t u r n $x + $y ; }
Si une fonction ` a besoin dacc eder ` a une variable globale $variable ; , il faudra pr eciser
global $variable ; au d ebut du corps de la fonction.
49
8.1.6
Sessions
Si on veut utiliser des sessions pour reconna tre les requ etes dun m eme utilisateur, il faut ajouter au tout d ebut de la page php linstruction
session start ()
el ements Cela cr ee un tableau global $ SESSION dans lequel on peut lire et stocker des que lon veut enregistrer pour les futures requ etes sur le m eme site. Par exemple :
<?php session start () ; // on r e g a r d e dans l a s e s s i o n s i l e x i s t e un nombre // de v i s i t e s , e t on l e c h a r g e dans $ n b v i s i t e s $nbvisites = 0; i f ( a r r a y k e y e x i s t s ( $ SESSION , n b v i s i t e s ) ) $ n b v i s i t e s=$ SESSION [ n b v i s i t e s ] ; //On e n r e g i s t r e pour l e s f o i s s u i v a n t e s que l e // nombre de v i s i t e s a augment e d une u n i t e $ SESSION [ n b v i s i t e s ]= $ n b v i s i t e s +1; // p u i s on a f f i c h e l e message : echo <h1>Vous avez v i s i t e c e t t e page $ n b v i s i t e s f o i s ! ! ! < / h1> ; ?>
50
Chapitre 8. PHP
51
Chapitre 9
9.1 9.2
Les instructions SQL s ecrivent dune mani` ere qui ressemble ` a celle de phrases ordinaires en anglais. Cette ressemblance voulue vise ` a faciliter lapprentissage et la lecture[2]. Cest un langage d eclaratif, cest-` a-dire quil permet de d ecrire le r esultat escompt e, sans d ecrire la mani` ere de lobtenir. Les SGBD sont equip es doptimiseurs de requ etes - des m ecanismes qui d eterminent automatiquement la mani` ere optimale deectuer les op erations, notamment par une estimation de la complexit e algorithmique. Celle-ci est bas ee sur des statistiques r ecolt ees ` a partir des donn ees contenues dans la base de donn ees (nombre denregistrements, nombre de valeurs distinctes dans une colonne, etc.). Les instructions de manipulation du contenu de la base de donn ees commencent par les mots cl es SELECT, UPDATE, INSERT ou DELETE qui correspondent respectivement aux op erations de recherche de contenu, modication, ajout et suppression. Divers mots cl es tels que FROM, JOIN et GROUP permettent dindiquer les op erations dalg` ebre relationnelle ` a eectuer en vue dobtenir le contenu ` a manipuler. Les instructions de manipulation des m etadonn ees - description de la structure, lorganisation et les caract eristiques de la base de donn ees - commencent avec les mots cl es
52
CREATE, ALTER ou DROP qui correspondent aux op erations dajouter, modier ou supprimer une m etadonn ee. Ces mots cl es sont imm ediatement suivies du type de m etadonn ee a manipuler - TABLE, VIEW, INDEX, ... ` Les mots cl es GRANT et REVOKE permettent dautoriser des op erations ` a certaines personnes, dajouter ou de supprimer des autorisations. Tandis que les mots cl es COMMIT et ROLLBACK permettent de conrmer ou annuler lex ecution de transactions.
9.3
interfaces utilisateur
psql[modier] psql est le premier frontal pour PostgreSQL et une interface en ligne de commande permettant la saisie de requetes SQL, directement ou par lutilisation de proc edures stock ees.
9.4
PHP PDO
53
Java EE
55
Chapitre 10
utilisateur xhtml, txt, gui, ... Prsentation ModelInterface Mtier DataAccessInterface Accs aux donnes
56
10.1
les entit es
Tout dabord, il faut d enir les di erentes entit es, qui seront utilis ees comme argument et valeur de retour des fonctions. On essaiera si possible de d enir ces entit es comme des Beans java classiques, cest ` a dire des classes contenant des attributs tous priv es, au moins un constructeur vide public, et des accesseurs en lecture/ecriture publics respectant la syntaxe classique java. Dans lexemple de la banque, on choisira trois entit es : Account pour le num ero et le nom de propri etaire dun compte, une sous classe DetailledAccount contenant aussi le montant, et une classe Transaction pour d ecrire une op eration. Cela peut donner :
public c l a s s Account { private int number ; private S t r i n g name ; [ . . . constructeur et accesseurs . . . ] } public c l a s s D e t a i l l e d A c c o u n t extends Account { private int amount ; [ . . . constructeur et accesseurs . . . ] } public c l a s s T r a n s a c t i o n { private int t i d ; private Date d a t e ; private int amount ; private S t r i n g d e s c r i p t i o n ; private Account s e n d e r ; // compte d ebit e (0 s i aucun ) private Account r e c e i v e r ; // compte c r edit e (0 s i aucun ) [ . . . constructeur et accesseurs . . . ] }
57
De plus, il sav` ere souvent judicieux de disposer dune fonction toInnerXML() permettant dacher le contenu dun objet au format XML, mais sans en-t ete et sans balise racine. Par exemple, pour la classe Account :
// pour Account public S t r i n g toInnerXML ( ) { return <number> + number + </number> + <name> + name + </name> ; } // e t pour T r a n s a c t i o n public S t r i n g toInnerXMLString ( ) { return < t i d > + t i d + </t i d > + <date > + d a t e + </date > + <amount> + amount + </amount> + < d e s c r i p t i o n > + d e s c r i p t i o n + </ d e s c r i p t i o n > + < s e n d e r > + s e n d e r . toInnerXMLString ( ) + </s e n d e r > + < r e c e i v e r > + r e c e i v e r . toInnerXMLString ( ) + </ r e c e i v e r > ; }
10.2
Cette couche peut- etre vue comme la derni` ere barri` ere avant les donn ees physiques sur le disque, en base de donn ees, ou sur tout autre support. On d enira une interface java contenant toutes les primitives bas niveau que lon pourra envisager sur les donn ees, ainsi quune classe qui impl emente ces fonctions. Dans notre exemple, on peut choisir linterface suivante :
public i n t e r f a c e DataAccess { // a u t h e n t i f i c a t i o n d un u t i l i s a t e u r s u r un compte boolean l o g i n ( Account account , Object password ) ; boolean s e t A u t h e n t i c a t i o n ( Account account , Object password ) ; // g e s t i o n d e s comptes ( r ecup e r a t i o n par nom , par id , c r eation ) L i s t <Account > g e t A c c o u n t s ( S t r i n g p a t t e r n ) ; Account getAccount ( int c i d ) ; Account c r e a t e A c c o u n t ( S t r i n g name ) ; // r ecup e r a t i o n du montant D e t a i l l e d A c c o u n t g e t D e t a i l l e d A c c o u n t ( Account a c c o u n t ) ; // o p e r a t i o n s ( virement , d e pot , r e t r a i t ) boolean t r a n s f e r ( Account s e n d e r , Account r e c e i v e r , int amount , String description ) ; // l i s t e d e s o p e r a t i o n s d un compte L i s t <T r a n s a c t i o n > s t a t e m e n t ( Account a c c o u n t ) ; }
On peut faire une impl ementation JDBC ` a la main, ou utiliser Hibernate pour impl ementer cette interface.
58
Notons que de mani` ere g en erale, toute personne qui a un acc` es direct ` a la couche dacc` es aux donn ees a par construction tous les droits. Les couches en amont permettent de prot eger les donn ees en restreignant leur utilisation ` a celle pr evue.
10.3
Ici, il y a trois interfaces utilisateur : le guichet, le distributeur automatique, et le site web. Pour chacun, il faut concevoir une couche mod` ele. Cest l` a encore une interface java, et son impl ementation qui a acc` es ` a la couche dacc` es aux donn ees. Les fonctions utilisent en entr ee et sortie les entit es d enies ci-dessus. Par ailleurs toute la logique doit etre contenue dans le mod` ele, au point que si un attaquant obtenait un acc` es direct ` a la couche mod` ele, il naurait pas plus de pouvoir que ce qui est pr econis e dans lapplication : Dans le cas du site web, un utilisateur doit pouvoir sauthentier par mot de passe, puis une fois authenti e, il peut consulter son compte d etaill e et transations, ou demander a faire un virement depuis son propre compte vers un autre compte de son choix. Lors ` du virement, il aura le droit de demander le nom de propri etaire du compte quil veut cr editer. Voici une interface possible pour le site web :
public i n t e r f a c e WebsiteModel { // Login D e t a i l l e d A c c o u n t l o g i n ( int c i d , Object a u t h e n t i c a t i o n ) ; //mon compte D e t a i l l e d A c c o u n t getMyAccount ( ) ; // Lors d un t r a n s f e r t , o b t e n i r l e nom du compte d e s t i n a t a i r e Account getAccount ( int c i d ) ; // o p e r a t i o n s boolean t r a n s f e r ( Account r e c e i v e r , int amount , S t r i n g d e s c r i p t i o n ) ; // l i s t e de mes o p e r a t i o n s L i s t <T r a n s a c t i o n > s t a t e m e n t ( ) ; }
On notera que lors de limpl ementation de ce mod` ele, on doit stocker en memoire le num ero de compte de lutilisateur, et bien evidemment, seule la fonction login pourra aecter cet attribut, ` a condition que le mot de passe soit correct. Toutes les autres fonctions (d etails, relev e, virement) sont execut ees en fonction de ce num ero, qui nest donc pas repass e en argument).
10.4
Par dessus le mod` ele, on ajoutera une couche de pr esentation, qui a acc` es au mod` ele, et dont le but est principalement de convertir les entit es en des cha nes de caract` ere ach ees
59
sur les pages web (en xhtml, ou encore mieux en XML + XSL ), et de convertir les r eponses des formulaires en des entit es ` a transf erer au mod` ele. Cette partie peut parfois, dans un souci dautomatisation, se resubdiviser en couches et vues additionnelles (voir le mod` ele MVC, impl ement e dans JBoss ou Spring)
60
61
Chapitre 11
Tables SQL
DetailledAccount Classes Java Account * number (int) * name (String) * amount (int)
Transaction * tid (int) * date ([Link]) * description (String) * amount (int) * sender (Account) * receiver (Account)
Figure 11.1 Schema relationnel et correspondance Java On notera que les classes DetailledAccount et Transaction miment presque exactement les tables SQL accounts et transactions. Toutefois, lorsquune banque envoie le relev e
62
dop erations au client, elle ne souhaite pas lui donner acc` es au solde (amount) disponible sur les comptes de ses cr eanciers et d ebiteurs, cest pourquoi dans la classe Transaction en java, nous d enissons sender et receiver comme des Account et non des DetailledAccount.
11.1
JDBC
Avec JDBC, la correspondance entre les classes Java et la base de donn ee se fait ` a la main en explicitant les requ etes SQL.
11.1.1
Connexion ` a la base
Il faut tout dabord r ecup erer sur internet le driver JDBC correspondant au type de base de donn ee : il y en a un pour Postgres, un pour Oracle, MySQL, sqlite, etc... Le driver en question se pr esente en g en eral sous la forme dune archive .jar quil sura dint egrer dans le classpath java lors de la compilation et de lexecution. Pour un projet tomcat, le moyen le plus simple est de copier le .jar dans le dossier WEB-INF/lib/. Ensuite, on utilisera ce type de code pour charger le driver et se connecter ` a la base (ici une base sqlite)
C l a s s . forName ( o r g . s q l i t e .JDBC) ; Connection conn = DriverManager . g e t C o n n e c t i o n ( j d b c : s q l i t e : / home/ gama/tmp/ t e s t . db ) ;
11.1.2
Requ etes
An d eviter les attaques classiques par injection SQL, il est recommand e de toujours pr eparer ` a lavance les requ etes SQL sous forme de PreparedStatements ` a trous, puis de compl eter les trous en utilisant les fontions ad equates. Par exemple, on va pr eparer une requ ete pour cr eer un compte, et une pour lire un compte dont on conna t le num ero.
PreparedStatement creerCompte = conn . P rep a re Sta te m en t ( INSERT INTO a c c o u n t s ( number , name ) + VALUES ( ? , ? ) ; ); PreparedStatement recupererCompte = conn . Pr ep a re Sta te me nt ( SELECT number , name , amount FROM a c c o u n t s JOIN d e t a i l s ON number=c i d WHERE number = ? ; );
63
Ces PreparedStatements peuvent etre stock ees comme attributs de la classe pour etre r eutilis es plusieurs fois, de la m eme mani` ere que la variable conn pour la connexion. Les trous dans les requ etes sont symbolis es par le caract` ere ?. Au moment dappeler la requ ete, on va compl eter les trous puis executer le statement. Dans le cas dune requ ete dupdate ou dinsertion renvoyant le nombre de lignes modi ees dans la base, on proc` edera comme suit :
creerCompte . s e t I n t ( 1 , numero ) ; creerCompte . s e t S t r i n g ( 2 , nom du p r o p r i e t a i r e ) ; int n b L i g n e s M o d i f i e e s = creerCompte . executeUpdate ( ) ; i f ( n b L i g n e s M o d i f i e e s ==1) { // t o u t s e s t b i e n p a s s e } else { // i l y a eu un p r o b l e m e . . . }
Pour les requ etes SELECT renvoyant un r esultat, on va r ecup erer les lignes avec executeQuery() dans un ResultSet qui fonctionne un peu comme un iterator java, et quil faudra parcourir avec une boucle while pour extraire les valeurs.
recupererCompte . s e t I n t ( numero ) ; R e s u l t S e t r s = recupererCompte . executeQuery ( ) ; while ( r s . next ( ) ) { D e t a i l l e d A c c o u n t a = new D e t a i l l e d A c c o u n t ( ) ; a . setNumber ( r s . g e t I n t ( 1 ) ) ; // 1 e r e c o l o n n e a . setName ( r s . g e t S t r i n g ( 2 ) ) ; // 2eme c o l o n n e a . setAmount ( r s . g e t S t r i n g ( 3 ) ) ; // 3eme c o l o n n e System . out . p r i n t l n ( a . toInnerXML ( ) ) ; } r s . c l o s e ( ) ; //C e s t p l u s p r o p r e
JDBC permet aussi de g erer les transactions SQL, et on notera dans ce sens les fonctions : [Link](false) ; qui correspond en SQL ` a BEGIN TRANSACTION [Link]() ; qui correspond en SQL ` a ROLLBACK [Link]() ; qui correspond en SQL ` a COMMIT Ces instructions am eliorent consid erablement le temps dexecution si une longue s erie dinsertions ou dupdate sont ` a executer dun seul coup. De plus, si les requ etes en question utilisent le m eme PreparedStatement, on utilisera les fonctions addBatch() et executeBatch() du Statement pour pr eparer les di erentes entr ees, puis toutes les executer.
11.2
Hibernate Framework
Lorsque lon utilise JDBC ` a la main, certaines t aches deviennent r ep etitives et fastidieuses. Il existe des frameworks (Ibatis, Hibernate, ...) pour automatiser ces t aches, et dans lequel lassociation entre tables SQL et classes Java se r esume en un simple descripteur XML.
64
11.2.1
Conguration dHibernate
Le framework hibernate se congure en xml. Le chier principal de conguration sappelle par d efaut [Link], se situe ` a la racine du classpath, et pr ecise les param` etres de connections ` a la base de donn ee. Par exemple, le chier de conguration pour une base de donn ee MySQL pourrait ressembler ` a:
<? xml version= 1 . 0 e n c o d i n g= u t f 8 ?> < !DOCTYPE h i b e r n a t e c o n f i g u r a t i o n PUBLIC [ . . . ] > < h i b e r n a t e c o n f i g u r a t i o n> < s e s s i o n f a c t o r y> < ! p a r a m e t r e s de c o n n e c t i o n JDBC > < p r o p e r t y name= c o n n e c t i o n . d r i v e r c l a s s > o r g . mysql .JDBC</ p r o p e r t y> < p r o p e r t y name= c o n n e c t i o n . u r l > j d b c : m y s q l : // l o c a l h o s t /db</ p r o p e r t y> < p r o p e r t y name= c o n n e c t i o n . username > u s e r</ p r o p e r t y> < p r o p e r t y name= c o n n e c t i o n . password > p a s s</ p r o p e r t y> < ! p a r a m` etres s p ecifiques ` a h i b e r n a t e > < p r o p e r t y name= d i a l e c t > o r g . h i b e r n a t e . d i a l e c t . MySQLDialect</ p r o p e r t y> < ! [ . . . a u t r e s p a r a m` e t r e s ( v o i r documen tation ) . . . ] > < ! au c h o i x , l e f i c h i e r , ou l e s c l a s s e s de mapping > <mapping r e s o u r c e=mapping . hbm . xml /> </ s e s s i o n f a c t o r y> </ h i b e r n a t e c o n f i g u r a t i o n>
Ensuite, il faut d ecrire les associations (mapping) entre le sch ema et les classes entit es Java. Il y a deux principales m ethodes pour cela : lutilisation dun descripteur xml, ou des annotations Java5 sur le code source des classes.
[Link]
Dans le cas dun descripteur xml (ici [Link] ` a la racine du classpath), le mapping qui correspond ` a la gure 11.1 page 61 ressemblerait ` a:
<? xml version= 1 . 0 e n c o d i n g=u t f 8?> < !DOCTYPE h i b e r n a t e mapping PUBLIC [ . . . ] > < h i b e r n a t e mapping package= e n t i t i e s > < ! pour chaque c l a s s e j a v a , p r eciser la table , et pour chaque a t t r i b u t , l a c o l o n n e > < c l a s s name=Account t a b l e= a c c o u n t s > < i d name=number /> < p r o p e r t y name=name /> < ! h i b e r n a t e e s t c o m p a t i b l e a v e c l e polymorphisme un d e s modes e s t l a j o i n t u r e > < j o i n e d s u b c l a s s name= D e t a i l l e d A c c o u n t > <key column= c i d /> < p r o p e r t y name=amount /> </ j o i n e d s u b c l a s s> </ c l a s s > < c l a s s name= T r a n s a c t i o n t a b l e= t r a n s a c t i o n s > < i d name= t i d />
65
< p r o p e r t y name= d e s c r i p t i o n type= t e x t /> < p r o p e r t y name=d a t e type=timestamp /> < p r o p e r t y name=amount /> <manyto one name= s e n d e r c l a s s=Account /> <manyto one name= r e c e i v e r c l a s s=Account /> </ c l a s s > </ h i b e r n a t e mapping>
[Link]
Il est aussi possible de mentionner le mapping avec des annotations sur le code java. Dans ce cas, on terminera le chier de conguration principal par la liste de toutes les classes ` a prendre en compte
[...] <mapping c l a s s= e n t i t i e s . Account /> <mapping c l a s s= e n t i t i e s . D e t a i l l e d A c c o u n t /> <mapping c l a s s= e n t i t i e s . T r a n s a c t i o n /> </ s e s s i o n f a c t o r y> </ h i b e r n a t e c o n f i g u r a t i o n>
Ensuite, il sut principalement dajouter au dessus de la d eclaration de chacune de ces classes @Entity @Table(name=table), au dessus de lattribut cl e primaire @Id, et au dessus des attributs cl es etrang` eres @ManyToOne. Dans le cas de comportement complexes (h eritage, choix entre date-time-timestamp), il faut aussi ajouter les annotations analogues a ce quil y avait dans le descripteur xml. ` Par exemple, la d eclaration des trois classes java deviendrait :
@Entity @Table ( name = a c c o u n t s ) @ I n h e r i t a n c e ( s t r a t e g y=I n h e r i t a n c e T y p e . JOINED) public c l a s s Account { @Id private int number ; private S t r i n g name ; private char b l o ; // + c o n s t r u c t e u r s , t o S t r i n g , g e t t e r s , s e t t e r s . . . } @Entity @Table ( name = d e t a i l s ) @PrimaryKeyJoinColumn ( name= c i d ) public c l a s s D e t a i l l e d A c c o u n t extends Account { private int amount ; // + c o n s t r u c t e u r s , t o S t r i n g , g e t t e r s , s e t t e r s . . . } @Entity @Table ( name = t r a n s a c t i o n s ) public c l a s s T r a n s a c t i o n { @Id private int t i d ; @Temporal ( TemporalType .TIMESTAMP) private Date d a t e ; private int amount ;
66
@Column ( c o l u m n D e f i n i t i o n= t e x t ) private S t r i n g d e s c r i p t i o n ; @ManyToOne private Account s e n d e r ; // i d du compte d ebit e (0 s i aucun ) @ManyToOne private Account r e c e i v e r ; // i d du compte c r edit e (0 s i aucun ) // + c o n s t r u c t e u r s , t o S t r i n g , g e t t e r s , s e t t e r s . . . }
11.2.2
Il est parfois dicile (toutefois pas impossible) dadapter Hibernate ` a un sch ema relationnel existant, surtout si le sch ema nutilise pas les conventions standard (qui sont souvent cl e primaire, champs non nuls, jointures internes, ...). En revanche, adapter le sch ema relationnel aux entit es java est ultra simple. Une fois le mapping r ealis e, par exemple avec les annotations, il sut de laisser Hibernate cr eer le sch ema et le code SQL de d enition des tables. On utilisera pour cela loutil SchemaExport fourni avec Hibernate, que lon peut appeler en ligne de commande ou depuis le code. Par exemple, ceci enregistrera le schema g en er e dans un chier sql, permettant de debugguer le r esultat
C o n f i g u r a t i o n c o n f i g = new C o n f i g u r a t i o n ( ) . c o n f i g u r e ( ) ; SchemaExport s e = new SchemaExport ( c o n f i g ) ; s e . s e t O u t p u t F i l e ( / home/gama/tmp/ e x p o r t . s q l ) ; s e . setFormat ( t r u e ) ; se . c r e a t e ( true , f a l s e ) ;
En mettant le second param` etre de create ` a true, on peut m eme cr eer physiquement toutes ces tables dans la base de donn ee (et m eme les ecraser par erreur si elles existaient...).
11.2.3
Une fois que les classes sont mapp ees avec SQL, leurs instances peuvent etre dans deux etats : persistantes ou eph em` eres/d etach ees. persistant Un objet persistant est li e` a la base de donn ee. Toute modication de lobjet via les accesseurs sera r epercut ee dans la base de donn ee ` a la n de la session, ou lors des appels ` a [Link]() ou [Link](). Cest le cas des instances r ecup er ees avec un select depuis la base, ou des instances ins er ees dans la base avec save. L etat persistant rend facile toutes les op erations de consultation et modication dans la couche dacc` es. Toutefois, quelques restrictions sappliquent aux objets persistants : Un seul un objet persistant peut exister ` a un instant donn e par identiant au cours dune session. Il peut etre dangereux de transf erer un objet persistant dans les couches sup erieures : on ne souhaite pas quun attaquant modie la base en touchant ` a une entit e persistante au dela de la couche m etier. Un objet persistant est souvent envelopp e automatiquement dans une classe Proxy par Hibernate, qui ne fonctionnera plus si lobjet session devient inaccessible.
67
eph em` ere ou d etach e Lobjet a et e fraichement cr e e avec lop erateur new. Que ce soit un tout nouvel objet ( eph em` ere) ou une copie dun objet persistant (d etach e), ou un objet persistant dont la session a et e ferm ee (aussi d etach e), cette instance nest pas li e e` a une ligne particuli` ere de la base de donn ee. Les modications ne sont donc jamais r epercut ees et lobjet disparaitra tout a fait normalement avec le garbage collector. Il peut etre judicieux de d etacher un objet persistant en le clonant avant de le renvoyer aux couches sup erieures. Un objet eph em` ere peut etre sauvegard e et rendu persistant avec [Link](...), un objet d etach e peut etre r eattach e avec [Link](...). Tous les appels qui concernent la base de donn ee doivent etre int egr ees dans une session, voire une transaction. Pour cela, on gardera en g en eral un pointeur eventuellement global vers un seul objet SessionFactory.
C o n f i g u r a t i o n c o n f i g = new C o n f i g u r a t i o n ( ) . c o n f i g u r e ( ) ; SessionFactory sessionFactory = config . buildSessionFactory () ;
On utilisera cet objet dans chaque fonction pour obtenir la session et une transaction avec
Session session = sessionFactory . getCurrentSession () ; s e s si o n . beginTransaction () ; // code de l a f o n c t i o n s e s s i o n . g e t T r a n s a c t i o n ( ) . commit ( ) ;
[Link]
Il sut de cr eer une instance ( eph em` ere) et de la sauvegarder avec save().
// on c r e e un o b j e t D e t a i l l e d A c c o u n t da = new D e t a i l l e d A c c o u n t ( 1 2 1 5 4 2 2 , Toto , 1 0 0 0 0 ) ; s e s s i o n . s a v e ( da ) ; // a p a r t i r de maintenant , da e s t p e r s i s t a n t . // i l s e r a e f f e c t i v e m e n t s a u v e g a r d e l o r s du p r o c h a i n commit
[Link]
requ ete
Le premier est synchrone (verrouillage, lenteur, ...) et renvoie null si aucun objet ne porte cet identiant dans la base, tandis que le second est un appel asynchrone (rapide, optimal, ...) MAIS renverra une exception fatale ` a la premi` ere utilisation de lobjet si lidentiant nexistait pas dans la base. Pour faire une requ ete et obtenir une liste dobjets, on exprimera la requ ete sous la forme dune suite de de crit` eres (Criteria)
68
L i s t <T r a n s a c t i o n > l i = s e s s i o n . c r e a t e C r i t e r i a ( T r a n s a c t i o n . c l a s s ) . add ( R e s t r i c t i o n s . o r ( R e s t r i c t i o n s . eq ( s e n d e r . number , numero ) , R e s t r i c t i o n s . eq ( r e c e i v e r . number , numero ) ) ) . l i s t () ; // Ceci c o r r e s p o n d ` a l a requ e t e SQL //SELECT * FROM T r a n s a c t i o n s // WHERE s e n d e r . number=numero OR r e c e i v e r . number=numero
Attention, tous les el ements de la liste r eponse sont persistants. Il faut la dupliquer pour les d etacher si necessaire. Par ailleurs, si la requ ete renvoie au plus un seul r esultat, on peut remplacer le .list() par un .uniqueResult() et r ecup erer lobjet directement.
[Link]
mise ` a jour
[Link]
suppression
69
Chapitre 12
12.1
Servlets
protected void doGet ( H t t p S e r v l e t R e q u e s t r e q u e s t , HttpServletResponse response ) throws S e r v l e t E x c e p t i o n , IOException { OutputStream out = r e s p o n s e . getOutputStream ( ) ; out . p r i n t l n ( <html><head>< t i t l e >Un Exemple </ t i t l e ></head><body ><div >) ; S t r i n g t o t o = r e q u e s t . g etP ara m eter ( t o t o ) ; i f ( t o t o != null ) { out . p r i n t l n ( Toto vaut + t o t o + . ) ; } else { out . p r i n t l n ( I l n y a pas de t o t o dans l a r e q u e t e ! ) ; } out . p r i n t l n ( </body ></html>) ; } protected void doPost ( H t t p S e r v l e t R e q u e s t r e q u e s t , HttpServletResponse response ) throws S e r v l e t E x c e p t i o n , IOException { [ . . . code pour s i l a r e q u e t e e s t de type POST . . . ] } }
70
Dans le code ci-dessous, on cr ee une servlet qui sera execut ee ` a chaque fois que lurl demand ee commencera par /toto/[Link]. Sil sagit dune requ ete HTTP GET, la fonction doGet() sera execut ee. Par exemple, la sortie de /toto/[Link] sera une page html contenant le message :
I l n y a pas de t o t o dans l a r e q u ete !
Bien entendu, il est possible de renvoyer en sortie nimporte quel format de chier, y compris binaire, en reparam etrant les headers avec par exemple
r e s p o n s e . setContentType ( image / j p e g ) ; response . write ( . . . ) ;
Par ailleurs, dans le cas particulier o` u la servlet communique directement avec une applet java, il est tout ` a fait possible de transmettre des objets java par serialisation
r e s p o n s e . setContentType ( a p p l i c a t i o n / o c t e t stream ) ; ObjectOutputStream out = new ObjectOutputStream ( r e s p o n s e . getOutputStream ( ) ) ; out . w r i t e O b j e c t ( unObjetJavaTresComplexe ) ;
12.2
De nombreuses servlets ont pour principale vocation de produire de simples chiers xhtml ou xml en sortie, et nont pas besoin davoir acc` es ` a toute la logique du langage java, en dehors dun ou deux appels ` a la couche de pr esentation. Il existe donc un langage appel e JSP, tr` es proche de XML (voire totalement XML dans la version 2.0) pour d ecrire des Servlets. Les balises JSP correspondent alors soit ` a des balises ` a ecrire sur la sortie, soit ` a des actions se traduisant par des appels de fonction java. En outre, il est possible d etendre JSP en cr eant de nouvelles balises (biblioth` eques de balises, ou taglibs) li ees ` a des actions Java arbitraires. La mani` ere la plus simple dappr ehender JSP est de consid erer quune page JSP est convertie textuellement en le code source dune Servlet, pour etre ` a son tour etre compil e par le compilateur Java.
12.2.1
Les donn ees statiques sont ecrites dans la r eponse HTTP exactement comme elles apparaissent dans le chier source. Un chier JSP sans code Java et sans action est donc un chier valide. Dans ce cas, les m emes donn ees sont envoy ees ` a chaque fois que la page est demand ee par le serveur HTTP. Bien s ur, lint er et des JSP est dins erer des donn ees dynamiques ` a lint erieur de ce contenu statique.
71
12.2.2
Directives JSP
Les directives contr olent la mani` ere dont le compilateur doit g en erer la servlet. Elles sont plac ees entre les symboles <%@ et %>, ou entre des balises XML de la forme <jsp :[Link] directive . . . /> en JSP 2.0. Directive include Description et exemple dutilisation Cette directive indique au compilateur dinclure un autre chier dans la page. Cest comme si le contenu du chier ` a inclure etait directement copi e dans le chier courant. Cette fonctionnalit e est similaire ` a celle oerte par le pr eprocesseur C.
<%@ i n c l u d e f i l e =u n A u t r e F i c h i e r % >
ou en JSP 2.0
<j s p : d i r e c t i v e . i n c l u d e f i l e =u n A u t r e F i c h i e r />
page
Il y a plusieurs options ` a cette directive : import Importe un paquetage (package) Java. Cette directive r esulte en une instruction import dans la servlet. contentType D enit le type de contenu de la page g en er ee. Par exemple, ce peut etre text/html pour du HTML. errorPage Indique la page ` a acher si une exception se produit pendant le traitement de la requ ete HTTP. isErrorPage Si cette valeur est ` a true, la page est une page derreur. isThreadSafe Indique si la servlet r esultante est prot eg ee pour les threads (ls dex ecution).
taglib
Directive qui indique quune biblioth` eque de balises doit etre utilis ee. Elle requiert quun pr exe soit utilis e (namespace) et lURI de la description de la biblioth` eque.
<%@ t a g l i b p r e f i x =m y p r e f i x u r i =t a g l i b /mytag . t l d % >
ou en JSP 2.0
< j s p : r o o t xmlns : m y p r e f i x =urn : / / t o / t a g l i b > </ j s p : r o o t >
12.2.3
[Link]
Les variables suivantes sont toujours disponibles dans une page JSP :
72
out Le JSPWriter utilis e pour envoyer la r eponse HTTP au client. request Objet repr esentant la requ ete HTTP. response Objet repr esentant la r eponse HTTP. session La session HTTP, qui peut etre utilis ee pour conserver de linformation ` a propos dun utilisateur dune requ ete ` a une autre. page La servlet elle-m eme (pas tr` es utilis ee). pageContext Une instance PageContext qui contient les donn ees associ ees ` a la page enti` ere. Une page HTML donn ee peut etre pass ee entre plusieurs JSP.
[Link]
ements de script El
Il y a 3 types basiques d el ements qui permettent dins erer du code Java dans la jsp.
73
ement El D eclaration ( !)
Description et exemple Une d eclaration permet dins erer du code directement dans la classe de la servlet. Elle peut etre utilis ee pour d enir un attribut ou une m ethodes Java.
<%! int v a r i a b l e D e C l a s s e = 0 ; % >
Ou
<j s p : d e c l a r a t i o n > int v a r i a b l e D e C l a s s e = 0 ; </ j s p : d e c l a r a t i o n >
Scriptlet
Un Scriptlet est utilis e pour placer du code dans la m ethode jspService() de la Servlet. Cest g en eralement l el ement utilis e pour placer tout code Java, sauf les m ethodes et les variables de classe.
<% int v a r i a b l e = 0 ; out . p r i n t l n ( On peut a u s s i e c r i r e des v a r i a b l e s : + variable ) ; % >
Ou
<j s p : s c r i p t l e t > int v a r i a b l e = 0 ; out . p r i n t l n ( On peut a u s s i e c r i r e des v a r i a b l e s : + variable ) ; </ j s p : s c r i p t l e t >
Expression (=)
Cet el ement sert ` a acher une expression. Ce code est donc ajout e` a la m ethode jspService(), comme param` etre ` a un appel [Link]().
V o i c i une v a r i a b l e : <%= v a r i a b l e % >
Ou
V o i c i une v a r i a b l e : < j s p : e x p r e s s i o n > v a r i a b l e </ j s p : e x p r e s s i o n>
Commentaire ()
Utilis e pour faire un commentaire dans le code JSP. Le texte dans un commentaire JSP ne sera pas envoy e au client ni compil e dans la servlet.
<% V o i c i un commentaire JSP %>
[Link]
Actions JSP
Les actions JSP sont des balises XML qui appellent des fonctions sur serveur HTTP. Les actions suivantes sont disponibles :
74
Description et exemple Agit de fa con similaire ` a lappel dune sous-routine. Le contr ole est temporairement donn e ` a une autre page, soit un autre chier JSP, soit un chier statique. Apr` es le traitement de lautre page, le contr ole est redonn e` a la JSP en cours dex ecution. En utilisant cette fonctionnalit e, le code Java peut etre partag e entre deux pages plut ot que dupliqu e.
< j s p : i n c l u d e page=p a g e A I n c l u r e . j s p > < j s p : param name=t o t o v a l u e =coucou /> </ j s p : i n c l u d e >
jsp :param
Peut etre utilis e dans un bloc <jsp:include>, <jsp:forward> ou <jsp:params>. Il indique un param` etre ` a etre ajout e aux param` etres actuels de la requ ete. Donne le contr ole de la requ ete et de la r eponse ` a une autre page JSP ou ` a une servlet. Le contr ole est d enitivement donn e. Pour etre appel ee, aucune ecriture ne doit avoir eu lieu sur la sortie (out) de la servlet.
< j s p : f o r w a r d page= r e d i r e c t i o n . j s p > < j s p : p a r a m name= t o t o v a l u e=coucou /> </ j s p : f o r w a r d>
jsp :forward
jsp :useBean
Cr ee ou r eutilise un Java bean d ej` a existant pour pouvoir lutiliser dans la page.
< j s p : useBean i d =nomDeBean c l a s s =package . Bean s c o p e =r e q u e s t />
jsp :getProperty
[Link] doit simplement etre une classe publique contenant un constructeur vide public. jsp :useBean cr ee une instance de [Link] et lajoute au contexte request. De plus, cela ajoute aussi une variable locale nomDeBean, utilisable dans les scriptlets. Retrouve la valeur dune propri et e provenant dun Java bean.
< j s p : g e t P r o p e r t y name=nomDeBean p r o p e r t y =montant />
equivaut ` a:
<%= nomDeBean . getMontant ( ) % >
jsp :setProperty
75
Chapitre 13
76
13.1