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

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

ARCHITECTURE WEB – COURS I

[email protected]

[email protected]

(01 44 27 88 77)


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


PLAN

• Internet et les services

• Le Web: protocole (HTTP), langage (HTML) et serveurs web

• Le Web dynamique


Internet et les services

• Internet et les services– Internet: rappel– Services dans l’Internet– Client/Serveur

• Le Web: protocole (HTTP), langage (HTML) et serveur 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

Source: www.cybergeography.org/atlas/atlas.html


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

http://www.univ-paris12.fr/ miage/index.html


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)

http:// www.univ-paris12.fr /miage/index.htmliup:miage@ :81 #Intro


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


Principe

Processus client

Processus serveur

Processus client

Requête

Requête

Réponse

Réponse

STATION A SERVEUR B


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


World Wide Web


• Le Web: protocole (HTTP), langage (HTML) et serveur web– Historique du Web– Évolution du Web– Architecture de base– Les standards– Serveur 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é


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


Evolution du Web

• Evolution en part de marché des différents serveurs Web

• Evolution du nombre de serveurs Web

Multiplié par 2 /an !

Source: http://www.netcraft.com/survey/


Architecture de base

HTTP

Client Web Serveur Web

Pages HTML


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


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 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


Requête HTTP (3)

• Requête HTTP de http://www.univ-paris12.fr/miage/garde.html

GET /miage/garde.html HTTP/1.1Host: www.univ-paris12.frUser-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.0.1) Gecko/20020830Accept: 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.1Accept-Language: en-us, en;q=0.50Accept-Encoding: gzip, deflate, compress;q=0.9Accept-Charset: ISO-8859-1, utf-8;q=0.66, *;q=0.66Keep-Alive: 300Connection: keep-alive

Method GET+URI+Protocol version

Request Header

NB: ici l’URI est l’URI relative car la connexion avec le serveur HTTP est établie


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…


Réponse HTTP (2)

• Réponse HTTP: HTTP/1.1 200 OKDate: Wed, 18 Dec 2002 21:11:45 GMTServer: Apache/1.3.27 (Unix) PHP/4.2.3Last-Modified: Thu, 04 Apr 2002 16:35:39 GMTETag: "55c0b-30b-3cac80db"Accept-Ranges: bytesContent-Length: 779Keep-Alive: timeout=15, max=100Connection: Keep-AliveContent-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)

Protocol version+Status Code+Reason String


Réponse HTTP: status (3)

• 1xx Informational

• 2xx Success

• 3xx Redirection

• 4xx Client Error

• 5xx Server Error


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?


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?


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…


Structure d’un document en HTML

<HTML><HEAD>

<! META-INFORMATIONS: Auteurs, titres, mots-clés (indexation dans les moteurs de recherche), redirection ></HEAD>

<BODY> <! Description du document > …

</BODY></HTML>


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


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


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


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


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– ….


Serveur Apache: fichier de configuration

# Racine des fichiers de configurations, d’erreurs et de logsServerRoot "/etc/httpd" …# Port TCP d’écouteListen 80…# Utilisateur et groupe exécutant le démon httpd User apacheGroup apache…# Adresse de l’administrateur qui apparaît sur les pages générées par le serveur comme une page d’erreurServerAdmin root@localhost

# Racine dans le système de fichier des documents webDocumentRoot "/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>


Serveur Apache: fichier de configuration

# Nom du fichier de restriction d’accès à rechercher dans les répertoires contenant des documentsAccessFileName .htaccess

# Log les adresses IP ou le nom des clients (Off=IP,On=nom)HostnameLookups Off

# Fichier de log des erreursErrorLog logs/error_log

# Niveau d’alerte à reporter dans le fichier error.log choisi parmi debug, info, notice, warn, error, # crit, alert, emergLogLevel warn

# Définition de formats de logLogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combinedLogFormat "%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 scriptsscriptAlias /cgi-bin/ "/var/www/cgi-bin/"


World Wide Web dynamique


• 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


Du Web aux applications Web

• Objectifs: comment Objectifs: comment rajouter de rajouter de l’interactivité dans les l’interactivité dans les pages Web?pages Web?

• Solution: Solution: – Rajouter de Rajouter de

l’interactivité coté client l’interactivité coté client et/ou serveuret/ou serveur


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


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


Architecture étendue avec CGI

HTTP

Client Web Serveur Web

Pages HTML

statiques

Script CGI

Appli externe

CGIProtocole dédié

BD ou système de

fichiers

FormulaireHTML


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


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

NB: ici l’URI est l’URI absolue mais on peut utiliser l’URI relative pour désigner le CGI


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)


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

On obtient une page HTML dynamique!!


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


Formulaires et CGI (3)

Client Web Serveur WebScript CGI

1- Requête

2- Envoi

3- Validation4- Envoi vers CGI

5- Expédition sortie6- Envoi

sortie

Chargement du formulaire

Traitement des données

Réception sortie (HTML)

Complètement puis

HTML/HTTP CGI


Problème du CGI

Client Web 1

Processus serveur

Client Web 2

Requête

Requête

Réponse

Réponse

Démon Web

CGI

Process 1

Scripts CGI

Process 2

Serveur 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)


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


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


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


Exemple de CGI

• Affiche les variables d’environnement#!/bin/bash# Affiche les variables d’environnement##En-tête HTTPecho “Content-type: text/html “echo “”echo “”#Corps HTTPecho "<html> "echo "<body> "echo "<h1>Variables CGI</h1> "echo "<pre> "##La commande set affiche les variables d’environnement#set##Fermeture des balises ouvertesecho "</pre> "echo "</body> "echo "</html> "


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


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


Bibliographie

• Ouvrages– Texte, Hypertexte, Hypermédia, Roger Laufer et

Domenico Scavetta, Collection "Que sais-je" No 2629, ed, Presse Universitaires de France


Questions

?

?

?

??

??

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

Documents

Transcript of 1 / 54 10 / 01 / 2003 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB...