Vous êtes sur la page 1sur 117

 

Plan du cours
Conception d'un
d'un s ite WEB
1

u Historique
u HyperDocuments
u Site Web
u Atelier de développement
u Pages statiques : langage HTML
u Programmation C G I  :
 : langage Perl
u Pages dynamiques : J avas
avascc ri pt 

 J ean DE MAR TIN I © 14.02.00

Historique
Conception d'un
d'un s ite WEB
2

u Projet "World Wide Web" présenté en 1989, au CERN


(Genève), par TimeBd'informat
mondiall d'échang
mondia erners
erne
d'i rs Leeions . un réseau
 : pour
nformations
u De nombreux éléments favorables :
l développement du réseau de transport Internet ,
l système distribué pour l'annuaire des machines (DNS),
l besoin de la communauté mondiale des physiciens (10 000
chercheurs),
l une idée simple,
l compétences de l'initiateur du projet.

 J ean DE MAR TIN I © 14.02.00


 

HyperDocuments
Conception d'un
d'un s ite WEB
3

u Structure de document adaptée à 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 nécessite des
outils de navigation adaptés : butineurs (browsers),
navigateurs, fureteurs ...

 J ean DE MAR TIN I © 14.02.00

Navigateurs célèbres
Conception d'un
d'un s ite WEB
4

u Un des premiers : Mos aic


aic..
u Le plus répandu : Nets
Netscape
cape navig at
ator.
or.
u Le dernier en date :  Inte
 Internet
rnet E xplorer.
u Un navigateur joue plusieurs rôles :
l présentation d'un hyperdocument,
l accès aux pages distantes en suivant les liens.
u De nombreux greffons de présentation : les plugins.
l documents à imprimer : formats .pdf ...
l séquences sonores : formats .au, .wav ...
l images fixes : formats .gif, .jpeg ...
l images animées : formats .avi, .mov, .mpeg ...

 J ean DE MAR TIN I © 14.02.00


 

WYSIWYG ? sûrement pas !


Conception d'un
d'un s ite WEB
5

u Brisons immédiatement un mythe actuel.


u C'est la structure d'un hyperdocument qui est décrite
et non pas sa présentation : langage HTML
(Hype
(Hy perText
rText Mark
Mark Up Languag e).
u Le navigateur interprète cette description puis
compose le document "au mieux" compte tenu du
contexte.
l résolution de l'écran,
l couleurs disponibles,
l polices disponibles,
l taille des images à afficher,
l taille de la fenêtre d'affichage.

 J ean DE MAR TIN I © 14.02.00

Un type de document, une


Conception d'un
d'un s ite WEB
structure
6

u Un roman se lit  :
 :
l les pages se suivent,
l quelques notes de bas de page,
l une table des matière très sommaire.
u Un rappo
rapport
rt te
techni
chni que 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 matières fournie,
l un index,
l une bibliographie (renvois hors du texte).

 J ean DE MAR TIN I © 14.02.00


 

Documents interactifs
Conception d'un
d'un s ite WEB
7

u Quelques constatations :
l un écran est petit (en général),
l lire un écran est pénible,
l changer d'écran est rapide.
u Certains documents gagnent à être interactifs :
l notices techniques,
l documents de présentation,
l documentations commerciales.
u Certains documents ne peuvent pas être interactifs :
l documents de réflexion.

 J ean DE MAR TIN I © 14.02.00

Un journal, un site Web


Conception d'un
d'un s ite WEB
8

u Un journal est conçu 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 mêmes objectifs
et sera structuré de la même façon.
u Un détail important :
l les frais de consultation, et donc l'assiduité
l'assiduité du client, sont fonction
du temps de chargement des pages.

 J ean DE MAR TIN I © 14.02.00


 

Structure d'un
Conception d'un
d'un s ite WEB
hyperdocument
9

u Un hyperdocument est articulé autour de sa page


d'accueil : la home pa
pagg e.
u La home pag
pag e représente un compromis difficile :
l doit être attrayante, colorée, animée,
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 présence de trop de liens externes.

 J ean DE MAR TIN I © 14.02.00

Edition sur le Web


Conception d'un
d'un s ite WEB
10

u Le réseau 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 "intéressants" sont sous une forme
imprimable essentiellement :
l format pos ts cr ipt ,
l format acrobat .

 J ean DE MAR TIN I © 14.02.00


 

Localisation d'un document


Conception d'un
d'un s ite WEB
11

u Un docu
document
ment Web  est repéré par son UR L  (Unique
Ressource Location).
u URL la plus simple :
 protocole://serveur/

u URL courante :
 protocole://serveur/repert/.../document
 protocole://serveur/repert/.../document

u Quelques exemples :
http://www.inria.fr/
http://www.ti.com/
http://www.yahoo.com/
http://verdon.unice.fr/~jdem/

 J ean DE MAR TIN I © 14.02.00

 Architecture de fichiers Web


Conception d'un
d'un s ite WEB
12

racine de l'hôte
 /

usr bin ...

local ...

... etc

racine du serveur 
... htdocs

espace du serveur 

 J ean DE MAR TIN I © 14.02.00


 

Protection des documents


Conception d'un
d'un s ite WEB
13

u Le système de protection est double :


l protection de base des fichiers par le système d'exploitation de
l'hôte (Unix, Windows NT ...),
l protection des documents par le serveur
ser veur lui-même.
u Le serveur Web peut autoriser l'accès :
l aux lecteurs enregistrés : nom , mot de
de pas
pas s e
l aux lecteurs accédant depuis un domaine particulier (au sens
TCP/IP),
l aux lecteurs accédant depuis une machine particulière.
u Attention. Nous verrons qu'il est possible, dans
certains cas, de contourner ces protections.

 J ean DE MAR TIN I © 14.02.00

World Wide Web


Conception d'un
d'un s ite WEB
14

Serveur 
de pages

domaine
domaine
Serveur 
"proxy"

Serveur 
Client de noms
(DNS)

 J ean DE MAR TIN I © 14.02.00


 

Quelques protocoles utiles


Conception d'un
d'un s ite WEB
15

HTTP
HTTP : protoc
protocol
ole
e d'é
d'éch
chan
ange
ge de do
docu
cume
ment
nts
s HTM
HTML
L
(HyperText Transfert Protocol)
FTP
FTP: proto
pro toco
cole
le d'
d'éc
écha
han
nge de fi
fich
chie
iers
rs que
uelc
lco
onq
nque
ues
s
(File Transfert Protocol).
SMTP
SMTP : prot
protoc
ocol
ole
e d'é
d'éch
chan
ange
ge de co
cour
urri
rier
er él
élec
ectr
tron
oniq
ique
ue..
TELNET
TELNET : proto
protocole
cole de
de connexion
connexion à distance.
distance.

 J ean DE MAR TIN I © 14.02.00

 Atelier de développement
Conception d'un
d'un s ite WEB
16

u Tout au long de ce cours nous supposerons que nous


nous trouvons dans la configuration suivante :
l le serveur est hébergé sur une machine Unix , le logiciel-serveur 
Web étant A pache .
l le poste de développement est une machine en réseau de type PC
sous Windows 95 ou Window
Windowss NT .
u Le poste de développement 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.

 J ean DE MAR TIN I © 14.02.00


 

Outils HTML
Conception d'un
d'un s ite WEB
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 résultats très intéressants aujourd’hui.
u Il existe également des convertisseurs de format
pouvant donner d'assez mauvais résultats.
l deux exceptions : LateX2HTML et RTF2HTML.

 J ean DE MAR TIN I © 14.02.00

Outils de dessin
Conception d'un
d'un s ite WEB
18

u Les images utilisées 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 différents formats d'image : .gif et .jpeg au moins,
l de produire des dessins à fond transparent,
u l'interfaçage avec un scanner (format twain par 
exemple) est utile.

 J ean DE MAR TIN I © 14.02.00


 

Outils de validation
Conception d'un
d'un s ite WEB
19

u La présentation d'une page Web dépendant du


navigateur, il est nécessaire de disposer de quelques
navigateurs sous différentes versions pour tester le
look  d'une
 d'une page :
l Nestscape 3.0 et 4.x — les versions 4.x est la plus répandue,
l Internet Explorer 4.0 et 5.0 — les versions antérieures sont
beaucoup trop rustiques.
l C’est la version Internet Explorer 5.x qui, aujourd’hui permet l’accès
au plus grand nombre de sites.

 J ean DE MAR TIN I © 14.02.00

Outils de transfert de fichiers


Conception d'un
d'un s ite WEB
20

u Le service est construit sous la forme d'une maquette


dans l'espace
Lorsqu'il disqueil du
est validé, fautposte de développement.
le transférer dans l'espace
disque du serveur.
u WS_Ftp de IPSwitch donne d'excellents résultats.

 J ean DE MAR TIN I © 14.02.00


 

Outil de connexion à
Conception d'un
d'un s ite WEB
distance
21

u Certains paramétrages et même certains


développements (programmation CGI) ne peuvent se
faire et/ou se valider que sur le serveur lui-même.
u Il est donc indispensable de pouvoir se connecter à
distance.
u QVT/Net de QPC Software donne d'excellents
résultats.

 J ean DE MAR TIN I © 14.02.00

Le langage HTML
Conception d'un
d'un s ite WEB
22

u Ces quelques URL http://... vous donneront accès à


une information complémentaire.
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 décrit la structure d'un document à
l'aide de balises qui délimitent un élément du
document
l <NOM_de_BALISE paramètres>...</NOM_de_BALISE>
u Tout document HTML est délimité par :
l <HTML>...</HTML>

 J ean DE MAR TIN I © 14.02.00


 

Structure d'un document


Conception d'un
d'un s ite WEB
HTML
23

u Un document HTML comprend toujours 2 éléments :


entête : <HEAD>...</HEAD>
corps : <BODY paramètres >...</BODY>
u La structure de base d'un document HTML est alors :
<HTML>
<HTML>
<HEAD>
<HEAD>
...
...
</HEAD>
</HEAD>
<BODY paramètres >>
<BODY
...
...
</BODY>
</BODY>
</HTML>
</HTML>

 J ean DE MAR TIN I © 14.02.00

En-tête de document
Conception d'un
d'un s ite WEB
24

u Une en tête comprend deux parties :


l un titre de la page,
l une base de référence
u Le titre de la page est décrit par :
<TITLE>...</TITLE>
u La base de référence définit la racine d'accès par 
défaut à toutes les URL utilisées dans la page :
 <BASE HREF="UR L ">
u Si la base de référence n'est pas définie, toutes les
URL utilisées sont repérées par rapport au répertoire
de la page en cours.

 J ean DE MAR TIN I © 14.02.00


 

Ma première page HTML


Conception d'un
d'un s ite WEB
25

<HTML>
<HTML>
<HEAD>
<HEAD>
<TITLE>Ma
<TITLE>Ma premi&egrave;
premi&egrave;re
re page</TITLE>
premi&egrave;re page</TITLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
Ma
Ma premi&egrave;
premi &egrave;re
re page
premi&egrave;re page Web.
Web.
</BODY>
</BODY>
</HTML>
</HTML>

définition du caractère "è"

 J ean DE MAR TIN I © 14.02.00

Et pour la voir ?
Conception d'un
d'un s ite WEB
26

u Tout d'abord, il faut taper le texte précédent en

textes) : un éditeur  de
utilisant  de textes (pas un traitement de
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 répertoire qui
servira de racine à la maquette de votre service.
u Utiliser un navigateur, hors connexion, en simple
consultation de fichier local.

 J ean DE MAR TIN I © 14.02.00


 

La voici !
Conception d'un
d'un s ite WEB
27

Son titre

 J ean DE MAR TIN I © 14.02.00

Quelques précisions
Conception d'un
d'un s ite WEB
28

u Il est souvent utile d'inclure des commentaires dans


votre description de page :
<! -- auteu
auteurs
rs : Tom & Jerry -->
u Le texte en commentaire n'est pas interprété par le
navigateur.
u Un premier pseudo-commentaire est utilisé par le
navigateur pour déterminer la version du langage
HTML utilisée dans la page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

 J ean DE MAR TIN I © 14.02.00


 

Caractères spéciaux
Conception d'un
d'un s ite WEB
29

u La plupart des alphabets comportent des caractères


utilisant des signes diacritiques qui sont
indisponibles sur le clavier utilisé. Ces caractères ont
donc été codés :
u Exemples :
é &eacute; ô &ocirc;
è &egrave; â &acirc;
ê &ecirc; ê &ecirc;
à &agrave;  ï  &iuml;
ü &uuml; ë &euml;
ç &ccedil;

 J ean DE MAR TIN I © 14.02.00

Paragraphes...
Conception d'un
d'un s ite WEB
30

u En fait notre première page a été acceptée par le

paragraphe par
navigateur nonpure g enti
entilles
signalé. Illless
s e carla
faudrait elle contient
décrire par un
:
<!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&egrave;re
premi&egrave;re page</TITLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<P>Ma
<P> Ma premi&egrave;re
<P>Ma premi&egrave;re page
page Web.</P>
Web.</P>
Web.</P>
</BODY>
</BODY>
</HTML>
</HTML>
 J ean DE MAR TIN I © 14.02.00
 

...Paragraphes
Conception d'un
d'un s ite WEB
31

u La meilleure présentation d'un paragraphe est


déterminée par le navigateur lorsqu'il compose la
page.
u Pour faciliter la compréhension de la structure du
document HTML, on présente, en général, les
paragraphes sur une seule ligne (pouvant largement
déborder de l'écran de saisie).

 J ean DE MAR TIN I © 14.02.00

Ma deuxième page HTML


Conception d'un
d'un s ite WEB
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&egrave;re
premi&egrave;re page</TITLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<P>Ma
<P>Ma premi&egrave;re
premi&egrave;re page
page Web.</P>
Web.</P>
<P>Un
<P>Un deuxi&egrave;me
deuxi&egrave;me paragraphe
paragraphe permet
permet
de
de la
la meubler
meubler un
un peu.</P>
peu.</P>
</BODY>
</BODY>
</HTML>
</HTML>

 J ean DE MAR TIN I © 14.02.00


 

Que voici
Conception d'un
d'un s ite WEB
33

Les paragraphes

 J ean DE MAR TIN I © 14.02.00

Eléments d'une page


Conception d'un
d'un s ite WEB
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, à numéros, descriptives,
l des tableaux,
l des formulaires,
l des décorations.
u Des portions de textes peuvent être mises en
évidence en utilisant différents s tyles .

 J ean DE MAR TIN I © 14.02.00


 

Titres de paragraphes...
Conception d'un
d'un s ite WEB
35

u On dispose de 6 niveaux de titres :


<Hn paramètres
 paramètres >...</Hn> avec n = 1..6

<BODY>
<BODY>
<H1
<H1 ALIGN="LEFT">Niveau
ALIGN="LEFT">Niveau 1</H1>
1</H1>
<H2
<H2 ALIGN="CENTER">Niveau
ALIGN="CENTER">Niveau 2</H2>
2</H2>
<H3
<H3 ALIGN="RIGHT">Niveau
ALIGN="RIGHT">Niveau 3</H3>
3</H3>
<H4
<H4 ALIGN="JUSTIFY">Niveau 44 :: Ce
ALIGN="JUSTIFY">Niveau Ce titre
titre est
est
cens&eacute; &ecirc;tre
cens&eacute; &ecirc;tre
 justifi&eacute;.</H4>
 justifi&eacute;.</H4>
</BODY>
</BODY>

 J ean DE MAR TIN I © 14.02.00

...Titres de paragraphes
Conception d'un
d'un s ite WEB
36

 J ean DE MAR TIN I © 14.02.00


 

Styles de paragraphes...
Conception d'un
d'un s ite WEB
37

u Les paragraphes peuvent être :


l alignés à gauche,
l alignés à droite,
l centrés.

<BODY>
<BODY>
<P
<P ALIGN="LEFT"
ALIGN="LEFT">On
>On the night of 3rd December 
ALIGN="LEFT">On
the
the
<P
<P ALIGN="CENTER"
ALIGN="CENTER">On
>On the night of 3rd December 
ALIGN="CENTER">On
<P
<P ALIGN="RIGHT"
ALIGN="RIGHT">On
>On the night of 3rd December 
ALIGN="RIGHT">On
th
th
</BODY>
</BODY>

 J ean DE MAR TIN I © 14.02.00

...Styles de paragraphes
Conception d'un
d'un s ite WEB
38

 J ean DE MAR TIN I © 14.02.00


 

Quelques décorations
Conception d'un
d'un s ite WEB
39

u On peut introduire des ruptures de lignes par <BR>


u On peut également introduire des traits de séparation
par <HR paramètres>
u Les espaces excédentaires sont supprimés sauf s’il
sont forcés par &nbsp;
<BODY>
<BODY>
   <P>Un
<P>Un paragraphe
paragraphe peut
peut contenir
contenir un
un saut
saut &agrave;
&agrave; la
la ligne
ligne
interne
interne comme
comme ici
ici :<BR>
::<BR>
<BR> sans
 sans
sans que
quepour
pourautant
autanton
onquitte
quitte le le
paragraphe.</P>
paragraphe.</P>
   <P>On
<P>On peut
peut également
également introduire
introduire&nbsp;&nbsp;&nbsp
&nbsp;&nbsp;&nbsp;des
introduire&nbsp;&nbsp;&nbsp;des;des traits
traits
de
de séparations</P>
séparations</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>
 J ean DE MAR TIN I © 14.02.00

Pour voir ceci...


Conception d'un
d'un s ite WEB
40

 J ean DE MAR TIN I © 14.02.00


 

Ou bien cela !
Conception d'un
d'un s ite WEB
41

 J ean DE MAR TIN I © 14.02.00

Multicolonnage
Conception d'un
d'un s ite WEB
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 ALIGN="JUSTIFY">Sans
<P ALIGN="JUSTIFY">Sans doute les
les notes
notes que
que nous
nous entendons
entendons
   <P
<P ALIGN="RIGHT"><I>Du
ALIGN="RIGHT"><I>Du c&ocirc;t&eacute;
c&ocirc;t&eacute; de
de chez
chez Swann
Swann -- M
M
   </MULTICOL>
</MULTICOL>
</BODY>
</BODY>

 J ean DE MAR TIN I © 14.02.00


 

Ce qui donne ceci...


Conception d'un
d'un s ite WEB
43

 J ean DE MAR TIN I © 14.02.00

Ou bien cela
Conception d'un
d'un s ite WEB
44

 J ean DE MAR TIN I © 14.02.00


 

Styles physiques
Conception d'un
d'un s ite WEB
45

u Les styles physiques sont des conteneurs permettant


de définir le style d'affichage d'une portion de texte :
<B>...</B> en g r as,
< I> ...< /I> en italique,
<U>...</U> soulignée,
<SUP>
<S UP>.. ...<
.</S
/SUP>
UP> en ex
expoposa
sant
nt,,
<SUB
<S UB>. >...<
..</SU
/SUB>
B> en in
indi
dice
ce,,
<TT>...</TT> en style télétype.

Portion de texte <B>en gras</B>,<BR>


Portion de gras</B>,<BR>
Portion
Portion de
de texte <I>en italique</I>,<BR>
italique</I>,<BR>
Portion
Portion de texte 
texte <U>soulign&eacute;e</U>
<U>soulign&eacute;e</U>,<BR>
,<BR>
<U>soulign&eacute;e</U>,<BR>
Portion
Portion de texte <SUP>exposant</SUP>,<BR>
<SUP>exposant</SUP>
texte <SUP>exposant</SUP>,<BR>,<BR>
Portion
Portion de texte <SUB>indice</SUB>
<SUB>indice</SUB>,<BR>
,<BR>
<SUB>indice</SUB>,<BR>
Portion
Portion de
de texte <TT>en style t&eacute;l&eacute;type</TT>.
t&eacute;l&eacute;type</TT>.
 J ean DE MAR TIN I © 14.02.00

Ce qui donne
Conception d'un
d'un s ite WEB
46

 J ean DE MAR TIN I © 14.02.00


 

Styles logiques
Conception d'un
d'un s ite WEB
47

u Les styles logiques sont des conteneurs permettant


de définir un style d'affichage laissé à la discrétion du
navigateur :
l <STRONG>...</STRONG> pour insister,
l <EM>...</EM> pour mettre en évidence,
l <BLOCK
<BLOCKQUO
QUOTE>
TE>...
...</BL
</BLOCK
OCKQUO
QUOTE>
TE> une cita
citatio
tion,
n,
l <PRE>...</PRE> tel quel,
l <ADRESS>...</ADRESS> une adresse.

<P>Cette
<P>Cette portion
portion de
de texte, <STRONG>j'insiste</STRONG>
<STRONG>j'insiste</STRONG>,
<STRONG>j'insiste</STRONG>,, ne
<EM>doit
<EM>doit pas
pas &ecirc;tre
&ecirc;tre n&eacute;glig&eacute;e</EM>.
n&eacute;glig&eacute;e</EM>
n&eacute;glig&eacute;e</EM>.. SunSun Tse
Tse dit
:</P>
:</P>
<P><BLOCKQUOTE>Prenez
<P> <BLOCKQUOTE>Prenez
<P><BLOCKQUOTE>Prenez
<P><BLOCKQUOTE> Prenez le nom de tous
tous vos officiers, inscrivez-
les
les sur
sur un
un r&eacute;pertoire sp&eacute;cial avec l'indication de de leurs
capacit&eacute;s
capacit&eacute;s et et de
de leurs
leurs aptitudes,
aptitudes, afin
afin que
que chacun
chacun soit
soit
employ&eacute;
employ&eacute; suivant
suivant ses
ses qualit&eacute;s.</BLOCKQUOTE
qualit&eacute;s.</BLOCKQUOTE>
></P>
qualit&eacute;s.</BLOCKQUOTE></P>
qualit&eacute;s.</BLOCKQUOTE> </P>
 J ean DE MAR TIN I © 14.02.00

Présentation Netscape 3.0


Conception d'un
d'un s ite WEB
48

 J ean DE MAR TIN I © 14.02.00


 

Les listes
Conception d'un
d'un s ite WEB
49

u HTML permet la définition de 3 types de listes :


l listes à puce : <UL>...<LI>...</UL>
l listes numérotées : <OL>...<LI>...</OL>
l listes descriptives : <DL>...<DT>...<DD>...</DL>
u Les puces peuvent être choisies parmi :
l ¡

u Les numérotations peuvent être choisies parmi :


l 1. 2. 3. ...
l a. b. c. ...
l A. B. C. ...
l i. ii. iii. ...
l I. II. III. ...

 J ean DE MAR TIN I © 14.02.00

Listes à puces
Conception d'un
d'un s ite WEB
50

<MULTICOL
<MULTICOL COLS="2"
COLS="2" WIDTH="100%"
WIDTH="100%" GUTTER="10">
GUTTER="10">
<P>Un
<P>Un bon pot-au-feu n&eacute;cessite :</P>
bon pot-au-feu n&eacute;cessite :</P>
<UL
<UL TYPE="DISC">
TYPE="DISC">
<LI>des
<LI>des poireaux,
poireaux,
<LI>des carottes,
<LI>des carottes,
<LI>des
<LI>des navets.
navets.
</UL>
</UL>
<BR>
<BR>
<P>Un
<P>Un bon
bon pot-au-feu
pot-au-feu n&eacute;cessite
n&eacute;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>

 J ean DE MAR TIN I © 14.02.00


 

Présentées ainsi
Conception d'un
d'un s ite WEB
51

 J ean DE MAR TIN I © 14.02.00

Les listes numérotées


Conception d'un
d'un s ite WEB
52

<MULTICOL
<MULTICOL COLS="2"
COLS="2" WIDTH="100%"
WIDTH="100%" GUTTER="10">
GUTTER="10">

<P>Un
<P>Un
<OL bon
bon pot-au-feu
pot-au-feu n&eacute;cessite
n&eacute;cessite :</P>
:</P>
<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&eacute;cessite
n&eacute;cessite :</P>
:</P>
<OL TYPE="I">
<OL TYPE="I">
<LI>des
<LI>des poireaux,
poireaux,
<LI>des
<LI>des carottes,
carottes,
<LI>des
<LI>des navets.
navets.
</OL>
</OL>
</MULTICOL>
</MULTICOL>

 J ean DE MAR TIN I © 14.02.00


 

Présentées ainsi
Conception d'un
d'un s ite WEB
53

 J ean DE MAR TIN I © 14.02.00

Les listes de définitions


Conception d'un
d'un s ite WEB
54

u Ce type de liste est particulièrement 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>
<DT>FLAMBEAU<DD>n.n. m.
m. Torche,
Torche, chandelle
chandelle de
de cire
cire ou
cire ou
   <DT>FLAMB&Eacute;E<DD>n.
<DT>FLAMB&Eacute;E<DD>n.
DD>n. f.f. Fe
<DT>FLAMB&Eacute;E<DD>n.
<DT>FLAMB&Eacute;E< Feu
uc
Feu clair
lair de
clair de menu
menu bois.
bois.
</DL>
</DL>

u Si les termes à définir sont courts, on peut la


compacter.
<DL
<DL COMPACT>
COMPACT>
   <DT>N<DD>Newton.
<DT>N<DD>Newton.
   <DT>Nm<DD>Newtonm&egrave;tre.
<DT>Nm<DD>Newtonm&egrave;tre.
   <DT>Oe<DD>Oersted.
<DT>Oe<DD>Oersted.
</DL>
</DL>
 J ean DE MAR TIN I © 14.02.00
 

Présentées ainsi
Conception d'un
d'un s ite WEB
55

 J ean DE MAR TIN I © 14.02.00

Ou ainsi
Conception d'un
d'un s ite WEB
56

 J ean DE MAR TIN I © 14.02.00


 

Listes imbriquées
Conception d'un
d'un s ite WEB
57

u Des listes de différentes natures peuvent être


imbriquées

<P>Un
<P>Un bon
bon pot-au-feu
pot-au-feu n&eacute;cessite
n&eacute;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 moyens,
<LI>des moyens,
<LI>des
<LI>des gros.
gros.
</UL>
</UL>
<LI>des
<LI>des carottes,
carottes,
<LI>des
<LI>des navets.
navets.
</UL>
</UL>

 J ean DE MAR TIN I © 14.02.00

Ce qui donne
Conception d'un
d'un s ite WEB
58

 J ean DE MAR TIN I © 14.02.00


 

Les images
Conception d'un
d'un s ite WEB
59

u Les pages Web sont souvent parsemées de petits


éléments décoratifs obtenus par inclusion d'images.
<IMG SRC="..." paramètres >
u La balise d'inclusion d'images comporte de très
nombreux paramètres :
l ALIGN= TOP | MIDDLE | BOTTOM | LEFT | RIGHT
l HSPACE= ma
marg
rg e horizontale
horizontale (pix els)
l VSPACE= marge verticale (pixels)
l WIDTH= largeur de l'image (pixels)
l HEIGHT= haut
hauteur
eur de l'i
l'i ma
magg e (pixels )
l BORDER= épa
épais
is s eur de l'encadreme
l'encadrement nt (pixels )

 J ean DE MAR TIN I © 14.02.00

Inclusion d'une image


Conception d'un
d'un s ite WEB
60

<P> <IMG SRC="Image16.gif"


<P>
<P> <IM
IMG
G SRC=
SRC ="I
"Ima
mage
WIDTH=200
WIDTH=200 ge16
16.g
.gif
if""
HEIGHT=145
HEIGHT=145
BORDER=0
BORDER=0
ALIGN="LEFT"
ALIGN="LEFT"
HSPACE=20
HSPACE=20
VSPACE=10>
VSPACE=10>
Sans
Sans doute les notes que
doute les notes que nous
nous entendons
entendons alors,
alors, tendent
tendent
d&eacute;j&agrave;,
d&eacute;j&agrave;, selon
selon leur
leur hauteur
hauteur et et leur
leur quantit&eacute;,
quantit&eacute;,
&agrave;
&agrave; couvrir
couvrir devant
devant nos
nos yeux
yeux desdes surfaces
surfaces dede dimensions
dimensions
vari&eacute;es,
vari&eacute;es, &agrave;
&agrave; tracer
tracer des
des arabesques,
arabesques, &agrave;
&agrave;
nous
nous donner
donner desdes sensations
sensations dede largeur,
largeur, dede
t&eacute;nuit&eacute;,
t&eacute;nuit&eacute;, de de stabilit&eacute;,
stabilit&eacute;, de de caprice.</P>
caprice.</P>
<P>Mais
<P>Mais les
les notes
notes sont
sont &eacute;vanouies
&eacute;vanouies avant avant que
que ces
ces
sensations
sensations soient
soient assez
assez form&eacute;es
form&eacute;es en en nous
nous pour
pour ne
ne pas
pas
&ecirc;tre
&ecirc;tre submerg&eacute;es
submerg&eacute;es par par celles
celles qu'&eacute;veillent
qu'
qu'&eacute;veillent
qu'&eacute;veillent
&eacute;veillent
d&eacute;j&agrave;
d&eacute;j&agrave; lesles notes
notes suivantes
suivantes ou ou m&ecirc;me
m&ecirc;me
simultan&eacute;es.</P>
simultan&eacute;es.</P>

 J ean DE MAR TIN I © 14.02.00


 

 Aspect visuel
Conception d'un
d'un s ite WEB
61

 J ean DE MAR TIN I © 14.02.00

Paramètres d'inclusion
Conception d'un
d'un s ite WEB
62

u Interprétation des paramètres d'inclusion :

vspace

height

width hspace
 J ean DE MAR TIN I © 14.02.00
 

Paramètres d'alignement
Conception d'un
d'un s ite WEB
63

<P
<P ALIGN="CENTER">
ALIGN="CENTER">
<IMG
<IMG SRC="Image17a.gif"></P>
SRC="Image17a.gif"></P>
<P>Cette image
<P>Cette image
<IMG
<IMG SRC="Image17b.gif"
SRC="Image17b.gif" ALIGN="TOP"
ALIGN="TOP">
>
ALIGN="TOP">
est
est align&eacute;e
align&eacute;e
<IMG
<IMG SRC="Image17b.gif"
SRC="Image17b.gif" ALIGN="MIDDLE"
ALIGN="MIDDLE">
>
ALIGN="MIDDLE">
de
de diff&eacute;rentes
diff&eacute;rentes
<IMG
<IMG SRC="Image17b.gif"
SRC="Image17b.gif" ALIGN="BOTTOM"
ALIGN="BOTTOM">
ALIGN="BOTTOM">>
fa&ccedil;ons.</P>
fa&ccedil;ons.</P>
<P>On
<P>On remarque
remarque que
que son
son fond
fond &agrave;
&agrave;
&eacute;t&eacute;
&eacute;t&eacute; rendu
rendu transparent.</P>
transparent.</P>

 J ean DE MAR TIN I © 14.02.00

Effets de présentation
Conception d'un
d'un s ite WEB
64

 J ean DE MAR TIN I © 14.02.00


 

Fond d'écran
Conception d'un
d'un s ite WEB
65

u Une image peut également servir de fond d'écran.

<BODY
<BODY BACKGROUND="Image18.gif"
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 &agrave;
&agrave; &eacu
&eacu
</BODY>
</BODY>

 J ean DE MAR TIN I © 14.02.00

Image de fond et
Conception d'un
d'un s ite WEB
transparence
66

 J ean DE MAR TIN I © 14.02.00


 

Les ancres
Conception d'un
d'un s ite WEB
67

u Les ancres indiquent des extrémités  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 définir un poi
 point
nt de départ  :
 :
<A HREF= "UR L ">cliquable</A>
u Elle peut également signaler un poi
 point
nt d'arriv
d'arr ivée
ée :
<A NAME= "étiquette">non cliquabl
c liquable
e</A>

 J ean DE MAR TIN I © 14.02.00

Schéma de liens externes


Conception d'un
d'un s ite WEB
simples
68

<BODY>
<BODY> index.html
<P>...<A
<P>...
<P>...<A
<A HREF="p1.html">Page
HREF="p1.html">Page 1</A>...</P>
1</A>...</P>
<P>...<A
<P>...<A HREF="p2.html">Page
<P>...<A HREF="p2.html">Page 2</A>...</P>
2</A>...</P>
<P>...<A
<P>...<A HREF="p3.html">Page
<P>...<A HREF="p3.html">Page 3</A>...</P>
3</A>...</P>
...
...
</BODY>
</BODY>

<HTML>
<HTML> p1.html
...
...
<HTML>
<HTML> p2.html
</HTML>
</HTML> ...
...
<HTML> p3.html
<HTML>
</HTML>
</HTML>... ...
</HTML>
</HTML>

 J ean DE MAR TIN I © 14.02.00


 

Schéma de liens internes


Conception d'un
d'un s ite WEB
69

<BODY>
<BODY>
<P>...<A
<P>...<A HREF="#p1">Page
<P>...<A HREF="#p1">Page 1</A>...</P>
1</A> ...</P>
1</A>...</P>
...
...
<P>...<A
<P>...<A HREF="#p2">Page
<P>...<A HREF="#p2">Page 2</A>...</P>
2</A> ...</P>
2</A>...</P>
...
...
<P>...<A
<P>...<A HREF="#p3">Page
<P>...<A HREF="#p3">Page 3</A>...</P>
3</A> ...</P>
3</A>...</P>
...
...
<P><A
<P> <A NAME="p1"></A>...</P>
<P><A NAME="p1"></A> ...</P>
NAME="p1"></A>...</P>
...
...
<P><A
<P> <A NAME="p2"></A>...</P>
<P><A NAME="p2"></A> ...</P>
NAME="p2"></A>...</P>
...
...
<P><A
<P> <A NAME="p3"></A>...</P>
<P><A NAME="p3"></A> ...</P>
NAME="p3"></A>...</P>
...
...
</BODY>
</BODY>

 J ean DE MAR TIN I © 14.02.00

Liens doubles
Conception d'un
d'un s ite WEB
70

u Les liens doubles définissent à la fois un point de


départ et un point d'arrivée.

<BODY>
<BODY>
<P>...<A
<P>...<A HREF="#p1"
<P>...<A HREF="#p1" NAME="r1">Page
NAME="r1">Page 1</A>...</P>
1</A> ...</P>
1</A>...</P>
...
...
...
...
<P><A
<P> <A HREF="#r1"
<P><A HREF="#r1" NAME="p1">Retour</A>...</P>
NAME="p1">Retour</A> ...</P>>
NAME="p1">Retour</A>...</P>
NAME="p1">Retour</A>...</P
...
...
...
...
</BODY>
</BODY>

 J ean DE MAR TIN I © 14.02.00


 

Une page avec des liens


Conception d'un
d'un s ite WEB
71

<H2 ALIGN="CENTER">Tout sur


<H2 ALIGN="CENTER">Tout sur la fougasse</H2>
<P ALIGN="CENTER">
<P ALIGN="CENTER">
<A
<A HREF="chap-1.html"
HREF="chap-1.html">Chapitre
>Chapitre 11 :: La
HREF="chap-1.html">Chapitre La farine</A><BR>
farine</A><BR>
<A
<A HREF="chap-2.html"
HREF="chap-2.html">Chapitre
>Chapitre 22 :: Les
HREF="chap-2.html">Chapitre Les anchois</A></P>
<HR
<HR ALIGN="CENTER">
ALIGN="CENTER">
<P
<P ALIGN="CENTER">Aimez-vous
ALIGN="CENTER">Aimez-vous la la fougasse ?</P>
<P
<P ALIGN="CENTER">
ALIGN="CENTER">
<A
<A HREF="chap-1.html"
HREF="chap-1.html"><IMG
><IMG SRC="bout-1.gif"></A>
HREF="chap-1.html"><IMG SRC="bout-1.gif"></A>
<A
<A HREF="chap-2.html"
HREF="chap-2.html"><IMG
><IMG SRC="bout-2.gif"></A></P>
SRC="bout-2.gif"></A></P>

 J ean DE MAR TIN I © 14.02.00

Qui s'affiche
Conception d'un
d'un s ite WEB
72

 J ean DE MAR TIN I © 14.02.00


 

Les Tableaux
Conception d'un
d'un s ite WEB
73

u Le tableau est l’élément d’organisation le plus


puissant de HTML.
u C ’est lui qui permet de disposer dans une page de
différentes zones de texte ou d ’images.
u un tableau est un pavage de cellules (CELLS),
associées à des cellules de titre (HEADING
(HEADING CELLS) le
tout associé à une légende (CAPTION).
u Sa description est assez complexe, nous l’aborderons
donc pas à pas.

 J ean DE MAR TIN I © 14.02.00

Un tableau élémentaire
Conception d'un
d'un s ite WEB
74

CAPTION
HEADING CELLS

CELLS

 J ean DE MAR TIN I © 14.02.00


 

Structure d’un tableau


Conception d'un
d'un s ite WEB
75

u Un tableau est introduit par le conteneur  :


<TABLE paramètres >...</TABLE>
u Le titre d’un tableau est introduit par le conteneur :
<CAPTION paramètres >...</CAPTION>
u Une ligne du tableau (ROW) est introduite par le
conteneur :
<TR paramètres >...</TR>
u Une ligne est composée de cellules* :
<TH paramètres >…</TH>
<TD paramètres >…</TD>

* pouvant contenir tout ce que l ’on veut et même un tableau.

 J ean DE MAR TIN I © 14.02.00

Un tableau élémentaire 4x4


Conception d'un
d'un s ite WEB
76

<TABLE
<TABLE  paramètres>>
 paramètres
<CAPTION paramètres
<CAPTION  paramètres>…</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>

 J ean DE MAR TIN I © 14.02.00


 

Principaux paramètres
Conception d'un
d'un s ite WEB
77

u On dispose de nombreux paramètres :


l alignement horizontal,
l alignement vertical,
l couleur de fond,
l couleur de texte,
l image de fond
l …
u Lorsqu’un paramètre n’est pas défini, sa valeur est
héritée de la structure qui l ’englobe.
u Malheureusement, tous ces paramètres ne sont pas
traités par les navigateurs, ils peuvent ne pas avoir 
d’effet.

 J ean DE MAR TIN I © 14.02.00

Paramètres de <TABLE ...>


Conception d'un
d'un s ite WEB
78

CELLPADDING CELLSPACING BORDER

 J ean DE MAR TIN I © 14.02.00


 

Paramètres de <CAPTION
Conception d'un
d'un s ite WEB
...>
79

ALIGN = L E F T  |
 | CENTER | RI GH T 

VALIGN = TOP | BOTTOM

 J ean DE MAR TIN I © 14.02.00

Superposition de cellules
Conception d'un
d'un s ite WEB
80

u On peut faire en sorte qu’une cellule en recouvre


d’autres donnant l’impression que des cellules ont été
regroupées.
u L’extension d ’une cellule sur ses voisines de droite
correspond au paramètre
COLSPAN = nombre de cellules
c ellules
u L’extension d’une cellule sur ses voisines du dessous
correspond au paramètre
ROWSPAN = nombre de c ellul
ellules
es

 J ean DE MAR TIN I © 14.02.00


 

Paramètres de superposition
Conception d'un
d'un s ite WEB
81

ROWSPAN=2 COLSPAN=2

ROWSPAN=1 COLSPAN=2 ROWSPAN=3 COLSPAN=1

lignes 3

5
1 2 3 4

colonnes
 J ean DE MAR TIN I © 14.02.00

Une belle table des matières


Conception d'un
d'un s ite WEB
82

 J ean DE MAR TIN I © 14.02.00


 

Une belle page


Conception d'un
d'un s ite WEB
83

 J ean DE MAR TIN I © 14.02.00

Images cliquables
Conception d'un
d'un s ite WEB
84

u Il est possible de définir des zones s ens i bles  sur une


image bitmap et d’associer des liens à ces zones.
u Nous ne verrons que la technique la plus récente.
u Les zones sensibles définies sur une image sont
regroupées dans une carte (MAP) associée à l’image.

 J ean DE MAR TIN I © 14.02.00


 

Carte des zones sensibles


Conception d'un
d'un s ite WEB
85

<IMG
<IMG SRC="Image16.gif"
SRC="Image16.gif" WIDTH="200"
WIDTH="200" HEIGHT="145"
HEIGHT="145"
ISMAP
ISMAP
   USEMAP="#Image16"
USEMAP="#Ima ge16"
USEMAP="#Image 16" BORDER="0">
USEMAP="#Image16" 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>

 J ean DE MAR TIN I © 14.02.00

Les formulaires
Conception d'un
d'un s ite WEB
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 présentation
à des logiciels d'application.
u Il utilise le mode CGI (Common Gateway Interface)
pour fonctionner et son utilisation nécessite la
coopération d'au moins 2 acteurs :
l Côté client : Le formulaire HTML,
l Côté serveur : un programme d'interface.

 J ean DE MAR TIN I © 14.02.00


 

Dialogue Client-Serveur
Conception d'un
d'un s ite WEB
87

u Le côté client  est
 est représenté par le navigateur qui
interprète la page HTML qui comporte des balises
pouvant se traduire en requêtes.
u Le côté serveur  est
 est représenté par le serveur Web qui
interprète les requêtes provenant du navigateur et qui
lui transmet des pages HTML.
u Nous avons rencontré deux balises se traduisant en
requête :
l <A … >…</A> : requête pour une page externe,
l <IMG … > : requête pour une image externe.

 J ean DE MAR TIN I © 14.02.00

Schéma de dialogue HTML


Conception d'un
d'un s ite WEB
88

http://…../xxx.html#yyy
http://…../xxx.html#yyy

Serveur 
Navigateur  Web

Content-type:
Content-type: text/html
text/html <HTML>
<HTML> …
… </HTML>
</HTML>

<HTML>
<HTML> …
… </HTML>
</HTML>

 J ean DE MAR TIN I © 14.02.00


 

Schéma de dialogue CGI


Conception d'un
d'un s ite WEB
89

QUERY_STRING
QUERY_STRING == ...
...
http://…../xxx.cgi...
http://…../xxx.cgi...

Serveur  Programme
Navigateur  Web CGI

Content-type:
Content-type: text/html
text/html Content-type:
Content-type: text/html
text/html

<HTML>
<HTML> …
… </HTML>
</HTML> <HTML>
<HTML> …
… </HTML>
</HTML>

 J ean DE MAR TIN I © 14.02.00

Formulaire
Conception d'un
d'un s ite WEB
90

u Un formulaire est introduit par le conteneur :


 <FORM paramètres > … </FORM>
u Un formulaire est constitué d'un groupe d'outils de
saisie décrits par des conteneurs de la forme
f orme :
<INPUT paramètres > … </INPUT>
<SELECT paramètres > … </SELECT>
u Un formulaire comporte 2 boutons :
<INPUT TYPE=SUBMIT paramètres >
<INPUT TYPE=RESET paramètres >

 J ean DE MAR TIN I © 14.02.00


 

Exemple 1
Conception d'un
d'un s ite WEB
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>
<P><BIG><BIG>P</BIG></BIG>our
<P><BIG><BIG>P</BIG></BIG>o our
ur faire
faire une
une bonne
bonne mayonnai
mayonnai
   <INPUT
<INPUT TYPE=
TYPE="radio"
"radio"
TYPE="r adio" NAME="liquide"
TYPE="radio" NAME="liquide" VALUE="eau">
VALUE="eau">eau,eau,
VALUE="eau">eau,
   <INPUT
<INPUT TYPE="radio"
TYPE="ra dio" NAME="liquide"
TYPE="radio" NAME="liquide" VA VALUE="huile">
LUE="huile">huile,
VALUE= huile,
VALUE="huile">huile,
"huile">huile,
   <INPUT
<INPUT TYPE="radio"
TYPE="radio"
TYPE="ra dio" NAME="liquide"
TYPE="radio" NAME="liquide" V VALUE="lait">
VALUE="lait">lait
lait
VALUE="lait">lait
ALUE="lait">lait
</FORM>
</FORM>

 J ean DE MAR TIN I © 14.02.00

Exemple 2
Conception d'un
d'un s ite WEB
92
<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
<P><BIG><BIG>I<
<P><BIG><BIG>I</BIG></BIG>l
/BIG></BIG>l faut
fautaussi
aussi :</P>
:</P>
   <INPUT
<INPUT TYPE="che
TYPE="checkbox"
ckbox"
TYPE="checkb ox" NAME="oeufs"
NAME= "oeufs" VALUE="on">oeufs,
NAME="oeufs" VALUE="on"> oeufs,
VALUE="on">oeufs,
VALUE="on">oeufs,
   <INPUT
<INPUT TYPE="che
TYPE="checkbox"
TYPE="checkbox"
ckbox" NAME="sel"
TYPE="checkbox" NAME="
NAME="s sel"
el" VALUE="on">sel,
NAME="sel" VALUE="on"> sel,
VALUE="on">sel,
   <INPUT
<INPUT TYPE="che
TYPE="checkbox"
TYPE="checkbox"
ckbox" NAME="mouta"
TYPE="checkbox" NAME=
NAME="mouta"
"mouta" VALUE="on">moutarde,
NAME="mouta" VALUE="on"> moutarde,
VALUE="on">moutarde,
   <INPUT
<INPUT TYPE="che
TYPE="checkbox"
TYPE="checkbox"
ckbox" NAME="confit"
TYPE="checkbox" NAME="confit" VALUE="on">
V
VALUE="on">confiture
confiture
VALUE="on">confiture
ALUE="on">confiture
</FORM>
</FORM>

 J ean DE MAR TIN I © 14.02.00


 

Exemple 3
Conception d'un
d'un s ite WEB
93
<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>
<P><BIG><BIG>O</BIG></BIG>n n utilise
utilise ::
   <SELECT NAME="recipient"
<SELECT NAME="recipient" SIZE="3">
NAME="recipient" SIZE="3">
   <OPTION
<OPTION SELECTED>assiette
SELECTED>assiette
   <OPTION>bol
<OPTION>bol
   <OPTION>bouteille
<OPTION>bouteille
   <OPTION>casserole
<OPTION>casserole
<OPTION>marmite</SELECT> </P>
   <OPTION>marmite</SELECT> </P>
<OPTION>marmite</SELECT> </P>
</FORM>
</FORM>

 J ean DE MAR TIN I © 14.02.00

Exemple 4
Conception d'un
d'un s ite WEB
94
<FORM
<FORM ACTION="query.cgi"
ACTION="query.cgi" METHOD=
METHOD= "GET"
"GET" || "POST">
"POST">
   ...
...
<P><BIG><BIG>D</BIG></BIG>&eacute;crivez,
   <P><BIG><BIG>D</BIG>< /BIG>&eacute;crivez, en
<P><BIG><BIG>D</BIG></BIG>&eacute;crivez,
<P><BIG><BIG>D</B IG></BIG>&eacute;crivez, enquelques
quelques lignes
quelques lignes
   les
les principales
principales qualit&eacute;s
qualit&eacute;s di&eacute;t&eacute;tiques
di&eacute;t&ea
di&eacute;t&eacute;tiques
cute;tiques de
di&eacute;t&eacute;tiques de
la
la mayonnaise
mayonnaise :<BR>
:<BR>
   <TEXTAREA
<TEXTAREA NAM NAME="dissertation"
NAME E="dissertation"
="dissertation" ROWS="5"
NAME="dissertation" ROWS=
ROWS="5"
ROWS="5""5" COLS=20>
COLS=20>
   </TEXTAREA>
</TEXTAREA>
</FORM>
</FORM>

 J ean DE MAR TIN I © 14.02.00


 

Exemple 5
Conception d'un
d'un s ite WEB
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
et on vous
on vous &eacute;crira<BR>
&eacute;crira<BR
&eacute;crira<BR>
&eacute;crira<BR> >
   <INPUT
<INPUT TYPE
TYPE="text"
="text" NAME="nom">
TYPE="text"
TYPE="text" NAM E="nom">
NAME="nom">
</FORM>
</FORM>

 J ean DE MAR TIN I © 14.02.00

Et pour finir
Conception d'un
d'un s ite WEB
96

<FORM
<FORM ACTION="query.cgi"
ACTION="query.cgi"
METHOD= "GET" | "POST">
   ...
... METHOD= "GET" | "POST">
   <P>
<P>
   <INPUT
<INPUT TYPE=
TYPE=reset
reset
TYPE=reset VALUE="Corriger">
VALUE= "Corriger"> &nbsp;&nbsp;
VALUE="Corriger">  &nbsp;&nbsp;
&nbsp;&nbsp;
   <INPUT TYP
TYPE=submit
E=submit
<INPUT TYPE=submit VALUE="OK">
VALUE="OK"></P>
</P>
TYPE=submit VALUE="OK"></P>
VALUE="OK"></P>
</FORM>
</FORM>

 J ean DE MAR TIN I © 14.02.00


 

Conclusion provisoire
Conception d'un
d'un s ite WEB
97

u Nous avons vu l'essentiel de ce qu'il était nécessaire


de connaître de HTML pour réaliser de belles pages
Web.
u N'hésitez pas à examiner le source des pages que
vous consultez. Vous y découvrirez comment réaliser 
des effets époustouflants.
u Il faut, à présent, étudier ce qui se passe du côté du
serveur (programmation CGI) et c'est la suite de ce
cours.

 J ean DE MAR TIN I © 14.02.00

Programmes CGI
Conception d'un
d'un s ite WEB
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 reçoit ses arguments sous différentes
formes que nous examinerons.
u Attention : un programme CGI mal conçu crée des
trous de sécurité dans le système qui l'héberge et
pour en savoir plus sur les problèmes de sécurité
dans le Web consulter :
http://www.w3.org/Security/Faq/www-security-faq.html

 J ean DE MAR TIN I © 14.02.00


 

Programmation CGI
Conception d'un
d'un s ite WEB
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 interprétés tels s h , cs h, … et surtout Perl,
l des langages compilés tels C, C++,
C++, FORTR AN  et  et maintenant Visual
Basic ® dans un environnement Windows NT ®.
u Nous allons introduire,
introduire, dans ce cours, le langage le
plus utilisé actuellement : Perl.

 J ean DE MAR TIN I © 14.02.00

Entrées - Sorties CGI


Conception d'un
d'un s ite WEB
100
Environnement d'exécution
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
...
...

"stdin" Programme
Programme CGI
CGI stdout

Message MIME
Content-type:
Content-type: text/html
text/html

<HTML>…</HTML>
<HTML>…</HTML>
 J ean DE MAR TIN I © 14.02.00
 

Invocation d'un programme


Conception d'un
d'un s ite WEB
CGI
101

u On dispose principalement de 3 méthodes pour 


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 méthode GET :
<FORM ACTION="foo.cgi" METHOD="GET" …>
 … </FORM>
l invocation par soumission d'un formulaire avec la méthode POST :
<FORM ACTION="foo.cgi" METHOD="POST" …>
 … </FORM>

 J ean DE MAR TIN I © 14.02.00

Extension de l'URL
Conception d'un
d'un s ite WEB
102

u On peut passer les arguments d'un programme CGI


en étendant son URL :
<A HREF="URL/script_name/
HREF="URL/script_name/path_info?query_string">…</A>
path_info?query_string">…</A>

u C'est cette technique qui est utilisée lors de la


soumission d'un formulaire utilisant la méthode GET.
l L'extension de l'URL est effectuée par le navigateur lui-même.
u Les arguments (empaquetés dans une grande chaîne
de caractères) peuvent être obtenus en analysant les
variables d'environnement SCRIPT_NAME,
PATH_INFO et QUERY_STRING.

 J ean DE MAR TIN I © 14.02.00


 

Entrée standard
Conception d'un
d'un s ite WEB
103

u Lorsqu'un formulaire est soumis en utilisant la


méthode POST, les arguments sont empaquetés dans
une grande chaîne de caractères présentée sur 
l'entrée stdin.
u Cette grande chaîne ne se termine pas par EOF !
u Sa longueur est placée dans la variable
d'environnementt CONTENT_LENGTH
d'environnemen CONTENT_LENGTH..

 J ean DE MAR TIN I © 14.02.00

Empaquetage des arguments


Conception d'un
d'un s ite WEB
104

u Un argument est représenté sous la forme d'un


couple nom=valeur.
u Une valeur est une chaîne de caractères,
u Chaque argument est séparé du précédent et du
suivant par le caractère &.
u Les espaces sont remplacés par le caractère + et les
caractères spéciaux sont remplacés par leur code
ASCII(hex) %xx.
u Exemple :
liquide=eau&œufs=on&sel=on&recipient=bol&
dissertation=Et+bien,la+mayonnaise,+c'est+tr%E8s+bon...&nom=Mick
ey+Mouse

 J ean DE MAR TIN I © 14.02.00


 

En résumé
Conception d'un
d'un s ite WEB
105

u Un programme CGI doit :


l avoir un nom dont l'extension est .cgi,
l être capable de consulter des variables
vari ables d'environnement,
l être capable de lire une chaîne de caractères présentée sur stdin,
l être capable de l'analyser,
l être capable de composer une page HTML au format MIME et de la
présenter sur stdout.
u Il doit pouvoir, également, être capable de
communiquer avec d'autres applications.
u Le langage Perl permet de faire tout ça très
commodément.

 J ean DE MAR TIN I © 14.02.00

Le langage Perl
Conception d'un
d'un s ite WEB
106

u Le langage Perl (Practical Extraction and Report


Language) ne peut pas être considéré comme un
langage de programmation orthodoxe. Sa seule
ambition est d'être commode.
u Nous n'en donnerons pas une présentation
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/

 J ean DE MAR TIN I © 14.02.00


 

Un programme Perl
Conception d'un
d'un s ite WEB
simplissime
107
#!/usr/local/bin/perl
#!/usr/local/bin/perl

print
print "Content-type:
"Content-type: text/html

<HTML>
<HTML>
   <HEAD>
<HEAD>
   <TITLE>Premi&egrave;re
<TITLE>Premi&egrave;re page
page
script&eacute;es</TITLE>
script&eacute;es</TITLE>
   </HEAD>
</HEAD>
   <BODY>
<BODY>
   <P>Bonjour
<P>Bonjour &agrave;
&agrave; tous.</P>
tous.</P>
   </BODY>
</BODY>
</HTML>
</HTML>
";
";

u Bien que très simple, ce premier programme nous


apprend déjà plein de choses.
 J ean DE MAR TIN I © 14.02.00

Les commentaires
Conception d'un
d'un s ite WEB
108

u Un commentaire est une portion de texte


t exte commençant
par le caractère # 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 ?

 J ean DE MAR TIN I © 14.02.00


 

Localisation de l'interprète
Conception d'un
d'un s ite WEB
109

u Dans un environnement Unix, tous les fichier 


interprétés (au moins pour tous les "shell" que je
connais) indiquent, en première ligne, le chemin
d'accès à leur interprète.
u Cette indication prend la forme du pseudo
commentaire :
#!/usr/local/bin/perl
u C'est cette indication qui permet de considérer un tel
fichier comme un programme exécutable standard.

 J ean DE MAR TIN I © 14.02.00

Les instructions
Conception d'un
d'un s ite WEB
110

u Une instruction est constituée :


l soit d'une commande et de ses paramètres,
l soit de l'affectation d'une variable à la valeur d'une expression.
u Une instruction se termine toujours par le caractère ;
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).

 J ean DE MAR TIN I © 14.02.00


 

Quote '…' & quasi-quote "..."


Conception d'un
d'un s ite WEB

111

u Une portion de texte qui ne doit pas être interprétée


est citée entre quotes :
'bonjour tout le monde !'
u Lorsqu'une telle portion de texte est répartie 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
évaluées. La portion de texte est alors citée entre
quasi-quotes :
"Je voudrais $n pizzas"
"Je voudrais une ${c}croute garnie"

 J ean DE MAR TIN I © 14.02.00

Formats MIME
Conception d'un
d'un s ite WEB
112

u Le texte envoyé au navigateur par le serveur doit se


conformer à la norme MIME (Multipurpose Internet
Mail Extension) qui préconise d'indiquer en en-tête le
type de ce qui suit, ici :
Content-type: text/html
u Cet en-tête doit être suivi d'une ligne vide !
u D'autres types MIME :
application/pdf 
application/x-compress
audio/basic
image/gif 
...

 J ean DE MAR TIN I © 14.02.00


 

 Variables
Conception d'un
d'un s ite WEB

113

u Perl supporte 3 types de variables :


l s calair es  : nombres et chaînes de caractères,
l tableaux  de
 de scalaires dont les éléments sont indexés par un
nombre entier,
l table
tableaux
aux ass oci at
atifs
ifs  dont les éléments sont indexés par un
symbole.
u Noms de variables, les noms de variables sont
préfixés :
l par $ pour les scalaires,
l par @ pour les tableaux,
l par % pour les tableaux associatifs.
u Les caractères $, @ et % définissent, plus
généralement, le contexte d'interprétation des
opérateurs Perl.
 J ean DE MAR TIN I © 14.02.00

Contextes d'interprétation
Conception d'un
d'un s ite WEB
114

u Les différents contextes d'interprétation peuvent être


illustrés par ces exemples :
l $jour simple variable scalaire
l $jours[28] 29ème élément du tableau @jours
l $nom
$n ombr
bre_
e_de
de_j
_jou
ours
rs{'
{'ma
mars
rs'}
'} élém
él émen
entt assoc
associé
ié au symb
symbol
ole
e 'mars
'mars'' du
tableau associatif %nombre_de_jours
l $#jours dernier indice dans le tableau @ jours
l @ jours tableau dans son ensemble
l @ jours[3,4,5] tableau constitué des éléments
numéros 3, 4 et 5 du tableau @ jours
l @ jours[3..5] même tableau que ci-dessus
l @ nombre_de_jours{'mars','avril'}
tableau constitué des éléments
associés aux symboles 'mars' et 'avril'
du tableau associatif % nombre_de_jours
l % nombre_de_jours tableau associatif dans son ensemble

 J ean DE MAR TIN I © 14.02.00


 

Petite généralisation
Conception d'un
d'un s ite WEB

115

u La composition d'une page HTML est décrite plus


généralement 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>
";
";
 J ean DE MAR TIN I © 14.02.00

Les constantes
Conception d'un
d'un s ite WEB
116

u Les constantes sont utilisées soit pour initialiser des


variables, soit pour participer à l'évaluation d'une
expression.
u Nombres :
18 -14 3 .1 4 0.6e-3 0x1E
u Portions de texte :
'bonjour tout le monde.' "il est $b l'heure."
u Listes (indiçable comme un tableau) :
(18, 'est un divisible par', 2, 3, ' et ', 6)

 J ean DE MAR TIN I © 14.02.00


 

 Affectation
Conception d'un
d'un s ite WEB

117

u Comme toutes les opérations Perl, l'affectation


présente quelques magies.
$i = 3; comme d'habitude.
$i = '00
'0001
01';
'; estt inté
es intére
ress
ssan
antt si on veu
veutt prod
produi
uire
re un
un comp
compte
teur 
ur 
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;
u Et bien d'autres magies que je vous laisse découvrir.

 J ean DE MAR TIN I © 14.02.00

Quelques opérations
Conception d'un
d'un s ite WEB
scalaires
118

$a = 1 + 2; addition
$a = 2 - 4; soustraction
$a = 5 * 6; multiplication
$a = 7 / 2; division
$ a = 9 * * 3. 2; puissance (pas forcément entière)
$ a = 5 % 2; reste euclidien

++$a; pré-incrémentation
$a++; post-incrémentation

$a = 'bonjo
'bonjour
ur '.'tou
'.'toutt le monde
monde';
'; concat
concaténa
énatio
tion
n
$a = 'je bégaie ' x 8; répétition

$ a += 3; équivalent à $a = $a + 3

 J ean DE MAR TIN I © 14.02.00


 

Opérations sur les tableaux


Conception d'un
d'un s ite WEB

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'.

 J ean DE MAR TIN I © 14.02.00

Fonctions
Conception d'un
d'un s ite WEB
120

u Comme dans tous les langages


de programmation, la fonction
est un outil de structuration
puissant.
u Déclaration (sub) et appel (&) sub
sub moyenne
moyenne {{
d'une fonction (Perl ne connaît    (@_[0]
(@_[0] ++ @_[1])
@_[1]) // 2;
2;
pas le l ) : }}

u Les arguments sont passés print


print &moyenne(1,2);
&moyenne(1,2);
dans le tableau implicite @_.
u La valeur rendue est celle de la
dernière expression évaluée.

 J ean DE MAR TIN I © 14.02.00


 

Manipulation des fichiers


Conception d'un
d'un s ite WEB

121

u Voici un programme élémentaire qui manipule un


fichier (pas trop gros) :
#!/usr/local/bin/perl
#!/usr/local/bin/perl

op
open
en(
en((( FICH
open
op FI
FICHIE
FICH IER,
CHIER,
R, 'fo
IER, ''fo
'foo.
o.tx
foo.txt'
o.tx t');
txt');
t');
); ## ou
ouve
ouvert
ouve rtur
verture*
rture*
e* d
ure* du
du
duu fi
fich
fichie
fich ier
chierr et
ier et
## création de son descripteur 
création de son descripteur 

@
@lliig
gnneess == <<F
FIIC
CHHIIE
ERR>>;; ## lleeccttu
urree d
du hiieerr ligne
u ffiicch ligne
# par
par lig ne et  et construction
construction
## d'un
d'un tableau
tableau de de ces
ces lignes
lignes

ccllo
ossee((F
FIIC
CHHIIEERR));; ## ffeerrm
meettu urree d
duu ffiicch
hiieerr   
pprriin
ntt @
@lliig
gnneess;; ## eett aaffffiicch
haag gee

* les fichiers STDIN, STDOUT et STDERR sont ouverts a priori.


 J ean DE MAR TIN I © 14.02.00

 Variables d'environnement
Conception d'un
d'un s ite WEB
122

u Les variables d'environnement sont empaquetées


dans le tableau associatif prédéfini %ENV.
u On y accède par leur nom :

$ENV{'REQUEST_METHOD'}
$ENV{'SCRIPT_NAME'}
$ENV{'PATH_INFO'}
$ENV{'QUERY_STRING'}
$ENV{'CONTENT_LENGTH'}

 J ean DE MAR TIN I © 14.02.00


 

On entre dans le vif du sujet


Conception d'un
d'un s ite WEB

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 nouveautés :
l la structure de contrôle :
if <prédicat> {<conséquence>}
else {<alternative>}
l l'opérateur de comparaison : eq
l la fonction de lecture d'un bloc de caractères dans un fichier :
read().
 J ean DE MAR TIN I © 14.02.00

Manipulation des chaînes


Conception d'un
d'un s ite WEB
124

u L'exemple précédent laisse en suspens deux


problèmes :
l comment être sûr que la chaîne "POST" est bien en majuscules ?
ou plus généralement composée de caractères de la même casse.
l Comment analyser le contenu de la variable $buffer qui contient
typiquement le résultat de la saisie d'un formulaire (cf. diapo 104).
u La manipulation des chaînes de caractères en Perl
utilise (comme beaucoup d'outils Unix tel regexp) des
motifs (patterns) décrits à l'aide d'expressions
régulières .

 J ean DE MAR TIN I © 14.02.00


 

Expressions régulières
Conception d'un
d'un s ite WEB

125

u Une expression régulière est la description d'un motif 


textuel à l'aide d'une for mule placée entre / et /.
u Une expression régulière est construite à partir :
l de constantes : caractères  (signes typographiques),
l d'opérateurs : dénotés par des caractères spéciaux  dont
 dont
l'interprétation dépend du contexte.
u Le coin du théoricien : Les expressions régulières
régulières ont
été introduites pour décrire les langages réguliers
(T1) et leurs analyseurs qui sont des machines à états
finis.

 J ean DE MAR TIN I © 14.02.00

Classes de caractères
Conception d'un
d'un s ite WEB
126

u Une classe de caractères est l'ensemble des


caractères qui peuvent apparaître en tel ou tel
emplacement d'un motif.
u Une classe de caractères est définie entre [ et ].
u Dans la définition d'une classe de caractères, les
signe - et ^ (placé en tête) signifient "entre" et "sauf".
u Exemples :
[abc] les 3 caractères a, b et c
[a-zA-Z
[a-zA-Z0-9
0-9]] n'impo
n'importe
rte quell
quelle
e lettre
lettre ou chiff
chiffre
re
[^abc] sauf les caractères a, b ou c

 J ean DE MAR TIN I © 14.02.00


 

Caractères spéciaux
Conception d'un
d'un s ite WEB

127

u Certains caractères sont spéciaux car on ne peut pas


les taper au clavier (ils ont un effet immédiat),
exemples :
l  \n nouvelle ligne
l  \t tabulation
u D'autres servent de raccourcis syntaxique, exemples :
l . : n'i
n'im
mpor
orte
te qu
quel
el ca
cara
ract
ctèr
ère
e = [^\
^\n
n]
l  \w : un caractère alpha-numérique = [a-zA-Z0-9]
[a-zA-Z0-9]
l  \W : sauf un caractère alpha-numérique = [^a-zA-Z0-9]
[^a-zA-Z0-9]
l  \d : un chiffre = [0-9]
l  \D : sauf un chiffre = [^0-9]
l  \s : un espacement = [ \t\n]
l  \S : sauf un espacement = [^
[^ \t\n]
 J ean DE MAR TIN I © 14.02.00

Concaténation, option et
Conception d'un
d'un s ite WEB
répétition
128

u L'opération de base est la concaténation dénotée par 


la simple juxtaposition.
 /[A-Z][0-9]/ dénote des motifs de la forme B3, Z8,
Z8, …
u Un caractère peut être optionnel dans un motif :
 /pommes?/ dénote le mot "pomme"
"pomme" éventuellement au pluriel.
 /par(t|c)/ dénote les mots "part" ou "parc"
u Un caractère peut être dupliqué dans un motif :
 /b+/ dénote des motifs de la forme
forme "b", "bb", "bbb", "bbbb", …
 /b*/ = (b+)?

 J ean DE MAR TIN I © 14.02.00


 

Parenthèsage et
Conception d'un
d'un s ite WEB
échappement
129

u Pour définir ce sur quoi porte une opération, il peut


être nécessaire de parenthéser certains termes de
l'expression :
 /(bon)+/ dénote des motifs de la forme "bon", "bonbon",
"bonbonbon", …
u Pour introduire un caractère qui joue normalement le
rôle d'un opérateur, il faut le faire précéder de \ :
 \| \[ \] \( \) \* \+ …
u Il est toujours possible d'introduire un caractère
spécial par son code ASCII :
 \x82 dénote (sur PC sous DOS) le caractère "é"

 J ean DE MAR TIN I © 14.02.00

 Appariement
Conception d'un
d'un s ite WEB
130

u Une chaîne est appariée à un motif si on peut y


trouver ce motif.
u La relation d'appariement est notée =~
u Exemples :
'le p
 peetit chat' =~ /le/ vaut "vrai"
'le petit chat' =~ /Le/ vaut "faux"
'un bon s auci s s s on' =~ /s+/ vaut "vrai"
u Cette relation d'appariement sera souvent utilisée en
tant que prédicat dans une structure "if (…) else {...}"

 J ean DE MAR TIN I © 14.02.00


 

Contexte de l'appariement
Conception d'un
d'un s ite WEB

131

u L'appariement sur une partie du motif peut être


imposé en début de texte ou en fin de texte.
^ le te
term
rme
eqqui
ui su
suit
it es
estt con
confr
fron
onté
té au dé
débu
butt du
du tex
texte
te
$ le te
term
rme
e qui
qui préc
précèd
èdee est
est co
conf
nfro
ront
nté
é à la
la fin
fin du te
text
xte.
e.
u Exemples :
 /^(bon)(.*)s$/ s'apparie avec tous les textes qui commencent par 
par 
"bon" et qui se terminent par la lettre "s".

 J ean DE MAR TIN I © 14.02.00

Substitution
Conception d'un
d'un s ite WEB
132

u Une expres
expresss ion de
de s ubs
ubsttitut
itution
ion permet de remplacer,
dans un texte, un motif par un autre, elle vaut le
nombre des substitutions effectuées.
u Une expression de substitution est de la forme :
s/<reg-exp> /<expression> /<paramètres>
u Exemples :
s/saucisse/banane/
remplace la première occurrence du mot "saucisse" par le mot
"banane".
s/saucisse/saucisson/g
remplace toutes les occurrences du mot "saucisse" par le mot
"banane".

 J ean DE MAR TIN I © 14.02.00


 

Utilisations de la substitution
Conception d'un
d'un s ite WEB
(1)
133

u Modification partielle d'une portion de texte :

$texte
$texte == ""
une
une bonne
bonne saucisse
saucisse sèche
sèche est
est
une
une saucisse
saucisse qui
qui aa bien
bien séché.";
séché.";

$texte
$texte =~ s/saucisse/banane/;

u Que devient la variable $texte ?

 J ean DE MAR TIN I © 14.02.00

Utilisations de la substitution
Conception d'un
d'un s ite WEB
(2)
134

u Modification globale d'une portion de texte :

$texte = "
une bonne saucisse sèche est
une saucisse qui a bien séché.";

$texte =~ s/saucisse/banane/g;

u Que devient la variable $texte ?

 J ean DE MAR TIN I © 14.02.00


 

Utilisations de la substitution
Conception d'un
d'un s ite WEB
(3)
135

u Sauf indication, la substitution porte sur la variable


prédéfinie* $_.
u Modification d'une portion de texte :

$_
$_ = "
une
une bonne
bonne saucisse
saucisse sèche
sèche est
est
une saucisse qui a bien séché.";
une saucisse qui a bien séché.";

$ns
$ns = s/saucisse/banane/g;

u Que deviennent les variables $_ et $ns ?


* ces variables prédéfin
prédéfinies
ies introduisent q
quelques
uelques magies dans Perl. Nous
en verrons quelques autres.
 J ean DE MAR TIN I © 14.02.00

Traduction
Conception d'un
d'un s ite WEB
136

u Une expres
expresss ion de traduct
traduction
ion  permet de remplacer,
dans un texte, des caractères par d'autres caractères
; elle vaut le
l e nombre des traductions effectuées.
u Une expression de traduction est de la forme :
tr/<cla
<class s e de caractères> /<cla
<class s e de caractères> /<paramètres>
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 César pour crypter un message.

 J ean DE MAR TIN I © 14.02.00


 

Utilisations de la traduction
Conception d'un
d'un s ite WEB
(1)
137

u Modification d'une portion de texte :

$texte
$texte == ""
une
une bonne
bonne saucisse
saucisse sèche
sèche est
est
une saucisse qui a bien séché.";
une saucisse qui a bien séché.";

$texte
$texte =~ s/a-zèé/b-zaïâ/;

u Que devient la variable $texte ?

 J ean DE MAR TIN I © 14.02.00

Utilisations de la traduction
Conception d'un
d'un s ite WEB
(2)
138

u Sauf indication, la traduction porte sur la variable


prédéfinie $_.
u Modification d'une portion de texte :

$_ = "
une bonne saucisse sèche est
une saucisse qui a bien séché.";

$ntr = tr/a/a/;

u Que deviennent les variables $_ et $ntr ?

 J ean DE MAR TIN I © 14.02.00


 

Mémoire de l'appariement
Conception d'un
d'un s ite WEB
(1)
139

u Un motif d'appariement peut être scindé en plusieurs


sous-motifs par parenthésage :
 /^(.)(.*)(.)$/ définit 3 sous-motifs
u Lorsque ce motif est apparié avec succès à une
portion de texte, ce qui s'est apparié à chacun des
sous-motifs est conservé dans des variables
nommées \1, \2, … dans la définition de la substitution
et $1, $2, … dans le reste du programme.

 J ean DE MAR TIN I © 14.02.00

Mémoire de l'appariement
Conception d'un
d'un s ite WEB
(2)
140

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

$_
$_ == "bonne
"bonne nuit
nuit les
les petits";
petits";

s/^(.)(.*)(.)$/\3\2\1/;
s/^(.)(.*)(.)$/\3\2\1/;

print
print "$1
"$1 $2
$2 $3";
$3";

 J ean DE MAR TIN I © 14.02.00


 

On retourne dans le vif du


Conception d'un
d'un s ite WEB
sujet
141

$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'};
 }
 }
...
...

u A présent, peu importe que le nom de la méthode soit


écrit en minuscule ou en majuscule.
u Il ne reste plus qu'à exploiter le
l e contenu de la variable
$buffer.

 J ean DE MAR TIN I © 14.02.00

Deux fonctions très utiles


Conception d'un
d'un s ite WEB
142

u Très fréquemment il est nécessaire d'éliminer le


dernier caractère d'une portion de texte (typiquement
 \n) :
chop ($
($texte) élimine le
le de
dernier ca
cara
rac
ctère du
du te
texte co
contenu
dans $texte.
chop élimine le dernier caractère du texte contenu
dans $_.
u Encore plus fréquemment il est nécessaire de
tronçonner une portion de texte (typiquement pour 
analyser une QUERY_STRING) :
split(<motif>,$tex
,$texte)
te) rend le tableau
tableau cons
constitué
titué des "tron
"tronçons"
çons"
découpés dans $texte, <motif> définissant le
séparateur.
split(<motif>) comme ci-dessus sur la variria
able $_.

 J ean DE MAR TIN I © 14.02.00


 

Un tronçonnage utile
Conception d'un
d'un s ite WEB
143

$buffer
$buffer == "" liquide=eau&œufs=on&...&nom=Mickey+M
liquide=eau&œufs=on&...&nom=Mickey+Mouse"
liquide=eau&œufs=on&...&nom=Mickey ouse"
liquide=eau&œufs=on&...&nom=Mickey+Mouse"
+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"

 J ean DE MAR TIN I © 14.02.00

Pour aller plus loin


Conception d'un
d'un s ite WEB
144

foreach $paire
foreach $paire (@paires)
(@paires) {{
    ($nom,
($nom, $valeur)
$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 nouveautés :
l la structure d'itération
foreach <scalaire> (<tableau>) {…}
l la fonction hex()
l la fonction pack()
l l'option "e" dans "s/…/…/ge"

 J ean DE MAR TIN I © 14.02.00


 

Structure d'itération en Perl


Conception d'un
d'un s ite WEB
145

u On trouve les structure d'itération suivantes :


foreach $var (@tab) {…}
for(<initialisation>;<test>;<incrémentation>) {…}
while (<prédicat>) {…}
do {…} while(<prédicat>)
u Les prédicats sont construits à partir ds relations
suivantes :
== égalité numérique
!= différence nu
numérique
eq égalité lexicographique
ne différence le
lexicographique
=~ appariement
!~ désappariement
 J ean DE MAR TIN I © 14.02.00

Expressions logiques
Conception d'un
d'un s ite WEB
146

u Les expressions logiques sont construites à partir 


des connecteurs suivants :
! négation lo
logique (p
(pas)
&& conj
conjon
onct
ctio
ionn lo
logi
giqu
quee (e
(et)
t)
|| disjonction lo
logique (o
(ou)
u Ces connecteurs sont évalués en mode pa
pares
res s eux . Le
ème
2  opérande n'est évalué qu'en cas de besoin :
&& le 2ème opérande n'est évalué que si le 1 er  opérande s'évalue à
"vrai",
|| le 2ème opérande n'est évalué que si le 1 er  opérande s'évalue à
"faux".

 J ean DE MAR TIN I © 14.02.00


 

Fonction hex() & pack()


Conception d'un
d'un s ite WEB
147

u Fonction hex :
hex ($te
($texte
xte)) rend la valeu
rend valeurr entière
entière corre
correspo
sponda
ndant
nt à la
la chaîne
chaîne $tex
$texte
te
supposée représenter un nombre exprimé en notation
hexadécimale.
h ex comme ci-dessus sur la variable $_.
u Fonction pack :
pack(" C " ,<e
<expr
xpr ess ion à valeur
valeur entière>)
rend la chaîne contenant le caractères dont le code
ASCII est la valeur de l'expression.
u La fonction pack() présente de très nombreuses
options toutes plus obscures les unes que les autres ;
donc consultez la documentation.

 J ean DE MAR TIN I © 14.02.00

L'option "e" de la
Conception d'un
d'un s ite WEB
substitution
148

u L'option "e" indique que le motif de remplacement est


le résultat 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

 J ean DE MAR TIN I © 14.02.00


 

Finalement, une fonction


Conception d'un
d'un s ite WEB
bien utile
149
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} = $valeur;
$FORM{$nom} = $valeur;
   }}
   %FORM;
%FORM;
}}
 J ean DE MAR TIN I © 14.02.00

Quelques considérations
Conception d'un
d'un s ite WEB
150

u Il est souvent nécessaire de tester un script CGI hors


connexion (économies de téléphone).
u Nous allons donc voir comment écrire deux petits
scripts Perl de test pour :
l une communication selon la méthode GET,
l une communication selon la méthode POST.
u Ces deux petits scripts peuvent être utilisés aussi
bien dans un contexte Unix que dans un contexte
Windows 95 ou NT.

 J ean DE MAR TIN I © 14.02.00


 

Test de la méthode GET


Conception d'un
d'un s ite WEB
151
Message à transmettre tel qu'il viendrait
d'un formulaire.

$message = 'liquide=lait&recipi
'liquide =lait&recipient=bol&...'
ent=bol&...';
'liquide=lait&recipien
'liquide=l t=bol&...';;
ait&recipient=bol&...';

$ENV
$ENV{'
{'RE
REQU
{'RE QUES
REQUEST_T_ME
EST_ METH
T_ME THOD
OD'}
'} = 'GET
'GET';
'GET ';
ET';
$ENV{ 'Q
V 'QU UERY _S T
_S RRING'} = $mmesssaag
e
mes gee;;

system('perl script.pl');

Script à tester 

On utilise la commande s ys tem qui crée


unvariables
processus fils qui hérite des
d'environnement.
 J ean DE MAR TIN I © 14.02.00

Test de la méthode POST


Conception d'un
d'un s ite WEB
152
Message à transmettre tel qu'il viendrait
d'un formulaire.

$message == 'liquide=lait&recipie
'liquide= lait&recipient=bol&...'
'liquide=lait&recipi nt=bol&...';;
'liquide =lait&recipient=bol&...'
ent=bol&...';
$longueur == length($message);
length($message);

$ENV
$ENV{'
$ENV {'RE
NV{'REQU
QUES
EST_
T_ME
METH
THOD
OD'}
'} = 'POST
'PO
'POST';
'POST ';
$ENV
$ENV{'
$ENV {'CO
NV{'CONT
{'CO NTEN
CONT ENT_
NTENT_LE
ENT_ LENG
NGTH
TH'}
'}
T_LE TH'}'} = $lo
$long
ngue
ueur
ngue ur;;
ueur

open(CGI,'|perl
perl script.pl');
open(CGI,'|perl
open(CGI,'| script.pl');
print CGI $message;
close CGI;
On utilise l'ouverture d'un pip
 pipee qui
permet au script testé d'hériter à la fois Script à tester 
des variables d'environnements et de
recevoir le message via STDIN.

 J ean DE MAR TIN I © 14.02.00


 

Un petit exemple de script


Conception d'un
d'un s ite WEB
153

Sub
Sub read_input
read_input {{


}}

%formulaire
%formulaire == &read_input();
&read_input();

print
print ""
lliiqquuiiddee :: $f
$$f
$ffoorrm
muullaaiirree{{''lliiqquuiiddee''}}
re
reci
reci
re cipi
pien
cipi ent
pienenttt :: $for
$f ormu
$for
$f mula
ormu lair
mula ire{
lair e{'r
ire{ 'rec
e{'r'rececipipie
ecipipieient
nt'}
ient
nt'}'}
'}
nnoom m :: $$ffoorrmu l a i r e {
mulaire{'nom'} ' n o m '}
";
";

 J ean DE MAR TIN I © 14.02.00

Rôle des scripts CGI


Conception d'un
d'un s ite WEB
154

u Les scripts CGI interviennent très souvent dans le


cadre d'un site Web :
l Site de recherche : gestion d'une base de donnée,
l Site de commerce électronique : parcours du catalogue,
construction du "panier", élaboration de la facture, déclenchement
du paiement,
l Dispositifs variés :
 – compteurs d'accès,
 – livre d'or (guestbook),
 – …
l Scripts d'analyse du traffic :
 – pays, domaines, machines d'origine,
 – navigateur utilisé,
 – …

 J ean DE MAR TIN I © 14.02.00


 

Deux exemples un peu


Conception d'un
d'un s ite WEB
réalistes
155

u Nous allons en terminer sur notre présentation du


langage Perl par les deux exemples suivants :
l petit moteur de recherche : utilisation intensive du traitement des
chaînes de caractères de Perl,
l constructeur de "paniers" : utilisation systématique 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.

 J ean DE MAR TIN I © 14.02.00

Un petit moteur de recherche


Conception d'un
d'un s ite WEB
156

u Nous nous contenterons d'une


clé hiérarchis és , non optimisée,rech
recherch
danserche
unedomaine
par mots
par
bien ciblé :
Recherche gastronomique
u Nous n'en verrons que les grandes lignes (les détails
seront développés sur machine) :
l structure du fichier des informations,
l formulaire de référencement,
l formulaire d'interrogation,
l moteur de recherche,
l présentation des résultats de la recherche.

 J ean DE MAR TIN I © 14.02.00


 

Le fichier des informations


Conception d'un
d'un s ite WEB
157

u Nous nous contenterons d'un fichier unique dans


lequel chaque enregistrement correspond à une ligne.
u Les enregistrements seront rangés dans l'ordre où ils
auront été introduits.
u Ce fichier s'appellera BASE.
u Cette structure peut suffire pour de petites bases de
données, elle conduirait, autrement, à des temps de
consultation prohibitifs.

 J ean DE MAR TIN I © 14.02.00

Un enregistrement
Conception d'un
d'un s ite WEB
158

u
Un enregistrement est
champs-information constitué
séparés parde champs-clé
le signe "|" ; ilsetsont
de
séparés entre eux par le signe ":".
u Champs clé (dans cet ordre) :
l ville,
l spécialité : locales, asiatiques, viandes, poissons,
l catégorie 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.

 J ean DE MAR TIN I © 14.02.00


 

Pages associées
Conception d'un
d'un s ite WEB
159

u Deux pages sont nécessaires :


l formulaire d'interrogation pour rechercher le restaurant qui nous
convient,
l formulaire de référencement pour permettre à un restaurateur de
référencer son restaurant dans la base.

 J ean DE MAR TIN I © 14.02.00

Formulaire d'interrogation
Conception d'un
d'un s ite WEB
160

 J ean DE MAR TIN I © 14.02.00


 

Formulaire de référencement
Conception d'un
d'un s ite WEB
161

 J ean DE MAR TIN I © 14.02.00

Modèles de Page associées


Conception d'un
d'un s ite WEB
162

u
Un modèle de page est nécessaire :
l modèle de présentation pour afficher le résultat d'une recherche,

u Le modèle de présentation ne constitue pas une page


à proprement parler, il sert simplement de modèle à la
page que le script d'interrogation doit produire.

 J ean DE MAR TIN I © 14.02.00


 

Modèle de présentation
Conception d'un
d'un s ite WEB
163

 J ean DE MAR TIN I © 14.02.00

Format de l'enregistrement
Conception d'un
d'un s ite WEB
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 pho
 photo
to correspond au nom du fichier 
JPEG, la photo sera parvenue par un autre canal
que celui du formulaire (La poste par exemple).

 J ean DE MAR TIN I © 14.02.00


 

Les repères des formulaires


Conception d'un
d'un s ite WEB
165

u Les différentes champs de l'enregistrement


correspondent
corresponde nt aux entités de formulaire ayant les
noms suivants (sauf photo) :
l v ille : ville - clé n°1
l spec
sp ecia
iali
lite
te : sp
spéc
écia
iali
lité
té - cl
clé
é n°
n°2
2
l cate
ca tego
goririe
e : ca
caté
tégo
gori
riee - cl
clé
é n°
n°3
3
l nom : nom du restaurant - information
l sous
so usti
titr
tre
e : com
compl plém
émenentt de
de no
nom - in
info
form
rmat
atio
ion
n
l adre
ad ress
sse e : ad
adre
ressse - in
info
form
rmat
atio
ion
n
l p r i x1 : prix du menu n°1 - information
l menu1 : menu n°1 - information
l p r i x2 : prix du menu n°2 - information
l menu2 : menu n°2 - information

 J ean DE MAR TIN I © 14.02.00

Les repères des scripts


Conception d'un
d'un s ite WEB
166

u
Les différentest aux
corresponden
correspondent champs de de
entités l'enregistrement
présentation suivantes :
l v ille : $ville
l spec
sp ecia
iali
lite
te : $sp
$spec
ecia
iali
lite
te
l cate
ca teggor
orie
ie : $c
$cat
ateg
egor
orie
ie
l photo : $photo
l nom : $nom
l soustitre : $s
$soustitre
l ad r esse : $adresse
l p r i x1 : $prix1
l menu1 : @menu1
l p r i x2 : $prix2
l menu2 : @menu2

 J ean DE MAR TIN I © 14.02.00


 

Script d'interrogation :
Conception d'un
d'un s ite WEB
structure
167

u Le script d'interrogation comporte trois parties


décrites par trois fonctions :
%formulaire = &read_input();
construction du tableau associatif correspondant au formulaire
d'interrogation.
@resultats = &interrogation($cle1,$cle2,$cle3);
interrogation du fichier des données et construction du tableau
de la partie information des enregistrements trouvés.
do page(@resultats);
construction de la page de présentation.

 J ean DE MAR TIN I © 14.02.00

Script d'interrogation :
Conception d'un
d'un s ite WEB
source
168

#!/usr/local/bin/perl
#!/usr/local/bin/perl
sub
sub read_input
read_input {...}
{...}
sub
sub interrogation
interrogation {...}
{...}
sub page {...}
sub page {...}
sub
sub compose_motif
compose_motif {...} {...}
sub
sub compose_menu
compose_menu {...} {...}

%formulaire
%formulaire == &read_input();
&read_input();
$cle1 = $formulaire{'ville'};
$cle1 = $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 page(@resultats);
do page(@resultats);
 J ean DE MAR TIN I © 14.02.00
 

Fonction d'interrogation
Conception d'un
d'un s ite WEB
169

sub interrogation {
  local
local ($cle1, $cle2,
$cle2, $cle3) == @_;@_;
  open(BASE,"<base.rst") || die 'fichier
'fichier inconnu';
  foreach $enregistrement (<BASE>) {
  ($cles,
($cles, $info) = split(/\|/,$enregistrement);
split(/\|/,$ enregistrement);
split(/\|/, $enregistrement);
  ($lc1, $lc2, $lc3) == split(/:/,$cles);
split(/:/, $cles);
  if (($cle1
(($cle1 eq $lc1)&&
($cle2 eq $lc2)&&($cle3 eq $lc3)) {
  push(@RESULTATS,$info);
  }}
  }
  close
close BASE;
  @RESULTATS;
@RESULTATS;
}
 J ean DE MAR TIN I © 14.02.00

Composition de la page
Conception d'un
d'un s ite WEB
170

$nom $prix1 $prix2

$photo $soustitre
$menu1 $menu2
$adresse

u La présentation de la page est obtenue en combinant


des motifs construits à l'aide de 3 tables.
u Il y a autant de motifs que d'éléments dans le tableaux
@resultats.

 J ean DE MAR TIN I © 14.02.00


 

Fonction de composition de
Conception d'un
d'un s ite WEB
la page
171

sub
sub page
page {{
print
print ""
Content-type:
Content-type: text/html
text/html

<HTML>
<HTML>
<HEAD><TITLE>R&eacute;sultats</TITLE></HEAD>
<HEAD><TITLE>R&eacute;sultats</TITLE></HEAD>
<BODY
<BODY BGCOLOR=\"White\">";
BGCOLOR=\"White\">";
foreach
foreach $resultat
$resultat (@_)
(@_) {{
print
print ""
<TABLE
<TABLE WIDTH=\"100%\"
WIDTH=\"100%\" BORDER=\"2\"
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></HTM
"</BODY></HTML>
L>
"</BODY></HTML
"</BODY> > ";
</HTML> ";
 J ean DE MAR TIN I © 14.02.00

Fonction de composition du
Conception d'un
d'un s ite WEB
motif 
172

sub compose_motif
sublocal
compose_motif
local {{
($photo,$nom,$soustitre,$adresse,
($photo,$nom,$soustitre,$adresse,
$prix1,$menu1,$prix2,$menu2)
$prix1,$menu1,$prix2,$menu2)
== split(/:/,
split(/:/, @_[0]);
@_[0]);
print "<TR>
print "<TR>
<TD><IMG
<TD><IMG SRC=\"$photo\"></TD>
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>Men
<B>Menu
<B>Men u 1 : $prix1 F</B
F</B><HR>
><HR>
<HR>";
u 1 : $prix1 F</B><HR>
F</B> ";
do compose_menu(split(/\./,$menu1));
compose_menu(split(/\./,$men
do compose_menu(split(/\./,$menu
compose_menu(split(/\./,$menu1));u1));
1));
print
print "</TD>";
"</TD>";
…..
…..
  print
print "</TR>";
"</TR>";
}}
 J ean DE MAR TIN I © 14.02.00
 

Fonction de composition des


Conception d'un
d'un s ite WEB
menus
173

sub
sub compose_menu
compose_menu {{
print
print "<TABLE>";
"<TABLE>";
   foreach
foreach $item
$item (@_)
(@_) {{
pr
prinint
inttt "" <T
prin
pr <TR>
R>
<TR>
<T R>
<TD
<TD VALIGN=\"TOP\">
VALIGN=\"TOP\">
<IMG
<IMG SRC=\"blueball.gif\"></TD>
SRC=\"blueball.gif\"></TD>
<TD VALIGN=\"TOP\">$item</TD>
<TD VALIGN=\"TOP\">$item</TD>
</TR>
</TR>
";
";
}}
print
print "</TABLE>";
"</TABLE>";
}

 J ean DE MAR TIN I © 14.02.00

Script de référencement :
Conception d'un
d'un s ite WEB
source
174

#!/usr/local/bin/perl
#!/usr/local/bin/perl
sub
sub read_input
read_input {...}
{...}
sub
sub referencement {...}
referencement {...}

do
do referencement(%formulaire);
referencement(%formulaire);

u Cette version est minimale, on peut, bien sûr, la


compléter :
l On pourrait, par exemple, renvoyer une page analogue à la page de
présentation,
l ...

 J ean DE MAR TIN I © 14.02.00


 

Fonction de référencement
Conception d'un
d'un s ite WEB
175

sub referencement {
  local ($ville, $specialite, $categorie, ...) ==
(@_[0]){'ville'},
(@_[0]){'ville'}, @_[0]){'specialite'},
@_[0]){'specialite'}, …);
…);
  open(BASE,">>base.rst") || die 'fichier inconnu';
  print BASE "$ville:$specialite:
"$ville:$speci alite: …
… |$photo:
|$photo: … \n";
  close
close BASE;
}

u Voici une version élémentaire de la fonction de


référencement.
u Il reste quelques petits problèmes à résoudre :
l traitement des caractères spéciaux,
l permettre le déréférencement,
l éviter les déréférencements "sauvages" ...
 J ean DE MAR TIN I © 14.02.00

Le "panier de la ménagère"
Conception d'un
d'un s ite WEB
176

u
Lorsqu'on navigue
formulaires sur reprises,
à diverses un site, en
lesoumettant des
serveur ne peut
pas conserver chez lui la trace de ce qui a été saisi ; il
n' a aucun moyen d'identif
n'a d' identifier
ier qui
qu i l'appelle
l'appelle car les
adress es IP s ont pres
pres que toujours
toujours flflot
otttant
ntes
es .
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".

 J ean DE MAR TIN I © 14.02.00


 

Maintenir un "état"
Conception d'un
d'un s ite WEB
177

u L'utilisation de cookies n'est pas la seule technique


possible.
u On peut, également, utiliser les champs "cachés" des
formulaires :
<INPUT TYPE="HIDDEN" NAME="…" VALUE="…">
u Ces champs ne sont pas affichés, ils permettent au
serveur d'inclure dans un formulaire une information
qui lui sera retransmise.
u On peut ainsi créer des formulaires "à tiroirs".
ti roirs".

 J ean DE MAR TIN I © 14.02.00

Mise en place d'un cookie


Conception d'un
d'un s ite WEB
178

u
Un cookie
renvoyé est
par leune portion
serveur de l'en-tête
(scriptl CGI)
'en-tête du document
et reçu par le
navigateur.
u Le cookie est rangé dans un fichier cookies.txt par le
navigateur Netscape, dans un répertoire Cookies par 
Internet Explorer.

Content-type:
Content-type: text/html
text/html
Set-Cookie: <Nom>==<Valeur>;; expires=
Set-Cookie: expires=<Date>
<Date>;;
path= <Chemin> <Domaine>
path=<Chemin>; domain=<Domaine>;;
; domain=
secure
secure

<HTML>
<HTML> …
… </HTML>
</HTML>

 J ean DE MAR TIN I © 14.02.00


 

Paramètres des cookies (1)


Conception d'un
d'un s ite WEB
179

u <Nom>=<Valeur>
obligatoire — chaînes de caractères (sans point-virgule, virgule ou
espace qui peuvent être URL-encodés : %..) définissant le nom et la
valeur du cookie.
compte=1
u expires=<Date>
facultatif — indique la date à partir de laquelle le cookie doit être
détruit.
Si ce paramètre n'est pas fourni, le cookie est détruit au moment où
on quitte le
le navi
navi g ate
ateur 
ur .

expires=Tuesday,19-May-1998 18:35:40 GMT

 J ean DE MAR TIN I © 14.02.00

Paramètres des cookies (2)


Conception d'un
d'un s ite WEB
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 effectuée par la fin.

domain=.unice.fr 

Ce nom de domaine correspond aux machines verdon.unice;fr,


hermes.unice.fr, i3S.unice.fr …
Si ce paramètre n'est pas fourni, le cookie ne peut être renvoyé qu'à la
machine qui l'a mis en place.

 J ean DE MAR TIN I © 14.02.00


 

Paramètres des cookies (3)


Conception d'un
d'un s ite WEB
181

u path=<Chemin>
facultatif — tête du chemin qui doit être indiqué dans l'URL requise
pour déclencher l'envoi du cookie.

path=/~jdem

Cette tête de chemin correspond au répertoire ~jdem ainsi qu'à tous


ses sous-répertoires.
Si ce paramètre n'est pas fourni, le cookie ne peut être renvoyé qu'en
 s ui vant exactement
ex actement le même
même chemi n  que celui de la requête à l'origine
de l'installation du cookie.
u secure
facultatif — le cookie ne peut être transmis qu'à un serveur s écu
écuri
ri s é.

 J ean DE MAR TIN I © 14.02.00

Renvoi d'un cookie


Conception d'un
d'un s ite WEB
182

u
Lorsqu'une URL est
tous les cookies requise,etlerenvoi
concernés navigateur recherche
vers le serveur 
un message de la forme :
Cookie: <Nom1>=<Valeur1>; <Nom2>=<Valeur2>; …
u Cette chaîne de caractères (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).

 J ean DE MAR TIN I © 14.02.00


 

De plus ...
Conception d'un
d'un s ite WEB
183

u On peut envoyer plusieurs cookie dans le même en-


tête.
u Un client peut toujours supprimer un cookie avant
que le navigateur ne le détruise en éditant le fichier 
cookies.txt.
u Pour supprimer un cookie, il suffit de renvoyer un
cookie de même définition qui expire dans
dans le pa
pass s é.
u Les cookies traversent les proxy-serveurs.
u Limitations :
l pas plus de 300 cookies,
l pas plus de 4Ko par cookie,
l pas plus de 20 cookies par serveur ou domaine.

 J ean DE MAR TIN I © 14.02.00

Exemple de transaction
Conception d'un
d'un s ite WEB
184

Client Serveur  
Set-cookie: client=Donald; path=/; expires=Monday,25-May-1998 23:59:59 GMT

Client Serveur 
Cookie: client=Donald

Client Serveur  
Set-cookie: legumes=carottes; path=/

Client Serveur 
Cookie: client=Donald; legumes=carottes

Client Serveur  
Set-cookie: laitages=yaourts; path=/

Client Serveur 
Cookie: client=Donald; legumes=carottes; laitages=yaourts

 J ean DE MAR TIN I © 14.02.00


 

Quelques références
Conception d'un
d'un s ite WEB
185

u La définition 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
l 'utilisation des cookies.

http://www.illuminatus.com/cookie.fcgi
bonne réflexion sur les risques encourus (très peu) et l'utilisation
des cookies.

http://www.gh-interactive.com/WEBMASTERREPORT2.HTML
magazine à parution (relativement) périodique traitant de
différents sujets concernant l'administration d'un serveur Web.

 J ean DE MAR TIN I © 14.02.00

 A présent, changeons de côté


Conception d'un
d'un s ite WEB
186

u
Faisons le point :

Côté cl
client Côté se
serveur 

Pages statiques Langage


LangageHTML
HTML
Scripts
Scripts Scripts
ScriptsCGI
CGI
Pages dynamiques
Javascript*
Javascript* Perl
Perl

* … et Applets Java (ou Active-X). Nous ne présenterons


présenterons que le langage Javascript
beaucoup plus utilisé (et admis pour cet usage) que le langage Java.
 J ean DE MAR TIN I © 14.02.00
 

Javascript
Conception d'un
d'un s ite WEB
187

u  J avas
avascc r ip
ipt 
t  est
 est une extension de HTML qui permet
d'inclure, dans une page HTML, des fragments de
programmes interprétés par le navigateur.
u  J avas
avascc r ip
ipt 
t  n'est
 n'est pas du J ava simplifié. C'est un
langage de programmation à part entière, possédant
des possibilités très modernes, normalisé sous la
référence ECMA-262.
u Quelques références :
http://www.ecma.ch/
http://www.dpunkt.de/javascript/
http://developer.netscape.com/
http://www.imaginet.fr/ime/javascri.htm

 J ean DE MAR TIN I © 14.02.00

Mon premier script


Conception d'un
d'un s ite WEB
188

<HTML>
<HTML>
<HEAD><TITLE>JavaScript
<HEAD><TITLE>Java
<HEAD><TITLE>Java Script
Script -- le&ccedil;on
<HEAD><TITLE>JavaScript le&ccedil;on
1</TITLE></HEAD>
1</TITLE></HEAD>
<BODY
<BODY BGCOLOR="White">
BGCOLOR="White">
   <P>Texte
<P>Texte HTML
HTML normal.<BR>
normal.<BR>
   <SCRIPT LANGUAGE="JavaScript">
<SCRIPT LANGUAGE="JavaScript">
   document.write("Ceci
document.write("Ceci provient
provient d'un
d'un script
script JavaScript.")
JavaScript.")
   </SCRIPT><BR>
</SCRIPT> <BR>
</SCRIPT><BR>
   Et
Et voici,
voici, &agrave;
&agrave; nouveau,
&agrave; nouveau, du du texte
texte HTML.</P>
HTML.</P>
</BODY></HTML>
</BODY></HTML>

u On remarque une nouvelle balise-conteneur qui peut


être placée n'importe où dans la description d'une
page HTML :
<SCRIPT paramètres>…</SCRIPT>

 J ean DE MAR TIN I © 14.02.00


 

Une petite précaution


Conception d'un
d'un s ite WEB
189



<SCRIPT
<SCRIPT LANGUAGE="JavaScr
LANGUAGE="JavaScript">
LANGUAGE="JavaScript">
LANGUAGE="JavaS ipt">
cript">
<!-- caché aux vieux navigateurs.
<!-- caché aux vieux navigateurs.
document.write("Ceci
document.write("Ceci provient
provient d'un
d'un script
script JavaScript.")
JavaScript.")
 //-->
 //-->
</SCRIPT>
</SCRIPT>
...
...

u Les navigateurs antérieurs à Netscape 2.0 et Internet


Explorer 3.0 ne reconnaissent pas J avas
avascc ri pt . Il est
donc prudent d'en cacher les instructions en simulant
des commentaires.

 J ean DE MAR TIN I © 14.02.00

Les événements
Conception d'un
d'un s ite WEB
190

u
Evénements
mamelles la gprogrammation
de et es tion
tionnair
naires
es d'
d'événemen
 Jévénements
avascc ri pt ts
avas .  sont les 2
u La programmation J avas
avascr
cr i pt  est
 est donc
essentiellement réactive.
u Un événement est une situation fugitive qui est
apparaît dans certaines conditions :
onLoad on vient de charger unune nouvelle page,
onClick on vient de cliquer sur un bouton,
onMous
onM ouseOv
eOver
er la souri
souris
s vient
vient d'entrer
d'entrer dans
dans la
la zone
zone d'un
d'un lien,
lien,
onMo
on Mous
useO
eOut
ut la sou
souri
ris
s vien
vientt de sor
sorti
tirr d'une
d'une zon
zone
e de lie
lien,
n,
...

 J ean DE MAR TIN I © 14.02.00


 

Une première réaction


Conception d'un
d'un s ite WEB
191
<HTML>
<HTML>
...
... Une expression
<BODY>
<BODY>  J avas cr i pt.
   <FORM>
<FORM> Remarquer " et '
   <INPUT
<INPUT TYPE="Button"
TYPE="Button"
VALUE="Chiche
VALUE="Chiche !" !"
onClick="alert('Boum
onClick="alert('Boum !')">
!')"
!')">>
   </FORM>
</FORM>
</BODY></HTML>
</BODY></HTML>

 J ean DE MAR TIN I © 14.02.00

"Objets"  J
 Jav
avas
ascr
cr i pt 
Conception d'un
d'un s ite WEB
192

u Le langage J avas
modèle-objet avascr
cr ipt  est
simple.  est construit autour d'un
u Toutes les entités que permettent de manipuler les
instructions de ce langage sont des atomes ou des
objets caractérisés par des attributs :
l certains définissent ses pr
 propr
opriétés
iétés  — qui sont d'autres objets ou
atomes,
l d'autres définissent ce que l'on peut lui faire : ce sont ses
méthodes .
u Nous verrons que les objets peuvent être définis et
créés, par contre, il n'existe aucun mécanisme
d'héritage.

 J ean DE MAR TIN I © 14.02.00


 

Entités prédéfinies
Conception d'un
d'un s ite WEB
193

u Javascript prédéfinit les types d'atomes suivants :


l nombres
nomb res : 3 ou 3.
3.14
14 ou
ou 0.03
0.031e
1e2
2
l bool
bo olée
éens
ns : tru
true
e ou
ou fal
false
se
l chaî
ch aîne
nes
s : "c"cou
ouco
cou"
u" ou 'c
'cou
ouco
cou'
u'
l fermetures :fonction et son environnement de définition
u Le modèle 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.

 J ean DE MAR TIN I © 14.02.00

 Accès aux attributs et aux


Conception d'un
d'un s ite WEB
méthodes
194

u Un objet étant
(propriétés ou un dictionnaire,
méthodes) peut l'accès aux attributs
donc naturellement
être :
l Math["sin"] fonction
Math["sin"] fonction sinus
l Math["
Math["PI"]
PI"] val
valeur
eur du nom
nombre
bre Pi
u Cette écriture étant assez lourde, on lui a associé un
sucre syntaxique (opérateur "." qui s'associe à
gauche) :
l Math.PI Math.sin
u Exemple :
l Math
Math.s
.sin
in(1
(1.5
.5)) calc
calcul
ule
e le si
sinu
nus
s d'
d'un
un an
angl
gle
e de 1.
1.5
5 ra
radi
dian
ans
s

 J ean DE MAR TIN I © 14.02.00


 

Une page HTML


Conception d'un
d'un s ite WEB
195

u Lorsqu'une fenêtre (contenant une page HTML) est


construite par le navigateur, une hiérarchie d'objets
Javascript est construite parallèlement.
u Les scripts Javascript pourront accéder et manipuler 
les éléments de cette fenêtre (donc de la page HTML)
à travers cette hiérarchie.
u Seront manipulables (entre autres) :
l les ancres ou liens,
l les images,
l les formulaires.

 J ean DE MAR TIN I © 14.02.00

Hiérarchie des objets


Conception d'un
d'un s ite WEB
 Jav
 J avas
ascr
cr i pt 
196

window

navigator document history[..]

mi
mim
meT
eTyp
ypes
es[.
[..]
.] an
anch
chor
ors[
s[..
..]] / li
lin
nks
ks[.
[..]
.]

Plugins[..] forms[..] elements[..]

images[..]

location

 J ean DE MAR TIN I © 14.02.00


 

Composantes d'une page (1)


Conception d'un
d'un s ite WEB
197

u La hiérarchie des objets associés à l'objet document


est construite au fur et à mesure que le texte HTML
est interprété.
u Ainsi :
l Les images seront repérées par :
document.images[0]
document.images[1]

l Les liens seront repérés par :
document.links[0]
document.links[1]

l etc...

 J ean DE MAR TIN I © 14.02.00

Composantes d'une page (2)


Conception d'un
d'un s ite WEB
198

u La
esthiérarchie
plus faciledes objets associés
à parcourir à l'objetses
si on a nommé document
éléments.
u Ainsi :
l L' image définie par :
 – <IMG SRC="../Image1.gif" NAME="Chiche" ...>
sera repérée par : document.Chiche
l Le lien défini par :
 – <A HREF="lesson_1.html" NAME="lesson_1">…
sera repéré par : document.lesson_1
l etc...

 J ean DE MAR TIN I © 14.02.00


 

Un exemple plus conséquent


Conception d'un
d'un s ite WEB
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>

 J ean DE MAR TIN I © 14.02.00

Structure d'un programme


Conception d'un
d'un s ite WEB
200

u
A
et la base,
des . atomes , des objets , des variables
on a des
opérateurs
u Une variable est, a priori, un nom utilisé pour 
désigner la valeur d'un atome ou d'un objet.
u Les atomes, les objets, les variables, les opérateurs et
les expressions  peuvent être regroupés pour former 
des expressions .
u Un pr
 prog
og r amme est une expression.
Et c'est tout !
u Nous avons déjà vus certains atomes et certains
objets, voyons les opérateurs.

 J ean DE MAR TIN I © 14.02.00


 

Nom de variable
Conception d'un
d'un s ite WEB
201

u Un nom de variable est un symbole uniquement


conçu pour ne pas être confondu avec autre chose
(un nombre par exemple).
u En J avas
avascc ri pt , un nom de variable est formé de lettres
et de chiffres et commence par une lettre.
l Le signe _ est considéré comme une lettre.
u On distingue les lettres majuscules des lettres
minuscules.
<nom> ::= [a-zA-Z_] [0-9a-zA-Z_]*

 J ean DE MAR TIN I © 14.02.00

Opérateurs
Conception d'un
d'un s ite WEB
202

u A la base, l'opérateur représente une fonction au sens


mathématique.
+ addition
- différence
* produit
 / division
u Certains opérateurs ne produisent que des effets :
v a r .. = .. définition d'une variable
function .. .. (.
(..) ..
.. définition d'
d'une fe
ferm
rme
eture
wr i t e écriture — cf. document.write(...)
u Un opérateur est appliqué à ses arguments lors de
l'évaluation de l'expression qui le contient.
u Une fermeture est un opérateur défini par lele
programmeur.

 J ean DE MAR TIN I © 14.02.00


 

Expressions : sémantique
Conception d'un
d'un s ite WEB
203

u La syntaxe des expressions n'est pas unifiée ni tout à


fait régulière (comme dans certains langages comme
Scheme), elle dépend de l'opérateur et du contexte.
u Sémantiquement, une expression est toujours
associée à un arbre d'évaluation dont les feuilles sont
des atomes ou des objets et dont les nœuds sont des
opérateurs.
u Un mécanisme d'évaluation associe une valeur à
toute expression.

 J ean DE MAR TIN I © 14.02.00

Evaluation
Conception d'un
d'un s ite WEB
204

u Comme
fonction,un opérateur de
l'évaluation estl'expression
la représentation
qui led'une
contient
revient à remplacer, dans sa formule de définition, ses
paramètres par ses arguments.

si f(x) = 3.x + 2 alors f(2) = 3.2 + 2

paramètre argument

 J ean DE MAR TIN I © 14.02.00


 

Deux stratégies d'évaluation


Conception d'un
d'un s ite WEB
205

Soit f(x)
Soit f(x) = 1 + x.
x.(2
(2 + 3.x)
3.x)
et g(y) = y.y

Que vaut f(g(5)) ?

f(g(5))
f(g(5)) = 1 + g(5).
g(5).(2
(2 + 3
3.g(5)
.g(5))) f(g(5)
f(g(5))) = f(5.5)
f(5.5)
= 1 + 5.5.(2 + 3.5.5) = f(25)
= 1926 = 1 + 25.(2 + 3.25)
Evaluation en = 1926
ordre nor ma
mall Evaluation en
les arguments sont ordre applicatif 
applicatif 
passés non évalués
lespassés
arguments sont
évalués

 J ean DE MAR TIN I © 14.02.00

Laquelle choisir ?
Conception d'un
d'un s ite WEB
206

u Les théoriciens (théorèmes de Church-Rosser)


montré que l'évaluation en ordre normal aboutitont
toujours.
u Mais l'évaluation en ordre applicatif est plus rapide.
u Alors :
l on évalue en ordre applicatif les expressions qui le peuvent :
 for mes s tandards ,
l on évalue en ordre normal les expressions* que ne peuvent pas
être évaluées en ordre applicatif : for mes s péci ales .

* ces expressions sont en petit nombre et bien connues. Heureusement !

 J ean DE MAR TIN I © 14.02.00


 

Expressions vs Instructions
Conception d'un
d'un s ite WEB
207

u Certains opérateurs produisent essentiellement un


"effet". Par exemple :
read(..)
write(..)
u Lorsqu'une expression ne produit qu'un effet ou
lorsque sa valeur n'est pas utilisée, on l'appelle,
l 'appelle, en
général, une instruction .
u Les instructions ne sont réellement indispensables
que lorsqu'il s'agit de décrire un comportement 
d'interface. Il peut, cependant, être commode d'en
utiliser dans d'autres contextes.

 J ean DE MAR TIN I © 14.02.00

Séquences
Conception d'un
d'un s ite WEB
208

u En ordre applicatif, l'ordre n'a


dans lequelimportance.
on évalue les
arguments d'un opérateur aucune
u Par contre, l'enchaînement des effets produits va
dépendre de l'ordre dans lequel les instructions sont
évaluées.
u Il existe donc un opérateur qui garantit l'ordre dans
lequel on évalue ses arguments : la
l a séquence.
l expression-séquence : (<expression>, <expression>…)
l instruction-séquence : {<instruction>; <instruction>…}
u La valeur d'une expression-séquence est celle de la
dernière expression évaluée.

 J ean DE MAR TIN I © 14.02.00


 

Opérateurs standards
Conception d'un
d'un s ite WEB
209

u Un opérateur standard est tel que ses arguments


peuvent être évalués dans n'importe quel ordre sans
que son comportement en soit affecté.
Opérateurs "bit à bit" Opérateurs arithmétiques
& "et" bit à bit + Addition (concaténation)
| "ou" bit à bit - soustraction
^ "ou-exclusif" bit à bit * multiplication
<< décalage à gauche  / division
>> décalage à droite % reste
>>> décalage à droite

Opérateurs de relation
== égaux != différents
< inférieur  > supérieur 
<= inférieur ou égal >= supérieur ou égal

 J ean DE MAR TIN I © 14.02.00

Expressions standards
Conception d'un
d'un s ite WEB
210

u La syntaxede
et Javascript
la sémantique des expressions
standards est identique* à celles
utilisées par le langage C.
u Exemples :
3 x
3+4 3*4+5
(x < y) || (x < z) (n == 0)
(3 + x) * (5 + z) factorielle(6)
u La priorité des opérateurs est la même et les
parenthèses sont utilisées de la même façon.

* pour ce que j'ai pu con


constater
stater jusqu'à
jusqu'à prése
présent.
nt.
 J ean DE MAR TIN I © 14.02.00
 

Expressions spéciales (1)


Conception d'un
d'un s ite WEB
211

u La syntaxe et la sémantique des expressions


spéciales de Javascript est pr
 pres
es que identique à celles
utilisées par le langage C.
u Expressions conditionnelles :
<prédicat> ? <conséquence> : <alternative>
if (<prédicat>) {<conséquence>} else { <alternative>}
if (<prédicat>) {<conséquence>}
u Opérateurs d'itération :
while (<prédicat>) {...}
do {…} while (<prédicat>) {…}
for (<expr-i>; <expr-f>; <expression>) {…}

 J ean DE MAR TIN I © 14.02.00

Expressions spéciales (2)


Conception d'un
d'un s ite WEB
212

u Définir une variable, c'est lier un nom à une valeur.


u Définition d'une variable :
<nom> = <expression>
u Lorsqu'un nom qui n'a été lié à aucune valeur apparaît
dans une expression, on dit que c'est une variable
libre. Sinon, la variable est dite liée.
u Une expression contenant des variables libres n'a pas
de valeur, on dit que sa valeur est undefined (la non-
valeur).
u Une expression ne contenant aucune variable libre
l ibre
est dite fermée.
 J ean DE MAR TIN I © 14.02.00
 

Lieurs de variables
Conception d'un
d'un s ite WEB
213

u Le signe = est un lieur de variable :


l'expression (x = 2, x+5) vaut 7
u Lorsqu'une variable est liée, on peut la renommer 
librement (presque).
u La définition d'une fonction est une autre manière de
lier des variables :
function <nom> (<nom>, <nom>…) {…}

Paramètres :
noms liés dans la séquence

u L'opérateur function construit en fait une fer


 fermeture
meture.

 J ean DE MAR TIN I © 14.02.00

Opérateurs "paresseux"
Conception d'un
d'un s ite WEB
214

u Certains opérateurs
considérés pourraient très bien être
comme standards.
u Pourtant, il est commode (plus efficace) de les
considérer comme spéciaux car tous leurs arguments
ne sont pas nécessaires à leur évaluation.
u On peut procéder ainsi pour toutes les fonctions
incomplètes.

Opérateurs booléens
&& conjonction
|| disjonction

! complémentation

 J ean DE MAR TIN I © 14.02.00


 

Objet statiques ...


Conception d'un
d'un s ite WEB
215

u Pour représenter certaines situations réelles, la


variable définie s ta
tatiqu
tiquement 
ement  —
 — lien nom-valeur 
éternel — comme nous venons de le voir n'est pas
très commode.
u On acceptera (avec réticence) de perdre les
possibilités du raisonnement  au
 au profit des
possibilités de la description .
Ce qui revient à avoir l'attitude un peu illogique * suivante : décrivons
déjà, on verra bien après ce qu'on peut en faire.

* souvenez-vous de proverbe "Shaddock" : il n'est pas n nécessaire


écessaire de
regarder où on va, il sera bien temps de voir quand on y sera !

 J ean DE MAR TIN I © 14.02.00

… ou objets vivants ?
Conception d'un
d'un s ite WEB
216

u On admettra alorssuivantes
les deux opérations
complémentaires :
attacher un nom à une valeur : définir  une
 une variable,
attacher une valeur à un nom : affecter  une
 une variable.
u Le lien nom-valeur n'est plus éternel et la variable
peut avoir une histoire.
x=3 définition  de la variable x
x=4 affectation de la variable x qui, à présent, vaut 4
x=x+2 ré-affectation de la variable x
u Ce qui est à droite d'un signe = fait référence au
 passs é tandis que ce qui est à gauche représente le
 pas
 futur .
 J ean DE MAR TIN I © 14.02.00
 

Opérateurs d'affectation
Conception d'un
d'un s ite WEB
217

u Ces opérateurs sont, en fait, des sucres syntaxiques :


x += 3 au lieu de x = x + 3
x -= 5 au lieu de x = x - 5
u La syntaxe générale des expressions (instructions ?)
utilisant ces opérateurs 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'opérateur = s'associe à droite.

 J ean DE MAR TIN I © 14.02.00

Opérateurs
d'inc(dec)rémentation
Conception d'un
d'un s ite WEB
218

u Certains
implicite opérateurs
: décrivent une affectation
++ incrémentation
-- décrémentation
u L'incrémentation (décrémentation) peut être effectuée
avant ou après l'évaluation de l'expression contenant
l'opérateur.
u Préincrémentation (prédécrémentation) :
(x++ + 2)
(x++ 2) on év
éval
alue
ue x+
x+2
2 pui
puiss x es
estt inc
incré
réme
ment
ntée
ée
(++x
(++x + 2)
2) on in
incr
crém
émen
ente
te x pui
puis
s on
on éva
évalu
lue
e x+ 2

 J ean DE MAR TIN I © 14.02.00


 

Les objets  J
 Jav
avas
ascr
cr i pt 
Conception d'un
d'un s ite WEB
219

u Un objet javas c ri pt  est
 est décrit par sa fonction-
constructeur qui configure l'objet universel this en lui
définissant des attributs et des méthodes.
u Exemple — un nombre rationnel possède 2 attributs,
son numérateur et son dénominateur :

function Rationnel(n,d) {
this.numerateur = n;
this.denominateur = d;
}

 J ean DE MAR TIN I © 14.02.00

Instanciation d'un objet


Conception d'un
d'un s ite WEB
220

u L'instanciation
standard new . d'un objet est effectuée par l'opérateur 
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 Accès aux attributs :
q12.numerateur vaut 1
q12.denominateur vaut 2

 J ean DE MAR TIN I © 14.02.00


 

Les méthodes d'un objet (1)


Conception d'un
d'un s ite WEB
221

u En définissant la fermeture ad'hoc, on peut associer 


une méthode 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 représente
l'objet qui a reçu le message.

 J ean DE MAR TIN I © 14.02.00

Les méthodes d'un objet (2)


Conception d'un
d'un s ite WEB
222

u Il ne reste plus qu'à rajouter la méthode aux


propriétés de l'objet.
function Rationnel(n,d) {
this.somme = rat_somme;
this.numeraratteur = n;
this.d
this.deno
enomin
minate
ateur
ur = d;
}
u On peut alors créer des nombres rationnels et
effectuer des opérations à leur sujet :
q12 = new Rationnel(1,2);
q34 = new Rationnel(3,4);
qs = q12.somme(q34);

On "envoie le message
somme" à l'objet q12.
 J ean DE MAR TIN I © 14.02.00
 

Un exemple plus conséquent


Conception d'un
d'un s ite WEB
223

u L'objet de cet exemple est d'introduire une calculette


dans une page Web.
u Une calculette un peu simplifiée, utilisant une
notation polonaise post-fixée, dont l'allure est la
suivante :

 J ean DE MAR TIN I © 14.02.00

Description de son
Conception d'un
d'un s ite WEB
comportement
224

u C'est une machine à états:finis qui permet de le


décrire le plus facilement
init

Chiffre / opérande_initial
Clear / raz

acquisition Chiffre / opérande_courant

Chiffre / opérande_initial Opération / calcul_initial

Clear / raz calcul Opération / calcul_courant

 J ean DE MAR TIN I © 14.02.00


 

L'automate
Conception d'un
d'un s ite WEB
225

u L'automate qui décrit la machine à états finis


comporte :
l 3 états : "init", "acquisition" et "calcul"
l 3 événements : "Clear", "Chiffre" et "Opération"
l 5 actions : "raz", "opérande_initial",
"opérande_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 événements,
l une zone de texte nommée "n" pour réaliser les affichages de
l'opérande (en mode "acquisition") et du résultat (en mode

"calcul").

 J ean DE MAR TIN I © 14.02.00

Le formulaire "calculette"
Conception d'un
d'un s ite WEB
226

<FORM
<FORM NAME="calculette">
NAME="calculette">
<TABLE BORDER="5">
<TABLE BORDER="5">
<<TTR
R>> <<TTDDCCOOLLSSP
PAAN N==""44"" R
ROOW
WS SPPA ANN==""11"">>
<INPUT
<INPUT TYPE="Text"
TYPE="Text" NAME="n"
NAME="n" VALUE="0"></TD></TR>
VALUE="0"></TD></TR>
<TR>
<T R>
<TR>
<T R> <TD>
<T D><I
<TD>
<T <INP
D><I NPUT
<INP UT
UT TYPE
NPUT TY PE="
TYPE
TY PE="="Bu
Butt
="Bu tton
Butt on"
ttonon""" …
…o onC
onCli
onC
nCli lick
lick ck="="tr
ck="
="trtranansi
tran
ansi sitition
siti on('
tion
on(' ('ch
chif
('chiffr
chiffre'
iffre','
fre','1'
e','1')"
,'1')"><
1')"></T
)"></TD>
></TD>
/TD>
D>
<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
<TD><INPUT TYPE="Button"
TYPE="Button" … …
onClick="transition('operation','add')"></TD>
onClick="transition('operation','add')"></TD>
</TR>
</TR>
<TR>...</TR>
<TR>...</TR>
<TR>...</TR>
<TR>...</TR>
<<TTR
R>> <<TTDD>
D><
><<IIN
NPPUT
UTT TTYP
YYP
YPPEE==""BBu
Bu
utttttoon
n"""……oononC
nC Clliliicckk="
=="
=""rraazz()
(()
())"">><<//TTD
D>>
<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>

 J ean DE MAR TIN I © 14.02.00


 

L'état de la calculette
Conception d'un
d'un s ite WEB
227

u L'état de la calculette peut être représenté par 4


variables :
et at valant "init", "a
"acquisition" ou
ou "calcul",
operan
ope rande
de
valant
val ant la
la valeur
valeur num
numériq
érique
ue de l'op
l'opéran
érande
de en cour
courss
d'utilisation,
resul
resulta
tatt vala
va lant
nt le
le résu
résult
ltat
at de
de l'ac
l'accu
cumu
mula
lati
tion
on de
de tous
tous les
les cal
calcu
culs
ls
effectués depuis le dernier "Clear".
document.calculette.n.value
- chaîne des chiffres de l'opérande en mode
"acquisition",
- chaîne des chiffres du résultat en mode
"calcul".

 J ean DE MAR TIN I © 14.02.00

La fonction de transition
Conception d'un
d'un s ite WEB
228

function
function transition
transition (e,v)
(e,v) {{
if (etat == "init") {
if (etat == "init")ifif{ (e
(e ==
== "chiffre")
"chiffre") {operande_initial(v);etat
{operande_initial(v);etat == "acquisition"}
"acquisition"}
return;
return;
}}
ifif (etat
(etat ==
== "acquisition")
"acquisition") {{
ifif (e
(e ==
== "chiffre")
"chiffre") {operande_courant(v)}
{operande_courant(v)}
ifif (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;
}}
ifif (etat
(etat ==
== "calcul")
"calcul") {{
ifif (e
(e ==
== "chiffre")
"chiffre") {operande_initial(v);etat
{operande_initial(v);etat == "acquisition"}
"acquisition"}
ifif (e
(e == "operation")
== "operation {calcul_courant(v)}
return;
return;
}}
}}

 J ean DE MAR TIN I © 14.02.00


 

L'action "raz"
Conception d'un
d'un s ite WEB
229

function
function raz raz ()
() {{
rreessu l t
ultata t == 00;;
ooppeerraannddee == 00;;
eettaatt == ""iin
niitt"";;
document.calculette.n.value
document.calculette.n.value == "0"; "0";
}}

 J ean DE MAR TIN I © 14.02.00

Les actions "operande_…"


Conception d'un
d'un s ite WEB
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

 J ean DE MAR TIN I © 14.02.00


 

Les actions "calcul_…"


Conception d'un
d'un s ite WEB
231

function
function calcul
calcul (v) {
if
if (v == "add
(v == "a dd")
"add
"a ")
dd")
") {res
{r
{re esul
resu ulta
sulttat
ltatt +=
at +== op
oper
eran
oper
op eraande
andde;}
nde; ;}}
e;}
if (v ==
if (v == "s"sub
"s ub")
"sub ")
ub")
") {res
{r
{re esul
resu ulta
sulttat
ltatt -=
at -= opop
oper
opeera
eraa nd
nde
rand
nde;e ;}
e;}}
if
if (v(v ==
== "mul
"m
"mul
"m ul")
")
ul")
") {re
{r
{re esult
ressu
sulltat
att **=
ulta
tat *== op
oper
eran
oper
op eraande
andde;}
nde; ;}}
e;}
iiff ((v
v =
==
=
(v ==
(v "d
" d
== "dii v
v"
"
"div") ) { r e sul
ultta
{resultat /= t /=
/= o
op
operande;}}
/= opp er a nd e ;
document.calculette.n.value
document.calculette.n.value = resultat; = resultat;
}}
function
function calcul_initial
calcul_initial (v)
(v) {
if
if (v(v ==
== "ne
"n eeg")
"neg
"n g")
g"")) {res
{r
{re esul
resu ulta
sulttat
ltatt == --o
at op
oper
-opeera
peraand
nde
rand
nde;ee;}
;}}
calcul(v);
calcul(v);
}}
function
function calcul_courant
calcul_courant (v) (v) {{
if
if (v(v ==
== "ne
"n eeg")
"neg
"n g")
g"")) {res
{r
{re esul
resu ulta
sulttat
ltatt == --r
at resu
result
-res
esul ltat
ultaat;}
tat;;}}
t;}
calcul(v);
calcul(v);
}}

 J ean DE MAR TIN I © 14.02.00

Les objets Javascript d'usage


Conception d'un
d'un s ite WEB
courant
232

u Les objets Javascript une hiérarchie


documentée dans tousconstituent
les bons outils de
développement.
u La référence Javascript peut être consultée à
home.netscape.com/eng/mozilla/3.0/handbook/javascript
u Attention, Javascript est en pleine évolution, ce site
est à consulter fréquemment.

 J ean DE MAR TIN I © 14.02.00


 

En guise de conclusion
Conception d'un
d'un s ite WEB
233

u Le but de ce cours était :


l de vous donnez quelques éléments 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 déjà possible
de construire des applications intéressantes avec peu
de moyens.

 J ean DE MAR TIN I © 14.02.00

Vous aimerez peut-être aussi