Programmation web coté client concepts et explications
Programmation Web
Thierry Hamon
Bureau H202
Institut Galilee - Universit´ e Paris 13´
&
LIMSI-CNRS
Presentation du cours´
Presentation du cours´
Objectifs de l’enseignement : Acquerir 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 donnees´
Egalement : conna´ ˆ?tre les sources d’informations complementaires´
Repartition des enseignements : 4 s´ eances de cours/TP´ de 3h ou 4h30
Devoir developp´ e au cours des TPs autour de la gestion´ de la base de donnees Auto-Ecole´
HTML
HyperText Markup Language
Langage de structuration d’un texte a l’aide de balises`
(definition logique d’un document)´
Remarque : Tout document doit pouvoir s’afficher dans n’importe quel navigateur, mais l’affichage depend de´ l’interpretation du navigateur´
Problemes de syntaxe et validation`
HTML 4.01 : syntaxe formelle et precise (permet une´
validation automatique)
Doit etre respectˆ ee par tout document HTML´
En pratique, peu de documents valides (pas de respect de
la norme, meme par lesˆ editeurs)´
Navigateurs tolerants aux erreurs de syntaxe´
Evolution : HTML 5
XML
eXtensible Markup Language
Langage de description de documents
Description de la structure logique du document, independante de l’application´
Format universel des documents structures et des´ donnees´
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 :
XHTML
eXtensible HyperText Markup Language
HTML compatible XML
Transformation formelle respectant les regles syntaxique` du XML :
Declaration d’une d´ eclaration de type de documents (DTD)´
Chaque balise a une balise de fin
Chaque attribut a une valeur entre guillemets etc.
Document Type Definition (DTD)
Document XML respectant la syntaxe XML : document bien forme´
Mais besoin de decrire les contraintes propres´ a un format`
(structure d’une classe de documents) : definition d’une´
DTD
Document XML respectant une DTD : document valide par rapport a une DTD donn` ee (outil pour la validation´ xmllint)
Document Type Definition (DTD)
DTD : ?? Specification d’une grammaire pour un langage´
DTD interne : placee au d´ ebut du document, associ´ ee au´ document
DTD externe : placee dans un fichier s´ epar´ e, associ´ ee aux´ documents y faisant ref´ erence´
DTD mixte
Exemple XML (1)
!ELEMENT etudiants ( etudiant ?)>
!ELEMENT etudiant (nom, prenom , INE )>
!ELEMENT nom (#PCDATA)>
!ELEMENT prenom (#PCDATA)> !ELEMENT INE (#PCDATA)>
(DTD externe)
?xml version=” 1.0 ” encoding=” utf ?8” ?>
!DOCTYPE etudiants SYSTEM ” etudiants . dtd ”>
etudiants>
etudiant>
nom>Pierre/nom>
prenom>Dupont/ prenom>
INE>1234567890/ INE>
/ etudiant>
/ etudiants>
Exemple XML (2)
(DTD interne)
?xml version=” 1.0 ” encoding=” utf ?8” standalone=” yes ” ?>
!DOCTYPE etudiants [
!ELEMENT etudiants ( etudiant ?)>
!ELEMENT etudiant (nom,
prenom , INE )>
!ELEMENT nom (#PCDATA)>
!ELEMENT prenom (#PCDATA)>
!ELEMENT INE (#PCDATA)>
]>
etudiants>
etudiant>
nom>Pierre/nom>
prenom>Dupont/ prenom>
INE>1234567890/ INE>
/ etudiant>
/ etudiants>
XSL
eXtended Stylesheet Language
Complement indispensable au XML (interpr´ etation et´ selection des balises XML)´
Deriv´ 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 optimise´ a l’impression et la`
visualisation (PocketPC, etc.)
Xpath : permet d’adresser des parties d’un document XML
XSLT
Transformation de documents XML en XML, (X)HTML, texte, etc.
Possibilite de d´ efinir plusieurs formats de publication pour´ un meme contenuˆ
Vision d’un document comme un arbre
Parcours de l’arbre et application de regles de` transformation
Production d’un document en sortie
Utilisation de feuille de style XSL exemple de processeur XSLT : xsltproc
XPATH
Expression de chemin dans un arbre et selection de´ nœuds
Utilisation par XSL, Xpointer et XQuery
Chemin absolu (/document/section) ou relatif
(../section)
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 :
definition de types et de contraintes sur les contenus´
Definition pr´ ecis´ ement le nombre d’apparitions d’un´ el´ ement´
Espaces de noms
Format XML
Exemple XSD (1)
?xml version=” 1.0 ” encoding=” utf ?8” ?>
xs : schema xmlns : xs=” http : / /www.w3. org /2001/XMLSchema” elementFormDefault=” q u a l i f i e d ” targetNamespace=” http : / / foo . bar / etudiants / ”
xmlns : etudiants=” http : / / foo . bar / etudiants / ”>
xs : element name=” etudiants ” >
xs : complexType>
xs : sequence>
xs : element minOccurs=” 0” maxOccurs=” unbounded ” r e f =” etudiants : etudiant ” /> / xs : sequence>
/ xs : complexType>
/ xs : element>
xs : element name=” etudiant ”>
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>
Exemple XSD (2)
?xml version=” 1.0 ” encoding=” utf ?8” standalone=” yes ” ?>
etudiants xmlns=” http : / / foo . bar / etudiants / ”>
etudiant>
nom>Pierre/nom>
prenom>Dupont/ prenom>
INE>1234567890/ INE>
/ etudiant>
/ etudiants>
Vers le web dynamique et interactif
HTML : pas d’interactivite avec l’utilisateur. Les pages sont´
”statiques”
Pages dynamiques : dependantes des manipulations´ l’utilisateur
Gen´ eration dynamique en fonction de param´ etres de` l’utilisateur
Principaux types d’Interactions :
Cote client´
Cote serveur´
?? On parle de programmation Web
Programmation Web cotˆ e client´
Execution r´ ealis´ ee sur le client´
Navigateur capable de realiser l’ex´ ecution´
Transfert du code embarqués dans la page HTML, depuis le serveur vers le client (HTML-embedded scripting)
Exemples
Scripts : Javascript, Vbscript
Applets : Java, ActiveX (necessite une machine virtuelle)´ Plugins proprietaires´
Programmation Web cotˆ e serveur´
Execution cot´ e serveur´
Resultat de l’ex´ ecution : page HTML envoy´ ee par le´ serveur au navigateur Exemples :
CGI (Common Gateway Interface) – interface definissant le´ format d’echange entre le client et le serveur HTTP´
Role du serveur : transmission des paramˆ etres` a un` programme qui traite la requete et produit une page HTMLˆ (dynamique)
? Obsolete mais` a la base de toutes les interactions client/serveur`
Interpreteurs int´ egr´ es au serveur HTTP (scripts embarqu´ es´ dans la page HTML)
Modules du serveur httpd (PHP, ASP), scripts a la CGI`
(mod_perl d’apache)
Resum´ e´
D’apres` http:
˜
NB : on peut/doit aussi melanger les deux cot´ es´
Formulaires HTML
Possibilite 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 :
Requetes dans un moteur de rechercheˆ
Interrogation d’une base de donnees´
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/valeur dans la requete HTTPˆ
Sans traitement sur les donnees, on parle de´ client passif
Possibilite d’associer un traitement (sur le client) gr´ aceˆ a` un ev´ enement Javascript` On parle de client actif
Elements d’un formulaire´
Champs de saisie de texte et boutons : input
Zone de texte (type par defaut) :´ type="text"
Zone de texte cache :´ type="password"
Cases a cocher :` type="checkbox"
Boutons radio, minimum 2, un seul selectionnable :´ type="radio" :
Soumission du formulaire type="submit"
Bouton de remise a z` ero des champs :´ type="reset"
Bouton associe´ a du code JavaScript :` type="button"
Bouton cache :´ type="hidden"
Menus deroulants, listes´ a ascenceurs :` select
Liste avec 1 seul el´ ement s´ electionnable (pop list) :´ size="1"
Liste a choix multiples :` size="n" avec n> 1
Zone de saisie d’un texte ”long” : textarea
Exemple de formulaire
html>head>t i t l e>Form example/ t i t l e>
script language=” j a v a s c r i p t ”> function displayInfo ( ) {
document . getElementById ( ” infofirstname ” ) . innerHTML = document . formulaire . firstname . value ; document . getElementById ( ” infolastname ” ) . innerHTML = document . formulaire . lastname . value ;
} function resetInfo ( ) {
document . getElementById ( ” infofirstname ” ) . innerHTML = ” Not available ” ; document . getElementById ( ” infolastname ” ) . innerHTML = ” Not available ” ; }
/ script>/ head>
body> div>
form name=” formulaire ” action=” j a v a s c r i p t : displayInfo ( ) ”> div>
div>Firstname : input type=” t e x t ” name=” firstname ” />/ div>
div>Lastname : input type=” password ” name=” lastname ”>/ div>
/ div>br />
div style=” text?align : center ”>
input type=” submit ” value=” Ok ” />
input type=” reset ” value=” Cancel ” onclick=” j a v a s c r i p t : resetInfo ( ) ; ” /> / div>
/ form>
/ div> Information :
ul>
l i id=” infofirstname ”>Not available/ l i>
l i id=” infolastname ”>Not available/ l i>
/ ul>
/ html>
Methodes´ GET et POST
Methode´ GET :
Transmission des donnees relatives aux champs du´ formulaire dans l’URL
Recup´ eration des donn´ ees gr´ aceˆ a une variable`
(d’environnement, un tableau, suivant les langages) Methode´ POST :
Transmission des donnees relatives aux champs du´ formulaire dans le corps de la requete HTTPˆ Positionnement de Content-type et Content-length Recup´ eration des donn´ ees sur l’entr´ ee standard´
NB : Il est necessaire d’analyser la requ´ ete (ˆ parsing, pouvant etre rˆ ealis´ e par une fonction du langage de programmation´ utilise)´
Methode´ GET
Methode standard pour´
la recup´ eration d’un document´
l’activation d’un script ou d’une commande cote serveur´
(avec transmission des donnees)´
Contenu de la requete toujours videˆ
Reponse du serveur :´
une ligne decrivant l’´ etat de la requ´ eteˆ une enteteˆ le contenu demande´
En cas d’echec, contenu de la r´ eponse d´ ecrivant la raison´ de l’echec´
Utilisation de la methode´ GET
Donnees du formulaire transmis par l’interm´ ediaire de´ l’URL (apres` ?, champs separ´ es par´ &) Exemple :
GET ?login=titi&passwd=titi HTTP/1.1
(deux champs – login et passwd – en clair )
Conservation dans un bookmark des donnees saisies et´ transmises par le formulaire Taille maximum de l’URL : 4ko
Utilisation de la methode´ POST
Transmission des donnees au serveur dans le corps de la´ requeteˆ
Exemple
POST HTTP/1.1
User-Agent: Mozilla/4.0 (compatible;MSIE 6.0;Windows
Host: localhost
Accept : */*
Content-type: application/x-www-form-urlencoded Content-length: 36
login=titi&password=titi
NB : Mot de passe toujours en clair
Utilisation de la methode´ HEAD
Similaire a la m` ethode´ GET mais offre egalement la´ possibilite de r´ ecup´ erer l’ent´ ete relativeˆ a un document :`
date de derniere 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 requetes spˆ ecifiques)´
NB : ces informations ne sont pas forcement fournies par´ le serveur
Analyse des donnees du formulaire´
Recup´ eration des couples´ nom/valeur associes aux´ champs du formulaire Exemples de parsers existants :
Perl : () - Perl : module CGI (voir exemples ) C : , , etc. PHP : voir les tableaux associatifs POST et GET
Sessions (1)
Transmission d’informations d’une page a l’autre (sur un` site donne)´
Stockage cote 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 defaut, sous apache/php5,´ confusion/remplacement par des cookies
Exemple de session
?php session start ( ) ;
$ SESSION [ ’ prenom ’ ] = ’ Pierre ’ ;
$ SESSION [ ’nom ’ ] = ’ Dupont ’ ;
$ SESSION [ ’ INE ’ ] = ’ 1234567890 ’ ;
?>
html>
head>
t i t l e >Exemple de session / t i t l e >
/head>
body>
h3>Information sur l ’ u t i l i s a t e u r /h3>
p>
Nom  ; : ?php echo $ SESSION [ ’nom ’ ] ; ?>br/>
Prenom  ; :´ ?php echo $ SESSION [ ’ prenom ’ ] ; ?>br/>
Numero INE  ; :´ ?php echo $ SESSION [ ’ INE ’ ] ; ?>br/> /p>
p>
a href =” session2 . php”>Page suivante /a>br />
/p>
/body>
/html>
Exemple de session
?php session start ( ) ;
?>
html>
head>
t i t l e >Page suivante de l ’ exemple de session / t i t l e >
/head>
body>
p>
h3>Informations sur l ’ u t i l i s a t e u r de la page prec´ edente´ /h3>
p>
Nom  ; : ?php echo $ SESSION [ ’nom ’ ] ; ?>br/>
Prenom  ; :´ ?php echo $ SESSION [ ’ prenom ’ ] ; ?>br/>
Numero INE  ; :´ ?php echo $ SESSION [ ’ INE ’ ] ; ?>br/>
/p>
/body>
/html>
Cookies (1)
Stockage d’informations par le serveur, chez le client Solution au caractere sans` etat de HTTP´
Description :
Une chaˆ?ne de caracteres url-encod` ee de 4ko au´ maximum stockee sur le disque du client´
Informations associees´ a un ensemble d’URL, et envoy` ees´ lors de chaque requete vers une de ces URLˆ
Cookies (2)
Exemples d’utilisation :
Propagation d’un code d’authentification (permet d’eviter´ une authentificaton lors de chaque requete)ˆ Identification dans une base de donnees´
Envoi d’el´ ements statistique au serveur´
Installation d’un cookie sur un client
?? Inclusion de la directive Set-cookie dans l’entete de laˆ reponse HTTP (lors de la premi´ ere connexion)`
Set-Cookie: nom=valeur; expires=date; path=cheminacces; domain=nomdomaine; secure
nom/valeur : contenu du cookie (champs obligatoire), sans caractere` espace, ; et ,
date : date a laquelle le cookie devient invalide`
path=cheminacces : chemin contenu dans l’URL pour lequel le cookie est valable
Exemple : path=/home
domain : nom de domaine associe au serveur pour lequel le cookie est´ valable
secure : le cookie et valable si la connexion est securi´ ee´
Possibilite d’ins´ erer plusieurs cookies´
Utilisation d’un cookie par un client
A chaque requete du client, vˆ erification si un cookie est´ associe´ a la requ` ete (consultation de la liste des cookies)ˆ
Si oui, utilisation de la directive cookie dans l’entete de laˆ requete HTTPˆ
Cookie: nom1=valeur1; nom2=valeur2;
Limitations (premiere sp` ecification) :´
Stockage de 300 cookies au plus
20 cookies par domaine au plus
Taille limite d’un cookie : 4 ko
Exemple
(dans du javascript)
var Cookies = {};
var allCookies = document . cookie . split ( ’ ; ’ ) ; for ( var i =0; iallCookies . length ; i ++) { var cookiePair = allCookies [ i ] . split ( ’= ’ ) ;
Cookies [ cookiePair [ 0 ] ] = cookiePair [ 1 ] ;
}
var x = Cookies [ ’ exempleCookie ’ ] ;
i f ( x ) { a l e r t ( ’ Le cookie exempleCookie est encore a c t i f \n Valeur du Cookie
( i n i t i a l i s e´ l o r s d\ ’une prec´ edente´ v i s i t e ) : ’ + x ) ;
}
function sauvegardeCookie (name) {
var x = document . forms [ ’ cookieform ’ ] . login . value ;
i f ( ! x ) { a l e r t ( ’ Indiquez un login ’ ) ;
} else { var date = new Date ( ) ; date . setTime ( date . getTime ()+(1?60?60?1000)); var expires = ” ; expires=”+date . toGMTString ( ) ;
document . cookie = name+”=”+x+expires+” ; path =/ ” ; Cookies [name] = x ; a l e r t ( ’ Cookie created ’ ) ;
}
}
Exemple
(dans du javascript)
function lectureCookie (name) {
a l e r t ( ’La valeur du cookie est ’ + Cookies [name ] ) ;
}
function suppressionCookie (name) {
var date = new Date ( ) ; date . setTime ( date . getTime()+(?1?60?60?1000)); var expires = ” ; expires=”+date . toGMTString ( ) ; document . cookie = name+”=”+expires+” ; path =/ ” ;
Cookies [name] = undefined ; a l e r t ( ’ Cookie erased ’ ) ;
}
Conclusion
Conclusion
A voir :
Javascript
PHP
Manipulation etendue des donn´ ees : AJAX & JQuery´