Année académique : 2024-2025

Niveau : MASTER 1 Genie Informatique

RAPPORT DE TRAVAUX PRATIQUES

N°1
PRISE EN MAIN DE JAVAFX, JPA

Présenté par : • N ’G O R A N C h a r l e m ag n e J o s u é - A rn ol d
• KARAMOKO NKODJO Amy

Enseignants:
➢ Professeur TCHIMOU
➢ Docteur ZOUMENE
 SOMMAIRE

I. INTRODUCTION

II. OUTILS DE DEVELOPPEMENT &

CREATION D’UN PROJET JAVAFX-JPA

III. BASE DE DONNÉES

IV. ILLUSTRATION : MODEL–VIEW- CONTROLLER

V. CONCLUSION

RAPPORT TP1 GLA 2

 INTRODUCTION

▪ Objectif : Concevoir une application simple permettant l’ajout, la modification et la suppression de

personnes dans un tableau interactif.
▪ Technologies utilisées : JavaFx pour l’interface utilisateur JPA(Java Persistence API) pour la gestion
des données et Scene builder pour la conception visuelle.
▪ Contexte : Ce TP constitue une première approche de la manipulation des interfaces graphiques et
de l’intéraction avec une base de données, offrant ainsi une introduction aux principes
fondamentaux du développement d’applications JavaFX.

RAPPORT TP1 GLA 3

 OUTILS DE DEVELOPPEMENT- CREATION
& CONFIGURATION D’UN PROJET JAVAFX
& JPA

RAPPORT TP1 GLA 4

 1. OUTILS DE DÉVELOPPEMENT

a. Intellij IDEA
IntelliJIDEA est un environnement de développement intégré (IDE) open
source largement utilisé pour la programmation dans de nombreux langages,
notamment Java et bien d'autres. Il offre une gamme complète d'outils pour la
création, le débogage, le test et le déploiement de logiciels.
b. SceneBuilder
SceneBuilder est un outil de conception d'interfaces graphiques (GUI)
pour JavaFX, un framework graphique utilisé pour développer des
applications de bureau et des applications web riches en fonctionnalités.
Scene Builder permet de créer des interfaces utilisateur de manière visuelle
en faisant glisser et déposer des composants graphiques tels que des
boutons, des zones de texte et des images sur une toile virtuelle
c. XAMP
Xampp contient un SGBD (MYSQL) pour la gestion des données
du logiciel et phpMyAdmin, une application web open source qui
5
fournit une interface conviviale pour gérer des bases de données
MySQL via un navigateur web.
 2. CRÉATION ET CONFIGURATION D’UN PROJET JAVAFX (1/2)

▪ Création d'un projet JavaFX : Nous pouvons créer un nouveau projet JavaFX en sélectionnant "File" >
"New" > "Project" dans Intellij IDEA.
❖ Dans la boîte de dialogue de création de projet, on sélectionne "JavaFX ".
❖ Ensuite, on donne un nom au projet.
❖ Après avoir donné le non à notre projet on choisit la version de notre JDK(Java
Développement Kit).
❖ Puis on clique sur "Next " .
❖ Enfin on clique sur "Create" pour le créer.

RAPPORT TP1 GLA 6

2. CRÉATION ET CONFIGURATION D’UN PROJET JAVAFX (2/2)
▪ Illustration de la création et configuration d’un projet JavaFx en image
 3. CONFIGURATION D’UN PROJET JPA
▪ Créer un projet : Après avoir ouvert Intellij IDEA, on sélectionne "File" > "New" > "Project“ pour créer un
simple projet Java ou créer un projet JavaFX comme nous l’avons indiqué dans la partie ‘’Création et
configuration d’un projet JAVAFX’’.

▪ Ajout de la facette JPA

❖ Dans un premier temps nous allons localisez le fichier [Link] dans l’explorateur de projets d’Intellij
❖ Ensuite insérer dans ce fichier les dépendances nécessaires pour JPA ainsi que toutes les autres
dépendances réquises au bon fonctionnement du projet. (a)

▪ Création du fichier [Link]

❖ Dans l’explorateur de fichier de nous allons créer le fichier [Link] à l’emplacement suivant :
src/resources/META – INF/[Link]
❖ Ce fichier sera utilisé pour configurer les paramètres de connexion à la base de données, déclarer les
entités et définir l'unité de persistance ainsi que d'autres configurations importantes pour l'application.
8
RAPPORT TP1 GLA
 (a)

RAPPORT TP1 GLA 9

RAPPORT TP1 GLA 10
Le fameux fichier [Link]
NB : mise à jour du fichier [Link] qu’on doit créer
▪ Pour un projet JavaFx ou JPA utilisant Java 9 ou ultérieur, il faut mettre à jour le fichier module-
[Link] présent dans le dossier "src" du projet pour inclure les dépendances requises. Il faut
ajouter les directives "requires" appropriées pour déclarer les dépendances à JPA, à JavaFX et
autres.
• La directive "open" est aussi utilisée pour rendre certains packages accessibles à l’exterieur.

Module contenant des dépendances JavaFx et JPA du

projet.

NB : Pour plus d’informations, consulter des

documentations concernant les modules en java.
RAPPORT TP1 GLA 11
 BASE DE DONNÉES

RAPPORT TP1 GLA 12

 1. MODÉLISATION UML DE LA BD

▪ personne : table d’enregistrement des personnes

▪ cette table contient 2 colonnes :

❖ personne_id (Type Integer): la clé primaire
de la table
❖ nom (Type Varchar)
❖ prenom (Type Varchar)

RAPPORT TP1 GLA 13

 2. CRÉATION DE LA BASE DE DONNÉES
On crée la base de données qui
aura pour nom: "listepersonne"

La base de données ainsi créée,

nous devons créer une table
nommée " personne“ avec des
colonnes "personne_id", " nom "
et " prenom".

RAPPORT TP1 GLA 14

3. CONNEXION À LA BASE DE DONNÉES

▪ Inclusion du driver MySQL :

❖ Aouter les dépendances de Mysql dans le fichier [Link]
▪ Configuration dans le fichier [Link] :
❖ Ajouter les configurations nécessaires(url, user, password) pour se connecter la base de
données
❖ Insérer les configurations dans la balise <properties></properties>, chaque configuration aura
pour balise <property/> avec les attributs name et value.

15
 ILLUSTRATION MODEL–VIEW-CONTROLLER

RAPPORT TP1 GLA 16

 1. MODEL – CRÉATION DE LA CLASSE ENTITÉ « UTILISATEUR »

a. Notion d’entité
▪ Les entités permettent d'encapsuler les données d'une occurrence d'une ou plusieurs tables. Ce sont
de simples POJO (Plain Old Java Object). Un POJO est une classe Java qui n'implémente aucune interface
particulière ni n'hérite d'aucune classe mère spécifique.
▪ Un objet Java de type POJO mappé à une table de la base de données grâce à des metadata via l'API JPA
est nommé bean entité (Entity bean).
▪ Un bean entité doit obligatoirement avoir un constructeur sans argument et la classe du bean doit
obligatoirement être marqué avec l'annotation @Entity du package [Link] ou
[Link]
▪ @Table permet de mapper une classe d'entité à une table spécifique dans une base de données
relationnelle. Elle accepte un attribut name qui spécifie le nom de la table dans la base de données à
laquelle la classe d'entité est mappée. Dans notre cas, notre classe Utilisateur est mappé à la table
"personne" dans la base de données.

NB : Bien que cette classe ne soit pas placée dans un package spécifique, il est fortement recommandé
d’organiser ses entités dans un package dédié (ex: models). Cela améliore la struture du code, la
maintenabilité et évite les conflits de noms. 17
b. Entité Utilisateur ▪ @Idest utilisée pour marquer un champ comme clé
primaire de l'entité.
▪ @GeneratedValue(strategy = [Link])
spécifie que la valeur de la clé primaire sera générée
automatiquement en utilisant une séquence définie dans la
base de données. Cette approche est particulièrement utile
pour optimiser les performances et garantir l'unicité des
identifiants.
▪ @Column est utilisée pour spécifier le mapping d'un
champ à une colonne de la table dans la base de données.
Elle peut être utilisée pour spécifier le nom de la colonne, le
type de données, les contraintes (nullable, unique, longueur
maximale, etc.) et d'autres attributs de la colonne. Si
l'annotation @Column est absente, le nom de la colonne
sera déduit du nom du champ.

NB : Après avoir crée la classe entité, il faut la déclarer dans le

fichier [Link].

18
 2. VIEW – CRÉATION DU FICHIER « [Link] »

▪ Création d'un nouveau fichier FXML

❖ Dans l'Explorateur de projet d'IntelliJ IDEA, faites un clic droit sur le répertoire où vous
souhaitez créer le fichier FXML (dans notre cas, src/resources/com/projet/tp1).
❖ Sélectionnez "New" -> "FXML File" dans le menu contextuel
❖ Dans la fenêtre qui s'affiche, entrez le nom du fichier FXML (ex. « [Link]") et cliquez sur "Finish".

▪ Conception de l'interface utilisateur avec Scene Builder

❖ Ouvrir le fichier FXML : Faites un double-clic sur le fichier FXML dans IntelliJ IDEA. Vous verrez
l'éditeur XML affichant le contenu du fichier.
❖ Ouvrir avec Scene Builder : Cliquez sur l'icône "Open with Scene Builder" dans la barre d'outils
de l'éditeur.
❖ Modifier l'interface : Une fois Scene Builder ouvert, vous pouvez concevoir votre interface
utilisateur en glissant-déposant des composants depuis la palette d'éléments vers la scène.

RAPPORT TP1 GLA 19

 ▪ Aperçu de l’interface SceneBuilder et de la vue [Link]

RAPPORT TP1 GLA 20

 3. CONTROLLER – CRÉATION DE LA CLASSE « [Link] »

La classe Controller est un contrôleur JavaFX conçu pour gérer les interactions entre la vue (interface
utilisateur définie dans [Link]) et le modèle (données représentées par la classe entité Utilisateur)
de l'application de gestion des utilisateurs. Son rôle principal est de fournir une logique métier pour
la gestion des utilisateurs dans le logiciel, en utilisant directement un EntityManager pour interagir
avec la base de données via JPA.
▪ Gestion de la persistance avec JPA
L'application ne repose pas sur des classes utilitaires dédiées comme JPAUtil et GenericEntity, mais
utilise directement EntityManagerFactory et EntityManager pour la gestion des entités JPA.
Cependant, une approche modulaire pourrait être adoptée en intégrant une classe utilitaire pour
encapsuler ces opérations et ainsi améliorer la réutilisabilité du code.
▪ EntityManagerFactory et EntityManager
❖ EntityManagerFactory entityManagerFactory : Gère l’instance de EntityManager, permettant
la création d’une connexion avec la base de données définie dans [Link].
❖ EntityManager entityManager : Instance utilisée pour effectuer les opérations CRUD (Create, Read,
Update, Delete) sur la base de données.

RAPPORT TP1 GLA 21

▪ Principales fonctionnalités du contrôleur
❖ Affichage des utilisateurs
➢ La méthode afficher() récupère les données de la base via une requête JPQL et les charge dans un
TableView.
➢ Les colonnes de la table (colonneId, colonneNom, colonnePrenom) sont liées aux propriétés de la
classe Utilisateur via PropertyValueFactory.
❖ Ajout d'un utilisateur
➢ La méthode enregistrer() permet d'insérer un nouvel utilisateur après vérification de son
existence dans la base.
➢ L’insertion est effectuée via [Link](personne) dans une transaction.
❖ Modification d'un utilisateur
➢ La méthode modifier() récupère l’utilisateur sélectionné dans la table, puis met à jour ses
informations.
➢ [Link]([Link], id) est utilisé pour récupérer l'entité avant modification.
❖ Suppression d'un utilisateur
➢ La méthode supprimez() supprime l’utilisateur sélectionné après confirmation.
22
➢ [Link](user) est appelé dans une transaction pour effectuer la suppression.
▪ Aperçu de [Link]
Déclarations FXML:
Les champs @FXML sont déclarés pour chaque
composant crée dans la vue [Link] qui sera manipulé
dans le contrôleur, tels que des zones de texte (TextField),
une table (TableView), des boutons (Button),

Initialisationde l'EntityManager:
L'EntityManager est utilisé pour interagir avec la base de
données via JPA (Java Persistence API).

Initialisationde la TableView:
Les colonnes de la TableView sont configurées pour afficher
les propriétés des objets Person. Les données affichées dans
la table sont extraites d'une liste observable.

Méthode initialize() : Cette méthode est appelée

automatiquement lorsque le contrôleur est initialisé. Elle
configure les éléments de l'interface utilisateur et les
écouteurs d'événements nécessaires pour interagir avec
les données.

23
▪ Exemple : Ajouter une personne en BD

RAPPORT TP1 GLA 24

 ▪ Explication du code ci -dessus
La méthode enregistrer() est déclenchée lorsqu'un utilisateur clique sur le bouton d'enregistrement . Elle est associée
à l'événement de clic du bouton grâce à l'annotation @FXML.
Vérification de l'existence de la personne :
La première étape de la méthode consiste à vérifier si la personne (composée du prénom et du nom) existe déjà dans
la base de données. Pour cela, la méthode checkPersonneExists() est appelée, qui exécute une requête JPQL pour
vérifier la présence d'un utilisateur avec ces mêmes nom et prénom. Si cette personne existe déjà, une alerte est
affichée à l'utilisateur pour l'informer de l'existence de la personne dans la base de données.
Création de la personne et insertion dans la base de données :
Si la personne n'existe pas déjà, la méthode crée un nouvel objet Utilisateur (personne), en utilisant les valeurs
entrées dans les champs de texte nomPersonne et prenomPersonne. Une fois l'objet créé, une transaction est
démarrée sur l'EntityManager. L'objet Utilisateur est ensuite persistant en base de données avec la méthode persist().
Enfin, la transaction est validée avec commit() pour que l'insertion soit effective.
Gestion des erreurs :
Si une exception se produit, soit lors de la création, soit lors de l'insertion dans la base de données, une gestion
d'erreurs est effectuée. Les exceptions sont capturées et les transactions sont annulées (rollback) en cas de problème.
Actualisation de la TableView :
Une fois la transaction validée et la personne enregistrée, la méthode afficher() est appelée pour recharger les
données dans la TableView, permettant ainsi d'afficher immédiatement la nouvelle personne dans l'interface.
RAPPORT TP1 GLA 25
L’execution de nôtre application nous donne ceci:

RAPPORT TP1 GLA 26

 CONCLUSION

En conclusion, l'intégration de JavaFX et JPA constitue une solution robuste pour le

développement d'applications graphiques dynamiques et interactives, tout en assurant une
gestion efficace de la persistance des données dans une base relationnelle. JavaFX offre une
interface utilisateur moderne et flexible, idéale pour créer des applications visuellement
attrayantes et faciles à utiliser, tandis que JPA simplifie l'interaction avec la base de données en
facilitant le mappage des objets Java aux tables correspondantes.

RAPPORT TP1 GLA 27