Applications Internet Chapitre 7, Sections 7.6—7.8 The slides for this text are organized into chapters. This lecture covers Chapter 7. I Foundations •Chapter 1: Introduction •Chapter 2: ER Model and Conceptual Design •Chapter 3: The Relational Model and SQL DDL •Chapter 4: Relational Algebra and Relational Calculus •Chapter 5: SQL II Applications •Chapter 6: Database Application Development •Chapter 7: Database-backed Internet Applications III Systems •Chapter 8: Overview of Storage and Indexing •Chapter 9: Data Storage •Chapter 10: Tree Indexes •Chapter 11: Hash Indexes IV Systems •Chapter 12: Overview of Query Evaluation •Chapter 13: External Sorting •Chapter 14: Evaluation of Relational Operators: First part (joins) and second part (other operators) •Chapter 15: A Typical Relational Optimizer V Systems •Chapter 16: Overview of Transaction Management •Chapter 17: Concurrency Control •Chapter 18: Recovery VI Applications •Chapter 19: Schema Refinement, Functional Dependencies, Normalization •Chapter 20: Physical Database Design, Database Tuning •Chapter 21: Security and Authorization VII Advanced Topics •Chapter 22: Parallel and Distributed Database Systems •Chapter 23: Data Warehousing and Decision Support •Chapter 24: Object-Database Systems •Chapter 25: Deductive Databases •Chapter 26: Data Mining •Chapter 27: Information Retrieval and XML Data Management •Chapter 28: Spatial Databases  

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: Convertit tous les caractères “spéciaux” (tels que &, =, +, %, etc.) en %xyz. Ici, xyz est le code ASCII du caractère spécial Convertit tous les espaces en caractère “+” 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> <td>Password</td> <td><input type="password" name="password" size="20"></td> <td align = "center"><input type="submit" value="Login“ name="submit"></td> </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”> <!-- alert(“Welcome to our bookstore”) //--> </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 Complet Formulaire 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 Trois composantes 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: Code Perl: <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 HTTP Browser Serveur Web Application C++ JavaBeans JDBC Serveur d’application DBMS 1 ODBC DBMS 2 Pool de Servlets

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, doGet(request,response);

‘’Java Server Pages’’ Servlets JavaServerPages 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>