Activité

Spring Boot CRUD Application with Thymeleaf

1
Spring Boot CRUD Application with Thymeleaf:
Plan d’action
• Liste des dépendances à ajouter pour se connecter à la base de données
MySql:
• Spring-data-jpa : Pour accéder via la base de données
• MySql-connector : Pilote de la base de données MySql
• Lombok: pour la génération automatique des getters/setters et equals/hashCode
• Action à développer:
• Ajouter/Lister/supprimer/Editer
• Extra:
• BootStrap & fontawesome pour le formattage
• Ajax via JQuery et JavaScript
• SweetAlert
2
Spring Boot CRUD Application with Thymeleaf:
Configuration de la base de données

• Noter Bien:
• La base de donnés s’appelle studb. Elle sera créée automatiquement si elle n’existe pas.
• A spécifier le mot de passe de la base de données, s’il existe.

3
 Spring Boot CRUD Application with Thymeleaf:
Lombok/Entity
• La dépendance Lombok est très utilisée dans les projets Java.
• Elle génère automatiquement (via des annotations):
getter/setter/constructeurs/equals/hashCode/toString/etc.

Lombok
annotations

Entity
Dépendance: il faut lancer lombok.jar et choisir l’IDE utilisé
pour qu’il reconnaisse les fonctionnalités de lombok

4
 Spring Boot CRUD Application with Thymeleaf:
Lombok/Entity/Repository/Service
• L’API spring-data-jpa est un moyen qui facilite l’utilisation des données et le
mapping avec la base de donnes.
• Le repository qui est la classe qui regroupe les fonctionnalités d’accès à la base
de données, offre –via l’héritage de JpaRepository- une vingtaine de méthodes
pour manipuler les données (save/delete/findAll/findById/etc.)
• Le service est sensé contenir tout le traitement métier de l’application

Repository (spring-data)

Service
5
Spring Boot CRUD Application with Thymeleaf:
Controller

Controller

• Noter Bien:
• L’injection via constructeur est la meilleure manière d’injection
• La page thymeleaf n’est accessible que via le contrôleur, et c’est le rôle de l’url /new du contrôleur. Dans la
méthode newStudent, on peut charger des données par défaut, à mettre dans le formulaire d’ajout.
• Après l’ajout d’un student, la redictection vers l’url /student/new permet de recharger la page d’ajout de
nouveau

6
Spring Boot CRUD Application with Thymeleaf:
students.html

Vue

• Formulaire d’ajout d’un nouveau student :

• L’action du formulaire pointe vers la méthode save du controleur.
7
 Spring Boot CRUD Application with Thymeleaf:
Résultat d’exécution
Base de données via phpMyadmin

Vue

• L’ajout dans la base de données est effectué avec succès

8
Spring Boot CRUD Application with Thymeleaf:
Affichage de la liste des students
Ajout du code Ajout de la ligne qui charge les students de la
d’affichage des students base de données

Résultat
d’exécution

9
Spring Boot CRUD Application with Thymeleaf:
Suppression d’un student
Ajout de la colonne action, avec un
lien href pour la suppression

Ajout du code de suppression via

un paramètre du path

Résultat
d’exécution
10
 Spring Boot CRUD Application with Thymeleaf:
Modification d’un student (1/2)
• La modification est divisée en 2 actions:
• Charger le student sujet de la modification dans une nouvelle fenêtre
• Editer ce student, et mettre à jour la base de données

Page de modification
La modification est faite par un bouton, et un
formulaire. Le champ id est caché

La nouvelle méthode qui charge le student à modifier

11
Spring Boot CRUD Application with Thymeleaf:
Modification d’un student (2/2)
• La modification est divisée en 2 actions:
• Charger le student sujet de la modification dans une nouvelle fenêtre
• Editer ce student, et mettre à jour la base de données

Résultat d’exécution
12
 Spring Boot CRUD Application with Thymeleaf:
Application BootStrap
• Des fichiers à importer de ces 2 sites et à inclure dans le projet dans les
répertoires css, js et webfonts sous le répertoire static:
• https://getbootstrap.com/: 1 css et 1 js
• https://fontawesome.com/: 1css et 1 woff2 pour les icones

Importation css Résultat d’exécution

Application des styles

Le répertoire static Importation js

13
Spring Boot CRUD Application with Thymeleaf:
Application Ajax, via Jquery et sweetAlert (1/3)
• Des fichiers à importer de ces 2 sites et à inclure dans le projet dans les
répertoires css, js sous le répertoire static:
• https://code.jquery.com/jquery-3.6.0.min.js: 1 js
• https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js: 1js
Ajout de méthode Rest dans le contrôleur pour l’appel Ajax

Identification de chaque ligne dans le tableau par l’id du student:

utiliser pour la suppression de la ligne tu tableau après l’appel Ajax

Suppression de la ligne
du student supprimé

Ajout d’un lien deleteAjax qui déclenche une fonction

js: deleteStudent

SweetAlert pour
Importation js confirmer la suppression
Code Ajax, qui appelle la
14
méthode du controlleur
 Spring Boot CRUD Application with Thymeleaf:
Application Ajax, via Jquery et sweetAlert (2/3)

SweetAlert pour confirmer

l’action de suppression

Le répertoire static avec
les nouveaux fichiers
Si l’utilisateur confirme
la suppression
Code Ajax, qui appelle la
méthode du controlleur

Si l’utilisateur annule la
suppression

15
Spring Boot CRUD Application with Thymeleaf:
Application Ajax, via Jquery et sweetAlert (3/3)

La ligne a été supprimée du tableau (2 lignes

restant des 3 lignes initiales)

16
Quiz
1. Les fichiers HTML contenant les instructions Thymeleaf sont placés dans le répertoite:
a) template
b) static
2. La dépendance Lombok permet de :
a) Générer les gettet/setter/constructeur/equals/hashCode
b) Optimiser le codes des repositories de spring-data-jpa
3. Ajax permet de :
a) Envoyer des requêtes vers le serveur, en arrière plan, avec javascript afin d’optimiser la bande passante
et garder toujours le contenu de la page actif pour l’utilisation
b) Tester la bande passante avec le serveur
4. On peut déclencher une requête HTTP de la page Thymeleaf –vers le serveur- à partir d’un
a) Formulaire via le bouton submit ou sur n’importe quelle action sur les composants HTML via JavaScript
b) Code css de style

17