Programmation web coté client concepts et explications

Problème à signaler:


Télécharger Programmation web coté client concepts et explications



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

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&nbsp ; : <?php          echo $ SESSION [ ’nom ’ ] ;         ?><br/>

           Prenom&nbsp ; :´     <?php        echo $ SESSION [ ’ prenom ’ ] ;          ?><br/>

Numero INE&nbsp ; :´                     <?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&nbsp ; : <?php echo $ SESSION [ ’nom ’ ] ;            ?><br/>

           Prenom&nbsp ; :´          <?php echo $ SESSION [ ’ prenom ’ ] ;            ?><br/>

            Numero INE&nbsp ; :´            <?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; i<allCookies . 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´


7