Rapport de Stage

Département
: Mathématiques et Informatique
MEMOIRE DE STAGE
En vue de l’obtention du diplôme Licence Professionnelle

‘’Génie Informatique’’
LA CREATION D'UNE APPLICATION WEB POUR LA

GESTION DES PROJETS IMMOBILIERS
Présenté par
FARID AAMMI et ZAKIA TAOUFIK
Soutenue le 14 Juin
Devant le jury
Pr ES-SAADY Youssef Professeur à la Faculté Polydisciplinaire de Taroudant Président
Pr Abderrahmane SADIQ Professeur à la Faculté Polydisciplinaire de Taroudant Encadrant
Année Universitaire 2022- 2023

« Le succès c’est d’aller d’échec en échec sans perdre son enthousiasme. »
Winston Churchill
DEDICACES
Avec l’expression de ma reconnaissance, je dédie ce modeste travail à ceux qui, quels

que soient les termes embrassés, je n’arriverais jamais à leur exprimer mon amour sincère.
A la femme qui a souffert sans me laisser souffrir, à mon adorable mère qui n’a jamais
dit non-âmes exigences et qui n’a épargné aucun effort pour me rendre heureuse.
A mon cher père, mon précieux offre du dieu, qui doit ma vie, ma réussite et tout mon
respect.
A mon cher frère qui n’a pas cessé de me conseiller, encourager et soutenir tout au
long de mes études.
A tous mes amis pour leurs aides et supports dans les moments difficiles.
Sans oublier mon binôme pour son soutien moral, sa patience et sa compréhension tout
au long de ce projet.
REMERCIEMENTS
Nous tenons à remercier toutes les personnes qui ont contribué au succès de nos stages
et qui nous ont aidés lors de la rédaction de ces rapports.
Tout d'abord, nous adressons nos remerciements à nos professeurs et nos encadrants,
M. ABDERRAHMANE SADIQ, pour leur écoute et leurs conseils.
Nous tenons à remercier vivement M. Rachid Ramzi, directeur de la société

IMMOLEADER, pour leur accueil, leur expertise au quotidien. Grâce aussi à leur confiance,
nous avons pu nous accomplir totalement dans nos missions.
Enfin, nous tenons à remercier toutes les personnes qui nous ont conseillés et relus lors
de la rédaction de ces rapports de stage.
Résumé
RESUME
Ce rapport résume notre projet de stage au sein de l'entreprise IMMOLEADER, dans

le cadre de notre formation en Génie informatique. Notre stage a duré deux mois et avait pour
objectif principal la conception et le développement d'une application web destinée à
améliorer la gestion interne du société IMMOLEADER. Notre mission consistait à créer une
solution logicielle intuitive et conviviale permettant de gérer les processus des projets, la
gestion des clients, etc. Notre projet a permis d'optimiser les processus internes de la société
et de faciliter la gestion administrative du projet immobilier.
Aujourd’hui il est très important d’avoir un site web pour les entreprises, les
associations et les sociétés pour automatiser et organiser certaines tâches (inscription,
payement, vente, achat…) et même pour publier ses activités vers le grand public. C’est pour
cela nous allons réaliser un projet de perfectionnement en développement web qui répond au
besoin de la société.
Notre projet a permis d’optimiser les processus internes de la société et de faciliter la
gestion administrative des projets immobiliers. La mise en œuvre a été faite en utilisant la
technologie MERN STACK qui composé de 4 technologies à savoir MongoDB, ExpressJS,
REACTJS et NODEJS.
Abstract
ABSTRACT
This report summarizes our internship project within the IMMOLEADER company as
part of our computer engineering training. Our internship lasted two months and had as its
main objective the design and development of a web application intended to improve the
internal management of the IMMOLEADER company. Our mission was to create an intuitive
and user-friendly software solution to manage project processes, customer management, etc.
Our project has made it possible to optimize the internal processes of the company and
facilitate the administrative management of the real estate project.
Today, it is very important to have a website for companies, associations, and societies
to automate and organize certain tasks (registration, payment, sale, purchase, etc.) and even
publish their activities to the public. That is why we are going to carry out an improvement
project in web development that meets the needs of society.
Our project has made it possible to optimize society's internal processes and facilitate
real estate project administrative management. The implementation was made using the
MERN STACK technology, which consists of four technologies : MongoDB, ExpressJS,
ReactJS, and NodeJS.
Introduction générale
INTRODUCTION GENERALE
La numérisation est devenue essentielle dans tous les secteurs d'activité et la fiabilité
d'un système informatique est cruciale pour la réussite d'une entreprise. Dans le cadre de mon
stage de fin d'études chez IMMOLEADER, spécialisée dans les Travaux Divers, le négoce et
l'immobilier, ma mission centrale consiste à comprendre les besoins et à trouver un modèle
efficace pour concrétiser une solution informatique adaptée. Pour répondre à cette
problématique, j'ai proposé une approche combinant les technologies web et mobile.
Solution proposée pour faire face à la problématique de la numérisation consiste à

développer une plate-forme intégrant des applications web et mobiles. Cette approche
permettra de numériser et de centraliser les processus liés à ces activités.
La réussite de notre travail dépend directement aux choix des technologies et outils adéquats à
ce projet. Pour cela nous avons choisi l’outil GitHub qui permet aux programmeurs
informatiques de collaborer librement sur des projets de code, puis pour la gestion du projet
nous avons utilisé la plate-forme Trello qui permet d’organiser le projet ou de suivre les
tâches.
Il existe une très grande variété de technologies pour le développement web. Le

développement de notre travail est basé sur la technologie MERN stack qui est un ensemble
de technologies JavaScript utilisées pour le déploiement rapide des applications web. MERN
comprend 4 technologies, MongoDB, ExpressJS, ReactJS et le serveur JavaScript NodeJS.
L'intégration de ces technologies permettra à IMMOLEADER de coordonner

efficacement ses activités, réduire les erreurs, optimiser les processus, prendre des décisions
plus rapidement et améliorer l'efficacité globale de l'entreprise.
Ce rapport présente une synthèse des activités menées tout au long de la période de
stage. Il est structuré en quatre chapitres distincts.
 Premier chapitre détails de problématique, solution proposée et la présentation

de structure d’accueil. Ils définissent l'ensemble des méthodologies.
 Deuxième chapitre détaille la phase de conception et étude préalable. Il définit
ensuite un bref aperçu sur l’ensemble des outils de travail utilisés pour la
conception.
7
Introduction générale
 Troisième chapitre met la lumière sur l’environnement de développement.
 Le dernier chapitre porte sur la réalisation du projet, et met la lumière sur

quelques fonctionnalités semblent pertinentes afin de bien cerner le travail
réalisé.
8
Table Des Matières
TABLE DES MATIERES
DEDICACES.......................................................................................................................................................... 3
REMERCIEMENTS............................................................................................................................................. 4
RESUME................................................................................................................................................................ 5
ABSTRACT........................................................................................................................................................... 6
INTRODUCTION GENERALE........................................................................................................................ 7
TABLE DES MATIERES................................................................................................................................... 9
LISTE DES ABREVIATIONS......................................................................................................................... 11
LISTE DES FIGURES....................................................................................................................................... 12
LISTE DES TABLEAUX.................................................................................................................................. 13
CADRE GENERAL DU PROJET................................................................................................................... 14
I. Introduction....................................................................................................................................................... 14
II. Structure d’accueil........................................................................................................................................... 14
III. Problématique................................................................................................................................................... 14
IV. Solution proposée............................................................................................................................................ 15
V. Gestion du projet.............................................................................................................................................. 16
VI. Conclusion.......................................................................................................................................................... 17
ETUDE PREALABLE, ANALYSE ET CONCEPTION............................................................................. 18
I. Introduction....................................................................................................................................................... 18
II. UML et Outils utilisés..................................................................................................................................... 18
1. UML.................................................................................................................................................................................... 18
2. PowerAMC...................................................................................................................................................................... 18
3. L’Architecture MVC..................................................................................................................................................... 18
III. Spécification des besoins.............................................................................................................................. 20
1. Besoins fonctionnels................................................................................................................................................... 20
2. Besoins non fonctionnels.......................................................................................................................................... 20
IV. Analyse fonctionnelle..................................................................................................................................... 21
1. Diagramme de classe.................................................................................................................................................. 21
2. Diagramme de cas d’utilisation.............................................................................................................................. 26
3. Diagramme de séquence........................................................................................................................................... 28
V. Conclusion.......................................................................................................................................................... 29
Environnement de Développement........................................................................................................ 30
I. Introduction....................................................................................................................................................... 30
Table Des Matières
II. Outils de développement.............................................................................................................................. 30

1. Cô té Client (Frontend)............................................................................................................................................... 31
2. Cô té Serveur (Backend)............................................................................................................................................. 32
III. Conclusion.......................................................................................................................................................... 34
Mise en Œuvre du Projet............................................................................................................................. 35
I. Introduction....................................................................................................................................................... 35
II. Les Tâches Réalisées...................................................................................................................................... 35
1. Cô té Client (front-end)............................................................................................................................................... 35
2. Cô té Serveur (Backend)............................................................................................................................................. 35
III. Réalisation.......................................................................................................................................................... 37
1. Coté Client (front-end)............................................................................................................................................... 37
2. Cô té Serveur (back-end)........................................................................................................................................... 48
IV. Conclusion.......................................................................................................................................................... 49
CONCLUSION GENERALE ET PERSPECTIVES.................................................................................... 50
Bibliographie.................................................................................................................................................... 51
Liste des abréviations
LISTE DES ABREVIATIONS
API : Application Programming Interface

C.N.S.S : Caisse Nationale Sécurité Social
DOM : Document Object Model
ICE : Identifiant Commun Entreprise
IF : Identification Fiscale
JS : JavaScript
JSON : JavaScript Object Notation
MCD : Modèle Conceptuel des Données
MERISE : Méthode d'Etude et de Réalisation Informatique pour les Systèmes d'Entreprise
MIT : Massachusetts Institute of Technology
MLD : Modèle Logique des Données
MPD : Modèle Physique des Données
NoSQL : Not Only SQL
R.C : Registre de Commerce
SGBD : Système de Gestion de Base de Données.
SQL : Structured Query Language
SSPL : Server Side Public License
UML : Unified Modeling Language
W3C : World Wide Web Consortium
Liste des figures
LISTE DES FIGURES
Figure 1- 1 : Logo GitHub........................................................................................................16

Figure 1- 2 : Logo Trello..........................................................................................................16
Figure 1- 3 : exemple de notre espace gestion de projet (Trello).............................................17
Figure 2- 1: Modèle MVC........................................................................................................21

Figure 2- 2 : Diagramme de classe...........................................................................................23
Figure 2- 3 : Diagramme de cas d’utilisation (use cas)............................................................28
Figure 2- 4 : Diagramme de séquence......................................................................................29
Figure 3- 1 : Logo Visual Studio Code.....................................................................................30

Figure 3- 2 : Logo MERN Stack...............................................................................................30
Figure 3- 3 : Logo ReactJS.......................................................................................................31
Figure 3- 4 : Logo TailwindCSS...............................................................................................32
Figure 3- 5 : Logo ChartJS........................................................................................................32
Figure 3- 6 : Logo MongoDB...................................................................................................33
Figure 3- 7 : Logo ExpressJS....................................................................................................33
Figure 3- 8 : Logo NodeJS........................................................................................................34
Figure 3- 9 : logo Postman........................................................................................................34
Figure 4- 1 : Page d’authentification........................................................................................37

Figure 4- 2 : Liste des projets gérés par l'utilisateur................................................................38
Figure 4- 3 : Page Dashboard....................................................................................................39
Figure 4- 4 : Page liste de tous les clients.................................................................................40
Figure 4- 5 : Page pour suppression, modification et insertion de client..................................41
Figure 4- 6 : Page liste de tous les projets................................................................................42
Figure 4- 7 : Page gestion de projet..........................................................................................43
Figure 4- 8 : Page liste des employés........................................................................................44
Figure 4- 9 : Page de gestion des employés ajouter, supprimer et modifier.............................45
Figure 4- 10 : Page liste de tous les documents........................................................................46
Figure 4- 11 : Page d’insérer, modifier et supprimer un document..........................................47
Figure 4- 12 : Page d'insertion d'une publication.....................................................................48
Figure 4- 13 : Page des collections de projet............................................................................49
Figure 4- 14 : Le résultat de l'API login en Postman................................................................49
Figure 4- 15 : Le résultat de l'API liste client en Postman.......................................................50
Figure 4- 16 : Le résultat de l'API d’ajouter client en Postman................................................50
Figure 4- 17 : Le résultat de l'API d’ajouter nouveau projet en Postman.................................51
Figure 4- 18 : Le résultat de l'API affiche la liste des projets dans Postman............................51
Figure 4- 19 : Le résultat de l'API affiche la liste des employées en Postman.........................52
Figure 4- 20 : Le résultat de l'API insertion d’employée en Postman......................................53
Liste des tableaux
LISTE DES TABLEAUX
Tableau 1- 1 : Fiche de présentation de l’entreprise :...............................................................14

Chapitre 1 : Cadre Général Du Projet
CADRE GENERAL DU PROJET
I. Introduction
Dans ce chapitre, nous allons présenter en premier lieu la société dans laquelle nous
avons effectué notre sujet de travail proposé tout en expliquant ses objectifs ainsi les
fonctionnalités nécessaires pour le réaliser.
II. Structure d’accueil
Instituée le 07 août 2013, la société IMMOLEADER est une société privée SARL à la
capitale de 100 000 DHS. Et opérant dans les domaines du secteur Travaux divers, négoces et
immobilier.
Tableau 1- 1 : Fiche de présentation de l’entreprise :
Logo de société
ICE 001418620000038
IF 14497779
R.C 10059
C.N.S.S 4655249
ADRESSE LOT MIFTAH AL-KHIER ROUTE GUELMIM - TIZNIT
III. Problématique
Le plus gros obstacle pour la société IMMOLEADER est le passage d'un système
papier traditionnel à un système numérique basé sur les nouvelles technologies et la mise à
disposition de bonnes et rapides solutions pour traiter rapidement ses projets depuis toutes ses
agences à travers le Maroc ; en créant un dossier numérique spécial pour chaque client qui
achète un bien immobilier qui comporte toutes ses informations personnelles. Gestion du
14
personnel, c'est-à-dire l'ajout de chaque employé à la plate-forme électronique. Il est

également possible d'archiver tous les documents tels que les plans architecturaux, les
contrats…
En plus de faciliter le processus de suivi de projet pour les clients en accédant à une
application mobile afin de suivre les états d'avancement des travaux et d'obtenir les dernières
nouvelles actualités, L'application fournit également un processus de chat avec la personne en
charge de la communication au sein de l'entreprise et en ajoutant chaque processus de
paiement avec l'envoi d'une copie de la preuve de paiement.
IV. Solution proposée
La solution proposée pour la société IMMOLEADER consiste à mettre en place un

système numérique complet pour faciliter la transition du papier vers le numérique et
améliorer l'efficacité de leurs processus. Voici les principales composantes de cette solution :
1. Plateforme numérique centralisée (application web) : Une plateforme en ligne sera

développée pour permettre à toutes les agences d'IMMOLEADER de gérer leurs
projets de manière centralisée. Chaque client sera attribué à un dossier numérique
contenant toutes ses informations personnelles, ce qui facilitera la gestion des projets
et la communication avec les clients.
2. Archivage électronique : Tous les documents pertinents tels que les plans
architecturaux, les contrats et autres documents liés aux projets seront numérisés et
stockés de manière sécurisée dans un système d'archivage électronique. Cela permettra
un accès facile et rapide à ces documents, tout en réduisant la dépendance aux
documents papier.
3. Application mobile pour les clients : Une application mobile sera développée pour
permettre aux clients d'accéder facilement aux informations sur l'avancement de leurs
travaux. Ils pourront suivre les étapes du projet, recevoir des notifications et
communiquer avec le responsable de la communication via un système de chat intégré.
De plus, l'application permettra aux clients d'effectuer des paiements en ligne en
fournissant une copie de la preuve de paiement.
4. Gestion du personnel : Le système numérique comprendra également la gestion des
employés, permettant d'ajouter chaque membre du personnel à la plateforme
électronique. Cela facilitera la collaboration, la communication interne et l'accès aux
informations pertinentes pour chaque employé.
15
V. Gestion du projet
Figure 1- 1 : Logo GitHub
GitHub est un service d’hébergement et de gestion de développement de logiciels, utilisant

le logiciel de gestion de versions Git. Grâce aux outils qu'elle fournit pour gérer les conflits
éventuels résultant des changements apportés par plusieurs développeurs, il est possible de
collaborer efficacement sur un même projet. Nous allons exploiter cet outil pour partager les
données en toute sécurité et faciliter le travail en équipe.
Figure 1- 2 : Logo Trello
Trello est une plateforme de gestion de projet en ligne qui permet aux individus et aux
équipes de collaborer efficacement sur des projets, des tâches et des activités. Il se distingue
par son approche visuelle et intuitive basée sur des tableaux, des listes et des cartes. Vous
pouvez créer des listes pour organiser les différentes étapes, les flux de travail ou les
catégories. Chaque liste peut contenir des cartes, qui représentent des tâches ou des éléments
spécifiques. Il est possible d'ajouter autant de colonnes à un tableau Trello que d'étapes à un
projet : "A valider", "A faire", "En cours", "A tester", "Fait"… Des tâches sont ensuite
assignées aux membres de l'équipe chargée de ce projet.
16
Figure 1- 3 : exemple de notre espace de gestion de projet (Trello)
VI. Conclusion
Dans ce chapitre nous avons présenté le contexte général du projet qui s’étale sur quatre
parties. La première décrit la problématique, seconde souligne les solutions proposées,
troisième décrit la structure d'accueil et dernière partie définit la gestion de projet.
17
Chapitre 2 : Etude Préalable, Analyse et Conception
ETUDE PREALABLE, ANALYSE ET CONCEPTION
I. Introduction
Ce chapitre a pour objectif de présenter la solution conceptuelle proposée. La

conception est décrite par un ensemble de diagrammes relevant soit du langage de
modélisation UML. Nous avons aussi cité les besoins fonctionnels et non fonctionnels qui
sont indispensables pour mieux faciliter le travail à réaliser.
II. UML et Outils utilisés
1. UML
Afin de recenser le mécanisme de travail, l’analyse amenée est basée sur l’approche
UML : Le Langage de Modélisation Unifié, est un langage de modélisation graphique à base
de pictogrammes conçu comme une méthode normalisée de visualisation dans les domaines
du développement logiciel et en conception orientée objet.
2. PowerAMC
Pour la réalisation des diagrammes de notre projet nous avons utilisé l'outil
PowerAMC qu’est l’un des premiers outils qui permet d’élaborer des modèles de données que
cela soit MERISE, UML ou autre, de manière graphique et de les implémenter quel que soit le
SGBD et ce de manière automatique. De même, l’outil permet de modéliser les processus
métiers. Le lien entre la modélisation des données et la modélisation des processus peut être
effectué. Parmi les fonctionnalités principales de PowerAMC :
 Modélisation des processus métiers

 Modélisation des données en MERISE MCD, MLD, MPD ou en UML
 Cartographie des actions et étapes des processus humains et industriels
3. L’Architecture MVC
L'architecture MVC (Modèle-Vue-Contrôleur) est un modèle de conception largement

utilisé dans le développement d'applications web, et elle s'intègre parfaitement dans le
contexte du stack MERN (MongoDB, Express.js, React.js, Node.js) que nous avons utilisé
18
pour votre projet. L'architecture MVC est conçue pour séparer clairement les responsabilités
des différentes parties d'une application, ce qui facilite la maintenance, l'évolutivité et la
collaboration entre les développeurs.
Dans le cadre de notre application web développée avec le stack MERN, l'architecture
MVC est mise en œuvre de la manière suivante :
Le Modèle (Model) est responsable de la gestion des données de l'application. Dans

notre cas, cela inclut la gestion de la base de données MongoDB et la manipulation des
données. Le Modèle représente la structure et les règles d'accès aux données, ainsi que les
opérations effectuées sur celles-ci. Il est indépendant de l'interface utilisateur et des aspects
visuels de l'application.
La Vue (View) est responsable de l'affichage des données et de l'interface utilisateur.

Avec React.js, nous utilisons des composants réactifs pour créer une interface utilisateur
dynamique et interactive. La Vue récupère les données nécessaires auprès du Modèle et les
présente de manière appropriée aux utilisateurs. Elle réagit également aux actions de
l'utilisateur, telles que les clics ou les saisies, et les transmet au Contrôleur.
Le Contrôleur (Controller) gère la logique métier de l'application et agit comme un

intermédiaire entre le Modèle et la Vue. Il reçoit les actions de l'utilisateur de la part de la
Vue, traite ces actions et met à jour le Modèle en conséquence. Il peut également interroger le
Modèle pour récupérer des données spécifiques et les transmettre à la Vue pour l'affichage.
Grâce à cette séparation claire des responsabilités, nous obtenons une application bien
structurée, facile à maintenir et à faire évoluer. Les développeurs peuvent travailler de
manière indépendante sur chaque composant de l'architecture MVC, ce qui facilite la
collaboration. De plus, en utilisant React.js, nous bénéficions d'une mise à jour automatique
de l'interface utilisateur en fonction des changements dans le Modèle, ce qui rend notre
application réactive et conviviale pour les utilisateurs.
19
Figure 2- 1: Modèle MVC
III. Spécification des besoins
1. Besoins fonctionnels
Avant la création de l'application il faut définir quelques besoins fonctionnels qui sont
généralement :
 Partie pour les administrateurs pour la gestion des projets, clients, employés et
documents.
 Parte pour la communication pour la communication entre les clients et
l’administration (chat).
 Partie pour les clients pour suivre les projets auxquels il appartient (app mobile).
2. Besoins non fonctionnels
 Ergonomie et souplesse.
 Rapidité.
 Efficacité.
20
IV. Analyse fonctionnelle
L'utilisation d'une approche basée sur les diagrammes UML permet d'améliorer
l'analyse du mécanisme de travail et des fonctionnalités du système, offrant ainsi une vision
plus claire et détaillée de son fonctionnement global.
1. Diagramme de classe
Le développement de notre plate-forme est basé sur la programmation orientée objet

(POO) avec le langage de programmation JavaScript. La POO implique la création de
nouvelles classes (objets), et dans la suite de ce document, le terme "classe" sera remplacé par
le terme "entité". Dans cette partie, nous présenterons toutes les entités créées dans ce projet à
travers un diagramme appelé "diagramme des classes" ou "diagramme des entités".
21
Figure 2- 2 : Diagramme de classe

22
Les entités créées dans ce projet sont
 User : Cette entité est caractérisée par les propriétés suivantes :
 Id user.
 Username.
 Password.
 Avatar.
Cette entité nous permet de faire la gestion des utilisateurs (inscription, authentification,
sécurité, ajout ou suppression des utilisateurs).
 Employée : Cette entité est caractérisée par les propriétés suivantes :
 Id Employée.
 Nom complet.
 CIN.
 Adresse.
 Département.
Cette entité nous permet de faire la gestion des employées (ajout, modification ou suppression
des employées).
 Publication : Cette entité est caractérisée par les propriétés suivantes :
 Id Publication.
 Description de publication.
 Date publication.
Cette entité nous permet de faire la gestion des publications (ajout, modification et
suppression).
 Images : Cette entité est caractérisée par les propriétés suivantes :
 Id image.
 Titre d’image.
Cette entité nous permet de faire la gestion des images (parcourir, mettre à jour et effacer).
 Projet : Cette entité est caractérisée par les propriétés suivantes :
 Id projet.
 Nom projet.
 Date création de projet.
 Adresse de projet.
 Etats projet.
23
 Nombre de pièces de projet.
Cette entité nous permet de gérer les projets (ajouter, mettre à jour et effacer).
 Villa : Cette entité est caractérisée par les propriétés suivantes :
 Id Villa.
 Superficie de villa.
 Numéro de villa.
 Prix.
 Nombre chambre.
 Nombre de cuisine.
 Nombre de salon.
 Nombre de salle de bain.
Cette entité Villa est extends dans la super classe projet nous permet de faire la gestion des
villa (parcourir, mise à jour et effacer).
 Appartement : Cette entité est caractérisée par les propriétés suivantes :
 Id Appartement.
 Superficie d’appartement.
 Numéro d’appartement.
 Prix.
 N° étage.
 Etats d’appartement.
 Nombre de chambres.
 Nombre de cuisines.
 Nombre de salons.
 Nombre de salles de bain.
Cette entité Appartement est extends dans la super classe projet nous permet de faire la
gestion des villa (parcourir, mise à jour et effacer).
 Terrain : Cette entité est caractérisée par les propriétés suivantes :
 Id Terrain.
 Superficie de Terrain.
 Numéro de Terrain.
 Prix.
 Type de terrain.
 Etats du terrain.
 Nombre de faces.
Cette entité Terrain est extends dans la super classe projet nous permet de faire la gestion des
villa (parcourir, mise à jour et effacer).
 Documents : Cette entité est caractérisée par les propriétés suivantes :
24
 Id Document.
 Titre de document.
 Date d’ajout du document.
Cette entité nous permet de gérer les documents de chaque projet (upload des documents,
mise à jour et effacer).
 Catégorie : Cette entité est caractérisée par les propriétés suivantes :
 Id Catégorie.
 Titre de Catégorie.
Cette entité nous permet de gérer le Catégorie de chaque document (Ajouter, mise à jour et
effacer).
 Client : Cette entité est caractérisée par les propriétés suivantes :
 Id Client.
 Nom complet.
 CIN.
 N° téléphone.
 Adresse électronique.
 Adresse.
 Username.
 Password.
 Image .
Cette entité nous permet de faire la gestion des clients (inscription, authentification, sécurités,
ajout ou suppression des clients).
 Chat : Cette entité est caractérisée par les propriétés suivantes :
 Id Chat.
 Date chat.
 Message.
Cette entité nous permet de faire la gestion des chats entre le client et le gestionnaire des
projets (envoyer message, recevoir message).
25
2. Diagramme de cas d’utilisation
Maintenant dans cette partie nous allons préciser les types d’utilisateurs pour cette
plate-forme.
Selon le cahier de charge proposé par l’encadrant nous avons distingué principalement
trois types d’utilisateurs.
 Administrateur : c’est l’administrateur de l’application qui a l’accès à faire

tous types de gestion.
 User : accès à faire tous types de gestion sauf gestion des projets et des
employés.
 Client : accès à faire la suivre des projets qui l’achètent et aussi consulter les
publication…
Le diagramme suivant explique les accès autorisés pour chaque type d’utilisateur
(Administrateur, utilisateur et client) :
26
Figure 2- 3 : Diagramme de cas d’utilisation (use cas)
27
3. Diagramme de séquence
28
Figure 2- 4 : Diagramme de séquence
29
V. Conclusion
Nous avons essayé dans ce chapitre de faire une conception claire afin de rendre notre
application réalisable, puis nous avons bien spécifié les besoins fonctionnels et non
fonctionnels qui sont indispensables pour mieux faciliter le travail à réaliser.
30
Chapitre 3 : Environnement de Développement
ENVIRONNEMENT DE DÉVELOPPEMENT
I. Introduction
Il existe une très grande variété de technologies pour le développement web. Pour cela
nous mettons en évidence dans ce chapitre l’environnement du travail utilisé autour du
développement de ce projet.
II. Outils de développement
Figure 3- 1 : Logo Visual Studio Code
Visual Studio Code est un éditeur de code facile à prendre en main, gratuit et développé en
open source par Microsoft. Il prend en charge plusieurs centaines de langages de
programmation et propose un environnement de développement intégré disposant d’outils
permettant de traiter des projets techniques, comme l’édition et le débogage. C’est un éditeur
très puissant et recommandé par les développeurs de web.
Figure 3- 2 : Logo MERN Stack
31
MERN STACK est une pile logicielle qui comprend quatre technologies open source :
(MongoDB, Express.js, React.js et Node.js). Ces composants fournissent un cadre de bout en
bout pour la création de sites Web et d’applications Web dynamiques. Parmi ces technologies,
MongoDB est un système de base de données, Node.js est un environnement d'exécution côté
serveur, Express.js est un Framework Web pour Node.js et React.js est une bibliothèque
JavaScript côté client utilisée pour créer des interfaces utilisateur.
1. Côté Client (Frontend)
Figure 3- 3 : Logo ReactJS
React (également connu sous le nom de React.js ou ReactJS) est une bibliothèque JavaScript
frontale gratuite et open source pour la création d'interfaces utilisateur basées sur des
composants d'interface utilisateur. Il est maintenu par Meta (Anciennement Facebook) et une
communauté de développeurs individuels et d'entreprises. React peut être utilisé comme base
dans le développement d'applications mono-page ou mobiles. Cependant, React ne concerne
que la gestion de l'état et le rendu de cet état au DOM, donc la création d'applications React
nécessite généralement l'utilisation de bibliothèques supplémentaires pour le routage, ainsi
que certaines fonctionnalités côté client.
32
Figure 3- 4 : Logo TailwindCSS
TailwindCSS est un Framework permet aux développeurs de personnaliser totalement et

simplement le design de leur application ou de leur site web. Avec ce Framework CSS, il est
possible de créer un design d’interface au sein même du fichier HTML. Cette façon de
programmer n’interfère pas avec les pratiques recommandées par le W3C comme celle de
séparer le HTML des feuilles de style CSS.
Figure 3- 5 : Logo ChartJS
Chart.js, la bibliothèque JavaScript de représentation des données sous forme de graphes

statistiques vient d’être publiée sur le site officiel de son créateur Nick Downie.
2. Côté Serveur (Backend)
33
Figure 3- 6 : Logo MongoDB
MongoDB est un programme de base de données multiplate-forme orienté document

disponible en source. Classé comme programme de base de données NoSQL, MongoDB
utilise des documents de type JSON avec des schémas facultatifs. MongoDB est développé
par MongoDB Inc. et la licence publique côté serveur (SSPL). MongoDB est disponible en
tant que service entièrement géré à la demande.
Figure 3- 7 : Logo ExpressJS
Express.js, ou simplement Express, est un Framework d'application Web back-end pour

Node.js, publié en tant que logiciel gratuit et open source sous la licence MIT. Il est conçu
pour créer des applications Web et des API. Il a été appelé le cadre de serveur standard de
facto pour Node.js. L’auteur original, TJ Holowaychuk, l’a décrit comme un serveur inspiré
de Sinatra, ce qui signifie qu’il est relativement minimal avec de nombreuses fonctionnalités
disponibles sous forme de plugins. Express est le composant backend des piles de
développement populaires comme la pile MEAN, MERN ou MEVN, avec le logiciel de base
de données MongoDB et un Framework ou une bibliothèque JavaScript frontale.
34
Figure 3- 8 : Logo NodeJS
Node.js est un environnement d’exécution du langage JavaScript hors d’un navigateur web,
possédant quelques spécificités supplémentaires. Un serveur Node est donc simplement une
application en JavaScript côté serveur.
Figure 3- 9 : logo Postman
Postman est l’un des outils de test logiciel les plus populaires qui est utilisé pour les tests
d’API. À l’aide de cet outil, les développeurs peuvent facilement créer, tester, partager et
documenter les API.
III. Conclusion
Nous avons essayé dans ce chapitre de bien spécifier les besoins techniques
nécessaires pour le développement de ce projet. La prochaine étape de la réalisation du projet
repose totalement sur le travail effectué jusqu’à ici.
35
Chapitre 4 : Mise En Œuvre Du Projet
MISE EN ŒUVRE DU PROJET
I. Introduction
Après avoir placé notre projet dans son cadre général, une étape indispensable
serait de présenter l’environnement sur lequel se base l’application. Dans ce chapitre,
nous allons présenter les tâches et les étapes que nous avons suivies pour créer notre
application.
II. Les Tâches Réalisées
1. Côté Client (front-end)
Pour les tâches du côté front-end de notre application, nous avons réalisé les
pages suivantes :
 La page d’authentification.
 La page d’accueil qui contient la liste des projets.
 La page Dashboard.
 La page qui contient la liste des clients.
 La gestion des clients (pour ajouter, modifier ou supprimer des clients).
 La page qui contient la liste des projets.
 La gestion des projets (pour ajouter, modifier ou supprimer des projets).
 La page qui contient la liste des employés.
 La gestion des employées (pour ajouter, modifier ou supprimer des
employées).
 La page qui contient la liste des documents.
 La gestion des documents (pour ajouter, modifier ou supprimer des
documents).
 La gestion des publications (pour ajouter, modifier ou supprimer des
publications).
36
2. Côté Serveur (Backend)
Pour les tâches du côté backend de notre application, nous avons réalisé :
 Création base de données sur MongoDB Atlas.
 Cree les collections :
«user», «clients », « projets», «appartement», «villas», «terrain», «employées»,
«publications» , «Document».
 La page authentification : Une fois que l'utilisateur est connecté à l'application,
nous allons stocker le jeton (token) dans le stockage local (local Storage) pour
gérer les cookies.
 La liste des clients : Affichez tous les clients qui sont déjà inscrits dans la base
de données et qui ont été associés à un projet spécifique. Nous utiliserons le
package Axios. Celui-ci est responsable de la liaison entre le backend et le
frontend dans ReactJS.
 Ajouter nouveau client : pour insérer les nouveaux clients (nouveau document
sur MongoDB), modifier et supprimer dans la base donnée.
 Ajouter un nouveau projet : sur cette page, nous allons insérer le projet dans la
collection "projets" ainsi que dans la collection "étendue" en fonction du type
de projet. Par exemple, si nous insérons un projet de type 'Villa', il devrait
automatiquement ajouter un champ 'utilisateur' dans la collection "projets"
contenant l'ID de l'utilisateur responsable de la gestion du projet. De plus,
dans la collection "Villa", un champ "client" devrait être ajouté pour
enregistrer l'acheteur de la villa.
 Page de liste des projets : Pour obtenir toutes les données des projets (logo et
nom du projet).
 Liste des employées : affiche toutes les employées de société avec le
département de chaque employée.
37
 Ajouter employés : Pour insérer, modifier et supprimer des nouveaux employés

dans la base de données, tout en leur permettant de devenir des utilisateurs.
III. Réalisation
1. Coté Client (front-end)

 Authentification :
Figure 4- 1 : Page d’authentification
Notre page de connexion offre une interface conviviale et sécurisée pour

accéder à notre application web. Avec un design moderne et des champs de saisie
clairement indiqués, les utilisateurs peuvent facilement entrer leurs identifiants et se
connecter.
38
 Liste des projets :
Figure 4- 2 : Liste des projets gérés par l'utilisateur
Dans la page d'accueil, vous trouverez une liste bien organisée des projets en
cours. Chaque projet est accompagné d'une image représentative et d'un nom. Cette
vue d'ensemble permet de suivre facilement vos projets et de naviguer facilement à
travers la liste pour découvrir les détails importants de chaque projet.
39
 Dashboard :
Figure 4- 3 : Page Dashboard
Cette page centrale offre une visualisation claire et concise des données
essentielles d'un projet. Grâce à des graphiques interactifs, des indicateurs clés et des
tableaux de bord.
40
 Liste des clients :
Figure 4- 4 : Page liste de tous les clients
Cette page représente la liste des clients. Vous trouverez une vue claire et
organisée de chaque client, comprenant une image représentative, leur nom et le
numéro d’appartement (ou de villa). Cette interface conviviale permet de visualiser
rapidement les informations essentielles de chaque client. De plus, nous avons inclus
deux boutons d'action pour faciliter la communication et la gestion des clients. Le
bouton 'Discuter' vous permet d'engager une conversation directe avec le client, vous
permettant de répondre rapidement à leurs questions ou de discuter de leurs besoins.
Le bouton 'Se Retirer' vous permet de retirer le client de la liste.
41
 Ajouter nouveau client :
Figure 4- 5 : Page pour suppression, modification et insertion de client
La page de gestion des clients offre une gamme complète d'outils pour faciliter
la suppression, la modification et l'insertion de clients. Cette interface conviviale vous
permet de prendre le contrôle total de votre base de clients. Vous pouvez facilement
supprimer les clients dont la transaction est terminée. La fonction de modification
vous permet d'apporter des mises à jour aux informations des clients, telles que les
coordonnées ou toute autre donnée pertinente. De plus, une fonction d'insertion permet
d'ajouter de nouveaux clients à la liste.
42
 Liste des projets :
Figure 4- 6 : Page liste de tous les projets
Cette page représente la liste des projets, cette interface est un guichet unique
pour explorer et gérer l'ensemble des projets. Cette interface claire et organisée offre
une vue d'ensemble complète de tous les projets en cours. Chaque projet est présenté
avec une image et son nom pour une identification rapide.
43
 Ajouter nouveau projet :
Figure 4- 7 : Page gestion de projet
Notre page de gestion des projets offre une flexibilité totale pour la
suppression, la modification et l'insertion de projets. Cette interface conviviale permet
aux utilisateurs de gérer efficacement leur portefeuille de projets. Ils peuvent
facilement supprimer les projets. La fonction de modification permet de mettre à jour
les détails du projet tels que le nom, le type, la date ou toute autre information
essentielle. De plus, la fonction d'insertion permet d'ajouter de nouveaux projets à la
liste.
44
 Liste des employées :
Figure 4- 8 : Page liste des employés
Cette page représente la liste des employés et offre une vue complète de tous
les membres d’équipe. Chaque employé est présenté avec une image professionnelle,
son nom et sa mission au sein de l'entreprise. Cette interface soigneusement conçue
vous permet de connaître rapidement les membres clés d’équipe et leurs
responsabilités.
45
 Ajouter nouvelle employée :
Figure 4- 9 : Page de gestion des employés ajouter, supprimer et modifier
La page de gestion des employés donne le contrôle total sur la composition

d'équipe. Cette interface puissante et conviviale permet d'ajouter, de supprimer et de
modifier les informations des employés en toute simplicité. Les utilisateurs peuvent
facilement ajouter de nouveaux membres à l'équipe en fournissant leurs informations
personnelles, leurs compétences et leur mission au sein de l'entreprise. De même, si un
employé quitte l'entreprise ou change de rôle, Les utilisateurs peuvent le supprimer de
la liste pour maintenir une base de données à jour. De plus, la fonction de modification
permet d'apporter des ajustements aux informations des employés existants, telles que
les coordonnées, les titres ou toute autre donnée pertinente.
46
 Liste de documents :
Figure 4- 10 : Page liste de tous les documents
Notre page de liste des documents est la référence centrale pour accéder à tous
les fichiers importants et documents essentiels d'un projet. Cette interface organisée
permet de visualiser facilement la liste complète des documents disponibles. Chaque
document est accompagné d'une description concise, vous permettant de comprendre
rapidement son contenu. Que ce soient des contrats, des plans téléphoniques, des plans
voiries ou d'autres types de documents, notre page offre une vue d'ensemble complète.
Vous pouvez naviguer à travers la liste, effectuer des recherches pour trouver un
document spécifique et accéder rapidement à son contenu.
47
 Ajouter nouveau document :
Figure 4- 11 : Page d’insérer, modifier et supprimer un document
La page de gestion des documents offre un contrôle complet des documents,

permettant une insertion, une modification et une suppression faciles des documents.
Cette interface conviviale permet d'ajouter de nouveaux documents à la collection en
fournissant des informations pertinentes telles que le titre et le document lui-même.
Les détails des documents existants tels que les mots clés ou toute autre information
pertinente peuvent également être modifiés. Si le document est devenu obsolète ou
n'est plus nécessaire, il peut être supprimé en un clic, garantissant ainsi une
organisation efficace des documents.
48
 Ajoute nouveau publication :
Figure 4- 12 : Page d'insertion d'une publication
La page d'insertion de publication offre la possibilité de créer et de partager du

contenu de manière percutante. Grâce à cette interface conviviale, une publication peut
facilement être insérée avec une description détaillée et une photo captivante. La
description permet d'exprimer les nouveautés d'un projet ou une annonce de manière
claire et précise, en transmettant efficacement le message. L'image choisie pour
accompagner la publication ajoute une forte dimension visuelle, valorisant le contenu
de la publication.
49
2. Côté Serveur (back-end)
 Collections de projet :
Figure 4- 13 : Page des collections de projet
 Login en Postman :
Figure 4- 14 : Le résultat de l'API login en Postman
50
 Liste client en Postman :
Figure 4- 15 : Le résultat de l'API liste client en Postman
 Liste client en Postman :
Figure 4- 16 : Le résultat de l'API d’ajouter client en Postman
 Ajout d’un nouveau projet en Postman :
51
Figure 4- 17 : Le résultat de l'API d’ajouter nouveau projet en Postman
 La liste des projets dans Postman :
Figure 4- 18 : Le résultat de l'API affiche la liste des projets dans Postman
52
 La liste des employées en Postman :
Figure 4- 19 : Le résultat de l'API affiche la liste des employées en Postman
 L’insertion d’un nouvel employé en Postman :
Figure 4- 20 : Le résultat de l'API insertion d’employée en Postman
53
IV. Conclusion
Dans ce chapitre nous avons essayé de réaliser la plate-forme «

IMMOLEADER DIGITAL » tout en répondant aux besoins d'utilisateurs. Nous avons
essayé à chaque fois de rendre notre plate-forme simple à manipuler pour l'utilisateur
en effet : l’authentification, la gestion des projets, des clients, et des documents sont
assez simples. Nous avons essayé aussi de fournir un affichage bien organisé et clair
pour notre utilisateur. La réalisation de cette application prend un peu de temps car
nous avons rencontré plusieurs problèmes et des difficultés à l'environnement de
travail puisqu’il s'agit de la première fois qu'on utilise ces outils.
54
Conclusion Générale et Perspectives
CONCLUSION GENERALE ET PERSPECTIVES
Les anciennes méthodes utilisées pour la gestion des grands événements sont très
fatigantes et consomment beaucoup d'énergie et de temps ce qui pousse les sociétés et les
entreprises à demander des solutions.
Sous ces besoins et en profitant de ce stage au sein de la société « IMMOLEADER »

nous avons essayé nous les stagiaires de développer un site web intitulé « IMMOLEADER »
pour la gestion des évènements et qui répond aux besoins des utilisateurs.
La réalisation de ce projet a été passée par des étapes structurées et bien étudiées.
Au début on a commencé par la spécification des outils logiciels nécessaires pour ce

projet.
Le choix de ces outils a été bien étudié. Nous avons choisi ceux qui facilitent la
réalisation de ce projet et rendent notre travail un peu plus simple.
Ensuite sous la direction de l'encadrant nous avons préparé une conception bien
structurée de la plate-forme (IMMOLEADER) tout en tenant compte des besoins de
l'utilisateur.
Et enfin cette expérience nous a énormément aidés sur le côté technique, en effet nous
avons appris de nouvelles compétences comme le développement web avec Le MERN Stack.
Pour conclure, ce stage nous ouvrit la porte vers la vie professionnelle et nous permit
de connaître ce qu’est réellement le métier d’un développeur.
55
Bibliographie
BIBLIOGRAPHIE
 Documentation | Node.js (nodejs.org) : Nodejs Documentation

 MongoDB Atlas | Multi-cloud Developer Data Platform | MongoDB : could
mongoDB atlas
 Download MongoDB Community Server | MongoDB
 Express routing (expressjs.com)
 npm (npmjs.com)
 Quick Start – React : ReactJS Documentation
 Documentation - Tailwind UI : TaillwindCss Documentation
 Tutorial NodeJS avec MongoDB
 Tutorial ReactJS
 ChatGPT
 Stackoverflow
 JavaScript Charting Library
 Les définitions
 Diagramme de séquence — Wikipédia (wikipedia.org)
 IBM Documentation(diagramme des classes)
 Multer: Easily upload files with Node.js and Express - LogRocket Blog
 JSON Web Tokens (auth0.com)
 Getting Started | Axios Docs (axios-http.com)
 (4847) Uploading Images with ReactJs, Nodejs, ExpressJs, Mongodb || Image Upload
With Multer #react #mern - YouTube
 (4847) ‫ تعلم‬MERN ‫ في ساعة واحدة‬- YouTube
 How to upload and store images in mongoDB database ? - YouTube
 (4848) The Net Ninja - YouTube
56

Rapport de Stage

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport de Stage

Transféré par

Droits d'auteur :

Formats disponibles

Département

En vue de l’obtention du diplôme Licence Professionnelle

LA CREATION D'UNE APPLICATION WEB POUR LA

Année Universitaire 2022- 2023

Avec l’expression de ma reconnaissance, je dédie ce modeste travail à ceux qui, quels

Nous tenons à remercier vivement M. Rachid Ramzi, directeur de la société

Ce rapport résume notre projet de stage au sein de l'entreprise IMMOLEADER, dans

Solution proposée pour faire face à la problématique de la numérisation consiste à

Il existe une très grande variété de technologies pour le développement web. Le

L'intégration de ces technologies permettra à IMMOLEADER de coordonner

 Premier chapitre détails de problématique, solution proposée et la présentation

 Troisième chapitre met la lumière sur l’environnement de développement.

 Le dernier chapitre porte sur la réalisation du projet, et met la lumière sur

TABLE DES MATIERES

II. Outils de développement.............................................................................................................................. 30

LISTE DES ABREVIATIONS

API : Application Programming Interface

LISTE DES FIGURES

Figure 1- 1 : Logo GitHub........................................................................................................16

Figure 2- 1: Modèle MVC........................................................................................................21

Figure 3- 1 : Logo Visual Studio Code.....................................................................................30

Figure 4- 1 : Page d’authentification........................................................................................37

LISTE DES TABLEAUX

Tableau 1- 1 : Fiche de présentation de l’entreprise :...............................................................14

CADRE GENERAL DU PROJET

II. Structure d’accueil

Tableau 1- 1 : Fiche de présentation de l’entreprise :

personnel, c'est-à-dire l'ajout de chaque employé à la plate-forme électronique. Il est

IV. Solution proposée

La solution proposée pour la société IMMOLEADER consiste à mettre en place un

1. Plateforme numérique centralisée (application web) : Une plateforme en ligne sera

Figure 1- 1 : Logo GitHub

GitHub est un service d’hébergement et de gestion de développement de logiciels, utilisant

Figure 1- 2 : Logo Trello

Figure 1- 3 : exemple de notre espace de gestion de projet (Trello)

ETUDE PREALABLE, ANALYSE ET CONCEPTION

Ce chapitre a pour objectif de présenter la solution conceptuelle proposée. La

II. UML et Outils utilisés

 Modélisation des processus métiers

L'architecture MVC (Modèle-Vue-Contrôleur) est un modèle de conception largement

Le Modèle (Model) est responsable de la gestion des données de l'application. Dans

La Vue (View) est responsable de l'affichage des données et de l'interface utilisateur.

Le Contrôleur (Controller) gère la logique métier de l'application et agit comme un

Figure 2- 1: Modèle MVC

III. Spécification des besoins

2. Besoins non fonctionnels

IV. Analyse fonctionnelle

Le développement de notre plate-forme est basé sur la programmation orientée objet

Figure 2- 2 : Diagramme de classe

Les entités créées dans ce projet sont

 User : Cette entité est caractérisée par les propriétés suivantes :

 Employée : Cette entité est caractérisée par les propriétés suivantes :

 Publication : Cette entité est caractérisée par les propriétés suivantes :

 Images : Cette entité est caractérisée par les propriétés suivantes :

 Projet : Cette entité est caractérisée par les propriétés suivantes :

 Nombre de pièces de projet.

 Villa : Cette entité est caractérisée par les propriétés suivantes :

 Appartement : Cette entité est caractérisée par les propriétés suivantes :

 Terrain : Cette entité est caractérisée par les propriétés suivantes :

 Documents : Cette entité est caractérisée par les propriétés suivantes :

 Catégorie : Cette entité est caractérisée par les propriétés suivantes :

 Client : Cette entité est caractérisée par les propriétés suivantes :

 Chat : Cette entité est caractérisée par les propriétés suivantes :

2. Diagramme de cas d’utilisation