[PDF] Programmation web coté client concepts et explications | Cours Informatique

(1)

Programmation Web

Thierry Hamon

Bureau H202 Institut Galil ´ee - Universit ´e Paris 13

& LIMSI-CNRS [email protected]

(2)

Pr ´esentation du cours

Objectifs de l’enseignement : Acqu ´erir les notions de base en programmation Web

Manipulation de documents Web

Mise en place de formulaires et utilisation du Javascript/AJAX/JQuery

Programmation en PHP et utilisation d’une base de donn ´ees

´

Egalement : connaˆıtre les sources d’informations compl ´ementaires

R ´epartition des enseignements : 4 s ´eances de cours/TP de 3h ou 4h30

Devoir d évelopp é au cours des TPs autour de la gestion de la base de donn ées Auto-Ecole

(3)

Rappels Web

HTML

HyperText Markup Language

Langage de structuration d’un texte `a l’aide de balises (d ´efinition logique d’un document)

Remarque : Tout document doit pouvoir s’afficher dans n’importe quel navigateur, mais l’affichage d ´epend de l’interpr ´etation du navigateur

Probl `emes de syntaxe et validation

HTML 4.01 : syntaxe formelle et pr ´ecise (permet une validation automatique)

Doit ˆetre respect ´ee par tout document HTML

En pratique, peu de documents valides (pas de respect de la norme, m ˆeme par les ´editeurs)

Navigateurs tol ´erants aux erreurs de syntaxe

(4)

Rappels Web

XML

eXtensible Markup Language

Langage de description de documents

Description de la structure logique du document, ind ´ependante de l’application

Format universel des documents structur ´es et des donn ´ees

Utilisation de langage de mise en page suivant l’application Exemples :

XML −→ XHTML (PHP)

XML −→ autres formats (eXtented Stylesheet Language -XSL)

Pour aller plus loin :

(5)

Rappels Web

XHTML

eXtensible HyperText Markup Language

HTML compatible XML

Transformation formelle respectant les r `egles syntaxique du XML :

D ´eclaration d’une d ´eclaration de type de documents (DTD) Chaque balise a une balise de fin

Chaque attribut a une valeur entre guillemets etc.

(6)

Rappels Web

Document Type Definition (DTD)

Document XML respectant la syntaxe XML : document bien form ´e

Mais besoin de d écrire les contraintes propres à un format (structure d’une classe de documents) : d éfinition d’une DTD

Document XML respectant une DTD : document valide par rapport `a une DTD donn ´ee (outil pour la validation

(7)

Rappels Web

Document Type Definition (DTD)

DTD : −→ Sp écification d’une grammaire pour un langage DTD interne : plac ée au d ébut du document, associ ée au document

DTD externe : plac ée dans un fichier s épar é, associ ée aux documents y faisant r éf érence

(8)

Rappels Web

Exemple XML (1)

etudiants.dtd <! ELEMENT e t u d i a n t s ( e t u d i a n t ∗)> <! ELEMENT e t u d i a n t ( nom , prenom , INE )>

<! ELEMENT nom ( #PCDATA)> <! ELEMENT prenom ( #PCDATA)> <! ELEMENT INE ( #PCDATA)>

exemple1.xml(DTD externe)

<?xml v e r s i o n = ” 1 . 0 ” encoding= ” u t f −8” ?> <!DOCTYPE e t u d i a n t s SYSTEM ” e t u d i a n t s . d t d ”>

<nom>P i e r r e</ nom> <prenom>Dupont</ prenom> <INE>1234567890</ INE> </ e t u d i a n t>

(9)

Rappels Web

Exemple XML (2)

exemple2.xml(DTD interne) <?xml v e r s i o n = ” 1 . 0 ” encoding= ” u t f −8” s t a n d a l o n e = ” yes ” ?> <!DOCTYPE e t u d i a n t s [ <!ELEMENT e t u d i a n t s ( e t u d i a n t ∗)> <! ELEMENT e t u d i a n t ( nom , prenom , INE )>

<! ELEMENT nom ( #PCDATA)> <! ELEMENT prenom ( #PCDATA)> <! ELEMENT INE ( #PCDATA)> ]>

<nom>P i e r r e</ nom> <prenom>Dupont</ prenom> <INE>1234567890</ INE> </ e t u d i a n t>

(10)

Rappels Web

XSL

eXtended Stylesheet Language

Compl ément indispensable au XML (interpr étation et s élection des balises XML)

D ´eriv ´e du XML (donc respect de la syntaxe XML) Langage des feuilles de styles XML

3 composants :

XSLT : permet la transformation d’un document XML en un autre format (XML, texte, XHTML, etc.)

XSL-FO (Formatting Objects) : permet le formatage d’un document XML pour un rendu optimis ´e `a l’impression et la visualisation (PocketPC, etc.)

(11)

Rappels Web

XSLT

Transformation de documents XML en XML, (X)HTML, texte, etc.

Possibilit é de d éfinir plusieurs formats de publication pour un m ême contenu

Vision d’un document comme un arbre

Parcours de l’arbre et application de r `egles de transformation

Production d’un document en sortie Utilisation de feuille de style XSL exemple de processeur XSLT : xsltproc

(12)

Rappels Web

XPATH

Expression de chemin dans un arbre et s ´election de nœuds

Utilisation par XSL, Xpointer et XQuery

Chemin absolu (/document/section) ou relatif (../section)

(13)

Rappels Web

XSD

XML Schema Definition

DTD :

types pauvres et peu de contraintes sur le contenu Pas de gestion d’espace de nom

Pas au format XML XSD :

d éfinition de types et de contraintes sur les contenus D éfinition pr écis ément le nombre d’apparitions d’un

´el ´ement

Espaces de noms Format XML

(14)

Rappels Web

Exemple XSD (1)

etudiants.xsd

<?xml v e r s i o n = ” 1 . 0 ” encoding= ” u t f −8” ?>

<xs : schema xmlns : xs= ” h t t p : / / www. w3 . org / 2 0 0 1 /XMLSchema ”

elementFormDefault = ” q u a l i f i e d ” targetNamespace= ” h t t p : / / f o o . bar / e t u d i a n t s / ” xmlns : e t u d i a n t s = ” h t t p : / / f o o . bar / e t u d i a n t s / ”> <xs : element name= ” e t u d i a n t s ” > <xs : complexType> <xs : sequence>

<xs : element name= ” nom ” type= ” xs : s t r i n g ” />

<xs : element name= ” prenom ” type= ” xs : s t r i n g ” />

<xs : element name= ” INE ” type= ” xs : s t r i n g ” />

</ xs : sequence> </ xs : complexType> </ xs : element> </ xs : schema>

(15)

Rappels Web

Exemple XSD (2)

exemple3.xml <?xml v e r s i o n = ” 1 . 0 ” encoding= ” u t f −8” s t a n d a l o n e = ” yes ” ?> <e t u d i a n t s xmlns= ” h t t p : / / f o o . bar / e t u d i a n t s / ”> <e t u d i a n t> <nom>P i e r r e</ nom> <prenom>Dupont</ prenom> <INE>1234567890</ INE> </ e t u d i a n t>

(16)

Vers le web dynamique et interactif

HTML : pas d’interactivit ´e avec l’utilisateur. Les pages sont ”statiques”

Pages dynamiques : d ´ependantes des manipulations l’utilisateur

G én ération dynamique en fonction de param ètres de l’utilisateur

Principaux types d’Interactions :

Cot ´e client Cot ´e serveur

(17)

Programmation Web c ˆot ´e client

Ex écution r éalis ée sur le client

Navigateur capable de r ´ealiser l’ex ´ecution

Transfert du code embarqu´esdans la page HTML, depuis

le serveur vers le client (HTML-embedded scripting) Exemples

Scripts : Javascript, Vbscript

Applets : Java, ActiveX (n ´ecessite une machine virtuelle) Plugins propri ´etaires

(18)

Programmation Web c ˆot ´e serveur

Ex ´ecution cot ´e serveur

R ésultat de l’ex écution : page HTML envoy ée par le serveur au navigateur

Exemples :

CGI (Common Gateway Interface) – interface d ´efinissant le format d’ ´echange entre le client et le serveur HTTP

R ôle du serveur : transmission des param ètres à un programme qui traite la requ ête et produit une page HTML (dynamique)

→Obsol `ete mais `a la base de toutes les interactions client/serveur

Interpr éteurs int égr és au serveur HTTP (scripts embarqu és dans la page HTML)

Modules du serveur httpd (PHP, ASP), scripts `a la CGI (mod_perl d’apache)

(19)

R ´esum ´e

Web interactif

Scripts c ˆot ´e serveur

Scripts CGI Modules HTTPD Scripts dans la page HTML Scripts CGI-like Servlet Scripts

c ˆot ´e client

Applets Scripts dans

la page HTML Java Perl, C, Shell

PHP, ASP, ... mod perl/Apache Java, ActiveX Javascript, VBscript D’apr `es http: //www710.univ-lyon1.fr/˜hbriceno/teaching/cs/04_CS_http-web.pdf

(20)

Formulaires HTML

Possibilit ´e d’interactivit ´e avec l’utilisateur Proposition de zone de dialogue

Traitement des choix de l’utilisateur `a l’aide de code CGI, PHP, ...

Exemples :

Requ ˆetes dans un moteur de recherche Interrogation d’une base de donn ´ees

(21)

Formulaires HTML – description

Description des champs de saisies `a l’aide de balises HTML

Identification des zones par un nom symbolique l’utilisateur lui associe une valeur

Soumission du formulaire : transmission des couples

nom/valeurdans la requ ˆete HTTP

Sans traitement sur les donn ées, on parle de client passif Possibilit é d’associer un traitement (sur le client) gr âce à un év ènement Javascript

(22)

El ´ements d’un formulaire

1 _{Champs de saisie de texte et boutons : input}

Zone de texte (type par d éfaut) : type="text" Zone de texte cach é : type="password" Cases à cocher : type="checkbox"

Boutons radio, minimum 2, un seul s ´electionnable : type="radio":

Soumission du formulaire type="submit"

Bouton de remise à z éro des champs : type="reset" Bouton associ é à du code JavaScript : type="button" Bouton cach é : type="hidden"

2 _{Menus d ´eroulants, listes `a ascenceurs : select}

Liste avec 1 seul él ément s électionnable (pop list) : size="1"

Liste `a choix multiples : size="n" avec n > 1

(23)

Exemple de formulaire

<html><head><t i t l e>Form example</ t i t l e>

<s c r i p t language= ” j a v a s c r i p t ”>

f u n c t i o n d i s p l a y I n f o ( ) {

document . getElementById ( ” i n f o f i r s t n a m e ” ) . innerHTML = document . f o r m u l a i r e . f i r s t n a m e . v a l u e ; document . getElementById ( ” i n f o l a s t n a m e ” ) . innerHTML = document . f o r m u l a i r e . lastname . v a l u e ; }

f u n c t i o n r e s e t I n f o ( ) {

document . getElementById ( ” i n f o f i r s t n a m e ” ) . innerHTML = ” Not a v a i l a b l e ” ; document . getElementById ( ” i n f o l a s t n a m e ” ) . innerHTML = ” Not a v a i l a b l e ” ; } </s c r i p t></ head> <body> <div> <form name= ” f o r m u l a i r e ” a ct io n = ” j a v a s c r i p t : d i s p l a y I n f o ( ) ”> <div>

<div>F i r s t n a m e : <input type= ” t e x t ” name= ” f i r s t n a m e ” /></ div>

<div>Lastname : <input type= ” password ” name= ” lastname ”></ div>

</div><br />

<div s t y l e = ” t e x t−a l i g n : c e n t e r ”>

<input type= ” su bm it ” value= ” Ok ” />

<input type= ” r e s e t ” value= ” Cancel ” o n c l i c k = ” j a v a s c r i p t : r e s e t I n f o ( ) ; ” />

</div>

</form>

</div>

I n f o r m a t i o n : <u l>

<l i i d = ” i n f o f i r s t n a m e ”>Not a v a i l a b l e</ l i>

(24)

M ´ethodes GET et POST

M ´ethode GET :

Transmission des donn ´ees relatives aux champs du formulaire dans l’URL

R écup ération des donn ées gr âce à une variable (d’environnement, un tableau, suivant les langages)

M ´ethode POST :

Transmission des donn ées relatives aux champs du formulaire dans le corps de la requ ête HTTP Positionnement de Content-type et Content-length R écup ération des donn ées sur l’entr ée standard

NB : Il est n écessaire d’analyser la requ ête (parsing, pouvant être r éalis é par une fonction du langage de programmation utilis é)

(25)

M ´ethode GET

M ´ethode standard pour

la r ´ecup ´eration d’un document

l’activation d’un script ou d’une commande cot ´e serveur (avec transmission des donn ´ees)

Contenu de la requ ˆete toujours vide R ´eponse du serveur :

une ligne d écrivant l’ état de la requ ête une ent ête

le contenu demand ´e

En cas d’ échec, contenu de la r éponse d écrivant la raison de l’ échec

(26)

Utilisation de la m ´ethode GET

Donn ées du formulaire transmis par l’interm édiaire de l’URL (apr ès ?, champs s épar és par &)

Exemple :

GET /index.php?login=titi&passwd=titi HTTP/1.1

(deux champs – login et passwd – en clair ...)

Conservation dans un bookmark des donn ´ees saisies et transmises par le formulaire

(27)

Utilisation de la m ´ethode POST

Transmission des donn ´ees au serveur dans le corps de la requ ˆete

Exemple

POST index.php HTTP/1.1

User-Agent: Mozilla/4.0 (compatible;MSIE 6.0;Windows NT 5.1) Host: localhost

Accept : */*

Content-type: application/x-www-form-urlencoded

Content-length: 36

login=titi&password=titi

(28)

Utilisation de la m ´ethode HEAD

Similaire à la m éthode GET mais offre également la possibilit é de r écup érer l’ent ête relative à un document :

date de derni `ere modification (utile pour les caches et Javascript)

taille du document

type du document (filtrage en fonction du type par le client) type du serveur (utilisation de requ ˆetes sp ´ecifiques)

NB : ces informations ne sont pas forc ´ement fournies par le serveur

(29)

Analyse des donn ´ees du formulaire

R écup ération des couples nom/valeur associ és aux champs du formulaire

Exemples de parsers existants :

Perl : (cgi-lib.pl) - http://cgi-lib.berkeley.edu Perl : module CGI (voir exemples

http://www.validome.org/doc/HTML_fr/ cgiperl/modules/cgi.htm)

C : http://www.boutell.com/cgic/, http://libcgi.sourceforge.net, etc. PHP : voir les tableaux associatifs POST et GET

(30)

Sessions (1)

Transmission d’informations d’une page `a l’autre (sur un site donn ´e)

Stockage cot ´e serveur (sous forme de fichier)

Evite donc la de perte d’informations ou de redemander une information (identifiant, mot de passe, panier, etc.) Fin de la session lorsque

l’utilisateur quitte le navigateur l’utilisateur quitte le site la date d’expiration est atteinte

Attention : par d ´efaut, sous apache/php5, confusion/remplacement par des cookies

(31)

Exemple de session

<?php

s e s s i o n s t a r t ( ) ;

$ SESSION [ ’ prenom ’ ] = ’ P i e r r e ’ ; $ SESSION [ ’nom ’ ] = ’ Dupont ’ ; $ SESSION [ ’ INE ’ ] = ’ 1234567890 ’ ; ?> <html> <head> <t i t l e >Exemple de session </ t i t l e > </head> <body> <h3>I n f o r m a t i o n s u r l ’ u t i l i s a t e u r </h3> <p>

Nom&nbsp ; : <?php echo $ SESSION [ ’nom ’ ] ; ?><b r /> Pr ´enom&nbsp ; : <?php echo $ SESSION [ ’ prenom ’ ] ; ?><b r /> Num ´ero INE&nbsp ; : <?php echo $ SESSION [ ’ INE ’ ] ; ?><b r /> </p>

<p>

</body> </html>

(32)

Exemple de session

<?php s e s s i o n s t a r t ( ) ; ?> <html> <head>

<t i t l e >Page s u i v a n t e de l ’ exemple de session </ t i t l e > </head>

<h3>I n f o r m a t i o n s s u r l ’ u t i l i s a t e u r de l a page pr ´ec ´edente </h3> <p>

Nom&nbsp ; : <?php echo $ SESSION [ ’nom ’ ] ; ?><b r/>

Pr ´enom&nbsp ; : <?php echo $ SESSION [ ’ prenom ’ ] ; ?><b r/>

Num ´ero INE&nbsp ; : <?php echo $ SESSION [ ’ INE ’ ] ; ?><b r/>

</p> </body> </html>

(33)

Cookies (1)

Stockage d’informations par le serveur, chez le client Solution au caract `ere sans ´etat de HTTP

Description :

Une chaˆıne de caract ères url-encod ée de 4ko au maximum stock ée sur le disque du client

Informations associ ées à un ensemble d’URL, et envoy ées lors de chaque requ ête vers une de ces URL

(34)

Cookies (2)

Exemples d’utilisation :

Propagation d’un code d’authentification (permet d’ ´eviter une authentificaton lors de chaque requ ˆete)

Identification dans une base de donn ées Envoi d’ él éments statistique au serveur

(35)

Installation d’un cookie sur un client

−→ Inclusion de la directive Set-cookie dans l’ent ête de la r éponse HTTP (lors de la premi ère connexion)

Set-Cookie: nom=valeur; expires=date;

path=chemin acces; domain=nom domaine; secure

nom/valeur: contenu du cookie (champs obligatoire), sans caract `ere espace, ; et ,

date: date `a laquelle le cookie devient invalide

path=chemin acces: chemin contenu dans l’URL pour lequel le cookie est valable

Exemple : path=/home

domain: nom de domaine associ ´e au serveur pour lequel le cookie est valable

secure: le cookie et valable si la connexion est s ´ecuri ´ee

(36)

Utilisation d’un cookie par un client

A chaque requ ête du client, v érification si un cookie est associ é à la requ ête (consultation de la liste des cookies) Si oui, utilisation de la directive cookie dans l’ent ête de la requ ête HTTP

Cookie: nom1=valeur1; nom2=valeur2; ... Limitations (premi `ere sp ´ecification) :

Stockage de 300 cookies au plus 20 cookies par domaine au plus Taille limite d’un cookie : 4 ko

(37)

Exemple

(dans du javascript) v a r Cookies = {}; v a r a l l C o o k i e s = document . c o o k i e .s p l i t ( ’ ; ’ ) ; f o r ( v a r i = 0 ; i<a l l C o o k i e s . l e n g t h ; i ++) { v a r c o o k i e P a i r = a l l C o o k i e s [ i ] .s p l i t ( ’ = ’ ) ; Cookies [ c o o k i e P a i r [ 0 ] ] = c o o k i e P a i r [ 1 ] ; } v a r x = Cookies [ ’ exempleCookie ’ ] ; i f ( x ) {

a l e r t ( ’ Le c o o k i e exempleCookie e s t encore a c t i f \n V a l e u r du Cookie ( i n i t i a l i s é l o r s d \ ’ une pr éc édente v i s i t e ) : ’ + x ) ; } f u n c t i o n sauvegardeCookie ( name ) { v a r x = document . forms [ ’ c o o k i e f o r m ’ ] . l o g i n . v a l u e ; i f ( ! x ) { a l e r t ( ’ I n d i q u e z un l o g i n ’ ) ; } else {

v a r date = new Date ( ) ;

date . setTime ( date . getTime ( ) + ( 1 ∗ 6 0 ∗ 6 0 ∗ 1 0 0 0 ) ) ;

v a r e x p i r e s = ” ; e x p i r e s = ” +date . toGMTString ( ) ;

document . c o o k i e = name+ ” = ” +x+ e x p i r e s + ” ; path = / ” ; Cookies [ name ] = x ;

a l e r t ( ’ Cookie c r e a t e d ’ ) ; }

(38)

Exemple

(dans du javascript) f u n c t i o n l e c t u r e C o o k i e ( name ) { a l e r t ( ’ La v a l e u r du c o o k i e e s t ’ + Cookies [ name ] ) ; } f u n c t i o n s u p p r e s s i o n C o o k i e ( name ) { v a r date = new Date ( ) ;

date . setTime ( date . getTime ()+( −1∗60∗60∗1000));

v a r e x p i r e s = ” ; e x p i r e s = ” +date . toGMTString ( ) ;

document . c o o k i e = name+ ” = ” + e x p i r e s + ” ; path = / ” ; Cookies [ name ] = u n d e f i n e d ;

a l e r t ( ’ Cookie erased ’ ) ; }

(39)

Conclusion

A voir :

Javascript PHP