Transcript Sections 7.5

Applications Internet
Chapitre 7, Sections 7.6—7.8
1
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)
2
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
3
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
4
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>
5
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
6
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).
7
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.
2.
3.
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
8
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>
9
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>
10
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
11
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;}
12
JavaScript: Un Exemple Complet
Formulaire HTML:
JavaScript associé:
<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>
<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>
13
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
14
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
15
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>
16
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/
17
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)
18
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.
19
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
20
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;
21
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
22
Serveur d’Application: Structure du Processus
Structure du processus
Browser
HTTP Serveur Web
Application C++
JavaBeans
Serveur d’application
JDBC
ODBC
DBMS 1
DBMS 2
Pool de Servlets
23
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”);
}
}
24
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()
25
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);
}
}
26
‘’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
27
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>
28