TP MVC

JSP, SERVLET, JDBC, MVC M.Youssfi

1

Gestion des factures d’un client

Un opérateur Télécom propose à ses clients des abonnements qui sont de deux types Abonnement GSM et Abonnement Fixe. Chaque abonnement reçoit mensuellement de factures à régler.

L’application doit être développée en respectant la séparation des couches données, métier et de présentation.

• La couche de données est représentée par une base de données relationnelle. • La couche métier sera développée en utilisant :

o Des java-beans persistants qui sont des classes persistantes. o Une façade représentée par la classe Operateur.java qui contient les

différentes méthodes métiers qui assurent la persistante et le mapping objet relationnel.

• La couche présentation est une application web basée sur les servlets et JSP en respectant l’architecture MVC.

Dans un premier temps, nous allons nous intéresser uniquement à la consultation des

clients. Le travail que nous allons réaliser consiste à afficher les clients en saisissant un mot clé qui représente une partie du nom du client La vue qu’on souhaite réaliser est la suivante :

Première partie :

1- Créer la base de données et saisir quelques exemples de clients. 2- Créer le modèle (Couche métier) à savoir :

a. Client.java : classe persistante représentée par un java bean. b. Utilitaire.java : classe qui retourne un singleton Connection, en utilisant la

méthode statique getConnection() ; c. Operateur.java : Classe non persistante qui contient une méthode qui permet

de retourner un vecteur de client sachant un mot clé. d. Tester votre modèle en utilisant une simple application.

3- Créer la couche présentation en utilisant une seule page JSP : Clients1.jsp. 4- Créer une deuxième version de la couche présentation en respectant le modèle MVC.


2

Solution de la première partie

1- Base de données :

2- Modèle

a- Client.java package mod.fact; public class Client { private int idClient; private String nom; private String email; private String tel; private String ville; public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public int getIdClient() { return idClient; } public void setIdClient(int idClient) {

this.idClient = idClient; } public String getNom() { return nom; } public void setNom(String nom) { this.nom = nom; } public String getTel() { return tel;} public void setTel(String tel) { this.tel = tel; } public String getVille() { return ville; } public void setVille(String ville) { this.ville = ville; } }


3

b- Utilitaire.java package mod.fact; import java.sql.*; public class Utilitaire { private static Connection conn; static{ try { // Pour JDBC ODBC Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); conn=DriverManager.getConnection("jdbc:odbc:dsnFac t","",""); // pour Mysql Driver : //Class.forName("com.mysql.jdbc.Driver"); //conn=DriverManager.getConnection // ("jdbc:mysql://localhost:3306/NOM_BASE", "root", "" ); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } } public static Connection getConnection(){ return c onn; } }

c- Operateur.java package mod.fact; import java.sql.*; import java.util.*; public class Operateur { public Vector chercheClientsParMotCles(String motC le){ Vector lesClients=new Vector(); Connection conn=Utilitaire.getConnection(); try { PreparedStatement ps=conn.prepareStatement("selec t * from CLIENTS where NOM LIKE ?"); ps.setString(1,"%"+motCle+"%"); ResultSet rs=ps.executeQuery(); while(rs.next()){ Client c=new Client(); c.setIdClient(rs.getInt("ID_CLIENT")); c.setNom(rs.getString("NOM")); c.setEmail(rs.getString("EMAIL")); c.setTel(rs.getString("TEL")); c.setVille(rs.getString("VILLE")); lesClients.add(c); } rs.close(); ps.close(); } catch (SQLException e) { e.printStackTrace(); } return lesClients; } }


4

3- Couche présentation

Clients1.jsp <%@ page language="java" %> <%@ page import="java.util.*" %> <%@ page import="mod.fact.*" %> <% String mot=request.getParameter("motCle"); if(mot==null) mot=""; Operateur op=new Operateur(); Iterator itCli=op.chercheClientsParMotCles(mot).iterator(); %> <html> <head> <title>Clients</title> </head> <body bgcolor="#FFFFFF"> <center> <form method="post" action="Clients1.jsp"> Client:<input type="text" name="motCle" value="<%=mot%>"> <input name="chercher" type="submit" id="chercher" value="Chercher"> </form> <table width="80%" border="1"> <tr> <th scope="col">ID Client </th> <th scope="col">NOM</th> <th scope="col">EMAIL</th> <th scope="col">TEL</th> <th scope="col">VILLE</th> </tr> <% while(itCli.hasNext()){ Client cli=(Client)itCli.next(); %> <tr> <td><%=cli.getIdClient()%></td> <td><%=cli.getNom()%></td> <td><%=cli.getEmail()%></td> <td><%=cli.getTel()%></td> <td><%=cli.getVille()%></td> </tr> <%} %> </table> </center> </body> </html>


5

4- Respecter le modèle MVC

La page JSP que l’on vient de faire fonctionne parfaitement, mais on peut constater qu’elle s’occupe de beaucoup de choses :

1- Récupérer les données de la requête 2- Valider si les données on été bien saisies 3- Faire appel au modèle pour récupérer le résultat. 4- Afficher les résultats.

Il ne faut pas oublier que les pages JSP on été créer simplifier la tache du web designer ; ce qui fait que, dans la pratique, les pages JSP se limitent à l’affichages uniquement. Cela veut dire que les points 1, 2 et 3 doivent être délégués à un autre composant. Ce dernier n’est autre qu’une servlet qu’on appelle le contrôleur. Si l’on développe de cette manière, nous respectons ce que l’on appelle le modèle MVC :

• Modèle : représente la couche métier et s’occupe des traitements. Dans cette partie, on peut utiliser soit les java-beans, ce qui représente notre cas, ou les EJB qui sont des composants distribués qui doivent s’exécuter au sein d’un serveur d’application J2EE

• Contrôleur : représenté par une servlet dont le rôle est de : o Récupérer les données de ces requêtes, o Stocker ces données dans un objet intermédiaire associé à la requête et appelé

form bean (bean de formulaire) o S’assurer de la validation de ces données. o Faire appel au modèle, qui se charge du traitement, en lui transmettant les

données de la requête. o Récupérer les résultats éventuels retournés par le modèle. o Stocker ces résultats dans le form bean o Faire une redirection vers une page JSP qui va se charger de l’affichage de la

des résultats relatif à la réponse http. • Vues : sont implémentées par les pages JSP. Une page JSP se charge de :

o Récupérer les données des résultats stockés, préalablement par le contrôleur, dans le form bean.

o Afficher dynamiquement la page HTML en se basant sur les résultats récupérés.

Une représentation graphique du modèle MVC peut être la suivante :

SGBD

Modèle Java beans

ou EJB

Contrôleur

Une servlet

Vue

JSP JDBC

Form

Bean

Navigateur :

Aperçu de la

vue

1

2

3

4

5 Req

Rep

6

Client Serveur


6

Reviennent à notre problème notre page JSP sera divisée en trois parties :

• Le form bean : ClientForm.java • Le contrôleur : ControleurServlet.java • La vue : Client2.jsp

a- Form Bean : ClientForm.java

D’après la requête,

• Les données envoyées par le client se limitent à la valeur de motCles • Les résultats à afficher est un vecteur de clients.

Le code java du form bean est le suivant : package form.beans; import java.util.Vector; public class ClientForm { private String motCle=""; private Vector lesClients=new Vector(); public Vector getLesClients() { return lesClients; } public void setLesClients(Vector lesClients) { this.lesClients = lesClients; } public String getMotCle() { return motCle; } public void setMotCle(String motCle) { this.motCle = motCle; } } b- Contrôleur : ControleurServlet.java

import java.io.IOException; import java.util.*; import javax.servlet.*; import javax.servlet.http.*; import form.beans.ClientForm; import mod.fact.Operateur; public class ControleurServlet extends HttpServlet { public void dopost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


7

// Créer le form bean pour stocker les données de la requête // et également les résultats à afficher. ClientForm cf=new ClientForm(); // récupérer les données de la requête String mot=request.getParameter("motCle"); if(mot==null) mot=""; // stocker les données de la reqête dans le form bean cf.setMotCle(mot); //Récupérer le résultatde la couche métier // en lui transmettant le mot clé Operateur op=new Operateur(); Vector clients=op.chercheClientsParMotCles(cf.getMotCle()) ; // Stocker le résultat dans le form bean cf.setLesClients(clients); // stocker le form bean dans la session courante HttpSession session=request.getSession(); session.setAttribute("cf",cf); // rediriger vers la vue pour afficher response.sendRedirect("Clients2.jsp"); } } Descripteur de déploiement : web.xml

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc. //DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-a pp_2_3.dtd"> <web-app> <servlet> <servlet-name>cs</servlet-name> <servlet-class>ControleurServlet</servlet-c lass> </servlet> <servlet-mapping> <servlet-name>cs</servlet-name> <url-pattern>/clients</url-pattern> </servlet-mapping> </web-app>

d- La vue : Clients2.jsp

<%@ page language="java" %> <%@ page import="java.util.*" %> <%@ page import="mod.fact.*" %> <%@ page import="form.beans.*" %> <% ClientForm cf=(ClientForm)session.getAttribute("cf"); if(cf==null) cf=new ClientForm(); Iterator itCli=cf.getLesClients().iterator(); %> <html> <head> <title>Clients</title> </head>


8

<body bgcolor="#FFFFFF"> <center>

<form method="post" action="clients"> Client:<input type="text" name="motCle" value="<%=cf.getMotCle()%>"> <input name="chercher" type="submit" id="chercher" value="Chercher"> </form> <table width="80%" border="1"> <tr> <td>ID Client </td> <td>NOM</td> <td>EMAIL</td> <td>TEL</td> <td>VILLE</td> </tr> <% while(itCli.hasNext()){ Client cli=(Client)itCli.next(); %> <tr> <td><%=cli.getIdClient()%></td> <td><%=cli.getNom()%></td> <td><%=cli.getEmail()%></td> <td><%=cli.getTel()%></td> <td><%=cli.getVille()%></td> </tr> <%} %> </table> </center> </body> </html>


9

Deuxième Partie Un abonnement est défini par :

- Le numéro d’abonnement - Le nom de l’abonnement - Date d’abonnement - Le solde de l’abonnement qui représente le montant qui reste à consommer de cet

abonnement. - Le propriétaire de cet abonnement représenté par un attribut de type Client.

Un abonnement GSM est un abonnement qui contient en plus - Le nombre de points fidéléo qui représente des points obtenus en fonction du

montant consommé. Un abonnement FIXE est abonnement qui est caractérisé par

• Un débit Une facture est caractérisée par :

• Le numéro de facture • Date facture • Montant de facture • Une propriété qui indique si la facture est réglée ou non

Travail demandé :

1. Etablir un diagramme de classe complet 2. Créer la base de données correspondante à ce diagramme de classes 3. Compléter la couche métier :

a. Créer les classes Facture, Abonnement, AbFixe et AbGSM b. Ajouter à la classe Operateur les méthodes suivantes :

i. Une méthode qui permet retourner un objet de type Abonnement sachant son numéro, en chargeant dans cet objet Abonnement son propriétaire ainsi que toutes les factures.

ii. Une méthode qui permet d’ajouter un nouveau client. iii. Une méthode qui permet de régler une facture sachant son numéro.

c. Tester à nouveau le modèle 4. Créer une application web en utilisant STRUTS qui permet à l’utilisateur de :

a. Saisir le numéro d’abonnement dans un formulaire b. En validant, afficher, dans la même page,

i. Les caractéristiques de cet abonnement ii. Le nom du propriétaire de cet abonnement iii. La liste des factures de cet abonnement, en affichant une case à cocher

qui devrait permettre de régler une facture.

Documents

TP MVC