(eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal -...

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


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.


2/117


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


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


3/117


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.


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


4/117


Documents interactifs

u Quelques constatations :

l un cran est petit (en gnral),

l lire un cran est pnible,

l changer d'cran est rapide.

u Certains documents gagnent tre interactifs :

l notices techniques,

l documents de prsentation,

l documentations commerciales.

u Certains documents ne peuvent pas tre interactifs :

l documents de rflexion.


Un journal, un site Web

u Un journal est conu autour de sa 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.


5/117

Jean DEMA RTINI 14.02.00


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.



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.


6/117



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/



Architecture de fichiers Web

/

usr bin

local

etc

htdocs

...

...

...

...

espace du serveur

racine du serveur

racine de l'hte


7/117



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.



World Wide Web

domainedomaine

Serveur"proxy"

Serveurde noms

(DNS)

Serveurde pages

Client


8/117



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.



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.


9/117



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.



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.


10/117



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.



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.


11/117



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.



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


12/117



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 :

...

...

...

...



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.


13/117



Ma premire page HTML

dfinition du caractre ""

Ma premire page

Ma premire page Web.

Ma premire page




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.


14/117


15/117



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 :



Ma premire page


Ma premire page


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 :


16/117



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



Ma deuxime page HTML

Ma premire page


Un deuxime paragraphe permetde la meubler un peu.

Ma premire page


Un deuxime paragraphe permetde la meubler un peu.

u On remarque les indentations qui facilitent la lecture.


17/117



Que voici

Les paragraphes



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.


18/117



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.



...Titres de paragraphes


19/117



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



...Styles de paragraphes


20/117



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



Pour voir ceci...


21/117



Ou bien cela !



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


22/117



Ce qui donne ceci...



Ou bien cela


23/117



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.



Ce qui donne


24/117



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.



Prsentation Netscape 3.0


25/117



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



Listes puces

Un bon pot-au-feu ncessite :

des poireaux,

des carottes,

des navets.


des poireaux,

des carottes,

des navets.


des poireaux,

des carottes,

des navets.


des poireaux,

des carottes,

des navets.


26/117



Prsentes ainsi



Les listes numrotes


des poireaux,

des carottes,

des navets.


des poireaux,

des carottes,

des navets.


des poireaux,

des carottes,

des navets.


des poireaux,

des carottes,

des navets.


27/117



Prsentes ainsi



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.


28/117



Prsentes ainsi



Ou ainsi


29/117



Listes imbriques

u Des listes de diffrentes natures peuvent treimbriques


des poireaux :

des petits,des moyens,

des gros.

des carottes,

des navets.


des poireaux :

des petits,

des moyens,

des gros.

des carottes,

des navets.



Ce qui donne


30/117



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 )



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.


31/117



Aspect visuel



Paramtres d'inclusion

u Interprtation des paramtres d'inclusion :

width

height

hspace

vspace


32/117



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.



Effets de prsentation


33/117



Fond d'cran

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


34/117



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



Schma de liens externessimples

...Page 1...

...Page 2...

...Page 3...

...

...Page 1...

...Page 2...

...Page 3...

...

...

...

p1.html

...

...

p2.html

...

...

p3.html

index.html


35/117



Schma de liens internes

...Page 1...

...

...Page 2...

...

...Page 3...

...

...

...

...

...

...

...

...Page 1...

...

...Page 2...

...

...Page 3...

...

...

...

...

...

...

...



Liens doubles

u Les liens doubles dfinissent la fois un point dedpart et un point d'arrive.

...Page 1...

...

...

Retour...

...

...

...Page 1...

...

...

Retour...

...

...


36/117



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 ?



Qui s'affiche


37/117



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.



Un tableau lmentaire

CAPTION

HEADING CELLS

CELLS


38/117



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.



Un tableau lmentaire 4x4

.........

............

............

.........

.........

............ ............

.........


39/117



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.



Paramtres de

CELLSPACINGCELLPADDING BORDER


40/117



Paramtres de

ALIGN = LEFT| CENTER | RIGHT

VALIGN = TOP | BOTTOM



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


41/117



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



Une belle table des matires


42/117



Une belle page



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.


43/117



Carte des zones sensibles



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.


44/117



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.



Schma de dialogue HTML

Navigateur ServeurWeb

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

Content-type: text/html



45/117



Schma de dialogue CGI

NavigateurServeur

Web

http://../xxx.cgi...

NavigateurServeur

Web

http://../xxx.cgi...http://../xxx.cgi...



ProgrammeCGI



QUERY_STRING = ...QUERY_STRING = ...



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 :


46/117



Exemple 1

Pour faire une bonne mayonnai eau, huile, lait

Pour faire une bonne mayonnai eau, huile, lait



Exemple 2

...

Il faut aussi :

oeufs, sel, moutarde,

confiture

...

Il faut aussi :

oeufs, sel, moutarde,

confiture


47/117



Exemple 3

...

On utilise : assiette bol bouteille

casserole marmite

...

On utilise : assiette bol bouteille

casserole marmite



Exemple 4

...

Dcrivez, en quelques lignes les principales qualits dittiques de

la mayonnaise :

...

Dcrivez, en quelques lignes les principales qualits dittiques de

la mayonnaise :


48/117



Exemple 5

...

Donnez votre nom et on vous crira

...

Donnez votre nom et on vous crira



Et pour finir

...

...


49/117



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.



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


50/117



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.



Entres - Sorties CGI

Programme CGIProgramme CGI"stdin" stdout



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


51/117



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 :



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.


52/117



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.



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


53/117



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.



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/


54/117



Un programme Per l

simplissime

#!/usr/local/bin/perl

print "Content-type: text/html

Premire pagescriptes

Bonjour tous.

";



Premire pagescriptes

Bonjour tous.

";

u Bien que trs simple, ce premier programme nousapprend dj plein de choses.



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 ?


55/117



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 :


u C'est cette indication qui permet de considrer un telfichier comme un programme excutable standard.



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


56/117



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"



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 :


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

...


57/117



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.



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


58/117



Petite gnralisation

u La composition d'une page HTML est dcrite plusgnralement par :


$title = ;$body = ;


$title $body";


$title = ;$body = ;


$title $body";



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)


59/117



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.



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


60/117



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



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);


61/117



Manipulation des fichiers

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


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


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.



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


62/117



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

...




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.


63/117



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.



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


64/117



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]



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+)?


65/117



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 ""



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 {...}"


66/117



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



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


67/117



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 =~ s/saucisse/banane/;



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 =~ s/saucisse/banane/g;


68/117



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.



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.


69/117


70/117



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.



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";


71/117



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/;


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



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 $_.


72/117



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"



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;

...}


73/117



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



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


74/117



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.



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


75/117



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;}



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.


76/117



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



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.


77/117



Un petit exemple de script

Sub read_input {

}

%formulaire = &read_input();

print "liquide : $formulaire{'liquide'}recipient : $formulaire{'recipient'}nom : $formulaire{'nom'}";

Sub read_input {

}


print "liquide : $formulaire{'liquide'}recipient : $formulaire{'recipient'}nom : $formulaire{'nom'}";



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,


78/117



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.



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.


79/117



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.



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.


80/117



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.



Formulaire d'interrogation


81/117



Formulaire de rfrencement



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.


82/117



Modle de prsentation



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


83/117



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



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


84/117



Script d'interrogation :

structure

u Le script d'interrogation comporte trois partiesdcrites par trois fonctions :


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.



Script d'interrogation :source


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);


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);


85/117



Fonction d'interrogation

sub interrogation { local ($cle1, $cle2, $cle3) = @_; open(BASE,"


86/117



Fonction de composition de

la page

sub page {print "


Rsultats";

foreach $resultat (@_) {

print "";do compose_motif($resultat);

print "";}print "";

}

sub page {print "


Rsultats";

foreach $resultat (@_) {

print "";do compose_motif($resultat);

print "";}print "";

}



Fonction de composition dumotif

sub compose_motif {local ($photo,$nom,$soustitre,$adresse,

$prix1,$menu1,$prix2,$menu2)= split(/:/, @_[0]);

print "

$nom
$soustitre$adresse

Menu 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$adresse

Menu 1 : $prix1 F";

do compose_menu(split(/\./,$menu1));print "";

..

print "";}


87/117



Fonction de composition des

menus

sub compose_menu {print "";

foreach $item (@_) {print "

$item

";

}print "";

}

sub compose_menu {print "";

foreach $item (@_) {print "

$item

";

}print "";

}



Script de rfrencement :source


sub read_input {...}sub referencement {...}

do referencement(%formulaire);


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


88/117



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;}



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


89/117



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



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


90/117



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




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.


91/117




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.



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


92/117



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.



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


93/117



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.

(eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal -...

Documents

Transcript of (eBook - PDF) Guide de Confreption D'Un Site Web - 147 Pages - Pas de Pub Paypal -...