Skip to content
Snippets Groups Projects

:pushpin: LilleConnect

Réalisé par Tom Dequesnes et Giorgio Utzeri

:book: Table des matières

  1. :pencil: Description de l'application
  2. :dividers: Modélisation des données
  3. :bar_chart: Requêtes SQL pertinentes
  4. :file_folder: Arborescence du projet
  5. :desktop: Liste des entrées des contrôleurs
  6. :tools: Points techniques et solutions
  7. :globe_with_meridians: Utilisation de l'API REST
  8. :heavy_plus_sign: Fonctionnalitées et améliorations

:pencil: Description de l'application

LilleConnect est un projet réalisé dans le cadre du BUT Informatique. Le but était de créer une application web permettant aux utilisateurs de discuter et d’échanger dans des fils de discussion. Le projet repose sur une base de données relationnelle et utilise des servlets Java avec JSP pour la gestion des interactions. Il a été l'occasion de travailler sur l’authentification des utilisateurs, la gestion des sessions et la sécurité des données, tout en appliquant les bonnes pratiques du développement web MVC.

:rocket: Comment lancer le projet sur linux ?

  1. installaton de la base de données 2 options :
    :one: Utilisation de l'appli à l'iut de Lille :
    Aucune modification nécessaire. La connexion à la base de données se fait automatiquement.
    :two: Utilisation de l'appli hors de l'iut de Lille :
    Modifiez le fichier (WEB-INF/classes/res/config.prop) avec les informations de votre base de données.
    Exécutez ensuite la commande suivante dans PostgreSQL pour créer la structure de la base :
\i sql/LilleConnect.sql
  1. Compiler les classses :
    Dans le répertoire racine du projet, exécutez cette commande pour compiler toutes les classes Java :
javac -d WEB-INF/classes/ WEB-INF/src/*/*.java
  1. Lancement du serveur Tomcat : Accédez au dossier tomcat/bin/ et lancez Tomcat avec cette commande :
./catalina run
  1. Accès à l'application (http://localhost:8080/LilleConnect/login.html)
  2. Se connecter à l'application :

Vous pouvez vous connecter avec l'un des identifiants suivants, ou créer un nouveau compte :

Mail Mot de passe
giorgio.utzeri@univ-lille.fr giou
tom.dequesnes@univ-lille.fr totow

:dividers: Modélisation des données

:pushpin: Modèle Conceptuel de Données (MCD)

Ce premier MCD a été réalisé en fonction de notre vision initiale du projet, en modélisant les principales entités et leurs relations avant d'affiner la structure lors du développement.

MCD

Cette version finale du MCD intègre tous les ajouts et fonctionnalités supplémentaires, offrant une structure optimisée et mieux adaptée aux besoins du projet.

MCD

:pushpin: Modèle Logique de Données (MLD)

Le MLD traduit le MCD en une structure relationnelle optimisée, prenant en compte les contraintes d'intégrité et les performances de la base de données.

MCD


:bar_chart: Requêtes SQL pertinentes

Table Utilisateur :
Verifier l'utilsateur à la connexion :

SELECT * FROM Utilisateur 
WHERE mail = 'test@test.fr' 
AND mdp = md5('mdp');

Créer un compte utilisateur :

INSERT INTO Utilisateur (prenom, nom, mail, mdp)
VALUES ('Giorgio', 'UTZERI', 'giorgio.utzeri.etu@univ-lille.fr', MD5('iLoveJava'));

Afficher le nom et prénom :

SELECT prenom, nom FROM Utilisateur WHERE u_id = 1;

Table Message :
Créer un message :

INSERT INTO Message (f_id, u_id, message_data, is_image, d_vie, datemessage)
VALUES (1, 1, 'message', false, 14, NOW());

Afficher un message :

SELECT * FROM Message WHERE m_id = 1;

Table Fil :
Créer un fil :

INSERT INTO Fil (titre)
VALUES ('Discussion');

:file_folder: Arborescence du projet

L'arborescence du projet suit le principe MVC en séparant les contrôleurs, qui gèrent la logique entre la vue et la base de données, des DAO, responsables des interactions avec la base de données, et des DTO, qui assurent le transfert des données entre les couches.

└── src
├── controleurs
│ ├── AccountAuthent.java
│ ├── AccountCreate.java
│ ├── APIRest.java
│ ├── FilAddUser.java
│ ├── FilCreate.java
│ ├── FilLeave.java
│ ├── FilUser.java
│ ├── JwtManager.java
│ ├── LikeControler.java
│ ├── LogoutControler.java
│ ├── Menu.java
│ ├── MessageSend.java
│ └── UserInfo.java
├── dao
│ ├── ConfigLoader.java
│ ├── DS.java
│ ├── FilDAO.java
│ ├── LikeDAO.java
│ ├── MessageDAO.java
│ ├── ParticipantFilDAO.java
│ └── UtilisateurDAO.java
└── dto
├── Fil.java
├── Message.java
├── PartFil.java
├── QuiLike.java
└── Utilisateur.java

:desktop: Liste des entrées des contrôleurs

URL Méthode Fonctionnalité
/Authent service Vérifie la connexion et redirige vers le menu
/Create service Authentifie un utilisateur et démarre une session
/filUser GET API REST pour récupérer toutes les infos depuis un token
/addUserFil POST Permet d'ajouter des utilisateurs à un fil existant
/CreateFil POST Crée un fil pour l'utilisateur
/LeaveFil service Permet à l'utilisateur de quitter un fil
/UserFil GET Permet d'afficher les utilisateurs du fil sur la page d'ajout d'utilisateur
/UserFil POST Permet de supprimer l'utilisateur sélectionné d'un fil
/ControleurLike POST Permet d'ajouter un like à un message
/Logout service Permet de vider la session
/Menu service Récupère toutes les informations de l'utilisateur et redirige vers le menu
/EnvoyerMessage POST Permet d'envoyer un message
/UserInfo GET Permet de récupérer les informations de l'utilisateur
/UserInfo POST Permet de modifier les informations de l'utilisateur

:tools: Points techniques et solutions

Intégration des images dans les messages :
Pour intégrer des images dans les messages, on a converti les images en données binaires (bytes) avant de les stocker, puis on les reconvertit en images quand on les affiche.

Problème avec Tomcat et le cache :
On a eu un problème avec Tomcat où les modifications n'étaient pas prises en compte à cause du cache. On a résolu ça en vidant régulièrement le cache.

Front-end du site pour une meilleure expérience utilisateur :
Pour rendre le site plus propre et agréable, on a utilisé Bootstrap et créé une maquette dès le début du projet.

Maquette

Gestion des likes sur les messages dans la base de données :
La gestion des likes était compliquée car on les stockait directement en nombre dans la base de données. On a séparé ça et calculé les likes au lieu de les stocker en dur.

:globe_with_meridians: Utilisation de l'API REST

Récupération du token :
Une fois que l'utilisateur est connecté, il doit cliquer sur son profil pour récupérer son token.

Utilisation de l'API :
Ouvrir un terminal et exécuter cette commande :

curl "http://localhost:8080/LilleConnect/filUser" -H "Authorization: Bearer <token>"

Et remplacer <token> par le token récupéré précédemment.
Le serveur renverra alors les informations de l'utilisateur au format JSON.
Le token à une durée de vie de 20 minutes.

:heavy_plus_sign: Fonctionnalitées et améliorations

Fonctionnalités demandées :

:white_check_mark: DAO de gestion de données
Implémentation des DAO pour gérer les données nécessaires à l'application.

:white_check_mark: Gestion des fils
Création, gestion des abonnés et des messages dans les fils.

:white_check_mark: Système d'authentification
Mise en place d'un système d'authentification des utilisateurs.

:white_check_mark: Style avec une feuille de styles reconnue
Utilisation de Bootstrap pour le design de l'application, assurant une interface propre et responsive.

:white_check_mark: Gestion des likes/unlikes
Mise en place d'un système permettant de liker et de disliker les messages.

:white_check_mark: Permettre de poster des images
Intégration d'une fonctionnalité permettant d'ajouter des images dans les messages.

:white_check_mark: Durée de vie des messages
Les messages ont une durée de vie définie, après laquelle ils sont automatiquement supprimés. (elle se gère pour tous les utilisateurs dans le fichier config.prop avec la valeur nbday en jour)

:white_check_mark: Service Web pour récupération des fils et messages
Création d'un service Web permettant de récupérer, en GET, les fils et les messages au format JSON.

:white_check_mark: Autres améliorations
Ajout de fonctionnalités supplémentaires telles que la gestion des erreurs et la résistance aux injections SQL et XSS.

Autres fonctionnalités supplémentaires :

:white_check_mark: Quitter un fil
Possibilité pour un utilisateur de quitter un fil de discussion.

:white_check_mark: Modification des informations utilisateur
L'utilisateur peut modifier ses informations personnelles en cliquant sur son nom/prénom.

:white_check_mark: Gestion des membres dans un fil
Possibilité d'ajouter ou de supprimer des membres dans un fil de discussion.

:white_check_mark: Sécurisation contre les injections SQL et XSS
L'application est protégée contre les injections SQL et les attaques XSS.

:white_check_mark: Gestion des valeurs nulles
L'application résiste à toutes les erreurs liées aux valeurs nulles.

:white_check_mark: Responsive Design
L'application est entièrement responsive, s'adaptant à différentes tailles d'écran et appareils.