Ce TP était prévu pour la version NetBeans 8.0.2 version JavaEE (avec Glassfish 4.1.0). Après la simplification, la partie "buggée" de glassfish n'est plus solicitée. Le TP est également réalisable avec IntelliJ.

Partie 1 du TP : affichage d'un listing à l'aide d'une Servlet, d'une page JSP et de code métier

Créer un projet Web

Vous allez lancer NetBeans puis créer un projet de type "Java Web/Web application", donnez lui pour nom BookRepository1.

Dans IntelliJ : c'est Java Enterprise > Web Application et vous pouvez déjà choisir CDI (il faudra peut-être télécharger GlassFish et pour CDI il faut choisir create et allez dans le dossier de GlassFish : par exemple D:\Program Files\glassfish-4.1\glassfish\modules\ pour choisir : cdi-api.jar)

Ajouter un fichier de configuration `beans.xml` pour CDI (Context and Dependency Injection, une technique d'injection de code que nous allons utiliser)

Faites clic droit / Ajouter sur le projet, dans le menu déroulant, choisissez "autres".
Dans la liste de gauche choisissez "Context and Depedency Injection",
Dans la liste de droite choisissez "beans.xml (CDI confioguration file)".

Ca devrait créer dans Web Pages/WEB-INF un fichier beans.xml contenant ces lignes:

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/beans_1_0.xsd">
</beans>

Nous reviendrons sur l'injection un peu plus tard. Si vous n'insérez pas ce fichier dans le projet, certaines annotations de code que nous allons utiliser ne fonctionneront pas.

Executez/déployez le projet

Faites clic droit sur le projet, puis "Run", ça doit lancer GlassFish et au bout d'un moment, afficher dans votre navigateur par défaut le code HTML correspondant à l'éxécution de la page index.

Ajout de fonctionalités dans le projet

Doucement nous allons écrire un gestionnaire de livres, capables de faire les opérations classiques (Create, Research, Update, Delete) sur les données. Nous allons définir tout d'abord un modèle pour un livre et aussi une interface décrivant les fonctionnalités d'un gestionnaire de livre, et enfin une première implémentation pour un gestionnaire de livres basé sur des Collections Java (en mémoire, donc).

Création d'un modèle pour représenter un livre

Ajoutez une nouvelle classe Java au projet, intitulée Book et située dans le package com.bookstore. En général les modèles ont des noms correspondant aux données (Book, Person, Product, etc...).

Propriétés: les modèles ont des "propriétés", c'est à dire des attributs privés auxquels on associe des méthodes get/set. Une propriété est définie par sa méthode get, pas par le fait qu'il existe un attribut dans la classe.

Une fois la classe créée, remplacez son contenu par celui-ci. Regardez-bien comment on a défini un modèle de livre, on a défini un Id unique, qui va agir comme une "clé primaire".

package com.bookstore;

import java.math.BigDecimal;
import java.util.Date;

public class Book implements Cloneable {

    private String title;
    private String description;
    private BigDecimal price;
    private Date pubDate;
    private String id;

    public Book(String id, String title, String description, BigDecimal price, Date pubDate) {
        this.id = id;
        this.title = title;
        this.description = description;
        this.price = price;
        this.pubDate = pubDate;
    }

    public Book() {
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public BigDecimal getPrice() {
        return price;
    }

    public void setPrice(BigDecimal price) {
        this.price = price;
    }

    public Date getPubDate() {
        return pubDate;
    }

    public void setPubDate(Date pubDate) {
        this.pubDate = pubDate;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public Book cloneMe() {
        try {
            return (Book) super.clone();
        } catch (CloneNotSupportedException e) {
            return null;
        }
    }

    @Override
public String toString() {
        return "Book [title=" + title + ", description=" + description
+ ", price=" + price + ", pubDate=" + pubDate + ", id=" + id
+ "]";
    }
}

Voilà, on a un modèle ! Il est temps de faire un "gestionnaire". Mais avant nous allons d'abord définir l'interface, c'est-à-dire les fonctionnalités que devra implémenter le gestionnaire de livres.

Ajout d'une interface pour un gestionnaire de livre. On parle aussi de "facade" dans le jargons des design patterns...

L'interface d'une "facade" doit proposer les fonctionnalités classiques pour créer, modifier, rechercher et supprimer des livres. Ajoutez donc une interface (une classe Java) intitulée BookRepository dans votre projet, dans le package com.bookstore. Modifiez son code pour qu'il ressemble à ceci :

package com.bookstore;

import java.util.List;

public interface BookRepository {
    Book lookupBookById(String id);

    void addBook(String title, String description, String price, String pubDate);

    void updateBook(String id, String title, String description, String price, String pubDate);

    void removeBook(String id);

    List<Book> listBooks();

}

Création de la librairie nécessaire à l'injection de code, appelée "CDI" (Context and Dependency Injection)

Choisissez dans NetBeans le menu Outils/bibliothèques ou Tools/Library. Cela va ouvrir une boîte de dialogue permettant de rajouter des "librairies" Java, en d'autres termes, des fichiers .jar que l'on pourra facilement ajouter à notre projet.

Dans l'étape suivante nous allons utiliser une annotation de code @ApplicationScoped qui vient d'une API Java nommée "CDI" qui n'est pas par défaut configurée dans NetBeans. En revanche le fichier .jar est dans le serveur GlassFish que nous utilisons.

Pour NetBeans : ajouter la librairie CDI au projet.

Pour IntelliJ : soit vous l'avez fait au début, soit vous faites clic droit sur le projet, "add framework support..." et choisissez "CDI" dans Java EE > icreate et allez dans le dossier de GlassFish : par exemple D:\Program Files\glassfish-4.1\glassfish\modules\ pour choisir : cdi-api.jar

Ajout d'une implémentation "mémoire" de la facade/gestionnaire de livres

Ajoutez au projet une classe Java intitulée BookRepositoryImpl toujours dans le package com.bookstore, remplacez le code par celui-ci :

package com.bookstore;

import javax.enterprise.context.ApplicationScoped;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.math.BigDecimal;


@ApplicationScoped
public class BookRepositoryImpl implements BookRepository {

    private SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
    private int count;
    private Map<String, Book> idToBookMap = new HashMap<String, Book>();

    public BookRepositoryImpl()  {
        synchronized (this) {
            books(book("War and Peace", "blah blah blah", "5.50", "2018-04-01"),
            book("Pride and Prejudice", "blah blah blah", "5.50", "2018-04-01"),
            book("book1", "blah blah blah", "5.50", "2018-04-01"),
            book("book2", "blah blah blah", "5.50", "2018-04-01"),
            book("book3", "blah blah blah", "5.50", "2018-04-01"),
            book("book4", "blah blah blah", "5.50", "2018-04-01"),
            book("book5", "blah blah blah", "5.50", "2018-04-01"),
            book("book6", "blah blah blah", "5.50", "2018-04-01"),
            book("book7", "blah blah blah", "5.50", "2018-04-01"),
            book("book8", "blah blah blah", "5.50", "2018-04-01"),
            book("book9", "blah blah blah", "5.50", "2018-04-01"),
            book("Java for dummies", "blah blah blah", "1.99", "2018-04-01"));
        }
    }

    private Book book(String title, String description, String aPrice,
                      String aPubDate)  {

        Date pubDate = null;
        BigDecimal price = null;

        try {
            price = new BigDecimal(aPrice);
        }catch (Exception ex) {
        }

        try {
            pubDate = dateFormat.parse(aPubDate);
        }catch (Exception ex) {
        }

        return new Book("" + (count++), title, description, price, pubDate);

    }

    private void books(Book... books) {
        for (Book book : books) {
            doAddBook(book);
        }
    }

    private void doAddBook(Book book) {
        synchronized (this) {
            this.idToBookMap.put(book.getId(), book);
        }
    }

    @Override
public Book lookupBookById(String id)  {
        synchronized (this) {
            return this.idToBookMap.get(id).cloneMe();
        }
    }

    @Override
public void addBook(String title, String description, String price,
                        String pubDate)  {
        doAddBook(book(title, description, price, pubDate));
    }

    @Override
public void updateBook(String id, String title, String description,
                           String price, String pubDate) {
        Book book = book(title, description, price, pubDate);
        synchronized (this) {
            book.setId(id);
            this.idToBookMap.put(id, book);
        }
    }

    private List<Book> doListBooks()  {
        List<Book> books;
        synchronized (this) {

            books = new ArrayList<Book>(this.idToBookMap.size());
            for (Book book : this.idToBookMap.values()) {
                books.add(book.cloneMe());
            }
        }
        return books;
    }

    public List<Book> listBooks() {

        List<Book> books = doListBooks();

        Collections.sort(books, new Comparator<Book>() {
            public int compare(Book bookA, Book bookB) {
                return bookA.getId().compareTo(bookB.getId());
            }
        });
        return books;
    }

    @Override
public void removeBook(String id)  {
        synchronized(this) {
            this.idToBookMap.remove(id);
        }
    }

}

Bon qu'avons nous-là ?

On gère la base de données des livre à l'aide d'une collection Java, plus précisément d'une HashMap Java (clé = l'id d'un livre) : private Map<String, Book> idToBookMap = new HashMap<String, Book>();
Des "synchronized" un peu partout dès qu'il s'agit de modifier le contenu de la collection des livres. Les collections Java n'étant pas thread-safe, et les servlets étant multi-threadées (on va appeler le code de ce gestionnaire de livres depuis une servlet), il vaut mieux protéger les accès concurrents à notre "base de données/collection".
Regardez comment on ajoute, recherche, remplis la base... cela vous fera réviser un peu les HashMaps !
On a une annotation de code bizarre au début de cette classe : @ApplicationScoped

L'annotation du point 4 indique que cette classe, lorsqu'on en aura besoin, sera instanciée une seule fois et aura comme durée de vie celle de l'application Web. En gros, quand on utilisera ce gestionnaire, il sera créé comme un Singleton par le serveur et durera aussi longtemps que l'application web. Cette annotation fait partie de Context And Dependency Injection (CDI, une API de Java) et évite d'avoir à faire des "new" pour allouer des objets. Vous en saurez plus pendant le cours sur CDI.

Bon, maintenant que nous avons un modèle de livre et un gestionnaire de livres, il reste à ajouter au projet un contrôleur Web (une Servlet) et une vue (une JSP).

Ajout d'une servlet / controleur web

Faites clic droit/new Servlet dans votre projet (sur src dans IntelliJ) :

Appelez la Servlet BookListServlet,
Mettez-là dans le package com.bookstore.web
Changez le mapping de l'URL pour /book/

On reprend ici le nommage des URLs des Web Services RESTful que nous verrons en M2. Un URL qui se termine par "/" en général se réfère à une liste d'objets. Comme dans cette première partie du TP on veut afficher un listing contenant l'ensemble des livres dans la base de données, cela tombe bien.

Remplacez le code de la servlet par :

package com.bookstore.web;

import java.io.IOException;

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;

import com.bookstore.BookRepository;

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

    @Inject
private BookRepository bookRepo;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setAttribute("books", bookRepo.listBooks());
        getServletContext().getRequestDispatcher("/book-list.jsp").forward(request, response);
    }

}

Une Servlet est une classe qui traite des requêtes HTTP et renvoie une réponse (ici la méthode doGet est appelée en cas de requête HTTP GET et possède comme premier paramètre la requête et comme second la réponse). Dans une architecture MVC "model 2" on va utiliser une page JSP pour le traitement de la réponse.

Regardez ce que fait cette servlet :

Elle a un attribut "injecté", c'est le gestionnaire de livres à qui elle va sous-traiter la partie "métier" du traitement : @Inject private BookRepository bookRepo;
Le @Inject indique "Serveur, débrouille toi mais donne moi un gestionnaire de livres !", le @Inject ne fonctionne que si on a bien un fichier beans.xml dans le répertoire WEB-INF. Si ce n'est pas le cas, alors le gestionnaire ne sera pas injecté et vaudra null.
Dans la méthode doGet on appelle la méthode listBooks du gestionnaire, qui renvoie une collection de livres, et on met ce résultat dans la "requête" : request.setAttribute("books", bookRepo.listBooks());
Pourquoi on met la liste dans la reqête HTTP ? Parcequ'on a pas fini de traiter la requête !!! On va "passer la requête" à un autre élément, la page book-list.jsp, qui elle va se charger de finir le travail, en produisant le HTML de la réponse (un tableau HTML avec les livres). C'est ce que fait la ligne : getServletContext().getRequestDispatcher("book-list.jsp").forward(request, response);

getServletContext() renvoie "le contexte d'exécution", c'est à dire un objet qui sait parler avec le serveur qui exécute l'application. Cet objet possède une méthode getRequestDispatcher(...) qui permet de chainer divers traitements pour une même requête. On passe en paramètre l'URL relatif d'une page JSP intitulée book-list.jsp.

Ajout d'une page JSP "vue" pour l'affichage des livres

Les pages JSPs sont des Servlets en réalité, elles sont traduites en .java et compilées comme des Servlets lors de leur première invocation. Ca c'est pour ce qu'il se passe en coulisse.

Du point du vue du développeur, une page JSP est une page HTML augmentée d'expressions de type ${book.name} pour substituer des variables dans le code HTML, et par des ordres comme des if, then, else, boucles for, etc pour donner un aspect dynamique aux pages. Exemple : <c:forEach var="book" items="${books}">.....</c:foreach> pour parcourir la liste des livres dans une boucle. Le langage des expressions s'appelle EL (Expression language) et le langage permettant des actions dynamiques s'appelle JSTL (Java Standard Tag Library).

Ajoutez donc une page JSP à votre projet (clic droit sur web pour IntelliJ), et intitulez-la book-list.jsp, remplacez son contenu par :

<%@ 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 listing</title>
</head>
<body>


<table>
    <tr>
        <th>Title</th>
        <th>Description</th>
        <th>Price</th>
        <th>Publication Date</th>
    </tr>

    <c:forEach var="book" items="${books}">
        <tr>
            <td>${book.title}</td>
            <td>${book.description}</td>
            <td>${book.price}</td>
            <td>${book.pubDate}</td>
        </tr>
    </c:forEach>
</table>

</body>
</html>

Ce code est assez classique :

La première ligne indique quel est le type de données que va produire cette page (du HTML encodé en UTF-8)
La seconde ligne est obligatoire si on utilise des tags de la librairie JSTL comme <c:foreach...> Si on l'oublie cette boucle ne sera pas exécutée.
Le reste est du HTML à part le foreach et les expressions commençant par ${...}

Regardons juste la boucle foreach:

<c:forEach var="book" items="${books}">
    <tr>
        <td>${book.title}</td>
        <td>${book.description}</td>
        <td>${book.price}</td>
        <td>${book.pubDate}</td>
    </tr>
</c:forEach>

La boucle indique qu'on va chercher un objet intitulé "books", dans la page, dans la requête, dans la session HTTP, etc.... on va chercher dans les divers "scopes" de la page. Ca tombe bien, avant d'appeler cette JSP on était dans une Servlet qui a mis une liste de livres intitulée "books" dans la requête. Petit rappel du code de la Servlet: request.setAttribute("books", bookRepo.listBooks());

Donc la boucle va itérer sur chaque livre. La variable de boucle s'appelle "book" (var="book").

A l'intérieur de la boucle, pour accèder aux propriétés de livre correspondant à la variable de boucle (le livre courant), on utiliser une expression EL : ${book.title} par exemple revient à appeler book.getTitle(), ${book.description} revient à appeler book.getDescription() etc.

Dans l'expression ${book.description}, description est une propriété, pour que cela marche, la classe Book doit avoir une méthode getDescription(), sinon vous aurez une erreur "EL cannot access property named description...."

Execution du projet

Si tout s'est bien passé vous devriez voir s'afficher :

Partie 2 : ajout de fonctionnalités pour faire le CRUD sur les livres

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 :

Le formulaire a servi à la modification d'un livre (page book-form.jsp appelée par la servlet avec un paramètre id)
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);

Troisième partie : de la mise en page (template, CSS etc.)

Dans cette partie nous allons utiliser plusieurs choses pour rendre l'application plus présentable : des "templates JSP" pour définir des en-têtes et pieds de page, une feuille de style CSS pour améliorer le rendu des divers éléments qui composent nos vues.

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

Renommez les pages book-list.jsp et book-form.jsp en book-list-content.jsp et book-form-content.jsp,
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 :

inclure un en-tête,
inclure l'ancienne version de la page jsp, renommée en book-list-content.jsp,
inclure un pied de page,
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"/>

Récupéré depuis "http://miageprojet2.unice.fr/User:PhilippeRenevierGonin/TechnoWeb2018/GestionnaireLivreJEE"

Pages récentes

GestionnaireLivreJEE

De $1

Table des matières

TechnoWeb, TP JEE