4IIR : Outils de développement 3 - JEE Pr. C.

AZROUMAHLI
TP 3 : Les applications JEE avec le pattern MVC – Les servlet et les JSP

Pour ce TP, nous utilisons la solution « JEE_DEMO2.rar ». Vous pouvez se guider par le fichier « JEE_DEMO3_Code_Snippets.pdf »
disponible sur Classroom dans (Partie 2 : Développement des application Web JEE).

Etape 1 : Ouvrir une application Web JEE

 Après l’extraction de « JEE_DEMO2.rar ». Dans l’IDE Eclipse, ouvrir le projet « open > open project from file system », et
choisir l’emplacement du projet « JEE_DEMO2 ».
 Redémarrer le serveur et exécuter le projet pour vérifier la configuration de l’application.
 Noter bien, la nouvelle arborescence de votre projet : le contenu de « src/main/java », de « webapp/ressources » et de
« webapp/WEB-INF/Views »

Etape 2 : Création et redirection dans les servlets

 Ajouter un lien vers la page de « Contact.java » :

o Ouvrir le fichier « webapp/WEB-INF/views/index.jsp ». Ajouter le lien vers la servlet « Contact.java ».
<ul>
…
<li><a href="Contact">Contactez-nous ! </a></li>
</ul>
 Créer la servlet « Contact.java » dans le package « com.emsi.controllers »
o Vérifier le contenu de « web.xml » et les urls de la nouvelle servlet.
o Ajouter les deux méthodes doGet() et doPost().
o Dans la méthode ajouter une redirection vers la page « Contact.jsp » à créer par la suite.

RequestDispatcher view = request.getRequestDispatcher("WEB-INF/views/Contact.jsp");

view. forward(request,response);

Etape 3 : Création d’un formulaire (contenu HTML) dans une page JSP

 Créer la page JSP « webapp/WEB-INF/Views/Contact.jsp ».

 Dans la page « Contact.jsp », ajouter un lien de vers la page de styles « ressources/CSS/styles.css ».
 Créer un formulaire de contact dans la page « Contact.jsp ». Ce formulaire doit contenir :
o L’action et la méthode action="Contact" method="post".
o Les inputs avec leurs identifiants : first-name, last-name, email et msg.
o Un bouton de soumission : type="submit".

Etape 4 : Création d’un modèle

 Créer un modèle de Contact dans le package « com.emsi.models ». Choisir le type « classe java » avec les constructeurs
de la classe supérieur.
 Dans cette classe java, donner les instances de variables et de propriétés qui correspondent aux champs du formulaire.
private String firstName;
private String lastName;
private String email;
private Gender gender;
private String msg;
private Date dateMsg;…

 Ajouter la bibliothèque pour ajouter le type Date : import java.util.Date;.

Page 1 sur 2
 4IIR : Outils de développement 3 - JEE Pr. C. AZROUMAHLI
 Créer l’énumération Gender :
o Dans le package : « com.emsi.models », créer le nouveau type : new>Enum>Gender
o Ajouter les différentes valeurs :

public enum Gender {

Homme,Femme}
 Une fois les instances de variables sont ajoutées. Générer les getters and setter de ces variables/attributs :
o Dans le modèle « com.emsi.models/Contact.java », Click droit source>Generate getters& setters (Alt+Sift+S),
et sélectionner tous les attributs de la classe Contact.
 Vous pouvez aussi, ajouter la méthode toString() pour afficher les valeurs saisie dans le formulaire.

public String toString() {

return "Contact [firstName=" + firstName + ", lastName=" + lastName + ", email="
+ email + ", gender=" + gender + ", msg=" + msg + ", dateMsg=" + dateMsg + "]";
}

Etape 6 : Obtenir les données du formulaire

Une fois l’application est lancée dans le navigateur, la méthode doGet() est sollicité depuis la servlet « Contact.java » puis
redirigé vers la page JSP « Contact.jsp ».

Quand nous envoyons le formulaire, le formulaire se redirige vers l’action doPost(). Ainsi nous ferons appel de la méthode
doPost qui est appelé.

 Obtenir des données de formulaire de passagers dans un nouvel objet de Contact après la soumission du formulaire.
o Ouvrir la servlet : « com.emsi.controllers/Contact.java », et ajouter les déclarations :

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

String lastName = request.getParameter("lastName");
String email = request.getParameter("email");
String gender = request.getParameter("gender");
String msg = request.getParameter("msg");

o Vous pouvez vérifier les données saisies par l’utilisateur en affichant ces valeurs :

System.out.println("firstName: " + firstName);

Page 2 sur 2