Applications Internet

1
Applications Internet

• Chapitre 7, Sections 7.67.8

2
Survol

• Concepts Internet
• Formats des données sur le web
• HTML, XML, DTDs
• Introduction à larchitecture à 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 dapplication, Servlets,
  JavaServerPages, passages darguments,
  maintenance des états (cookies)

3
Survol du Niveau de Présentation

• Rappel Fonctionnalité du niveau de présentation
• Interface primaire de lusager
• Doit sadapter 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

4
Formulaire HTML (Forms)

• Manière commune de communiquer les données du
  client au niveau intermédiaire
• Format général dun formulaire
• ltFORM ACTIONpage.jsp METHODGET NAMELogin
  Formgtlt/FORMgt
• Composantes dune balise HTML FORM
• ACTION Spécifie lURI 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

5
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 ltINPUT TYPEtext Nametitlegt
• Exemple de formulaire
• ltform method"POST" action"TableOfContents.jsp"gt
• ltinput type"text" name"userid"gt
• ltinput type"password" name"password"gt
• ltinput type"submit" value"Login
  name"submit"gt
• ltinput typereset valueCleargt
• lt/formgt

6
Passage des Arguments

• Deux méthodes GET et POST
• GET
• Le contenu du formulaire est passé à lURI soumis
• Structureaction?name1value1name2value2name3
  value3
• Action nom de lURI 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édentTableOfContents.jsp?userid
  johnpasswordjohnpw
• La ressource mentionnée dans laction doit être
  un programme, un script, ou une page qui traitera
  les entrées de lutilisateur

7
Passage des Arguments (Suite)

• POST
• Structure comme dans la methode
  GETaction?name1value1name2value2name3value3
  
• GET le contenu encodé est envoyé en attachement
  à lURI.
• 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).

8
HTTP GET Encodage des Champs du Formulaire

• Les champs du formulaire peuvent contenir des
  caractères ASCII qui normalement napparaissent
  pas dans un URI
• Une convention spéciale dencodage 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 lURI

9
Formulaires HTML Un Exemple Complet

• ltform method"POST" action"TableOfContents.jsp"gt
• lttable align "center" border"0" width"300"gt
• lttrgt
• lttdgtUseridlt/tdgt
• lttdgtltinput type"text" name"userid"
  size"20"gtlt/tdgt
• lt/trgt
• lttrgt
• lttdgtPasswordlt/tdgt
• lttdgtltinput type"password" name"password"
  size"20"gtlt/tdgt
• lt/trgt
• lttrgt
• lttd align "center"gtltinput type"submit"
  value"Login
• name"submit"gtlt/tdgt
• lt/trgt
• lt/tablegt
• lt/formgt

10
JavaScript

• But Ajouter de la fonctionnalité au niveau de
  présentation.
• Exemple dapplications
• Détecter le type de browser et exécuter le code
  spécifique à ce browser
• Validation des formulaires Validation des champs
  dentré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 ltSCRIPTgt lt/SCRIPTgt.
• La balise ltSCRIPTgt a plusieurs attributs
• LANGUAGE spécifie le langage du script (p.ex.
  javascript)
• SRC fichier externe contenant le code du script
• ExempleltSCRIPT LANGUAGEJavaScript
  SRCvalidate.jsgtlt/SCRIPTgt

11
JavaScript (Suite)

• Si la balise ltSCRIPTgt ne contient pas un attribut
  SRC, le script de JavaScript est directement dans
  le fichier HTML.
• ExempleltSCRIPT LANGUAGEJavaScriptgtlt!--
  alert(Welcome to our bookstore)//--gtlt/SCRIPTgt
• Deux styles différents de commentaire
• lt! commentaire de HTML pour ne pas afficher le
  code de JavaScript verbatim
• // commentaire de JavaScript

12
JavaScript (Suite)

• JavaScript est un langage de script complet
• Variables
• Assignements (, , )
• Opérateurs de comparaison (lt,gt,), 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

13
JavaScript Un Exemple Complet

• Formulaire HTML
• ltform method"POST
• action"TableOfContents.jsp"gt
• ltinput type"text" name"userid"gt
• ltinput type"password" name"password"gt
• ltinput type"submit" value"Login
  name"submit"gt
• ltinput typereset valueCleargt
• lt/formgt

• JavaScript associé
• ltscript language"javascript"gt
• 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
• lt/scriptgt

14
Stylesheets

• Idée Séparer laffichage du contenu et adapter
  laffichage 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 laffichage aux préférences de
  lutilisateur
• 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

15
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 dun site web peut ainsi changer juste
  en changeant un seul style sheet
• ExempleltLINK RELstyle sheet TYPEtext/css
  HREFbooks.css/gt
• 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 lattribut

16
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
• ltbody background-coloryellowgt

17
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 dun document XML
• Détails sur http//www.w3.org/TR/xpath
• XSL Formatting Objects
• Formate la sortie dune transformation XSL
• Détails sur http//www.w3.org/TR/xsl/

18
Survol

• Concepts Internet
• Formats des données sur le web
• HTML, XML, DTDs
• Introduction à larchitecture à 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 dapplication, Servlets,
  JavaServerPages, passages darguments,
  maintenance des états (cookies)

19
Survol du Niveau Intermédiaire

• Rappel Fonctionnalité du niveau intermédiaire
• Encode la logique dapplication
• 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 dapplication Environnement dexé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
  lexécution au niveau intermédiaire. Ici, on
  verra essentiellement les cookies.

20
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 dapplication est invoqué dans un
  nouveau processus à chauqe invocation (rémède
  FastCGI)
• Aucun partage des ressources entre les programmes
  dapplication (p.ex., les connexions aux bases de
  données) --Rémède Serveurs dapplication

21
CGI Exemple

• Formulaire HTML
• ltform actionfindbooks.cgi methodPOSTgt
• Type an author name
• ltinput typetext nameauthorNamegt
• ltinput typesubmit valueSend itgt
• ltinput typereset valueClear formgt
• lt/formgt
• Code Perl
• use CGI
• dataInnew CGI
• dataIn-gtheader()
• authorNamedataIn-gtparam(authorName)
• print(ltHTMLgtltTITLEgtArgument passing
  testlt/TITLEgt)
• print(The author name is authorName)
• print(lt/HTMLgt)
• exit

22
Serveur dApplication

• 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

23
Serveur dApplication Structure du Processus

• Structure du processus

HTTP
Browser
Serveur Web
Application C
JavaBeans
JDBC
Serveur dapplication
DBMS 1
ODBC
DBMS 2
Pool de Servlets
24
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
  outresponse.getWriter()
• out.println(Hello World)

25
Servlets (Suite)

• Vie dun 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
• Dhabitude il est conseillé de ne faire
  loverriding de service(), mais plutôt de doGet()
  et doPost()

26
Servlets Un Exemple Complet

• public class ReadUserName extends HttpServlet
• public void doGet( HttpServletRequest request,
• HttpSevletResponse response)
• throws ServletException, IOException
• reponse.setContentType(text/html)
• PrintWriter outresponse.getWriter()
• out.println(ltHTMLgtltBODYgt\n ltULgt \n
• ltLIgt request.getParameter(userid) \n
  
• ltLIgt request.getParameter(password)
  \n
• ltULgt\nltBODYgtlt/HTMLgt)
• public void doPost( HttpServletRequest request,
• HttpSevletResponse response)
• throws ServletException, IOException
• doGet(request,response)

27
Java Server Pages

• Servlets
• Génère du HTML en lécrivant dans des objets
  PrintWriter
• Dabord le code, ensuite la page web
• JavaServerPages
• Ecrits en HTML, code similaire au code Servlet,
  mais imbriqué dans un code HTML
• Dabord la page web, ensuite le code
• Sont habituellement compilés en un Servlet

28
JavaServerPages Exemple

• lthtmlgt
• ltheadgtlttitlegtWelcome to BNlt/titlegtlt/headgt
• ltbodygt
• lth1gtWelcome back!lt/h1gtlt String nameNewUser
• if (request.getParameter(username) ! null)
  namerequest.getParameter(username)
• gt
• You are logged on as user ltnamegt
• ltpgt
• lt/bodygt
• lt/htmlgt