Architectures web 3 tiers notions de base
This presentation is the property of its rightful owner.
Sponsored Links
1 / 36

Architectures Web 3-Tiers: notions de base PowerPoint PPT Presentation


  • 110 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Architectures Web 3-Tiers: notions de base

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Architectures web 3 tiers notions de base

Architectures Web 3-Tiers:notions de base

Introduction

Web 1.0

Web 2.0

Pages actives (Web 1.5)

Bilan


1 evolution des architectures

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

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

Client/serveur 3-tiers

Tiers Milieu

Tiers Backend

Tiers Client

Appareil

mobile

SGBD

Serveur

WAP

Browser

Web

Serveur

d’application

Serveur

Web

Application

ERP

Client

Java

Parefeu

Application

mainframe

Client

VB/C++

Architecture


Exemple application de e commerce

Exemple: application de e-commerce

Serveur de

Paiement

Composant

Paiement

Composant

Commande

Composant

Catalogue

Caddie

Applet

Java

Validation Commande

Serveur d’Application

Navigateur Client

Serveur de données

Interface Utilisateurs

Logique Application et

Transaction

Logique Données

Architecture


2 rappels web 1 0

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

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

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

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

Web 1.0 : Difficultés


3 web 2 0 d finition et outils connexes

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

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


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 : Des techniques nouvelles


Web 2 0 quelques notions

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

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

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

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

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

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

Page HTML

téléchargement

Page HTML

url longue

Prog.

CGI

réponse

données

CGI


Passage de param tres

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/


Web service invocation via soap

Web Service : invocation via SOAP

CGI


4 1 les asp de microsoft

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

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

Exemple d’accès BD

ASP


Un environnement riche

Objets techniques

Objets de présentation

Objets métiers

Un environnement riche

ASP


Asp et net

ASP et .NET

SOAP

&

XML

Toolkits

VB

C++

C#

JScript

Visual

Studio

.NET

ASP.NET

BCL.NET

ADO.NET

Common Language Runtime (CLR)

Windows et COM+ Services

ASP


4 2 les jsp du monde java

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

Description

Objets d'environnements

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

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";

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();

}

Accès BD : JDBC

SQL

ResultSet

Base de

données

Application

Serveur de

données

JSP


Jsp et j2ee

JSP et J2EE

Serveur d'applications

Conteneur web

Conteneur EJB

EJB

Servlet

JSP

RMI

JNDI

JTA

JDBC

JMS

JavaMail

JAX

RMI

JNDI

JTA

JDBC

JMS

JavaMail

JAX

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>

4.3 PHP de Apache (Open Source)

PHP


Acc s aux formulaires

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

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>

Exemple: Publication d'une table

PHP


5 bilan un web en volution rapide

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


  • Login