support de cours

Web Dynamique Web Mapping

cours n1 Introduction au fonctionnement du web

Emmanuel Fritsch cration septembre 2007, 2nde rvision aot 2009

Introduction au fonctionnement du web version !

"2#

1 Prambules 1.1 Objectifs du cours

$%ob&ectif de ce cours est de vous amener tr's rapidement ( la capacit de pro)rammer des pa)es web d*nami+ues simples! $e cours se compose d%une partie thori+ue, +ui prsente les principes )nrau, du web, et d%une srie de travau, prati+ues pro)ressifs, +ui permettent de dcouvrir pas ( pas les diffrentes composantes du web d*nami+ue!
-e cours constitue par ailleurs un pr re+uis du cours de web mappin)! .ous porterons donc un intr/t particulier ( l%afficha)e d%ima)es!

1.2 Organisation
-e cours comporte plusieurs documents 0 1 le prsent pol*copi, cours n2 , introduction essentiellement thori+ue, 1 le cours n22, centr sur le poste client 3456$, -77 et &avascript8, 1 le cours n2#, +ui vous apprendra ( )nrer des pa)es web d*nami+ues avec 949, 1 des 59 suivis permettant de prati+uer et d%tendre les diffrentes notions e,poses en cours!

1.3 Comment utiliser ce cours

-es documents sont con:us pour permettre plusieurs niveau, de lecture! ;ous pouve< vous contenter d%une lecture purement thori+ue, au cours de la+uelle vous vous contentere< de lire le te,te normal! $e te,te normal reprsente le contenu contractuel du cours! -e para)raphe est un e,emple de te,te normal! 9our rviser le cours, ou bien pour vous en faire une ide )nrale, vous pouve< vous contenter d%un survol des para)raphes importants, mis en valeur de la mani're suivante 0

-eci est un para)raphe important!

$es points importants vous donneront des informations de caract're )nral, ncessaires ( toute personne voulant comprendre le fonctionnement du web d*nami+ue! 9our une ac+uisition des techni+ues prsentes dans ce cours, nous vous demandons d%effectuer les e,ercices pro)ressifs rfrencs ici! $es e,ercices les plus simples seront inclus dans le te,te du cours! $es 59 un peu plus comple,es seront indi+us par un renvoi au, 59! $e para)raphe ci1dessous est un e,emple d%annotation! $es annotations contiennent des informations inutiles ( l%ac+uisition directe des comptences du cours, mais permettant parfois d%aller plus loin!
-es annotations re)roupent les di)ressions, les informations touchant ( la culture )nrale, les ides du professeur, ses doutes et ses humeurs! $es annotations peuvent servir aussi ( prsenter un concept important mais dvelopp ( la fin du cours 3par e,emple =>=?8! $e contenu du cours est ainsi hirarchis comme une arai)ne tisse sa toile 0 +uel+ues fils de dpart donnent la forme )lobale! -ette structure est rapidement

Introduction au fonctionnement du web version !

2"2#

complte d%un mailla)e )rossier! 9ro)ressivement, les lar)es mailles se remplissent d%un nouveau tissa)e, +ui les spare en mailles plus fines!

1.4 Prrequis du cours

-e cours s%adresse ( des tudiants a*ant au moins une petite connaissance de la pro)rammation! ;ous deve< savoir ce +u%est une variable, et /tre capable de mettre en @uvre une boucle simple! Il s%a)it d%une initiation A aucune connaissance du web n%est donc re+uise, en dehors bien sr de celle +ue doit avoir un utilisateur habituel d%Internet! 9our faire les e,ercices, vous deve< aussi savoir utiliser un diteur de te,te, comme .otepad, ou le Bloc1notes de Cindows, ou mieu, encore 0 .otepadDD! =vant de parler du web d*nami+ue, nous dcrirons les techni+ues de base du web stati+ue! E*nami+ue ou stati+ue, le fonctionnement du web repose sur des lan)a)es et des lo)iciels varis! $eur dcouverte en un seul cours vous demandera un peu d%a)ilit intellectuelle!

$a difficult principale est de bien identifier, lors+ue vous traite< une opration, sur +uel lo)iciel, ou sur +uel lan)a)e vous /tes en train de travailler!
9our mettre en @uvre les e,ercices et les travau, prati+ues, vous deve< naturellement disposer d%un ordinateur! -ertains e,ercices et 59 re+ui'rent +ue vous disposie< des droits d%administrateurs, pour installer et confi)urer le serveur! 7i vous ne dispose< pas d%un serveur, vous pouve< utiliser les pa)es perso de certains fournisseurs d%acc's, comme free!fr ou freesurf!fr, mais pour des raisons de commodits, &e vous recommande d%installer au moins eas*949 sur votre ordinateur!

=ucune connaissance des 7IF ni des 7FBE n%est re+uise!

Introduction au fonctionnement du web version !

#"2#

2 Le Web Statique 2.1 larchitecture client-ser eur

2.1.1 clients et serveurs
$ors+u%on connecte les ordinateurs en rseau, il devient intressant de concentrer certaines ressources 3cGest1(1dire des informations et des pro)rammes8 sur un seul ordinateur, et de permettre au, autres ordinateurs de se servir de ces ressources uni+uement lors+u%ils en ont besoin! -%est l%architecture client1serveur!

$e serveur, c%est l%ordinateur sur le+uel se trouve une ressource! $e client, c%est l%ordinateur +ui a le droit d%acc's ( la ressource sur le serveur

H I
fi)ure 1 schma de l%architecture client1serveur! 9lusieurs clients parta)ent les fichiers, les applications et les bases de donnes places en parta)e sur un serveur! $e trait pointill entre le serveur et les client illustre le fait +u%un client et un serveur peuvent /tre tr's loi)ns l%un de l%autre, par e,emple lors+u%on utilise Internet! = cJt des clients, le serveur poss'de un administrateur, +ui l%alimente en donnes, en pro)ramme et en base de donnes!

$es avanta)es de l%architecture client1serveur sont 0 o une conomie d%espace mmoire 3tous les postes clients vont chercher l%information en fonction de leurs besoins, et ne doivent pas la stocKer durablement8 o une )arantie de cohrence 3( cha+ue instant, le serveur constitue un rfrentiel uni+ue, identi+ue pour tous les clients, alors +u%une duplication sur cha+ue poste client entraLne )nralement une diver)ence entre les diffrentes versions, et une perte du rfrentiel commun8! -ette )arantie de cohrence est particuli'rement souhaitable lors+ue l%information subit des mises ( &our! o Mne maLtrise du service 3le )estionnaire du serveur contrJle ce +ue les pro)rammes clients peuvent faire ou ne pas faire sur le serveur8! $e premier avanta)e est de nature ph*si+ue! $es deu, autres touchent directement ( l%or)anisation du travail et des processus!
Introduction au fonctionnement du web version ! N"2#

$ors+u%on parle de O client P et de O serveur P, il peut s%a)ir ( la fois de l%ordinateur et du pro)ramme +ui tourne sur cet ordinateur!

Eans la suite de ce cours, O client P et O serveur P dsi)neront les pro)rammes! $es ordinateurs seront e,plicitement dsi)ns par O ordinateur client P et O ordinateur serveur P! 2.1.2 application Internet
Internet est l%e,emple e,tr/me d%architecture client1serveur 0 cha+ue serveur est potentiellement accessible par des millions de clients! Qn peut dire +ue le Ceb illustre de mani're ai)uR les avanta)es de l%architecture client1serveur 0 chacun est libre de dcider de ce +u%il met en li)ne, chacun poss'de en permanence le droit d%accder ( un volume de donnes plus d%un million de fois suprieur ( ses capacits de stocKa)e personnelles! 7ur le web, o le serveur s%appelle O serveur internet P! $e pro)ramme le plus utilis est =pache! o le client s%appelle navi)ateur, 3ou bien browser, ou butineur8! $es pro)rammes les plus utiliss sont Internet E,plorer et Firefo,, puis Qpera! Eans le cadre de ce cours, nous utiliserons le serveur =pache, et le navi)ateur FireFo,! 9our la pro)rammation de site web, il est recommand de tester cha+ue pa)e avec Internet E,plorer et FireFo,!

2.2 les !rotocoles

2.2.1 Quest-ce quun protocole ?
Mn protocole est une convention de communication entre deu, ordinateurs! $ors+ue deu, ordinateurs communi+uent entre eu,, ils utilisent ( cha+ue fois plusieurs protocoles en m/me temps, et ces protocoles sont inclus les uns dans les autres!

$e dialo)ue entre le client et le serveur repose sur toute une srie de protocoles imbri+us les uns dans les autres!
>%ai lon)temps eu du mal ( comprendre cette histoire de protocoles imbri+us! $e plus simple pour le comprendre est de se reprsenter le protocole comme un lan)a)e! $ors+ue vous crive< un messa)e ( un autre /tre humain, vous trace< des si)nes sur du papier! $e fait de tracer des si)nes au st*lo ou ( la plume sur un post1it +ue l%on colle sur le fri)o, c%est le premier niveau du protocole! En informati+ue, on parle de protocole ph*si+ue, car nous sommes ici au niveau du si)nal ph*si+ue! 9our le post1it coll sur le fri)o, cela si)nifie par e,emple O liste de courses P! .otre messa)e est ensuite compos de lettres! Qn peut dire +ue la convention alphabti+ue est le premier protocole lo)i+ue de votre communication! E%autres humains utilisent d%autres protocoles, par e,emple les ido)rammes ou les s*llabaires! Ensuite, les lettres sont re)roupes en mots! -ha+ue mot porte un sens 0 c%est le le,i+ue! $a convention le,icale est le deu,i'me protocole de votre communication! $es mots sont eu,1m/mes re)roups en phrases, selon les r')les de la )rammaire 0 la )rammaire de la phrase est le troisi'me protocole de la communication! =vec les

Introduction au fonctionnement du web version !

S"2#

m/mes mots, vous pouve< utiliser des )rammaires diffrentes! 9ar e,emple, si =deline laisse ( Barnab une liste de courses sur un post1it, elle utilise une numration ( la place de la )rammaire fran:aise! $%analo)ie de l%emboLtement des protocoles ne doit pas /tre pousse trop loin! $a )rande diffrence, en particulier, c%est +ue pour crire un messa)e, =deline doit maLtriser tous les protocoles! =u contraire, dans un pro)ramme informati+ue, les protocoles sont encapsuls les uns dans les autres, et un pro)ramme +ui utilise le protocole de plus haut niveau ne doit pas utiliser les protocoles de niveau, infrieurs 3ou en tout cas ne devrait pas les utiliser8! $e protocole de plus haut niveau est l( pour mas+uer, ou TencapsulerT ceu, de niveau infrieur!

2.2.2 Les protocoles Internet

2.2.2.1 TC !I
$e protocole de base +ui structure Internet 3pas seulement le web, mais aussi les autres composantes d%Internet, comme le F59 et le mail8 s%appelle 5-9"I9! Ee fait, il s%a)it d&( de deu, protocoles imbri+us 0 5-9 et I9! 5-9"I9 permet de transformer les si)nau, ph*si+ues en information numri+ue! Eans la pro)rammation d%un site web, on utilise un protocole lo)i+ue +ui s%appuie sur 5-9"I9, et le navi)ateur n%a pas connaissance de ce protocole 0 5-9"I9 n%est mentionn ici +ue pour information, et nous n%en parlerons plus dans la suite du cours!

2.2.2.2 "TT #e protoco#e du web

=u dessus de 5-9"I9, le web repose sur le protocole 4559! 4559 est le protocole spcifi+ue du web! 4559 si)nifie 0 "yper$Te%t Transfert rotoco#e

4559 est donc la lan)ue dans la+uelle le serveur et le client dialo)ue!

9our e,plorer les arcanes de ce protocole 4559, &e vous conseille de lire l%e,cellent chapitre N du livre sur >ava dans la collection Q%Ueill*! $e livre se trouve ( la biblioth'+ue de l%cole! E%autres rfrences sont faciles ( trouver sur Internet!

2.3 le ser eur

$e serveur &oue en premier lieu un rJle de distributeur de fichiers! =utour de ce rJle de serveur de fichiers, il peut rendre diverses sortes de services!

2.!.1 le serveur" un serveur e #ic$iers $e rJle du serveur est d%abord d%aller chercher, lors+u%on lui en fait la re+u/te, le fichier rclam, puis de le renvo*er au demandeur!

Introduction au fonctionnement du web version !

V"2#

1 Requte HTTP
www.bidule.fr/truc.html

!
Fichier HTML encapsul en rponse HTTP

affic'age

truc.html

navi)ateur I() *etscape) +irefo%) etc.

serveur internet &pac'e

fi)ure 2 1l%itinraire d%une re+u/te 0 1 le navi)ateur demande un fichier au serveur, 21le serveur va chercher le fichier dans son s*st'me de fichier, #1le serveur poste le fichier au navi)ateur, N1 le navi)ateur re:oit le fichier et l%affiche!

2.!.2 le rpertoire racine

$ors+ue vous consulte< une pa)e internet, vous n%ave< acc's +u%( une petite partie des fichiers installs sur la machine serveur!

-%est aussi le rJle du serveur de limiter la <one ( la+uelle les clients peuvent avoir acc's!
-ette limitation de la <one accessible depuis l%e,trieur est absolument ncessaire pour des raisons de scurit! $e rpertoire accessible depuis l%e,trieur, +ue nous appellerons le rpertoire de la racine web, est dfini par l%administrateur! 7ur =pache, la confi)uration de ce rpertoire se fait au mo*en de l%e,pression suivante 0
DocumentRoot "c:/Apache/visibleWeb"

-ette li)ne de confi)uration est place dans le fichier +ui re)roupe la plupart des variables de confi)uration d%=pache, nomm httpd.conf, +ue l%on trouve dans le dossier conf!

Introduction au fonctionnement du web version !

7"2#

c ! Pro"ram Files! apache!

truc.html

wwwroot!

machin!

bidule!

fi)ure #! 7eule une petite partie des rpertoires du serveur est accessible depuis Internet!

2.!.! a##ic$a&e es ossiers

7ur certains sites internet, lors+u%on tape un nom de rpertoire 3par e,emple http0""mnib&b!free!fr"e,o"8 on voit apparaLtre le contenu du rpertoire, avec tous ces fichiers! En revanche, lors+ue dans la barre d%adresse de mon navi)ateur, &e tape www!ens)!eu, &e ne vois pas le contenu du rpertoire racine, mais &%obtiens le m/me rsultat +ue si &e tapais www!ens)!eu"inde,!html! Ee fait les deu, adresses pointent sur un seul fichier 0 inde#.html!

-%est encore le rJle du serveur +ue de traiter les re+u/tes sur les rpertoires 0 le serveur cherche le fichier nomm inde#.html dans le rpertoire! 7i un tel fichier s%* trouve, il le renvoie au client! 7inon, il lui renvoie le contenu du rpertoire!
En fait, c%est l%administrateur du serveur +ui dfinit les noms possibles pour les fichiers d%inde,! $a confi)uration de la liste des noms d%inde, se fait au mo*en de la li)ne suivante 0 $irector%&nde# inde#.html' inde#.php' inde#.php(' panta"ruel.php =vec cette confi)uration, le serveur teste d%abord s%il e,iste dans le rpertoire un fichier inde,!html! 7%il n%e,iste pas, il teste ensuite successivement l%e,istence des fichiers inde,!php, inde,!php#, panta)ruel!php! $e premier fichier trouv est renvo* au client! 7i aucun des +uatre n%est trouv, le serveur renvoie le contenu du rpertoire!

2.!.% Les erreurs

$e serveur est aussi responsable de la )estion des erreurs dans la conne,ion avec le client! Mtilisateurs d%Internet, vous ave< d&( eu l%occasion de rencontrer l%erreur N0N, lors+ue le client rclame un fichier +ue le serveur ne trouve pas! Il e,iste d%autres erreurs, dont les codes sont spcifis par 4559!

-%est le serveur +ui )n're la pa)e d%erreur, avec son code, et les ventuelles e,plications!

Introduction au fonctionnement du web version !

W"2#

2.!.' (onclusion
$e serveur ne &oue donc pas seulement un rJle de distributeur 0 il rend par ailleurs une srie de services anne,es! -ertains de ces services sont fi,s par le protocole 4559! E%autres sont contraints par =pache, ou paramtrs par son administrateur! $es +uel+ues services lists ci1dessus ne reprsentent +u%une toute petite partie des services rendus par le serveur!
9armi les autres services, il * en a un +ui est asse< important, c%est la )estion du cache! $e cache, c%est une portion de la mmoire de l%ordinateur client +ui est rserve au stocKa)e des pa)es web +u%on a d&( visites dans le pass! $ors+ue vous tape< l%adresse d%un fichier, par e,emple www!ens)!i)n!fr, votre navi)ateur re)arde si le fichier se trouve dans son cache! 7i le fichier demand est prsent, et s%il n%est pas trop vieu,, le navi)ateur dcide de ne pas le redemander au serveur! =insi, on conomise de la bande passante! $a )estion du cache est assure ( la fois par le serveur et par le navi)ateur! 9our plus de prcision sur le cache, reporte< vous au, spcifications de 4559! 9our rsoudre un probl'me techni+ue rapidement, consulte< les documentations en li)ne de 949 et 456$ 3fonction header38, ta) 6E5=8! Xuel+ues pistes dans les liens suivants 0 1 http0""www!die!net"musin)s"pa)eYloadYtime" 1 http0""www!commentcamarche!net"forum"affich12W9NV1)estion1du1cache1du1navi)ateur =ttention, le cache ne concerne pas seulement la machine client 0 il peut * avoir un ou plusieurs caches sur la machine serveur, en particulier dans le cadre du Ceb d*nami+ue! -ertaines applications de web d*nami+ue permettent de )rer e,plicitement le cache 3voir par e,emple 7pip, -artoCeb, etc!8, mais cela dpasse le cadre de ce cours!

2.4 le client
2.%.1 le lan&a&e )*+L
456$ si)nifie 0 4*per 5e,t 6arK1up $an)ua)e, c%est1(1dire lan)a)e d%h*per1te,te fond sur des balises! Xu%est1ce +u%un document d%h*per1te,te H -%est un document +ui permet de passer ( un autre document lors+u%on cli+ue sur une <one prvue pour cela et appele #ien 'yper$te%te! -ha+ue document peut porter plusieurs liens h*per1te,te, ce +ui permet ( cha+ue internaute de piloter sa lecture parmi les diffrents documents +ui lui sont accessibles!

456$ est un lan)a)e de structuration de document pour la navi)ation en h*per1te,te! $a structure du document est code au mo*en des balises!
Xu%est1ce donc +u%une balise H $e mieu, est de prendre un e,emple 0
)p* +eci est un para"raphe que ,e peu# remplir de blabla)/p*

E,plication 0 o Qn commence un para)raphe avec la balise )p*! -%est la balise ouvrante! o Mne balise, c%est tout ce +ui se trouve entre ) et *! o Qn ferme le para)raphe avec la balise )/p*! Mne balise fermante prsente la m/me forme +u%une balise ouvrante avec seulement le -/- devant le nom de la balise! o Entre la balise ouvrante et la balise fermante, nous avons un ob&et para)raphe! -et ob&et para)raphe contient du te,te!

Introduction au fonctionnement du web version !

9"2#

-%est ce te,te +ue nous vo*ons apparaLtre ( l%cran dans le navi)ateur! $es balises n%apparaissent pas 0 elles sont l( pour donner une structure au document!

Mn fichier 456$ est constitu de morceau, de te,tes structurs par des balises! $e navi)ateur interpr'te les balises pour donner une mise en pa)e au te,te!
$ors+ue vous ave< un acron*me informati+ue +ui finit par O 6$ P, il * a de fortes chances pour +ue ce soit un lan)a)e ( base de balises! $es seules e,ceptions +ue &e connaisse sont M6$ 3unified modelisation lan)ua)e8 et Z=6$ 3Z=6$ =inGt 6arKup $an)ua)e acron*me rcursif pour un lan)a)e de structuration de donnes +ui n%est &ustement pas un lan)a)e ( base de balises8 A dans tous les autres cas, 6$ si)nifie O marK1up lan)ua)e P!

E,ercice 0 a! tape< l%e,emple prcdent dans un diteur de te,te! Enre)istre<1le, dans un fichier e,ercice !html, puis ouvre< le dans votre navi)ateur! b! le lan)a)e 456$ n%est pas un protocole! 9ouve<1vous dire pour+uoi H "TM- P! 9our en savoir plus, vous pouve< commencer le chapitre O premier pas a,ec

2.%.2 (SS et #euilles e st,le $e lan)a)e -77 permet de dfinir des st*les +ue l%on va associer au code 456$! -es st*les permettent de donner une forme homo)'ne ( une pa)e 456$, voire ( tout un site! Qn peut modifier ainsi l%aspect de plusieurs pa)es en chan)eant simplement une seule feuille de st*le!
9our en savoir plus, vous pouve< commencer ( lire O premier pas a,ec C.. P!

2.%.! linclusion une ima&e

-omment se passe l%inclusion d%une ima)e dans un document 456$ H .ous allons dcrire ce fonctionnement, +ui permet d%illustrer le fonctionnement du client et du serveur! Eans le code 456$, une ima)e est reprsente par la balise suivante 0
)im" src./carte."if/ width./012/ hei"ht./32/ *

Ecomposons 0 1 im" 0 on ouvre un ob&et ima)e! -omme il n%* a pas de te,te dans une ima)e, la balise fermante est inutile! im", le premier mot de la balise, dfinit la nature de cette balise 0 ici, une ima)e! Qn dit +ue c%est le nom de la balise! 5out ce +ui suit correspond au, attributs de cette balise! 1 src./carte."if/ 0 le navi)ateur pourra afficher l%ima)e en allant chercher le fichier spcifi ici! 1 width./012/ 0 lar)eur, 1 hei"ht./32/ 0 et hauteur, en pi,els, de l%ima)e ( l%cran
-es deu, derniers attributs sont optionnels! 7i ils sont omis, l%ima)e apparaLtra selon ses dimensions d%ori)ine! 7i on met un seul des deu, attributs de dimension, le deu,i'me est recalcul selon les proportions de l%ima)e d%ori)ine! Qn peut prciser d%autres attributs, par e,emple border pour mettre un cadre autour de l%ima)e!

Introduction au fonctionnement du web version !

0"2#

-e +ue nous devons noter, c%est +ue l%ima)e ne se trouve pas stocKe dans le code 456$! -e +u%on trouve dans le code 456$, c%est l%adresse de l%ima)e! $e navi)ateur char)e donc la pa)e en deu, temps 0

www.bidule.fr/truc.html

Requte HTTP 1 !
Fichier HTML encapsul en rponse HTTP
&ppe# de #/image

&ffic'age incomp#et

% 5

truc.html

www.bidule.fr/carte."if

'
Insertion de #/image

.
Transfert de l4ima"e en rponse HTTP

carte."if

fi)ure N 1 =fficha)e d%une pa)e avec une ima)e! 1 appel de la pa)e 456$! 21 le serveur va chercher le fichier 456$, #1 et l%envoie au client! N1 le client affiche le fichier 0 comme il * a une ima)e dedans, il rserve la place pour l%ima)e, et il appelle le fichier de cette ima)e sur le serveur! S1 $e serveur attrape l%ima)e, et V1 la renvoie au client! 71 le client re:oit l%ima)e et l%ins're dans la pa)e!

2.%.% - les plu&-in le navi)ateur ne permet pas de tout faire! 9our tendre les capacits des navi)ateurs, il est possible de leur brancher des pro)rammes additionnels! -e sont les plu)1in!
$e plu)1in est un pro)ramme indpendant +ue l%on peut lancer depuis une pa)e 456$, et +ui fonctionne ( l%intrieur de la pa)e! 9ar e,emple, la pa)e 456$ peut contenir un film, ou bien une musi+ue! -e film ou cette musi+ue ne sont pas cod sous forme 456$ 3lan)a)e totalement incapable de coder de la musi+ue ou des ima)es animes8! $a pa)e 456$ contient 0 o le nom du fichier correspondant au film ou au morceau de musi+ue o le nom du pro)ramme 3du plu)1in8 +ui doit servir ( interprter le fichier! 7i le plu)1in n%est pas prcis, le navi)ateur peut le dterminer automati+uement en fonction de l%e,tension du fichier! o +uel+ues informations prcisant la fa:on dont le plu)1in s%ins're dans la pa)e 456$!
7eul le nom du fichier est obli)atoire! 7i le plu)1in n%est pas prcis, le navi)ateur peut le dterminer automati+uement en fonction de l%e,tension du fichier! $es informations prcisant la fa:on dont le plu)1in s%ins're dans la pa)e 456$ dpendent de la nature de cha+ue fichier! 9ar e,emple, pour un film, il faut prciser la dimension de l%cran dans le+uel apparaLtra l%ima)e! -es informations sont inutiles pour un morceau de musi+ue!

Introduction au fonctionnement du web version !

"2#

$%e,emple le plus connu de plu)1in est Flash! En afficha)e carto)raphi+ue, on utilise aussi des plu)1in pour interprter le lan)a)e 7;F! .ous aurons l%occasion de parler de ces deu, plu)1in dans d%autres cours! 6ais de nombreu, autres plu)1in sont tr's utiliss 0 6ediapla*er, -osmo9la*er! $a machine virtuelle >ava &oue aussi le rJle de plu)1in!

Introduction au fonctionnement du web version !

2"2#

Le /eb ,namique 0 larc$itecture

$e Ceb +ue nous avons dcrit &us+u%ici est purement stati+ue 0 cha+ue adresse correspond ( une pa)e, et cha+ue pa)e est un fichier +ui s%affiche de mani're univo+ue sur votre navi)ateur! =vec le web d*nami+ue, nous allons avoir des pa)es +ui pour une m/me adresse peuvent prendre des formes diffrentes selon les actions de l%utilisateur! 9our obtenir une pa)e chan)eante, nous disposons de deu, techni+ues 0 1 soit c%est le serveur +ui construit une nouvelle pa)e, +u%il envoie au client 3scripts cJt serveur8 1 soit le client re:oit une pa)e fi,e, et il modifie cette pa)e 3scripts cJt client8 Eans la prati+ue, nous verrons +ue les deu, mthodes peuvent /tre utilises sur la m/me pa)e, mais comme elles reposent sur des techni+ues diffrentes, et +u%il ne faut pas les confondre, nous allons les dcrire sparment!

3.1 scri!t c"t ser eur # P$P

7ur le serveur, il est possible de faire tourner des pro)rammes +ui vont )nrer automati+uement du code 456$! 949 est l%un des lan)a)es de script cJt serveur, et probablement le plus utilis! .ous allons voir comment fonctionne ce lan)a)e!

$e code 949 est constitu de morceau, de script, inclus dans du code 456$! $ors+ue le fichier 949 est interprt, les morceau, de scripts affichent les parties variables de la pa)e! $e code 456$ reste inchan) 0 il reprsente les parties fi,es!

1 Requte HTTP
www.bidule.fr/truc.php

2 % '
affic'age
Fichier HTML "nr' encapsul dans HTTP

!
"

truc.php

navi)ateur I() *etscape) +irefo%) etc.

My.0-

fi)ure S! 1 $e serveur =pache re:oit la re+u/te 4559! 21Il va chercher le fichier 949 correspondant! #1 il identifie +ue ce fichier est un fichier 949, et il l%envoie au module +ui interpr'te les scripts 949! N1 le module d%interprtation )n're du code 456$, +ui est post vers le client! S1 $e client affiche le code 456$ comme si c%tait une pa)e normale!

Introduction au fonctionnement du web version !

#"2#

;oici un e,emple de code 949 0

)6php 7nom./8ictor Hu"o/ 9 6* )p*:on,our )6php echo 7nom 9 6*' ,e suis heureu# de ;ous ;oir )/p*

5outes les <ones encadres T)6phpT et T6*T sont considres comme du code 949, et interprtes par le serveur! Ici, la premi're li)ne est une affectation de variable! $a deu,i'me li)ne effectue un afficha)e au mo*en de l%instruction echo!

$%afficha)e se fait dans le code 456$, ( l%endroit o[ se trouve l%instruction echo!

=u final, l%interprteur 949 produit le code 456$ suivant 0
)p*:on,our 8ictor Hu"o' ,e suis heureu# de ;ous ;oir )/p*

-%est ce code 456$ +ue le client va recevoir! 5el +u%il est prsent ici, le code 949 n%est pas tr's intressant, car la variable 7nom est +uivalente ( une constante! 6ais les variables 949 &ouent rellement le rJle de variables lors+ue leur valeur est dtermine ailleurs +ue dans la pa)e 949 0 les scripts peuvent recevoir des variables depuis un formulaire 456$, ou bien encore ils peuvent aller les chercher dans une base de donnes! 9our en savoir plus, vous pouve< commencer ( lire O premier pas en " P!

Il e,iste d%autres lan)a)es +ui permettent de construire des applications web d*nami+ues! $e concurrent direct de 949 est =79, le produit de 6icrosoft! Qn peut citer aussi 9*thon et 9erl!

3.2 %cc&s au' bases de donnes

7ur la fi)ure S, 949 tait branch sur 6*7X$! 6*7X$ est un 7FBE 37*st'me de Festion de Base de Eonnes8, c%est1(1dire un pro)ramme +ui assure la cohrence, le stocKa)e et l%interro)ation des donnes dans une base de donnes!

5outes les donnes importantes d%un site web doivent /tre stocKes dans une base de donnes!
9armi les nombreu, 7FBE du march, il faut en connaLtre +uel+ues uns de nom 0 o 1rac#e est le 7FBE histori+ue! -%est la solution la plus robuste, la solution commerciale la plus utilise! -%est aussi la plus ch're! o My.0- est un 7FBE relativement simple, )ratuit et tr's populaire! Il est recommand pour les protot*pes et pour les applications simples! $e lo)iciel 79I9, par e,emple, utilise m*7X$!

Introduction au fonctionnement du web version !

N"2#

ost2re.0- est un peu plus compli+u +ue 6*7X$! Il est )ratuit lui aussi! Il comporte un module spatial 3la cartouche spatiale8 +ui permet de manipuler de l%information )o)raphi+ue! $e module spatial de 9ostFre7X$ se nomme 9ostFI7! Eans ces 7FBE, les donnes sont ran)es dans des tab#es 3ce sont en ralit comme des tableau, de donnes8! Eans ces trois 7FBE, on manipule les donnes et les tables au mo*en d%un lan)a)e appel .0-! o Eans le cadre de ce cours, nous utiliserons 6*7X$ et 9ostFre7X$!

3.3 (cri!ts cot client ) ja ascri!t

>avascript est un lan)a)e de script +ui permet de modifier une pa)e 456$ et de la rendre plus interactive!
9ar e,emple 0 1 sur le site de la 7.-F, lors+ue &e cli+ue sur le bouton de date, &%affiche un mini calendrier +ui me permet de choisir une date en cli+uant dessus! 1 7ur certains sites O folKlori+ues P, lors+ue &e bou)e la souris, le curseur est suivi d%une +ueue de com'te! 1 7ur certaines pa)es, &e peu, cli+uer sur un bouton O fermer la fen/tre P 3et la fen/tre alors se ferme8! 1 7ur certains sites, les ti+uettes de survol peuvent /tre tr's dcoratives, comme sur cette pa)e 0 http0""www!bosrup!com"web"overlib"HFeatures 5outes ces actions sont obtenues au mo*en de &avascript!
$es effets obtenus avec >avascript peuvent aussi bien /tre cods dans un plu)1in comme Flash! .anmoins, il vaut mieu, rserver Flash pour le dessin et les animations vectorielles! 9our manipuler la mise en pa)e, les formulaires, les <ones d%afficha)e, les st*les, etc!, on prf'rera )nralement >avascript 0 directement branch sur la pa)e 456$, il permet de manipuler facilement les diffrents lments de la pa)e! $%utilisation des plu)1in prsente en effet plusieurs inconvnients 0 1 le plu)1in n%est pas tou&ours install sur toutes les machines 1 l%interaction entre le plu)1in et le reste de la pa)e internet n%est pas tou&ours facile ( assurer! 1 9our le dveloppeur, le code &avascript est tellement rpandu +u%un )rand nombre de ressources sont disponibles sur Internet!

E,ercice 2 0 a! aller sur le site de rservation en li)ne de la 7.-F 3http0""www!vo*a)es1 sncf!com8 pour tester le calendrier! b! +uelle est la date ma,imale +u%on peut atteindre sur ce calendrier H 9our en savoir plus, vous pouve< commencer ( lire O premier pas en 3a,ascript P!

3.4 quelle utilisation *

9our+uoi est1il intressant d%avoir des scripts ( la fois sur le serveur et sur le client H o $es scripts du cJt client doivent servir au, oprations +ui concernent directement l%interaction avec l%usa)er! Il est intressant par e,emple de faire e,cuter sur le client les oprations de vrification des champs d%un formulaire 0 il est inutile de faire de

Introduction au fonctionnement du web version !

S"2#

multiples tentatives de soumission d%un formulaire si l%usa)er n%a pas rempli tous les champs d%un formulaire, et ne les a pas remplis de mani're correcte! Eans ce cas, un script sur le client peut faire la vrification +ue les valeurs entres dans le formulaire sont correctes! o $es scripts du cJt serveur doivent servir au, oprations lourdes, +ui consomment des donnes! Mne opration +ui utilise des informations prsentes dans une base de donnes doit /tre plac sur le serveur! Ee m/me, une opration +ui manipule des donnes ou des al)orithmes sensibles ne doivent pas aller sur le client 0 elle doit donc /tre traite sur le serveur! Il n%* a pas de r')les absolues pour faire le parta)e entre ce +ui doit tourner sur le client et ce +ui doit tourner sur le serveur! -ertaines oprations pourront /tre )res des deu, cJts! =insi, pour la vrification d%un formulaire, outre la premi're vrification sur le client, pour une meilleure fluidit et une conomie de bande passante, il est recommand d%en mettre en place une deu,i'me sur le serveur, pour assurer la scurit des donnes!

3.+ ,a ascri!t est-il uni ersel *

Ee nombreu, cours internet affirment +uGun bon site web doit prvoir une navi)ation sans &avascript! Il est vident +ue lGutilisation de &avascript rend un site un peu moins accessible, en particulier au, dficients visuels +ui utilisent des clients spcialiss, ainsi +uG( certains clients mobiles! 9our un site carto)raphi+ue, nanmoins, sauf ( passer par un plu)1in, il est tr's difficile de se passer de &avascript, +ui assure des fonctions importantes de navi)ation! $a navi)ation sans &avascript est possible 3cGest celle +ue lGon utilise dans certains 59 dans les cours de Ceb 6appin)8 mais elle n%est pas tr's er)onomi+ue!

3.- .es coo/ies

E,ercice # 0 a! =lle< sur le site O de 9articulier ( 9articulier P! b! consulter les annonces 3par e,emple 0 clic sur location, puis recherche un studio dans le 7S8 c! mette< une ou deu, annonces dans votre panier d! re)arde< le contenu de votre panier e! fermer votre navi)ateur, puis relancer sur le m/me site! f! relancer une consultation d%annonces )! vrifier +ue votre panier est tou&ours disponible =vec cette manipulation tr's simple, vous vo*e< +ue sans &amais avoir entr votre nom ni vos coordonnes, l%ordinateur vous a identifi, et est capable de retrouver vos informations personnelles! -omment cela est1il possible H

En ralit, ce n%est pas vous +ui /tes reconnu par le serveur, c%est votre navi)ateur!

Introduction au fonctionnement du web version !

V"2#

$ors de la premi're communication en 4559, le serveur envoie au client une variable +ue le navi)ateur va 0 1 stocKer un certain temps 3fi, par le serveur8 1 envo*er au serveur ( cha+ue nouvelle re+u/te 4559! -ette variable vhicule par 4559 s%appelle un cooKie! $a dure de validit du cooKie est fi,e par le serveur! $e cooKie peut rester valable pour un temps donn, ou bien il peut /tre effac ( la fin de la session! E,ercice N 0 a! effacer les cooKies du site du 9articulier 3chercher la mthode sur internet8! b! recommencer une consultation des annonces 0 votre panier maintenant doit /tre vide! c! 5rouver sur la machine le fichier contenant le cooKie correspondant au site du 9articulier! d! Xuels sont les noms et les valeurs des variables, et la dure de validit des cooKies placs sur votre machine par le site pap!fr H =ide 0 1 -onsulter l%article CiKipedia sur les cooKies http0""fr!wiKipedia!or)"wiKi"-ooKieY \2Winformati+ue\29 1 7ur vos dis+ues durs locau,, chercher les fichiers contenant le mot Tpap!frT!
$e mcanisme des cooKies est ( la base d%une fonctionnalit de 949 +ui s%appelle les sessions! Mne session est un cooKie spcial +ui permet ( 949 d%identifier et de suivre un navi)ateur entre le moment o[ il commence ( navi)uer sur un site et le moment o[ il +uitte le site! $e serveur lit la variable de session comme il lit un cooKie! 7on criture seule est plus simple!

Introduction au fonctionnement du web version !

7"2#

% Le Web 2.1
Il est d%usa)e au&ourd%hui de parler de web 2 'me )nration, sous le vocable de Ceb 2!0! =u1 del( de l%effet de mode, il e,iste plusieurs technolo)ies +ui permettent d%offrir au client des fonctionnalits et un confort de navi)ation inaccessibles au, technolo)ies du web traditionnel! $e confort de navi)ation est principalement assur par =>=?! $es nouvelles fonctionnalits sont distribues sous la forme de web services et d%=9I client!

4.1 %,%0
;ous consulte< une carte au milieu d%une pa)e, avec un menu ( )auche, la l)ende ( droite, et les outils de navi)ation au1dessus! 7ur une pa)e web classi+ue, lors+ue vous cli+ue< dans la l)ende pour a&outer une couche sur votre carte, c%est la totalit de votre pa)e +ui est rechar)e sur le serveur! Ici, avec =>=?, seule la carte va chan)er! ;ous utilise< Fmail 0 vous cli+ue< sur un messa)e, le contenu du messa)e s%affiche sans +ue le reste de la pa)e ait chan)! $( encore, Fmail utilise =>=? pour obtenir ce rsultat!

=>=? est une mthode +ui permet ( >avascript d%interro)er le serveur pour modifier certaines <ones de la pa)e sans avoir ( tout rechar)er! -ela assure une navi)ation d*nami+ue plus fluide!
9our bien comprendre le )ain obtenu )r]ce ( =>=?, e,aminons pour commencer le droulement d%une navi)ation sur internet en mode h*per1te,te archa^+ue 0
Interface utilisateur
requte #$%

navigateur

+ moteur )avascript

affic age Page 1

+ 23

tml
d!lai in!vita"le et peu gnant

+ initialisation

+ fic iers associ!s

&img' scripts' css(

Clic sur le zoom Page morte Effet blink Page 2

+ 23

affic age + r!-initialisation

tml
d!lai inutile et plus gnant

+ fic iers associ!s

&aspilla&e e ban e passante

&aspilla&e ressource serveur

fi)ure V 7chma de char)ement1rechar)ement de pa)e avec un client carto)raphi+ue archa^+ue!

Introduction au fonctionnement du web version !

re-&nration u contenu

requte HTTP

&nration u contenu

requte HTTP

serveur

W"2#

5oute action sur la carte provo+ue un rechar)ement et une rinitialisation de la pa)e! = cha+ue fois +u%on fait une action, le navi)ateur rechar)e la pa)e! 9our le navi)ateur, les versions et 2 de la pa)e sont indpendantes! Mne partie des fichiers sont certes stocKes en cache, mais pas tous, et tout le travail d%initialisation 3instanciation des variables, calcul d%afficha)e8 doit /tre refait ( cha+ue fois 0 lors du rechar)ement, l%tat de la pa)e est perdu et doit /tre rechar) et recalcul! Ee droite ( )auche, on note les dsavanta)es de cette architecture 0 1 le serveur doit re)nrer tout le contenu de la pa)e 1 le rseau doit transporter tout le contenu 3m/me si une bonne politi+ue de cache permet de diminuer le volume transport8 1 la r1initialisation de la pa)e blo+ue le client +uel+ues instants 3tr's courts, mais perceptibles, m/me en haut dbit8 1 auparavant, la pa)e a subi un saut 3effet blink8 visuellement fati)ant pour l%utilisateur 1 si l%utilisateur a demand trois mouvements vers la droit, le serveur va en offrir un nombre alatoire entre un et trois! =vec =>=?, la )estion de la navi)ation est retire au navi)ateur, pour /tre confie ( son moteur &avascript 0 c%est lui +ui va lancer les re+u/tes, en interprter le rsultat, et modifier sur la pa)e les seuls <ones +ui en ont besoin! $a pa)e n%est pas rechar)e en bloc!
Interface utilisateur
requte #$%

navigateur

+ moteur )avascript

affic age Page 1

+ 23

tml
d!lai in!vita"le et peu gnant

+ initialisation
(lient l&er

+ fic iers associ!s

&img' scripts' css(

Clic sur le zoom lance requte +,+Page conserv!e $emplacement de l*!l!ment modifi!

moteur 4avascript

!l!ment modifi! &image ou autre(

+ -

23

fi)ure 7 principe du client l)er 0 apr's une phase d%initialisation, les manipulations de l%utilisateur ne provo+ue pas le rechar)ement complet de la pa)e! $e client l)er, pro)ramme tournant en &avacript, envoie au serveur les re+u/tes permettant de mettre ( &our la pa)e, en ne modifiant +ue les <ones +ui doivent chan)er!

7i vous ave< fait les 59 d%initiation ( &avascript et 949, vous pouve< vous lancer dans O premier pas a,ec &4&5 P!

Introduction au fonctionnement du web version !

&nration u contenu utile

requte HTTP

&nration u contenu

requte HTTP

serveur

9"2#

4.2 .es 1eb (er ices.

Mn Ceb 7ervice, c%est une pa)e d*nami+ue +ui n%est pas faite pour /tre affiche directement, mais +ui est con:ue pour /tre int)re dans d%autres pa)es web d*nami+ues!
$e navi)ateur appelle une pa)e d*nami+ue, sur un serveur, et ce serveur va lui1m/me chercher de l%information dans une autre pa)e web d*nami+ue! $e premier serveur &oue donc le rJle du client par rapport au second serveur! -ette architecture porte le nom d/arc'itecture 6$tiers, et le serveur intermdiaire est souvent appel midd#eware!
Midd#eware

1 .
*a,igateur

2
age dynamique

Web ser,ice

'

- affic'age

fi)ure W architecture #1tiers utilisant un web service 0 1 le navi)ateur appelle une pa)e d*nami+ue! 21 le serveur lance le calcul de la pa)e d*nami+ue! #1 $a pa)e d*nami+ue utilise un web service 0 le serveur appelle le web service! N1 $e web service est lui1m/me une pa)e +ui d*nami+ue 0 cette pa)e d*nami+ue est calcule! S1 le rsultat du Ceb service est envo* ( l%appelant! V1 le serveur finit de produire la pa)e d*nami+ue, et la poste au .avi)ateur, +ui 71 l%affiche!

Eans la prati+ue, un web service, c%est un serveur web +ui fait une partie du travail ( votre place! 9ar e,emple 0 vous voule< afficher un plan d*nami+ue sur votre site, mais vous n%ave< pas les donnes pour faire le fond de carte, et vous n%ave< pas envie de dpenser votre ar)ent pour acheter ces donnes, ni de perdre votre temps ( pro)rammer ce fond de carte! Qu bien encore 0 vous n%ave< pas le droit dGinstaller un serveur carto)raphi+ue sur votre machine serveur! 9lutJt +ue de calculer un fond de carte d*nami+ue, vous alle< chercher un fond de carte directement sur Internet! -omme vous voule< +ue votre plan soit d*nami+ue, il faut +ue votre fond de carte soit d*nami+ue aussi 0 ( cha+ue fois +ue votre pa)e d*nami+ue est calcule, elle va chercher le fond de carte dont elle a besoin sur une autre pa)e d*nami+ue!

Introduction au fonctionnement du web version !

20"2#

9our assurer la discussion entre les deu, serveurs 3le web service et le middleware8, il faut structurer l%information pour lui donner une forme standard! Qn utilise pour cela un protocole +ui encapsule 4559! $%un de ces protocoles le plus utilis s%appelle 7Q=9 37ervice Qriented =rchitecture 9rotocol8, mais d%autres formats de web services sont possibles, par e,emple C67 pour les services carto)raphi+ues!

4.3 .es %P2 ja ascri!t

Mne =9I &avascript est une biblioth'+ue de fonctions &avascript +ue vous pouve< utiliser pour obtenir rapidement des effets intressants sur votre pa)e web! -e sont des aides ( la pro)rammation de pa)es web! -ertaines sont tr's simples ( utiliser, s%int)rant facilement dans un site web pour lui offrir des fonctionnalits nouvelles! E%autres constituent des boite ( outils pour faciliter les t]ches du pro)rammeur! 9armi les =9I les plus populaires au&ourd%hui fi)urent les =9I carto)raphi+ues, dont Foo)le 6ap est la plus connue, mais +ui comptent aussi Zahoo 6ap et 67. ;irtual Earth! Elles prsentent une architecture spcifi+ue 0
age Dynamique

1 ! 2
age dynamique

.er,eur de #/& I *a,igateur

% .
affic'age

'

fi)ure 9 architecture d%une application utilisant une =9I carto)raphi+ue! ( # dcrivent l%interro)ation de la pa)e d*nami+ue! N ( V dcrivent l%intero)ation du serveur carto)raphi+ue! $e rsultat des deu, re+u/tes est fusionn sur le navi)ateur, par &avascript!

=ttention, d%une part toutes les =9I ne sont pas des =9I carto)raphi+ues, d%autre part toutes les =9I n%ont pas besoin de faire des acc's rseau 0 l%architecture prsente ici correspond ( celle des =9I carto)raphi+ues, et en )nrale de toutes celles +ui utilisent un serveur!
$e code &avascript +ui permet d%interro)er le serveur de l%=9I fonctionne avec =>=?! 9our des raisons de scurit, ce code ne peut pas se trouver sur la pa)e d*nami+ue! Il se trouve obli)atoirement sur le serveur de l%=9I! 9our en savoir plus, consulte< l%article O 7ame Qri)in 9olic* P de CiKipedia!

Introduction au fonctionnement du web version !

2 "2#

' (onclusion
Ee ce document, vous deve< avoir retenu au minimum les points suivants 0
456$ est un lan)a)e de structuration et de mise en page de documents h*per te,tes! 949 est un lan)a)e de script cJt ser,eur +ui permet de )nrer des pa)es d*nami+ues en 456$! -77 est un lan)a)e de dfinition de st*le! >avascript est un lan)a)e de script cJt c#ient! 6*7X$ et 9ostFre7X$ sont des .27D accessibles depuis 949 selon une s*nta,e .0-! Ils permettent de stocKer des donnes de mani're fiable et structure! 9our faire un site web d*nami+ue et interactif, nous allons utiliser tous ces lan)a)es! .ous devons donc nous familiariser avec chacun d%eu,!

Introduction au fonctionnement du web version !

22"2#

. Sommaire

9rambules !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!2 ! Qb&ectifs du cours !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!2 !2 Qr)anisation!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!2 !# -omment utiliser ce cours!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!2 !N 9rre+uis du cours!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!# 2 $e Ceb 7tati+ue!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!N 2! l%architecture client1serveur!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!N
2.1.1 clients et serveurs...................................................................................................................................4 2.1.2 application Internet.............................................................................................................................5

2!2 les protocoles!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!S

2.2.1 Quest-ce quun protocole ?...................................................................................................................5 2.2.2 Les protocoles dInternet.......................................................................................................................6

2!2!2! 5-9"I9!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!V 2!2!2!2 4559 le protocole du web!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!V 2!# le serveur !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!V

2. 2. 2. 2. 2. .1 le serveur! un serveur de "ic#iers...........................................................................................................6 .2 le r$pertoire racine................................................................................................................................% . a""ic#a&e des dossiers............................................................................................................................' .4 Les erreurs ............................................................................................................................................' .5 (onclusion..............................................................................................................................................)

2!N le client !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!9

2.4.1 le lan&a&e *+,L...................................................................................................................................) 2.4.2 (-- et "euilles de st.le..........................................................................................................................1/ 2.4. linclusion dune i0a&e........................................................................................................................1/ 2.4.4 - les plu&-in..........................................................................................................................................11

# $e web d*nami+ue l%architecture!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! # #! script cJt serveur 949!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! # #!2 =cc's au, bases de donnes!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! N #!# 7cripts cot client 0 &avascript !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! S #!N +uelle utilisation H !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! S #!S >avascript est1il universel H !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! V #!V $es cooKies!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! V N $e Ceb 2!0!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! W N! =>=?!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! W N!2 $es Ceb 7ervices! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!20 N!# $es =9I &avascript !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!2 S -onclusion!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!22 V 7ommaire!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!2#

Introduction au fonctionnement du web version !

2#"2#