JAVA SERVER PAGES (JSP)

1
JAVA SERVER PAGES (JSP)
2
OBJECTIFS

• Implanter des pages Web dynamiques utilisant la
  technologie des pages JavaServer
• Apprendre les éléments syntaxiques des pages
  JavaServer
• Être en mesure de structurer une application Web
  comme une séquence de pages JavaServer
• Comprendre la relation entre les pages JavaServer
  et les servlets

3
CODES

• date.jsp
• GetTimeFromDate.java et heure.jsp
• pizza.html
• plusieursheureslocales
• branchement
• zonedb

4
Contenu web dynamique

• On peut utiliser les pages JavaServer (JSP) pour
  implanter des pages Web dynamiques
• Pour utiliser les JSP, on a besoin dun serveur
  intégré avec un container JSP
• Le serveur Apache Tomcat est gratuit

5
Serveur Tomcat au DIRO

• NetBeans vient avec son propre serveur Tomcat.
• Le DIRO a installé Tomcat/Jakarta sur le serveur
  web www2 port 8080.
• Pour l'utiliser il faut suivre les étapes dictées
  par le groupe de support du DIRO
  http//www.iro.umontreal.ca/support/servlet.html
• Il faut attendre au moins 4h, le temps que le
  serveur fasse une mise à jour du contexte xml de
  l'usager, avant de pouvoir lutiliser.
• Vous pouvez aussi vous inspirer de la page de Guy
  Lapalme, http//www2.iro.umontreal.ca8080/lapalm
  e, où vous trouverez un exemple de date avec
  JavaBean.

6
Web Dynamique

• Une page JavaServer contient des annotations HTML
  et des instructions Java.
• Les instructions Java sont executées chaque fois
  que la page est livrée à un fureteur.
• Une instruction pour insérer la date et lheure
  courantes dans une page web est lt new
  java.util.Date() gt

7
Allons voir date.jsp
8
Pour déployer la page JSP pour la date

• Insérer le code de la page JSP dans un fichier en
  utilisant un éditeur de texte.
• Déplacer le fichier dans le répertoire des
  applications web de votre engin JSP. Par
  exemple, si vous utilisez Tomcat, créer le
  répertoire C\jakarta-tomcat\webapps\ift1020
• Placez le fichier date.jsp dans ce répertoire.
• Démarrez le serveur web.
• Chargez ladresse
• http//localhost8080/ift1020/date.jsp
• (http//localhost8081/date.jsp sous NetBeans)

9
Exécution du web dynamique

• Le container JSP lit la page demandée et la
  transforme en page HTML
• Les annotations HTML ne sont pas touchées
  (restent inchangées)
• Les annotations JSP ( lt . . . gt ) sont
  traitées
• Les expressions contenues dans les annotations
  JSP sont évaluées et converties en chaînes de
  caractères avec la méthode toString

10
Exécution du web dynamique

• Les chaînes sont introduites dans la page HTML
• Le document résultant ne contient que des
  annotations HTML
• Le serveur web envoie le document au fureteur

11
Le container JSP réécrit la page demandée
12
Encapsulation de calculs dans des JavaBeans

• La plupart des pages web sur le réseau
  nécessitent la contribution de deux types
  dexpert
• Le programmeur qui comprend et développe les
  méthodes et les calculs pour afficher les
  résultats que la page doit afficher.
• Un designer graphique qui détermine comment
  afficher les résultats.
• Il est beaucoup mieux dans ce contexte de séparer
  le code Java des annotations HTML.
• Tout calcul non trivial devrait être effectué
  dans une classe Java séparée.
• On peut connecter un ou plusieurs JavaBeans à une
  page JSP.

13
JavaBeans

• Un JavaBean est une classe Java
• Il doit avoir un constructeur par défaut
• Un JavaBean expose ses propriétés à travers des
  méthodes get et set
• Les propriétés sont accédées et modifiées par des
  méthodes dont les noms suivent une convention

14
JavaBeans

• Si le nom de la propriété est nomPropriete et
• son type est Type
• méthode daccès
• Type getNomPropriete()
• méthode de modification
• void setNomPropriete(Type nouvelleValeur)
• Une propriété Booléene utilise une convention
  différente
• boolean isNomPropriete()
• void setNomPropriete(boolean nouvelleValeur)
• Par convention, le nom du bean se termine par
  Bean
• Il ne faut faire aucune supposition quant à la
  représentation interne des données des beans

15
JavaBeans

• Une page JSP donne un accès aux propriétés des
  JavaBeans sans avoir a écrire de code Java.
• Pour utiliser un bean dans un page JSP, on
  utilise la directive jspuseBean
• On donne un nom à lobjet et on spécifie le nom
  de la classe du bean
• ltjspuseBean id toune" classTouneBean"/gt
• Cette directive invoque le constructeur par
  défaut de la classe TouneBean
• Il fabrique une instance dobjet dont le nom est
  toune

16
JavaBeans

• Pour modifier une propriété dans le bean, on
  utilise la directive setProperty
• ltjspsetProperty nametoune" propertytempo"
  value140"/gt
• Pour lire une propriété dans le bean, on utilise
  la directive getProperty
• ltjspgetProperty nametoune" propertytempo"/gt
• Cette dernière retourne une chaîne de caractères
  qui est insérée dans la page HTML résultante

17
JavaBeans

• Si par exemple on ne veut pas afficher la date
  mais juste lheure dans notre page date.jsp
• On peut extraire lheure à laide de la méthode
  getTimeInstance de la classe DateFormat
• On place ce code dans un bean

18

• Allons voir GetTimeFromDateBean.java et heure.jsp

19
JavaBeans

• Cest une bonne pratique de mettre les directives
  du bean au début du fichier JSP, avant les
  annotations HTML.
• heure.jsp et GetTimeFromDateBean.java doivent
  être placés dans les répertoires appropriés
• time.jsp dans c\Jakarta-tomcat\webapps\ift1020
• TimeFormatterBean.java dans
• c\Jakarta-tomcat\webapps\ift1020\WEB-INF\classes
  
• Rappelons-nous que nous utilisons les JavaBeans
  pour séparer, dans nos présentations, les
  annotations HTML des calculs Java.

20
Lire des paramètres

• On veut modifier notre page JSP pour tenir compte
  de la ville de lutilisateur
• La librairie Java contient une classe TimeZone
• Une zone de temps (la même pour toute les villes
  partageant le même fuseau horaire) est identifiée
  par une chaîne telle que
• "America/Montreal"
• Europe/Paris"
• La méthode statique getAvailableIDs retourne un
  tableau de chaînes contenant tous les
  identificateurs de zones disponibles (ID)
• La méthode statique getTimeZone retourne un objet
  de la classe TimeZone pour un ID donné
• String zoneID "America/Montreal"
• TimeZone zone TimeZone.getTimeZone(zoneID)

21
Lire des paramètres

• Lutilisateur entre un ville comme Montreal
• Notre bean va vérifier si la chaîne Montreal
  existe à la fin des zones de temps
• La page JSP va formatter lheure courante pour
  cette zone de temps ou imprimer un message
  derreur comme quoi la ville na pas été trouvée
  ou nest pas disponible

22
Lire des paramètres

• On a besoin dune forme HTML pour saisir lentrée
  de lutilisateur
• Cette forme contient un champs de texte et un
  bouton pour soumettre la forme au serveur JSP

23

• Allons voir heurelocale.html

24
Lire des paramètres

• Quand un fureteur soumet une forme, il envoit au
  serveur web les noms et valeurs de tous les
  éléments de la forme
• Le nom ici est ville
• La valeur est le contenu du champs de texte
  correspondant
• Lattribut action de la forme spécifie lURL du
  programme-serveur qui traite les éléments de la
  forme
• Ici heurelocale.jsp
• Dans une page JSP, on peut accéder aux données de
  la forme à travers lobjet prédéfini request
• La méthode getParameter de la classe
  ServletRequest retourne la valeur dun élément à
  partir de son nom
• Ici pour obtenir la ville tapée par lutilisateur
  
• lt request.getParameter("ville")gt

25
Lire des paramètres

• Pour fixer la propriété ville du
  HeureLocaleBean
• ltjspsetProperty nameheure propertyville 
• value"lt request.getParameter(\ville\")gt
  /gt
• Quon peut aussi abréger avec le raccourci
• ltjspsetProperty nameheure" propertyville"
  paramville"/gt

26
Allons voir heurelocale.jsp et HeureLocaleBean.jav
a
27
Formes HTML

• Une forme HTML contient des éléments
  dinterface-usager tels que
• Champs de texte
• Champs mot de passe
• Zone de texte (text area)
• Boutons radio
• Boîtes à cliquer
• Liste de sélection
• Boutons de soumission (submit buttons)
• Champs cachés (texte caché)

28
Allons voir pizza.html
29
Formes HTML

• La plupart des éléments dune forme HTML utilise
  la syntaxe suivante
• ltinput typenom_type_element attributs/gt
• Il faut inclure le nom des attributs.
• On peut inclure des valeurs dattribut par défaut.

30
Formes HTML

• Champs de texte
• ltinput type"text" nametitre" value""
  size"16" maxlength30" /gt
• Mot de passe
• ltinput type"password" nameNo. carte de
  crédit size"16" maxlength"19" /gt
• Zone de texte
• lttextarea name"..." rows"..." cols"..."gt
  default text
• lt/textareagt

31
Formes HTML

• Boutons radio
• ltinput type"radio" nameGrosseur"
  value"S"/gtSmall 10 po.
• ltinput type"radio" nameGrosseur" valueM"/gt
  Medium 12 po.
• ltinput type"radio" nameGrosseur" valueL"
  checked"checked"/gtLarge 14 po.
• ltinput type"radio" nameGrosseur"
  valueXL"/gtX-Large 16 po.
• Seulement un bouton radio peut être coché à la
  fois
• Boîtes à cliquer
• ltinput type"checkbox" nameIngredients
  valuePe /gtPeperoni
• ltinput type"checkbox" nameIngredients"
  valueCh" /gtChampignons
• ltinput type"checkbox" nameIngredients"
  valueEx" /gtExtra Fromage
• ltinput type"checkbox" nameIngredients"
  valueBa" /gtBacon
• ltinput type"checkbox" nameIngredients"
  valueOi" /gtOignons
• ltinput type"checkbox" nameIngredients"
  valueOl" /gtOlives
• ltinput type"checkbox" nameIngredients"
  valuePi" /gtPiments
• ltinput type"checkbox" nameIngredients"
  valuePo" /gtPoulet
• Plusieurs boîtes peuvent être cochées et auront
  lattribut checked à la valeur checked
• Ici si deux boîtes sont cochées (cf. Bacon et
  Olives), le fureteur envoit au serveur
• IngredientsBaIngredientsOl

32
Formes HTML
Liste-sélection ltselect namePâte"gt ltoption
valueT selected"selected"gtTraditionnellelt/opti
ongt ltoption valueM" gtMincelt/optiongt ltoption
valueF" gtFromagelt/optiongt lt/selectgt
33

• Bouton de soumission
• ltinput type"submit" valueCommandez !"/gt
• Champs caché (non éditables)
• ltinput type"hidden" nameNo. carte credit
• value1234 5678 9012 3456"/gt
• Le fureteur naffiche pas le champs caché
• Il envoit les paires nom/valeur des champs au
  serveur lorsque la forme est soumise.

34
HTML Forms

• On place tous les éléments de la forme dans un
  élément de type form
• ltform actionpizza.jsp" method"POST"gt
• .
• .
• .
• lt/formgt
• Une forme HTML doit spécifier ladresse URL du
  programme-serveur qui la traite.
• Lattribut action contient cet URL.
• On met lattribut method à la valeur POST parce
  quil ny a pas de temps limite pour remplir
  cette forme.

35
Session

• Une session est une séquence de requêtes de pages
  à partir du même fureteur et au même serveur web
• Pour saisir une session de pages JSP, on utilise
  un bean en spécifiant une portée de type session
• ltjspuseBean idpanier" classPanierEpicerieBe
  an" scope"session"/gt
• Lutilisateur demande la page JSP pour la
  première fois,
• un nouveau panier est construit.
• Lutilisateur retourne à la même page ou visite
  une autre page de la même application,
• le panier est toujours là.
• Si le bean na pas lattribut de portée (scope)
  assignée à la valeur session,
• le bean à une portée de type page
• et un nouvel objet est créé chaque fois que la
  page est visitée.

36
Session

• Créer un programme qui permet à un utilisateur
  dajouter des villes et leurs heures locales
• Dans la forme HTML initiale, lapplication web
  demande le nom de la première ville
• La page JSP affiche la première ville et une
  forme pour entrer une autre ville
• Lutilisateur peut ajouter autant de villes que
  désirées
• Toutes les villes sont stockées dans un objet de
  la classe PlusieursHeuresLocalesBean

37
Session

• Lobjet bean possède la portée de type session et
  va donc garder la liste des villes
• Pour garder les villes dans un bean
  PlusieursHeuresLocalesBean
• ltjspuseBean idheuresLocales
• classPlusieursHeuresLocalesBean"
  scope"session"/gt
• Une instance est créée pour toutes les pages
• La méthode setVille ajoute une ville à lobjet
  bean
• La nouvelle ville vient du champs de texte de nom
  ville
• ltjspsetProperty nameheureLocales"
  propertyville" paramville"/gt

38
Allons voir plusieursheureslocales.html jsp
et PlusieursHeuresLocalesBean.java
39

• Branchement de pages

• Une page JSP peut envoyer une requête à une autre
  page
• On peut utiliser le forward pour implanter les
  branchements
• Envoyer la requêtre à une page JSP qui vérifie
  lentrée mais qui na pas de sortie HTML
• La page évalue lentrée et utilise la directive
  jspforward pour sélectionner une autre page.

40

• Branchement de pages

• La syntaxe de la directive de branchement est
• ltjspforward page"url"/gt
• Provoque le chargement de la page trouvée à
  ladresse URL
• Les données du bean courant et des beans de
  portée request sont envoyées à la nouvelle page
• Page de branchement
• lt
• if (condition)
• gt
• ltjspforward page"url1"/gt
• lt
• else
• gt
• ltjspforward page"url2"/gt
• lt

41

• Branchement de pages

• On peut utiliser cette technique pour traiter les
  villes dont la zone de temps nest pas connue.
• On débute une forme HTML similaire à celle de
  lexemple précédent
• Sauf que nous enverrons les données à une page
  JSP de branchement (non graphique)
• Cette page va ensuite envoyer la requête à la
  page appropriée

42
Allons voir branchementheure.html jsp,
resultatheure.jsp et erreurheure.jsp
43
Application à trois parties

• Partie présentation le fureteur
• Partie logique lengin JSP, les pages JSP et le
  JavaBean
• Partie stockage la base de données

44
Application à trois parties

• On va garder une table des zones de temps dans
  une base de données
• On va construire une classe ZoneDBBean qui va
  consulter la base de données pour trouver la
  ville demandée
• Si elle nest pas disponible, on regarde à
  travers les IDs comme auparavant
• On utilise une classe SourceDonneesBean pour
  gérer la connection avec la BD

45
Application à trois parties

• Une seule instance de SourceDonneesBean est
  nécessaire pour toutes les pages JSP
• On fixe sa portée (scope) à la valeur
  "application"
• On stocke les propriétés de la base de données
  dans le fichier web.xml dans le sous-répertoire
  WEB_INF
• Les pages JSP peuvent accéder à linformation
  dans web.xml
• On utilise la méthode getInitParameter de lobjet
  prédéfini application

46
Application à trois parties

• Retrouver les informations pour accéder à la base
  de données dans le fichier web.xml et initialiser
  la base de données (login à SQL)
• ZoneDBBean fait une requête à la base de données
  pour trouver la ville demandée
• On a besoin dune base de données SQL
  villefuseau.sql qui contient la table VilleFuseau.

47
villefuseau.sql

1. CREATE TABLE VilleFuseau( Ville CHAR(30), Fuseau
   CHAR(45))
2. INSERT INTO VilleFuseau VALUES( San Francisco,
   America/Los_Angeles)
3. INSERT INTO VilleFuseau VALUES( Quebec,
   America/Montreal)

Ville
Fuseau
San Francisco America/Los_Angeles Quebec
America/Montreal
48
Allons voir zonedb.html jsp,
SourceDonneesBean.java et ZoneDBBean.java
49
Servlets

• Un servlet est une classe qui étend (extends) la
  classe HTTPServlet
• Les pages JSP sont en fait traduites en servlets
• Un servlet est un programme Java
• Effectuant des calculs (Java)
• Retournant des données à retourner au fureteur
  (HTML)