Serveur d`Application

Architectures Web 3-Tiers:
notions de base
1.
2.
3.
4.
5.
Introduction
Web 1.0
Web 2.0
Pages actives (Web 1.5)
Bilan
1. Evolution des architectures
Serveurs d’entreprise
PC
Besoins
• Ergonomie
• Simplicité
• Intégration
IHM
Applications
Standards :
Web, Java,
XML, etc.
C/S 2 tiers
C/S 3 tiers
Apps Internet :
E-commerce,
Intranet, Extranet
Architecture
‹#›
Applications
Transactions
Bases de données
Standards :
SQL3, DTP,
CORBA, etc.
Besoins
• Fiabilité
• Scalabilité
• Perfs
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
‹#›
Client/serveur 3-tiers
Tiers Milieu
Tiers Client
Appareil
mobile
Browser
Web
Client
Java
Client
VB/C++
Architecture
SGBD
Serveur
WAP
Serveur
Web
Tiers Backend
Serveur
d’application
Application
ERP
Parefeu
…
…
‹#›
Application
mainframe
Exemple: application de e-commerce
Serveur de
Paiement
Composant
Paiement
Composant
Catalogue
Composant
Commande
Caddie
Applet
Java
Validation Commande
Navigateur Client
Interface Utilisateurs
Architecture
Serveur d’Application
Logique Application et
Transaction
‹#›
Serveur de données
Logique Données
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
‹#›
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
‹#›
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
‹#›
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
‹#›
Exemple
<LINK REL="stylesheet" HREF="fichier.css">
BODY {
color: #000 ;
background: #FBFBFF ;
margin-left: 9% ;
margin-right: 6% ;
font-family: "Helvetica", sans-serif ;
line-height: 1.35 ;
}
Web
‹#›
[ ... ]
TD, TH {
font-family: "Arial" ;
line-height: 1.35 ;
}
H1, H2 {
margin-top: 1.2em ;
margin-left: -7% ;
color: #900 ;
clear: both ;
}
[ ... ]
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
‹#›
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
‹#›
Web 2.0: Des techniques éprouvées
•
•
•
•
•
•
•
We
Web 2.0
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
‹#›
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
• …
‹#›
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
‹#›
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
‹#›
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
‹#›
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
‹#›
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
‹#›
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
Serveur Web
Client
téléchargement
Page
HTML
données
CGI
Page
HTML
url longue
réponse
‹#›
Prog.
CGI
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/GeorgesGardarin/dp/2212112815/
‹#›
Web Service : invocation via SOAP
CGI
‹#›
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
‹#›
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
ASP
<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>
‹#›
Un environnement riche
• Objets techniques
• Objets de présentation
• Objets métiers
ASP
‹#›
ASP et .NET
VB
SOAP
&
XML
C++
ASP.NET
C#
BCL.NET
JScript
…
ADO.NET
Toolkits
Common Language Runtime (CLR)
Windows et COM+ Services
ASP
‹#›
Visual
Studio
.NET
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
‹#›
Objets d'environnements
Objet
JSP
Description
request
Objet contenant la requête du client
response
Objet 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
‹#›
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és
JSP
‹#›
Accès BD : JDBC
// Connexion
Connection con =
DriverManager.getConnection(url);
// Création d'une instruction
Statement statement = con.createStatement();
// Exécution d'une requete
String query = "SELECT * FROM Employés";
SQL
ResultSet resultset =
statement.executeQuery(query);
// Traitement des résultats
while(resultset.next()) {
System.out.println(resultset.getString(2) + " " +
ResultSet
resultset.getString(3)); }
Application
Serveur de
// fermeture de la connexion
données
con.close();
}
JSP
‹#›
Base de
données
JSP et J2EE
Serveur d'applications
Conteneur EJB
Conteneur web
JSP
Autres ressources
‹#›
JAX
Java
Mail
JMS
JDBC
JNDI
RMI
JAX
Java
Mail
JMS
JDBC
Base de données
JTA
EJB
JSP
JTA
JNDI
RMI
Servlet
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
• 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>
• Package easyphp
• PHP + Apache + MySQL
• www.easyphp.org
• Langage simple et complet
•
•
•
•
•
•
PHP
calculs
contrôle
tableaux
objets (complet en PHP5)
fonctions
bibliothèques riches
‹#›
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
‹#›
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 :
•
•
•
•
PHP
1.Connexion
2.Requête
3.Exploitation des résultats
4.Fermeture de la connexion
‹#›
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";
PHP
$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>
‹#›
5. Bilan : Un Web en évolution rapide
• Notions introduites
•
•
•
•
•
•
•
•
•
BD WEB
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
‹#›