JAVA SERVER PAGES (JSP)

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 11/7/2018 IFT1020

CODES date.jsp GetTimeFromDate.java et heure.jsp pizza.html plusieursheureslocales branchement zonedb 11/7/2018 IFT1020

Contenu web dynamique On peut utiliser les pages JavaServer (JSP) pour implanter des pages Web dynamiques Pour utiliser les JSP, on a besoin d’un serveur intégré avec un container JSP Le serveur Apache Tomcat est gratuit 11/7/2018 IFT1020

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 l’utiliser. Vous pouvez aussi vous inspirer de la page de Guy Lapalme, http://www2.iro.umontreal.ca:8080/~lapalme, où vous trouverez un exemple de date avec JavaBean. 11/7/2018 IFT1020

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 l’heure courantes dans une page web est : <%= new java.util.Date() %> 11/7/2018 IFT1020

Allons voir date.jsp… 11/7/2018 IFT1020

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 l’adresse http://localhost:8080/ift1020/date.jsp (http://localhost:8081/date.jsp sous NetBeans) 11/7/2018 IFT1020

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 ( <%= . . . %> ) 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 11/7/2018 IFT1020

…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/7/2018 IFT1020

Le container JSP réécrit la page demandée Fichier JSP Container JSP Fichier HTML Serveur Web Internet Fureteur 11/7/2018 IFT1020

Encapsulation de calculs dans des JavaBeans La plupart des pages web sur le réseau nécessitent la contribution de deux types d’expert : 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. 11/7/2018 IFT1020

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 11/7/2018 IFT1020

JavaBeans… méthode d’accès méthode de modification Si le nom de la propriété est nomPropriete et son type est Type méthode d’accè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 11/7/2018 IFT1020

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 jsp:useBean On donne un nom à l’objet et on spécifie le nom de la classe du bean <jsp:useBean id =“toune" class=“TouneBean"/> Cette directive invoque le constructeur par défaut de la classe TouneBean Il fabrique une instance d’objet dont le nom est toune 11/7/2018 IFT1020

JavaBeans… Pour modifier une propriété dans le bean, on utilise la directive setProperty <jsp:setProperty name=“toune" property=“tempo" value=“140"/> Pour lire une propriété dans le bean, on utilise la directive getProperty <jsp:getProperty name=“toune" property=“tempo"/> Cette dernière retourne une chaîne de caractères qui est insérée dans la page HTML résultante 11/7/2018 IFT1020

JavaBeans… Si par exemple on ne veut pas afficher la date mais juste l’heure dans notre page date.jsp On peut extraire l’heure à l’aide de la méthode getTimeInstance de la classe DateFormat On place ce code dans un bean 11/7/2018 IFT1020

Allons voir GetTimeFromDateBean.java et heure.jsp 11/7/2018 IFT1020

JavaBeans C’est 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. 11/7/2018 IFT1020

Lire des paramètres… On veut modifier notre page JSP pour tenir compte de la ville de l’utilisateur 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); 11/7/2018 IFT1020

Lire des paramètres… L’utilisateur 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 l’heure courante pour cette zone de temps ou imprimer un message d’erreur comme quoi la ville n’a pas été trouvée ou n’est pas disponible 11/7/2018 IFT1020

Lire des paramètres… On a besoin d’une forme HTML pour saisir l’entrée de l’utilisateur Cette forme contient un champs de texte et un bouton pour soumettre la forme au serveur JSP 11/7/2018 IFT1020

Allons voir heurelocale.html … 11/7/2018 IFT1020

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 L’attribut action de la forme spécifie l’URL 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 l’objet prédéfini request La méthode getParameter de la classe ServletRequest retourne la valeur d’un élément à partir de son nom Ici pour obtenir la ville tapée par l’utilisateur : <%= request.getParameter("ville")%> 11/7/2018 IFT1020

Lire des paramètres Pour fixer la propriété “ville” du HeureLocaleBean <jsp:setProperty name=“heure“ property=“ville“  value="<%= request.getParameter(\“ville\")%> /> Qu’on peut aussi abréger avec le raccourci <jsp:setProperty name=“heure" property=“ville" param=“ville"/> 11/7/2018 IFT1020

Allons voir heurelocale.jsp et HeureLocaleBean.java… 11/7/2018 IFT1020

Formes HTML… Une forme HTML contient des éléments d’interface-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é) 11/7/2018 IFT1020

Allons voir pizza.html… 11/7/2018 IFT1020

Formes HTML… La plupart des éléments d’une forme HTML utilise la syntaxe suivante : <input type=nom_type_element attributs/> Il faut inclure le nom des attributs. On peut inclure des valeurs d’attribut par défaut. 11/7/2018 IFT1020

Formes HTML… Champs de texte <input type="text" name=“titre" value="" size="16" maxlength=“30" /> Mot de passe <input type="password" name=“No. carte de crédit“ size="16" maxlength="19" /> Zone de texte <textarea name="..." rows="..." cols="..."> default text </textarea> 11/7/2018 IFT1020

Formes HTML… Boutons radio <input type="radio" name=“Grosseur" value="S"/>Small 10 po. <input type="radio" name=“Grosseur" value=“M"/> Medium 12 po. <input type="radio" name=“Grosseur" value=“L" checked="checked"/>Large 14 po. <input type="radio" name=“Grosseur" value=“XL"/>X-Large 16 po. Seulement un bouton radio peut être coché à la fois Boîtes à cliquer <input type="checkbox" name=“Ingredients“ value=“Pe“ />Peperoni <input type="checkbox" name=“Ingredients" value=“Ch" />Champignons <input type="checkbox" name=“Ingredients" value=“Ex" />Extra Fromage <input type="checkbox" name=“Ingredients" value=“Ba" />Bacon <input type="checkbox" name=“Ingredients" value=“Oi" />Oignons <input type="checkbox" name=“Ingredients" value=“Ol" />Olives <input type="checkbox" name=“Ingredients" value=“Pi" />Piments <input type="checkbox" name=“Ingredients" value=“Po" />Poulet Plusieurs boîtes peuvent être cochées et auront l’attribut “checked” à la valeur “checked” Ici si deux boîtes sont cochées (cf. Bacon et Olives), le fureteur envoit au serveur : Ingredients=Ba+Ingredients=Ol 11/7/2018 IFT1020

Formes HTML… Liste-sélection : <select name=“Pâte"> <option value=“T“ selected="selected">Traditionnelle</option> <option value=“M" >Mince</option> <option value=“F" >Fromage</option> </select> 11/7/2018 IFT1020

<input type="submit" value=“Commandez !"/> Bouton de soumission <input type="submit" value=“Commandez !"/> Champs caché (non éditables) <input type="hidden" name=“No. carte credit“ value=“1234 5678 9012 3456"/> Le fureteur n’affiche pas le champs caché Il envoit les paires nom/valeur des champs au serveur lorsque la forme est soumise. 11/7/2018 IFT1020

HTML Forms On place tous les éléments de la forme dans un élément de type form <form action=“pizza.jsp" method="POST"> . </form> Une forme HTML doit spécifier l’adresse URL du programme-serveur qui la traite. L’attribut action contient cet URL. On met l’attribut method à la valeur POST parce qu’il n’y a pas de temps limite pour remplir cette forme. 11/7/2018 IFT1020

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 <jsp:useBean id=“panier" class=“PanierEpicerieBean" scope="session"/> L’utilisateur demande la page JSP pour la première fois, un nouveau panier est construit. L’utilisateur retourne à la même page ou visite une autre page de la même application, le panier est toujours là. Si le bean n’a pas l’attribut 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. 11/7/2018 IFT1020

Session… Créer un programme qui permet à un utilisateur d’ajouter des villes et leurs heures locales Dans la forme HTML initiale, l’application 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 L’utilisateur peut ajouter autant de villes que désirées Toutes les villes sont stockées dans un objet de la classe PlusieursHeuresLocalesBean 11/7/2018 IFT1020

Session <jsp:useBean id=“heuresLocales“ L’objet 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 <jsp:useBean id=“heuresLocales“ class=“PlusieursHeuresLocalesBean" scope="session"/> Une instance est créée pour toutes les pages La méthode setVille ajoute une ville à l’objet bean La nouvelle ville vient du champs de texte de nom ville <jsp:setProperty name=“heureLocales" property=“ville" param=“ville"/> 11/7/2018 IFT1020

Allons voir plusieursheureslocales Allons voir plusieursheureslocales.[html | jsp] et PlusieursHeuresLocalesBean.java… 11/7/2018 IFT1020

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 l’entrée mais qui n’a pas de sortie HTML La page évalue l’entrée et utilise la directive jsp:forward pour sélectionner une autre page. 11/7/2018 IFT1020

Branchement de pages… La syntaxe de la directive de branchement est : <jsp:forward page="url"/> Provoque le chargement de la page trouvée à l’adresse URL Les données du bean courant et des beans de portée “request” sont envoyées à la nouvelle page Page de branchement : <% if (condition) { %> <jsp:forward page="url1"/> } else <jsp:forward page="url2"/> NB. On a dit qu’on ne mettait pas de code Java dans les pages JSP et pourtant ici on a des instructions Java entre les <% %>!!! C’est que les pages de branchement sont une exception car elle ne contiennent aucun élément graphique (elle n’est pas designée par le graphiste!) 11/7/2018 IFT1020

Branchement de pages On peut utiliser cette technique pour traiter les villes dont la zone de temps n’est pas connue. On débute une forme HTML similaire à celle de l’exemple 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 11/7/2018 IFT1020

Allons voir branchementheure. [html | jsp], resultatheure Allons voir branchementheure.[html | jsp], resultatheure.jsp et erreurheure.jsp… 11/7/2018 IFT1020

Application à trois parties… Partie présentation : le fureteur Partie logique : l’engin JSP, les pages JSP et le JavaBean Partie stockage : la base de données 11/7/2018 IFT1020

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 n’est pas disponible, on regarde à travers les IDs comme auparavant On utilise une classe SourceDonneesBean pour gérer la connection avec la BD 11/7/2018 IFT1020

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 à l’information dans web.xml On utilise la méthode getInitParameter de l’objet prédéfini application 11/7/2018 IFT1020

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 d’une base de données SQL : villefuseau.sql qui contient la table VilleFuseau. 11/7/2018 IFT1020

villefuseau.sql CREATE TABLE VilleFuseau( Ville CHAR(30), Fuseau CHAR(45)) INSERT INTO VilleFuseau VALUES( ‘San Francisco’, ‘America/Los_Angeles’) INSERT INTO VilleFuseau VALUES( ‘Quebec’, ‘America/Montreal’) … Ville Fuseau San Francisco America/Los_Angeles Quebec America/Montreal … 11/7/2018 IFT1020

Allons voir zonedb.[html | jsp], SourceDonneesBean.java et ZoneDBBean.java… 11/7/2018 IFT1020

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) 11/7/2018 IFT1020