Matière : JEE

----------------------------------------------
Auditoire : GLSI-2

TP2
Servlet et architecture client-serveur 3 tiers

Objectifs :

- Installation du serveur d’application JEE WildFly

- Mise en place de l’architecture client-serveur 3 tiers via une application web dynamique qui
exploite le connecteur JDBC pour la communication avec le SGBD MySQL
- Utilisation de l’API servlet pour la gestion des données envoyés par un client web et gestion
de sa session
Outils nécessaires :
 Les outils installés du TP1
 WildFly (dans nos TP, nous utilisons la version widldfly 26.1.3)
Lien de téléchargement : https://www.wildfly.org/downloads/

 Activité 1 : Configuration du serveur d’application Jakarta/JEE Wildfly avec Eclipse

1. Commencez par configurer l’environnement d’exécution Wildfly sous eclipse comme suit :
Window > Prefrences

2. Dans l’interface qui s’ouvre cliquez sur : Server > Runtime Environment > Add

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 1

TP2 – JEE

3. Dans la liste qui s’affiche, sélectionnez JBoss AS, WildFly & EAP Server Tools sous la
catégorie Red Hat JBoss Middleware puis cliquez sur Next. Dans l’interface suivante acceptez
la licence et terminez l’assistant.

Remarquez l’installation des outils relatifs aux serveurs sélectionnés a démarré en arrière plan. N’arrêtez
pas Eclipse et attendez jusqu’à la fin de l’installation.

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 2

TP2 – JEE

4. A la fin de l’installation, une fenêtre s’affiche demandant votre autorisation pour accepter
l’origine des outils à installer. Cliquez sur Select All puis Trust Selected. Ensuite, cliquez sur
Restart Now.

5. Une fois redémarré, configurer le serveur Wildfly version 26 comme indiqué dans les interfaces
qui suivent :

6. Dans l’interface qui s’ouvre, sélectionnez le dossier où vous avez décompressé wildfly. Cochez
l’option Alternate JRE et terminez l’assistant.

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 3

TP2 – JEE

7. Dans l’interface qui s’affiche, cliquez sur Finish. Remarquez alors qu’une nouvelle configuration
du serveur Wildfly a été ajoutée à la liste des servers d’exécution configurés sous Eclipse comme
indiqué dans la figure suivante. Cliquez alors sur Apply and Close.

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 4

TP2 – JEE

Remarquez aussi qu’une nouvelle instance local du serveur Wildfly a été créée au niveau de l’anglet
Servers.

Si la vue Serveurs n’est pas affichée, vous pouvez la rendre visible au niveau du workspace en accédant
comme suit:

 Activité 2 : Ma première application web JEE

1. Créez un nouveau projet web dynamique Dynamic Web Project nommé tp2jee. Laissez les autres
champs avec leurs valeurs par défaut et cliquez sur Finish.

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 5

TP2 – JEE

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 6

TP2 – JEE

Un nouveau projet tp2jee apparaît alors au niveau de votre workspace.

2. Au niveau du projet tp2jee, ajoutez une nouvelle servlet MyFirstServlet. Remarquez que votre
servlet étend la classe javax.servlet.http.HttpServlet.

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 7

TP2 – JEE

3. Testez la servlet en la déployant sur le serveur d’application configuré WildFly comme suit: Clique
droit sur la servlet --> Run As --> Run on server.

Dans l’interface qui s’ouvre, choisissez le serveur WildFly et terminez le reste des étapes de l’assistant.

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 8

TP2 – JEE

Une fenêtre de navigation web sera alors affichée indiquant le message suivant:

Il s’agit de l’affichage du chemin racine «Context Path» de votre application au niveau du navigateur du
client (de l’architecture client-serveur) en utilisant l’objet PrintWriter.

 Activité 3 : Envoyer des données vers le serveur via la requête du client

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 9

TP2 – JEE

Il est à noter que cette activité réutilise le code source du premier TP.

1. Ajoutez une nouvelle page html à votre projet contenant un formulaire ayant un input qui doit
indiquer l’identifiant d’un client et un bouton qui doit soumettre le formulaire vers le serveur.

Pour ce faire, vous pouvez faire un clic droit sur votre projet --> new --> HTML File (si vous n’avez pas
trouvé l’icône de HTML File, vous pouvez la trouver dans other --> web )

Vous pouvez maintenant renommer votre fichier HTML :

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 10

TP2 – JEE

Et voilà le fichier HTML s’ouvre. Vous pouvez remarquer l’emplacement de ce fichier (dans
l’explorateur des projets), sous le dossier webapp de votre projet :

Code html du formulaire :

<form action="MyFirstServlet">

<label>Indiquez l'identifiant du client :</label>

<input type="number" name="idClient" value="1"> </input>

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 11

TP2 – JEE

<input type="submit" name="action" value="Rechercher Client">

</form>

Notez que :

- L’attribut action="MyFirstServlet" est utilisé pour relier le formulaire html au contrôleur

indique. Dans ce cas on a indiqué que la servlet "MyFirstServlet" va recevoir des données du
formulaire.

- L’attribut name="idClient" a été associé au champ indiquant l’identifiant du client afin de

permettre la servlet de récupérer la valeur saisie.

- L’attribut name="action" a été associé au bouton afin de permettre la servlet de déterminer la

valeur de l’action de l’utilisateur (recherche, connexion, ...).

2. Modifiez la servlet afin de

- récupérer la valeur de l’action de l’utilisateur et l’identifiant du client

- afficher le message suivant :

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 12

TP2 – JEE

Pour récupérer la valeur d’un champ du formulaire utilisez la méthode

getParameter("valeurAttributNameDeLinput").

Par exemple request.getParameter("action"); permet de récupérer la valeur du bouton utilisé pour

la soumission du formulaire.

Le code de la méthode doGet sera comme suit :

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException {

String action = request.getParameter("action");

if(action!=null && action.equals("Rechercher Client"))
{
String chaineIdClient = request.getParameter("idClient");
response.getWriter().append("Action reçue: "+action + " ayant l'id
"+chaineIdClient);
}
}
3. Ajoutez une classe java à votre projet nommée GestionFacturation et y-copiez le code source des
méthodes ConnexionBase et getClientByID développées lors du TP1.

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 13

TP2 – JEE

Notez qu’il faut faire les changements suivants au niveau de la classe GestionFacturation :

- modifier la portée de la méthode getClientByID à public et modifier son type de retour afin qu’elle
retourne un message au lieu de l’afficher dans la console : public String getClientByID(int
idClient)

- modifier l’url de connection à la base afin de désactiver la vérification du certificat SSL comme suit:

"jdbc:mysql://localhost:3306/mabase?allowPublicKeyRetrieval=true&useSSL=false";

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 14

TP2 – JEE

Le code final sera comme suit :

import java.sql.Statement;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;

public class GestionFacturation {

public Connection ConnexionBase()
{
// connexion à la base de donnée
Connection con = null;

// configure les parameters d’accès à MySQL

String username = "root";
String password = "root";

// URL de connexion à MySQL server

// Syntax: jdbc:TYPE:machine:port/DB_NAME
// String url = "jdbc:mysql://localhost:3306/mabase";

String url =
"jdbc:mysql://localhost:3306/mabase?allowPublicKeyRetrieval=true&useSSL=false";

// Etablir la connexion à la base à l’URL donnée et avec

// les paramètres de connexion username and password
try
{
Class.forName("com.mysql.cj.jdbc.Driver");
con = DriverManager.getConnection(url, username, password);
System.out.println ("La connection avec la base de donnée est
établie.");
} catch (Exception e)
// (ClassNotFoundException and SQLException)

{
System.out.print(e);
}
return con;
}

public String getClientByID(int idClient){

//Déterminer si un client existe dans la base ou non

String registred =null;
// Initialisation de la connexion
Connection con = ConnexionBase() ;
// créer un objet "Statement" qui enverra des requêtes SQL à la
// base de données
Statement stmt;
try {
stmt = con.createStatement();
// Initialiser votre requête de sélection
String selectQuery = "Select * from client where NumCli=
"+idClient+" ;";
// execution de la requête et retour du resultat
ResultSet results = null;
results = stmt.executeQuery(selectQuery);

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 15

TP2 – JEE

if (results.next())
{
registred = "Client trouvé: " +
results.getString("NomCli")+" Ville : "+ results.getString("Ville");
}
else
{
registred = "Client non trouvé";
}
stmt.close();
// Fermeture de la connexion
con.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return registred ;
}
}
4. Ajoutez le connecteur JDBC de MySQL (fourni avec les ressources du TP1) au dossier lib de votre
projet web tp2jee (il suffit de faire un copier-coller de mysql-connector-java-8.0.23.jar).

Et voilà, le connecteur JDBC de MySQL est bien copié sous le dossier lib de votre projet web tp2jee :

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 16

TP2 – JEE

Modifier la servlet afin de rechercher le client dans la base et afficher ses détails.

N’oubliez pas de re-publier les modifications faites au niveau de votre application sur le serveur Wildfly :
Clic droit sur l’application niveau serveur --> Full Publish

Vous pouvez maintenant faire l’exécution en cliquant droit sur le formulaire, puis Run As --> Run on
Server :

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 17

TP2 – JEE

Le formulaire s’affiche bien :

En cliquant sur le bouton Rechercher Client, le résultat d’affichage sera comme suit :

Pour récupérer les détails d’un client ayant l’identifiant saisi dans la base il faut :

- Convertir la chaîne représentant le code du client en un entier :

String chaineIdClient = request.getParameter("idClient");

int idClient = Integer.parseInt(chaineIdClient);

- Faire appel à la méthode getClientByID de la classe GestionFacturation et récupérer le message

indiquant les détails du client:

GestionFacturation gestion = new GestionFacturation();

String detailsClient = gestion.getClientByID(idClient);

- Afficher les détails en utilisant le PrintWriter.

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 18

TP2 – JEE

 Activité 4 : Configuration de la servlet

Configurer le nombre de visiteur total suite au démarrage du serveur.

1. Ajoutez à l’annotation @WebServlet un paramètre d’initialisation relatif au nombre de visiteurs

(requête cliente) ayant sollicité la servlet:

initParams={@WebInitParam(name="nbVisitors", value="0")}

L’annotation sera alors comme suit:

@WebServlet(value = "/MyFirstServlet", initParams={

@WebInitParam(name="nbVisitors", value="0")})

N’oubliez pas d’ajouter l’importation du package nécessaire :

import javax.servlet.annotation.WebInitParam;

2. Modifiez l’objet ServletContext afin de créer un attribut nbVisitors qui sera :

a) Initialisé avec la valeur par défaut du paramètre d’initialisation

b) Incrémenté suite à la réception d’une nouvelle requête

Le code de gestion du nombre des visiteurs est comme suit :

//Récupération du contexte de la servlet

ServletContext ctx = getServletContext();
int nb ;

//Vérifier s'il existe déjà un attribut dans le contexte de la servlet indiquant le nbr
de visiteurs
//Dans ce cas on a choisi de nommé l'attribut nbVisit
//ctx.getAttribute("nbVisit")==null indique que l'attribut n'existe pas
if(ctx.getAttribute("nbVisit")==null)
{
//Dans ce cas (un premier visiteur qui accède à la servlet)
//on va initialiser pour la première fois l'attribut nbVisit
//avec la valeur initiale du paramètre dinitialisation nbVisitors (indiquez dans
l'annotation)
nb = Integer.parseInt(getInitParameter("nbVisitors")) +1;
ctx.setAttribute("nbVisit", nb);
}
else
{
//Dans ce cas (un ou plusieurs visiteurs ont déjà accède à la servlet)
//on va récupérer l'ancien nombre de visiteur sauvegardé dans l'attribut nbVisit
//avec la valeur initiale du paramètre dinitialisation nbVisitors (indiquez dans
l'annotation)
nb = (int) ctx.getAttribute("nbVisit") +1;
ctx.setAttribute("nbVisit", nb);
}
N’oubliez pas d’ajouter l’importation du package nécessaire :

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 19

TP2 – JEE

import javax.servlet.ServletContext;

3. Affichez le nombre de visiteur au niveau du navigateur du client

 Activité 5 : Gestion de la session utilisateur

1. Ajoutez une deuxième interface index.html contenant un formulaire de connexion (login et mot de
passe)

<form action="MyFirstServlet">
<label>Login : </label>
<input type="text" name="login" > </input><br/>
<label>Mot de passe : </label>
<input type="password" name="pwd"> </input><br/>
<input type="submit" name="action" value="Se Connecter">
</form>

Remarquez qu’on a gardé le même nom pour le bouton de soumission name="action". Dans ce
cas la même servlet MyFirstServlet va récupérer toujours le même paramètre "action" et elle va tester
sur sa valeur (Rechercher Client, Se connecter, ...). Il s’agit de l’implémentation du modèle MVC2 (avec
une seule servlet générique qui contrôle toutes les requêtes du client).

2. Modifiez la servlet afin de :

a) Intercepter les données d’authentification et générer une session contenant le login du client (si
la session n’existe pas)

if(action!=null && action.equals("Se Connecter"))

{
String login = request.getParameter("login");
String pwd = request.getParameter("pwd");
//request.getSession(true) recupère la session du client si elle existe,
//sinon elle génère une nouvelle session
HttpSession session = request.getSession(true);
//session.setAttribute permet de créer/modifier un attribut contenu dans l’objet
session
session.setAttribute("loginUser", login);
}
Dans le code ci-dessous, on a choisi "loginUser" en tant que nom de l’attribut contenant la valeur
du login

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 20

TP2 – JEE

b) Récupérer et afficher dans le fichier log du serveur WildFly les noms et les valeurs des cookies
enregistrés par le serveur au niveau du navigateur. Remarquez s’il existe un cookie associé à la
session créée (cookie ayant le nom JSESSIONID).

if(action!=null && action.equals("Se Connecter"))

{
String login = request.getParameter("login");
String pwd = request.getParameter("pwd");
HttpSession session = request.getSession(true);
session.setAttribute("loginUser", login);
for(Cookie ck : request.getCookies())
System.out.println("Nom du cookie : " + ck.getName() + "\n Valeur du cookie
: "+ ck.getValue());

Pour consulter le fichier log du serveur WildFly, accédez au fichier

WildFly5\WildFly\domains\domain1\logs\server.log

Résultat affiché dans le fichier server.log

c) Rediriger l’utilisateur vers la page client.html. Pour la redirection, utilisez la méthode

sendRedirect de l’objet réponse.

response.sendRedirect("client.html");

3. Modifiez la servlet afin d’afficher un message indiquant le login de la personne connectée et qui a
sollicité la recherche d’un client. Le login doit être récupéré de l’objet session.

Pour récupérer la valeur de l’attribut contenant le login de l’utilisateur, utilisez la méthode getAttribute
de l’objet session.

request.getSession().getAttribute("loginUser")

Exemple d’affichage:

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 21

TP2 – JEE

4. Modifiez l’application afin qu’elle vérifie les paramètres de connexion dans une table de la base. Si les
paramètres de connexion sont valides alors l’utilisateur sera redirigé vers la page client.html sinon un
message d’erreur sera affiché et renvoyé à l’utilisateur.

Réalisé par : Dr. S. Raoudha & Dr. B.O. Ibtissem p. 22