Client - Bienvenue au site Web de Tuan Loc Nguyen Voici mes

BD Web
1. Introduction au Web
2. Technique de base CGI
3. Les pages actives ASP
4. Les pages active JSP
5. Les pages actives PHP
1
1. Qu'est-ce-que le Web ?
 Service Internet permettant de naviguer à travers des
pages web.
 HTTP (HyperText Transfer Protocol) est le protocole le
utilisé pour envoyer les requêtes et recevoir les pages
 HTTP spécifié par le consortium W3C est actuellement
à sa version 1.1.
 HTTPS est une version sécurisée permettant de crypter
les échanges.
2
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 selon leur rôle et mise en forme
3
Principales balises

La balise de début <HTML>


La balise de titre <TITLE>


exemple <A HREF = "URL de l’amarre"> cliquez ici </A>.
Les listes non numérotées du type


<IMG SRC = "URL de l’image">.
Les amarres vers d’autres documents


Exemple: <B> Ceci est en gras </B>, <I> Ceci est en italique </I>.
Les balises d’intégration d’images et de son


Exemple: <H1> Bienvenue sur le Web </H1>, <H2> Les BD et le Web </H2>.
Les balises de mise en forme


elle permet d’indiquer le titre de la page éditée de manière spéciale par les navigateurs ; se termine après le
titre par une balise </TITLE>.
Les balises de niveaux


elle doit être fermée à la fin du document par </HTML>.
<UL> <LI> alinea 1 <LI> alinea 2 </UL>.
Les listes numérotées du type

<OL> <LI> alinea 1 <LI> alinea 2 </OL>.
4
Exemple (1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="GENERATOR" CONTENT="Mozilla/4.06 [fr] (Windows2000; I)
[Netscape]">
<META NAME="AUTHOR" CONTENT="Gardarin">
<TITLE>SYSTEMES D'INFORMATION XML</TITLE>
</HEAD>
BODY>
<HR>
<H1>SYSTEMES D'INFORMATION XML</H1>
<PRE><I>Georges GARDARIN</I></PRE>
<HR>
5
Exemple (2)
<P>l'ouvrage de r&eacute;f&eacute;rence
en mati&egrave;re de bases de donn&eacute;es et XML.
<BR>pr&eacute;sente les points suivants :
<UL>
<LI>XML, origines et &eacute;volution, XQuery, optimisation et implantation;</LI>
<LI>concepts de base des services Web, Architecture .NET, S&eacute;curit&eacute;
;</LI>
<LI>Int&eacute;gration de donn&eacute;es;</LI>
</UL>
Ce livre indispensable pr&eacute;sente donc une synth&egrave;se tr&egrave;s
compl&egrave;te des techniques XML.
</BODY>
</HTML>
6
Scénario typique
Serveur
HTTP
GET / test.html
http://www.
prism.uvsq.fr/test.html
Text/html … (test.html)
blablabla
Client
test.html
 1.Le navigateur demande l'URL
http://www.gardarin.org/test.html au
browser.
 2.Le client envoie la requête
/test.html au serveur HTTP
www.gardarin.org.
 3.Le serveur reçoit la requête
/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.
7
W3C et HTML
 W3C

Organisme chargé de standardiser les protocoles et langages
relatifs à Internet
 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 specs complémentaires au HTML permettant de
rendre une page web dynamique côté client
8
DHTML
 Javascript

permet d'exécuter des scripts (programmes en texte)
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)
9
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.
10
Exemple
<LINK REL="stylesheet" HREF="fichier.css">
@import "truc.css"
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 ;
}
[ ... ]
11
Limites HTML statique
 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
12
Site Web BD
 Site Web dynamique
partage d ’une base de données globales
 utilisation de templates côté serveur avec accès SQL
 standardisation des méta-données et des formulaires
 accès via SQL optimisé avec indexation du contenu
 augmentation de la productivité des développeurs

13
Application: Commerce
électronique
 Présentation de catalogues


contact du consommateur
exploration des produits



Accès hiérarchique aux description et prix
Visualisation multimédia 2 ou 3D, démonstrations
Couplage aux BD de l’entreprise
 Transactions sur Internet


saisie de la commande
paiement sécurisé via Internet


carte de crédit, monnaie digitale, chèque électronique
suivi de la commande
14
Les techniques
 CGI (Common Gateway Interface)

consiste à activer des programmes (généralement écrits en perl ou en
javascript voir en C), puis de leur faire renvoyer un contenu HTML
 ASP (Active Server Pages) de Microsoft

permet de simplifier l'écriture de tels scripts en manipulant des objets en
VBScript.
 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
15
2. 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
Serveur Web
Client
téléchargement
Page
HTML
données
Page
HTML
url longue
réponse
Prog.
CGI
16
Scénario
Param
.
P
a
s
s
e
r
e
l
l
e
Url Longue
/cgi-bin/p?param
HTML
Navigateur
Serveur
HTTP
HTML
p
...
SQL
Bases de
données
Scripts
d'application
Serveur d'application
17
Vue Synthétique
18
Qu'est-ce que l'interface CGI ?
 Définition et propriétés



standard de programmation pour accéder aux données des
formulaires HTML côté serveur
la passerelle invoque les scripts en passant les paramètres sous
une forme codée
un processus séparé est activé à chaque appel de programme
 L'envoi de paramètres à un script CGI


se fait par l'intermédiaire d'un formulaire HTML.
créé à l'aide de la balise <FORM> contenant des boutons, des
champs, des listes et/ou des cases à cocher repérés par les
noms de paramètres, et un bouton de soumission du formulaire
19
Exemple de Formulaire
<HTML>
<HEAD>
<TITLE> Exemple de formulaire</TITLE>
</HEAD>
<BODY>
<H1>Exemple de formulaire</H1>
<FORM METHOD=POST ACTION="/cgi-bin/invite.exe">
Nom: <INPUT TYPE=TEXT SIZE=30 NAME="nom"><BR>
Adresse e-mail: <INPUT TYPE=TEXT SIZE=20 NAME="email"><BR>
<P>Commentaires:<BR>
<TEXTAREA COLS=60 ROWS=15 NAME="comment">
</TEXTAREA>
<INPUT TYPE=SUBMIT VALUE="OK">
</FORM> …
20
Variables d'environnement
 Données stockées dans des variables permettant au programme
d'avoir des informations sur son environnement
 Informations sur le serveur

DATE_GMT, DATE_LOCAL


DOCUMENT_ROOT


Nom de domaine du serveur
SERVER_SOFTWARE


Racine des documents Web sur le serveur
HTTP_HOST


Date actuelle au format GMT et local
Type (logiciel) du serveur web
...
21
Informations sur le client
 CONTENT_LENGTH

Longueur du corps de la requête
 CONTENT_TYPE

Type de données du corps (format
MIME)
 HTTP_COOKIE

Cookie du client si jamais un
cookie est effectivement présent sur
le disque du client
 HTTP_REFERER

URL de la page qui a appelé le
script CGI
 HTTP_REQUEST_METHOD

Méthode d'appel (GET, POST, ...)
 HTTP_USER_AGENT

Navigateur et OS du client
 PATH

chemin d'accès au script CGI
 PATH_INFO

chemin d'accès au script CGI
 QUERY_STRING

Paramètres du script
 REMOTE_ADDR

Adresse IP du client appelant le
script CGI
22
Get ou Post ?
 GET envoie les paramètres du formulaire via l'URL

en ajoutant l'ensemble des paires nom/valeur à l'URL du script,
séparé de celui-ci par un point d'interrogation, ce qui donne
une URL longue (limitée à 255 caractères) du type:


http://nom_du_serveur/cgi-bin/
script.cgi?champ1=valeur1&champ2=valeur2...
passe les données dans la variable QUERY_STRING
 POST code les données de la même manière mais


envoie les données à la suite des en-têtes HTTP, dans un
champ appelé corps de la requête
les données présentes dans le corps de la requête sont
accessibles via le fichier de flux d'entrée standard STDIN
23
Les scripts serveur
 Programme ou script (fichier de commandes)



capable de recevoir des paramètres depuis des clients,
d’accéder à une ou plusieurs sources de données
de générer des résultats sous forme HTML ou XML.
 Langages de scripting ou de programmation



Interprété ou compilé
Perl, JavaScript, VB Script, Python
C, C++, Java, VB, C#, L4G
24
Exemple de Script Perl
#! /usr/local/bin/perl
print "content-type : text/html\n\n"; // Fixe le format MIME
print "<HTML>";
print "<HEAD>";
print "<TITLE>Hello world</TITLE>";
print "</HEAD>";
print "<BODY>";
print "Hello world!";
print "</BODY>";
print "</HTML>";
25
CGI – évaluation
 Avantages



utilisable avec n’importe quel navigateur et serveur Web
simple - intégré avec HTML
serveurs dans tous les langages
 Inconvénients


supporte mal le multi-utilisateur
pas de gestion de contexte (session)
 Extensions

version« fast CGI »
26
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
Compilés avec la version .NET
 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)
27
Déclaration et Exemple
 Intégration de scripts dans des
pages HTML ou XML
 <SCRIPT
language="VBScript|Jscript"
[runat="server|client"]
[type="text/vbscript | jscript"]
[src="url"] > code du script
</SCRIPT>
 <% code du script %>
 Impression du texte et
interprétation du code par le
serveur d’ASP
 Exemple simple:
<%@ LANGUAGE="VBSCRIPT"
%>
<HTML>
<HEAD><TITLE>Exemple de script
ASP</TITLE>
</HEAD>
<BODY>
<% FOR i = 1 to 10 %>
Bienvenue au cours BD Web
<% Next %>
</BODY>
</HTML>
28
Exemple d’accès BD
 Intégration indirecte des
requêtes




nécessite un script
dialogue avec les formes,
boutons, tables, ...
émission des requêtes
récupération des résultats
 Accès par objets VBScript


Accès à la base via des ADO
Création d’objets données
<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>R
egion</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>
29
Objets d'environnement
30
4. Les JSP du monde Java
 Possibilité de définir des documents mixtes





HTML
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
31
Exemple de JSP
 Intégration de Java dans
HTML
 Directives de pages



importation de packages
sessions demandées
buffers et threads
 Possibilité de variables
globales
 Facilités d'éditions


expressions Java converties
objets textes et flots binaires


PrintWriter
OutputStream
<HTML>
<HEAD>
<TITLE> Exemple de JSP </TITLE>
</HEAD>
<BODY>

<%@ page language = "java" %>

<% char c = 0; %>

<%
for (int i = 0; i < 26; i++) {
c = (char) (0x41 + i) ;
%>

<% = c %>
<% } %>
</BODY>
</HTML
32
Objets d'environnements
Objet
request
Description
pageContext
Objet contenant la requête du client
Objet contenant la réponse de la page JSP. Généralement inutilisé
(HTML en flux de sortie)
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
response
33
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
34
Architecture Servlet
 Mécanisme d ’exécution de
services



Servlet
Container
Create Thread Pool
au-dessus de HTTP
Multithreads et performant HTTP Request
dispatcher de requêtes HTTP
 Génération de contenus
HTML


format MIME supportés
JPEG, GIF, etc.
Instantiate Servelet
Call init() method
Allocate Thread
Free Thread
HTTP Response
Call service() method
Do service()
Return Response
Terminate Thread Pool
Call destroy() method
35
Accès BD : JDBC
// Connexion
Connection con =
DriverManager.getConnection(url);
// Création d'une instruction
SQL
Statement statement = con.createStatement();
// Exécution d'une requete
String query = "SELECT * FROM Employés";
ResultSet resultset = statement.executeQuery(query);
ResultSet
// Traitement des résultats
while(resultset.next()) {
Application
Serveur de
System.out.println(resultset.getString(2) + " " +
données
resultset.getString(3)); }
// fermeture de la connexion
con.close();
}
Base de
données
36
5. PHP de Apache (Open Source)
 Langage de scripts intégré
aux pages HTML
 Les scripts PHP sont entre
balises <?php .. … ?>
 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>
37
Gestion de formulaires en PHP
 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
38
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
39
Exemple : insertion d’un vin
 Saisie du numéro, cru et millésime

par une forme HTML
 Insertion dans MySQL en PHP
<?php mysql_connect("localhost","root","");
$connexion_reussi=mysql_selectdb("test");
if (!$connexion_reussi) echo "Connexion râtée";
mysql_query(
"insert into vins (num, cru, date)
values ('$num', '$cru', NOW()) ")
or die("Impossible d'insérer le vin");
echo "Merci"; ?>
40
6. Bilan Pages Actives
 Mixage HTML + scripts
serveur
 Compilés en code
intermédiaire ou
interprétés
 Accès aux BD intégrés
 Évolution vers XML


séparation fond et forme
complément à XSL
41