-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
1/117
Concept ion d'un s i te WEB1
Plan du cours
u Historique
u HyperDocuments
u Site Web
u Atelier de dveloppement
u Pages statiques : langage HTML
u Programmation CGI: langage Perl
u Pages dynamiques : Javascr ipt
Concept ion d'un s i te WEB2
Historique
u Projet "World Wide Web" prsent en 1989, au CERN(Genve), par Tim Berners Lee: pour un rseaumon di al d'chang e d'in formatio ns.
u
De nombreux lments favorables :l dveloppement du rseau de transport Internet,
l systme distribu pour l'annuaire des machines (DNS),
l besoin de la communaut mondiale des physiciens (10 000chercheurs),
l une ide simple,
l comptences de l'initiateur du projet.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
2/117
Concept ion d'un s i te WEB3
HyperDocuments
u Structure de document adapte la consultationinformatique :
l petites pages,
l liens de navigation entre pages,
l exemples : documents Videotex, aides en ligne...
u Etendue au Multimedia :
l liens vers des "pages sonores" ou des "pages video".
u La consultation d'un hyperdocument ncessite desoutils de navigation adapts : butineurs (browsers),navigateurs, fureteurs ...
Concept ion d'un s i te WEB4
Navigateurs clbres
u Un des premiers : Mosaic.
u Le plus rpandu : Netscape navigator.
u Le dernier en date :Internet Explorer.
u Un navigateur joue plusieurs rles :
l prsentation d'un hyperdocument,
l accs aux pages distantes en suivant les liens.
u De nombreux greffons de prsentation : les plugins.
l documents imprimer : formats .pdf ...
l squences sonores : formats .au, .wav ...
l images fixes : formats .gif, .jpeg ...
l images animes : formats .avi, .mov, .mpeg ...
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
3/117
Concept ion d'un s i te WEB5
WYSIWYG ? srement pas !
u Brisons immdiatement un mythe actuel.
u C'est la structure d'un hyperdocument qui est dcriteet non pas sa prsentation : langage HTML(HyperText Mark Up Lang uage).
u Le navigateur interprte cette description puiscompose le document "au mieux" compte tenu du
contexte.l rsolution de l'cran,
l couleurs disponibles,
l polices disponibles,
l taille des images afficher,
l taille de la fentre d'affichage.
Concept ion d'un s i te WEB6
Un type de document, unestructure
u Un romanse l i t:l les pages se suivent,
l quelques notes de bas de page,
l une table des matire trs sommaire.
u Un rappor t techniquese consul te:l les pages se suivent,
l des notes de bas de page,
l des renvois dans le document (texte, figures...),
l des renvois en annexe,
l une table des matires fournie,
l un index,
l une bibliographie (renvois hors du texte).
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
4/117
Concept ion d'un s i te WEB7
Documents interactifs
u Quelques constatations :
l un cran est petit (en gnral),
l lire un cran est pnible,
l changer d'cran est rapide.
u Certains documents gagnent tre interactifs :
l notices techniques,
l documents de prsentation,
l documentations commerciales.
u Certains documents ne peuvent pas tre interactifs :
l documents de rflexion.
Concept ion d'un s i te WEB8
Un journal, un site Web
u Un journal est conu autour de sa unequi :l identifie le journal (logo, typographie, mise en page),
l attire l'oeil (couleurs, iconographie),
l donne envie d'acheter le journal pour lire la suite des articles
introduits " la une".u Un service Web poursuit souvent les mmes objectifs
et sera structur de la mme faon.
u Un dtail important :
l les frais de consultation, et donc l'assiduit du client, sont fonctiondu temps de chargement des pages.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
5/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB9
Structure d'un
hyperdocument
u Un hyperdocument est articul autour de sa paged'accueil : la home page.
u La home pagereprsente un compromis difficile :l doit tre attrayante, colore, anime,
l doit tre claire,
l doit se charger vite !
u Le document doit tre structur de telle sorte qu'onne s'y perde pas :
l danger de la prsence de trop de liens externes.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB10
Edition sur le Web
u Le rseau peut simplement servir de support dediffusion pour un ouvrage :
l pas de frais d'impression,
l pas de frais de distribution.
u Le service correspondant a la structure d'une librairievirtuelle et ne propose qu'un catalogue d'ouvrages.
u Les documents "intressants" sont sous une formeimprimable essentiellement :
l format postscr ip t,
l format acrobat.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
6/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB11
Localisation d'un document
u Un docum ent Webest repr par son URL (UniqueRessource Location).
u URL la plus simple :protocole://serveur/
u URL courante :protocole://serveur/repert/.../document
u Quelques exemples :http://www.inria.fr/
http://www.ti.com/
http://www.yahoo.com/
http://verdon.unice.fr/~jdem/
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB12
Architecture de fichiers Web
/
usr bin
local
etc
htdocs
...
...
...
...
espace du serveur
racine du serveur
racine de l'hte
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
7/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB13
Protection des documents
u Le systme de protection est double :
l protection de base des fichiers par le systme d'exploitation del'hte (Unix, Windows NT ...),
l protection des documents par le serveur lui-mme.
u Le serveur Web peut autoriser l'accs :
l aux lecteurs enregistrs : nom, mot de passe
l aux lecteurs accdant depuis un domaine particulier (au sens
TCP/IP),l aux lecteurs accdant depuis une machine particulire.
u Attention. Nous verrons qu'il est possible, danscertains cas, de contourner ces protections.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB14
World Wide Web
domainedomaine
Serveur"proxy"
Serveurde noms
(DNS)
Serveurde pages
Client
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
8/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB15
Quelques protocoles utiles
HTTP : protocole d'change de documents HTML(HyperText Transfert Protocol)
FTP : protocole d'change de fichiers quelconques(File Transfert Protocol).
SMTP : protocole d'change de courrier lectronique.
TELNET : protocole de connexion distance.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB16
Atelier de dveloppement
u Tout au long de ce cours nous supposerons que nousnous trouvons dans la configuration suivante :
l le serveur est hberg sur une machine Unix, le logiciel-serveurWeb tant Apache.
l le poste de dveloppement est une machine en rseau de type PCsous Windows 95ou Windows NT.
u Le poste de dveloppement utilis :
l un outil pour la conception de sitesWeb : Dreamweaver deMacromedia,
l un outil de dessin pour la construction ou la mise en forme desimages : 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.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
9/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB17
Outils HTML
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 donnentdes rsultats trs intressants aujourdhui.
u Il existe galement des convertisseurs de formatpouvant donner d'assez mauvais rsultats.
l deux exceptions : LateX2HTML et RTF2HTML.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB18
Outils de dessin
u Les images utilises sous de type bitmap.
u Il existe de nombreux outils de dessin bitmap :
l Paint Shop Pro de JASC,
l
3D Studio,l Fireworks de Macromedia, ...
u Un outil de dessin doit tre capable de :l lire et produire diffrents formats d'image : .gif et .jpeg au moins,
l de produire des dessins fond transparent,
u l'interfaage avec un scanner (format twain parexemple) est utile.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
10/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB19
Outils de validation
u La prsentation d'une page Web dpendant dunavigateur, il est ncessaire de disposer de quelquesnavigateurs sous diffrentes versions pour tester lel ookd'une page :l Nestscape 3.0 et 4.x les versions 4.x est la plus rpandue,
l Internet Explorer 4.0 et 5.0 les versions antrieures sontbeaucoup trop rustiques.
l Cest la version Internet Explorer 5.x qui, aujourdhui permet laccsau plus grand nombre de sites.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB20
Outils de transfert de fichiers
u Le service est construit sous la forme d'une maquettedans l'espace disque du poste de dveloppement.Lorsqu'il est valid, il faut le transfrer dans l'espacedisque du serveur.
u WS_Ftp de IPSwitch donne d'excellents rsultats.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
11/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB21
Outil de connexion
distance
u Certains paramtrages et mme certainsdveloppements (programmation CGI) ne peuvent sefaire et/ou se valider que sur le serveur lui-mme.
u Il est donc indispensable de pouvoir se connecter distance.
u QVT/Net de QPC Software donne d'excellents
rsultats.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB22
Le langage HTML
u Ces quelques URL http://... vous donneront accs une information complmentaire.
l www.w3.org/
l www.w3.org/TR/REC-html32.html
l nephi.unice.fr/CoursHTML/l www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml
u Le langage HTML dcrit la structure d'un document l'aide de balises qui dlimitent un lment dudocument
l ...
u Tout document HTML est dlimit par :
l ...
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
12/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB23
Structure d'un document
HTML
u Un document HTML comprend toujours 2 lments :
entte : ...
corps : ...
u La structure de base d'un document HTML est alors :
...
...
...
...
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB24
En-tte de document
u Une en tte comprend deux parties :
l un titre de la page,
l une base de rfrence
u Le titre de la page est dcrit par :
...
u La base de rfrence dfinit la racine d'accs pardfaut toutes les URL utilises dans la page :
u Si la base de rfrence n'est pas dfinie, toutes lesURL utilises sont repres par rapport au rpertoirede la page en cours.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
13/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB25
Ma premire page HTML
dfinition du caractre ""
Ma premire page
Ma premire page Web.
Ma premire page
Ma premire page Web.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB26
Et pour la voir ?
u Tout d'abord, il faut taper le texte prcdent enutilisant un diteu rde textes (pas un traitement detextes) :
l EDIT de DOS
l NOTEPAD de Windows 3.xl WORDPAD de Windows 95 (en mode texte).
u Cette page est, par exemple, la page d'accueil devotre futur service :l la sauvegarder sous le nom index.htmldans le rpertoire qui
servira de racine la maquette de votre service.
u Utiliser un navigateur, hors connexion, en simpleconsultation de fichier local.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
14/117
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
15/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB29
Caractres spciaux
u La plupart des alphabets comportent des caractresutilisant des signes diacritiques qui sontindisponibles sur le clavier utilis. Ces caractres ontdonc t cods :
u Exemples :
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB30
Ma premire page
Ma premire page Web.
Ma premire page
Ma premire page Web.
Paragraphes...
u En fait notre premire page a t accepte par lenavigateur par pure gent i l lessecar elle contient unparagraphe non signal. Il faudrait la dcrire par :
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
16/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB31
...Paragraphes
u La meilleure prsentation d'un paragraphe estdtermine par le navigateur lorsqu'il compose lapage.
u Pour faciliter la comprhension de la structure dudocument HTML, on prsente, en gnral, lesparagraphes sur une seule ligne (pouvant largement
dborder de l'cran de saisie).
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB32
Ma deuxime page HTML
Ma premire page
Ma premire page Web.
Un deuxime paragraphe permetde la meubler un peu.
Ma premire page
Ma premire page Web.
Un deuxime paragraphe permetde la meubler un peu.
u On remarque les indentations qui facilitent la lecture.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
17/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB33
Que voici
Les paragraphes
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB34
Elments d'une page
u Une page peut comporter :
l des paragraphes,
l des titres de paragraphes,
l des images,
l des ancres (liens),l des listes puces, numros, descriptives,
l des tableaux,
l des formulaires,
l des dcorations.
u Des portions de textes peuvent tre mises envidence en utilisant diffrents sty les.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
18/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB35
Titres de paragraphes...
u On dispose de 6 niveaux de titres :
... avec n = 1..6
Niveau 1
Niveau 2
Niveau 3
Niveau 4 : Ce titre estcens tre
justifi.
Niveau 1
Niveau 2
Niveau 3
Niveau 4 : Ce titre estcens tre
justifi.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB36
...Titres de paragraphes
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
19/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB37
Styles de paragraphes...
u Les paragraphes peuvent tre :
l aligns gauche,
l aligns droite,
l centrs.
On the night of 3rd Decemberthe
On the night of 3rd December
On the night of 3rd Decemberth
On the night of 3rd Decemberthe
On the night of 3rd December
On the night of 3rd Decemberth
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB38
...Styles de paragraphes
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
20/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB39
Un paragraphe peut contenir un saut la ligneinterne comme ici :
sans que pour autant on quitte leparagraphe.On peut galement introduiredes traitsde sparations
Un paragraphe peut contenir un saut la ligneinterne comme ici :
sans que pour autant on quitte leparagraphe.On peut galement introduiredes traitsde sparations
Quelques dcorations
u On peut introduire des ruptures de lignes par
u On peut galement introduire des traits de sparationpar
u Les espaces excdentaires sont supprims sauf silsont forcs par
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB40
Pour voir ceci...
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
21/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB41
Ou bien cela !
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB42
Multicolonnage
u Certains navigateurs permettent le multicolonnage dutexte.
Sans doute les notes que nous entendons
Du ct de chez Swann - M
Sans doute les notes que nous entendons
Du ct de chez Swann - M
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
22/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB43
Ce qui donne ceci...
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB44
Ou bien cela
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
23/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB45
Styles physiques
u Les styles physiques sont des conteneurs permettantde dfinir le style d'affichage d'une portion de texte :
... en gras,
... en italique,
... souligne,
... en exposant,
... en indice,
... en style tltype.
Portion de texte en gras,
Portion de texte en italique,
Portion de texte souligne,
Portion de texte exposant,
Portion de texte indice,
Portion de texte en style tltype.
Portion de texte en gras,
Portion de texte en italique,
Portion de textesouligne,
Portion de texte exposant,
Portion de texte indice,
Portion de texte en style tltype.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB46
Ce qui donne
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
24/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB47
Cette portion de texte, j'insiste, nedoit pas tre nglige. Sun Tse dit:
Prenez le nom de tous vos officiers, inscrivez-les sur un rpertoire spcial avec l'indication de leurscapacits et de leurs aptitudes, afin que chacun soitemploy suivant ses qualits.
Cette portion de texte, j'insiste, nedoit pas tre nglige. Sun Tse dit:
Prenez le nom de tous vos officiers, inscrivez-les sur un rpertoire spcial avec l'indication de leurscapacits et de leurs aptitudes, afin que chacun soitemploy suivant ses qualits.
Styles logiques
u Les styles logiques sont des conteneurs permettantde dfinir un style d'affichage laiss la discrtion dunavigateur :
l ... pour insister,
l ... pour mettre en vidence,
l ... une citation,
l ... tel quel,
l ... une adresse.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB48
Prsentation Netscape 3.0
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
25/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB49
Les listes
u HTML permet la dfinition de 3 types de listes :
l listes puce : ......
l listes numrotes : ......
l listes descriptives : .........
u Les puces peuvent tre choisies parmi :l l
u Les numrotations peuvent tre choisies parmi :l 1. 2. 3. ...
l a. b. c. ...
l A. B. C. ...
l i. ii. iii. ...
l I. II. III. ...
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB50
Listes puces
Un bon pot-au-feu ncessite :
des poireaux,
des carottes,
des navets.
Un bon pot-au-feu ncessite :
des poireaux,
des carottes,
des navets.
Un bon pot-au-feu ncessite :
des poireaux,
des carottes,
des navets.
Un bon pot-au-feu ncessite :
des poireaux,
des carottes,
des navets.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
26/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB51
Prsentes ainsi
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB52
Les listes numrotes
Un bon pot-au-feu ncessite :
des poireaux,
des carottes,
des navets.
Un bon pot-au-feu ncessite :
des poireaux,
des carottes,
des navets.
Un bon pot-au-feu ncessite :
des poireaux,
des carottes,
des navets.
Un bon pot-au-feu ncessite :
des poireaux,
des carottes,
des navets.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
27/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB53
Prsentes ainsi
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB54
u Ce type de liste est particulirement indiqu pourconstruire un glossaire ou un dictionnaire.
u Si les termes dfinir sont courts, on peut lacompacter.
Les listes de dfinitions
FLAMBARDn. m. Fam. Fanfaron, orgueill
FLAMBEAUn. m. Torche, chandelle de cire ou FLAMBEn. f. Feu clair de menu bois.
FLAMBARDn. m. Fam. Fanfaron, orgueill
FLAMBEAUn. m. Torche, chandelle de cire ou FLAMBEn. f. Feu clair de menu bois.
NNewton.
NmNewtonmtre.
OeOersted.
NNewton.
NmNewtonmtre.
OeOersted.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
28/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB55
Prsentes ainsi
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB56
Ou ainsi
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
29/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB57
Listes imbriques
u Des listes de diffrentes natures peuvent treimbriques
Un bon pot-au-feu ncessite :
des poireaux :
des petits,des moyens,
des gros.
des carottes,
des navets.
Un bon pot-au-feu ncessite :
des poireaux :
des petits,
des moyens,
des gros.
des carottes,
des navets.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB58
Ce qui donne
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
30/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB59
Les images
u Les pages Web sont souvent parsemes de petitslments dcoratifs obtenus par inclusion d'images.
u La balise d'inclusion d'images comporte de trsnombreux paramtres :
l ALIGN= TOP | MIDDLE | BOTTOM | LEFT | RIGHT
l HSPACE= marge h or izonta le (p ixels)
l VSPACE= marg e vert icale (pixels)
l WIDTH= largeur de l ' image (pixels)
l HEIGHT= hauteur de l ' image (pixe ls)
l BORDER= pais seu r de l'en cad rem ent (p ixels )
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB60
Inclusion d'une image
Sans doute les notes que nous entendons alors, tendentdj, selon leur hauteur et leur quantit, couvrir devant nos yeux des surfaces de dimensionsvaries, tracer des arabesques, nous donner des sensations de largeur, detnuit, de stabilit, de caprice.
Mais les notes sont vanouies avant que cessensations soient assez formes en nous pour ne pastre submerges par celles qu'veillentdj les notes suivantes ou mmesimultanes.
Sans doute les notes que nous entendons alors, tendentdj, selon leur hauteur et leur quantit, couvrir devant nos yeux des surfaces de dimensionsvaries, tracer des arabesques, nous donner des sensations de largeur, detnuit, de stabilit, de caprice.
Mais les notes sont vanouies avant que cessensations soient assez formes en nous pour ne pastre submerges par celles qu'veillentdj les notes suivantes ou mmesimultanes.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
31/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB61
Aspect visuel
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB62
Paramtres d'inclusion
u Interprtation des paramtres d'inclusion :
width
height
hspace
vspace
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
32/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB63
Paramtres d'alignement
Cette image
est aligne
de diffrentes
faons.
On remarque que son fond t rendu transparent.
Cette image
est aligne
de diffrentes
faons.
On remarque que son fond t rendu transparent.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB64
Effets de prsentation
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
33/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB65
Fond d'cran
u Une image peut galement servir de fond d'cran.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
34/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB67
Les ancres
u Les ancres indiquent des ex trm itsde liens versd'autres documents.
u Un lien peut pointer vers :
l un autre document : l ien externe,
l un autre endroit de la page en cours : l ien interne.
u Une ancre peut ainsi dfinir un po in t de dpar t:
cl iquable
u Elle peut galement signaler un po in t d 'ar r ive:
non c l iquable
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB68
Schma de liens externessimples
...Page 1...
...Page 2...
...Page 3...
...
...Page 1...
...Page 2...
...Page 3...
...
...
...
p1.html
...
...
p2.html
...
...
p3.html
index.html
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
35/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB69
Schma de liens internes
...Page 1...
...
...Page 2...
...
...Page 3...
...
...
...
...
...
...
...
...Page 1...
...
...Page 2...
...
...Page 3...
...
...
...
...
...
...
...
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB70
Liens doubles
u Les liens doubles dfinissent la fois un point dedpart et un point d'arrive.
...Page 1...
...
...
Retour...
...
...
...Page 1...
...
...
Retour...
...
...
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
36/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB71
Une page avec des liens
Tout sur la fougasse
Chapitre 1 : La farine
Chapitre 2 : Les anchois
Aimez-vous la fougasse ?
Tout sur la fougasse
Chapitre 1 : La farine
Chapitre 2 : Les anchois
Aimez-vous la fougasse ?
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB72
Qui s'affiche
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
37/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB73
Les Tableaux
u Le tableau est llment dorganisation le pluspuissant de HTML.
u C est lui qui permet de disposer dans une page dediffrentes zones de texte ou d images.
u un tableau est un pavage de cellules (CELLS),associes des cellules de titre (HEADING CELLS) le
tout associ une lgende (CAPTION).
u Sa description est assez complexe, nous laborderonsdonc pas pas.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB74
Un tableau lmentaire
CAPTION
HEADING CELLS
CELLS
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
38/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB75
Structure dun tableau
u Un tableau est introduit par le conteneur:
...
u Le titre dun tableau est introduit par le conteneur :
...
u Une ligne du tableau (ROW) est introduite par leconteneur :
...
u Une ligne est compose de cellules* :
* pouvant contenir tout ce que l on veut et mme un tableau.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB76
Un tableau lmentaire 4x4
.........
............
............
.........
.........
............ ............
.........
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
39/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB77
Principaux paramtres
u On dispose de nombreux paramtres :
l alignement horizontal,
l alignement vertical,
l couleur de fond,
l couleur de texte,
l image de fond
l
u Lorsquun paramtre nest pas dfini, sa valeur esthrite de la structure qui l englobe.
u Malheureusement, tous ces paramtres ne sont pastraits par les navigateurs, ils peuvent ne pas avoirdeffet.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB78
Paramtres de
CELLSPACINGCELLPADDING BORDER
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
40/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB79
Paramtres de
ALIGN = LEFT| CENTER | RIGHT
VALIGN = TOP | BOTTOM
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB80
Superposition de cellules
u On peut faire en sorte quune cellule en recouvredautres donnant limpression que des cellules ont tregroupes.
u
Lextension d une cellule sur ses voisines de droitecorrespond au paramtre
COLSPAN = nom bre de cel lu les
u Lextension dune cellule sur ses voisines du dessouscorrespond au paramtre
ROWSPAN = nom bre de cel lu les
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
41/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB81
Paramtres de superposition
1 2 3 4
1
2
3
4
5
colonnes
lignes
ROWSPAN=3 COLSPAN=1
ROWSPAN=2 COLSPAN=2
ROWSPAN=1 COLSPAN=2
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB82
Une belle table des matires
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
42/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB83
Une belle page
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB84
Images cliquables
u Il est possible de dfinir des zones sensiblessur uneimage bitmap et dassocier des liens ces zones.
u Nous ne verrons que la technique la plus rcente.
u Les zones sensibles dfinies sur une image sontregroupes dans une carte (MAP) associe limage.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
43/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB85
Carte des zones sensibles
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB86
Les formulaires
u C'est le formulaire qui sert d'interface entre le mondedu Web et le monde de l'informatique.
u Il permet de construire des interfaces de prsentation
des logiciels d'application.u Il utilise le mode CGI (Common Gateway Interface)
pour fonctionner et son utilisation ncessite lacoopration d'au moins 2 acteurs :
l Ct client : Le formulaire HTML,
l Ct serveur : un programme d'interface.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
44/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB87
Dialogue Client-Serveur
u Le ctcli en test reprsent par le navigateur quiinterprte la page HTML qui comporte des balisespouvant se traduire en requtes.
u Le ctserveu rest reprsent par le serveur Web quiinterprte les requtes provenant du navigateur et quilui transmet des pages HTML.
u Nous avons rencontr deux balises se traduisant enrequte :
l : requte pour une page externe,
l : requte pour une image externe.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB88
Schma de dialogue HTML
Navigateur ServeurWeb
http://../xxx.html#yyyhttp://../xxx.html#yyy
Content-type: text/html
Content-type: text/html
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
45/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB89
Schma de dialogue CGI
NavigateurServeur
Web
http://../xxx.cgi...
NavigateurServeur
Web
http://../xxx.cgi...http://../xxx.cgi...
Content-type: text/html
Content-type: text/html
ProgrammeCGI
Content-type: text/html
Content-type: text/html
QUERY_STRING = ...QUERY_STRING = ...
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB90
Formulaire
u Un formulaire est introduit par le conteneur :
u Un formulaire est constitu d'un groupe d'outils desaisie dcrits par des conteneurs de la forme :
u Un formulaire comporte 2 boutons :
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
46/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB91
Exemple 1
Pour faire une bonne mayonnai eau, huile, lait
Pour faire une bonne mayonnai eau, huile, lait
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB92
Exemple 2
...
Il faut aussi :
oeufs, sel, moutarde,
confiture
...
Il faut aussi :
oeufs, sel, moutarde,
confiture
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
47/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB93
Exemple 3
...
On utilise : assiette bol bouteille
casserole marmite
...
On utilise : assiette bol bouteille
casserole marmite
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB94
Exemple 4
...
Dcrivez, en quelques lignes les principales qualits dittiques de
la mayonnaise :
...
Dcrivez, en quelques lignes les principales qualits dittiques de
la mayonnaise :
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
48/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB95
Exemple 5
...
Donnez votre nom et on vous crira
...
Donnez votre nom et on vous crira
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB96
Et pour finir
...
...
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
49/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB97
Conclusion provisoire
u Nous avons vu l'essentiel de ce qu'il tait ncessairede connatre de HTML pour raliser de belles pagesWeb.
u N'hsitez pas examiner le source des pages quevous consultez. Vous y dcouvrirez comment raliserdes effets poustouflants.
u Il faut, prsent, tudier ce qui se passe du ct duserveur (programmation CGI) et c'est la suite de cecours.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB98
Programmes CGI
u Un programme CGI doit tre capable de composerune page HTML et de l'mettre sur sa sortie standard"stdout".
u
Ce programme reoit ses arguments sous diffrentesformes que nous examinerons.
u Attention : un programme CGI mal conu cre destrous de scurit dans le systme qui l'hberge etpour en savoir plus sur les problmes de scuritdans le Web consulter :
http://www.w3.org/Security/Faq/www-security-faq.html
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
50/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB99
Programmation CGI
u Un programme CGI peut tre crit dans n'importe quellangage.
u Cependant certains langages sont plus commodesque d'autres.
u On utilise typiquement :
l des langages interprts tels sh, csh, et surtout Perl,
l des langages compils tels C, C++, FORTRANet maintenant VisualBas icdans un environnement Windows NT .
u Nous allons introduire, dans ce cours, le langage leplus utilis actuellement : Perl.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB100
Entres - Sorties CGI
Programme CGIProgramme CGI"stdin" stdout
Content-type: text/html
Content-type: text/html
Message MIME
SERVER_SOFTWARESERVER_NAMEGATEWAY_INTERFACESERVER_PROTOCOLSERVER_PORTREQUEST_METHOD
PATH_INFOQUERY_STRINGCONTENT_LENGTH...
SERVER_SOFTWARESERVER_NAMEGATEWAY_INTERFACESERVER_PROTOCOLSERVER_PORTREQUEST_METHOD
PATH_INFOQUERY_STRINGCONTENT_LENGTH...
Environnement d'excution
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
51/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB101
Invocation d'un programme
CGI
u On dispose principalement de 3 mthodes pourinvoquer un programme CGI :
l invocation directe en tant que cible d'un lien :
l invocation par soumission d'un formulaire avec la mthode GET :
l invocation par soumission d'un formulaire avec la mthode POST :
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB102
Extension de l'URL
u On peut passer les arguments d'un programme CGIen tendant son URL :
u
C'est cette technique qui est utilise lors de lasoumission d'un formulaire utilisant la mthode GET.
l L'extension de l'URL est effectue par le navigateur lui-mme.
u Les arguments (empaquets dans une grande chanede caractres) peuvent tre obtenus en analysant lesvariables d'environnement SCRIPT_NAME,PATH_INFO et QUERY_STRING.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
52/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB103
Entre standard
u Lorsqu'un formulaire est soumis en utilisant lamthode POST, les arguments sont empaquets dansune grande chane de caractres prsente surl'entre stdin.
u Cette grande chane ne se termine pas par EOF !
u Sa longueur est place dans la variable
d'environnement CONTENT_LENGTH.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB104
Empaquetage des arguments
u Un argument est reprsent sous la forme d'uncouple nom=valeur.
u Une valeur est une chane de caractres,
uChaque argument est spar du prcdent et dusuivant par le caractre &.
u Les espaces sont remplacs par le caractre + et lescaractres spciaux sont remplacs par leur codeASCII(hex) %xx.
u Exemple :liquide=eau&ufs=on&sel=on&recipient=bol&dissertation=Et+bien,la+mayonnaise,+c'est+tr%E8s+bon...&nom=Mickey+Mouse
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
53/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB105
En rsum
u Un programme CGI doit :
l avoir un nom dont l'extension est .cgi,
l tre capable de consulter des variables d'environnement,
l tre capable de lire une chane de caractres prsente sur stdin,
l tre capable de l'analyser,
l tre capable de composer une page HTML au format MIME et de laprsenter sur stdout.
u Il doit pouvoir, galement, tre capable decommuniquer avec d'autres applications.
u Le langage Perlpermet de faire tout a trscommodment.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB106
Le langage Per l
u Le langage Perl(Practical Extraction and ReportLanguage) ne peut pas tre considr comme unlangage de programmation orthodoxe. Sa seuleambition est d'tre commode.
u Nous n'en donnerons pas une prsentationexhaustive et nous ne l'introduirons qu' partird'exemples significatifs.
u Pour en savoir plus, consulter :
http://www2.ec-lille.fr/~seguy/francais/perl/
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
54/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB107
Un programme Per l
simplissime
#!/usr/local/bin/perl
print "Content-type: text/html
Premire pagescriptes
Bonjour tous.
";
#!/usr/local/bin/perl
print "Content-type: text/html
Premire pagescriptes
Bonjour tous.
";
u Bien que trs simple, ce premier programme nousapprend dj plein de choses.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB108
Les commentaires
u Un commentaire est une portion de texte commenantpar le caractre # et s'tendant jusqu' la fin de la
ligne.
u Exemples :
# Que ce programme est beau et bien ecrit !
print 'bonjour tout le monde !'; # qu'est-ce donc ?
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
55/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB109
Localisation de l'interprte
u Dans un environnement Unix, tous les fichierinterprts (au moins pour tous les "shell" que jeconnais) indiquent, en premire ligne, le chemind'accs leur interprte.
u Cette indication prend la forme du pseudocommentaire :
#!/usr/local/bin/perl
u C'est cette indication qui permet de considrer un telfichier comme un programme excutable standard.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB110
Les instructions
u Une instruction est constitue :
l soit d'une commande et de ses paramtres,
l soit de l'affectation d'une variable la valeur d'une expression.
u Une instruction se termine toujours par le caractre ;
u Ce premier programme ne comporte que l'instructionl print "";
u Comme on peut s'y attendre, la commande printimprime (ici sur stdout).
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
56/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB111
Quote '' & quasi-quote "..."
u Une portion de texte qui ne doit pas tre interprteest cite entre quotes :
'bonjour tout le monde !'
u Lorsqu'une telle portion de texte est rpartie surplusieurs lignes, elle inclut les "RC" invisibles.
u Lorsqu'on cherche construire des portions de texte,
il est commode d'y inclure des variables qui serontvalues. La portion de texte est alors cite entrequasi-quotes :
"Je voudrais $n pizzas"
"Je voudrais une ${c}croute garnie"
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB112
Formats MIME
u Le texte envoy au navigateur par le serveur doit seconformer la norme MIME (Multipurpose InternetMail Extension) qui prconise d'indiquer en en-tte letype de ce qui suit, ici :
Content-type: text/html
u Cet en-tte doit tre suivi d'une ligne vide !
u D'autres types MIME :
application/pdf
application/x-compress
audio/basic
image/gif
...
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
57/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB113
Variables
u Perl supporte 3 types de variables :l scalaires: nombres et chanes de caractres,l tableauxde scalaires dont les lments sont indexs par un
nombre entier,
l tab leaux assoc iat i f sdont les lments sont indexs par unsymbole.
u Noms de variables, les noms de variables sontprfixs :l par $ pour les scalaires,
l par @ pour les tableaux,
l par % pour les tableaux associatifs.
u Les caractres $, @ et % dfinissent, plusgnralement, le contexte d'interprtation desoprateurs Perl.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB114
Contextes d'interprtation
u Les diffrents contextes d'interprtation peuvent treillustrs par ces exemples :l $jour simple variable scalaire
l $jours[28] 29me lment du tableau @jours
l $nombre_de_jours{'mars'} lment associ au symbole 'mars' dutableau 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 lmentsnumros 3, 4 et 5 du tableau @ jours
l @ jours[3..5] mme tableau que ci-dessus
l @ nombre_de_jours{'mars','avril'}tableau constitu des lmentsassocis aux symboles 'mars' et 'avril'du tableau associatif % nombre_de_jours
l % nombre_de_jours tableau associatif dans son ensemble
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
58/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB115
Petite gnralisation
u La composition d'une page HTML est dcrite plusgnralement par :
#!/usr/local/bin/perl
$title = ;$body = ;
print "Content-type: text/html
$title $body";
#!/usr/local/bin/perl
$title = ;$body = ;
print "Content-type: text/html
$title $body";
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB116
Les constantes
u Les constantes sont utilises soit pour initialiser desvariables, soit pour participer l'valuation d'uneexpression.
u
Nombres :18 -14 3.14 0.6e-3 0x1E
u Portions de texte :
'bonjour tout le monde.' "il est $b l'heure."
u Listes (indiable comme un tableau) :
(18, 'est un divisible par', 2, 3, ' et ', 6)
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
59/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB117
Affectation
u Comme toutes les oprations Perl, l'affectationprsente quelques magies.
$i = 3; comme d'habitude.
$i = '0001'; est intressant si on veut produire un compteurconservant 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 dcouvrir.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB118
Quelques oprationsscalaires
$a = 1 + 2; addition
$a = 2 - 4; soustraction
$a = 5 * 6; multiplication
$a = 7 / 2; division
$a = 9 ** 3.2; puissance (pas forcment entire)
$a = 5 % 2; reste euclidien
++$a; pr-incrmentation
$a++; post-incrmentation
$a = 'bonjour '.'tout le monde'; concatnation
$a = 'je bgaie ' x 8; rptition
$a += 3; quivalent $a = $a + 3
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
60/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB119
Oprations sur les tableaux
@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'.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB120
Fonctions
u Comme dans tous les langagesde programmation, la fonctionest un outil de structurationpuissant.
uDclaration (sub) et appel (&)d'une fonction (Perlne connatpas le ll ) :
u Les arguments sont passsdans le tableau implicite @_.
u La valeur rendue est celle de ladernire expression value.
sub moyenne { (@_[0] + @_[1]) / 2;}
print &moyenne(1,2);
sub moyenne {
(@_[0] + @_[1]) / 2;}
print &moyenne(1,2);
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
61/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB121
Manipulation des fichiers
u Voici un programme lmentaire qui manipule unfichier (pas trop gros) :
#!/usr/local/bin/perl
open( FICHIER, 'foo.txt'); # ouverture* du fichier et# cration de son descripteur
@lignes = ; # lecture du fichier l igne# par l igneet construction# d'un tableau de ces lignes
close(FICHIER); # fermeture du fichier print @lignes; # et affichage
#!/usr/local/bin/perl
open( FICHIER, 'foo.txt'); # ouverture* du fichier et# cration de son descripteur
@lignes = ; # lecture du fichier l igne# par l igneet construction# d'un tableau de ces lignes
close(FICHIER); # fermeture du fichier print @lignes; # et affichage
* les fichiers STDIN, STDOUT et STDERR sont ouverts a priori.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB122
Variables d'environnement
u Les variables d'environnement sont empaquetesdans le tableau associatif prdfini %ENV.
u On y accde par leur nom :
$ENV{'REQUEST_METHOD'}
$ENV{'SCRIPT_NAME'}
$ENV{'PATH_INFO'}
$ENV{'QUERY_STRING'}
$ENV{'CONTENT_LENGTH'}
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
62/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB123
On entre dans le vif du sujet
u On note 3 nouveauts :l la structure de contrle :
if
{}
else {}
l l'oprateur de comparaison : eq
l la fonction de lecture d'un bloc de caractres dans un fichier :read().
...
if ($ENV{'REQUEST_METHOD'} eq "POST") { read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'));} else { $buffer = $ENV{'QUERY_STRING'};}...
...
if ($ENV{'REQUEST_METHOD'} eq "POST") { read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'));} else { $buffer = $ENV{'QUERY_STRING'};}...
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB124
Manipulation des chanes
u L'exemple prcdent laisse en suspens deuxproblmes :
l comment tre sr que la chane "POST" est bien en majuscules ?ou plus gnralement compose de caractres de la mme casse.
l Comment analyser le contenu de la variable $buffer qui contienttypiquement le rsultat de la saisie d'un formulaire (cf. diapo 104).
u La manipulation des chanes de caractres en Perlutilise (comme beaucoup d'outils Unix tel regexp) desmotifs (patterns) dcrits l'aide d'express ionsrgulires.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
63/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB125
Expressions rgulires
u Une expression rgulire est la description d'un motiftextuel l'aide d'une f o rmu leplace entre / et /.
u Une expression rgulire est construite partir :
l de constantes : ca ractres(signes typographiques),
l d'oprateurs : dnots par des car ac tre s spci au xdontl'interprtation dpend du contexte.
uLe coin du thoricien : Les expressions rgulires ontt introduites pour dcrire les langages rguliers(T1) et leurs analyseurs qui sont des machines tatsfinis.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB126
Classes de caractres
u Une classe de caractres est l'ensemble descaractres qui peuvent apparatre en tel ou telemplacement d'un motif.
u
Une classe de caractres est dfinie entre [ et ].u Dans la dfinition d'une classe de caractres, les
signe - et ^ (plac en tte) signifient "entre" et "sauf".
u Exemples :
[abc] les 3 caractres a, b et c
[a-zA-Z0-9] n'importe quelle lettre ou chiffre
[^abc] sauf les caractres a, b ou c
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
64/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB127
Caractres spciaux
u Certains caractres sont spciaux car on ne peut pasles taper au clavier (ils ont un effet immdiat),exemples :
l \n nouvelle ligne
l \t tabulation
u D'autres servent de raccourcis syntaxique, exemples :
l
. : n'importe quel caractre = [^\n]l \w : un caractre alpha-numrique = [a-zA-Z0-9]
l \W : sauf un caractre alpha-numrique = [ 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]
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB128
Concatnation, option etrptition
u L'opration de base est la concatnation dnote parla simple juxtaposition.
/[A-Z][0-9]/ dnote des motifs de la forme B3, Z8,
u Un caractre peut tre optionnel dans un motif :
/pommes?/ dnote le mot "pomme" ventuellement au pluriel.
/par(t|c)/ dnote les mots "part" ou "parc"
u Un caractre peut tre dupliqu dans un motif :
/b+/ dnote des motifs de la forme "b", "bb", "bbb", "bbbb",
/b*/ = (b+)?
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
65/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB129
Parenthsage et
chappement
u Pour dfinir ce sur quoi porte une opration, il peuttre ncessaire de parenthser certains termes del'expression :
/(bon)+/ dnote des motifs de la forme "bon", "bonbon","bonbonbon",
u Pour introduire un caractre qui joue normalement lerle d'un oprateur, il faut le faire prcder de \ :
\| \[ \] \( \) \* \+
u Il est toujours possible d'introduire un caractrespcial par son code ASCII :
\x82 dnote (sur PC sous DOS) le caractre ""
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB130
Appariement
u Une chane est apparie un motif si on peut ytrouver ce motif.
u La relation d'appariement est note =~
u Exemples :'lepetit chat' =~ /le/ vaut "vrai"
'le petit chat' =~ /Le/ vaut "faux"
'un bon saucisson' =~ /s+/ vaut "vrai"
u Cette relation d'appariement sera souvent utilise entant que prdicat dans une structure "if () else {...}"
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
66/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB131
Contexte de l'appariement
u L'appariement sur une partie du motif peut treimpos en dbut de texte ou en fin de texte.
^ le terme qui suit est confront au dbut du texte
$ le terme qui prcde est confront la fin du texte.
u Exemples :
/^(bon)(.*)s$/ s'apparie avec tous les textes qui commencent par"bon" et qui se terminent par la lettre "s".
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB132
Substitution
u Une express ion de subs t i tu t ionpermet de remplacer,dans un texte, un motif par un autre, elle vaut lenombre des substitutions effectues.
u
Une expression de substitution est de la forme :s///
u Exemples :
s/saucisse/banane/remplace la premire occurrence du mot "saucisse" par le mot"banane".
s/saucisse/saucisson/gremplace toutes les occurrences du mot "saucisse" par le mot"banane".
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
67/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB133
Utilisations de la substitution
(1)
u Modification partielle d'une portion de texte :
u Que devient la variable $texte ?
$texte = "une bonne saucisse sche estune saucisse qui a bien sch.";
$texte =~ s/saucisse/banane/;
$texte = "une bonne saucisse sche estune saucisse qui a bien sch.";
$texte =~ s/saucisse/banane/;
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB134
Utilisations de la substitution(2)
u Modification globale d'une portion de texte :
u Que devient la variable $texte ?
$texte = "
une bonne saucisse sche estune saucisse qui a bien sch.";
$texte =~ s/saucisse/banane/g;
$texte = "une bonne saucisse sche estune saucisse qui a bien sch.";
$texte =~ s/saucisse/banane/g;
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
68/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB135
Utilisations de la substitution
(3)
u Sauf indication, la substitution porte sur la variableprdfinie* $_.
u Modification d'une portion de texte :
u Que deviennent les variables $_ et $ns ?
$_ = "une bonne saucisse sche estune saucisse qui a bien sch.";
$ns = s/saucisse/banane/g;
$_ = "une bonne saucisse sche estune saucisse qui a bien sch.";
$ns = s/saucisse/banane/g;
* ces variables prdfinies introduisent quelques magies dans Perl. Nousen verrons quelques autres.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB136
Traduction
u Une express ion de t raduct ionpermet de remplacer,dans un texte, des caractres par d'autres caractres; elle vaut le nombre des traductions effectues.
u
Une expression de traduction est de la forme :tr///
u Exemples :
tr/a-z/A-Z/remplace toutes les lettres minuscules par les majusculescorrespondantes. Toutes ?
tr/a-z/b-za/utilise le code de Csar pour crypter un message.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
69/117
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
70/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB139
Mmoire de l'appariement
(1)
u Un motif d'appariement peut tre scind en plusieurssous-motifs par parenthsage :
/^(.)(.*)(.)$/ dfinit 3 sous-motifs
u Lorsque ce motif est appari avec succs uneportion de texte, ce qui s'est appari chacun dessous-motifs est conserv dans des variables
nommes \1, \2, dans la dfinition de la substitutionet $1, $2, dans le reste du programme.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB140
Mmoire de l'appariement(2)
u Exemple :
/^(.)(.*)(.)$/ confront au texte "bonne 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 nuit les petits";
s/^(.)(.*)(.)$/\3\2\1/;
print "$1 $2 $3";
$_ = "bonne nuit les petits";
s/^(.)(.*)(.)$/\3\2\1/;
print "$1 $2 $3";
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
71/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB141
On retourne dans le vif du
sujet
u A prsent, peu importe que le nom de la mthode soitcrit en minuscule ou en majuscule.
u Il ne reste plus qu' exploiter le contenu de la variable$buffer.
$ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/;
if ($ENV{'REQUEST_METHOD'} eq "POST") { read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'));} else { $buffer = $ENV{'QUERY_STRING'};}...
$ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/;
if ($ENV{'REQUEST_METHOD'} eq "POST") { read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'));} else {
$buffer = $ENV{'QUERY_STRING'};}...
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB142
Deux fonctions trs utiles
u Trs frquemment il est ncessaire d'liminer ledernier caractre d'une portion de texte (typiquement\n) :
chop ($texte) limine le dernier caractre du texte contenudans $texte.
chop limine le dernier caractre du texte contenudans $_.
u Encore plus frquemment il est ncessaire detrononner une portion de texte (typiquement pouranalyser une QUERY_STRING) :
split(,$texte) rend le tableau constitu des "tronons"dcoups dans $texte, dfinissant lesparateur.
split() comme ci-dessus sur la variable $_.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
72/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB143
Un trononnage utile
$buffer = " liquide=eau&ufs=on&...&nom=Mickey+Mouse"
@paires = split(/&/,$buffer);...
$buffer = " liquide=eau&ufs=on&...&nom=Mickey+Mouse"
@paires = split(/&/,$buffer);...
u Le tableau contient, maintenant, des termes de la
forme :$paires[0] = "liquide=eau"$paires[1] = "uf=on"
$paires[..] = "nom=Mickey+Mouse"
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB144
Pour aller plus loin
u Quatre nouveauts :
l la structure d'itration
foreach () {}
l la fonction hex()
l la fonction pack()
l l'option "e" dans "s///ge"
foreach $paire (@paires) {
($nom, $valeur) = split(/=/, $paire); $valeur =~ tr/+/ /; $valeur =~ s/%(..)/pack("C", hex($1))/eg;
...}
foreach $paire (@paires) {
($nom, $valeur) = split(/=/, $paire); $valeur =~ tr/+/ /; $valeur =~ s/%(..)/pack("C", hex($1))/eg;
...}
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
73/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB145
Structure d'itration en Perl
u On trouve les structure d'itration suivantes :
foreach $var (@tab) {}
for(;;) {}
while (
) {}
do {} while(
)
u Les prdicats sont construits partir ds relationssuivantes :
== galit numrique
!= diffrence numrique
eq galit lexicographique
ne diffrence lexicographique
=~ appariement
!~ dsappariement
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB146
Expressions logiques
u Les expressions logiques sont construites partirdes connecteurs suivants :
! ngation logique (pas)
&& conjonction logique (et)
|| disjonction logique (ou)
u Ces connecteurs sont valus en mode paresseux. Le2meoprande n'est valu qu'en cas de besoin :
&& le 2meoprande n'est valu que si le 1eroprande s'value "vrai",
|| le 2meoprande n'est valu que si le 1eroprande s'value "faux".
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
74/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB147
Fonction hex() & pack()
u Fonction hex :
hex ($texte) rend la valeur entire correspondant la chane $textesuppose reprsenter un nombre exprim en notationhexadcimale.
hex comme ci-dessus sur la variable $_.
u Fonction pack :
pack(" C",)
rend la chane contenant le caractres dont le codeASCII est la valeur de l'expression.
u La fonction pack() prsente de trs nombreusesoptions toutes plus obscures les unes que les autres ;donc consultez la documentation.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB148
L'option "e" de lasubstitution
u L'option "e" indique que le motif de remplacement estle rsultat de l'valuation d'une expression Perl.
u Exemple :
s/%(..)/pack("C", hex($1))/eg
Expression dont l'valuationproduit le motif de substitution
Option d'valuation
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
75/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB149
Finalement, une fonction
bien utile
sub read_input { local ($buffer, @paires, $paire, $nom, $valeur, %FORM); $ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/; if ($ENV{'REQUEST_METHOD') eq "POST") { read(STDIN, $buffer, $ENV{'CONTENT_LENGTH')); } else { $buffer = $ENV{'QUERY_STRING'}; } @paires = split(/&/, $buffer); foreach $paire (@paires) {
($nom, $value) = split(/=/, $paire); $valeur =~ tr/+/ /; $valeur =~ s/%(..)/pack("C", hex($1))/eg; $FORM{$nom} = $valeur; } %FORM;}
sub read_input { local ($buffer, @paires, $paire, $nom, $valeur, %FORM); $ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/; if ($ENV{'REQUEST_METHOD') eq "POST") { read(STDIN, $buffer, $ENV{'CONTENT_LENGTH')); } else { $buffer = $ENV{'QUERY_STRING'}; } @paires = split(/&/, $buffer); foreach $paire (@paires) {
($nom, $value) = split(/=/, $paire); $valeur =~ tr/+/ /; $valeur =~ s/%(..)/pack("C", hex($1))/eg; $FORM{$nom} = $valeur; } %FORM;}
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB150
Quelques considrations
u Il est souvent ncessaire de tester un script CGI horsconnexion (conomies de tlphone).
u Nous allons donc voir comment crire deux petits
scripts Perlde test pour :l une communication selon la mthode GET,
l une communication selon la mthode POST.
u Ces deux petits scripts peuvent tre utiliss aussibien dans un contexte Unix que dans un contexteWindows 95 ou NT.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
76/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB151
Test de la mthode GET
$message = 'liquide=lait&recipient=bol&...';
$ENV{'REQUEST_METHOD'} = 'GET';$ENV{'QUERY_STRING'} = $message;
system('perl script.pl');
$message = 'liquide=lait&recipient=bol&...';
$ENV{'REQUEST_METHOD'} = 'GET';$ENV{'QUERY_STRING'} = $message;
system('perl script.pl');
Message transmettre tel qu'il viendraitd'un formulaire.
On utilise la commande systemqui creun processus fils qui hrite des
variables d'environnement.
Script tester
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB152
Test de la mthode POST
$message = 'liquide=lait&recipient=bol&...';$longueur = length($message);
$ENV{'REQUEST_METHOD'} = 'POST';$ENV{'CONTENT_LENGTH'} = $longueur;
open(CGI,'|perl script.pl');print CGI $message;close CGI;
$message = 'liquide=lait&recipient=bol&...';$longueur = length($message);
$ENV{'REQUEST_METHOD'} = 'POST';$ENV{'CONTENT_LENGTH'} = $longueur;
open(CGI,'|perl script.pl');print CGI $message;close CGI;
Message transmettre tel qu'il viendraitd'un formulaire.
Script tester
On utilise l'ouverture d'un p ipequipermet au script test d'hriter la foisdes variables d'environnements et de
recevoir le message via STDIN.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
77/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB153
Un petit exemple de script
Sub read_input {
}
%formulaire = &read_input();
print "liquide : $formulaire{'liquide'}recipient : $formulaire{'recipient'}nom : $formulaire{'nom'}";
Sub read_input {
}
%formulaire = &read_input();
print "liquide : $formulaire{'liquide'}recipient : $formulaire{'recipient'}nom : $formulaire{'nom'}";
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB154
Rle des scripts CGI
u Les scripts CGI interviennent trs souvent dans lecadre d'un site Web :l Site de recherche : gestion d'une base de donne,
l Site de commerce lectronique : parcours du catalogue,construction du "panier", laboration de la facture, dclenchementdu paiement,
l Dispositifs varis :
compteurs d'accs,
livre d'or (guestbook),
l Scripts d'analyse du traffic :
pays, domaines, machines d'origine,
navigateur utilis,
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
78/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB155
Deux exemples un peu
ralistes
u Nous allons en terminer sur notre prsentation dulangage Perlpar les deux exemples suivants :l petit moteur de recherche : utilisation intensive du traitement des
chanes de caractres de Perl,
l constructeur de "paniers" : utilisation systmatique des "magiccookies".
u Les "magic cookies" ou plus simplement "cookies"
est une technique introduite par Netscape ( partir dela version 3.0 de son navigateur) pour pallier aucomportement purement combinatoire du protocoleHTTP.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB156
Un petit moteur de recherche
u Nous nous contenterons d'une recherche par motsc lhirarch iss, non optimise, dans un domainebien cibl :
Recherche gast ronomiqu eu Nous n'en verrons que les grandes lignes (les dtails
seront dvelopps sur machine) :
l structure du fichier des informations,
l formulaire de rfrencement,
l formulaire d'interrogation,
l moteur de recherche,
l prsentation des rsultats de la recherche.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
79/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB157
Le fichier des informations
u Nous nous contenterons d'un fichier unique danslequel chaque enregistrement correspond une ligne.
u Les enregistrements seront rangs dans l'ordre o ilsauront t introduits.
u Ce fichier s'appellera BASE.
uCette structure peut suffire pour de petites bases dedonnes, elle conduirait, autrement, des temps deconsultation prohibitifs.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB158
Un enregistrement
u Un enregistrement est constitu de champs-cl et dechamps-information spars par le signe "|" ; ils sontspars entre eux par le signe ":".
u
Champs cl (dans cet ordre) :l ville,
l spcialit : locales, asiatiques, viandes, poissons,
l catgorie de prix : 50-100, 100-200, 200-300, >300.
u Champs information (dans cet ordre) :
l photo (fichier JPEG),
l nom, sous titre,
l adresse,
l prix1, menu1, prix2, menu2.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
80/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB159
Pages associes
u Deux pages sont ncessaires :
l formulaire d'interrogation pour rechercher le restaurant qui nousconvient,
l formulaire de rfrencement pour permettre un restaurateur derfrencer son restaurant dans la base.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB160
Formulaire d'interrogation
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
81/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB161
Formulaire de rfrencement
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB162
Modles de Page associes
u Un modle de page est ncessaire :
l modle de prsentation pour afficher le rsultat d'une recherche,
u Le modle de prsentation ne constitue pas une page proprement parler, il sert simplement de modle lapage que le script d'interrogation doit produire.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
82/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB163
Modle de prsentation
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB164
Format de l'enregistrement
u L'enregistrement est sur une seule ligne telle que :
ville:specialite:categorie|photo:nom:soustitre:adresse:prix1:menu1:prix2:menu2ville:specialite:categorie|photo:nom:soustitre:adresse:prix1:menu1:prix2:menu2
Le champ photocorrespond au nom du fichierJPEG, la photo sera parvenue par un autre canalque celui du formulaire (La poste par exemple).
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
83/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB165
Les repres des formulaires
u Les diffrentes champs de l'enregistrementcorrespondent aux entits de formulaire ayant lesnoms suivants (sauf photo) :
l ville : ville - cl n1
l specialite : spcialit - cl n2
l categorie : catgorie - cl n3
l nom : nom du restaurant - information
l soustitre : complment de nom - informationl adresse : adresse - information
l prix1 : prix du menu n1 - information
l menu1 : menu n1 - information
l prix2 : prix du menu n2 - information
l menu2 : menu n2 - information
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB166
Les repres des scripts
u Les diffrentes champs de l'enregistrementcorrespondent aux entits de prsentation suivantes :
l ville : $ville
l specialite : $specialite
l categorie : $categoriel photo : $photo
l nom : $nom
l soustitre : $soustitre
l adresse : $adresse
l prix1 : $prix1
l menu1 : @menu1
l prix2 : $prix2
l menu2 : @menu2
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
84/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB167
Script d'interrogation :
structure
u Le script d'interrogation comporte trois partiesdcrites par trois fonctions :
%formulaire = &read_input();
construction du tableau associatif correspondant au formulaired'interrogation.
@resultats = &interrogation($cle1,$cle2,$cle3);
interrogation du fichier des donnes et construction du tableau
de la partie information des enregistrements trouvs.do page(@resultats);
construction de la page de prsentation.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB168
Script d'interrogation :source
#!/usr/local/bin/perl
sub read_input {...}sub interrogation {...}
sub page {...}sub compose_motif {...}sub compose_menu {...}
%formulaire = &read_input();$cle1 = $formulaire{'ville'};$cle2 = $formulaire{'specialite'};$cle3 = $formulaire{'categorie'};@resultats = &interrogation($cle1, $cle2, $cle3);do page(@resultats);
#!/usr/local/bin/perl
sub read_input {...}sub interrogation {...}
sub page {...}sub compose_motif {...}sub compose_menu {...}
%formulaire = &read_input();$cle1 = $formulaire{'ville'};$cle2 = $formulaire{'specialite'};$cle3 = $formulaire{'categorie'};@resultats = &interrogation($cle1, $cle2, $cle3);do page(@resultats);
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
85/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB169
Fonction d'interrogation
sub interrogation { local ($cle1, $cle2, $cle3) = @_; open(BASE,"
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
86/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB171
Fonction de composition de
la page
sub page {print "
Content-type: text/html
Rsultats";
foreach $resultat (@_) {
print "";do compose_motif($resultat);
print "";}print "";
}
sub page {print "
Content-type: text/html
Rsultats";
foreach $resultat (@_) {
print "";do compose_motif($resultat);
print "";}print "";
}
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB172
Fonction de composition dumotif
sub compose_motif {local ($photo,$nom,$soustitre,$adresse,
$prix1,$menu1,$prix2,$menu2)= split(/:/, @_[0]);
print "
$nom
$soustitre$adresseMenu 1 : $prix1 F";
do compose_menu(split(/\./,$menu1));print "";
..
print "";}
sub compose_motif {local ($photo,$nom,$soustitre,$adresse,
$prix1,$menu1,$prix2,$menu2)= split(/:/, @_[0]);
print "
$nom
$soustitre$adresseMenu 1 : $prix1 F";
do compose_menu(split(/\./,$menu1));print "";
..
print "";}
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
87/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB173
Fonction de composition des
menus
sub compose_menu {print "";
foreach $item (@_) {print "
$item
";
}print "";
}
sub compose_menu {print "";
foreach $item (@_) {print "
$item
";
}print "";
}
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB174
Script de rfrencement :source
#!/usr/local/bin/perl
sub read_input {...}sub referencement {...}
do referencement(%formulaire);
#!/usr/local/bin/perl
sub read_input {...}sub referencement {...}
do referencement(%formulaire);
u Cette version est minimale, on peut, bien sr, lacomplter :
l On pourrait, par exemple, renvoyer une page analogue la page deprsentation,
l ...
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
88/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB175
Fonction de rfrencement
u Voici une version lmentaire de la fonction derfrencement.
u Il reste quelques petits problmes rsoudre :l traitement des caractres spciaux,
l permettre le drfrencement,
l viter les drfrencements "sauvages" ...
sub referencement { local ($ville, $specialite, $categorie, ...) =
(@_[0]){'ville'}, @_[0]){'specialite'}, ); open(BASE,">>base.rst") || die 'fichier inconnu'; print BASE "$ville:$specialite: |$photo: \n"; close BASE;}
sub referencement { local ($ville, $specialite, $categorie, ...) =
(@_[0]){'ville'}, @_[0]){'specialite'}, ); open(BASE,">>base.rst") || die 'fichier inconnu'; print BASE "$ville:$specialite: |$photo: \n"; close BASE;}
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB176
Le "panier de la mnagre"
u Lorsqu'on navigue sur un site, en soumettant desformulaires diverses reprises, le serveur ne peutpas conserver chez lui la trace de ce qui a t saisi ; i ln'a aucun m oyen d ' ident i f ier qui l 'appel le car les
adresses IP sont presqu e toujours f lo t tantes.u Pour ce faire, le serveur peut :
l Provoquer l'criture d'une information de son choix dans un fichierde la machine client.
l Relire l'information qu'il a fait crire.
u Ces portions d'informations s'appellent des "magiccookies".
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
89/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB177
Maintenir un "tat"
u L'utilisation de cookies n'est pas la seule techniquepossible.
u On peut, galement, utiliser les champs "cachs" desformulaires :
u Ces champs ne sont pas affichs, ils permettent au
serveur d'inclure dans un formulaire une informationqui lui sera retransmise.
u On peut ainsi crer des formulaires " tiroirs".
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB178
Mise en place d'un cookie
u Un cookie est une portion de l'en-tte du documentrenvoy par le serveur (script CGI) et reu par lenavigateur.
u
Le cookie est rang dans un fichier cookies.txt par lenavigateur Netscape, dans un rpertoire Cookies parInternet Explorer.
Content-type: text/htmlSet-Cookie: =; expires=;
path=; domain=;secure
Content-type: text/htmlSet-Cookie: =; expires=;
path=; domain=;secure
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
90/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB179
Paramtres des cookies (1)
u =obligatoire chanes de caractres (sans point-virgule, virgule ouespace qui peuvent tre URL-encods : %..) dfinissant le nom et lavaleur du cookie.
compte=1
u expires=facultatif indique la date partir de laquelle le cookie doit tre
dtruit.Si ce paramtre n'est pas fourni, le cookie est dtruit au moment oon q ui t te le nav igateur.
expires=Tuesday,19-May-1998 18:35:40 GMT
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB180
Paramtres des cookies (2)
u domain=facultatif nom du domaine de la machine vers lequel le cookie peuttre renvoy. Ce nom doit comporter au moins 2 points ".", Lacomparaison est effectue par la fin.
domain=.unice.fr
Ce nom de domaine correspond aux machines verdon.unice;fr,hermes.unice.fr, i3S.unice.fr
Si ce paramtre n'est pas fourni, le cookie ne peut tre renvoy qu ' lamach inequi l'a mis en place.
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
91/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB181
Paramtres des cookies (3)
u path=facultatif tte du chemin qui doit tre indiqu dans l'URL requisepour dclencher l'envoi du cookie.
path=/~jdem
Cette tte de chemin correspond au rpertoire ~jdem ainsi qu' tousses sous-rpertoires.
Si ce paramtre n'est pas fourni, le cookie ne peut tre renvoy qu'ensuiv ant exactem ent le mme ch eminque celui de la requte l'originede l'installation du cookie.
u secure
facultatif le cookie ne peut tre transmis qu' un serveur scur is.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB182
Renvoi d'un cookie
u Lorsqu'une URL est requise, le navigateur recherchetous les cookies concerns et renvoi vers le serveurun message de la forme :
Cookie:=; =;
u Cette chane de caractres (sans "Cookie:") estaccessible dans la variable d'environnementHTTP_COOKIE
u Le traitement de HTTP_COOKIE est analogue celuide QUERY_STRING (cf. diapo 149).
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
92/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB183
De plus ...
u On peut envoyer plusieurs cookie dans le mme en-tte.
u Un client peut toujours supprimer un cookie avantque le navigateur ne le dtruise en ditant le fichiercookies.txt.
u Pour supprimer un cookie, il suffit de renvoyer uncookie de mme dfinition qui expire dans le pass.
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.
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB184
Exemple de transaction
Set-cookie: client=Donald; path=/; expires=Monday,25-May-1998 23:59:59 GMT
Cookie: client=Donald; legumes=carottes
Client Serveur
Cookie: client=Donald
ServeurClient
Set-cookie: legumes=carottes; path=/
Client Serveur
ServeurClient
Set-cookie: laitages=yaourts; path=/
Client Serveur
Cookie: client=Donald; legumes=carottes; laitages=yaourts
ServeurClient
-
7/23/2019 (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal - [Informatique][Web][Develo
93/117
Jean DEMA RTINI 14.02.00
Concept ion d'un s i te WEB185
Quelques rfrences
u La dfinition des cookies est en pleine volution. Pourplus d'informations, on peut consulter :
http://home.netscape.com/newsref/std/cookie_spec.html
bonne introduction (par les inventeurs) l 'utilisation des cookies.
http://www.illuminatus.com/cookie.fcgi
bonne rflexion sur les risques encourus (trs peu) et l'utilisation
des cookies.