Architectures Web 3-Tiers:notions de base

1. Introduction2. Web 1.0 3. Web 2.04. Pages actives (Web 1.5)5. Bilan

2

1. Evolution des architectures

IHMApplications

Applications TransactionsBases de données

PC Serveurs d’entreprise

Besoins• Ergonomie• Simplicité• Intégration

Besoins• Fiabilité• Scalabilité• Perfs

C/S 2 tiers

C/S 3 tiers

Standards : SQL3, DTP, CORBA, etc.

Standards : Web, Java, XML, etc.

Apps Internet :E-commerce,Intranet, Extranet

Architecture

3

Quelques notions de base

• ** Notion 1 : Serveur de données• Plate-forme gérant des bases de données à l’aide d’un SGBD

• ** Notion 2 : Serveur d’application• Plate-forme gérant des composants applicatifs (EJB, ActiveX,

Web Services) et de publication Web (Servelet, JSP, ASP, …)

• ** Notion 3 : Client [lourd, léger, riche]• Poste de travail avec logiciel de présentation associé gérant

l’IHM• Client lourd : code applicatif complet• Client léger : pas de code applicatif, présentation en

browser• Client riche : le code applicatif qu’il faut et des outils de

présentation sophistiqués (intelligent, smart client)

Architecture

4

Client/serveur 3-tiers

SGBD

ApplicationERP

BrowserWeb

Appareilmobile

ClientJava

ClientVB/C++

ServeurWeb

ServeurWAP

Parefeu

…Applicationmainframe

Serveurd’application

Tiers Client Tiers Milieu Tiers Backend

…

Architecture

5

Exemple: application de e-commerce

Interface Utilisateurs Logique Application etTransaction

Logique Données

Serveur dePaiement

Navigateur ClientNavigateur Client

CaddieAppletJava

Serveur d’ApplicationServeur d’Application

ComposantPaiement

ComposantCatalogue

ComposantCommande

Serveur de donnéesServeur de données

Validation Commande

Architecture

6

2. Rappels Web 1.0

• W3C = Organisme chargé de standardiser les protocoles et langages relatifs au Web

• Web 1.0 = Service Internet permettant de naviguer à travers des pages HTML statiques via HTTP

• HTTP (HyperText Transfer Protocol) est le protocole le plus utilisé pour envoyer les requêtes et recevoir les pages; il en est actuellement à sa version 1.1.

• HTTPS est une version sécurisée permettant de crypter les échanges.

Web

7

HTML et DHTML (côté client)

• HTML 4.01 • Dernière version de HTML, les nouveaux

développements portant sur XML (langage à tags ouverts)

• ** Notion 4 : DHTML (Dynamic HyperText Markup Language) • Ensemble de spécifications complémentaires au

HTML permettant de rendre une page web dynamique côté client:• Jscript• DOM• CSS

Web

8

Jscript et DOM

• ** Notion 5 : JScript • langage de programmation, permettant d’écrire

des scripts (programmes en texte dans la page HTML) exécutés sur le navigateur du client

• appelé JavaScript à l’origine, norme ECMA

• ** Notion 6 : DOM (Document Object Model) • modèle d'objets représentant la structure

arborescente d’un document HTML ou XML• permet de manipuler l'ensemble des objets

contenus dans le document en particulier avec Javascript

Web

9

Feuilles de style CSS

• ** Notion 7 : Feuille de style• Ensemble d’instruction permettent la mise en page

et la présentation de contenus HTML ou XML• CSS pour HTML étendue à XML, XSL pour XML

• Les feuilles de style (CSS - Cascading Style Sheets)• permettent de définir de façon annexe au

document les styles de chaque balise• peuvent être incluse dans le même fichier ou

référencées.• un même document peut avoir plusieurs styles

selon le terminal d'affichage.

Web

10

Exemple

BODY {color: #000 ;background: #FBFBFF ;margin-left: 9% ;margin-right: 6% ;font-family: "Helvetica", sans-serif ;line-height: 1.35 ;

}

BODY {color: #000 ;background: #FBFBFF ;margin-left: 9% ;margin-right: 6% ;font-family: "Helvetica", sans-serif ;line-height: 1.35 ;

}

[ ... ]TD, TH { font-family: "Arial" ; line-height: 1.35 ;}

H1, H2 { margin-top: 1.2em ; margin-left: -7% ; color: #900 ; clear: both ;}[ ... ]

[ ... ]TD, TH { font-family: "Arial" ; line-height: 1.35 ;}

H1, H2 { margin-top: 1.2em ; margin-left: -7% ; color: #900 ; clear: both ;}[ ... ]

<LINK REL="stylesheet" HREF="fichier.css"><LINK REL="stylesheet" HREF="fichier.css">

Web

11

Web 1.0 : Difficultés

• Appels au serveur bloquants• synchronisme

• Difficulté pour la validation de formulaires / BD

• Renvoi du formulaire entier avec marques d’erreurs

• Paramètres des programmes• Doublets (nom=’valeur’) en

ASCII• Pas de structures objets

• Pas de contrats entre client et serveur

• Pas de publication de l’interface selon un standard

• Problème si changement

12

3. Web 2.0: Définition et outils connexes

• Terme marketing inventé par O’Reilly Media

• D’après Wikipedia, l’encyclopédie du Web 2.0• « terme souvent utilisé pour désigner ce qui est

perçu comme une transition importante du World Wide Web, passant d'une collection de sites Web à une plateforme informatique à part entière, fournissant des applications Web aux utilisateurs. Les défenseurs de ce point de vue soutiennent que les services du Web 2.0 remplaceront progressivement les applications de bureau traditionnelles. »

Web 2.0

13

Web 2.0: Des techniques éprouvées

• HTTP et HTTPS: Protocoles • URI: Identifiants logiques universels • XHTML: version XMLisée de HTML • CSS 2.0 : Feuilles de style étendues• XSL : Feuilles de style pour XML• JScript: langage de script (JavaScript)• Service Web: Composant décrit et invoqué en

XML

WeWeb 2.0

14

Web 2.0 : Des techniques nouvelles

• Ajax: XML sur HTTP en mode asynchrone via Javascript

• Résout le problème du synchronisme

• REST: Style d’architecture de services avec appels HTTP

• XForms: Saisie déclarative contrôlée en XML

• XUL/XAML: Présentation déclarative en XML

• RDF: Langage d’annotation de ressource en XML

• RSS et ATOM: Syndication de contenus

• …

15

Web 2.0 : Quelques notions

• ** Notion 8 : Web Service• composant logiciel dont l’interface est décrite en

XML (WSDL) et invoquée en XML (SOAP)

• ** Notion 9 : Ajax• technique pour échanger et manipuler les données

de manière asynchrone avec le serveur Web

• ** Notion 10 : Architecture REST• manière de construire une application distribuée

sur le Web comme un automate d’état fini, utilisant des URL virtuelles pour référencer les ressources et invoquer les services

16

Un côté social via interactivité et groupes

• Création de réseaux sociaux de sites Web dynamiques• Utilisation de moteurs de recherche ciblés sur des

sites d’intérêt• Développement de sites composites à partir d’autres

par composition et agrégation (mesh-ups)• Partage, collaboration, implication

• valeurs fondamentales du Web 2.0 • une évolution des usages au-delà des avancées techniques

• Basée sur une interaction forte entre Web et BD• Le Web profond• Content Mangement Systems • Mise à jour avec versions

Web 2.0

17

Wikis: L’outil de collaboration

• ** Notion 11 : Wiki• Application Web collaborative permettant aux

utilisateurs de créer des contenus et à n’importe qui [autorisé] de les éditer sans restriction

• Simplification du processus de création de pages Web, avec création incrémental de connaissance en groupe

• L’encyclopédie universelle éditable:

Web 2.0

18

4. Pages web dynamiques

• Faiblesses des pages statiques côté serveur• Gestion de fichiers multiples mais reliés• Maintenance difficile du fait de l'obligation de modifier

manuellement chacune des pages• Impossibilité de renvoyer une page personnalisée

selon le visiteur • Impossibilité de créer une page dynamiquement selon

le contenu d'une base de données

• Nécessité de publier des contenus dynamiques• CMS : Content Management Systems• Des données fixes et dynamiques mixées• Il est nécessaire de s'appuyer sur les BD

Web

19

XHTML/XML dynamique côté serveur

• ** Notion 12 : CGI (Common Gateway Interface)• CGI consiste à activer des programmes par des URL longues

puis de leur faire renvoyer un contenu HTML/XML

• ** Notion 13 : ASP (Active Server Pages) de Microsoft • permet de simplifier l'écriture de scripts serveurs en

manipulant des objets en 20 langages au sein de pages Web XHTML/XML

• ** Notion 14 : JSP (Java Server Pages)• permet d'utiliser la puissance de Java pour créer des pages

web dynamiques.

• ** Notion 15 : PHP (Hypertext Preprocessor)• langage simple bien adapté au Web pour manipuler des

objets côté serveur au sein de pages Web XHTML/XML

Web

20

ClientServeur Web

Prog. CGI

Page HTML

téléchargement

url longue

Page HTML

donnéesréponse

Common Gateway Interface (CGI)

• Protocole d’appel dynamique de programme sur un serveur Web depuis un client• Extension de HTTP à l’invocation de programme• Passage des paramètres via des URL longues• Programmes ou scripts invoqués par CGI

CGI

21

Passage de paramètres

• Par URL longue (GET) ou corps de requête (POST)• ** Notion 16 : URL longue

• URL suivie d’un nom de programme et des paramètres à passer au programme via CGI

• Exemple : • http://news.google.fr/news?oe=utf-8

&client=firefox&tab=wn&ned=fr&topic=n

• ** Notion 17 : URL virtuelle• URL générée par un serveur pour identifier une ressource,

passée au client pour lui permettre d’invoquer le service (architecture REST)

• Exemple :• http://www.amazon.fr/Bases-donnees/Georges-Gardarin/

dp/2212112815/

22

Web Service : invocation via SOAP

CGI

23

4.1 Les ASP de Microsoft

• Standard mis au point par Microsoft en 1996• Développement d'applications Web dynamiques• Intégration de scripts serveur au sein d'une page

HTML à l'aide de balises spéciales• Interprété puis compilé avec la version .NET• Généralisé à XML

• Environnement de programmation côté serveur• permettant de représenter sous forme d'objets les

interactions entre le navigateur du client, le serveur web, ainsi que les connexions à des bases de données via SQL (ADO)

ASP

24

Exemple d’accès BD

• Intégration à HTML• réception des paramètres

du formulaire (URL longue ou Web service)

• émission des requêtes BD• récupération des résultats

et publication du HTML

• Accès par objets à la BD• Accès à la base via ADO• Création d’objets données• Extraction des attributs

par méthodes

<HTML>

<%

Vin=Request.QueryString("NumVin")

Set NObj=Server.CreateObject("VINS.NumVin")

if NObj.GetCru(Vin)=False then

Server.Redirect("NumVin/entryform.htm")

%>

<H1> VIN CHOISI :<%=NObj.Cru%> </H1>

<TABLE>

<TR><TD>Degre</TD><TD>Millesime</TD><TD>Region</TD></TR>

<TR><TD><%=NObj.Degre%></TD>

<TD><%=NObj.Mill%></TD>

<TD><%=NObj.Region%></TD></TR>

</TABLE>

<H2> DATE DE SELECTION : <%=time()%><%=date()%></H2>

</HTML>

ASP

25

Un environnement riche

• Objets techniques• Objets de présentation• Objets métiers

ASP

26

ASP et .NET

VB C++ JScript …C#

ASP.NET ADO.NETBCL.NET

Common Language Runtime (CLR)

Windows et COM+ Services

SOAP&

XML

Toolkits

VisualStudio.NET

ASP

27

4.2 Les JSP du monde Java

• Possibilité de définir des documents mixtes• HTML/XML• Java (Scriptlets)• Appel de servlet (balise <servlet>) • Communication par des variables• Utilisation de tags <% … %> (similaire aux ASP)

• Compilés en Servlet• Lors de la première utilisation• Prise en compte automatique des mises à jour

• Possibilité d'intégrer des JavaBeans

JSP

28

Objets d'environnements

Objet Description

request Objet contenant la requête du client

responseObjet contenant la réponse de la page JSP. Généralement inutilisé (HTML en flux de sortie)

pageContext Objet contenant des informations sur l'environnement du serveur

session Objet contenant la session en cours

application Objet contenant le contexte de servlet

out Objet contenant le flux de sortie

config Objet contenant la configuration de la servlet

page Objet désignant la page elle-même

exception Objet représentant une exception non interceptée

JSP

29

Les servlet Java

• Servlet• Moteur multi-thread d'exécution de classe côté

serveur• Approche API objet (e.g., services, httprequest)• L’utilisateur surcharge de méthodes standards• Dialogue au-dessus de HTTP, RMI, … via CGI

améliorée

• Accès aux BD• JDBC : interface type ODBC (CLI RDA) depuis Java• SQLJ : incorporation d'ordres SQL dans Java pré-

compilésJSP

30

Accès BD : JDBC

// ConnexionConnection con =

DriverManager.getConnection(url);// Création d'une instructionStatement statement =

con.createStatement();// Exécution d'une requeteString query = "SELECT * FROM Employés";ResultSet resultset =

statement.executeQuery(query);// Traitement des résultatswhile(resultset.next()) {System.out.println(resultset.getString(2) +

" " + resultset.getString(3)); }// fermeture de la connexioncon.close();}

Application Serveur dedonnées

Base dedonnées

SQL

ResultSet

JSP

31

JSP et J2EE

Conteneur web Conteneur EJB

Servlet JSP

RM

I

JND

I

JTA

JDB

C

JMS

JavaM

ail

JAX

RM

I

JND

I

JTA

JDB

C

JMS

JavaM

ail

JAX

EJB

Serveur d'applications

Base de données Autres ressources

JSP

32

4.3 PHP de Apache (Open Source)

• Langage de scripts intégré aux pages HTML

• Très populaire pour site Web personnel et CMS

• Compilé en V4 et V5• Moteur Zend

• Package easyphp• PHP + Apache + MySQL• www.easyphp.org

• Langage simple et complet• calculs• contrôle• tableaux• objets (complet en PHP5)• fonctions• bibliothèques riches

• Les scripts PHP sont entre balises <?php … ?> ou <%... %>

• Possibilité de récupérer les variables de formulaires HTML

• $variable • Exemple :

<html> <head> <title>Hello World</title> </head> <body> <?php    echo "Hello world";  ?> </body>

</html>

PHP

33

Accès aux formulaires

• PHP transforme tous les champs en variables d' environnement (globales)• Directement accessibles par nom• Également accessibles dans les tableaux associatifs

$HTTP_POST_VARS et $HTTP_GET_VARS • suivant la méthode d' envoi GET ou POST

• Attention:• Il ne faut pas avoir deux zones de formulaires avec

le même nom sur la même page !

PHP

34

Accès aux BD

• Méthode similaire quelque soit le SGBD:• Oracle, Sybase, DB2, MS SQL Server• MySQL, PostgreSQL, InterBase• Pilote ODBC

• Il faut suivre la séquence :• 1.Connexion• 2.Requête• 3.Exploitation des résultats• 4.Fermeture de la connexion

PHP

35

Exemple: Publication d'une table

<html> <head> <title>Affichage des vins</title> </head> <body> <?php

mysql_connect("localhost","root","");

$connexion_reussi= mysql_selectdb("DEGUSTATION"); if (!$connexion_reussi) echo "Connexion râtée";

$request = "SELECT * FROM vins";if($result = mysql_query($request))

{while($ligne = mysql_fetch_row($result)) {

$nv = $ligne[0]; $cru = $ligne[1]; $mill = $ligne[2];echo "$nv - $cru, $mill

<br />";}

} else {echo "erreur de requête BD.";

} echo "Merci"; ?> </body></html>

PHP

36

5. Bilan : Un Web en évolution rapide

• Notions introduites• Serveur de données, Serveur d’applications• Client léger, lourd, riche• DHTML, JScript, DOM• Feuille de style (CSS, XSL)• Ajax, Wiki• REST, URL virtuelle• CGI, URL longue• Web service• ASP, JSP, PHP

BD WEB