Vous êtes sur la page 1sur 8

Affichage des produits dans une page XHTML : Gestion de Produit

Objectif :

L’objectif est de compléter la coucher métier et lister les produits de la base de données dans
une page XHTML.

Partie I : Modification de la couche métier

1. Modifier l’interface ProduitRepository en ajoutant les méthodes métiers comme suit :

package org.gestionstock.dao;

import java.util.List;

import org.gestionstock.entities.Produit;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;

public interface ProduitRepository extends JpaRepository<Produit, Long>{


public List<Produit> findByNom(String nom);
public Page<Produit> findByNom(String nom, Pageable pageable);

@Query("select e from Produit e where e.nom like :x")


public Page<Produit> chercherProduits(@Param("x") String nom,
Pageable pageable);

@Query("select e from Produit e where e.prix>:x and e.prix<:y")


public List<Produit> chercherProduits(@Param("x")double d1,
@Param("y")double d2);
}

2. Tester la couche métier en appelant les méthodes métiers :

package org.gestionstock;

import java.util.List;

import org.gestionstock.dao.ProduitRepository;
import org.gestionstock.entities.Produit;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.ApplicationContext;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;

@SpringBootApplication
public class GestionStockApplication {

public static void main(String[] args) {


ApplicationContext ctx =
SpringApplication.run(GestionStockApplication.class, args);
ProduitRepository produitRepository =
ctx.getBean(ProduitRepository.class);
produitRepository.save(new Produit("Table", 150, "photo"));
produitRepository.save(new Produit("Chaise",40, "photo"));
produitRepository.save(new Produit("PC", 10900, "photo"));
produitRepository.save(new Produit("Ramette", 40, "photo"));

Page<Produit> prod1 =
produitRepository.findAll(new PageRequest(0, 5));
prod1.forEach(p->System.out.println("Nom du produit est : " +
p.getNom()));
System.out.println();
Page<Produit> prod2 = produitRepository.chercherProduits("T%",
new PageRequest(0, 5));
prod2.forEach(p->System.out.println("Nom du produit est : " +
p.getNom()));

List<Produit> list = produitRepository.findByNom("Chaise");


list.forEach(p->System.out.println(" ====> " + p.getNom()));
}
}

3. Créez un contrôleur ProduitController dans un package org.gestionstock.web avec


une méthode Index qui permettra d’invoquer une page XHTML (produits.html) comme
suit :

package org.gestionstock.web;

import org.gestionstock.dao.ProduitRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping(value="/Produit")
public class ProduitController {

@Autowired
private ProduitRepository produitRepository;

@RequestMapping(value="/Index")
public String Index() {
return "produits";
}
}

4. Créez une page XHTML nommée produits.html dans le répertoire


src/main/ressources/templates en spécifiant thymeleaf comme moteur de template.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Liste des produits</title>
</head>
<body>
<h1>Liste des produits</h1>
</body>
</html>

5. Testez l’application en utilisant un navigateur et en introduisant l’URL :


http ://localhost :8080/Produit/Index

6. Modifiez le contrôleur pour sélectionner la liste des produits à travers l’interface métier
ProduitRepository et utiliser un objet Model de Spring pour enregistrer la liste des
produits dans le scope pour qu’elle soit récupérer dans la vue produits.html.

package org.gestionstock.web;

import java.util.List;

import org.gestionstock.dao.ProduitRepository;
import org.gestionstock.entities.Produit;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping(value="/Produit")
public class ProduitController {

@Autowired
private ProduitRepository produitRepository;

@RequestMapping(value="/Index")
public String Index(Model model) {
List<Produit> prods = produitRepository.findAll();
model.addAttribute("produits", prods);
return "produits";
}
}
7. Modifier la page XHTML en récupérant la liste des produits et l’afficher dans un tableau
XHTML.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Liste des produits</title>
</head>
<body>
<h1>Liste des produits</h1>
<table border="1" width="50%">
<thead>
<tr>
<th>ID</th><th>Nom</th><th>Prix</th>
</tr>
</thead>
<tbody>
<tr th:each="p:${produits}">
<td th:text="${p.id}"></td>
<td th:text="${p.nom}"></td>
<td th:text="${p.prix}"></td>
</tr>
</tbody>
</table>
</body>
</html>

8. Tester l’application en appelant toujours l’URL http ://localhost :8080/Produit/Index

9. Ajouter le fichier style bootstrap.min.css dans le répertoire


src/main/ressources/static/css et modifier la vue produits.html pour styliser
l’affichage de la vue produits.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Liste des produits</title>
<link rel="stylesheet" type="text/css"
href="../static/css/bootstrap.min.css"
th:href="@{/css/bootstrap.min.css}" />
</head>
<body>
<div class="container">
<h1>Liste des produits</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nom</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr th:each="p:${produits}">
<td th:text="${p.id}"></td>
<td th:text="${p.nom}"></td>
<td th:text="${p.prix}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

10. Tester l’application en appelant toujours l’URL http ://localhost :8080/Produit/Index

Partie II : Pagination de l’affichage des produits

L’objectif de cette partie est de créer la pagination pour afficher la liste des produits sur
plusieurs pages.

1. Modifiez la méthode Index() du contrôleur ProduitController afin de récupérer la liste


des produits d’une façon paginée. Dans cet exemple en affichera la liste des produits
deux par page.
@RequestMapping(value="/Index")
public String Index(Model model,
@RequestParam(name="page", defaultValue="0") int p) {
Page<Produit> pageProduits = produitRepository.findAll(
new PageRequest(p, 2));
int pagesCount = pageProduits.getTotalPages();
int [] pages = new int[pagesCount];
for(int i=0;i<pagesCount;i++) { pages[i] = i; }
model.addAttribute("pages", pages);
model.addAttribute("pageCourante", p);
model.addAttribute("pageProduits", pageProduits);
return "produits";
}
2. Modifier la page produits.html afin de prendre en compte la pagination envoyée par le
contrôleur.

<div class="container">
<h1>Liste des produits</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nom</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr th:each="p:${pageProduits.content}">
<td th:text="${p.id}"></td>
<td th:text="${p.nom}"></td>
<td th:text="${p.prix}"></td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<ul class="nav nav-pills">
<li th:each="p:${pages}" th:class="${p==pageCourante}?active:''">
<a th:text="${p}+1" th:href="@{Index(page=${p})}"></a>
</li>
</ul>
</div>

3. Redémarrez l’application et vérifiez la pagination de la page produits.html.


Partie III : Formulaire de recherche

Nous développons dans cette partie un formulaire de recherche des produits et afficher toujours
les résultats dans un tableau XHTML paginée.

1. Ajoutez dans la page produits.html un formulaire pour rechercher des produits par mot
clés comme suit :

...
<body>
<div class="container">
<form th:action="@{Index}" method="get">
<div class="form-group">
<label>Mot clé:</label>
<input type="text" name="motCle" th:value="${motCle}"/>
<button type="submit">Chercher</button>
</div>
</form>
</div>
<div class="container">
<h1>Liste des produits</h1>
<table class="table table-striped">
...
Les données envoyées par le formulaire seront traitées toujours par la méthode Index()
du contrôleur ProduitController.
2. Modifier la méthode index pour prendre traiter la recherche.

@RequestMapping(value="/Index")
public String Index(Model model,
@RequestParam(name="page", defaultValue="0") int p,
@RequestParam(name="motCle", defaultValue="") String mc) {
Page<Produit> pageProduits =produitRepository
.chercherProduits(mc, new PageRequest(p, 2));
int pagesCount = pageProduits.getTotalPages();
int [] pages = new int[pagesCount];
for(int i=0;i<pagesCount;i++) { pages[i] = i; }
model.addAttribute("pages", pages);
model.addAttribute("pageCourante", p);
model.addAttribute("motCle", mc);
model.addAttribute("pageProduits", pageProduits);
return "produits";
}

3. Modifiez la page produits.html au niveau des liens de pagination pour que l’affichage
des résultats soit aussi paginé.

<div class="container">
<ul class="nav nav-pills">
<li th:each="p:${pages}" th:class="${p==pageCourante}?active:''">
<a th:text="${p}+1" th:href="@{Index(page=${p}, motCle=${motCle})}"></a>
</li>
</ul>
</div>

4. Redémarrez l’application et vérifiez la pagination des résultats de recherche de la page


produits.html.