GestionnaireLivreJEE

Réflechissons un peu aux URLs relatifs que l'on va utiliser pour les différentes opérations...

• On a déjà /book/ qui liste les livres, cet URL étant mappé sur la servlet BookListServlet
   
• On va définir /book?id=1 pour éditer le livre d'id=1 et pour ajouter un livre on va utiliser juste /book sans le / à la fin...
  
  
  • On va donc créer une nouvelle Servlet BookEditorServlet qui sera mappée sur l'URL /book (sans le / à la fin) et dont le rôle sera d'appeler une JSP avec un formulaire
     
  • Si la servlet est appelée avec /book?id=1 alors on va utiliser le gestionnaire de livres pour récupérer les données du livre d'id = 1, on va le mettre dans la requête et passer la main à une JSP (book-form.jsp) qui s'occupera d'afficher le formulaire de modification pré-rempli avec le livre,
     
  • Si la servlet est appelée par /book sans paramètre id, alors on appellera la même JSP mais le formulaire ne sera pas rempli.

Bien, mais qui va traiter la soumission du formulaire ? Tant qu'à faire ce sera la même Servlet ! En général on traite les soumissions de formulaire par une requête HTTP POST, on fera ce traitement dans la méthode doPost() de la Servlet, soit pour mettre à jour un livre existant, soit pour insérer un nouveau livre.

Ok, commençons par voir ce que l'on va modifier...

Ajout d'un lien au début de la page JSP d'affichage, pour ajouter un livre

On va simplement ajouter une ligne au début de la page book-list.jsp :

<a href="${pageContext.request.contextPath}/book">Add Book</a>

Ce que fait la ligne avec le <a href...> c'est de rajouter un lien qui appelle la Servlet mappée sur /book, sans paramètres, ce qui correspond dans notre liste d'URLs au dernier cas, celui où on veut ajouter un nouveau livre. La partie ${pageContext.request.contextPath} correspond à http://localhost:8080/BookRepository1

Ajout d'un lien sur le titre des livres dans le tableau des livres

Ce lien appellera la nouvelle Servlet dont on vient de parler, pour pouvoir mettre à jour un livre existant.

On va modifier la page book-list.jsp et remplacer le début de la boucle for par  :

<c:forEach var="book" items="${books}">
    <tr>
        <td><a href="${pageContext.request.contextPath}/book?id=${book.id}">${book.title}</a></td>

La ligne ${pageContext.request.contextPath}/book?id=${book.id} permet de générer un URL correspondant à la Servlet d'édition. La partie ${pageContext.request.contextPath} correspond à http://localhost:8080/BookRepository1

Si vous exécutez le projet, vous devez voir (les liens font des erreurs 404) :

Ajout d'une servlet pour l'édition / insertion de livres

On va maintenant ajouter au projet la Servlet BookEditorServlet qui va traiter ce type d'URLs, réglez le nom de la Servlet, le mapping, mettez la dans le même package que la servlet existante. Le code de la Servlet doit ressembler à ceci :

package com.bookstore.web;

import com.bookstore.Book;
import com.bookstore.BookRepository;

import java.io.IOException;
import java.text.SimpleDateFormat;
import javax.inject.Inject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/book")
public class BookEditorServlet extends HttpServlet {

    @Inject
    private BookRepository bookRepo;
    private SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");

    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response) throws ServletException, IOException {

        // On récupère le paramètre id
String id = request.getParameter("id");

        if (id != null && !id.isEmpty()) {
            // Allons chercher le livre correspondant à l'id
Book book = bookRepo.lookupBookById(id);
            // On met le livre dans la reqête
request.setAttribute("book", book);
            // Et la date de publication aussi
request.setAttribute("bookPubDate", dateFormat.format(book.getPubDate()));
        }

        /* On appelle la JSP pour affichage du formulaire */
getServletContext().getRequestDispatcher("/book-form.jsp").forward(
                request, response);
    }
}

Cette Servlet regarde si elle a été appelée avec un paramètre id, si c'est le cas c'est qu'on souhaite modifier un livre existant (on a appelé la servlet en cliquant sur le titre d'un livre dans la liste), elle va récupérer le livre dans la base de données en utilisant le gestionnaire de livres : Book book = bookRepo.lookupBookById(id); puis elle met le livre récupéré dans la requête avant de passer la main pour la suite du traitement à la page book-form.jsp qui va générer le formulaire pré-rempli.

Ajout de la page JSP d'affichage du formulaire de modification

Ajoutez au projet maintenant la page book-form.jsp, voici à quoi doit ressembler le code :

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
    <title>Book Form</title>
</head>

<body>
<form method="post" action="${pageContext.request.contextPath}/book">
    <fieldset>
        <legend>
            <c:choose>
                <c:when test="${not empty book.id }">
                    Updating Book
                </c:when>
                <c:otherwise>
                    Adding Book
                </c:otherwise>
            </c:choose>
        </legend>

        <div>
            <label for="title">Title</label>
            <input type="text" name="title"
id="title" value="${book.title}" required/>
        </div>

        <div>
            <label for="description">Description</label>
            <textarea name="description" id="description" rows="2" cols="60">
                ${book.description}
</textarea>
        </div>

        <div>
            <label for="price">Price EUR</label>
            <input name="price" id="price" type="number"
value="${book.price}" required/>
        </div>

        <div>
            <label for="pubDate">Publication Date</label>
            <input type=date name="pubDate" id="pubDate"
value="${bookPubDate}" required/>
            <label class="after">(YYYY-MM-DD)</label>
        </div>

        <c:if test="${not empty book.id}">
            <input type="hidden" name="id" value="${book.id}" />
        </c:if>

    </fieldset>

    <div class="button-row">
        <a href="${pageContext.request.contextPath}/book/">Cancel</a> or  <input type="submit" value="Submit" />
    </div>
</form>
</body>
</html> 

Prenez le temps d'examiner le code de cette page. Elle contient un formulaire HTML qui lorsqu'il est soumis, invoque par un HTTP POST l'URL /book, soit celui de la servlet que nous venons d'écrire. 

Par ailleurs, on trouve des tests pour afficher "Update Book" ou "Insert Book" selon que book.id vaut null ou pas. En d'autres termes:

Si il existe dans la requête une variable book et si son id est non null, alors on est en mode "Update", voir le bout de code :

<c:choose>
    <c:when test="${not empty book.id }">
        Updating Book
    </c:when>
    <c:otherwise>
        Adding Book
    </c:otherwise>
</c:choose>

Remarquons également la manière dont le formulaire sera sera soumis. Vers la fin on voit :

<c:if test="${not empty book.id}">
    <input type="hidden" name="id" value="${book.id}" />
</c:if>

Il s'agit ici d'une astuce très courante pour ajouter artificiellement un paramètre au formulaire, ici un champ de nom id et de valeur l'id du livre que l'on vient de modifier... A quoi cela sert-il ? Et bien lors de la soumission d'un site modifié on va appeler la Servlet /book avec un POST, on va passer les nouvelles valeurs de titre, description, etc.... mais comme on a pas proposé l'id à la modification, il faut quand même le passer à la servlet pour qu'elle déclenche la mise à jour. On passe ainsi par un élement HTML <input> de type hidden, c'est à dire "non visible".

Exécutez le projet et testez

Exécutez le projet, si tout se passe bien, vous devriez pouvoir cliquer sur un titre de livre et cela devrait appeler la servlet mappée sur /book avec comme paramètre l'id du livre à modifier. La Servlet doit déclencher la recherche du livre dans la base de données, le livre doit être mis dans la requête et la page book-form.jsp doit être appelée. On doit voir, si on suit le lien sur le titre d'un liv :

Si vous soumettez le formulaire vous devriez avoir une erreur car comme le formulaire est soumis par un HTTP POST, la servlet /book doit avoir une méthode doPost(...), or elle n'en a pas encore. Nous allons y remédier !

Ajout d'une méthode doPost() à la servlet BookEditorServlet

Cette méthode sera appelée chaque fois que le formulaire de la page book-form.jsp sera soumis (et il s'agit d'une soumission par POST, donc il faut une méthode doPost).

Rappelons qu'on peut appeler cette méthode dans deux cas : 

1. Le formulaire a servi à la modification d'un livre (page book-form.jsp appelée par la servlet avec un paramètre id)
2. Le formulaire a servi à l'ajout d'un livre (clic sur le lien "Add Book", pas de passage de paramètre id)

Nous avons vu que la page book-form.jsp teste dans quel cas elle se trouve, et si elle se trouve dans le premier cas, elle passe à son tour à la servlet qui va traiter la soumission, le paramètre id :

<c:if test="${not empty book.id}">
    <input type="hidden" name="id" value="${book.id}" />
</c:if>

Voici donc la méthode doPost() à ajouter à la servlet BookEditorServlet.java, mappée sur /book :

protected void doPost(HttpServletRequest request,
                      HttpServletResponse response) throws ServletException, IOException {

    // On récupère le contenu du formulaire
String title = request.getParameter("title");
    String description = request.getParameter("description");
    String price = request.getParameter("price");
    String pubDate = request.getParameter("pubDate");

    // le champ "hidden" du formulaire qui contient l'id
String id = request.getParameter("id");

    // Si l'id est null alors on est dans le cas d'un ajout de livre
if (id == null || id.isEmpty()) {
        bookRepo.addBook(title, description, price, pubDate);
    } else {
        // Si l'id n'est pas nul on fait un update
bookRepo.updateBook(id, title, description, price, pubDate);
    }

    // Enfin, on redirige vers la servlet qui affiche la liste des livres
response.sendRedirect(request.getContextPath() + "/book/");
}

Regardez les commentaires que nous avons mis dans cette méthode, vous comprendrez comment on peut lui faire exécuter deux actions distinctes selon que le paramètre HTTP "id" est présent ou non.

• Si le paramètre est présent, on met à jour le livre : bookRepo.updateBook(id, title, description, price, pubDate);
• Si le paramètre est absent, on ajoute un livre : bookRepo.addBook(title, description, price, pubDate);

Ajout d'un template de page

Pour définir un "template", nous allons juste créer une page template.jsp qui va inclure systématiquement un en-tête et un pied de page (ce seront eux-même des pages jsp, qui auront accès aux mêmes paramètres, requête, session etc que la page principale).

Ajouter une page template.jsp à votre projet et copiez-collez le code suivant :

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
    <title>${param.title}</title>
    <link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/resources/style.css" />
</head>
<body>
<jsp:include page="header.jsp"/>


<h1>${param.title}</h1>

<jsp:include page="${param.content}.jsp"/>

<jsp:include page="footer.jsp"/>


</body>
</html>

Modification des pages book-form.jsp et book-list.jsp

1. Renommez les pages book-list.jsp et book-form.jsp en book-list-content.jsp et book-form-content.jsp,
2. Créez deux pages book-list.jsp et book-form.jsp qui vont appeler le template (voir code ci-dessous) 

Nouvelle page book-list.jsp :

<jsp:include page="template.jsp">
    <jsp:param name="content" value="book-list-content"/>
    <jsp:param name="title" value="Book Listing"/>
</jsp:include>

Cette page inclut le template avec le tag <jsp:include> et lui passe des paramètres (les deux lignes avant le </jsp:include>) :

• Le paramètre "content" vaut le nom de la page jsp qui contient réellement le code qui affiche la liste des livres, regardez comment ce paramètre est récupéré dans template.jsp : dans template.jsp on a la ligne : <jsp:include page="${param.content}.jsp"/> qui va en réalité inclure la page book-list-content.jsp
• Le paramètre "title" est également passé au template, qui va s'en servir pour initialiser le titre de la page : <title>${param.title}</title>

En fait la page jsp qui a le nom "normal" book-list.jsp appelle un template qui va :

1. inclure un en-tête,
2. inclure l'ancienne version de la page jsp, renommée en book-list-content.jsp,
3. inclure un pied de page,
4. etc.

On fait de même avec la page book-form.jsp :

<jsp:include page="template.jsp">
    <jsp:param name="content" value="book-form-content"/>
    <jsp:param name="title" value="Book Form"/>
</jsp:include>

 Les pages header.jsp et footer.jsp

Notre template inclut ces deux pages. Michel vous propose le code suivant :

header.jsp :

Vous devrez copier l'image suivante dans le répertoire resources sous Web Pages. Passez par l'onglet "Files" ou "Fichier" de votre projet.

logo.jpg :

footer.jsp :

<div id="footer">
    <ul class="bottom">
        <li><a href="http://miage.unice.fr/">Miage HOME</a> |
        <li><a href="http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/">Michel Buffa's intranet</a> |
        <li><a href="http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/">Web page of this TP</a>
    </ul>

    <div class="about">Copyright (c) 2020-2020 IUP Miage Nice.</div>

    <div class="about">
        This project is the first step towards becoming a real Web Developer !
    </div>
</div>

Comme vous pouvez le constater, on a utilisé des attributs class="about" pour styler la présentation de ces blocs. La page template.jsp inclut aussi le fichier style.css, il nous reste à le rajouter au projet !

Ajout d'une feuille CSS

Ajoutez à votre projet une feuille de style nommée style.css dans Web Pages/resources (un seul "s" !) : <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/style.css" />

Pour ce faire faites clic droit/New/Web/cascading style sheet. Appelez le fichier style.css et dans le champ "répertoire" mettez "resources". Normalement vous devriez voir dans la hiérarchie de votre projet un fichier resources/style.css dans Web Pages.

Contenu de style.css :

table.listing {
    font-family: Arial, Helvetica, sans-serif;
    width:80%;
    border-collapse:collapse;
}


.listing td, th {
    font-size:1em;
    border:1px solid #98bf21;
    padding:3px 7px 2px 7px;
}

.listing th {
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#ffffff;
}

.listing tr:nth-child(even) td {
    color:#000000;
    background-color:#EAF2D3;
}

/* unvisited link */
a:link {
    text-decoration:none;
    color:#000000;
}

/* visited link */
a:visited {
    text-decoration:none;
    color: #707070 ;
}

a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */

/* The CSS for the form was taken from this project.
https://github.com/pmcelhaney/semantic-form.css/blob/master/index.html
*/

form.semantic {
    width:70%;
}

form.semantic fieldset {
    clear: both;
    margin: 1em 0 0 0;
    padding: 10px;
    overflow: auto;
    background-color: #f8f8f8;
    border: 1px solid #888;
}

form.semantic legend {
    font-weight: bold;
}

form.semantic div {
    clear: both;
    margin: 0;
    padding: 0.5em 0 0 0;
    overflow: visible;
}


form.semantic label {
    display: block;
    float: left;
    width: 120px;
    text-align: right;
    padding: 2px 1ex 6px 0;
    vertical-align: baseline;
}

form.semantic label.after {
    width: auto;
    text-align: left;
    display: inline;
    float: none;
}

form.semantic label.long {
    clear: both;
    width: auto;
    text-align: left;
    float: none;
}

form.semantic input
, form.semantic select
, form.semantic textarea {
    float: left;
}

form.semantic input.date {
    width : 100px;
}


form.semantic input.money {
    width : 100px;
}

form.semantic input[type=radio]
, form.semantic input[type=checkbox] {
    vertical-align: text-bottom;
}

form.semantic ul {
    list-style-type: none;
    float: left;
    padding: 0;
    margin: 0;
}

form.semantic li {
    clear: both;
    padding: 0.2em 0;
}

form.semantic li label {
    width: auto;
    text-align: left;
    padding: 0;
}

form.semantic div.field-row  {
    clear: none;
    float: left;
    margin: 0;
    padding: 0;
    overflow: visible;
}

form.semantic div.field-row * {
    float: none;
    display: inline;
}

form.semantic .button-row {
    text-align: right;
}

form.semantic .button-row input {
    float: none;
}

form.semantic div.long label  {
    width: auto;
    text-align: left;
    float: none;
}

form.semantic div.long textarea  {
    width: 100%;
}

/* Errors -- for use with JQuery Validate, etc. */

form.semantic input.error
, form.semantic select.error
, form.semantic textarea.error {
    background-color: #77002a;
    color: white;
}

form.semantic label.error {
    width: auto;
    color: #77002a;
    text-align: left;
}

/* from caucho.com */
#footer hr {
    width: 100%;
}
#footer {
    font-size: 80%;
    text-align: right;
}

/* bottom nav */

.bottom {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size : 90%;
    color : #999;
}

ul.bottom {
    list-style-type : none;
    padding : 0em;
    margin : 0;
    margin-top : 3em;
    text-align : center;
}

.bottom li {
    display : inline;
    margin : 0.1em 0.1em;
    padding : 0.0em;
}

.bottom a {
    color : #999;
}

.bottom a:hover {
    color : #ffcc33;
}

/* bottom */

.about {
    color : #999;
    font-family : Helvetica, Arial, sans-serif;
    text-align : center;
    font-size : 90%;
}

div.about {
    margin-top : 1em;
}

Exécutez le projet, vous devriez obtenir :

Amélioration de l'affichage du tableau, du prix et de la date

Pour cela on va faire appel à la librairie JSTL. Remplacez donc le code de book-list-content.jsp par le suivant :

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix ="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix ="fmt" %>

<a href="${pageContext.request.contextPath}/book">Add Book</a>

<table class="listing">
    <tr>
        <th>Title</th>
        <th>Description</th>
        <th>Price</th>
        <th>Publication Date</th>
    </tr>

    <fmt:setLocale value = "fr_FR"/>
    <c:forEach var="book" items="${books}">
        <tr>
            <td><a href="${pageContext.request.contextPath}/book?id=${book.id}">${book.title}</a></td>
            <td>${book.description}</td>
            <td>
                <fmt:formatNumber value="${book.price}" type="currency" currencySymbol="EUR"  />
            </td>
            <td>
                <fmt:formatDate value="${book.pubDate}" type="both" dateStyle ="short" timeStyle ="short"/>
            </td>
        </tr>
    </c:forEach>
</table>

Quelques lignes ont changé... La première concerne l'affichage de la table elle-même : <table class="listing">. la table a comme classe CSS "listing".

Pour changer le style d'une ligne sur deux, dans le CSS il y a une règle :

.listing tr:nth-child(even) td {
    color:#000000;
    background-color:#EAF2D3;
}

Les autres lignes qui ont changé sont celles concernant l'affichage du prix :

<fmt:setLocale value = "fr_FR"/>

pour indiquer un affichage à la "française". 

<fmt:formatNumber value="${book.price}" type="currency" currencySymbol="EUR"  />

pour dire que le prix est en euros. 

Et l'affichage de la date (liée aussi à la "localité") :

<fmt:formatDate value="${book.pubDate}" type="both" dateStyle ="short" timeStyle ="short"/>