Université Mohammed V de Rabat
Ecole Nationale Supérieure d'Arts et Métiers
Filière INDIA (3eme année) A.U. : 2024/2025 Pr. A. El Qadi
TP n°4 en Systèmes distribués
Application CRUD Spring Boot avec Thymeleaf
Thymeleaf est un moteur de template Java côté serveur pour les environnements web, capable de
traiter HTML, XML, JavaScript, CSS et même du texte brut.
Il est plus puissant que JSP et responsable du rendu dynamique du contenu sur l’interface utilisateur.
Le moteur permet un travail parallèle des développeurs backend et frontend sur une même vue.
Il est principalement utilisé avec Spring MVC dans la creation des applications web
Thymeleaf peut être utilisé pour remplacer JSP sur la couche View (View Layer) de l'application Web
MVC. Thymeleaf est un logiciel à code source ouvert (open source) sous licence Apache 2.0.
Intégration de Thymeleaf
Pour une application utilisant Spring Boot, la configuration est très simple. Il vous suffit d’ajouter une
dépendance dans le projet au module spring-boot-starter-thymeleaf.
<dependency>
<groupId>[Link]</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Par défaut, les templates Thymeleaf doivent être placés dans le répertoire src/main/resources/templates
du projet. Les fichiers statiques (non transformés par Thymeleaf) doivent être placés dans le répertoire
src/main/resources/static du projet.
Exercice : Effectuer des opérations crud sur les deux objets Employe et Departement du projet
microservice de tp3.
1. Projet departement-serviceJPA
1.1 Créer un autre projet nommé « departement-serviceJPA » avec les dependances suivantes :
Spring Web
Eureka Discovery Client
Spring Data JPA
H2 Database
Spring Boot Actuator
Spring Boot DevTools
Thymeleaf
Spring Web (Créez des applications Web, y compris RESTful, à l’aide de Spring MVC. Utilise
Apache Tomcat comme conteneur incorporé par défaut.)
Spring Data JPA (Persister les données dans les magasins SQL avec l’API Java Persistence à
l’aide de Spring Data et Hibernate.)
Spring Boot Devtools (fournit des redémarrages rapides des applications, LiveReload et des
configurations pour une expérience de développement améliorée)
Pilote H2
Thymeleaf (moteur de template Java côté serveur pour les environnements web et autonomes.
Permet d’afficher correctement le HTML dans les navigateurs et sous forme de prototypes
statiques.)
1.2 Redefinir les classes du projet :
[Link] : ajouter les parametres permettant d’acces a la base H2
Classe [Link]
@Entity
public class Departement {
@Id
@GeneratedValue(strategy=[Link])
private int id;
private String nom;
// constructeur + getteurs + setters
}
[Link]
import [Link];
import [Link];
@Repository
public interface DepartementRepository extends JpaRepository<Departement, Long>{
List<Departement> findByNom(String nom);
}
[Link]
public class DepartementNotFoundException extends RuntimeException {
private static final long serialVersionUID = 1L;
public DepartementNotFoundException(String exception) {
super(exception);
}
}
DepartementController .java
import [Link];
import [Link];
import [Link];
import [Link];
import [Link] ;
import [Link];
import [Link];
import [Link];
@Controller
public class DepartementController {
@Autowired private DepartementRepository deptRepository;
@GetMapping("/")
public String HomePage(Model model) {
[Link]("alldeptlist", [Link]());
return "index"; // page [Link]
}
@GetMapping("/addnew")
public String addNewDepartement(Model model) {
Departement departement = new Departement();
[Link]("departement", departement);
return "add-departement"; //page [Link]
}
@PostMapping("/save")
public String saveDepartement(@ModelAttribute("departement") Departement
departement) {
[Link](departement);
return "redirect:/";
}
@GetMapping("/UpdateDepartement/{id}")
public String updateForm(@PathVariable("id") long id, Model model) {
Optional<Departement> departement = [Link](id);
[Link]("departement", departement);
return "update-departement";
}
@GetMapping("/deleteDepartement/{id}")
public String deleteById(@PathVariable(value = "id") long id) {
[Link](id);
return "redirect:/";
}
}
Classe DepartementController
Il s’agit de la classe de contrôleur, elle contrôle essentiellement le flux de données. Il contrôle le
flux de données dans l’objet du modèle et met à jour la vue chaque fois que les données changent.
[Link]
[Link]=departement-serviceJPA
[Link]=3010
[Link]=[Link]
[Link]=true
[Link]=jdbc:h2:mem:ensam;DB_CLOSE_DELAY=-1;DB_CLOSE_ON_EXIT=FALSE
[Link]=ensam
#The SQL dialect makes Hibernate generate better SQL for the chosen database
[Link]-platform=[Link].H2Dialect
[Link]=sa
[Link]=123456
[Link]-auto=update
Lorsque l’utilisateur tape l’URL localhost :3010/ sur le navigateur, la requête va à la
méthode HomePage() et dans cette méthode, nous récupérons la liste des departements et l’ajoutons
dans la fenêtre modale avec clé, paire valeur et retournons la page [Link]. Dans la page
[Link], la clé (alldeptlist) est identifiée comme un objet java et Thymeleaf parcourt la liste et
génère du contenu dynamique selon le modèle fourni par l’utilisateur.
/addNew – lorsque l’utilisateur clique sur le bouton Ajouter un departement, la requête est
envoyée à la méthode addNewDepartement(). Et dans cette méthode, nous créons simplement
l’objet vide de departement et le renvoyons à [Link] afin que l’utilisateur
puisse remplir les données dans cet objet vide et lorsque l’utilisateur appuie sur le
bouton enregistrer que /save mapping s’exécute et obtienne l’objet de departement et
enregistre cet objet dans la base de données.
/UpdateDepartement/{id} – Ce mappage permet de mettre à jour les données existantes sur les
departements.
/deleteDepartement/{id} – Ce mappage permet de supprimer les données existantes des
departements.
Thymeleaf Template est un fichier modèle. Son contenu est au format XML/XHTML/HTML5.
Nous allons créer 3 fichiers et les placer dans le répertoire src/main/resources/templates :
[Link]
<html xmlns:th="[Link]
<head>
<meta charset="ISO-8859-1">
<title>List Departement</title>
</head>
<body>
<h3>Departement List</h3>
<a th:href="@{/addnew}" >Ajout nouvel Departement</a>
<table border="1" >
<thead>
<tr>
<th>Nom</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr th:each="departement:${alldeptlist}">
<td th:text="${[Link]}"></td>
<td> <a
th:href="@{/UpdateDepartement/{id}(id=${[Link]})}">Edit</a>
<a
th:href="@{/deleteDepartement/{id}(id=${[Link]})}">Delete</a>
</tr>
</tbody>
</table>
</div>
</body>
Tous les fichiers HTML doivent déclarer l'utilisation de Thymeleaf Namespace:
<!-- Thymeleaf Namespace -->
<html xmlns:th="[Link]
Dans les fichiers modèles (Template file), il y a des Thymeleaf Marker (des marqueurs de Thymeleaf)
qui sont des instructions aidant les données de processus de Thymeleaf Engine.
Thymeleaf Engine analyse les fichiers modèles (Template file) et les combine avec les données Java
pour générer (generate) un nouveau document.
<tr th:each="departement:${alldeptlist}">
Thymeleaf Marker
<td th:text="${[Link]}"></td>
[Link]
<body>
<div>
<h1>Gestion Departement</h1>
<hr>
<h2>Save Departement</h2>
<form action="#" th:action="@{/save}" th:object="${departement}"
method="POST">
<input type="text" th:field="*{nom}" placeholder="Nom Departement">
<button type="submit">Enregistrer Departement</button>
</form>
<hr>
<a th:href="@{/}"> List Departement</a>
</div>
</body>
[Link]
<body>
<div>
<h1>Gestion Departementt</h1>
<hr>
<h2>Edit Departement</h2>
<form action="#" th:action="@{/save}" th:object="${departement}"
method="POST">
<input type="hidden" th:field="*{id}" />
<input type="text" th:field="*{Nom}">
<button type="submit"> Edit Departement</button>
</form>
<hr>
<a th:href = "@{/}"> List Departement</a>
</div>
</body>
2. Projet employe-serviceJPA
Créer un autre projet nommé « employe-serviceJPA » avec les memes dependances que le projet
precedant :
Definir toutes les classes du projet : [Link], [Link], et
EmployeController
Interface [Link],
Ajouter les vues : [Link], add-employe, et update-employe
3. Gateway-serviceJPA
Reconfigurer le projet, tester l’ensemble des templates.
