- Musmus05 : MADANI MUSTAPHA
- paulsbpk : SOBIEPANEK PAUL
- hanae-l : LIEU HANAÉ
- samjrdt : JOURDANT SAMUEL
- Akimbo45 : LAGHOUIL ELIES
Web4All est une entreprise qui vient de signer un nouveau contrat avec un centre de formation. De nos jours, les étudiants recherchent des stages en utilisant leurs propres réseaux personnels et professionnels (comme LinkedIn, anciennes promotions, etc.) et en postulant à des offres.
De cette façon, notre client souhaite aider ses étudiants en facilitant leurs démarches de stage.
Nous, l'équipe technique, devons réaliser une plateforme web moderne qui regroupera différentes offres de stage et qui permettra de stocker des données des entreprises qui ont déjà pris un stagiaire ou qui cherche à recruter. Ce site assurera la gestion des offres de stage et d'alternance.
L'objectif de cette plateforme est de faciliter la mise en relation entre les étudiants à la recherche de stages et les entreprises proposant des offres.
Cette plateforme permettra aux étudiants de trouver plus facilement des stages correspondant à leur profil et aux entreprises de recruter.
Attention, chaque fonctionnalité dépend du rôle de l'utilisateur.
Lorsqu'un utilisateur voudra accéder à sa session, il devra s'identifier. En s'identifiant grâce à l'email et le mot de passe, la base de données détectera quel est le rôle de l'utilisateur.
L'utilisateur peut-être soit :
- Etudiant
- Pilote
- Administrateur
Pour cette partie, il serait préférable que les entreprises soient visibles par tous les utilisateurs. Cependant, d'autres fonctionnalités doivent être mises en place. Nous devons pouvoir :
- Rechercher la fiche d'entreprise en fonction de plusieurs critères
- Possibilité d'afficher les offres liés à une entreprise et de consultr les différentes appréciations
- Créer une fiche d'entreprise
- Modifier une fiche d'entreprise
- Supprimer une fiche d'entreprise
- Evaluer une entreprise qui propose des stages
Afin d'avoir une gestion efficace des offres de stage, nous devons pouvoir :
- Rechercher une offre selon plusieurs critères
- Possibilité d'afficher le détail d'une offre
- Créer une offre et de la paramétrer
- Modifier une offre ainsi que ses paramètres
- Supprimer/retirer une offre
- Consulter les statistiques des offres
Dans cette section, pour assurer une gestion efficace des pilotes de promotions, nous devons pouvoir :
- Rechercher un compte Pilote
- Possibilité d'afficher les informations d'un compte Pilote
- Créer un compte Pilote
- Modifier un compte Pilote
- Supprimer un compte Pilote
Pour la gestion des étudiants nous devons pouvoir :
- Rechercher un compte Etudiant à partir de plusieurs critères
- Possibilité d'afficher les information du compte Etudiant ainsi que l'état de la recherche de stage
- Créer un compte Etudiant
- Modifier un compte Etudiant
- Supprimer un compte Etudiant
- Consulter les statistiques d'un compte Etudiant, doit permettre à l'utilisateur de suivre la recherche de stage d'un compte Etudiant (Dashboard)
Pour la gestion des candidatures, nous devon mettre en place une wish-list. Nous devons pouvoir :
- Permettre à l'utilisateur d'ajouter une offre à sa liste selon l'intérêts pour lui
- Afficher la wish-list avec les nouvelles mise à jour
- Retirer une offre de la wish-list
- Postuler à une offre
- Afficher les offres en cours de candidatures, permettant de voir celles auxquelles l'étudiant a postulé
- Backend: PHP 8+ avec architecture MVC custom
- Frontend: HTML5, CSS3, JavaScript
- Base de données: MySQL
- Dépendances: Composer pour l'autoloading
Afin de mener à bien notre projet, nous avons organisé la structure suivante :
Web4all/
├── .gitignore
├── composer.json
├── composer.lock
├── Index.php
├── README.md
├── Configuration/
│ └── Bdd.SQL
├── Data/
│ ├── Cv/
│ └── lettre_de_motivation/
├── src/
│ ├── Controllers/
│ │ └── # Contrôleurs pour gérer les entités (Admin, Étudiant, Offre, etc.)
│ ├── Models/
│ │ └── # Modèles pour interagir avec la base de données
├── Static/
│ ├── Css/
│ │ └── # Fichiers CSS pour le style
│ ├── Image/
│ │ └── # Images utilisées dans le projet
│ └── Js/
│ └── # Fichiers JavaScript pour les fonctionnalités dynamiques
├── templates/
│ ├── Accueil.twig
│ ├── base.twig
│ ├── Admin/
│ │ └── # Templates pour l'administration
│ ├── Etudiant/
│ │ └── # Templates pour les étudiants
│ ├── Pilote/
│ │ └── # Templates pour les pilotes
│ └── Erreurs/
│ └── # Templates pour les pages d'erreur
├── tests/
│ └── # Tests unitaires
└── vendor/
└── # Dépendances installées via Composer
Index.php
Le point d'entrée principal de l'application, où le processus de traitement des requêtes commence. Il initie les différents composants du framework et dirige les utilisateurs vers les pages appropriées.
composer.json
Dans ce fichier, nous avons les dépendances du projet ainsi que d'autres configurations.
composer.lock
Dans ce fichier est enregistre les versions des packages installés. Dans ce fichier, nous retrouvons toutes les dépendances nécessaires pour le projet.
Le projet utilise l'architecture MVC (Model View Controller), qui permet d'organiser le code de l'application de manière structurée. En mettant en place cette architecture, le code est plus lisible et évolutif, voici notre architecture :
- Model
Le modèle représente la partie logique de l'application et s'occupe des intéractions avec la base de données. Ils contiennent les méthodes pour récupérer, insérer, supprimer et modifier des données.
Nous avons créé un répertoire Models/ et c'est ici que nous avons mis tous les modèles.
- View
La vue correspond à l'interface utilisateur, c'est-à-dire ce que l'utilisateur voit.
Nous avons créé un répertoire templates/, où nous mettons les fichiers Twig. Etant donné que nous avons décidé de créer un site dynamique, nous avons choisi de mettre en place des fichiers Twig.
Accueil.twig : correspond à la page d’accueil du site.
base.twig : correspond au modèle de base que nous avons partagé à toutes les pages.
Puis, nous avons décidé de créer trois dossiers, un pour chaque rôle :
-
Admin/: le dossier admin regroupe tous les fichiers correspondant aux pages de l'administrateur -
Etudiant/: le dossier admin regroupe tous les fichiers correspondant aux pages de l'administrateur -
Pilote/: le dossier admin regroupe tous les fichiers correspondant aux pages de l'administrateur
Erreurs/ : dans ce dossier, nous avons placé notre page d'erreur.
- Controller
La contrôleur est l'endroit où sont traitées les requêtes de l'utilisateur, mais également les intéraction entre le modèle et la vue.
Nous avons créé un répertoire Controllers/ , où nous avons mis les contrôleurs. Ces contrôleurs vont gérer la logique de traitement des requêtes et des interactions entre les modèles et les vues.
LeBonPlan utilise une architecture MVC (Modèle-Vue-Contrôleur) personnalisée :
- Modèles: Gestion des données et logique métier
- Vues: Présentation et templates
- Contrôleurs: Gestion des requêtes et coordination
Le routage est géré par un système personnalisé qui supporte les routes dynamiques et les middlewares.
- PHP 8.3.16
- PhpMyAdmin(MySQL)
- Serveur web (configuration Apache et Azure)
- Composer
Pour l'intallation
-
Cloner le dépôt
git clone https://github.com/votre-username/web4all.git cd web4all -
Installation des dépendances
composer install
-
Accédez à notre site via le navigateur en tapant l'URL :
http://web4all.local -
L'authentification dépend du rôle de l'utilisateur :
-
Pour l'étudiant :
- Email :
sophie.durand@example.com - Mot de passe :
hashedpassword3
- Email :
-
Pour le pilote :
- Email :
paul.martin@example.com - Mot de passe :
hashedpassword2
- Email :
-
Pour l'administrateur :
- Email :
admin@example.com - Mot de passe :
admin
- Email :
-
-
Ainsi, selon votre rôle, vous n'avez pas la même interface
Le projet intègre plusieurs couches de sécurité :
- Protection contre les injections SQL
- Hachage des mots de passe
- Filtrage des entrées utilisateur
- Gestion des sessions sécurisées
Une fois l'analyse des besoins effectuées, nous avons pu définir les tables qui nous seront utiles lors de la mise en place de ce projet.
Nous avions ces entités : Ville (Id_Ville, Nom_ville) : Une ville est identifiée par un identifiant unique et le nom de la ville en question.
Pays (Id_Pays, Nom_Pays) : Un pays est identifié par un identifiant unique et son nom respectif.
Entreprise (Id_Entreprise, Nom_Entreprise, Description_Entreprise, Email_Contact, téléphone_contact) : Une entreprise propose des offres et est décrite par les coordonnées inclues dans la table.
Offre (Id_Offre, Titre_Offre, Description, Base_rémunération, Date_début, Durée_offre) : Une offre de stage ou d’emploi avec des détails sur son titre, sa rémunération et sa durée(début de l'offre et la fin).
Compétence (Id_Competence, Nom_competence) : Afin de pouvoir postuler les compétences sont requises pour les offres.
Candidature (Id_Candidature, date_candidature, Chemin_lettre_motivation) : table contenant les informations de candidature sur une offre.
Utilisateur (Id_Utilisateur, Nom_Utilisateur, Prenom_Utilisateur, Mail_Utilisateur, Mot_de_passe_Utilisateur) : Table contenant les utilisateurs qui postulent aux offres.
Cv (Id_Cv, Chemin_Cv) : Un CV associé à un utilisateur.
Type_Utilisateur (Id_Type_Utilisateur, Nom_type) : Définit le rôle de l’utilisateur (étudiant, pilote, admin).
Évaluation (Id_Evaluation, date_evaluation, Note, Commentaire) : Table contenant les évaluations laissées par les utilisateurs sur une entreprise.
Ces entités sont liées par des relations, dans notre MCD nous retrouvons celles-ci :
Les relations : Se_situe : Les villes sont situées dans un pays. Propose : les entreprise proposent une ou plusieurs offres. Exige : Une offre exige certaines compétences. Reçoit : Une offre reçoit plusieurs candidatures. Fait : Un utilisateur soumet plusieurs candidatures. Possède : Un utilisateur possède un CV. C’est_un : Un utilisateur a un type (étudiant, recruteur, etc.). Met_en_favoris (Wish-list) : Un utilisateur peut enregistrer des offres en favoris. Effectue : Un utilisateur effectue une évaluation d’une entreprise. Récolte : Une entreprise reçoit des évaluations. Crée/Modifie : Un utilisateur peut créer ou modifier une candidature.
La mise en place d'un MCD est essentiel avant la conception de la base de données. Par la suite, ces entités seront utilisées pour interagir entres elles afin de pouvoir répondre à la demande du client. De plus, grâce à la conception de celui-ci nous remarquons les relations entres les entités ce qui permettra par la suite de pouvoir bien organiser la base de données. Afin de pouvoir mettre en place une base de données viable, il est essentiel de définir les besoins et de structurer en amont la base de données.
🔹 MCD (Modèle Conceptuel de Données) : axé sur la logique métier et la structuration des données (entités, associations, cardinalités).
🔹 MLD (Modèle Logique de Données) : traduit le MCD en une structure relationnelle prête pour une base de données SQL.
Le Modèle Logique de Données (MLD) présenté cette image est une traduction technique du MCD vu en amont en structure relationnelle, organisée en tables interconnectées par un système de clés primaires et étrangères. Au contraire du MCD que l'on vient de voir qui présente des entités et leurs relations conceptuelles, le MLD formalise ces relations en incluant des clés étrangères dans les tables appropriées (comme Id_Pays dans Ville) ou en créant des tables d'association pour les relations plusieurs-à-plusieurs (comme Met_en_favoris_Wish_list). Chaque table principale (Ville, Pays, Entreprise, Offre, etc.) est définie avec sa clé primaire et ses attributs typés (VARCHAR, INT, DATE), tandis que les relations du MCD original ("Se_situe", "Propose", "Exige", etc.) sont matérialisées par des références entre tables. Cette structure optimisée pour les bases de données relationnelles permet d'implémenter directement le modèle dans un SGBDR. La principale différence entre ces deux outils c'est que le MLD se rapproche beaucoup de la base de données.
La suite logique après la mise en place du MCD était donc de mettre en place le MLD pour mettre en place la base de données du projet. En effet, comme expliqué en amont c'est cet outil qui nous permet de mettre en place réellement la base de données car c'est grâce à cet outil que nous retrouvons réellement la structure d'une table dans une base de données.
Premièrement commençons par la base, le fichier database.php. C'est dans ce fichier que nous avons accès à la base de données et qui va permettre à tous les modèles
<?php
namespace App\Models;
use PDO;
use PDOException;
class Database {
private $hote = '20.71.157.182'; //ip du serveur
private $nom_base_de_donnees = 'Web4all';
private $utilisateur = 'Mus'; //accès à la BDD
private $mot_de_passe = 'MOT_DE_PASSE';//accès à la BDD
private $connexion;
public function __construct() {
try {
$this->connexion = new PDO("mysql:host={$this->hote};dbname={$this->nom_base_de_donnees}", $this->utilisateur, $this->mot_de_passe, [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);
} catch (PDOException $e) {
die("Échec de la connexion à la base de données : " . $e->getMessage());
}
}
public function obtenir_connexion() {
return $this->connexion;
}
public function recuperer_tous($requete, $parametres = []) {
try {
$stmt = $this->connexion->prepare($requete);
$stmt->execute($parametres);
return $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
die('Database error: ' . $e->getMessage());
}
}
public function recuperer_un($requete, $parametres = []) {
try {
$stmt = $this->connexion->prepare($requete);
$stmt->execute($parametres);
return $stmt->fetch(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
die('Database error: ' . $e->getMessage());
}
}
public function executer($requete, $parametres = []) {
try {
$stmt = $this->connexion->prepare($requete);
return $stmt->execute($parametres);
} catch (PDOException $e) {
die('Database error: ' . $e->getMessage());
}
}
public function obtenir_dernier_id() {
return $this->connexion->lastInsertId();
}
}
Ce code PHP définit une classe Database située dans l'espace de noms App\Models, servant d'interface simplifiée pour interagir avec une base de données MySQL hébergée sur un serveur distant (20.71.157.182). La classe encapsule les informations de connexion (nom d'utilisateur "Mus", mot de passe masqué, nom de base "Web4all") et établit une connexion PDO dans son constructeur avec gestion des erreurs. Elle expose cinq méthodes principales: obtenir_connexion() qui renvoie l'objet PDO, recuperer_tous() pour exécuter des requêtes retournant plusieurs enregistrements, recuperer_un() pour les requêtes ne retournant qu'un seul enregistrement, executer() pour les requêtes d'insertion, mise à jour ou suppression, et obtenir_dernier_id() qui récupère l'identifiant du dernier enregistrement inséré. Toutes ces méthodes seront utilisées afin d'assurer le fonctionnement des CRUD de toutes les tables qui en nécessitent.
Cette première page permet à l'utilisateur de découvrir les différents rôles sur notre plateforme. Les Boutons Etudiant, Pilote, Entreprise présentent ces trois éléments. La principale fonctionnalité de la page d'accueil c'est qu'elle permet à l'utilisateur de se connecter. En effet, le bouton jaune en haut à droite correspond à cette action. Une fois cliqué l'utilisateur tombera sur cette Page :
Comme énoncé en amont, il existe 3 rôles : Pilote Etudiant Administrateur
Le système de connexion est essentiel afin d'effectuer la différence entre ces 3 rôles. En effet un étudiant n'aura pas les mêmes droits qu'un administrateur, c'est donc pour cela que notre table Utilisateur est essentielle.
Passons à la session Étudiant, voici toutes les interfaces que voit l'étudiant :
Sur cette interface l'étudiant pourra chercher des entreprises.
- Barre de Recherche
En haut, au centre de l'interface, nous avons une barre de recherche qui permet aux étudiants de rechercher rapidement et efficacement des entreprises.
- Options de Filtrage
En dessous de la barre recherche, l'étudiant pourra filtrer les entreprises en choisissant :
-> Toutes les compétences : Permet de filtrer les entreprises en fonction des compétences recherchées
-> Toutes les entreprises : Vue d'ensemble de toutes les entreprises disponibles
-> Ville : Filtrage par localisation géographique (ville) -> Tous les pays : Filtrage par localisation mondiale (pays)
Chaque offre présentée contient :
- Un titre de métier
- Des informations essentielles (comme la durée de stages ou alternances)
- Un bouton "Voir l'offre" pour obtenir plus de détails
- Un bouton en forme de cœur pour sauvegarder les offres intéressantes
Sur cette interface l'étudiant pourra consulter les offres qu'il a mises en favoris.
- Offres favorites
Sur l'interface les offres favorites de l'étudiant sont affichées. Chaque offre favorite présentée contient :
-
Un titre de métier
-
Le nom de l'entreprise
-
Un bouton "Voir l'offre" pour obtenir plus de détails
-
Un bouton en forme de coeur qui représente les offres que l'étudiant a mises en favoris
-
Système de pagination
En dessous de l'affichage des offres, nous avons mis un système de pagination qui permettra de ne pas afficher toutes les offres d'un coup. Le but est d'éviter la surcharge d'informations pour avoir une meilleure expérience utilisateur.
- Postulations effectuées
Sur l'interface les offres auquel l'étudiant a déjà postulé sont affichées. Chaque offre présentée contient :
-
Un titre de métier
-
Le nom de l'entreprise
-
La date à laquelle il a postulé
-
Un bouton "Voir l'offre" pour obtenir plus de détails
-
Système de pagination
En dessous de l'affichage des offres, nous avons mis un système de pagination qui permettra de ne pas afficher toutes les offres auxquelles il a postulé, d'un coup.
Sur cette interface l'étudiant pourra mettre à jour son profil notamment le CV.
- Informations personnelles
L'Etudiant doit entrer c'est information personnel, du type son nom, son prénom, son adresse mail et son mot de passe (qu'il pourra modifier).
- Gestion CV
L'étudiant pourra consulter son CV actuel et selon son avis, il pourra le mettre à jour en le remplaçant par le nouveau.
Sur cette interface, l'étudiant peut soit mettre à jour ses informations, soit quitter la session en se déconnectant
Si les informations sont correctes et correspondent à la session d'un pilote alors l'utilisateur sera amené sur cette page :
Sur cette page le pilote aura la possibilité d'effectuer des recherches sur des entreprise, des offres etc... en appliquant les filtres souhaités.
Si l'utilisateur(dans notre cas un pilote) appuie sur la fonctionnalité gestion d'entreprise il sera redirigé vers cette page de contrôle :
Comme le nom de la fonctionnalité l'indique, le pilote aura la possibilité de gérer les entreprises. Il aura la permission de les modifier en appuyant sur la fonctionnalité modifier qui le redirigera vers cette interface :
Si le pilote accède à la fonctionnalité Gestion des offres, il se verra rediriger vers cette page.
Sur cette page il aura le contrôle sur toutes les offres créées et pourra ainsi accéder à certaines fonctionnalités. En effet le pilote pourra voir pour chaque offres le nombre de personnes l'ayant ajouté dans leur Wishlist mais également le nombre de personnes ayant postulées. De plus, le pilote possède également la permission de modification en accédant à la fonctionnalité Modifier l'offre, mais il possède également la possibilité de supprimer une offre ou d'en créer une nouvelle.
S'il accède à la fonctionnalité : Créer une offre, le pilote sera rediriger vers cette page pour finaliser la création d'une offre :
Sur cette page le pilote retrouvera tous les éléments nécessaires afin de mener à bien la création d'une nouvelle offre.
Si le pilote souhaite accéder à la partie de gestion des étudiants, il sera redirigé vers cette page :
L'interface reste encore une fois la même. Il verra l'intégralité des comptes étudiants créés. Le pilote aura également le pouvoir de supprimer de créer ou modifier un compte étudiant de la même manière que les étapes précédentes.
Si le pilote souhaite accéder à l'onglet Profil il tombera sur cette page :
la dernière interface présentée pour la session pilte c'est la gestion du profil du compte. En effet sur cette interface l'utilisateur a la possibilité de mettre ces éléments à jour :
- Nom -Prénom -Adresse Mail -Mot de passe
En appuyant sur le bouton mettre à jour les informations rentrées seront changées dans la base de données. En revanche si l'utilisateur appuie sur le bouton se déconnecter alors sa session se terminera et se retrouvera sur la page de connexion.
Si les informations de connexion sont correctes et correspondent à la session d'un administrateur alors l'utilisateur tombera sur cette page :
Comme nous pouvons le remarquer dans la barre de navigation, l'administrateur a l'accès à la gestion des entreprises, des offres, des pilotes et enfin de son profil.
Si l'administrateur appuie sur la fonctionnalité gestion d'entreprise il retrouvera la liste des entreprises créées. Il aura également la permission de voir les détails de l'entreprise, modifier les informations de l'entreprise ou encore la supprimer. Précisons qu'il a également le droit d'en créer en appuyant sur la fonctionnalité Créer une entreprise ou Ajouter une entreprise
L'interface pour le reste du site web reste la même. En effet sur cette page l'administrateur retrouvera toutes les offres créées et pourra également visualiser les statistiques associées à celle-ci(le nombre de personnes l'ayant mis dans leur Wish-list, ainsi que le nombre de candidature). L'administrateur ayant tous les droits peut également accéder à sa wishlist en survolant le bouton gestion des offres :
L'interface encore la même, l'administrateur a également accès à la gestion des étudiants en cliquant sur le bouton dans la navigation Gestion des étudiants. L'administrateur a accès au dashboard des étudiants. L'administrateur a également accès à la modification du compte mais peut également supprimer définitivement ceux-ci. Les CRUD ayant tous été configurés correctement, l'administrateur a également la permission de créer des comptes étudiants.
Cette interface se présente exactement de la même manière que celle précédente. En effet, l'administrateur possède la permissions de modifier, créer et supprimer un compte Pilote.
la dernière interface présentée pour la session d'administrateur c'est la gestion du profil du compte. En effet sur cette interface l'utilisateur a la possibilité de mettre ces éléments à jour :
- Nom -Prénom -Adresse Mail -Mot de passe -CV
En appuyant sur le bouton mettre à jour les informations rentrées seront changées dans la base de données. En revanche si l'utilisateur appuie sur le bouton se déconnecter alors sa session se terminera et se retrouvera sur la page de connexion.