1 / 54

ARCHITECTURE WEB – COURS I

ARCHITECTURE WEB – COURS I. ARCHITECTURE WEB. Laurent.granie@free.fr Franck.legendre@lip6.fr (01 44 27 88 77). OBJECTIFS. Maîtriser les principes et protocoles employés par le Web Montrer l’évolution du Web

kimama
Download Presentation

ARCHITECTURE WEB – COURS I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

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

  4. 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 • Le Web dynamique Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  5. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  6. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  7. 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:// iup:miage@ www.univ-paris12.fr :81 /miage/index.html #Intro Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  8. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  9. Principe Processus client Requête Réponse Processus serveur Requête Processus client Réponse STATION A SERVEUR B Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  10. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  11. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  12. 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é Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  13. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  14. 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/ Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

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

  16. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  17. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  18. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  19. 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 NB: ici l’URI est l’URI relative car la connexion avec le serveur HTTP est établie Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  20. 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… Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  21. 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) Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

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

  23. 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é Hostdoit 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? Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  24. 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? Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  25. 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… Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  26. 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> Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  27. 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"> &nbsp; <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&eacute;teil cedex</b> <p><b>tel. 01 45 17 03 52 (formation initiale et europ&eacute;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>&nbsp; </body> </html> En-tête HTML Corps HTML Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  28. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  29. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  30. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  31. 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 • …. Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  32. 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> Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  33. 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/" Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  34. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  35. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  36. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  37. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  38. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  39. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  40. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  41. 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) Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  42. 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!! Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  43. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  44. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  45. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  46. 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) Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  47. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  48. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  49. 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 Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

  50. 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 “” 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> " Laurent GRANIE & Franck LEGENDRE – MIAGE 3ème année - ARCHITECTURE WEB

More Related