Database Management Systems 3ed, R. Ramakrishnan and J. Gehrke1 Applications Internet Chapitre 7,...

Database Management Systems 3ed, R. Ramakrishnan and J. Gehrke 1

Applications Internet

Chapitre 7, Sections 7.6—7.8


Survol

Concepts Internet Formats des données sur le web

HTML, XML, DTDs Introduction à l’architecture à trois niveaux Le niveau de présentation

Formulaires HTML; méthodes HTTP Get et POST, encodage des URLs; Javascript; Stylesheets; XSLT

Le niveau intermédiaire CGI, serveurs d’application, Servlets,

JavaServerPages, passages d’arguments, maintenance des états (cookies)


Survol du Niveau de Présentation Rappel: Fonctionnalité du niveau de

présentation Interface primaire de l’usager Doit s’adapter aux divers moyens de présentation (PC,

PDA, téléphone cellulaire, accès vocal?) Simple fonctionnalité, telle vérification de la validité

des champs Nous couvrirons:

Formulaires HTML: Comment passer les données au niveau intermédiaire?

JavaScript: Simple fonctionnalité au niveau de présentation

Style sheets: Séparation des données du formatage


Formulaire HTML (‘’Forms’’) Manière commune de communiquer les données

du client au niveau intermédiaire Format général d’un formulaire:

<FORM ACTION=“page.jsp” METHOD=“GET”NAME=“LoginForm”>

…</FORM>

Composantes d’une balise HTML FORM: ACTION: Spécifie l’URI qui traite le contenu du

formulaire METHOD: Spécifie la méthode HTTP GET ou POST NAME: Nom du formulaire; peut être utilisé dans les

scripts du client pour faire référence au formulaire


Structure des Formulaires HTML Balise INPUT

Attributs:• TYPE: text (texte), password, reset • NAME: nom symbolique utilisé pour identifier la

valeur VALUE au niveau intermediaire• VALUE: valeur par defaut

Exemple: <INPUT TYPE=“text” Name=“title”>

Exemple de formulaire:<form method="POST" action="TableOfContents.jsp">

<input type="text" name="userid"><input type="password" name="password"><input type="submit" value="Login“ name="submit"><input type=“reset” value=“Clear”>

</form>


Passage des Arguments

Deux méthodes: GET et POST GET

Le contenu du formulaire est passé à l’URI soumis Structure:

action?name1=value1&name2=value2&name3=value3

• Action: nom de l’URI spécifié dans le formulaire• Les paires (name,value) viennent des attributs des

balises INPUT contenu dans le formulaire; les attributs vides ont des valeurs vides (“name=“)

Exemple tiré du formulaire de mot de passe du transparent précédent:TableOfContents.jsp?userid=john&password=johnpw

La ressource mentionnée dans l’action doit être un programme, un script, ou une page qui traitera les entrées de l’utilisateur


Passage des Arguments (Suite)

POST Structure comme dans la methode GET:

action?name1=value1&name2=value2&name3=value3

GET: le contenu encodé est envoyé en attachement à l’URI.

POST: le contenu est envoyé dans un bloc de données séparées.

POST et GET ont chacun des avantages et désavantages (Voir le livre de Ian Graham pour les détails).


HTTP GET: Encodage des Champs du Formulaire Les champs du formulaire peuvent contenir

des caractères ASCII qui normalement n’apparaissent pas dans un URI

Une convention spéciale d’encodage convertit les valeurs de ces champs/attributs en caractères compatibles avec des URIs:1. Convertit tous les caractères “spéciaux” (tels que &,

=, +, %, etc.) en %xyz. Ici, xyz est le code ASCII du caractère spécial

2. Convertit tous les espaces en caractère “+”3. Colle les paires (name,value) de la balise INPUT du

formulaire ensemble avec “&” pour former l’URI


Formulaires HTML: Un Exemple Complet

<form method="POST" action="TableOfContents.jsp"><table align = "center" border="0" width="300"><tr>

<td>Userid</td><td><input type="text" name="userid" size="20"></td>

</tr><tr>

<td>Password</td><td><input type="password" name="password"

size="20"></td></tr><tr>

<td align = "center"><input type="submit" value="Login“name="submit"></td>

</tr></table>

</form>


JavaScript But: Ajouter de la fonctionnalité au niveau de

présentation. Exemple d’applications:

Détecter le type de browser et exécuter le code spécifique à ce browser

Validation des formulaires: Validation des champs d’entrée des formulaires

Contrôle du browser: Ouvrir de nouvelles fenêtres, clore celles existantes

En général imbriqué directement dans HTML avec la balise <SCRIPT> … </SCRIPT>.

La balise <SCRIPT> a plusieurs attributs: LANGUAGE: spécifie le langage du script (p.ex. javascript) SRC: fichier externe contenant le code du script Exemple:

<SCRIPT LANGUAGE=“JavaScript” SRC=“validate.js></SCRIPT>

JavaScript (Suite)

Si la balise <SCRIPT> ne contient pas un attribut SRC, le script de JavaScript est directement dans le fichier HTML.

Exemple:<SCRIPT LANGUAGE=“JavaScript”></SCRIPT>

Deux styles différents de commentaire <!– commentaire de HTML pour ne pas afficher le code

de JavaScript verbatim // commentaire de JavaScript


JavaScript (Suite)

JavaScript est un langage de script complet Variables Assignements (=, +=, …) Opérateurs de comparaison (<,>,…),

opérateurs booléen (&&, ||, !) Instructions

• if (condition) {instructions;} else {instructions;}• Boucles for, do-while, et while

Fonctions avec valeur de retour• Mot clé function• function f(arg1, …, argk) {instructions;}


JavaScript: Un Exemple CompletFormulaire HTML:

<form method="POST“

action="TableOfContents.jsp">

<input type="text" name="userid">

<input type="password" name="password">

<input type="submit" value="Login“ name="submit">

<input type=“reset” value=“Clear”>

</form>

JavaScript associé:

<script language="javascript">function testLoginEmpty(){ loginForm = document.LoginForm if ((loginForm.userid.value == "") || (loginForm.password.value ==

"")) { alert('Please enter values for

userid and password.'); return false; } else return true;}</script>


Stylesheets

Idée: Séparer l’affichage du contenu et adapter l’affichage aux différents formats de présentation

Deux aspects: Tranformation du document pour décider quelles parties

afficher et dans quel ordre Decider comment chaque partie sera affichée

Pourquoi utiliser les stylesheets? Réutiliser le même document pour différents affichages Adapter l’affichage aux préférences de l’utilisateur Réutilier le même document dans différents contextes

Deux langages de stylesheets Cascading style sheets (CSS): pour documents HTML Extensible stylesheet language (XSL): pour documents

XML


CSS: Cascading Style Sheets

Définit comment afficher les documents HTML Beaucoup de documents HTML peuvent se référer au

même CSS Le format d’un site web peut ainsi changer juste en

changeant un seul style sheet Exemple:

<LINK REL=“style sheet” TYPE=“text/css” HREF=“books.css”/>

Chaque ligne consiste en 3 parties:sélecteur {propriété: valeur}

Sélecteur: balise dont le format est défini Propriété: attribut dont la valeur est fixée Valeur: valeur de l’attribut


CSS: Cascading Style Sheets (Suite)

Exemple de style sheet:

body {background-color: yellow}h1 {font-size: 36pt}h3 {color: blue}p {margin-left: 50px; color: red}

La première ligne a le même effet que la ligne HTML:<body background-color=“yellow>


XSL

Langage pour exprimer les style sheets Détails sur: http://www.w3.org/Style/XSL/

Trois composantes XSLT: langage de transformation de XSL

• Peut transformer un document en un autre• Détails sur http://www.w3.org/TR/xslt

XPath: langage de chemin XML• Sélectionne des parties d’un document XML• Détails sur http://www.w3.org/TR/xpath

XSL Formatting Objects• Formate la sortie d’une transformation XSL• Détails sur http://www.w3.org/TR/xsl/


Survol

Concepts Internet Formats des données sur le web

HTML, XML, DTDs Introduction à l’architecture à trois niveaux Le niveau de présentation

Formulaires HTML; méthodes HTTP Get et POST, encodage des URLs; Javascript; Stylesheets; XSLT

Le niveau intermédiaire CGI, serveurs d’application, Servlets,

JavaServerPages, passages d’arguments, maintenance des états (cookies)


Survol du Niveau Intermédiaire Rappel: Fonctionnalité du niveau intermédiaire

Encode la logique d’application Connecte à la base de données Accepte les entrées des formulaires venant du niveau

de présentation Génère les sorties pour le niveau de présentation

Nous couvrirons CGI: Protocole pour passer des arguments aux

programmes exécutant au niveau intermédiaire Serveur d’application: Environnement d’exécution au

niveau intermédiaire Servlets: Programmes Java au niveau intermédiaire JavaServerPages: Scripts Java au niveau intermédiaire Maintien de l’état: Comment maintenir l’état de

l’exécution au niveau intermédiaire. Ici, on verra essentiellement les cookies.


CGI: Common Gateway Interface But: Transmet des arguments des formulaires HTML

aux programmes executant au niveau intermediaire Les détails du protocole CGI ne sont pas tellement

important des bibliotheques implementent des interfaces au protocole CGI

Désavantages: Le programme d’application est invoqué dans un nouveau

processus à chauqe invocation (rémède: FastCGI) Aucun partage des ressources entre les programmes

d’application (p.ex., les connexions aux bases de données) --Rémède: Serveurs d’application


CGI: Exemple

Formulaire HTML:<form action=“findbooks.cgi” method=POST>Type an author name:<input type=“text” name=“authorName”><input type=“submit” value=“Send it”><input type=“reset” value=“Clear form”></form>

Code Perl:use CGI;$dataIn=new CGI;$dataIn->header();$authorName=$dataIn->param(‘authorName’);print(“<HTML><TITLE>Argument passing test</TITLE>”);print(“The author name is “ + $authorName);print(“</HTML>”);exit;


Serveur d’Application

Idée: Eviter la surchage des CGIs ‘’Pooling’’ de plusieurs processus Gère les connexions Permet un accès à des sources de données

hétérogènes Autres fonctionnalité telle que des APIs pour

la gestion des sessions


Serveur d’Application: Structure du Processus

Structure du processus

Browser Serveur Web

Serveur d’application

Application C++

JavaBeans

DBMS 1

DBMS 2

Pool de Servlets

HTTP

JDBC

ODBC


Servlets

Java Servlets: Code Java qui exécute au niveau intermédiaire Indépendant des plateformes Des APIs complets en Java disponibles, y compris JDBC

Exemple:import java.io.*;import java.servlet.*;import java.servlet.http.*;

public class ServetTemplate extends HttpServlet {public void doGet(HTTPServletRequest request,

HTTPServletResponse response)throws SerletExpection, IOException {

PrintWriter out=response.getWriter();out.println(“Hello World”);

}}


Servlets (Suite)

Vie d’un servlet? Le serveur web envoie une requête au

container servlet Le container crée une instance servlet

(appèle la méthode init(); désallocation: destroy())

Le container appèle la méthode service()• service() appèle doGet() pour exécuter le GET de

HTTP ou doPost() pour POST• D’habitude il est conseillé de ne faire l’overriding de

service(), mais plutôt de doGet() et doPost()


Servlets: Un Exemple Complet

public class ReadUserName extends HttpServlet {public void doGet( HttpServletRequest request,

HttpSevletResponse response)throws ServletException, IOException {reponse.setContentType(“text/html”);PrintWriter out=response.getWriter();out.println(“<HTML><BODY>\n <UL> \n” +

“<LI>” + request.getParameter(“userid”) + “\n” +“<LI>” + request.getParameter(“password”) + “\n” +“<UL>\n<BODY></HTML>”);

}public void doPost( HttpServletRequest request,

HttpSevletResponse response)throws ServletException, IOException {doGet(request,response);

}}


‘’Java Server Pages’’

Servlets Génère du HTML en l’écrivant dans des objets

“PrintWriter” D’abord le code, ensuite la page web

JavaServerPages Ecrits en HTML, code similaire au code

Servlet, mais imbriqué dans un code HTML D’abord la page web, ensuite le code Sont habituellement compilés en un Servlet


JavaServerPages: Exemple

<html><head><title>Welcome to B&N</title></head><body>

<h1>Welcome back!</h1><% String name=“NewUser”;

if (request.getParameter(“username”) != null) {name=request.getParameter(“username”);

}%>You are logged on as user <%=name%><p>

</body></html>

Database Management Systems 3ed, R. Ramakrishnan and J. Gehrke1 Applications Internet Chapitre 7,...

Documents

Transcript of Database Management Systems 3ed, R. Ramakrishnan and J. Gehrke1 Applications Internet Chapitre 7,...