Conception D'un Site WEB

Plan du cours
Conception d'un site WEB
u Historique u HyperDocuments u Site Web u Atelier de dveloppement u Pages statiques : langage HTML u Programmation CGI : langage Perl u Pages dynamiques : Javascript
Jean DEMARTINI 14.02.00
Historique
u Projet "World Wide Web" prsent en 1989, au CERN
(Genve), par Tim Berners Lee : pour un rseau mondial d'change d'informations.
u De nombreux lments favorables :
l dveloppement du rseau de transport Internet, l systme distribu pour l'annuaire des machines (DNS), l besoin de la communaut mondiale des physiciens (10 000
chercheurs),
l une ide simple, l comptences de l'initiateur du projet.
HyperDocuments
u Structure de document adapte la consultation
informatique :
l petites pages, l liens de navigation entre pages, l exemples : documents Videotex, aides en ligne...
u Etendue au Multimedia :
l liens vers des "pages sonores" ou des "pages video".
u La consultation d'un hyperdocument ncessite des
outils de navigation adapts : butineurs (browsers), navigateurs, fureteurs ...
Navigateurs clbres
u Un des premiers : Mosaic. u Le plus rpandu : Netscape navigator. u Le dernier en date : Internet Explorer. u Un navigateur joue plusieurs rles :
l prsentation d'un hyperdocument, l accs aux pages distantes en suivant les liens.
u De nombreux greffons de prsentation : les plugins.

l documents imprimer : formats .pdf ... l squences sonores : formats .au, .wav ... l images fixes : formats .gif, .jpeg ... l images animes : formats .avi, .mov, .mpeg ...
WYSIWYG ? srement pas !

u Brisons immdiatement un mythe actuel. u C'est la structure d'un hyperdocument qui est dcrite
et non pas sa prsentation : langage HTML (HyperText Mark Up Language).

u Le navigateur interprte cette description puis
compose le document "au mieux" compte tenu du contexte.

l rsolution de l'cran, l couleurs disponibles, l polices disponibles, l taille des images afficher, l taille de la fentre d'affichage.
Un type de document, une structure Conception d'un site WEB

u Un roman se lit :
l les pages se suivent, l quelques notes de bas de page, l une table des matire trs sommaire.
u Un rapport technique se consulte :

l les pages se suivent, l des notes de bas de page, l des renvois dans le document (texte, figures...), l des renvois en annexe, l une table des matires fournie, l un index, l une bibliographie (renvois hors du texte).
Documents interactifs
u Quelques constatations :
l un cran est petit (en gnral), l lire un cran est pnible, l changer d'cran est rapide.
u Certains documents gagnent tre interactifs :

l notices techniques, l documents de prsentation, l documentations commerciales.
u Certains documents ne peuvent pas tre interactifs :

l documents de rflexion.
Un journal, un site Web

u Un journal est conu autour de sa une qui :

l identifie le journal (logo, typographie, mise en page), l attire l'oeil (couleurs, iconographie), l donne envie d'acheter le journal pour lire la suite des articles
introduits " la une".
u Un service Web poursuit souvent les mmes objectifs
et sera structur de la mme faon.

u Un dtail important :
l les frais de consultation, et donc l'assiduit du client, sont fonction
du temps de chargement des pages.
Structure d'un hyperdocument

9
u Un hyperdocument est articul autour de sa page
d'accueil : la home page.

u La home page reprsente un compromis difficile :
l doit tre attrayante, colore, anime, l doit tre claire, l doit se charger vite !
u Le document doit tre structur de telle sorte qu'on
ne s'y perde pas :

l danger de la prsence de trop de liens externes.
Edition sur le Web

10
u Le rseau peut simplement servir de support de
diffusion pour un ouvrage :

l pas de frais d'impression, l pas de frais de distribution.
u Le service correspondant a la structure d'une librairie
virtuelle et ne propose qu'un catalogue d'ouvrages.

u Les documents "intressants" sont sous une forme
imprimable essentiellement :
l format postscript, l format acrobat.
Localisation d'un document

11
u Un document Web est repr par son URL (Unique
Ressource Location).
u URL la plus simple :
protocole://serveur/
u URL courante :
protocole://serveur/repert/.../document
u Quelques exemples :
http://www.inria.fr/ http://www.ti.com/ http://www.yahoo.com/ http://verdon.unice.fr/~jdem/
Architecture de fichiers Web

12
/ usr bin racine de l'hte
...
local ... ... etc
...
racine du serveur htdocs
espace du serveur
Protection des documents

13
u Le systme de protection est double :

l protection de base des fichiers par le systme d'exploitation de
l'hte (Unix, Windows NT ...),

l protection des documents par le serveur lui-mme.
u Le serveur Web peut autoriser l'accs :

l aux lecteurs enregistrs : nom, mot de passe l aux lecteurs accdant depuis un domaine particulier (au sens
TCP/IP),
l aux lecteurs accdant depuis une machine particulire.
u Attention. Nous verrons qu'il est possible, dans
certains cas, de contourner ces protections.
World Wide Web

14
Serveur de pages
domaine domaine Serveur "proxy" Serveur de noms (DNS)
Client
Quelques protocoles utiles

15
HTTP : FTP : SMTP :
protocole d'change de documents HTML (HyperText Transfert Protocol) protocole d'change de fichiers quelconques (File Transfert Protocol). protocole d'change de courrier lectronique.
TELNET : protocole de connexion distance.
Atelier de dveloppement
16
u Tout au long de ce cours nous supposerons que nous
nous trouvons dans la configuration suivante :

l le serveur est hberg sur une machine Unix, le logiciel-serveur
Web tant Apache.

l le poste de dveloppement est une machine en rseau de type PC
sous Windows 95 ou Windows NT.
u Le poste de dveloppement utilis :

l un outil pour la conception de sitesWeb : Dreamweaver de
Macromedia,
l un outil de dessin pour la construction ou la mise en forme des
images : Fireworks de Macromedia,

l un outil de transfert de fichiers : WS_FTP, l un outil de connexion distance : telnet, l un navigateur : Internet Explorer 5.0.
Outils HTML
17
u Il existe de nombreux diteurs HTML :

l Front Page de Microsoft, l HoT Metal de SoftQuad, l Homesite de Allaire, l Dreamweaver de Macromedia, ...
u Ceux qui permettent une dition WYSIWYG donnent
des rsultats trs intressants aujourdhui.

u Il existe galement des convertisseurs de format
pouvant donner d'assez mauvais rsultats.

l deux exceptions : LateX2HTML et RTF2HTML.
Outils de dessin
18
u Les images utilises sous de type bitmap. u Il existe de nombreux outils de dessin bitmap :
l Paint Shop Pro de JASC, l 3D Studio, l Fireworks de Macromedia, ...
u Un outil de dessin doit tre capable de :

l lire et produire diffrents formats d'image : .gif et .jpeg au moins, l de produire des dessins fond transparent,
u l'interfaage avec un scanner (format twain par
exemple) est utile.
Outils de validation
19
u La prsentation d'une page Web dpendant du
navigateur, il est ncessaire de disposer de quelques navigateurs sous diffrentes versions pour tester le look d'une page :
l Nestscape 3.0 et 4.x les versions 4.x est la plus rpandue, l Internet Explorer 4.0 et 5.0 les versions antrieures sont
beaucoup trop rustiques.

l Cest la version Internet Explorer 5.x qui, aujourdhui permet laccs
au plus grand nombre de sites.
Outils de transfert de fichiers

20
u Le service est construit sous la forme d'une maquette
dans l'espace disque du poste de dveloppement. Lorsqu'il est valid, il faut le transfrer dans l'espace disque du serveur.
u WS_Ftp de IPSwitch donne d'excellents rsultats.
Outil de connexion distance Conception d'un site WEB

u Certains paramtrages et mme certains
21
dveloppements (programmation CGI) ne peuvent se faire et/ou se valider que sur le serveur lui-mme.
u Il est donc indispensable de pouvoir se connecter
distance.
u QVT/Net de QPC Software donne d'excellents
rsultats.
Le langage HTML
22
u Ces quelques URL http://... vous donneront accs
une information complmentaire.

l www.w3.org/ l www.w3.org/TR/REC-html32.html l nephi.unice.fr/CoursHTML/ l www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml
u Le langage HTML dcrit la structure d'un document
l'aide de balises qui dlimitent un lment du document

l <NOM_de_BALISE paramtres>...</NOM_de_BALISE>
u Tout document HTML est dlimit par :

l <HTML>...</HTML>
Structure d'un document HTML Conception d'un site WEB
23
u Un document HTML comprend toujours 2 lments :

entte : <HEAD>...</HEAD> corps : <BODY paramtres>...</BODY>
u La structure de base d'un document HTML est alors :

<HTML> <HTML> <HEAD> <HEAD> ... ... </HEAD> </HEAD> <BODY <BODY paramtres paramtres> > ... ... </BODY> </BODY> </HTML> </HTML>
En-tte de document
24
u Une en tte comprend deux parties :

l un titre de la page, l une base de rfrence
u Le titre de la page est dcrit par :

<TITLE>...</TITLE>
u La base de rfrence dfinit la racine d'accs par
dfaut toutes les URL utilises dans la page :

<BASE HREF="URL">
u Si la base de rfrence n'est pas dfinie, toutes les
URL utilises sont repres par rapport au rpertoire de la page en cours.

Ma premire page HTML

25
<HTML> <HTML> <HEAD> <HEAD> <TITLE>Ma <TITLE>Ma première première page</TITLE> page</TITLE> </HEAD> </HEAD> <BODY> <BODY> Ma Ma première première page page Web. Web. </BODY> </BODY> </HTML> </HTML>
dfinition du caractre ""

Et pour la voir ?
26
u Tout d'abord, il faut taper le texte prcdent en
utilisant un diteur de textes (pas un traitement de textes) :

l EDIT de DOS l NOTEPAD de Windows 3.x l WORDPAD de Windows 95 (en mode texte).
u Cette page est, par exemple, la page d'accueil de
votre futur service :

l la sauvegarder sous le nom index.html dans le rpertoire qui
servira de racine la maquette de votre service.
u Utiliser un navigateur, hors connexion, en simple
consultation de fichier local.

La voici !
27
Son titre
Quelques prcisions
28
u Il est souvent utile d'inclure des commentaires dans
votre description de page :

<! -- auteurs : Tom & Jerry -->
u Le texte en commentaire n'est pas interprt par le
navigateur.
u Un premier pseudo-commentaire est utilis par le
navigateur pour dterminer la version du langage HTML utilise dans la page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Caractres spciaux
29
u La plupart des alphabets comportent des caractres
utilisant des signes diacritiques qui sont indisponibles sur le clavier utilis. Ces caractres ont donc t cods :
u Exemples :

é è ê à ü ç
ô â ê ï ë
Paragraphes...
30
u En fait notre premire page a t accepte par le
navigateur par pure gentillesse car elle contient un paragraphe non signal. Il faudrait la dcrire par :
<!DOCTYPE <!DOCTYPE HTML HTML PUBLIC PUBLIC "-//W3C//DTD "-//W3C//DTD HTML HTML 3.2 3.2 Final//EN"> Final//EN"> <HTML> <HTML> <HEAD> <HEAD> <TITLE>Ma <TITLE>Ma première première page</TITLE> page</TITLE> </HEAD> </HEAD> <BODY> <BODY> <P>Ma <P>Ma première première page page Web.</P> Web.</P> </BODY> </BODY> </HTML> </HTML>
...Paragraphes
31
u La meilleure prsentation d'un paragraphe est
dtermine par le navigateur lorsqu'il compose la page.

u Pour faciliter la comprhension de la structure du
document HTML, on prsente, en gnral, les paragraphes sur une seule ligne (pouvant largement dborder de l'cran de saisie).
Ma deuxime page HTML

32
u On remarque les indentations qui facilitent la lecture.

<!DOCTYPE <!DOCTYPE HTML HTML PUBLIC PUBLIC "-//W3C//DTD "-//W3C//DTD HTML HTML 3.2 3.2 Final//EN"> Final//EN"> <HTML> <HTML> <HEAD> <HEAD> <TITLE>Ma <TITLE>Ma première première page</TITLE> page</TITLE> </HEAD> </HEAD> <BODY> <BODY> <P>Ma <P>Ma première première page page Web.</P> Web.</P> <P>Un <P>Un deuxième deuxième paragraphe paragraphe permet permet de la de la meubler meubler un un peu.</P> peu.</P> </BODY> </BODY> </HTML> </HTML>
Que voici
33
Les paragraphes
Elments d'une page

34
u Une page peut comporter :

l des paragraphes, l des titres de paragraphes, l des images, l des ancres (liens), l des listes puces, numros, descriptives, l des tableaux, l des formulaires, l des dcorations.
u Des portions de textes peuvent tre mises en
vidence en utilisant diffrents styles.
Titres de paragraphes...
35
u On dispose de 6 niveaux de titres :

<Hn paramtres>...</Hn> avec n = 1..6 <BODY> <BODY> <H1 <H1 ALIGN="LEFT">Niveau ALIGN="LEFT">Niveau 1</H1> 1</H1> <H2 ALIGN="CENTER">Niveau <H2 ALIGN="CENTER">Niveau 2</H2> 2</H2> <H3 <H3 ALIGN="RIGHT">Niveau ALIGN="RIGHT">Niveau 3</H3> 3</H3> <H4 <H4 ALIGN="JUSTIFY">Niveau ALIGN="JUSTIFY">Niveau 4 4: : Ce Ce titre titre est est censé censé être être justifié.</H4> justifié.</H4> </BODY> </BODY>
...Titres de paragraphes
36
Styles de paragraphes...
37
u Les paragraphes peuvent tre :

l aligns gauche, l aligns droite, l centrs.
<BODY> <BODY> <P <P ALIGN="LEFT">On ALIGN="LEFT">On the the night night of of 3rd 3rd December December the the <P <P ALIGN="CENTER">On ALIGN="CENTER">On the the night night of of 3rd 3rd December December <P <P ALIGN="RIGHT">On ALIGN="RIGHT">On the the night night of of 3rd 3rd December December th th </BODY> </BODY>
...Styles de paragraphes
38
Quelques dcorations
39
u On peut introduire des ruptures de lignes par <BR> u On peut galement introduire des traits de sparation
par <HR paramtres>

u Les espaces excdentaires sont supprims sauf sil
sont forcs par

<BODY> <BODY> <P>Un contenir <P>Un paragraphe paragraphe peut peut contenir un un saut saut à à la la ligne ligne interne interne comme comme ici ici :<BR> :<BR> sans sans que que pour pour autant autant on on quitte quitte le le paragraphe.</P> paragraphe.</P> <P>On <P>On peut peut galement galement introduire des introduire des traits traits de sparations</P> de sparations</P> <HR <HR ALIGN="LEFT" ALIGN="LEFT" SIZE="2" SIZE="2" WIDTH="100" WIDTH="100" NOSHADE> NOSHADE> <HR <HR ALIGN="CENTER" ALIGN="CENTER" SIZE="4" SIZE="4" WIDTH="100" WIDTH="100" COLOR="Navy"> COLOR="Navy"> <HR <HR ALIGN="RIGHT" ALIGN="RIGHT" SIZE="8" SIZE="8" WIDTH="100"> WIDTH="100"> </BODY> </BODY>
Pour voir ceci...

40
Ou bien cela !
41
Multicolonnage
42
u Certains navigateurs permettent le multicolonnage du
texte.
<BODY> <BODY> <MULTICOL <MULTICOL COLS="2" COLS="2" WIDTH="100%" WIDTH="100%" GUTTER="10"> GUTTER="10"> <P <P ALIGN="JUSTIFY">Sans ALIGN="JUSTIFY">Sans doute doute les les notes notes que que nous nous entendons entendons <P <P ALIGN="RIGHT"><I>Du ALIGN="RIGHT"><I>Du côté côté de de chez chez Swann Swann -M M </MULTICOL> </MULTICOL> </BODY> </BODY>
Ce qui donne ceci...

43
Ou bien cela
44
Styles physiques
45
u Les styles physiques sont des conteneurs permettant
de dfinir le style d'affichage d'une portion de texte :

<B>...</B> <I>...</I> <U>...</U> <SUP>...</SUP> <SUB>...</SUB> <TT>...</TT> en gras, en italique, souligne, en exposant, en indice, en style tltype.
Portion Portion de de texte texte <B>en <B>en gras</B>,<BR> gras</B>,<BR> Portion Portion de de texte texte <I>en <I>en italique</I>,<BR> italique</I>,<BR> Portion Portion de de texte texte <U>soulignée</U>,<BR> <U>soulignée</U>,<BR> Portion Portion de de texte texte <SUP>exposant</SUP>,<BR> <SUP>exposant</SUP>,<BR> Portion Portion de de texte texte <SUB>indice</SUB>,<BR> <SUB>indice</SUB>,<BR> Portion Portion de de texte texte <TT>en <TT>en style style télétype</TT>. télétype</TT>.
Ce qui donne
46
Styles logiques
47
u Les styles logiques sont des conteneurs permettant
de dfinir un style d'affichage laiss la discrtion du navigateur :

l <STRONG>...</STRONG> l <EM>...</EM> l <BLOCKQUOTE>...</BLOCKQUOTE> l <PRE>...</PRE> l <ADRESS>...</ADRESS>
pour insister, pour mettre en vidence, une citation, tel quel, une adresse.
<P>Cette <P>Cette portion portion de de texte, texte, <STRONG>j'insiste</STRONG>, <STRONG>j'insiste</STRONG>, ne ne <EM>doit <EM>doit pas pas être être négligée</EM>. négligée</EM>. Sun Sun Tse Tse dit dit :</P> :</P> <P><BLOCKQUOTE>Prenez <P><BLOCKQUOTE>Prenez le le nom nom de de tous tous vos vos officiers, officiers, inscrivezinscrivezles les sur sur un un répertoire répertoire spécial spécial avec avec l'indication l'indication de de leurs leurs capacités capacités et et de de leurs leurs aptitudes, aptitudes, afin afin que que chacun chacun soit soit employé employé suivant suivant ses ses qualités.</BLOCKQUOTE></P> qualités.</BLOCKQUOTE></P>
Prsentation Netscape 3.0

48
Les listes
49
u HTML permet la dfinition de 3 types de listes :

l listes puce : <UL>...<LI>...</UL> l listes numrotes : <OL>...<LI>...</OL> l listes descriptives : <DL>...<DT>...<DD>...</DL>
u Les puces peuvent tre choisies parmi :
l n
u Les numrotations peuvent tre choisies parmi :

l 1. 2. 3. ... l a. b. c. ... l A. B. C. ... l i. ii. iii. ... l I. II. III. ...
Listes puces
50
<MULTICOL <MULTICOL COLS="2" COLS="2" WIDTH="100%" WIDTH="100%" GUTTER="10"> GUTTER="10"> <P>Un <P>Un bon bon pot-au-feu pot-au-feu nécessite nécessite :</P> :</P> <UL <UL TYPE="DISC"> TYPE="DISC"> <LI>des <LI>des poireaux, poireaux, <LI>des <LI>des carottes, carottes, <LI>des <LI>des navets. navets. </UL> </UL> <BR> <BR> <P>Un <P>Un bon bon pot-au-feu pot-au-feu nécessite nécessite :</P> :</P> <UL <UL TYPE="SQUARE"> TYPE="SQUARE"> <LI>des <LI>des poireaux, poireaux, <LI>des <LI>des carottes, carottes, <LI>des <LI>des navets. navets. </UL> </UL> </MULTICOL> </MULTICOL>
Prsentes ainsi
51
Les listes numrotes

52
<MULTICOL <MULTICOL COLS="2" COLS="2" WIDTH="100%" WIDTH="100%" GUTTER="10"> GUTTER="10"> <P>Un <P>Un bon bon pot-au-feu pot-au-feu nécessite nécessite :</P> :</P> <OL <OL TYPE="1"> TYPE="1"> <LI>des <LI>des poireaux, poireaux, <LI>des <LI>des carottes, carottes, <LI>des <LI>des navets. navets. </OL> </OL> <BR> <BR> <P>Un <P>Un bon bon pot-au-feu pot-au-feu nécessite nécessite :</P> :</P> <OL <OL TYPE="I"> TYPE="I"> <LI>des <LI>des poireaux, poireaux, <LI>des <LI>des carottes, carottes, <LI>des <LI>des navets. navets. </OL> </OL> </MULTICOL> </MULTICOL>
Prsentes ainsi
53
Les listes de dfinitions

54
u Ce type de liste est particulirement indiqu pour
construire un glossaire ou un dictionnaire.

<DL> <DL> <DT>FLAMBARD<DD>n. <DT>FLAMBARD<DD>n. m. m. <I>Fam.</I> <I>Fam.</I> Fanfaron, Fanfaron, orgueill orgueill <DT>FLAMBEAU<DD>n. <DT>FLAMBEAU<DD>n. m. m. Torche, Torche, chandelle chandelle de de cire cire ou ou <DT>FLAMBÉE<DD>n. <DT>FLAMBÉE<DD>n. f. f. Feu Feu clair clair de de menu menu bois. bois. </DL> </DL>
u Si les termes dfinir sont courts, on peut la
compacter.
<DL <DL COMPACT> COMPACT> <DT>N<DD>Newton. <DT>N<DD>Newton. <DT>Nm<DD>Newtonmètre. <DT>Nm<DD>Newtonmètre. <DT>Oe<DD>Oersted. <DT>Oe<DD>Oersted. </DL> </DL>
Prsentes ainsi
55
Ou ainsi
56
Listes imbriques
57
u Des listes de diffrentes natures peuvent tre
imbriques
<P>Un <P>Un bon bon pot-au-feu pot-au-feu nécessite nécessite :</P> :</P> <UL <UL TYPE="DISC"> TYPE="DISC"> <LI>des <LI>des poireaux poireaux : : <UL <UL TYPE="SQUARE"> TYPE="SQUARE"> <LI>des <LI>des petits, petits, <LI>des <LI>des moyens, moyens, <LI>des <LI>des gros. gros. </UL> </UL> <LI>des <LI>des carottes, carottes, <LI>des <LI>des navets. navets. </UL> </UL>
Ce qui donne
58
Les images
59
u Les pages Web sont souvent parsemes de petits
lments dcoratifs obtenus par inclusion d'images. <IMG SRC="..." paramtres>

u La balise d'inclusion d'images comporte de trs
nombreux paramtres :
l ALIGN= TOP | MIDDLE | BOTTOM | LEFT | RIGHT l HSPACE= marge horizontale (pixels) l VSPACE= marge verticale (pixels) l WIDTH= largeur de l'image (pixels) l HEIGHT= hauteur de l'image (pixels) l BORDER= paisseur de l'encadrement (pixels)
Inclusion d'une image

60
<P> <P>
SRC="Image16.gif" SRC="Image16.gif" WIDTH=200 WIDTH=200 HEIGHT=145 HEIGHT=145 BORDER=0 BORDER=0 ALIGN="LEFT" ALIGN="LEFT" HSPACE=20 HSPACE=20 VSPACE=10> VSPACE=10> Sans Sans doute doute les les notes notes que que nous nous entendons entendons alors, alors, tendent tendent déjà, déjà, selon selon leur leur hauteur hauteur et et leur leur quantité, quantité, à à couvrir couvrir devant devant nos nos yeux yeux des des surfaces surfaces de de dimensions dimensions variées, variées, à à tracer tracer des des arabesques, arabesques, à à nous nous donner donner des des sensations sensations de de largeur, largeur, de de ténuité, ténuité, de de stabilité, stabilité, de de caprice.</P> caprice.</P> <P>Mais <P>Mais les les notes notes sont sont évanouies évanouies avant avant que que ces ces sensations sensations soient soient assez assez formées formées en en nous nous pour pour ne ne pas pas être être submergées submergées par par celles celles qu'éveillent qu'éveillent déjà déjà les les notes notes suivantes suivantes ou ou même même simultanées.</P> simultanées.</P>
<IMG <IMG
Aspect visuel
61
Paramtres d'inclusion
62
u Interprtation des paramtres d'inclusion :
vspace height
width
hspace
Paramtres d'alignement
63
<P <P ALIGN="CENTER"> ALIGN="CENTER"> <IMG <IMG SRC="Image17a.gif"></P> SRC="Image17a.gif"></P> <P>Cette <P>Cette image image <IMG <IMG SRC="Image17b.gif" SRC="Image17b.gif" ALIGN="TOP"> ALIGN="TOP"> est est alignée alignée <IMG <IMG SRC="Image17b.gif" SRC="Image17b.gif" ALIGN="MIDDLE"> ALIGN="MIDDLE"> de de différentes différentes <IMG <IMG SRC="Image17b.gif" SRC="Image17b.gif" ALIGN="BOTTOM"> ALIGN="BOTTOM"> façons.</P> façons.</P> <P>On <P>On remarque remarque que que son son fond fond à à été été rendu rendu transparent.</P> transparent.</P>
Effets de prsentation
64
Fond d'cran
65
u Une image peut galement servir de fond d'cran.
<BODY <BODY BACKGROUND="Image18.gif"> BACKGROUND="Image18.gif"> <P <P ALIGN="CENTER"><IMG ALIGN="CENTER"><IMG SRC="Image17a.gif" SRC="Image17a.gif" <P><B>Cette <P><B>Cette image image <IMG <IMG SRC="Image17b.gif" SRC="Image17b.gif" <P><B>On <P><B>On remarque remarque que que son son fond fond à à &eacu &eacu </BODY> </BODY>
Image de fond et transparence Conception d'un site WEB
66
Les ancres
67
u Les ancres indiquent des extrmits de liens vers
d'autres documents.
u Un lien peut pointer vers :
l un autre document : lien externe, l un autre endroit de la page en cours : lien interne.
u Une ancre peut ainsi dfinir un point de dpart :
<A HREF= "URL">cliquable</A>

u Elle peut galement signaler un point d'arrive :
<A NAME= "tiquette">non cliquable</A>
Schma de liens externes simples Conception d'un site WEB

<BODY> <BODY> index.html <P>...<A <P>...<A HREF="p1.html">Page HREF="p1.html">Page 1</A>...</P> 1</A>...</P> <P>...<A <P>...<A HREF="p2.html">Page HREF="p2.html">Page 2</A>...</P> 2</A>...</P> <P>...<A <P>...<A HREF="p3.html">Page HREF="p3.html">Page 3</A>...</P> 3</A>...</P> ... ... </BODY> </BODY>
68
<HTML> <HTML> ... ... <HTML> <HTML> </HTML> </HTML> ... ... <HTML> <HTML> </HTML> </HTML>... ... </HTML> </HTML>
p1.html p2.html p3.html
Schma de liens internes

69
<BODY> <BODY> <P>...<A <P>...<A HREF="#p1">Page HREF="#p1">Page 1</A>...</P> 1</A>...</P> ... ... <P>...<A <P>...<A HREF="#p2">Page HREF="#p2">Page 2</A>...</P> 2</A>...</P> ... ... <P>...<A <P>...<A HREF="#p3">Page HREF="#p3">Page 3</A>...</P> 3</A>...</P> ... ... <P><A <P><A NAME="p1"></A>...</P> NAME="p1"></A>...</P> ... ... <P><A <P><A NAME="p2"></A>...</P> NAME="p2"></A>...</P> ... ... <P><A <P><A NAME="p3"></A>...</P> NAME="p3"></A>...</P> ... ... </BODY> </BODY>
Liens doubles
70
u Les liens doubles dfinissent la fois un point de
dpart et un point d'arrive.
<BODY> <BODY> <P>...<A <P>...<A HREF="#p1" HREF="#p1" NAME="r1">Page NAME="r1">Page 1</A>...</P> 1</A>...</P> ... ... ... ... <P><A <P><A HREF="#r1" HREF="#r1" NAME="p1">Retour</A>...</P> NAME="p1">Retour</A>...</P> ... ... ... ... </BODY> </BODY>
Une page avec des liens

71
<H2 <H2 ALIGN="CENTER">Tout ALIGN="CENTER">Tout sur sur la la fougasse</H2> fougasse</H2> <P <P ALIGN="CENTER"> ALIGN="CENTER"> <A <A HREF="chap-1.html">Chapitre HREF="chap-1.html">Chapitre 1 1: : La La farine</A><BR> farine</A><BR> <A <A HREF="chap-2.html">Chapitre HREF="chap-2.html">Chapitre 2 2: : Les Les anchois</A></P> anchois</A></P> <HR <HR ALIGN="CENTER"> ALIGN="CENTER"> <P <P ALIGN="CENTER">Aimez-vous ALIGN="CENTER">Aimez-vous la la fougasse fougasse ?</P> ?</P> <P <P ALIGN="CENTER"> ALIGN="CENTER"> <A <A HREF="chap-1.html"><IMG HREF="chap-1.html"><IMG SRC="bout-1.gif"></A> SRC="bout-1.gif"></A> <A <A HREF="chap-2.html"><IMG HREF="chap-2.html"><IMG SRC="bout-2.gif"></A></P> SRC="bout-2.gif"></A></P>
Qui s'affiche
72
Les Tableaux
73
u Le tableau est llment dorganisation le plus
puissant de HTML.
u C est lui qui permet de disposer dans une page de
diffrentes zones de texte ou d images.

u un tableau est un pavage de cellules (CELLS),
associes des cellules de titre (HEADING CELLS) le tout associ une lgende (CAPTION).
u Sa description est assez complexe, nous laborderons
donc pas pas.
Un tableau lmentaire
74
CAPTION HEADING CELLS CELLS
Structure dun tableau

75
u Un tableau est introduit par le conteneur :

<TABLE paramtres>...</TABLE>
u Le titre dun tableau est introduit par le conteneur :

<CAPTION paramtres>...</CAPTION>
u Une ligne du tableau (ROW) est introduite par le
conteneur :
<TR paramtres>...</TR>
u Une ligne est compose de cellules* :

<TH paramtres></TH> <TD paramtres></TD> * pouvant contenir tout ce que l on veut et mme un tableau.
Un tableau lmentaire 4x4

76
<TABLE <TABLE paramtres paramtres> > <CAPTION <CAPTION paramtres paramtres></CAPTION> ></CAPTION> <TR> <TR> <TD>...</TD><TH>...</TH><TH>...</TH><TH></TH> <TD>...</TD><TH>...</TH><TH>...</TH><TH></TH> </TR> </TR> <TR> <TR> <TH>...</TH><TD>...</TD><TD>...</TD><TD>...</TD> <TH>...</TH><TD>...</TD><TD>...</TD><TD>...</TD> </TR> </TR> <TR> <TR> <TH>...</TH><TD>...</TD><TD>...</TD><TD>...</TD> <TH>...</TH><TD>...</TD><TD>...</TD><TD>...</TD> </TR> </TR> <TR> <TR> <TH>...</TH><TD>...</TD><TD>...</TD><TD></TD> <TH>...</TH><TD>...</TD><TD>...</TD><TD></TD> </TR> </TR> </TABLE> </TABLE>
Principaux paramtres
77
u On dispose de nombreux paramtres :

l alignement horizontal, l alignement vertical, l couleur de fond, l couleur de texte, l image de fond l
u Lorsquun paramtre nest pas dfini, sa valeur est
hrite de la structure qui l englobe.

u Malheureusement, tous ces paramtres ne sont pas
traits par les navigateurs, ils peuvent ne pas avoir deffet.

Paramtres de <TABLE ...>

78
CELLPADDING
CELLSPACING
BORDER
Paramtres de <CAPTION ...> Conception d'un site WEB
79
ALIGN = LEFT | CENTER | RIGHT
VALIGN = TOP | BOTTOM
Superposition de cellules
80
u On peut faire en sorte quune cellule en recouvre
dautres donnant limpression que des cellules ont t regroupes.

u Lextension d une cellule sur ses voisines de droite
correspond au paramtre
COLSPAN = nombre de cellules
u Lextension dune cellule sur ses voisines du dessous
correspond au paramtre
ROWSPAN = nombre de cellules
Paramtres de superposition
81
ROWSPAN=2 COLSPAN=2
ROWSPAN=1 COLSPAN=2
ROWSPAN=3 COLSPAN=1
1 2 lignes 3 4 5 1 2 3 4 colonnes
Une belle table des matires

82
Une belle page

83
Images cliquables
84
u Il est possible de dfinir des zones sensibles sur une
image bitmap et dassocier des liens ces zones.

u Nous ne verrons que la technique la plus rcente. u Les zones sensibles dfinies sur une image sont
regroupes dans une carte (MAP) associe limage.
Carte des zones sensibles

85
SRC="Image16.gif" SRC="Image16.gif" WIDTH="200" WIDTH="200" HEIGHT="145" HEIGHT="145" ISMAP ISMAP USEMAP="#Image16" USEMAP="#Image16" BORDER="0"> BORDER="0"> <MAP <MAP NAME="Image16"> NAME="Image16"> <AREA <AREA SHAPE="CIRCLE" SHAPE="CIRCLE" HREF= HREF= "chap-1.html" "chap-1.html" COORDS="86,64,20"> COORDS="86,64,20"> <AREA <AREA SHAPE="RECT" SHAPE="RECT" HREF="chap-2.html" HREF="chap-2.html" COORDS="61,101,92,138"> COORDS="61,101,92,138"> </MAP> </MAP>
<IMG <IMG
Les formulaires
86
u C'est le formulaire qui sert d'interface entre le monde
du Web et le monde de l'informatique.

u Il permet de construire des interfaces de prsentation
des logiciels d'application.

u Il utilise le mode CGI (Common Gateway Interface)
pour fonctionner et son utilisation ncessite la coopration d'au moins 2 acteurs :

l Ct client : Le formulaire HTML, l Ct serveur : un programme d'interface.
Dialogue Client-Serveur
87
u Le ct client est reprsent par le navigateur qui
interprte la page HTML qui comporte des balises pouvant se traduire en requtes.
u Le ct serveur est reprsent par le serveur Web qui
interprte les requtes provenant du navigateur et qui lui transmet des pages HTML.
u Nous avons rencontr deux balises se traduisant en
requte :
l <A ></A> : requte pour une page externe, l <IMG > : requte pour une image externe.
Schma de dialogue HTML

88
http://../xxx.html#yyy http://../xxx.html#yyy Serveur Web <HTML> <HTML> </HTML> </HTML>
Navigateur Content-type: Content-type: text/html text/html <HTML> <HTML> </HTML> </HTML>
Schma de dialogue CGI

89
QUERY_STRING QUERY_STRING = = ... ... http://../xxx.cgi... http://../xxx.cgi... Serveur Web Programme CGI
Navigateur
Content-type: Content-type: text/html text/html <HTML> <HTML> </HTML> </HTML>
Content-type: Content-type: text/html text/html <HTML> <HTML> </HTML> </HTML>
Formulaire
90
u Un formulaire est introduit par le conteneur :

<FORM paramtres> </FORM>
u Un formulaire est constitu d'un groupe d'outils de
saisie dcrits par des conteneurs de la forme :

<INPUT paramtres> </INPUT> <SELECT paramtres> </SELECT>
u Un formulaire comporte 2 boutons :

<INPUT TYPE=SUBMIT paramtres> <INPUT TYPE=RESET paramtres>
Exemple 1
91
<FORM <FORM ACTION="query.cgi" ACTION="query.cgi" METHOD= METHOD= "GET" "GET" || "POST"> "POST"> <P><BIG><BIG>P</BIG></BIG>our <P><BIG><BIG>P</BIG></BIG>our faire faire une une bonne bonne mayonnai mayonnai <INPUT <INPUT TYPE="radio" TYPE="radio" NAME="liquide" NAME="liquide" VALUE="eau">eau, VALUE="eau">eau, <INPUT <INPUT TYPE="radio" TYPE="radio" NAME="liquide" NAME="liquide" VALUE="huile">huile, VALUE="huile">huile, <INPUT <INPUT TYPE="radio" TYPE="radio" NAME="liquide" NAME="liquide" VALUE="lait">lait VALUE="lait">lait </FORM> </FORM>
Exemple 2
<FORM <FORM ACTION="query.cgi" ACTION="query.cgi" METHOD= METHOD= "GET" "GET" || "POST"> "POST"> ... ... <P><BIG><BIG>I</BIG></BIG>l <P><BIG><BIG>I</BIG></BIG>l faut faut aussi aussi :</P> :</P> <INPUT <INPUT TYPE="checkbox" TYPE="checkbox" NAME="oeufs" NAME="oeufs" VALUE="on">oeufs, VALUE="on">oeufs, <INPUT <INPUT TYPE="checkbox" TYPE="checkbox" NAME="sel" NAME="sel" VALUE="on">sel, VALUE="on">sel, <INPUT <INPUT TYPE="checkbox" TYPE="checkbox" NAME="mouta" NAME="mouta" VALUE="on">moutarde, VALUE="on">moutarde, <INPUT <INPUT TYPE="checkbox" TYPE="checkbox" NAME="confit" NAME="confit" VALUE="on">confiture VALUE="on">confiture </FORM> </FORM>
92
Exemple 3
<FORM <FORM ACTION="query.cgi" ACTION="query.cgi" METHOD= METHOD= "GET" "GET" || "POST"> "POST"> ... ... <P><BIG><BIG>O</BIG></BIG>n <P><BIG><BIG>O</BIG></BIG>n utilise utilise : : <SELECT <SELECT NAME="recipient" NAME="recipient" SIZE="3"> SIZE="3"> <OPTION <OPTION SELECTED>assiette SELECTED>assiette <OPTION>bol <OPTION>bol <OPTION>bouteille <OPTION>bouteille <OPTION>casserole <OPTION>casserole <OPTION>marmite</SELECT> <OPTION>marmite</SELECT> </P> </P> </FORM> </FORM>
93
Exemple 4
<FORM <FORM ACTION="query.cgi" ACTION="query.cgi" METHOD= METHOD= "GET" "GET" || "POST"> "POST"> ... ... <P><BIG><BIG>D</BIG></BIG>écrivez, <P><BIG><BIG>D</BIG></BIG>écrivez, en en quelques quelques lignes lignes les les principales principales qualités qualités diététiques diététiques de de la la mayonnaise mayonnaise :<BR> :<BR> <TEXTAREA <TEXTAREA NAME="dissertation" NAME="dissertation" ROWS="5" ROWS="5" COLS=20> COLS=20> </TEXTAREA> </TEXTAREA> </FORM> </FORM>
94
Exemple 5
95
<FORM <FORM ACTION="query.cgi" ACTION="query.cgi" METHOD= METHOD= "GET" "GET" || "POST"> "POST"> ... ... <P> <P> Donnez Donnez votre votre nom nom et et on on vous vous écrira<BR> écrira<BR> <INPUT <INPUT TYPE="text" TYPE="text" NAME="nom"> NAME="nom"> </FORM> </FORM>
Et pour finir
96
<FORM <FORM ACTION="query.cgi" ACTION="query.cgi" METHOD= METHOD= "GET" "GET" || "POST"> "POST"> ... ... <P> <P> <INPUT <INPUT TYPE=reset TYPE=reset VALUE="Corriger"> VALUE="Corriger"> <INPUT <INPUT TYPE=submit TYPE=submit VALUE="OK"></P> VALUE="OK"></P> </FORM> </FORM>
Conclusion provisoire
97
u Nous avons vu l'essentiel de ce qu'il tait ncessaire
de connatre de HTML pour raliser de belles pages Web.

u N'hsitez pas examiner le source des pages que
vous consultez. Vous y dcouvrirez comment raliser des effets poustouflants.

u Il faut, prsent, tudier ce qui se passe du ct du
serveur (programmation CGI) et c'est la suite de ce cours.
Programmes CGI
98
u Un programme CGI doit tre capable de composer
une page HTML et de l'mettre sur sa sortie standard "stdout".

u Ce programme reoit ses arguments sous diffrentes
formes que nous examinerons.

u Attention : un programme CGI mal conu cre des
trous de scurit dans le systme qui l'hberge et pour en savoir plus sur les problmes de scurit dans le Web consulter :
http://www.w3.org/Security/Faq/www-security-faq.html
Programmation CGI
99
u Un programme CGI peut tre crit dans n'importe quel
langage.
u Cependant certains langages sont plus commodes
que d'autres.
u On utilise typiquement :
l des langages interprts tels sh, csh, et surtout Perl, l des langages compils tels C, C++, FORTRAN et maintenant Visual
Basic dans un environnement Windows NT .
u Nous allons introduire, dans ce cours, le langage le
plus utilis actuellement : Perl.
Entres - Sorties CGI

Conception d'un site WEB Environnement d'excution
SERVER_SOFTWARE SERVER_SOFTWARE SERVER_NAME SERVER_NAME GATEWAY_INTERFACE GATEWAY_INTERFACE SERVER_PROTOCOL SERVER_PROTOCOL SERVER_PORT SERVER_PORT REQUEST_METHOD REQUEST_METHOD PATH_INFO PATH_INFO QUERY_STRING QUERY_STRING CONTENT_LENGTH CONTENT_LENGTH ... ...
100
"stdin"
Programme Programme CGI CGI
stdout Message MIME Content-type: Content-type: text/html text/html <HTML></HTML> <HTML></HTML>
Invocation d'un programme CGI Conception d'un site WEB

u On dispose principalement de 3 mthodes pour
101
invoquer un programme CGI :

l invocation directe en tant que cible d'un lien :
<A HREF="foo.cgi"></A>
l invocation par soumission d'un formulaire avec la mthode GET :
<FORM ACTION="foo.cgi" METHOD="GET" > </FORM>

l invocation par soumission d'un formulaire avec la mthode POST :
<FORM ACTION="foo.cgi" METHOD="POST" > </FORM>
Extension de l'URL
102
u On peut passer les arguments d'un programme CGI
en tendant son URL :

<A HREF="URL/script_name/path_info?query_string"></A>
u C'est cette technique qui est utilise lors de la
soumission d'un formulaire utilisant la mthode GET.

l L'extension de l'URL est effectue par le navigateur lui-mme.
u Les arguments (empaquets dans une grande chane
de caractres) peuvent tre obtenus en analysant les variables d'environnement SCRIPT_NAME, PATH_INFO et QUERY_STRING.
Entre standard
103
u Lorsqu'un formulaire est soumis en utilisant la
mthode POST, les arguments sont empaquets dans une grande chane de caractres prsente sur l'entre stdin.
u Cette grande chane ne se termine pas par EOF ! u Sa longueur est place dans la variable
d'environnement CONTENT_LENGTH.
Empaquetage des arguments

104
u Un argument est reprsent sous la forme d'un u u u
couple nom=valeur. Une valeur est une chane de caractres, Chaque argument est spar du prcdent et du suivant par le caractre &. Les espaces sont remplacs par le caractre + et les caractres spciaux sont remplacs par leur code ASCII(hex) %xx. Exemple :
liquide=eau&ufs=on&sel=on&recipient=bol& dissertation=Et+bien,la+mayonnaise,+c'est+tr%E8s+bon...&nom=Mick ey+Mouse
En rsum
105
u Un programme CGI doit :

l avoir un nom dont l'extension est .cgi, l tre capable de consulter des variables d'environnement, l tre capable de lire une chane de caractres prsente sur stdin, l tre capable de l'analyser, l tre capable de composer une page HTML au format MIME et de la
prsenter sur stdout.
u Il doit pouvoir, galement, tre capable de
communiquer avec d'autres applications.

u Le langage Perl permet de faire tout a trs
commodment.
Le langage Perl
106
u Le langage Perl (Practical Extraction and Report
Language) ne peut pas tre considr comme un langage de programmation orthodoxe. Sa seule ambition est d'tre commode.
u Nous n'en donnerons pas une prsentation
exhaustive et nous ne l'introduirons qu' partir d'exemples significatifs.

u Pour en savoir plus, consulter :
http://www2.ec-lille.fr/~seguy/francais/perl/
Un programme Perl simplissime Conception d'un site WEB

#!/usr/local/bin/perl #!/usr/local/bin/perl print print "Content-type: "Content-type: text/html text/html <HTML> <HTML> <HEAD> <HEAD> <TITLE>Première <TITLE>Première page page scriptées</TITLE> scriptées</TITLE> </HEAD> </HEAD> <BODY> <BODY> <P>Bonjour <P>Bonjour à à tous.</P> tous.</P> </BODY> </BODY> </HTML> </HTML> "; ";
107
u Bien que trs simple, ce premier programme nous
apprend dj plein de choses.

Les commentaires
108
u Un commentaire est une portion de texte commenant
par le caractre # et s'tendant jusqu' la fin de la ligne.

u Exemples :
# Que ce programme est beau et bien ecrit ! print 'bonjour tout le monde !'; # qu'est-ce donc ?
Localisation de l'interprte
109
u Dans un environnement Unix, tous les fichier
interprts (au moins pour tous les "shell" que je connais) indiquent, en premire ligne, le chemin d'accs leur interprte.
u Cette indication prend la forme du pseudo
commentaire :
#!/usr/local/bin/perl
u C'est cette indication qui permet de considrer un tel
fichier comme un programme excutable standard.
Les instructions
110
u Une instruction est constitue :

l soit d'une commande et de ses paramtres, l soit de l'affectation d'une variable la valeur d'une expression.
u Une instruction se termine toujours par le caractre ; u Ce premier programme ne comporte que l'instruction
l print "";
u Comme on peut s'y attendre, la commande print
imprime (ici sur stdout).
Quote '' & quasi-quote "..."

111
u Une portion de texte qui ne doit pas tre interprte
est cite entre quotes :

'bonjour tout le monde !'
u Lorsqu'une telle portion de texte est rpartie sur
plusieurs lignes, elle inclut les "RC" invisibles.

u Lorsqu'on cherche construire des portions de texte,
il est commode d'y inclure des variables qui seront values. La portion de texte est alors cite entre quasi-quotes :
"Je voudrais $n pizzas" "Je voudrais une ${c}croute garnie"
Formats MIME
112
u Le texte envoy au navigateur par le serveur doit se
conformer la norme MIME (Multipurpose Internet Mail Extension) qui prconise d'indiquer en en-tte le type de ce qui suit, ici :
Content-type: text/html
u Cet en-tte doit tre suivi d'une ligne vide ! u D'autres types MIME :
application/pdf application/x-compress audio/basic image/gif ...
Variables
113
u Perl supporte 3 types de variables :

l scalaires : nombres et chanes de caractres, l tableaux de scalaires dont les lments sont indexs par un
nombre entier,
l tableaux associatifs dont les lments sont indexs par un
symbole.
u Noms de variables, les noms de variables sont
prfixs :
l par $ pour les scalaires, l par @ pour les tableaux, l par % pour les tableaux associatifs.
u Les caractres $, @ et % dfinissent, plus
gnralement, le contexte d'interprtation des oprateurs Perl.

Contextes d'interprtation
114
u Les diffrents contextes d'interprtation peuvent tre
illustrs par ces exemples :

l $jour l l l l l l l $jours[28]
simple variable scalaire 29me lment du tableau @jours $nombre_de_jours{'mars'} lment associ au symbole 'mars' du tableau associatif %nombre_de_jours $#jours dernier indice dans le tableau @ jours @ jours tableau dans son ensemble @ jours[3,4,5] tableau constitu des lments numros 3, 4 et 5 du tableau @ jours @ jours[3..5] mme tableau que ci-dessus @ nombre_de_jours{'mars','avril'} tableau constitu des lments associs aux symboles 'mars' et 'avril' du tableau associatif % nombre_de_jours % nombre_de_jours tableau associatif dans son ensemble
Petite gnralisation
115
u La composition d'une page HTML est dcrite plus
gnralement par :
#!/usr/local/bin/perl #!/usr/local/bin/perl $title $title = = ; ; $body $body = = ; ; print print "Content-type: "Content-type: text/html text/html <HTML> <HTML> <HEAD><TITLE>$title</TITLE></HEAD> <HEAD><TITLE>$title</TITLE></HEAD> <BODY>$body</BODY> <BODY>$body</BODY> </HTML> </HTML> "; ";
Les constantes
116
u Les constantes sont utilises soit pour initialiser des
variables, soit pour participer l'valuation d'une expression.

u Nombres :
18 -14 3.14 0.6e-3 0x1E
u Portions de texte :
'bonjour tout le monde.' "il est $b l'heure."
u Listes (indiable comme un tableau) :

(18, 'est un divisible par', 2, 3, ' et ', 6)
Affectation
117
u Comme toutes les oprations Perl, l'affectation
prsente quelques magies.

comme d'habitude. est intressant si on veut produire un compteur conservant ses 0 gauche. @jours = ('lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche'); la liste a servi construire un tableau. @week_end = @jours[5,6]; @jours_ouvres = jours[0..4]; ($a, $b, $c) = (3, 4, 5); ($a, $b, @des_jours) = @jours; $i = 3; $i = '0001';
u Et bien d'autres magies que je vous laisse dcouvrir.

Quelques oprations scalaires Conception d'un site WEB

$a = 1 + 2; $a = 2 - 4; $a = 5 * 6; $a = 7 / 2; $a = 9 ** 3.2; $a = 5 % 2; ++$a; $a++; $a = 'bonjour '.'tout le monde'; $a = 'je bgaie ' x 8; $a += 3;
118
addition soustraction multiplication division puissance (pas forcment entire) reste euclidien pr-incrmentation post-incrmentation concatnation rptition quivalent $a = $a + 3
Oprations sur les tableaux

119
@fruits = ('pomme', 'poire'); push(@fruits, 'banane', 'abricot') ; modifie @fruits qui vaut alors ('pomme', 'poire', 'banane', 'abricot'). pop(@fruits); modifie @fruits qui vaut alors ('pomme', 'poire', 'banane') et rend 'abricot'.
Fonctions
120
Comme dans tous les langages de programmation, la fonction est un outil de structuration puissant. Dclaration (sub) et appel (&) d'une fonction (Perl ne connat pas le l ) : Les arguments sont passs dans le tableau implicite @_. La valeur rendue est celle de la dernire expression value.
sub sub moyenne moyenne { { (@_[0] (@_[0] + + @_[1]) @_[1]) // 2; 2; } } print print &moyenne(1,2); &moyenne(1,2);
u u
Manipulation des fichiers

121
u Voici un programme lmentaire qui manipule un
fichier (pas trop gros) :

#!/usr/local/bin/perl #!/usr/local/bin/perl open( open( FICHIER, FICHIER, 'foo.txt'); 'foo.txt'); @lignes @lignes = = <FICHIER>; <FICHIER>; # # ouverture* ouverture* du du fichier fichier et et # # cration cration de de son son descripteur descripteur # # lecture lecture du du fichier fichier ligne ligne # # par par ligne ligne et et construction construction # # d'un d'un tableau tableau de de ces ces lignes lignes # # fermeture fermeture du du fichier fichier # # et et affichage affichage
close(FICHIER); close(FICHIER); print print @lignes; @lignes;
* les fichiers STDIN, STDOUT et STDERR sont ouverts a priori.

Variables d'environnement
122
u Les variables d'environnement sont empaquetes
dans le tableau associatif prdfini %ENV.

u On y accde par leur nom :
$ENV{'REQUEST_METHOD'} $ENV{'SCRIPT_NAME'} $ENV{'PATH_INFO'} $ENV{'QUERY_STRING'} $ENV{'CONTENT_LENGTH'}
On entre dans le vif du sujet

123
...
if if ($ENV{'REQUEST_METHOD'} ($ENV{'REQUEST_METHOD'} eq eq "POST") "POST") { { read(STDIN, read(STDIN, $buffer, $buffer, $ENV{'CONTENT_LENGTH')); $ENV{'CONTENT_LENGTH')); } } else else { { $buffer $buffer = = $ENV{'QUERY_STRING'}; $ENV{'QUERY_STRING'}; } } ... ...
u On note 3 nouveauts :
l la structure de contrle :
if <prdicat> {<consquence>} else {<alternative>} l l'oprateur de comparaison : eq l la fonction de lecture d'un bloc de caractres dans un fichier : read().
Manipulation des chanes

124
u L'exemple prcdent laisse en suspens deux
problmes :
l comment tre sr que la chane "POST" est bien en majuscules ?
ou plus gnralement compose de caractres de la mme casse.

l Comment analyser le contenu de la variable $buffer qui contient
typiquement le rsultat de la saisie d'un formulaire (cf. diapo 104).
u La manipulation des chanes de caractres en Perl
utilise (comme beaucoup d'outils Unix tel regexp) des motifs (patterns) dcrits l'aide d'expressions rgulires.
Expressions rgulires
125
u Une expression rgulire est la description d'un motif
textuel l'aide d'une formule place entre / et /.

u Une expression rgulire est construite partir :
l de constantes : caractres (signes typographiques), l d'oprateurs : dnots par des caractres spciaux dont
l'interprtation dpend du contexte.
u Le coin du thoricien : Les expressions rgulires ont
t introduites pour dcrire les langages rguliers (T1) et leurs analyseurs qui sont des machines tats finis.
Classes de caractres
126
u Une classe de caractres est l'ensemble des
caractres qui peuvent apparatre en tel ou tel emplacement d'un motif.

u Une classe de caractres est dfinie entre [ et ]. u Dans la dfinition d'une classe de caractres, les
signe - et ^ (plac en tte) signifient "entre" et "sauf".

u Exemples :
[abc] [a-zA-Z0-9] [^abc] les 3 caractres a, b et c n'importe quelle lettre ou chiffre sauf les caractres a, b ou c
Caractres spciaux
127
u Certains caractres sont spciaux car on ne peut pas
les taper au clavier (ils ont un effet immdiat), exemples :

l \n l \t
nouvelle ligne tabulation
u D'autres servent de raccourcis syntaxique, exemples :

l . l \w l \W l \d l \D l \s l \S
: n'importe quel caractre = [^\n] : un caractre alpha-numrique = [a-zA-Z0-9] : sauf un caractre alpha-numrique = [^a-zA-Z0-9] : un chiffre = [0-9] : sauf un chiffre = [^0-9] : un espacement = [ \t\n] : sauf un espacement = [^ \t\n]
Concatnation, option et rptition Conception d'un site WEB
128
u L'opration de base est la concatnation dnote par
la simple juxtaposition.
/[A-Z][0-9]/ dnote des motifs de la forme B3, Z8,
u Un caractre peut tre optionnel dans un motif :

/pommes?/ dnote le mot "pomme" ventuellement au pluriel. /par(t|c)/ dnote les mots "part" ou "parc"
u Un caractre peut tre dupliqu dans un motif :

/b+/ /b*/ dnote des motifs de la forme "b", "bb", "bbb", "bbbb", = (b+)?
Parenthsage et chappement
129
u Pour dfinir ce sur quoi porte une opration, il peut
tre ncessaire de parenthser certains termes de l'expression :

/(bon)+/ dnote des motifs de la forme "bon", "bonbon", "bonbonbon",
u Pour introduire un caractre qui joue normalement le
rle d'un oprateur, il faut le faire prcder de \ :

\| \[ \]  \* \+
u Il est toujours possible d'introduire un caractre
spcial par son code ASCII :

\x82 dnote (sur PC sous DOS) le caractre ""
Appariement
130
u Une chane est apparie un motif si on peut y
trouver ce motif.
u La relation d'appariement est note =~ u Exemples :
'le petit chat' =~ /le/ 'le petit chat' =~ /Le/ 'un bon saucisson' =~ /s+/ vaut "vrai" vaut "faux" vaut "vrai"
u Cette relation d'appariement sera souvent utilise en
tant que prdicat dans une structure "if () else {...}"
Contexte de l'appariement
131
u L'appariement sur une partie du motif peut tre
impos en dbut de texte ou en fin de texte.

^ $ le terme qui suit est confront au dbut du texte le terme qui prcde est confront la fin du texte.
u Exemples :
/^(bon)(.*)s$/ s'apparie avec tous les textes qui commencent par "bon" et qui se terminent par la lettre "s".
Substitution
132
u Une expression de substitution permet de remplacer,
dans un texte, un motif par un autre, elle vaut le nombre des substitutions effectues.
u Une expression de substitution est de la forme :
s/<reg-exp>/<expression>/<paramtres>
u Exemples :
s/saucisse/banane/ remplace la premire occurrence du mot "saucisse" par le mot "banane". s/saucisse/saucisson/g remplace toutes les occurrences du mot "saucisse" par le mot "banane".
Utilisations de la substitution (1) Conception d'un site WEB

u Modification partielle d'une portion de texte :
$texte = " une bonne saucisse sche est une saucisse qui a bien sch."; $texte =~ s/saucisse/banane/;
133
u Que devient la variable $texte ?

u Modification globale d'une portion de texte :
$texte = " une bonne saucisse sche est une saucisse qui a bien sch."; $texte =~ s/saucisse/banane/g;
134
135
u Sauf indication, la substitution porte sur la variable
prdfinie* $_.
u Modification d'une portion de texte :
$_ = " une bonne saucisse sche est une saucisse qui a bien sch."; $ns = s/saucisse/banane/g;
u Que deviennent les variables $_ et $ns ?

* ces variables prdfinies introduisent quelques magies dans Perl. Nous en verrons quelques autres.
Traduction
136
u Une expression de traduction permet de remplacer,
dans un texte, des caractres par d'autres caractres ; elle vaut le nombre des traductions effectues.
u Une expression de traduction est de la forme :
tr/<classe de caractres>/<classe de caractres>/<paramtres>
u Exemples :
tr/a-z/A-Z/ remplace toutes les lettres minuscules par les majuscules correspondantes. Toutes ? tr/a-z/b-za/ utilise le code de Csar pour crypter un message.
Utilisations de la traduction (1) Conception d'un site WEB

$texte = " une bonne saucisse sche est une saucisse qui a bien sch."; $texte =~ s/a-z/b-za/;
137
Utilisations de la traduction (2) Conception d'un site WEB

u Sauf indication, la traduction porte sur la variable
138
prdfinie $_.
$_ = " une bonne saucisse sche est une saucisse qui a bien sch."; $ntr = tr/a/a/;
u Que deviennent les variables $_ et $ntr ?

Mmoire de l'appariement (1) Conception d'un site WEB
139
u Un motif d'appariement peut tre scind en plusieurs
sous-motifs par parenthsage :

/^(.)(.*)(.)$/ dfinit 3 sous-motifs
u Lorsque ce motif est appari avec succs une
portion de texte, ce qui s'est appari chacun des sous-motifs est conserv dans des variables nommes \1, \2, dans la dfinition de la substitution et $1, $2, dans le reste du programme.
Mmoire de l'appariement (2) Conception d'un site WEB

u Exemple :
/^(.)(.*)(.)$/ confront au texte "bonne nuit les petits" conduit : \1 = $1 = "b" \2 = $2 = "onne nuit les petit" \3 = $3 = "s"
140
u Que fait donc la portion de programme suivante ?

$_ = "bonne nuit les petits"; s/^(.)(.*)(.)$/\3\2\1/; print "$1 $2 $3";
On retourne dans le vif du sujet Conception d'un site WEB

$ENV{'REQUEST_METHOD'} $ENV{'REQUEST_METHOD'} =~ =~ tr/a-z/A-Z/; tr/a-z/A-Z/; if if ($ENV{'REQUEST_METHOD'} ($ENV{'REQUEST_METHOD'} eq eq "POST") "POST") { { read(STDIN, read(STDIN, $buffer, $buffer, $ENV{'CONTENT_LENGTH')); $ENV{'CONTENT_LENGTH')); } } else else { { $buffer $buffer = = $ENV{'QUERY_STRING'}; $ENV{'QUERY_STRING'}; } } ... ...
141
u A prsent, peu importe que le nom de la mthode soit
crit en minuscule ou en majuscule.

u Il ne reste plus qu' exploiter le contenu de la variable
$buffer.
Deux fonctions trs utiles

142
u Trs frquemment il est ncessaire d'liminer le
dernier caractre d'une portion de texte (typiquement \n) :

chop ($texte) chop limine le dernier caractre du texte contenu dans $texte. limine le dernier caractre du texte contenu dans $_.
u Encore plus frquemment il est ncessaire de
trononner une portion de texte (typiquement pour analyser une QUERY_STRING) :

split(<motif>,$texte) rend le tableau constitu des "tronons" dcoups dans $texte, <motif> dfinissant le sparateur. split(<motif>) comme ci-dessus sur la variable $_.
Un trononnage utile
143
$buffer $buffer = =" " liquide=eau&ufs=on&...&nom=Mickey+Mouse" liquide=eau&ufs=on&...&nom=Mickey+Mouse" @paires @paires = = split(/&/,$buffer); split(/&/,$buffer); ... ...
u Le tableau contient, maintenant, des termes de la
forme :
$paires[0] = "liquide=eau" $paires[1] = "uf=on" $paires[..] = "nom=Mickey+Mouse"
Pour aller plus loin

144
foreach foreach $paire $paire (@paires) (@paires) { { ($nom, $valeur) ($nom, $valeur) = = split(/=/, split(/=/, $paire); $paire); $valeur $valeur =~ =~ tr/+/ tr/+/ /; /; $valeur $valeur =~ =~ s/%(..)/pack("C", s/%(..)/pack("C", hex($1))/eg; hex($1))/eg; ... ... } }
u Quatre nouveauts :
l la structure d'itration
foreach <scalaire> (<tableau>) {}

l la fonction hex() l la fonction pack() l l'option "e" dans "s///ge"
Structure d'itration en Perl

145
u On trouve les structure d'itration suivantes :

foreach $var (@tab) {} for(<initialisation>;<test>;<incrmentation>) {} while (<prdicat>) {} do {} while(<prdicat>)
u Les prdicats sont construits partir ds relations
suivantes :
== != eq ne =~ !~ galit numrique diffrence numrique galit lexicographique diffrence lexicographique appariement dsappariement
Expressions logiques
146
u Les expressions logiques sont construites partir
des connecteurs suivants :

! && || ngation logique (pas) conjonction logique (et) disjonction logique (ou)
u Ces connecteurs sont valus en mode paresseux. Le
2me oprande n'est valu qu'en cas de besoin :

&& || le 2me oprande n'est valu que si le 1er oprande s'value "vrai", le 2me oprande n'est valu que si le 1er oprande s'value "faux".
Fonction hex() & pack()

147
u Fonction hex :
hex ($texte) hex rend la valeur entire correspondant la chane $texte suppose reprsenter un nombre exprim en notation hexadcimale. comme ci-dessus sur la variable $_.
u Fonction pack :
pack("C",<expression valeur entire>) rend la chane contenant le caractres dont le code ASCII est la valeur de l'expression.
u La fonction pack() prsente de trs nombreuses
options toutes plus obscures les unes que les autres ; donc consultez la documentation.
L'option "e" de la substitution Conception d'un site WEB
148
u L'option "e" indique que le motif de remplacement est
le rsultat de l'valuation d'une expression Perl.

u Exemple :
Option d'valuation
s/%(..)/pack("C", hex($1))/eg
Expression dont l'valuation produit le motif de substitution
Finalement, une fonction bien utile Conception d'un site WEB

sub sub read_input read_input { { local local ($buffer, ($buffer, @paires, @paires, $paire, $paire, $nom, $nom, $valeur, $valeur, %FORM); %FORM); $ENV{'REQUEST_METHOD'} $ENV{'REQUEST_METHOD'} =~ =~ tr/a-z/A-Z/; tr/a-z/A-Z/; if if ($ENV{'REQUEST_METHOD') ($ENV{'REQUEST_METHOD') eq eq "POST") "POST") { { read(STDIN, read(STDIN, $buffer, $buffer, $ENV{'CONTENT_LENGTH')); $ENV{'CONTENT_LENGTH')); } } else else { { $buffer $buffer = = $ENV{'QUERY_STRING'}; $ENV{'QUERY_STRING'}; } } @paires @paires = = split(/&/, split(/&/, $buffer); $buffer); foreach foreach $paire $paire (@paires) (@paires) { { ($nom, ($nom, $value) $value) = = split(/=/, split(/=/, $paire); $paire); $valeur $valeur =~ =~ tr/+/ tr/+/ /; /; $valeur $valeur =~ =~ s/%(..)/pack("C", s/%(..)/pack("C", hex($1))/eg; hex($1))/eg; $FORM{$nom} $FORM{$nom} = = $valeur; $valeur; } } %FORM; %FORM; } }
149
Quelques considrations
150
u Il est souvent ncessaire de tester un script CGI hors
connexion (conomies de tlphone).

u Nous allons donc voir comment crire deux petits
scripts Perl de test pour :

l une communication selon la mthode GET, l une communication selon la mthode POST.
u Ces deux petits scripts peuvent tre utiliss aussi
bien dans un contexte Unix que dans un contexte Windows 95 ou NT.
Test de la mthode GET

151
Message transmettre tel qu'il viendrait d'un formulaire.
$message = 'liquide=lait&recipient=bol&...'; $ENV{'REQUEST_METHOD'} $ENV{'QUERY_STRING'} system('perl script.pl');

Script tester On utilise la commande system qui cre un processus fils qui hrite des variables d'environnement.
= 'GET'; = $message;
Test de la mthode POST

Conception d'un site WEB Message transmettre tel qu'il viendrait d'un formulaire.
152
$message = 'liquide=lait&recipient=bol&...'; $longueur = length($message); $ENV{'REQUEST_METHOD'} $ENV{'CONTENT_LENGTH'} open(CGI,'|perl script.pl'); print CGI $message; close CGI;
On utilise l'ouverture d'un pipe qui permet au script test d'hriter la fois des variables d'environnements et de recevoir le message via STDIN.
= 'POST'; = $longueur;
Script tester
Un petit exemple de script

153
Sub Sub read_input read_input { { } } %formulaire %formulaire = = &read_input(); &read_input(); print print " " liquide liquide recipient recipient nom nom "; ";
:: $formulaire{'liquide'} $formulaire{'liquide'} :: $formulaire{'recipient'} $formulaire{'recipient'} :: $formulaire{'nom'} $formulaire{'nom'}
Rle des scripts CGI

154
u Les scripts CGI interviennent trs souvent dans le
cadre d'un site Web :

l Site de recherche : gestion d'une base de donne, l Site de commerce lectronique : parcours du catalogue,
construction du "panier", laboration de la facture, dclenchement du paiement, l Dispositifs varis : compteurs d'accs, livre d'or (guestbook), l Scripts d'analyse du traffic : pays, domaines, machines d'origine, navigateur utilis,
Deux exemples un peu ralistes Conception d'un site WEB
155
u Nous allons en terminer sur notre prsentation du
langage Perl par les deux exemples suivants :

l petit moteur de recherche : utilisation intensive du traitement des
chanes de caractres de Perl,

l constructeur de "paniers" : utilisation systmatique des "magic
cookies".
u Les "magic cookies" ou plus simplement "cookies"
est une technique introduite par Netscape ( partir de la version 3.0 de son navigateur) pour pallier au comportement purement combinatoire du protocole HTTP.
Un petit moteur de recherche

156
u Nous nous contenterons d'une recherche par mots
cl hirarchiss, non optimise, dans un domaine bien cibl : Recherche gastronomique

u Nous n'en verrons que les grandes lignes (les dtails
seront dvelopps sur machine) :

l structure du fichier des informations, l formulaire de rfrencement, l formulaire d'interrogation, l moteur de recherche, l prsentation des rsultats de la recherche.
Le fichier des informations

157
u Nous nous contenterons d'un fichier unique dans
lequel chaque enregistrement correspond une ligne.

u Les enregistrements seront rangs dans l'ordre o ils
auront t introduits.
u Ce fichier s'appellera BASE. u Cette structure peut suffire pour de petites bases de
donnes, elle conduirait, autrement, des temps de consultation prohibitifs.
Un enregistrement
158
u Un enregistrement est constitu de champs-cl et de
champs-information spars par le signe "|" ; ils sont spars entre eux par le signe ":".
u Champs cl (dans cet ordre) :
l ville, l spcialit : locales, asiatiques, viandes, poissons, l catgorie de prix : 50-100, 100-200, 200-300, >300.
u Champs information (dans cet ordre) :

l photo (fichier JPEG), l nom, sous titre, l adresse, l prix1, menu1, prix2, menu2.
Pages associes
159
u Deux pages sont ncessaires :

l formulaire d'interrogation pour rechercher le restaurant qui nous
convient,
l formulaire de rfrencement pour permettre un restaurateur de
rfrencer son restaurant dans la base.
Formulaire d'interrogation
160
Formulaire de rfrencement
161
Modles de Page associes

162
u Un modle de page est ncessaire :

l modle de prsentation pour afficher le rsultat d'une recherche,
u Le modle de prsentation ne constitue pas une page
proprement parler, il sert simplement de modle la page que le script d'interrogation doit produire.
Modle de prsentation
163
Format de l'enregistrement
164
u L'enregistrement est sur une seule ligne telle que :
ville:specialite:categorie| ville:specialite:categorie| photo:nom:soustitre:adresse:prix1:menu1:prix2:menu2 photo:nom:soustitre:adresse:prix1:menu1:prix2:menu2
Le champ photo correspond au nom du fichier JPEG, la photo sera parvenue par un autre canal que celui du formulaire (La poste par exemple).
Les repres des formulaires

165
u Les diffrentes champs de l'enregistrement
correspondent aux entits de formulaire ayant les noms suivants (sauf photo) :
l ville l specialite l categorie l nom l soustitre l adresse l prix1 l menu1 l prix2 l menu2
: ville : spcialit : catgorie : nom du restaurant : complment de nom : adresse : prix du menu n1 : menu n1 : prix du menu n2 : menu n2
- cl n1 - cl n2 - cl n3 - information - information - information - information - information - information - information
Les repres des scripts

166
u Les diffrentes champs de l'enregistrement
correspondent aux entits de prsentation suivantes :

l ville l specialite l categorie l photo l nom l soustitre l adresse l prix1 l menu1 l prix2 l menu2
: $ville : $specialite : $categorie : $photo : $nom : $soustitre : $adresse : $prix1 : @menu1 : $prix2 : @menu2
Script d'interrogation : structure Conception d'un site WEB

u Le script d'interrogation comporte trois parties
167
dcrites par trois fonctions :

%formulaire = &read_input(); construction du tableau associatif correspondant au formulaire d'interrogation. @resultats = &interrogation($cle1,$cle2,$cle3); interrogation du fichier des donnes et construction du tableau de la partie information des enregistrements trouvs. do page(@resultats); construction de la page de prsentation.
Script d'interrogation : source Conception d'un site WEB

#!/usr/local/bin/perl #!/usr/local/bin/perl sub sub read_input read_input {...} {...} sub sub interrogation interrogation {...} {...} sub sub page page {...} {...} sub sub compose_motif compose_motif {...} {...} sub sub compose_menu compose_menu {...} {...} %formulaire %formulaire = = &read_input(); &read_input(); $cle1 $cle1 = = $formulaire{'ville'}; $formulaire{'ville'}; $cle2 $cle2 = = $formulaire{'specialite'}; $formulaire{'specialite'}; $cle3 $cle3 = = $formulaire{'categorie'}; $formulaire{'categorie'}; @resultats @resultats = = &interrogation($cle1, &interrogation($cle1, $cle2, $cle2, $cle3); $cle3); do do page(@resultats); page(@resultats);
168
Fonction d'interrogation
169
sub interrogation { local ($cle1, $cle2, $cle3) = @_; open(BASE,"<base.rst") || die 'fichier inconnu'; foreach $enregistrement (<BASE>) { ($cles, $info) = split(/\|/,$enregistrement); ($lc1, $lc2, $lc3) = split(/:/,$cles); if (($cle1 eq $lc1)&& ($cle2 eq $lc2)&&($cle3 eq $lc3)) { push(@RESULTATS,$info); } } close BASE; @RESULTATS; }
Composition de la page
170
$nom $photo $soustitre $adresse
$prix1
$prix2
$menu1
$menu2
u La prsentation de la page est obtenue en combinant
des motifs construits l'aide de 3 tables.

u Il y a autant de motifs que d'lments dans le tableaux
@resultats.
Fonction de composition de la page Conception d'un site WEB

sub sub page page { { print print " " Content-type: Content-type: text/html text/html <HTML> <HTML> <HEAD><TITLE>Résultats</TITLE></HEAD> <HEAD><TITLE>Résultats</TITLE></HEAD> <BODY <BODY BGCOLOR=\"White\">"; BGCOLOR=\"White\">"; foreach foreach $resultat $resultat (@_) (@_) { { print print " " <TABLE BORDER=\"2\" <TABLE WIDTH=\"100%\" WIDTH=\"100%\" BORDER=\"2\" CELLSPACING=\"2\" CELLSPACING=\"2\" CELLPADDING=\"2\">"; CELLPADDING=\"2\">"; do do compose_motif($resultat); compose_motif($resultat); print print "</TABLE>"; "</TABLE>"; } } print print "</BODY></HTML> "</BODY></HTML> "; "; } }
171
Fonction de composition du motif Conception d'un site WEB

sub sub compose_motif compose_motif { { local local ($photo,$nom,$soustitre,$adresse, ($photo,$nom,$soustitre,$adresse, $prix1,$menu1,$prix2,$menu2) $prix1,$menu1,$prix2,$menu2) = = split(/:/, split(/:/, @_[0]); @_[0]); print print "<TR> "<TR> <TD><IMG SRC=\"$photo\"></TD> <TD><IMG SRC=\"$photo\"></TD> <TD <TD ALIGN=\"CENTER\"> ALIGN=\"CENTER\"> <FONT <FONT SIZE=\"+3\"><B>$nom</B></FONT><BR> SIZE=\"+3\"><B>$nom</B></FONT><BR> <B>$soustitre</B><HR>$adresse</TD> <B>$soustitre</B><HR>$adresse</TD> <TD <TD ALIGN=\"CENTER\" ALIGN=\"CENTER\" VALIGN=\"TOP\"> VALIGN=\"TOP\"> <B>Menu <B>Menu 1 1: : $prix1 $prix1 F</B><HR> F</B><HR> "; "; do do compose_menu(split(/\./,$menu1)); compose_menu(split(/\./,$menu1)); print print "</TD>"; "</TD>"; .. .. print print "</TR>"; "</TR>"; } }
172
Fonction de composition des menus Conception d'un site WEB
173
sub sub compose_menu compose_menu { { print print "<TABLE>"; "<TABLE>"; foreach foreach $item $item (@_) (@_) { { print print " " <TR> <TR> <TD <TD VALIGN=\"TOP\"> VALIGN=\"TOP\"> <IMG <IMG SRC=\"blueball.gif\"></TD> SRC=\"blueball.gif\"></TD> <TD <TD VALIGN=\"TOP\">$item</TD> VALIGN=\"TOP\">$item</TD> </TR> </TR> "; "; } } print print "</TABLE>"; "</TABLE>";
Script de rfrencement : source Conception d'un site WEB

#!/usr/local/bin/perl #!/usr/local/bin/perl sub sub read_input read_input {...} {...} sub sub referencement referencement {...} {...} do do referencement(%formulaire); referencement(%formulaire);
174
u Cette version est minimale, on peut, bien sr, la
complter :
l On pourrait, par exemple, renvoyer une page analogue la page de
prsentation,
l ...
Fonction de rfrencement
175
sub referencement { local ($ville, $specialite, $categorie, ...) = (@_[0]){'ville'}, @_[0]){'specialite'}, ); open(BASE,">>base.rst") || die 'fichier inconnu'; print BASE "$ville:$specialite: |$photo: \n"; close BASE; }
u Voici une version lmentaire de la fonction de
rfrencement. u Il reste quelques petits problmes rsoudre :

l traitement des caractres spciaux, l permettre le drfrencement, l viter les drfrencements "sauvages" ...
Le "panier de la mnagre"
176
u Lorsqu'on navigue sur un site, en soumettant des
formulaires diverses reprises, le serveur ne peut pas conserver chez lui la trace de ce qui a t saisi ; il n'a aucun moyen d'identifier qui l'appelle car les adresses IP sont presque toujours flottantes.
u Pour ce faire, le serveur peut :
l Provoquer l'criture d'une information de son choix dans un fichier
de la machine client.
l Relire l'information qu'il a fait crire.
u Ces portions d'informations s'appellent des "magic
cookies".
Maintenir un "tat"
177
u L'utilisation de cookies n'est pas la seule technique
possible.
u On peut, galement, utiliser les champs "cachs" des
formulaires :
<INPUT TYPE="HIDDEN" NAME="" VALUE="">
u Ces champs ne sont pas affichs, ils permettent au
serveur d'inclure dans un formulaire une information qui lui sera retransmise.
u On peut ainsi crer des formulaires " tiroirs".
Mise en place d'un cookie

178
u Un cookie est une portion de l'en-tte du document
renvoy par le serveur (script CGI) et reu par le navigateur.

u Le cookie est rang dans un fichier cookies.txt par le
navigateur Netscape, dans un rpertoire Cookies par Internet Explorer.

Content-type: Content-type: text/html text/html Set-Cookie: Set-Cookie: <Nom> <Nom>= =<Valeur> <Valeur>; ; expires= expires=<Date> <Date>; ; path= path=<Chemin> <Chemin>; ; domain= domain=<Domaine> <Domaine>; ; secure secure <HTML> <HTML> </HTML> </HTML>
Paramtres des cookies (1)

179
u <Nom>=<Valeur>
obligatoire chanes de caractres (sans point-virgule, virgule ou espace qui peuvent tre URL-encods : %..) dfinissant le nom et la valeur du cookie. compte=1
u expires=<Date>
facultatif indique la date partir de laquelle le cookie doit tre dtruit. Si ce paramtre n'est pas fourni, le cookie est dtruit au moment o on quitte le navigateur. expires=Tuesday,19-May-1998 18:35:40 GMT

180
u domain=<Domaine>
facultatif nom du domaine de la machine vers lequel le cookie peut tre renvoy. Ce nom doit comporter au moins 2 points ".", La comparaison est effectue par la fin. domain=.unice.fr Ce nom de domaine correspond aux machines verdon.unice;fr, hermes.unice.fr, i3S.unice.fr Si ce paramtre n'est pas fourni, le cookie ne peut tre renvoy qu' la machine qui l'a mis en place.

181
u path=<Chemin>
facultatif tte du chemin qui doit tre indiqu dans l'URL requise pour dclencher l'envoi du cookie. path=/~jdem Cette tte de chemin correspond au rpertoire ~jdem ainsi qu' tous ses sous-rpertoires. Si ce paramtre n'est pas fourni, le cookie ne peut tre renvoy qu'en suivant exactement le mme chemin que celui de la requte l'origine de l'installation du cookie.
u secure
facultatif le cookie ne peut tre transmis qu' un serveur scuris.
Renvoi d'un cookie

182
u Lorsqu'une URL est requise, le navigateur recherche
tous les cookies concerns et renvoi vers le serveur un message de la forme :

Cookie: <Nom1>=<Valeur1>; <Nom2>=<Valeur2>;
u Cette chane de caractres (sans "Cookie:") est
accessible dans la variable d'environnement HTTP_COOKIE

u Le traitement de HTTP_COOKIE est analogue celui
de QUERY_STRING (cf. diapo 149).
De plus ...
183
u On peut envoyer plusieurs cookie dans le mme enu
u u u
tte. Un client peut toujours supprimer un cookie avant que le navigateur ne le dtruise en ditant le fichier cookies.txt. Pour supprimer un cookie, il suffit de renvoyer un cookie de mme dfinition qui expire dans le pass. Les cookies traversent les proxy-serveurs. Limitations :
l pas plus de 300 cookies, l pas plus de 4Ko par cookie, l pas plus de 20 cookies par serveur ou domaine.
Exemple de transaction
184
Client Client Client Client Client Client Serveur Serveur Serveur Serveur Serveur Serveur
Set-cookie: client=Donald; path=/; expires=Monday,25-May-1998 23:59:59 GMT
Cookie: client=Donald
Set-cookie: legumes=carottes; path=/
Cookie: client=Donald; legumes=carottes
Set-cookie: laitages=yaourts; path=/
Cookie: client=Donald; legumes=carottes; laitages=yaourts

Quelques rfrences
185
u La dfinition des cookies est en pleine volution. Pour
plus d'informations, on peut consulter :

http://home.netscape.com/newsref/std/cookie_spec.html bonne introduction (par les inventeurs) l'utilisation des cookies. http://www.illuminatus.com/cookie.fcgi bonne rflexion sur les risques encourus (trs peu) et l'utilisation des cookies. http://www.gh-interactive.com/WEBMASTERREPORT2.HTML magazine parution (relativement) priodique traitant de diffrents sujets concernant l'administration d'un serveur Web.
A prsent, changeons de ct
186
u Faisons le point :
Ct client Pages statiques Pages dynamiques
Ct serveur
Langage LangageHTML HTML Scripts Scripts Javascript* Javascript* Scripts ScriptsCGI CGI Perl Perl
* et Applets Java (ou Active-X). Nous ne prsenterons que le langage Javascript beaucoup plus utilis (et admis pour cet usage) que le langage Java.
Javascript
187
u Javascript est une extension de HTML qui permet
d'inclure, dans une page HTML, des fragments de programmes interprts par le navigateur. u Javascript n'est pas du Java simplifi. C'est un langage de programmation part entire, possdant des possibilits trs modernes, normalis sous la rfrence ECMA-262. u Quelques rfrences :
http://www.ecma.ch/ http://www.dpunkt.de/javascript/ http://developer.netscape.com/ http://www.imaginet.fr/ime/javascri.htm
Mon premier script

188
<HTML> <HTML> <HEAD><TITLE>JavaScript <HEAD><TITLE>JavaScript - leçon leçon 1</TITLE></HEAD> 1</TITLE></HEAD> <BODY <BODY BGCOLOR="White"> BGCOLOR="White"> <P>Texte <P>Texte HTML HTML normal.<BR> normal.<BR> <SCRIPT <SCRIPT LANGUAGE="JavaScript"> LANGUAGE="JavaScript"> document.write("Ceci document.write("Ceci provient provient d'un d'un script script JavaScript.") JavaScript.") </SCRIPT><BR> </SCRIPT><BR> Et Et voici, voici, à à nouveau, nouveau, du du texte texte HTML.</P> HTML.</P> </BODY></HTML> </BODY></HTML>
u On remarque une nouvelle balise-conteneur qui peut
tre place n'importe o dans la description d'une page HTML :

<SCRIPT paramtres></SCRIPT>
Une petite prcaution

189
<SCRIPT <SCRIPT LANGUAGE="JavaScript"> LANGUAGE="JavaScript"> <!- //--> </SCRIPT> </SCRIPT> ... ...
u Les navigateurs antrieurs Netscape 2.0 et Internet
Explorer 3.0 ne reconnaissent pas Javascript. Il est donc prudent d'en cacher les instructions en simulant des commentaires.
Les vnements
190
u Evnements et gestionnaires d'vnements sont les 2
mamelles de la programmation Javascript. u La programmation Javascript est donc essentiellement ractive. u Un vnement est une situation fugitive qui est apparat dans certaines conditions :
onLoad onClick onMouseOver onMouseOut ... on vient de charger une nouvelle page, on vient de cliquer sur un bouton, la souris vient d'entrer dans la zone d'un lien, la souris vient de sortir d'une zone de lien,
Une premire raction

191
Une expression Javascript. Remarquer " et '
TYPE="Button" TYPE="Button" VALUE="Chiche VALUE="Chiche !" !" onClick="alert('Boum onClick="alert('Boum !')"> !')">
<HTML> <HTML> ... ... <BODY> <BODY> <FORM> <FORM> <INPUT <INPUT
</FORM> </FORM> </BODY></HTML> </BODY></HTML>
"Objets" Javascript
192
u Le langage Javascript est construit autour d'un
modle-objet simple.
u Toutes les entits que permettent de manipuler les
instructions de ce langage sont des atomes ou des objets caractriss par des attributs :
l certains dfinissent ses proprits qui sont d'autres objets ou
atomes,
l d'autres dfinissent ce que l'on peut lui faire : ce sont ses
mthodes.
u Nous verrons que les objets peuvent tre dfinis et
crs, par contre, il n'existe aucun mcanisme d'hritage.

Entits prdfinies
193
u Javascript prdfinit les types d'atomes suivants :

l nombres : 3 ou 3.14 ou 0.031e2 l boolens : true ou false l chanes :
"coucou" ou 'coucou'
l fermetures :fonction et son environnement de dfinition
u Le modle objet de Javascript est construit autour de
la structure de dictionnaire symbolique (tableau associatif) dont la seule constante est this. Ce dictionnaire symbolique est instanciable et les objets Javascript seront tous des instances de this.
Accs aux attributs et aux mthodes Conception d'un site WEB
194
u Un objet tant un dictionnaire, l'accs aux attributs
(proprits ou mthodes) peut donc naturellement tre :

l Math["sin"] fonction sinus l Math["PI"] valeur du nombre Pi
u Cette criture tant assez lourde, on lui a associ un
sucre syntaxique (oprateur "." qui s'associe gauche) :

l Math.PI
Math.sin
u Exemple :
l Math.sin(1.5)
calcule le sinus d'un angle de 1.5 radians
Une page HTML

195
u Lorsqu'une fentre (contenant une page HTML) est
construite par le navigateur, une hirarchie d'objets Javascript est construite paralllement.
u Les scripts Javascript pourront accder et manipuler
les lments de cette fentre (donc de la page HTML) travers cette hirarchie.
u Seront manipulables (entre autres) :
l les ancres ou liens, l les images, l les formulaires.
Hirarchie des objets Javascript Conception d'un site WEB

window navigator document history[..]
196
mimeTypes[..] Plugins[..]
anchors[..] / links[..] forms[..] images[..] location elements[..]
Composantes d'une page (1)

197
u La hirarchie des objets associs l'objet document
est construite au fur et mesure que le texte HTML est interprt.

u Ainsi :
l Les images seront repres par :
document.images[0] document.images[1] l Les liens seront reprs par : document.links[0] document.links[1] l etc...
Composantes d'une page (2)

198
u La hirarchie des objets associs l'objet document
est plus facile parcourir si on a nomm ses lments.

u Ainsi :
l L' image dfinie par :
<IMG SRC="../Image1.gif" NAME="Chiche" ...> sera repre par : document.Chiche l Le lien dfini par : <A HREF="lesson_1.html" NAME="lesson_1"> sera repr par : document.lesson_1 l etc...
Un exemple plus consquent

199
<FORM <FORM NAME="somme"> NAME="somme"> <INPUT <INPUT TYPE="Text" TYPE="Text" NAME="x" NAME="x" VALUE="0"><BR> VALUE="0"><BR> + + <INPUT <INPUT TYPE="Text" TYPE="Text" NAME="y" NAME="y" VALUE="0"><BR> VALUE="0"><BR> <INPUT <INPUT TYPE="Button" TYPE="Button" VALUE=" VALUE=" = =" " onClick= onClick= "document.somme.z.value "document.somme.z.value = = String(parseInt(document.somme.x.value) String(parseInt(document.somme.x.value) + + parseInt(document.somme.y.value))"> parseInt(document.somme.y.value))"> <INPUT <INPUT TYPE="Text" TYPE="Text" NAME="z" NAME="z" VALUE="0"> VALUE="0"> </FORM> </FORM>
Structure d'un programme

200
u A la base, on a des atomes, des objets, des variables
et des oprateurs. u Une variable est, a priori, un nom utilis pour dsigner la valeur d'un atome ou d'un objet. u Les atomes, les objets, les variables, les oprateurs et les expressions peuvent tre regroups pour former des expressions. u Un programme est une expression.
Et c'est tout !
u Nous avons dj vus certains atomes et certains
objets, voyons les oprateurs.

Nom de variable
201
u Un nom de variable est un symbole uniquement
conu pour ne pas tre confondu avec autre chose (un nombre par exemple).
u En Javascript, un nom de variable est form de lettres
et de chiffres et commence par une lettre.

l Le signe _ est considr comme une lettre.
u On distingue les lettres majuscules des lettres
minuscules. <nom> ::= [a-zA-Z_] [0-9a-zA-Z_]*
Oprateurs
202
u A la base, l'oprateur reprsente une fonction au sens
mathmatique.
+ * / var .. = .. function .. (..) .. write
addition diffrence produit division dfinition d'une variable dfinition d'une fermeture criture cf. document.write(...)
u Certains oprateurs ne produisent que des effets :
u Un oprateur est appliqu ses arguments lors de
l'valuation de l'expression qui le contient. u Une fermeture est un oprateur dfini par le programmeur.
Expressions : smantique
203
u La syntaxe des expressions n'est pas unifie ni tout
fait rgulire (comme dans certains langages comme Scheme), elle dpend de l'oprateur et du contexte.
u Smantiquement, une expression est toujours
associe un arbre d'valuation dont les feuilles sont des atomes ou des objets et dont les nuds sont des oprateurs.
u Un mcanisme d'valuation associe une valeur
toute expression.
Evaluation
204
u Comme un oprateur est la reprsentation d'une
fonction, l'valuation de l'expression qui le contient revient remplacer, dans sa formule de dfinition, ses paramtres par ses arguments.
si f(x) = 3.x + 2 paramtre
alors
f(2) = 3.2 + 2 argument
Deux stratgies d'valuation

205
Soit f(x) = 1 + x.(2 + 3.x) et g(y) = y.y Que vaut f(g(5)) ?
f(g(5)) = 1 + g(5).(2 + 3.g(5)) = 1 + 5.5.(2 + 3.5.5) = 1926 Evaluation en ordre normal les arguments sont passs non valus
f(g(5)) = f(5.5) = f(25) = 1 + 25.(2 + 3.25) = 1926 Evaluation en ordre applicatif les arguments sont passs valus
Laquelle choisir ?
206
u Les thoriciens (thormes de Church-Rosser) ont
montr que l'valuation en ordre normal aboutit toujours.

u Mais l'valuation en ordre applicatif est plus rapide. u Alors :
l on value en ordre applicatif les expressions qui le peuvent :
formes standards,
l on value en ordre normal les expressions* que ne peuvent pas
tre values en ordre applicatif : formes spciales.
* ces expressions sont en petit nombre et bien connues. Heureusement !

Expressions vs Instructions
207
u Certains oprateurs produisent essentiellement un
"effet". Par exemple :

read(..) write(..)
u Lorsqu'une expression ne produit qu'un effet ou
lorsque sa valeur n'est pas utilise, on l'appelle, en gnral, une instruction.

u Les instructions ne sont rellement indispensables
que lorsqu'il s'agit de dcrire un comportement d'interface. Il peut, cependant, tre commode d'en utiliser dans d'autres contextes.
Squences
208
u En ordre applicatif, l'ordre dans lequel on value les
arguments d'un oprateur n'a aucune importance.

u Par contre, l'enchanement des effets produits va
dpendre de l'ordre dans lequel les instructions sont values.

u Il existe donc un oprateur qui garantit l'ordre dans
lequel on value ses arguments : la squence.

l expression-squence : (<expression>, <expression>) l instruction-squence : {<instruction>; <instruction>}
u La valeur d'une expression-squence est celle de la
dernire expression value.

Oprateurs standards
209
u Un oprateur standard est tel que ses arguments
peuvent tre valus dans n'importe quel ordre sans que son comportement en soit affect.
Oprateurs "bit bit" & "et" bit bit | "ou" bit bit ^ "ou-exclusif" bit bit << dcalage gauche >> dcalage droite >>> dcalage droite Oprateurs arithmtiques + * / % Addition (concatnation) soustraction multiplication division reste
Oprateurs de relation == < <= gaux infrieur infrieur ou gal != > >= diffrents suprieur suprieur ou gal
Expressions standards
210
u La syntaxe et la smantique des expressions
standards de Javascript est identique* celles utilises par le langage C.

u Exemples :
3 3+4 (x < y) || (x < z) (3 + x) * (5 + z) x 3*4+5 (n == 0) factorielle(6)
u La priorit des oprateurs est la mme et les
parenthses sont utilises de la mme faon.

* pour ce que j'ai pu constater jusqu' prsent.
Expressions spciales (1)

211
u La syntaxe et la smantique des expressions
spciales de Javascript est presque identique celles utilises par le langage C.

u Expressions conditionnelles :
<prdicat> ? <consquence> : <alternative> if (<prdicat>) {<consquence>} else { <alternative>} if (<prdicat>) {<consquence>}
u Oprateurs d'itration :
while (<prdicat>) {...} do {} while (<prdicat>) {} for (<expr-i>; <expr-f>; <expression>) {}
Expressions spciales (2)

212
u Dfinir une variable, c'est lier un nom une valeur. u Dfinition d'une variable :
<nom> = <expression>
u Lorsqu'un nom qui n'a t li aucune valeur apparat
dans une expression, on dit que c'est une variable libre. Sinon, la variable est dite lie.
u Une expression contenant des variables libres n'a pas
de valeur, on dit que sa valeur est undefined (la nonvaleur).

u Une expression ne contenant aucune variable libre
est dite ferme.

Lieurs de variables
213
u Le signe = est un lieur de variable :

l'expression (x = 2, x+5) vaut 7
u Lorsqu'une variable est lie, on peut la renommer
librement (presque).
u La dfinition d'une fonction est une autre manire de
lier des variables :

function <nom> (<nom>, <nom>) {} Paramtres : noms lis dans la squence
u L'oprateur function construit en fait une fermeture.

Oprateurs "paresseux"
214
u Certains oprateurs pourraient trs bien tre
considrs comme standards. u Pourtant, il est commode (plus efficace) de les considrer comme spciaux car tous leurs arguments ne sont pas ncessaires leur valuation. u On peut procder ainsi pour toutes les fonctions incompltes.
Oprateurs boolens && conjonction || disjonction !
complmentation
Objet statiques ...

215
u Pour reprsenter certaines situations relles, la
variable dfinie statiquement lien nom-valeur ternel comme nous venons de le voir n'est pas trs commode.
u On acceptera (avec rticence) de perdre les
possibilits du raisonnement au profit des possibilits de la description.

Ce qui revient avoir l'attitude un peu illogique * suivante : dcrivons dj, on verra bien aprs ce qu'on peut en faire.
* souvenez-vous de proverbe "Shaddock" : il n'est pas ncessaire de regarder o on va, il sera bien temps de voir quand on y sera !
ou objets vivants ?
216
u On admettra alors les deux oprations
complmentaires suivantes :
attacher un nom une valeur : dfinir une variable, attacher une valeur un nom : affecter une variable.
u Le lien nom-valeur n'est plus ternel et la variable
peut avoir une histoire.

x=3 x=4 x=x+2 dfinition de la variable x affectation de la variable x qui, prsent, vaut 4 r-affectation de la variable x
u Ce qui est droite d'un signe = fait rfrence au
pass tandis que ce qui est gauche reprsente le futur.

Oprateurs d'affectation
217
u Ces oprateurs sont, en fait, des sucres syntaxiques :

x += 3 x -= 5 au lieu de x = x + 3 au lieu de x = x - 5
u La syntaxe gnrale des expressions (instructions ?)
utilisant ces oprateurs est :

x <op>= <expression> au lieu de x = x <op> <expression>
u Une expression d'affectation a une valeur,
l'expression suivante a donc un sens :

x=y=z=3 l'oprateur = s'associe droite.
Oprateurs d'inc(dec)rmentation Conception d'un site WEB

u Certains oprateurs dcrivent une affectation
218
implicite :
++ -incrmentation dcrmentation
u L'incrmentation (dcrmentation) peut tre effectue
avant ou aprs l'valuation de l'expression contenant l'oprateur.

u Princrmentation (prdcrmentation) :
(x++ + 2) (++x + 2) on value x+2 puis x est incrmente on incrmente x puis on value x + 2
Les objets Javascript

219
u Un objet javascript est dcrit par sa fonction-
constructeur qui configure l'objet universel this en lui dfinissant des attributs et des mthodes.
u Exemple un nombre rationnel possde 2 attributs,
son numrateur et son dnominateur :

function Rationnel(n,d) { this.numerateur = n; this.denominateur = d; }
Instanciation d'un objet

220
u L'instanciation d'un objet est effectue par l'oprateur
standard new.
u Instancier un objet, c'est en fabriquer un nouvel
exemplaire partir de sa description.

u Exemple :
q12 = new Rationnel(1,2) q34 = new Rationnel(3,4)
u Accs aux attributs :

q12.numerateur q12.denominateur vaut vaut 1 2
Les mthodes d'un objet (1)

221
u En dfinissant la fermeture ad'hoc, on peut associer
une mthode d'addition aux nombres rationnels.

function rat_somme(q) { n1 = this.numerateur; d1 = this.denominateur; n2 = q.numerateur; d2 = q.denominateur; return new Rationnel(n1*d2+n2*d1,d1*d2); }
u On remarque l'utilisation de l'objet this qui reprsente
l'objet qui a reu le message.
Les mthodes d'un objet (2)

222
u Il ne reste plus qu' rajouter la mthode aux
proprits de l'objet.
function Rationnel(n,d) { this.somme = rat_somme; this.numerateur = n; this.denominateur = d; }
u On peut alors crer des nombres rationnels et
effectuer des oprations leur sujet :

q12 = new Rationnel(1,2); q34 = new Rationnel(3,4); qs = q12.somme(q34); On "envoie le message somme" l'objet q12.
Un exemple plus consquent

223
u L'objet de cet exemple est d'introduire une calculette
dans une page Web.

u Une calculette un peu simplifie, utilisant une
notation polonaise post-fixe, dont l'allure est la suivante :
Description de son comportement Conception d'un site WEB

u C'est une machine tats finis qui permet de le
224
dcrire le plus facilement :

init Clear / raz Chiffre / oprande_initial
acquisition Chiffre / oprande_courant Chiffre / oprande_initial Opration / calcul_initial Clear / raz calcul Opration / calcul_courant
L'automate
225
u L'automate qui dcrit la machine tats finis
comporte :
l 3 tats : l 3 vnements : l 5 actions :
"init", "acquisition" et "calcul" "Clear", "Chiffre" et "Opration" "raz", "oprande_initial", "oprande_courant", "calcul_initial", "calcul_courant"
u L'interface utilisateur est construite autour d'un
formulaire nomm "calculette" qui comporte :

l des boutons pour engendrer les vnements, l une zone de texte nomme "n" pour raliser les affichages de
l'oprande (en mode "acquisition") et du rsultat (en mode "calcul").
Le formulaire "calculette"
226
<FORM <FORM NAME="calculette"> NAME="calculette"> <TABLE <TABLE BORDER="5"> BORDER="5"> <TR> <TD <TR> <TD COLSPAN="4" COLSPAN="4" ROWSPAN="1"> ROWSPAN="1"> <INPUT <INPUT TYPE="Text" TYPE="Text" NAME="n" NAME="n" VALUE="0"></TD></TR> VALUE="0"></TD></TR> <TR> <TD><INPUT <TR> <TD><INPUT TYPE="Button" TYPE="Button" onClick="transition('chiffre','1')"></TD> onClick="transition('chiffre','1')"></TD> <TD><INPUT <TD><INPUT TYPE="Button" TYPE="Button" onClick="transition('chiffre','2')"></TD> onClick="transition('chiffre','2')"></TD> <TD><INPUT <TD><INPUT TYPE="Button" TYPE="Button" onClick="transition('chiffre','3')"></TD> onClick="transition('chiffre','3')"></TD> <TD><INPUT TYPE="Button" <TD><INPUT TYPE="Button" onClick="transition('operation','add')"></TD> onClick="transition('operation','add')"></TD> </TR> </TR> <TR>...</TR> <TR>...</TR> <TR>...</TR> <TR>...</TR> <TR> <TD><INPUT <TR> <TD><INPUT TYPE="Button" TYPE="Button" onClick="raz()"></TD> onClick="raz()"></TD> <TD><INPUT <TD><INPUT TYPE="Button" TYPE="Button" onClick="transition('chiffre','0')"></TD> onClick="transition('chiffre','0')"></TD> <TD><INPUT <TD><INPUT TYPE="Button" TYPE="Button" onClick="transition('operation','neg')"></TD> onClick="transition('operation','neg')"></TD> <TD><INPUT <TD><INPUT TYPE="Button" TYPE="Button" onClick="transition('operation','div')"></TD> onClick="transition('operation','div')"></TD> </TR> </TR> </TABLE></FORM> </TABLE></FORM>
L'tat de la calculette
227
u L'tat de la calculette peut tre reprsent par 4
variables :
etat operande valant "init", "acquisition" ou "calcul", valant la valeur numrique de l'oprande en cours d'utilisation, resultat valant le rsultat de l'accumulation de tous les calculs effectus depuis le dernier "Clear". document.calculette.n.value - chane des chiffres de l'oprande en mode "acquisition", - chane des chiffres du rsultat en mode "calcul".
La fonction de transition
228
function function transition transition (e,v) (e,v) { { if if (etat (etat == == "init") "init") { { if if (e (e == == "chiffre") "chiffre") {operande_initial(v);etat {operande_initial(v);etat = = "acquisition"} "acquisition"} return; return; } } if if (etat (etat == == "acquisition") "acquisition") { { if if (e (e == == "chiffre") "chiffre") {operande_courant(v)} {operande_courant(v)} if if (e (e == == "operation") "operation") { { operande operande = = parseInt(document.calculette.n.value); parseInt(document.calculette.n.value); calcul_initial(v); calcul_initial(v); etat etat = = "calcul";} "calcul";} return; return; } } if if (etat (etat == == "calcul") "calcul") { { if if (e (e == == "chiffre") "chiffre") {operande_initial(v);etat {operande_initial(v);etat = = "acquisition"} "acquisition"} if if (e (e == == "operation "operation") {calcul_courant(v)} return; return; } } } }
L'action "raz"
229
function function raz raz () () { { resultat = resultat = 0; 0; operande = operande = 0; 0; etat = etat = "init"; "init"; document.calculette.n.value document.calculette.n.value = = "0"; "0"; } }
Les actions "operande_"

230
function function operande_initial operande_initial (v) (v) { { document.calculette.n.value document.calculette.n.value = = v; v; } } function function operande_courant operande_courant (v) (v) { { if if (document.calculette.n.value (document.calculette.n.value == == "0") "0") { { document.calculette.n.value document.calculette.n.value = = v; v; } } else else { { document.calculette.n.value document.calculette.n.value += += v; v; } } } }
Pour ne pas avoir de "0" gauche

Les actions "calcul_"

231
function function calcul calcul (v) (v) { { if {resultat if (v (v == == "add") "add") {resultat += += operande;} operande;} if {resultat if (v (v == == "sub") "sub") {resultat -= -= operande;} operande;} if {resultat if (v (v == == "mul") "mul") {resultat *= *= operande;} operande;} if {resultat if (v (v == == "div") "div") {resultat /= /= operande;} operande;} document.calculette.n.value document.calculette.n.value = = resultat; resultat; } } function function calcul_initial calcul_initial (v) (v) { { if {resultat if (v (v == == "neg") "neg") {resultat = = -operande;} -operande;} calcul(v); calcul(v); } } function function calcul_courant calcul_courant (v) (v) { { if {resultat if (v (v == == "neg") "neg") {resultat = = -resultat;} -resultat;} calcul(v); calcul(v); } }
Les objets Javascript d'usage courant Conception d'un site WEB

u Les objets Javascript constituent une hirarchie
232
documente dans tous les bons outils de dveloppement.

u La rfrence Javascript peut tre consulte
home.netscape.com/eng/mozilla/3.0/handbook/javascript
u Attention, Javascript est en pleine volution, ce site
est consulter frquemment.
En guise de conclusion
233
u Le but de ce cours tait :

l de vous donnez quelques lments de base pour apprendre
monter un site Web,

l de vous donnez des pistes pour suivre les volutions qui se
dessinent dans le monde internet.
u Ce cours est donc largement incomplet. u Vous avez cependant constat qu'il tait dj possible
de construire des applications intressantes avec peu de moyens.

Conception D'un Site WEB

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Conception D'un Site WEB

Hochgeladen von

Copyright:

Verfügbare Formate

Plan du cours

Conception d'un site WEB

Jean DEMARTINI 14.02.00

u Projet "World Wide Web" prsent en 1989, au CERN

Jean DEMARTINI 14.02.00

u Structure de document adapte la consultation

u La consultation d'un hyperdocument ncessite des

outils de navigation adapts : butineurs (browsers), navigateurs, fureteurs ...

Jean DEMARTINI 14.02.00

u De nombreux greffons de prsentation : les plugins.

WYSIWYG ? srement pas !

et non pas sa prsentation : langage HTML (HyperText Mark Up Language).

compose le document "au mieux" compte tenu du contexte.

Un type de document, une structure Conception d'un site WEB

u Un rapport technique se consulte :

Jean DEMARTINI 14.02.00

u Certains documents gagnent tre interactifs :

u Certains documents ne peuvent pas tre interactifs :

Jean DEMARTINI 14.02.00

Un journal, un site Web

u Un journal est conu autour de sa une qui :

introduits " la une".

u Un service Web poursuit souvent les mmes objectifs

et sera structur de la mme faon.

du temps de chargement des pages.

Jean DEMARTINI 14.02.00

Conception d'un site WEB

Structure d'un hyperdocument

u Un hyperdocument est articul autour de sa page

d'accueil : la home page.

u Le document doit tre structur de telle sorte qu'on

ne s'y perde pas :

Jean DEMARTINI 14.02.00

Edition sur le Web

u Le rseau peut simplement servir de support de

diffusion pour un ouvrage :

u Le service correspondant a la structure d'une librairie

virtuelle et ne propose qu'un catalogue d'ouvrages.

Jean DEMARTINI 14.02.00

Localisation d'un document

u Un document Web est repr par son URL (Unique

Jean DEMARTINI 14.02.00

Architecture de fichiers Web

local ... ... etc

racine du serveur htdocs

Protection des documents

u Le systme de protection est double :

l'hte (Unix, Windows NT ...),

u Le serveur Web peut autoriser l'accs :

u Attention. Nous verrons qu'il est possible, dans

certains cas, de contourner ces protections.

Jean DEMARTINI 14.02.00

World Wide Web

domaine domaine Serveur "proxy" Serveur de noms (DNS)

Quelques protocoles utiles

HTTP : FTP : SMTP :

TELNET : protocole de connexion distance.

Jean DEMARTINI 14.02.00

u Tout au long de ce cours nous supposerons que nous

nous trouvons dans la configuration suivante :

Web tant Apache.

sous Windows 95 ou Windows NT.

u Le poste de dveloppement utilis :

é è ê à ü ç

ô â ê ï ë