BD WEB
1. Rappels Web 1.0
2. Introduction au Web 2.0
3. Les pages actives ASP
4. Les pages active JSP
5. Les pages actives PHP
6. Conclusion
2
1. 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
• Langage dérivé de SGML définissant un jeu de balises fixes pour coder et transférer des documents avec
présentations intégrées sur le Web.
• Les documents sont liés entre eux par des hyperliens 1-1.
• Les éléments de données sont marqués par des balises fixées selon leur rôle et mise en
forme.
<HTML>
<HEAD>
<META CONTENT="text/html;
charset=iso-8859-1">
<META NAME="AUTHOR"
CONTENT="Gardarin">
<TITLE>SYSTEMES D'INFORMATION
</TITLE>
</HEAD>
<BODY>
<HR>
<H1>SYSTEMES D'INFORMATION XML</H1>
<PRE><I>Georges
GARDARIN</I></PRE>
<HR>
…
</HTML>
4
Scénario typique
1. Le navigateur demande l'URL http://www.gardarin.org/test.
html au browser.
2. Le client envoie la requête POST /test.html au serveur HTTP www.gardarin.org.
3. Le serveur reçoit la requête POST /test.html.
4. Le serveur envoie au client le fichier test.html encapsulé en format MIME.
5. Le client réceptionne l'objet test.html en format MIME.
6. Le navigateur interprète et affiche l'objet test.html.
POST / test.html
test.html
Serveur HTTP
Client
Web
http://www.
prism.uvsq.fr/test.html
blablabla
Text/html …
DHTML (côté client)
• HTML 4.01
• Dernière version de HTML, les nouveaux développements portant sur XML (langage à tags ouverts)
• 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
6
Jscript et DOM
• Jscript (JavaScript à l’origine, norme ECMA)
• Langage de programmation, permettant d’écrire des scripts (programmes en texte) exécutés sur le navigateur du client
• DOM (Document Object Model)
• définit une arborescence d'objets représentant la structure du document
• permet de manipuler l'ensemble des objets contenus dans le document (avec Javascript)
Web
Feuilles de style CSS
• Les feuilles de style (CSS - Cascading StyleSheets)
• 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.
8
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:
"Helvetica",
sans-serif line-height: 1.35 ; }
H1, H2 {
margin-top: 1.2em ; margin-left: -7% ; color: #900 ;
clear: both ; }
[ ... ] [ ... ]
TD, TH {
font-family:
"Helvetica",
sans-serif 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
Web 1.0 : Difficultés
• Séquence de <requête-page>
• synchronisme
• Difficulté pour la validation de formulaires / BD
• Renvoi du formulaire entier avec marques d’erreurs !
• Paramètres des URL longues
• 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
10
2. 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 de base
• XSL : Feuilles de style pour XML
• JScript: langage de script (JavaScript)
• Services Web: Composants accédés et décrits en XML
• Contrat d’interface défini en WSDL
• Passage de paramètres en SOAP
• Encapsulation des procédures BD par XML
12
Web 2.0 : Des techniques nouvelles
• Ajax: XML sur HTTP en mode asynchrone via Javascript
• Résoud 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
• …
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
14
Wikis: L’outil de collaboration
• 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
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
16
XHTML/XML dynamique côté serveur
• CGI (Common Gateway Interface) et WS (Web Services)
• CGI consiste à activer des programmes par des URL longues puis de leur faire renvoyer un contenu HTML/XML
• WS consiste à activer des programmes par des documents XML puis de leur faire renvoyer un contenu XML
• 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
• JSP (Java Server Pages)
• permet d'utiliser la puissance de Java pour créer des pages web dynamiques.
• PHP (Hypertext Preprocessor)
• Langage simple bien adapté au Web pour manipuler des objets côté serveur au sein de pages Web XHTML/XML
Web
Client
Serveur Web
Prog.
CGI Page
HTML
téléchargement url longue
Page HTML
données répons e
Common Gateway Interface (CGI)
• Protocole d’appel dynamique de programme sur un serveur Web depuis un client
• Surcouche de HTTP pour passer des paramètres
• Programmes ou scripts invoqués par CGI
18
Web Service : HTTP, SOAP et WSDL
CGI
3. 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)
20
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>Re gion</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
22
ASP et .NET
VB C++ C# JScript …
ASP.NET BCL.NET ADO.NET
Common Language Runtime (CLR)
Windows et COM+ Services SOAP
&
XML Toolkits
Visual Studio .NET
ASP
4. 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
24
Objets d'environnements
Objet 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)
pageContex
t 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
• 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
26
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();
} Application Serveur de
données
Base de données SQL
ResultSet
JSP
JSP et J2EE
Conteneur web Conteneur EJB
Servlet JSP
RMI JNDI JTA JDBC JMS JavaM ail JAX RMI JNDI JTA JDBC JMS JavaM ail JAX
EJB
Serveur d'applications
28
5. 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 !
30
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>
32
6. Bilan : Un Web en évolution rapide
• HTML statique et dynamique côté client (1.0)
• Pages actives = Mixage
HTML/XML + petits programmes côté serveur + accès aux BD intégrés
• Web 2.0 = l’interactivité et l’implication de l’utilisateur possible par les techniques
• Évolution vers le Web Sémantique
• Des contenus mieux décrits
• De l’information à la connaissance
• L’inférence possible
• Le Web va-t-il changer les BD ?
BD WEB
