# Compte-rendu TP n°6: Les servlets Période P2
# Stevan Mercier - Adrien Gauthier
## Introduction
Le but de ce TP est de mettre en place un serveur apache et d'y ajouter des Servlet dans l'optique de mettre en place un chat.
## Partie 1: Chat
### Servlet /chat
**Question:** Lorsque l'on lance le servlet chat nous obtenons une erreur 405 "Méthode non autorisée". Ce qui est normal car nous n'avons encore rien mis dedans donc quand l'on veut y acceder il nous met cette erreur.
#### Stockage du contenu:
Pour stocker le contenu des messages à envoyer nous devons utiliser un stringBuffer dans lequelle nous allons pouvoir ajouter notre texte à l'aide de la méthode append().
```java=
public class Chat extends HttpServlet {
private static final long serialVersionUID = 197811968639586823L;
//Création de notre StringBuffer
private StringBuffer chatContent;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
//Mise en forme des éléments constitutifs d'une page HTML
out.println("<html>");
out.println("<body>");
//On affichera les messages à l'aide de ce code
// les balises pre permettent un retour chariot automatique
out.println("<pre>");
out.println(chatContent);
out.println("</pre>");
// Mise en forme de notre formulaire
out.println("<form name=\"chatForm\" action=\"chat\" method=\"post\">");
out.println("<input type=\"text\" name=\"ligne\" value=\"\"/>");
out.println("<input type=\"submit\" name=\"action\" value=\"submit\"/>");
out.println("<input type=\"submit\" name=\"action\" value=\"refresh\"/>");
out.println("</form>");
out.println("</body>");
out.println("</html>");
}
// Création d'un méthode doPost qui permet de renvoyer le contenu du message
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter out = resp.getWriter();
// Si le message n'est pas vide
if (req.getParameter("ligne").length() > 0) {
//on affiche le message que l'uilisateur a entré
chatContent.append(req.getParameter("ligne")).append("\n");
}
this.doGet(req, resp)/* (1) */;
}
}
````
Cette première version de notre chat affiche notre formulaire et les messages dans une class Java.
Le mieux serait de créer un fichier qui ne contient que du code html pour ne pas mélanger les différents languages.
Pour y parvenir nous allons donc créer un page JSP.
## Partie 2: Utilisation d'une JSP
Pour simplifier la maintenance du chat, nous allons séparer le HTML du traitement du contenu. Le HTML sera généré par une JSP (chat.jsp) et le contenu sera passé via votre servlet chat.
### Code de chat.jsp
```java=
<%@page import="java.io.PrintWriter"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.Date"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
//Permet de donner un nom à l'onglet
<title>Bienvenue sur notre chat</title>
</head>
<body>
<div id="contenu">
//Titre principal
<h1>Chatbox</h1>
<pre>
// Nous récupérons le message du StringBuffer dans notre page html pour l'afficher à l'aide d'un petit scrpit en js
<% String chatContentJsp = (String)request.getAttribute("chatCont"); %>
// si le message n'est pas vide alors on l'affiche
<% if (chatContentJsp != null) out.println(chatContentJsp); %>
</pre>
//Formulaire
<pre>
<form class="chatForm" name="chatForm" action="chat" method="post">
<input type="text" name="ligne" value=""/>
<input class="boutton" type="submit" name="action" value="submit"/>
<button class="boutton" type="submit" onClick="refreshPage()">Refresh</button>
<ul>
<li><a href="logout">logout</a></li>
</ul>
</form>
</pre>
</div>
<img src="univ_rennes1.png" alt="logo de l'université de Rennes 1" />
</body>
</html>
```
Pour pouvoir communiquer entre notre servlet et notre JSP nous utilisons un RequestDispatcher qui nous indique vers quelle fichier nous voulons aller.
nous remplacons alors le formulaire que nous avions initialement inseré ici par:
```java=
RequestDispatcher rd = request.getRequestDispatcher("chat.jsp");
rd.include(request,response);
```
Grâce à ces lignes nous indiquons que nous voulons récuperer le code html de notre JSP.
Il faut ensuite envoyer le message à l'aide de la request dans le doPost:
```java=
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter out = resp.getWriter();
// Si le message n'est pas vide
if (req.getParameter("ligne").length() > 0) {
//on affiche le message que l'uilisateur a entré
chatContent.append(req.getParameter("ligne")).append("\n");
req.setAttribute("chatCont", chatContent.toString());
}
this.doGet(req, resp)/* (1) */;
}
```
Voila comment nous avons utiliser un fichier JSP pour séparer notre code java et HTML.
## Session
Par la suite nous avons mis en place un système de session pour que l'utilisateur se connecte et que les messages envoyeés puissent être identifiés.
Pour y parvenir nous avons utilisé la methode HTTPsession sur une seconde class nommé Login.
#### Code de login
```java=
@WebServlet("/login")
public class Login extends HttpServlet {
private static final long serialVersionUID = 197811968639586823L;
//private HttpSession session;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Si la session n'a pas de nom on va sur la JSP loginChat pour rentrer notre nom
if (request.getSession().getAttribute("nameOfUser") == null) {
RequestDispatcher rd = request.getRequestDispatcher("loginChat.jsp");
rd.include(request,response);
}
// si on a une session avec un nom alors on redirige vers le chat
else {
response.sendRedirect(request.getContextPath() + "/chat.jsp");
}
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter out = resp.getWriter();
// Si l'utilisateur a rentré un nom et a validé alors on crée une sessions avec son nom
if (!req.getParameter("nameLogin").isEmpty()) {
HttpSession session = req.getSession(true);
session.setAttribute("nameOfUser", req.getParameter("nameLogin"));
}
this.doGet(req, resp)/* (1) */;
}
}
```
Si nous n'avons pas de nom on est rediriger vers la page html qui nous permet de rentrer un nom
Grâce à ce système de login nous pouvons alors ouvrir plusieur session sur différents navigateurs
Une fois notre session crée nous avons également réalisé le même travail pour permetre à l'utilisateur de se déconecter grâce à une class logout qui ferme la session active et redirige vers la page de login pour changer d'utilisateur.
### Code Logout:
```java=
@WebServlet("/logout")
public class Logout extends HttpServlet {
private static final long serialVersionUID = 197811968639586823L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// nous redirige vers la page html pour se deconecter
RequestDispatcher rd = request.getRequestDispatcher("logout.jsp");
rd.include(request,response);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// Fermeture de la session et redirection vers la page login
req.getSession().invalidate();
resp.sendRedirect(req.getContextPath() + "/login");
}
}
```
## Partie 4 : Configuration du message de bienvenue
Dans cette partie nous avons décidé d'inserer un message d'accueil via les paramètres de notre application
Pour y parvenir nous avons réutilisé le fichier Web.xml en y ajoutant ces lignes de code:
```xml=
<context-param>
<param-name>welcome</param-name>
<param-value>Bienvenue sur le chat. Soyez polis</param-value>
</context-param>
```
Elles mettent en paramètre le message que nous voulons envoyer.
Ensuite nous ajoutons une méthode init dans notre page Chat.java dans laquelle on vient récuperer nos paramètres
```java=
public void init(ServletConfig config) throws ServletException {
chatContent = new StringBuffer();
// Récupération des paramètres de l'application :
ServletContext context = config.getServletContext();
Enumeration<String> e = context.getInitParameterNames();
while (e.hasMoreElements()) {
String key = e.nextElement();
Object value = context.getInitParameter(key);
if (key.equals("welcome")) {
chatContent.append(value).append("\n");
}
}
}
```
Pour rendre notre Chat plus agréable à regarder nous avons également ajouté un peu de css dans notre code HTML pour cela nous avons un fichier .css pour modifier l'apparence de notre page.
```css=
div{
border-style: dotted;
border-color: red;
}
h1 {
text-align: center;
color: red;
}
img{
height: 100px;
width: auto;
float: right;
}
.boutton {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 2px;
}
input[type=text] {
padding: 12px 20px;
margin: 10px 0;
box-sizing: border-box;
}
```
Voila quelques images de notre application:
Sign in with Wallet
Connect another wallet