Architectures Web 3-Tiers: notions de base Introduction Web 1.0 Web 2.0 Pages actives (Web 1.5) Bilan

1. Evolution des architectures PC Serveurs d’entreprise Besoins Ergonomie Simplicité Intégration C/S 2 tiers Besoins Fiabilité Scalabilité Perfs Applications Transactions Bases de données IHM Applications Standards : Web, Java, XML, etc. Standards : SQL3, DTP, CORBA, etc. C/S 3 tiers Apps Internet : E-commerce, Intranet, Extranet Architecture

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 Client Tiers Milieu Tiers Backend Appareil mobile SGBD Serveur WAP Browser Web Serveur d’application Serveur Web Application ERP Client Java Parefeu Client VB/C++ Application mainframe … … Architecture

Exemple: application de e-commerce Serveur de Paiement Composant Paiement Composant Catalogue Composant Commande Caddie Applet Java Validation Commande Navigateur Client Serveur d’Application Web Request Broker is an object infrastructure for HTTP Serveur de données Interface Utilisateurs Logique Application et Transaction Logique Données Architecture 32 11

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) 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"> [ ... ] TD, TH { font-family: "Arial" ; line-height: 1.35 ; } H1, H2 { margin-top: 1.2em ; margin-left: -7% ; color: #900 ; clear: both ; BODY { color: #000 ; background: #FBFBFF ; margin-left: 9% ; margin-right: 6% ; font-family: "Helvetica", sans-serif ; line-height: 1.35 ; } Web

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

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 Page HTML url longue Prog. CGI réponse données 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) http://www.amazon.fr/Bases-donnees/Georges-Gardarin/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 Accès par objets à la BD 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

Un environnement riche Objets techniques Objets de présentation Objets métiers ASP

ASP et .NET VB C++ JScript … C# ASP.NET ADO.NET BCL.NET Common Language Runtime (CLR) Windows et COM+ Services SOAP & XML Toolkits Visual Studio .NET ASP

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

Les servlet Java Servlet Accès aux BD 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"; ResultSet resultset = statement.executeQuery(query); // Traitement des résultats while(resultset.next()) { System.out.println(resultset.getString(2) + " " + resultset.getString(3)); } // fermeture de la connexion con.close(); } SQL ResultSet Base de données Application Serveur de données JSP

JSP et J2EE Serveur d'applications JSP Conteneur web Conteneur EJB Servlet JSP JNDI JDBC RMI JTA JMS JavaMail JAX EJB Serveur d'applications Base de données Autres ressources JSP

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

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 : 1.Connexion 2.Requête 3.Exploitation des résultats 4.Fermeture de la connexion PHP

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

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