ARCHITECTURE WEB – COURS I Laurent.granie@free.fr Franck.legendre@lip6.fr (01 44 27 88 77) 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB OBJECTIFS Maîtriser les principes et protocoles employés par le Web Montrer l’évolution du Web De la diffusion d’information répartie vers l’exécution d’applications client/serveur 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB PLAN Internet et les services Le Web: protocole (HTTP), langage (HTML) et serveurs web Le Web dynamique 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Internet et les services Internet: rappel Services dans l’Internet Client/Serveur Le Web: protocole (HTTP), langage (HTML) et serveur web Le Web dynamique 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Internet Interconnexion de réseaux à l’échelle planétaire Crée par la DARPA en 1969 Protocole universel: TCP/IP (socket) Ensemble de services: Web, FTP, telnet, SMTP, … Fonctionne en mode Client/Serveur Faire un rappel sur les sockets TCP/IP Source: www.cybergeography.org/atlas/atlas.html 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Services dans l’Internet Un Service Une application (serveur) Joignable à une URL (Uniform Ressource Locator) ou URI (U.R.Identifier): Nom DNS Document Avec un protocole: HTTP À un port TCP (par défaut): port 80 Rappel sur la conversion nom DNS<->@IP par le DNS http:// www.univ-paris12.fr/ miage/index.html 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Services dans l’Internet (2) On peut préciser Un port différent autre que le port 80 (port par défaut) Une section d’un document Un couple d’authentification (user+passwd) Le couple d’authentification équivaut au login/mot de passe demandé par un serveur Web pour afficher une page Web protégée par un .htaccess http:// iup:miage@ www.univ-paris12.fr :81 /miage/index.html #Intro 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Rappel sur le Client/Serveur Notion de Service: un client demande un service à un serveur Ex: Prof/Elève Le client et le serveur peuvent être co-localisé ou distant Le client: interface entre l’utilisateur et un serveur Ex: Netscape, Mozilla, IE Un service dans l’Internet est le plus souvent en mode Client/serveur: Web, ftp, mail, news, etc A opposer avec le paradigme paire-à-paire où il n’y a plus de notion de « Maître-Esclvave », tout le monde est au même niveau 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Principe Processus client Requête Réponse Processus serveur Requête Processus client Réponse Indiquer qu’il faut nécessairement un protocole de communication entre serveur <-> client STATION A SERVEUR B 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Client/Serveur dans l’Internet Le client: interface entre l’utilisateur et un serveur Ex: Netscape, Mozilla, IE Le serveur: fournisseur de services au client Ex: Apache, Internet Information Server => un protocole de communication est nécessaire Protocole de communication est HTTP que nous verrons dans la partie qui suit… 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB World Wide Web Internet et les services Le Web: protocole (HTTP), langage (HTML) et serveur web Historique du Web Évolution du Web Architecture de base Les standards Serveur Web Le Web dynamique 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Historique du WWW 1965: Naissance du concept hypertext Inventé par Ted Nelson, étudiant en Philosophie Projet Xanadu interrompu en 1991 Mars 1989: Tim Berners-Lee du CERN reprend l’idée de Ted Nelson pour concevoir un système d’information performant Novembre 1990: Proposition de Tim Berners-Lee Tim Berners-Lee & R. Caillian, "World-Wide Web: Proposal for HyperText," CERN Memo, November 1990. Quelques mois plus tard: Le premier navigateur est écrit 1991: Le premier Serveur Web est développé Insister sur le fait de la croissance rapide des technologies Web (proposition par Tim Bernes-Lee en 1990!!, fin 1992: 26 serveurs Web seulement) et que ce cours est une base indispensable pour bien comprendre les technos futures du Web 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Historique du WWW (suite) Fin 1992: 26 Serveurs Web Mars 1994: Netscape Comm. Corp est créé par le développeur de Mosaic, premier navigateur graphique multi plateforme Juillet 1994: Création du W3C (WWW Consortium), organisme chargé de réglementer les standards en vigueur sur le Web et l'Internet Fondateurs: Tim Berners-Lee, MIT et CERN rejoint ensuite par l’INRIA et Keio University of Japan Insister sur le W3C qui réglemente les standards du Web: HTTP, HTML auparavant et aujourd’hui le XML 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Evolution du Web Evolution en part de marché des différents serveurs Web Evolution du nombre de serveurs Web Apache à la plus importante part de marché: un peu moins de 70% Croissance exponentielle du nombre de serveurs Multiplié par 2 /an ! Source: http://www.netcraft.com/survey/ 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Architecture de base Client Web Serveur Web HTTP Pages HTML 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Protocole HTTP Hyper Text Transport Protocol Protocole de communication entre Navigateur et Serveur Web (Requête <-> Réponse) Protocole applicatif (couche 7 OSI) en mode texte Protocole sans session Depuis HTTP/1.1, la connexion est persistante Dernière version du W3C (travail sur XML maintenant) Protocole peut sécurisé, solutions S-HTTP (Secure-HTTP) du NCSA SSL (Secure Socket Layer) proposé par Netscape Enfin le protocole de communication dont on arrêtait pas de parler Mode texte de HTTP: on verra à quoi ça correspond dans le premier TP Sol: les requêtes du protocole sont du texte qui transite en clair sur le réseau 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Requête HTTP Requête HTTP Requête simple: GET <URL> (version HTTP/0.9) Requête complète: <Méthode> <URI> <Version-HTTP> + <En-tête HTTP> Méthode= { GET | POST | HEAD | PUT | DELETE | TRACE | OPTIONS } URI= adresse du document Version-HTTP= { HTTP/1.0 | HTTP/1.1 } En-tête= Clé: valeur Requête simple: utilisée dans la première version d’HTTP: HTTP0.9 Requête complète: utilisée depuis HTTP/1.0 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Requête HTTP (2) GET: Requête du document identifié par l’URI POST: Envoie d’informations à un URI et attente de la réponse HEAD: Requête des méta-informations d’un document identifié par un URI 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Requête HTTP (3) Requête HTTP de http://www.univ-paris12.fr/miage/garde.html Method GET+URI+Protocol version GET /miage/garde.html HTTP/1.1 Host: www.univ-paris12.fr User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.0.1) Gecko/20020830 Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,video/x-mng,image/png,image/jpeg,image/gif;q=0.2,text/css,*/*;q=0.1 Accept-Language: en-us, en;q=0.50 Accept-Encoding: gzip, deflate, compress;q=0.9 Accept-Charset: ISO-8859-1, utf-8;q=0.66, *;q=0.66 Keep-Alive: 300 Connection: keep-alive Request Header Résultat de la requête obtenue par un sniffer Toute la partie grisée correspond à ce qu’envoie votre navigateur lorsque vous rentrez l’URL http://… dans la barre de navigation NB: ici l’URI est l’URI relative car la connexion avec le serveur HTTP est établie 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Réponse HTTP <Version-HTTP> <Code du statut> <Raison> Version-HTTP= idem requête Code de statut= état de la réponse (OK, !OK, …) Raison= explications sur le code du statut En-tête HTTP Clé: valeur Données de la réponse Code HTML, images, sons, etc… 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Réponse HTTP (2) Réponse HTTP: Protocol version+Status Code+Reason String HTTP/1.1 200 OK Date: Wed, 18 Dec 2002 21:11:45 GMT Server: Apache/1.3.27 (Unix) PHP/4.2.3 Last-Modified: Thu, 04 Apr 2002 16:35:39 GMT ETag: "55c0b-30b-3cac80db" Accept-Ranges: bytes Content-Length: 779 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: text/html <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Mozilla/4.7 [en] (X11; I; Linux 2.2.14-15mdk i686) [Netscape]"> <title>Miage Paris 12</title> </head> <body background="bg.jpg" Response Header Code HTML (HTTP Response data) En-tête HTTP correspond au protocole de communication entre le client et le serveur: cette en-tête est à destination du client Web, ie le navigateur. Montrer l’importance de la clé Content-type qui indique le type de contenu du corps HTTP (HTTP Response data). On retrouvera cette clé lors de l’écriture de notre CGI en TP. Le corps HTTP est à destination de l’utilisateur. Faire un schéma montrant l’encapsulation du code HTML dans HTTP/TCP/IP/ 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Réponse HTTP: status (3) 1xx Informational 2xx Success 3xx Redirection 4xx Client Error 5xx Server Error 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Exercices Connectez vous en telnet sur www.univ-paris12.fr Port 80 URI: /miage/garde.html Faîtes un requête simple Faîtes une requête complète en testant plusieurs méthodes GET HEAD Version-HTTP= HTTP/1.1 <Clé: valeur> de l’en-tête à préciser ( Attention: la clé Host doit toujours être précisée lorsqu’on utilise la version HTTP/1.1) Après une requête complète de /miage/garde.html, rapatriez /miage/logo.gif? Quelle différence observez-vous entre une requête simple et une requête complète dans le comportement du serveur? Réponse 3ème question: connexion non persistante < HTTP/1.1 = connexion persistante 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Exercices (2) D’après-vous quel impact à cette différence de comportement sur le trafic de l’Internet? Essayez d’obtenir différents status pour les réponses HTTP? Quel est le type du serveur (sa marque)? Lancez un navigateur Web et connectez-vous à l’URL www.univ-paris12.fr/miage/garde.html Afficher la source de la page: menu Affichage -> Source A quoi correspond ce que vous visualisez? Réponse 4ème question: -pour les versions < HTTP/1.1, une connexion TCP différente doit être établie pour chaque objet multimédia d’une page HTML (code HTML, images, video, etc) -pour la version = HTTP/1.1, la connexion TCP est persistante pendant la valeur du timeout (Cf. Keep-Alive dans l’en-tête HTTP), tous les objets multimédia d’une page sont téléchargés à partir de la même connexion « persistante » TCP. Conséquences: HTTP/1.1 génère moins de trafic dans l’Internet car moins de trafic du aux connexions 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Langage HTML Hyper Text Markup Language Langage de description de page Web Grammaire à base de marqueurs ou balises Evolution HTML 1.0 - 2.0 (1er standard) - ... - 3.2 (le plus courant) - 4.0 (dernière Norme W3C) Nouvelle norme: XHTML (HTML+XML) Les balises permettent de décrire un document avec: Titres, paragraphes, listes, tableaux, liens hypertexte, images, formulaires, etc… HTML 4.0 est la dernière norme HTML. IL n’y aura plus de nouvelles versions car remplacé par le XML Introduire le XML qui ne pourra être traité durant ce cours: le XML est une généralisation du paradigme des langages de description à base de balises 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Structure d’un document en HTML <HEAD> <! META-INFORMATIONS: Auteurs, titres, mots- clés (indexation dans les moteurs de recherche), redirection > </HEAD> <BODY> <! Description du document > … </BODY> </HTML> Faire un schéma détaillant le corps HTML encapsulé dans l’en-tête HTML encapsulé dans le corps HTTP, etc … 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Exemple de code HTML <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Mozilla/4.7 [en] (X11; I; Linux 2.2.14-15mdk i686) [Netscape]"> <title>Miage Paris 12</title> </head> <body background="bg.jpg">   <blockquote><img SRC="logo.gif" BORDER=0 height=130 width=283 align=BOTTOM> <p><b><font size=+2>IUP MIAGE</font> et <font size=+2>DESS ISI</font></b> <p><b>71, rue Saint-Simon<font size=-1>, </font>94017 Créteil cedex</b> <p><b>tel. 01 45 17 03 52 (formation initiale et européenne)</b> <br><b>tel. 01 45 17 03 55 (formation en apprentissage et continue)</b> <br><b>tel. 01 45 17 21 67 (DESS)</b></blockquote> <br>  </body> </html> En-tête HTML Corps HTML <p>: paragraphe <b>: bold 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Serveur WWW: fonctions Gère les connections des clients Web Assure la protection des documents statiques (pages HTML, documents multimédias, programme) Vérifie la validité des requêtes et les droits des clients Exécute les requêtes des clients Rappel sur la notion de démon sous Windows et Unix: httpd 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Serveur WWW: gestion des documents Les documents sont stockés sur le système de fichiers de la machine serveur Arborescence de fichiers Par défaut, à partir d’un répertoire racine fixé par l’administrateur (ou Webmaster) A partir du répertoire /public_html à la racine d’un compte utilisateur Les documents doivent être en lecture pour le démon serveur http afin qu’il puisse y accéder Bien monter qu’on indique en paramètre au serveur web la racine des documents HTML et que le « / » à la fin d’une URL indique la racine des documents HTML, racine qui correspond à un répertoire dans le SE de la machine serveur 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Serveur WWW: protection des documents Protection standard par le système de fichiers du système d’exploitation (Cf. autorisations d’accès) Protection propre au serveur Web pour accéder à un document Accès avec un nom d’utilisateur et un mot de passe (Cf. .htaccess) Accès à partir d’un domaine IP Accès depuis certaines machines 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Serveur Apache Apache est un serveur Web multi plateforme (Windows, Unix, …) Un démon httpd écoute en permanence sur le port 80 (port par défaut) et accepte les connexions Un fichier de configuration httpd.conf permet de configurer le serveur Port TCP d’écoute Racine des documents web dans le système de fichier du serveur Configuration de la sécurité Configuration des logs de connexions et d’erreurs …. 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Serveur Apache: fichier de configuration # Racine des fichiers de configurations, d’erreurs et de logs ServerRoot "/etc/httpd" … # Port TCP d’écoute Listen 80 # Utilisateur et groupe exécutant le démon httpd User apache Group apache # Adresse de l’administrateur qui apparaît sur les pages générées par le serveur comme une page d’erreur ServerAdmin root@localhost # Racine dans le système de fichier des documents web DocumentRoot "/home/www/" #Configuration du répertoire de la racine des documents web <Directory "/home/www/"> Options Indexes FollowSymLinks AllowOverride All Order allow,deny Allow from all </Directory> DocumentRoot «/home/www/ » donc la racine « / » de l’URL pointe sur ce chemin dans le SE 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Serveur Apache: fichier de configuration # Nom du fichier de restriction d’accès à rechercher dans les répertoires contenant des documents AccessFileName .htaccess # Log les adresses IP ou le nom des clients (Off=IP,On=nom) HostnameLookups Off # Fichier de log des erreurs ErrorLog logs/error_log # Niveau d’alerte à reporter dans le fichier error.log choisi parmi debug, info, notice, warn, error, # crit, alert, emerg LogLevel warn # Définition de formats de log LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined LogFormat "%h %l %u %t \"%r\" %>s %b" common # Fichier de log des connexions et son format associé CustomLog logs/access_log combined # Indique les répertoires contenant des scripts scriptAlias /cgi-bin/ "/var/www/cgi-bin/" 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

World Wide Web dynamique Internet et les services Le Web: protocole (HTTP), langage (HTML) et serveurs web Le Web dynamique Du Web aux applications Web Architecture étendue Limites du Web Évolution du Web 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Du Web aux applications Web Objectifs: comment rajouter de l’interactivité dans les pages Web? Solution: Rajouter de l’interactivité coté client et/ou serveur 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Interactivité coté client Formulaire HTML Interaction simple entre l’utilisateur et le serveur JavaScript Permet de vérifier un formulaire, afficher des fenêtres pop-up, … Applet Java « Petite Application » Java compilée Téléchargée à partir d’un serveur Web Exécution sécurisée par la JVM du client Web 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Interactivité coté serveur CGI (Common Gateway Interface) Historiquement premier protocole permettant de créer des pages dynamiques PHP, ASP (Microsoft) Java Server Pages (JSP) Servlets Equivalent du CGI pour Java avec des extensions Application Java compilée Réside sur le serveur Exécution par la JVM du serveur 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Architecture étendue avec CGI Client Web Serveur Web Protocole dédié HTTP CGI Script CGI Appli externe FormulaireHTML Pages HTML statiques BD ou système de fichiers 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Formulaire HTML Un formulaire autorise l’interactivité entre le client et le serveur Un formulaire contient: Des zones de saisie avec des boutons, des listes de choix, … Un attribut action qui définit l’URL d’un programme exécutable sur le serveur Un attribut method qui définit le mode de transfert des données vers le programme 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Formulaire HTML: exemple (2) Formulaire avec deux champs et deux choix utilisant la méthode GET <html> <body> <form METHOD=GET ACTION="http://localhost/~gX/monprog.cgi"> Utilisateur: <INPUT TYPE=TEXT SIZE=10 NAME=user VALUE=""><BR> Mdp: <INPUT TYPE=PASSWORD SIZE=8 NAME=passwd><BR> Retenir le mot de passe? <INPUT TYPE=RADIO NAME=remember VALUE=yes> oui <INPUT TYPE=RADIO NAME=remember VALUE=no> non <BR> <INPUT TYPE=RESET VALUE="Clear Form"> <INPUT TYPE=SUBMIT VALUE="Envoyez" > </form> </body> </html> URL du CGI Code HTML du formulaire Faire la correspondance entre le METHOD=GET et le GET du protocole HTTP NB: ici l’URI est l’URI absolue mais on peut utiliser l’URI relative pour désigner le CGI 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Programmation CGI Communication entre le serveur Web et le script CGI Un ensemble de variables d’environnement (GET) L’entrée standard du processus CGI en exécution (POST) La sortie standard du processus CGI en exécution Problème de sécurité Exécution du script avec le minimum de droits Eviter l’accessibilité du code source du script Vérifier les données en provenance du formulaire (Cf. JavaScript) 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Formulaires et CGI Principe de fonctionnement L’utilisateur remplit son formulaire Le formulaire est envoyé au serveur Web Le serveur positionne les variables d’environnements CGI Le serveur lance l’exécution du script CGI avec le contenu du formulaire Le script CGI fabrique le document (HTML) et le renvoie au serveur sur sa sortie standard Le serveur renvoie le document au client Bien préciser que ce principe est celui de la méthode GET On obtient une page HTML dynamique!! 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Formulaires et CGI (2) Contenu du formulaire Une chaîne de caractères représentant une liste d’éléments du formulaire (champ=valeur) Méthode GET La chaîne est ajoutée à l’URL désignant le script Elle est mise dans la variable d’environnement QUERY_STRING Méthode POST La chaîne est envoyée dans une séquence spéciale Elle est transmise au script sur son entrée standard 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Formulaires et CGI (3) Client Web Serveur Web HTML/HTTP CGI Script CGI 1- Requête Chargement du formulaire 2- Envoi Complètement puis 3- Validation 4- Envoi vers CGI Traitement des données 5- Expédition sortie Réception sortie (HTML) 6- Envoi sortie 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Problème du CGI Serveur Web Client Web 1 Process 1 Requête Processus serveur CGI Réponse Requête Client Web 2 Réponse Process 2 Démon Web Scripts CGI 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

FastCGI: solution au CGI Script persistant (démon) Script décomposé en 3 parties: Initialisation: une seule fois Code du script exécuté à chaque requête Terminaison: une seule fois Initialisation doit inclure le code «coûteux» (ex: connexion à une BD) 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Interfacer le Web et les BD Script CGI C et PL/SQL, C et Pro*C, Perl et DBI, … Java et JDBC Solutions Microsoft: IIS et IDC ASP et ADO Autres: SQL~Surfer de Net@Way L’environnement Oracle Web Server 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Limites du Web Performances Le réseau Internet => Augmenter les débits Script CGI et FastCGI sont remplacés par de nouvelles technologies: PHP, ASP, Applets, Servlets, JSP Sécurité S-HTTP (Secure-HTTP) du NCSA offre une version sécurisée d’HTTP SSL (Secure Socket Layer) proposé par Netscape pour sécuriser les applications au dessus de TCP/IP 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Limites du Web (2) Gestion des transactions Pas possible avec HTTP 0.9 et 1.0 Pas de session Une solution est d’utiliser les cookies HTTP 1.1 Intègre la notion de connexion persistante (au niveau TCP) Interfaces utilisateurs Limitation du HTML et des formulaires Solution: Java Il y a d’autres solutions pour la gestion des transactions vu dans les cours suivants: -URL Rewriting -Hidden Form fields 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Exemple de CGI Affiche les variables d’environnement #!/bin/bash # Affiche les variables d’environnement # #En-tête HTTP echo “Content-type: text/html “ echo “” #Corps HTTP echo "<html> " echo "<body> " echo "<h1>Variables CGI</h1> " echo "<pre> " #La commande set affiche les variables d’environnement set #Fermeture des balises ouvertes echo "</pre> " echo "</body> " echo "</html> " Insister sur le Content-type <pre> permet d’afficher en brut du texte sans modification du format 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Exercices Conception d’une page HTML statique Codez une page HTML simple et affichez là dans votre navigateur Modifiez votre page et ajouter y un formulaire Connexion au serveur Apache Utilisez telnet pour vous connecter au serveur Apache du TP Consultez le fichier de configuration /etc/apache/httpd.conf Téléchargement de votre page dans le serveur Apache Utilisez le protocole FTP pour télécharger votre page dans votre compte Connectez-vous en telnet et créez dans votre compte un répertoire public_html, déplacez votre page dans ce répertoire (éventuellement modifier les droits d’accès) Testez l’accessibilité de votre page à l’URL: http://<adresse_serveur>/~gX/<ma_page.html> où X correspond à votre numéro de groupe Pour la Q1: un mini-tutoriel HTML est disponible sur http://www-rp.lip6.fr/~legendre/ Pour le FTP: -Connexion au serveur: ftp <@serveur_ftp> -Passer en mode ascii: ftp>ascii -Upload: ftp> put <nom_fichier> 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Exercices (2) Conception d’un CGI Dans votre compte, créez le répertoire ~/public_html/cgi-bin Ecrivez et téléchargez le CGI vu en cours par ftp Modifiez les droits d’accès au CGI (chmod 755) Testez votre CGI à l’URL http://<adresse_serveur>/~gX/cgi-bin/<moncgi.cgi> Utilisez un formulaire pour envoyer des paramètres au CGI. Selon la méthode employée, vérifiez que la variable d’environnement QUERY_STRING contient bien vos paramètres 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Bibliographie Ouvrages Texte, Hypertexte, Hypermédia, Roger Laufer et Domenico Scavetta, Collection "Que sais-je" No 2629, ed, Presse Universitaires de France 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB Questions ? ? ? ? ? ? ? 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB