COMPTE RENDU M. Mouad EL MERCHICHI CRJJ GB Ceci est un résumé du travail effectué dans les TP concernant les scriptlets et le modèle MVC. Page 0
Sommaire Introduction... 2 TP I : Scriptlets et Actions... 3 Première méthode : Les scriptlets JSP :... 4 Deuxième méthode : Les actions JSP :... 6 TP II : Architecture MVC... 7 A - Base de données... 8 B - L'application... 9 Conclusion... 14 Page 1
Introduction Dans le cadre du module «Java Server Pages», nous avons été chargés de réaliser deux TP afin de voir de plus près l utilisation des scriptlets et actions dans une page JSP ainsi que l architecture MVC. Dans le premier TP, nous allons faire une authentification avec un login et un mot de passe en utilisant un Java Bean représenté par la classe User. Cette authentification va être faite en utilisant deux méthodes : les scriptlets JSP et les actions en JSP. Dans le deuxième TP, nous allons réaliser une application JSP en se basant sur le modèle Model- View-Controller (MVC). MVC est une manière idéale qui consiste à modéliser un composant selon trois parties indépendantes : Le modèle (Model) qui stocke les données qui défi nit la composante. La vue (View) qui crée la représentation visuelle de la pièce à partir des données du modèle. Le contrôleur (Controller) qui traite l'interaction de l utilisateur avec le composant et modifie le modèle et/ou la vue, en réponse à une action de l'utilisateur selon les besoins. Page 2
TP I : Scriptlets et Actions Page 3
Première méthode : Les scriptlets JSP : Premièrement nous allons créer une page «login.html» qui jouera le rôle de page de saisie du login et du mot de passe. Après clique sur le bouton «Envoyer», l utilisateur sera redirigé vers la page «load.jsp». Le code html utilisé est le suivant : <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>authentification</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="authentification"> <form action="load.jsp" method="post"> <h1>authentification</h1> <table> <tr> <td><label for="login">login : </label></td> <td><input type="text" id="login" name="login" size="30" /></td> </tr> <tr> <td><label for="password">mot de passe : </label></td> <td><input type="password" id="password" name="password" size="30" /></td> </tr> <tr> <td colspan="2"> <input type="submit" id="submit" name="submit" value="envoyer" /> </td> </tr> </table> </form> </div> </body> </html> La page «load.jsp» sert à récupérer le login et mot de passe envoyés de la page «login.html» et les stocker dans un objet de classe User contenu dans le package ma.projet et ce en utilisant les scriptlets. Cet objet sera par la suite stocké dans une variable de session et sera récupéré dans la page «affiche.jsp». Voici le code de la classe «User» et la page «load.jsp» : package ma.projet; public class User { private String login; private String password; public User() { public String getlogin() { return login; public String getpassword() { return password; public void setlogin(string login) { Page 4
this.login = login; public void setpassword(string password) { this.password = password; La page «load.jsp» : <%@page contenttype="text/html" pageencoding="utf-8" errorpage="erreur.jsp"%> <%@page import="ma.projet.user" %> <% String l = request.getparameter("login"); String p = request.getparameter("password"); User u = new User(); u.setlogin(l); u.setpassword(p); session.setattribute("user", u); response.sendredirect("affiche.jsp"); %> Finalement, dans la page «affiche.jsp», on récupère l objet «user» depuis la session puis en affiche le login et le mot de passe en utilisant les expressions. Voici le code utilisé dans la page «affiche.jsp» : <%@page contenttype="text/html" pageencoding="utf-8" %> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>résultat</title> <style type="text/css"> h1 { margin-top: 20px; width : 400px; margin-left: auto; margin-right: auto; background-color: lemonchiffon; font-size: 26px; </style> </head> <body> <% User u = (User)session.getAttribute("user"); %> <h1> Votre login est : <%= u.getlogin() %><br /> Votre mot de passe est : <%= u.getpassword() %> </h1> </body> </html> Page 5
Deuxième méthode : Les actions JSP : Cette deuxième méthode consiste à utiliser les actions dans le code précédent au lieu des scriptlets. Cette fois, la page «login2.html» redirige l utilisateur vers la page «load2.jsp» : <form action="load2.jsp" method="post"> Dans la page «load2.jsp», on utilise l action <jsp:usebean /> pour créer un objet User au niveau de la session. Ensuite, on stocke les valeurs du login et mot de passe envoyé de la page «login.html» dans les attributs de l objet crée et ce à l aide de l action <jsp:setproperty />. Enfin, on redirige l utilisateur vers la page «affiche2.jsp». Voici le code de la page «load2.jsp» : <%@page contenttype="text/html" pageencoding="utf-8" errorpage="erreur.jsp"%> <%@page import="ma.projet.user" %> <jsp:usebean id="u" class="ma.projet.user" scope="session"/> <jsp:setproperty name="u" property="login" param="login"/> <jsp:setproperty name="u" property="password" param="password"/> <jsp:forward page="affiche2.jsp" /> Finalement, dans la page «affiche2.jsp», on récupère l objet «user» depuis la session en utilisant l action <jsp:usebean /> puis en affiche le login et le mot de passe en utilisant l action <jsp:getproperty />. Voici le code utilisé dans la page «affiche2.jsp» : <%@page contenttype="text/html" pageencoding="utf-8" %> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>résultat</title> <style type="text/css"> h1 { margin-top: 20px; width : 400px; margin-left: auto; margin-right: auto; background-color: lemonchiffon; font-size: 26px; </style> </head> <body> <% User u = (User)session.getAttribute("user"); %> <h1> <jsp:usebean id="u" class="ma.projet.user" scope="session"/> Votre login est : <jsp:getproperty name="u" property="login" /><br /> Votre mot de passe est : <jsp:getproperty name="u" property="password" /> </h1> </body> </html> Page 6
TP II : Architecture MVC Page 7
A - Base de données Nous avons créé la base de données «Scolarité» qui contient une seule table «Notes». Nous nous sommes basés sur cette table pour réaliser l application JSP en utilisant le modèle MVC. Voici le script de création de la base de données «Scolarité» : CREATE DATABASE IF NOT EXISTS Scolarite; USE Scolarite; -- Création de la table notes CREATE TABLE IF NOT EXISTS Notes ( ID_Note INT AUTO_INCREMENT NOT NULL, NUM_INS VARCHAR(12) NOT NULL, MATIERE VARCHAR(25) NOT NULL, NOTE FLOAT NULL DEFAULT 0, CONSTRAINT PK_Notes PRIMARY KEY (ID_Note) ) ENGINE=INNODB; -- Jeu d'enregistrement INSERT INTO Notes VALUES (NULL, 'HE1', 'Maths', 12.0), (NULL, 'HE1', 'Java', 16.0), (NULL, 'HE1', 'TCP/IP', 11.0), (NULL, 'HE2', 'Algorithme', 14.0), (NULL, 'HE2', 'JSP', 15.0); Page 8
B - L'application LE MODÈLE Dans cette section, nous avons commencé par crée la partie «Model» de l application : La première classe du modèle est la classe «Note» qui un Java Bean. Cette classe contient quatre attributs correspondant aux champs de la table Notes. Elle contient aussi un constructeur sans paramètres et les getters et les setters : package modele.scolarite; public class Note { private int idnote; private String numinscription; private String matiere; private double note; public Note() { public int getidnote() { return idnote; public String getnuminscription() { return numinscription; public String getmatiere() { return matiere; public double getnote() { return note; public void setidnote(int idnote) { this.idnote = idnote; public void setnuminscription(string numinscription) { this.numinscription = numinscription; public void setmatiere(string matiere) { this.matiere = matiere; Page 9
public void setnote(double note) { this.note = note; Ensuite, vient la création d une classe «Utilitaire» dont le rôle est de charger le driver d accès à la base de données et de créer une instance de type «Connection» : package modele.scolarite; import java.sql.connection; import java.sql.drivermanager; import java.sql.sqlexception; public class Utilitaire { private static Connection connection; static { try{ Class.forName("com.mysql.jdbc.Driver"); connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/Scolarite", "root", "root"); catch(classnotfoundexception ex) { System.out.println("driver introuvable"); catch(sqlexception ex) { ex.printstacktrace(); public static Connection getconnection(){ return connection; La classe «Scolarité» est la classe principale du modèle, puisqu elle accède à la base de données pour récupérer les tous les enregistrements de la table «Notes» qui correspondent à un numéro d inscription fourni. Les enregistrements sont stockés dans une collection de type «Vector» : package modele.scolarite; import java.sql.connection; import java.sql.preparedstatement; import java.sql.resultset; import java.sql.sqlexception; import java.sql.types; import java.util.vector; public class Scolarite { public Vector getnotes(string numinscription) { Vector lesnotes = new Vector(); Connection connection = Utilitaire.getConnection(); try { PreparedStatement preparedstatement = connection.preparestatement( "SELECT * FROM Notes WHERE NUM_INS =?;"); preparedstatement.setobject(1, numinscription, Types.VARCHAR, 12); ResultSet result = preparedstatement.executequery(); while (result.next()) { Page 10
Note note = new Note(); note.setidnote(result.getint("id_note")); note.setnuminscription(result.getstring("num_ins")); note.setmatiere(result.getstring("matiere")); note.setnote(result.getdouble("note")); lesnotes.add(note); catch (SQLException ex) { ex.printstacktrace(); return lesnotes; Nous avons créé par la suite une classe «NoteForm» dans laquelle on stocke le numéro d inscription et la liste des notes associée à ce numéro : package forms.beans; import java.util.vector; public class NoteForm { private String numinscription; private Vector lesnotes = new Vector(); public String getnuminscription() { return numinscription; public Vector getlesnotes() { return lesnotes; public void setnuminscription(string numinscription) { this.numinscription = numinscription; public void setlesnotes(vector lesnotes) { this.lesnotes = lesnotes; LE CONTRÔLEUR Le contrôleur sert d intermédiaire entre la vue et le modèle. C est en fait celui qui alimente la vue par les données fournit par le modèle. Il consiste en une Servlet appelé «ControleurServlet». Dans cette dernière, on récupère le numéro d inscription depuis l objet «request» puis on fait appel à la méthode «getnotes()» du modèle pour récupérer les notes associées. Enfin, on stocke le résultat dans une variable session puis on redirige l utilisateur vers la page «Notes.jsp» de la vue : package controleur; import forms.beans.noteform; import java.io.ioexception; import javax.servlet.servletexception; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; Page 11
import javax.servlet.http.httpsession; import modele.scolarite.scolarite; public class ControleurServlet extends HttpServlet { protected void processrequest(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { NoteForm noteform = new NoteForm(); Scolarite sco = new Scolarite(); noteform.setnuminscription(request.getparameter("numinscription")); noteform.setlesnotes(sco.getnotes(noteform.getnuminscription())); HttpSession session = request.getsession(); session.setattribute("noteform", noteform); response.sendredirect("notes.jsp"); @Override protected void doget(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { processrequest(request, response); @Override protected void dopost(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { processrequest(request, response); LA VUE La vue c est ce que voit l utilisateur. C est l interface graphique qui offre les différentes options et informations fournit par le contrôleur. Dans la page «Notes.jsp», qui joue le rôle de vue dans ce cas, on utilise les scriptlets pour récupérer la liste des notes correspondante au numéro d inscription fournit par l utilisateur, puis l affiche sous forme d un tableau. La moyenne des notes est aussi calculée et affichée : <%@page contenttype="text/html" pageencoding="utf-8" language="java"%> <%@page import="forms.beans.*" %> <%@page import="java.util.*" %> <%@page import="modele.scolarite.*" %> <% NoteForm noteform; if (session.getattribute("noteform") == null) { noteform = new NoteForm(); else { noteform = (NoteForm) session.getattribute("noteform"); Iterator it = noteform.getlesnotes().iterator(); double somme = 0.0; int compteur = 0; %> <!DOCTYPE html> < <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> Page 12
<title>gestion des notes</title> </head> <body> <form action="controleur" method="post"> <table> <tr> <td> <label for="numinscription">num Inscription : </label> <input type="text" id="numinscription" name="numinscription" /> <input type="submit" id="action" name="action" value="ok" size="10" /> </td> </tr> </table> </form> <table style="width: 80%;" border="1"> <tr> <th>matière</th> <th>note</td> </tr> <% while (it.hasnext()) { Note note = (Note) it.next(); somme += note.getnote(); compteur++; %> <tr> <td><%= note.getmatiere()%></td> <td><%= note.getnote()%></td> </tr> <% %> <tr> <td><label>moyenne : </label></td> <td><%= somme / compteur %></td> </tr> </table> </body> </html> Page 13
Conclusion La différence entre les scriptlets et les actions réside dans le faite que ces dernières permettent de minimiser l utilisation du code java au sein du code html et ainsi assurer une seule structure (celle basée sur XML) de la page JSP. Un avantage apporté par le modèle MVC est la clarté de l'architecture qu'il impose. Cela simplifie la tâche du développeur qui tenterait d'effectuer une maintenance ou une amélioration sur le projet. En effet, la modification des traitements ne change en rien la vue. Par exemple on peut passer d'une base de données de type MySQL à XML en changeant simplement les traitements d'interaction avec la base, et les vues ne s'en trouvent pas affectées. Page 14