Université Mohammed 1er
École Nationale de l’Intelligence
Artificielle et du Digitale - Berkane
TP 08 : Spring MVC et Web
Module : Ateliers de programmation avancés Année Universitaire :
Filière : Génie Informatique 2024/2025
Par : Pr. ALAMI Nabil
TP8 : Spring MVC et Web
Objectifs
• Apprendre à configurer un projet Spring MVC avec Maven.
• Comprendre l’intégration de Thymeleaf avec Spring MVC.
• Développer une application pour gérer des produits : ajout, modification, suppression et
affichage des produits.
• Appliquer les concepts fondamentaux de Spring MVC (contrôleurs, modèles, vues,
validations).
Travail à faire
Étape 1 : Création du projet Maven
1.1 Structure du projet
Créez un projet Maven avec la structure suivante :
src/
├── main/
│ ├── java/
│ │ └── [Link]/
│ │ ├── controller/
│ │ ├── model/
│ │ ├── repository/
│ │ └── [Link]
│ ├── resources/
│ │ ├── [Link]
│ │ └── templates/ (vues Thymeleaf)
│ └── webapp/
│ └── WEB-INF/ (facultatif pour des configurations avancées)
└── test/ (pour les tests unitaires)
Spring Boot utilise une structure standardisée pour organiser les fichiers. Voici le rôle de chaque
dossier :
• src/main/java : Contient le code source Java de l'application (contrôleurs, modèles,
services, etc.).
• src/main/resources : Contient les fichiers de configuration
([Link]) et les templates pour les vues (Thymeleaf).
• src/test/java : Répertoire pour les tests unitaires.
1.2 Contenu du fichier [Link]
Ajoutez les dépendances nécessaires pour Spring MVC, Thymeleaf, JPA et H2.
<project xmlns="[Link]
xmlns:xsi="[Link]
xsi:schemaLocation="[Link]
[Link]
<modelVersion>4.0.0</modelVersion>
<groupId>[Link]</groupId>
<artifactId>productapp</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>jar</packaging>
<properties>
<[Link]>17</[Link]>
<[Link]>3.1.0</[Link]>
</properties>
<dependencies>
<!-- Spring Boot Starter Web -->
<dependency>
<groupId>[Link]</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Thymeleaf -->
<dependency>
<groupId>[Link]</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- JPA and H2 Database -->
<dependency>
<groupId>[Link]</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
<!-- Validation -->
<dependency>
<groupId>[Link]</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
<!-- DevTools (auto-reload for development) -->
<dependency>
<groupId>[Link]</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
</dependencies>
<build>
2
<plugins>
<plugin>
<groupId>[Link]</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
Le fichier [Link] configure le projet Maven et déclare les dépendances nécessaires. Le fichier
[Link] est le cœur de tout projet Maven. Il garantit que toutes les bibliothèques nécessaires sont
automatiquement téléchargées et intégrées.
1. Expliquez le rôle de chaque dépendance de ce projet.
• Dépendances importantes :
o spring-boot-starter-web : Ajoute les fonctionnalités pour développer des applications
web avec Spring MVC.
o spring-boot-starter-thymeleaf : Intègre le moteur de template Thymeleaf.
o spring-boot-starter-data-jpa et h2 : Permettent d'utiliser JPA pour la gestion des
données avec une base H2 en mémoire.
o spring-boot-starter-validation : Ajoute le support pour la validation des données
utilisateur.
o spring-boot-devtools : Fournit des outils pour le développement, comme le
rechargement automatique.
Étape 2 : Configuration du projet
Ajoutez le fichier [Link] dans src/main/resources et ajoutez les lignes suivantes
:
[Link]=true
[Link]=jdbc:h2:mem:productdb
[Link]-auto=update
[Link]=false
2. Expliquer les différentes paramètres ajoutés dans le fichier [Link]
Étape 3 : Développement de l'application
A. Modèle (Entité Product)
Classe Product :
package [Link];
import [Link].*;
import [Link];
import [Link];
@Entity
public class Product {
@Id
@GeneratedValue(strategy = [Link])
3
private Long id;
@NotEmpty(message = "Le nom du produit est obligatoire.")
private String name;
@Positive(message = "Le prix doit être supérieur à 0.")
private double price;
private String description;
// Getters et setters
}
Explication :
• @Entity : Indique que cette classe représente une table dans la base de données.
• @Id et @GeneratedValue : Définit id comme clé primaire et permet à JPA de générer
automatiquement une valeur.
3. Expliquer le rôle des annotations @NotEmpty et @Positive et citez d’autres annotations utiles.
La classe Product est une représentation directe d'un produit, avec des champs qui seront
stockés en base de données. Les annotations de validation garantissent que les données sont
correctes avant leur enregistrement.
B. Repository
Interface ProductRepository :
package [Link];
import [Link];
import [Link];
public interface ProductRepository extends JpaRepository<Product, Long> {}
4. Expliquer le rôle de l’interface JpaRepository et les possibilité qu’elle offre
5. Pourquoi nous utilisons extends et non implements puisque JpaRepository est une interface :
C. Contrôleur
Classe ProductController :
La classe ProductController est responsable de la gestion des interactions entre l'utilisateur (via
les vues) et le backend (données et logique métier). Elle est annotée avec @Controller, ce qui
signifie qu'elle traite les requêtes HTTP et renvoie des réponses, souvent sous forme de vues
HTML.
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
4
import [Link];
import [Link];
import [Link].*;
@Controller
@RequestMapping("/products")
public class ProductController {
@Autowired
private ProductRepository productRepository;
@GetMapping
public String listProducts(Model model) {
[Link]("products", [Link]());
return "product-list";
}
@GetMapping("/add")
public String showAddForm(Model model) {
[Link]("product", new Product());
return "product-form";
}
@PostMapping("/add")
public String addProduct(@Valid @ModelAttribute("product") Product
product, BindingResult result) {
if ([Link]()) {
return "product-form";
}
[Link](product);
return "redirect:/products";
}
@GetMapping("/edit/{id}")
public String showEditForm(@PathVariable Long id, Model model) {
Product product = [Link](id)
.orElseThrow(() -> new IllegalArgumentException("Invalid
product ID: " + id));
[Link]("product", product);
return "product-form";
}
@PostMapping("/edit/{id}")
public String updateProduct(@PathVariable Long id, @Valid
@ModelAttribute("product") Product product, BindingResult result) {
if ([Link]()) {
return "product-form";
}
[Link](id);
[Link](product);
return "redirect:/products";
}
@GetMapping("/delete/{id}")
public String deleteProduct(@PathVariable Long id) {
[Link](id);
return "redirect:/products";
}
5
}
• Gestion des actions :
o Lister les produits : [Link]() récupère tous les produits.
o Ajouter un produit : @PostMapping sauvegarde le produit si les validations sont
correctes.
o Modifier un produit : Charge un produit existant avec findById() et permet de le
modifier.
o Supprimer un produit : Supprime un produit par son ID avec deleteById().
6. Expliquez le rôle de chaque annotation utilisée dans le contrôleur (@Controller,
@GetMapping, @PostMapping, @ModelAttribute, etc.).
7. Pourquoi utilise-t-on BindingResult dans les méthodes de gestion des formulaires ?
D. Vues (Thymeleaf)
Liste des produits ([Link])
<table>
<tr th:each="product : ${products}">
<td th:text="${[Link]}"></td>
<td>
<a
th:href="@{/products/edit/{id}(id=${[Link]})}">Modifier</a>
<a
th:href="@{/products/delete/{id}(id=${[Link]})}">Supprimer</a>
</td>
</tr>
</table>
Explication :
o th:each : Boucle pour parcourir la liste des produits.
o th:text : Affiche les valeurs dynamiques.
o th:href : Génère des liens dynamiques avec des paramètres.
Formulaire produit ([Link])
<form th:action="@{/products/add}" th:object="${product}" method="post">
<input type="text" th:field="*{name}" />
<input type="number" th:field="*{price}" />
</form>
Explication :
o th:object : Lie l'objet au formulaire.
o th:field : Mappe les champs de l'entité.
6
Liste des produits ([Link]) :
1. <!DOCTYPE html>
2. <html xmlns:th="[Link]
3. <head>
4. <title>Liste des produits</title>
5. </head>
6. <body>
7. <h1>Produits</h1>
8. <a href="/products/add">Ajouter un produit</a>
9. <table>
10. <thead>
11. <tr>
12. <th>ID</th>
13. <th>Nom</th>
14. <th>Prix</th>
15. <th>Description</th>
16. <th>Actions</th>
17. </tr>
18. </thead>
19. <tbody>
20. <tr th:each="product : ${products}">
21. <td th:text="${[Link]}"></td>
22. <td th:text="${[Link]}"></td>
23. <td th:text="${[Link]}"></td>
24. <td th:text="${[Link]}"></td>
25. <td>
26. <a
th:href="@{/products/edit/{id}(id=${[Link]})}">Modifier</a>
27. <a
th:href="@{/products/delete/{id}(id=${[Link]})}">Supprimer</a>
28. </td>
29. </tr>
30. </tbody>
31. </table>
32. </body>
33. </html>
Formulaire produit ([Link]) :
1. <!DOCTYPE html>
2. <html xmlns:th="[Link]
3. <head>
4. <title>Formulaire produit</title>
5. </head>
6. <body>
7. <h1 th:if="${[Link] == null}">Ajouter un produit</h1>
8. <h1 th:if="${[Link] != null}">Modifier un produit</h1>
9. <form th:action="@{/products/add}" th:object="${product}"
method="post">
10. <input type="hidden" th:field="*{id}" />
11. <label for="name">Nom :</label>
12. <input type="text" id="name" th:field="*{name}" /><br/>
13. <label for="price">Prix :</label>
14. <input type="number" id="price" th:field="*{price}" /><br/>
15. <label for="description">Description :</label>
7
16. <textarea id="description"
th:field="*{description}"></textarea><br/>
17. <button type="submit">Enregistrer</button>
18. </form>
19. </body>
20. </html>
Questions supplémentaires :
8. Comment fonctionne l’injection de dépendances avec @Autowired ?
9. Quelle est l’utilité de la validation dans les entités, et comment est-elle configurée ?
10. Maintenant, dans la classe du contrôleur, au lieu de passer directement par le repository, nous
allons utiliser une couches service intermédiaire. Pour ce faire, suivez les étapes ci-dessous :
a. Créer un package appelé services. Ce package contiendra l’ensemble des classes
fournissant les traitements métier de l’application.
b. Créer une interface appelée IProductService. Cette interface contiendra l’ensemble
des méthodes que nous aurons besoin dans la couche Web.
c. Créer une classe appelée ProductService qui implémente l’interface
IProductService. C’est au niveau de cette classe que nous allons interroger la base
de données avec le repository ProductRepository
d. Maintenant, au niveau du contrôleur, utiliser l’interface IProductService au lieur de
passer par ProductRepository directement.
Questions pour approfondir les connaissances :
11. Quelles validations doivent être ajoutées pour améliorer la robustesse ?
12. Comment personnaliser l’apparence des messages d’erreur ?
13. Quelle stratégie adopter pour gérer les cas où un produit n’est pas trouvé ?
