Architectures%20Web%203-Tiers:%20notions%20de%20base

1
Architectures Web 3-Tiersnotions de base

1. Introduction
2. Web 1.0
3. Web 2.0
4. Pages actives (Web 1.5)
5. Bilan

2
1. Evolution des architectures
PC
Serveurs dentreprise

• Besoins
• Ergonomie
• Simplicité
• Intégration

• Besoins
• Fiabilité
• Scalabilité
• Perfs

C/S 2 tiers
Applications Transactions Bases de données
IHM Applications
Standards SQL3, DTP, CORBA, etc.
Standards Web, Java, XML, etc.
C/S 3 tiers
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 à laide
  dun SGBD
• Notion 2 Serveur dapplication
• 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 lIHM
• Client lourd code applicatif complet
• Client léger pas de code applicatif,
  présentation en browser
• Client riche le code applicatif quil faut et
  des outils de présentation sophistiqués
  (intelligent, smart client)

Architecture
4
Client/serveur 3-tiers
Tiers Milieu
Tiers Backend
Tiers Client
Appareil mobile
SGBD
Serveur WAP
Browser Web
Serveur dapplication
Serveur Web
Application ERP
Client Java
Parefeu
Application mainframe
Client VB/C


Architecture
5
Exemple application de e-commerce
Validation Commande
Serveur dApplication
Navigateur Client
Serveur de données
Interface Utilisateurs
Logique Application et Transaction
Logique Données
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 à lorigine, norme ECMA
• Notion 6 DOM (Document Object Model)
• modèle d'objets représentant la structure
  arborescente dun 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 dinstruction 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
ltLINK REL"stylesheet" HREF"fichier.css"gt
... 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
11
Web 1.0 Difficultés

• Appels au serveur bloquants
• synchronisme
• Difficulté pour la validation de formulaires / BD
• Renvoi du formulaire entier avec marques
  derreurs
• Paramètres des programmes
• Doublets (nomvaleur) en ASCII
• Pas de structures objets
• Pas de contrats entre client et serveur
• Pas de publication de linterface selon un
  standard
• Problème si changement

12
3. Web 2.0 Définition et outils connexes

• Terme marketing inventé par OReilly Media
• Daprès Wikipedia, lencyclopé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

We
Web 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 darchitecture de services avec
  appels HTTP
• XForms Saisie déclarative contrôlée en XML
• XUL/XAML Présentation déclarative en XML
• RDF Langage dannotation de ressource en XML
• RSS et ATOM Syndication de contenus

15
Web 2.0 Quelques notions

• Notion 8 Web Service
• composant logiciel dont linterface 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 dintérêt
• Développement de sites composites à partir
  dautres 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 Loutil de collaboration

• Notion 11 Wiki
• Application Web collaborative permettant aux
  utilisateurs de créer des contenus et à nimporte
  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
• Lencyclopé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
Common Gateway Interface (CGI)

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

Serveur Web
Client
Page HTML
téléchargement
Page HTML
url longue
Prog. CGI
réponse
données
CGI
21
Passage de paramètres

• Par URL longue (GET) ou corps de requête (POST)
• Notion 16 URL longue
• URL suivie dun nom de programme et des
  paramètres à passer au programme via CGI
• Exemple
• http//news.google.fr/news?oeutf-8
  clientfirefoxtabwnnedfrtopicn
• Notion 17 URL virtuelle
• URL générée par un serveur pour identifier une
  ressource, passée au client pour lui permettre
  dinvoquer le service (architecture REST)
• Exemple
• http//www.amazon.fr/Bases-donnees/Georges-Gardari
  n/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 daccè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 dobjets données
• Extraction des attributs par méthodes

• ltHTMLgt
• lt
• VinRequest.QueryString("NumVin")
• Set NObjServer.CreateObject("VINS.NumVin")
• if NObj.GetCru(Vin)False then
• Server.Redirect("NumVin/entryform.htm")
• gt
• ltH1gt VIN CHOISI ltNObj.Crugt lt/H1gt
• ltTABLEgt
• ltTRgtltTDgtDegrelt/TDgtltTDgtMillesimelt/TDgtltTDgtRegionlt/TD
  gtlt/TRgt
• ltTRgtltTDgtltNObj.Degregtlt/TDgt
• ltTDgtltNObj.Millgtlt/TDgt
• ltTDgtltNObj.Regiongtlt/TDgtlt/TRgt
• lt/TABLEgt
• ltH2gt DATE DE SELECTION lttime()gtltdate()gtlt/H
  2gt
• lt/HTMLgt

ASP
25
Un environnement riche

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

ASP
26
ASP et .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 ltservletgt)
• Communication par des variables
• Utilisation de tags lt gt (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
JSP
29
Les servlet Java

• Servlet
• Moteur multi-thread d'exécution de classe côté
  serveur
• Approche API objet (e.g., services, httprequest)
• Lutilisateur 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
30
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
31
JSP et J2EE
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 lt?php ?gt ou
  lt... gt
• Possibilité de récupérer les variables de
  formulaires HTML
• variable
• Exemple
• lthtmlgt ltheadgt lttitlegtHello Worldlt/titlegt
  lt/headgt ltbodygt lt?php    echo "Hello world"
   ?gt lt/bodygt
• lt/htmlgt

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

• lthtmlgt
• ltheadgt
• lttitlegtAffichage des vinslt/titlegt
• lt/headgt
• ltbodygt
• lt?php mysql_connect("localhost","root","")
  
• connexion_reussi mysql_selectdb("DEGUSTATIO
  N")
• if (!connexion_reussi) echo "Connexion râtée"

• request "SELECT FROM vins"
• if(result mysql_query(request))
• while(ligne mysql_fetch_row(result))
• nv ligne0
• cru ligne1
• mill ligne2
• echo "nv - cru, mill ltbr /gt"
• else
• echo "erreur de requête BD."
• echo "Merci" ?gt
• lt/bodygt
• lt/htmlgt

PHP
36
5. Bilan Un Web en évolution rapide

• Notions introduites
• Serveur de données, Serveur dapplications
• 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