2.
Mise en ouvre des Servlet & JSP
TP JEE Guide pas à pas
ÉNONCÉ
- Développer une application web qui permet de convertir un nombre décimale en nombre binaire en
respectant l’architecture MVC.
Les technologies utilisées :
Eclipse IDE JEE
Tomcat Web Server 9 (Pour l’installation et la configuration de Tomcat Server pour Eclipse, voir TP1).
L’ARCHITECTURE DE L’APPLICATION
1) Le client saisi le nombre à convertir et envoie sa requête au contrôleur
2) Le contrôleur instancie le modèle
3) Le contrôleur stocke les données de la requête dans le modèle puis vérifie la validité des données
4) Le contrôleur fait appel à la couche métier pour faire les traitements
5) Le contrôleur stocke les résultats de traitement dans le modèle
6) Le contrôleur fait un forward vers la vue JSP
7) La vue récupère les résultats du modèle
8) Le contrôleur affiche au client le résultat de la vue
DEVLOPPEMENT
Pour développer cette application, on va présenter deux version :
- Sans utiliser Maven
- Avec Maven
1
VERSION 1 : SANS UTILISER MAVEN
En Eclipse, sélectionnez :
File/New/Project...
3
2
COUCHE MÉTIER
La couche métier se compose de :
Une interface IMetier contient une signature de la méthode qui permet de convertir un nombre décimale en binaire
Une classe MetierImpl qui implemente IMetier.
Un test unitaire
package metier;
public interface IMetier {
public String
convertDecimalToBinary(int nombre);
}
package metier;
public class MetierImpl implements IMetier{
public String convertDecimalToBinary(int nombre) {
return Integer.toBinaryString(nombre);
}
COUCHE MÉTIER (TEST UNITAIRE)
• Ajoutez un nouveau dossier de sources nommé tests au même niveau d’arborescence que le dossier src.
• Dans l’explorateur de paquets, faites un clic droit sur la classe MetierImpl. 3
• Dans le menu contextuel, cliquez sur New - JUnit Test Case.
• Un panneau s’affiche alors :
1 2
COUCHE MÉTIER (TEST UNITAIRE)
• Eclipse va remarquer que la bibliothèque de JUnit est absente du projet et vous propose d’ajouter
automatiquement cette dernière au projet. Dans le panneau qui apparaît, cliquez sur OK.
• Eclipse va maintenant créer automatiquement le squelette de la classe de test
• Il ne reste plus alors qu’à remplir cette dernière.
package metier;
import static org.junit.jupiter.api.Assertions.*;
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
class MetierImplTest {
protected MetierImpl op;
@BeforeEach
void setUp() throws Exception {
op = new MetierImpl(); }
@AfterEach
void tearDown() throws Exception {
}
@Test
void test() {
assertEquals("1010", op.convertDecimalToBinary(10)); }
}
COUCHE MÉTIER (TEST UNITAIRE)
Dans l’explorateur de paquets, faites un clic droit sur la classe MetierImplTest .
Dans le menu contextuel, cliquez sur Run As - JUnit test.
Enfin, le premier rapport de tests s’affiche !
COUCHE WEB
La couche web est définie par :
Le modèle qui permet de stocker les données qu’on va saisir (un nombre décimale) et le résultat à afficher (le
nombre en binaire).
Le contrôleur qui est une servlet
La vue (Vue.jsp) qui va se charger de récupérer le modèle et d’afficher les résultats.
package web;
public class Modele {
private int nbrDecimal;
private String nbrBinaire;
//Getters et Setters
COUCHE WEB
public class ControleurServlet extends HttpServlet {
private IMetier metier;
@Override
public void init() throws ServletException {
metier=new MetierImpl();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
Modele modele=new Modele();
String nbr=request.getParameter("decimal");
modele.setNbrDecimal(Integer.parseInt(nbr));
modele.setNbrBinaire(metier.convertDecimalToBinary(modele.getNbrDecimal()));
request.setAttribute("modele", modele);
request.getRequestDispatcher("Vue.jsp").forward(request,response);
}
}
COUCHE WEB (CONFIGURATION DE LA SERVLET)
Soit en passant par le fichier web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
<servlet>
<servlet-name>servletCon</servlet-name>
<servlet-class>web.ControleurServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>servletCon</servlet-name>
<url-pattern>/convertisseur</url-pattern>
</servlet-mapping>
</web-app>
COUCHE WEB (CONFIGURATION DE LA SERVLET)
Ou bien on peut se faire en utilisant des annotations :
@WebServlet(name="servletCon",urlPatterns="/convertisseur")
public class ControleurServlet extends HttpServlet {
private IMetier metier;
@Override
public void init() throws ServletException {
metier=new MetierImpl();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Modele modele=new Modele();
String nbr=request.getParameter("decimal");
modele.setNbrDecimal(Integer.parseInt(nbr));
modele.setNbrBinaire(metier.convertDecimalToBinary(modele.getNbrDecimal()));
request.setAttribute("modele", modele);
request.getRequestDispatcher("Vue.jsp").forward(request,response);
}
}
<%@ page language="java" contentType="text/html; charset=ISO-8859-1«
pageEncoding="ISO-8859-1"%>
<%@page import="web.Modele"%>
COUCHE WEB (LA PAGE JSP)
<% Modele modele;
if(request.getAttribute("modele")!=null){
modele=(Modele)request.getAttribute("modele");}
else{ modele=new Modele();
%>
Pour créer une page jsp, faites clique droit sur votre projet new/other <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>TP</title>
</head>
<body>
<h1>Convertir Décimal en Binaire</h1>
<form action="convertisseur" method="post">
<table border="0">
<tr>
<td>Décimal:</td>
<td><input type="text" name="decimal"
<% if(modele.getNbrDecimal()!=0){%>
value="<%= modele.getNbrDecimal()%>"/> <%}%>
</td>
</tr>
<tr>
<td>Binaire:</td>
<td><input type="text" name="binaire"
<% if(modele.getNbrBinaire()!=null){%>
value="<%= modele.getNbrBinaire()%>" /> <%}%>
</td>
</tr>
</table>
<input type="submit" value="Convertir">
</form>
</body>
</html>
DÉPLOIEMENT DE L’APPLICATION
Cliquez droit sur le serveur
L’EXÉCUTION DE L’APPLICATION
Afin de tester cette application, démarrez votre serveur Tomcat et tapez l’url suivant sur votre navigateur
http://localhost:8080/ConvAppWeb/Vue.jsp
VERSION 2 : AVEC MAVEN
Créez un Maven Webapp Project
VERSION 2 : AVEC MAVEN
VERSION 2 : AVEC MAVEN
Vous devez fixer la structure du projet Maven crée, et ajoutez les packages
métier, web et la page vue.jsp comme suit:
La structure du projet crée par éclipse Créez le dossier java
1 2
Ajoutez les packages de l’app
UPDATE POM.XML
Ajoutons le code suivant dans le fichier POM afin de configurer la bibliothèque servlet et plugin de tomcat qu’on va
utiliser:
<properties>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependency>
<groupId>org.junit.jupiter</groupId>
<artifactId>junit-jupiter-engine</artifactId>
<version>5.5.2</version>
<scope>test</scope>
</dependency>
<!-- Servlet Library -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version> plugins>
<scope>provided</scope> <!--Config: MavenTomcatPlugin -->
</dependency> <!--http://mvnrepository.com/artifact/org.apache.tomcat.maven/tomcat7-maven-plugin -
->
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<!--Config: contextPathand Port (Default -/SimpleMavenWebApp: 8080) -->
<!--<configuration> <path>/</path> <port>8899</port> </configuration> -->
</plugin>
</plugins>
EXÉCUTION
Apres la configuration du fichier pom.xml, créez une nouvelle configuration d'exécution (voir TP1).
Pour lancer l’application, tapez http://localhost:8080/ConvertisseurWebApp/Vue.jsp
(Il faut noter que dans la deuxième version de l’application, on a changé le nom du projet)
