Web Dynamique

Introduction aux pages Web dynamiques
Nicolas Stroppa
stroppa@enst.fr Brique AWEB
30 mars 2005
Nicolas Stroppa
Introduction au Web dynamique
Introduction Principes et exemples de pages dynamiques Suivi de connexion
Plan
1
Introduction Rappels sur le protocole HTTP, le langage HTML, et les URL Les pages dynamiques : une ncessit Principes et exemples de pages dynamiques Linteraction Serveur Programme Exemples dutilisation Suivi de connexion Les champs cachs Les cookies Les sessions en PHP
Nicolas Stroppa
-2-
Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit
Plan
1
Nicolas Stroppa
-3-
Le Web
Repose sur 3 standards :

Le protocole HTTP (diffusion de documents) Le langage HTML (structuration des documents et navigation par liens hypertextes) La spcication URL (localisation des documents)
Doit sa naissance Tim Berners-Lee (n annes 80) Est standardis par le World Wide Web Consortium (W3C) http://www.w3.org/
Nicolas Stroppa
-4-
Le protocole HTTP
Interaction entre un client et un serveur web
Protocole HTTP
requte
Client
rponse
(code rponse + en-tte + contenu)
Serveur
access_log error_log
Nicolas Stroppa
-5-
Le protocole HTTP - Quelques caractristiques
HTTP = HyperText Transfer Protocol HTTP est un protocole ax question/rponse (connexion unique, sans tat, mode pull ) Un change HTTP = requte(s) de la part dun client (e.g. demande de page HTML), puis rponse(s) du serveur. Les requtes et rponses sont de la forme : en-tte + corps
Nicolas Stroppa
-6-
Le protocole HTTP
En-ttes (headers)
Requte : mthode, URL demand, type de client, jeu de caractres attendu par le client, . . . Rponse : type du contenu, date de dbut de transfert, . . .
Mthodes principales
Commande GET : rcupration dun document Commande POST : envoi de donnes un programme
tricatel -> cours_aweb: telnet www.infres.enst.fr 80 Trying 137.194.160.20... Connected to infres2-160.enst.fr. Escape character is ^]. HEAD /index.html HTTP/1.0 HTTP/1.1 200 OK Date: Fri, 05 Nov 2004 18:49:45 GMT Server: Apache/1.3.22 (Unix) PHP/3.0.15 PHP/4.1.0 Connection: close Content-Type: text/html Connection closed by foreign host.
Nicolas Stroppa
-7-
Les URL
Les URL (Uniform Resource Locator) sont composes dun protocole (http, ftp, mailto, file) dun sparateur (:) et dune chane propre au protocole (//www.enst.fr) http://www.enst.fr Une URL permet didentier de faon unique un document sur Internet (protocole + chemin complet du chier)
Nicolas Stroppa
-8-
Le langage HTML
Est un langage balises (famille SGML)

Exemple : <html><body>document</body></html>
Utilise des liens hypertextes, i.e. liens entre documents, laide de la notion dURL
Inclusion dune image : <img src="http://toto.com/Images/carte.gif" /> Lien vers un autre document : <a href="/~toto/index.html">La page de Toto</a>
Permet la navigation de page en page (web = toile).
Nicolas Stroppa
-9-
Le langage HTML
Permet dintragir avec un site web laide de formulaire de saisie. On englobe le formulaire dans : <form method="mthode" action="action"> formulaire</form> Un lment de saisie : <input type="type" name="nom" size="taille" /> (type = text, password, hidden, le, image, checkbox, radio, submit, reset) Une liste doptions : <select name="nom"><option>option1</option> <option>option2</option></select>
Nicolas Stroppa
- 10 -
Pourquoi des pages dynamiques ?

Pages statiques (HTML)
Avantages :
pas de traitement par le client ou le serveur : contenu valide , accs rapide travail fait une fois pour toutes
Inconvnients :
contenu vieillissant trs rapidement pas dinteractivit possible
Pages dynamiques (CGI, PHP)

Avantages :
interactivit contenu pouvant facilement tre mis jour
Inconvnients :
problmes de scurit accs plus lent (traitement des requtes) erreurs lexcution possibles
Nicolas Stroppa Introduction au Web dynamique - 11 -

Avantages :
Inconvnients :

Avantages :
Inconvnients :

Avantages :
Inconvnients :

Avantages :
Inconvnients :

Avantages :
Inconvnients :

Avantages :
Inconvnients :

Avantages :
Inconvnients :

Avantages :
Inconvnients :
Deux types de dynamicit

Dynamicit ct client : applets, JavaScript, . . .
Avantages :
pas de traitement ct serveur interactivit immdiate : animations, tests de validit des donnes transmettre
Inconvnients :
problmes de scurit et de compatibilit
Dynamicit ct serveur : CGI, PHP

Avantages :
programme indpendant du client possibilit de traiter les formulaires
Inconvnients :
problmes de scurit toujours . . .
Nicolas Stroppa
- 16 -

Avantages :
Inconvnients :

Avantages :
Inconvnients :
Nicolas Stroppa
- 17 -

Avantages :
Inconvnients :

Avantages :
Inconvnients :
Nicolas Stroppa
- 18 -

Avantages :
Inconvnients :

Avantages :
Inconvnients :
Nicolas Stroppa
- 19 -

Avantages :
Inconvnients :

Avantages :
Inconvnients :
Nicolas Stroppa
- 20 -
Linteraction Serveur Programme Exemples dutilisation
Plan
1
Nicolas Stroppa
- 21 -
Serveurs HTTP et programmes CGI

CGI dnit une interface dchange de donnes entre un serveur HTTP et des applications externes (API). Lapplication externe est un programme indpendant du serveur. Elle peut tre thoriquement crite dans nimporte quel langage.
Programmes compils (C, Ada, . . . ) Scripts (Perl, Python, Shell Unix, . . . ) Dans la pratique, on a souvent recours des bibliothques
HTTP requte
(mthode + URL + en-tte + corps)
CGI requte
(paramtres)
Client
rponse
(code rponse + en- tte + contenu)
Serveur
rponse
(en-tte + contenu + erreurs)
Programme CGI
Nicolas Stroppa
- 22 -
Serveurs HTTP avec modules internes

Le serveur HTTP utilise un module/plugin interne : PHP, Perl, ASP Le serveur doit tre congur/compil pour accepter et comprendre le langage. Ce sont donc des langages interprts. Certains sont ddis la programmation dynamique de site web (PHP, ASP).
HTTP
requte
Client
(mthode + URL + en-tte + corps)
(paramtres)
Serveur
(en-tte + contenu + erreurs)
rponse
(code rponse + en-tte + contenu)
module interne
Nicolas Stroppa
- 23 -
Fonctionnement de linterface
1
Le client passe des arguments au serveur HTTP, sous la forme dune chane de caractres reprsentant une liste de paires cl-valeur. Exemple : nom=Dupont&prenom=Jacques&age=47. Le serveur rceptionne les donnes et les transmet au programme/module. Le programme :
1
sexcute dans lenvironnement du serveur (= peut accder certaines variables) traite la requte et renvoie :
sur la sortie standard : len-tte + le contenu (php : seulement le contenu) sur la sortie derreur : les ventuels messages derreurs
Le serveur :
renvoie la rponse (en-tte + contenu) au client archive au besoin les messages derreurs
1
1
Le serveur :
1
1
Le serveur :
1
1
Le serveur :
1
1
Le serveur :
1
1
Le serveur :
1
1
Le serveur :
1
1
Le serveur :
Hello world! avec un CGI en Perl

#! /usr/local/bin/perl print print print print print print print "Content-type: text/html\n"; "\n"; "<html>\n"; "<head><title>Hello world !!!</title></head>\n"; "<body>\n"; "Hello world?\n"; "</body></html>\n";
Pour installer : mettre le chier source en lecture et excution pour tous (en ralit lutilisateur apache) et ajouter lextension .cgi
Nicolas Stroppa
- 32 -
Hello world! avec un CGI en C

#include <stdio.h> #include <stdlib.h> void main (int argc, char ** argv) { printf("Content-type: text/html\n"); printf("\n"); printf("<html>\n"); printf("<head><title>Hello world !!!</title></head>\n"); printf("<body>\n"); printf("Hello world?\n"); printf("</body></html>\n"); }
Attention : dans ce cas, il faut compiler et faire ldition de liens pour obtenir lexcutable !
Hello world! avec le module PHP
<html> <head><title>Hello world !!!</title></head> <body> <?php echo "Hello world?\n"; ?> </body></html>
Le code PHP est lintrieur des balises <?php et ?>. Il ny a pas besoin de rajouter len-tte Pour installer, il suft que le chier ait lextension .php
Nicolas Stroppa
- 34 -
Mthodes denvoi des paramtres

GET : donnes codes dans lURL. Exemple : http://www.toto.com/form1.cgi?nom=Dupont&prenom=Jacques
Les donnes sont stockes dans la variable QUERY_STRING Avantage : facile dboguer Inconvnient : taille des donnes limite
POST : donnes dans le corps de la requte.

Les donnes sont stockes dans la variable BUFFER Avantage : taille illimite (prcise dans la variable CONTENT_LENGTH) Inconvnient : dbug plus dlicat
En PHP, il y a cration automatique des variables portant le nom des cls. (Ici, la variable nom sera automatiquement cre avec pour valeur Dupont.)
Un exemple de formulaire
<html> <head><title>Exemple de formulaire</title></head> <body> <form method="post" <input type="radio" Afficher mon nom <input type="radio" Afficher mon nom et action="script.cgi"> name="action" value="name"> name="action" value="with_email"> mon e-mail<br />
Nom : <input type="text" name="name" size="30"><br /> E-mail : <input type="text" name="email" size="30"><br /> <input type="submit" value="OK"> <input type="reset" value="RAZ"> </form> </body></html>
Script Python traitant le formulaire

#! /usr/local/bin/python import cgi print """Content-type: text/html <html> <head><title>Rsultats du formulaire</title></head> <hr><h1>Rsultats du formulaire</h1><hr>""" # Rcupration des rsultats dans un dictionnaire fields = cgi.SvFormContentDict()
Les valeurs des champs du formulaire sont associes aux noms dans le dictionnaire obtenu (objet Python).
Script Python traitant le formulaire

# Extraction des champs name = email = radio = None if fields.has_key(name): name = fields[name] if fields.has_key(email): email = fields[email] if fields.has_key(action): radio = fields[action] # Gnrer la fin de la page HTML print "<ul>" if name: print "<li>Nom : %s</li>" %(name) if (email) and (radio == avec_email): print "<li>E-mail : %s</li>" %(email) print "</ul>" print "<hr>" print "</body></html>"
Script PHP traitant le formulaire

<html> <head><title>Rsultats du formulaire</title></head> <hr><h1>Rsultats du formulaire</h1><hr> <ul> <? if isset($name) { echo "<li>Nom : $name</li>"; } if (isset($email) and $radio == avec_email) { echo "<li>E-mail : $email</li>"; } ?> </ul><hr></body></html>
Nicolas Stroppa
- 39 -
Les champs cachs Les cookies Les sessions en PHP
Plan
1
Nicolas Stroppa
- 40 -
Le problme
Le protocole HTTP nest pas connect impossible de garder une relle liaison entre le client et le serveur. Inadapt aux sessions client/serveur dans lesquelles on doit garder une trace de lchange (identication, historique, liaison avec une BD. . .).
Nicolas Stroppa
- 41 -
Suivi de connexion
Trois mthodes : Avec des champs cachs. Uniquement pour une suite dtapes bien prcises. Exemple : <input type="hidden" name="page" value="1"> Avec des cookies
Information fournie par le serveur mais stocke par le client
Avec une session PHP

On rcupre un identiant par champ cach ou cookie Toutes les autres variables lies lidentiant sont rcuprables de faon transparente.
Nicolas Stroppa
- 42 -
Les champs cachs
Un champ permet de transmettre au serveur une variable de manire transparente. Le serveur rcupre tous les champs fournis par le formulaire. Problme : Pour une variable donne, on ne connait pas le type de champ qui lui tait associ dans le formulaire, i.e. on dtecte les champs uniquement par leur nom. Objectif des champs cachs : rcuprer une variable, la traiter, et la rintroduire nouveau dans lafchage dun nouveau formulaire.
Nicolas Stroppa
- 43 -
Les champs cachs (2)
Form.html
Form.html Res1.cgi Res2.cgi
Champ login Action : res 1.cgi
Res1.cgi
Valeur de login rcupre Nouveau formulaire avec champ cach login
Res2.cgi
Valeur de login rcupre Nouveau formulaire avec champ cach login
Nicolas Stroppa
- 44 -
Cookies
Un cookie est compos de :
Un nom et une valeur : id=123 Un domaine : nom_du_serveur (dfaut : celui de la page) Un path : arborescence du site (par dfaut / ) Une date dexpiration : date, nombre de secondes (par dfaut la dure de la session)
Envoi dune information du serveur vers le client :

Transmise dans len-tte HTTP de rponse Exemple : Set-Cookie: message=coucou; expires=Tue, 08-Jan-2002; Version=1;
Envoi dune information du client vers le serveur :

A chaque fois que lURL requise par le client correspond au domaine et au chemin dun cookie prsent chez le client Linformation est rcupre la requte suivante (variable HTTP_COOKIE)
Cookies en PHP
Recevoir : En PHP, un cookie est reu de la mme faon que dans le cas dun formulaire : une variable du nom du cookie est cre automatiquement. Envoyer : Pour envoyer, on utilise la fonction setcookie. setcookie("nom du cookie","valeur", ...)
<? setcookie(name, "Dupont"); ?> <html>... <? setcookie(name, "Dupont"); ?> <html>...
Attention : Erreur, len-tte est dj ni !
Nicolas Stroppa
- 46 -
Classe session en PHP
PHP 4 et 5 : inclus dans la distribution de base, via des chiers stocks sur disque On utilise un identiant de session via un champ cach ou un cookie. Transparent via session_start qui gre un cookie tout seul. Une fois la session ouverte, on sauve/charge toute variable de faon transparente.
Nicolas Stroppa
- 47 -
La suite. . .
La suite. . .
Lavenir du web est dynamique cts client et serveur. Au niveau serveur : PHP et serveurs dapplications (Tomcat, Websphere, etc.) Au niveau client : clients riches (Javascript, XUL, XAML, Actionscript, etc.)
Nicolas Stroppa
- 48 -
Rfrences
Rfrences
Site de rfrence : http://www.php.net Rasmus Lerdorf, Kevin Tatroe Programming PHP. OReilly, 2002. David Sklar Learning PHP 5. OReilly, 2004. GNU/Linux magazine Hors-Srie n 20 PHP 5 Sept./Oct. 2004.
Nicolas Stroppa
- 49 -

Web Dynamique

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Dynamique

Uploaded by

Copyright:

Available Formats

Introduction aux pages Web dynamiques

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Repose sur 3 standards :

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Le protocole HTTP - Quelques caractristiques

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Est un langage balises (famille SGML)

Permet la navigation de page en page (web = toile).

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Pourquoi des pages dynamiques ?

Pages dynamiques (CGI, PHP)

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Pourquoi des pages dynamiques ?

Pages dynamiques (CGI, PHP)

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Pourquoi des pages dynamiques ?

Pages dynamiques (CGI, PHP)

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Pourquoi des pages dynamiques ?

Pages dynamiques (CGI, PHP)

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Pourquoi des pages dynamiques ?

Pages dynamiques (CGI, PHP)

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Deux types de dynamicit

Dynamicit ct serveur : CGI, PHP

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit

Deux types de dynamicit

Dynamicit ct serveur : CGI, PHP

Introduction au Web dynamique

Introduction Principes et exemples de pages dynamiques Suivi de connexion

Rappels (HTTP, HTML, URL) Les pages dynamiques : une ncessit