Rapport d’activité en entreprise

Master 1 : Méthodes informatiques appliquées à la gestion des entreprises. Parcours :

Valorisation et protection des données de l'entreprise

Année universitaire 2021-2022

Réalisation d`une application web pour la gestion interne de la société STIS.

Société STIS

Présenté Par : Encadré Par :

Mouna Mabrouk Mr. Ilyes SGHIR, Maitre d’apprentissage
Mr. Rachid YAOU, Tuteur enseignant
 🙥🙧
Résumé
🙤🙦

Au début de cette année universitaire, j’ai signé un contrat d’apprentissage avec

STIS. Cette dernière est une société par actions simplifiée, spécialisée dans le secteur
d'activité des travaux d'étanchéification. Elle a été crée en 2015, et depuis sa création, ses
employés utilisent uniquement les fichiers Excel pour exécuter la plupart de leurs tâches
comme la création des bons de commande, le calcul des dépenses par chantier, par mois
et par employé, la comparaison des dépenses prévision avec les dépenses réelles, etc.
L’absence d’un outil informatique leur a causé beaucoup de problèmes tels que la perte
de donnés (fichier Excel et supports papier), accès non sécurisé aux informations
sensibles de la société, multiplication des supports papiers, des difficultés au niveau de la
recherche d’une donnée spécifique, le problème de traçabilité, etc.

Etant développeuse web à la société STIS ma mission était donc de réaliser une
application web qui va automatiser une certaine tâche des employés. Cette dernière va
englober le maximum possible des fonctionnalités et offre à la société un espace de
gestion et de stockage des données. J’ai commencé la réalisation de cette application
toute seule sous l’encadrement de mon directeur Mr. Rachid YAOU. J’ai fait la
conception avec Merise et UML, le cahier des charger et j’ai réussi à faire la première
version de l’application avec Laravel en suivant l’architecture MVC.

Après quelques mois, on a décidé de recruter deux freelancers, le premier va tout

refaire le frontend de l’application (le design) et le deuxième Freelancer va compléter
cette partie par du Javascript ainsi qu’il va m’aider dans tous ce qui concerne la sécurité
et l’hébergement de cette application web.

Mots-clés : Application web ; Développeuse full stuck ; Frontend ; Javascript ;

Backend ; Laravel ; MVC ; Cahier des charges ; Conception ; UML.

2
 🙥🙧
Summary
🙤🙦

At the beginning of this academic year, I signed an apprenticeship contract with

STIS. The latter is a simplified joint stock company, specializing in the waterproofing
work sector. It was created in 2015, and since its inception, its employees have been
using only Excel files to perform most of their tasks such as creating purchase orders,
calculating expenses per job site, per month and per employee, comparing forecasted
expenses with actual expenses, etc. The absence of an IT tool has caused them many
problems such as loss of data (Excel file and paper supports), unsecured access to
sensitive company information, multiplication of paper supports, difficulties in searching
for a specific data, traceability problem, etc.

As a web developer at STIS my mission was to create a web application that will
automate a certain task of the employees. This last one will include the maximum
possible functionalities and will offer to the company a space of management and storage
of the data. I started the realization of this application all alone under the supervision of
my director Mr. Rachid YAOU. I did the design with Merise and UML, the specifications
and I managed to make the first version of the application with Laravel following the
MVC architecture.

After a few months, we decided to hire two freelancers, the first one will redo the
frontend of the application (the design) and the second freelancer will complete this part
with Javascript as well as he will help me in all that concerns the security and the hosting
of this web application.

Keywords: Web application; Full-stack developer; Frontend; Javascript; Backend;

Laravel; MVC; Specification; Design; UML.

3
 🙥🙧
Dédicace
🙤🙦

A NOS DEUX PLUS CHERS ETRES

Nos parents, qui nous ont accordé toute l’aide et le soutien voulu, qui nous ont
garanti un amour que nul n’oublie et nous ont guidé avec leurs conseils intangibles dans la
conception de notre personnalité.

A NOS FRERES

Auxquels nous devons, du fond du cœur, une profonde gratitude, de nous avoir encouragé
et nous avoir tendu mains fortes.

A TOUS NOS AMIS

Avec lesquels nous avons formé une équipe solide, efficace et particulièrement liée par une
amitié confiante que nous n’aurions garde d’oublier.

A TOUS NOS PROFESSEURS

A qui nous devons tout respect et hommage d’avoir contribué à notre solide formation.

4
 🙥🙧
Remerciement
🙤🙦

Avant tout développement sur ce projet d’alternance, il apparait opportun de commencer

ce rapport par des remerciements : En préambule à ce rapport je remercie Dieu qui m’a
aidé et m’a donné la patience et le courage durant ces deux années d’études et durant ce
stage. Je remercie aussi tous ceux qui m’ont beaucoup appris au cours de ce Projet, à ceux
qui savent partager leur savoir-faire et à ceux qui ont eu la gentillesse de faire du
déroulement de ce travail un moment très profitable :

Mes encadrants Mr Ilyes SGHIR, Mr Rachid YAOU et Mme Alida EYANG EYEGHE :

Qui m’ont permis de bénéficier de leurs encadrements, les conseils qu'ils m'ont prodigués,
la patience, la confiance qu’ils m’ont témoignée ont été déterminant dans la réalisation de
mon travail.

Tout le corps professoral d’université de Paris Cité :

Je vous remercie vivement, de vos efforts considérables, vos conseils qui m’ont prodigué
tout au long de cette année afin de garantir une formation de qualité.

Je remercie par ailleurs mon entourage, plus particulièrement mes amis Pour les
informations précieuses qu’ils m’ont données, ils m’ont ainsi permis de poursuivre ce
projet dans les meilleures conditions.

5
 🙥🙧
Table des matières
🙤🙦

Introduction générale.................................................................................................................................... 8
Partie I : Présentation de l’entreprise d’accueil STIS..................................................................................... 9
Introduction ........................................................................................................................ 10
I- Description de l’entreprise STIS .................................................................................. 10
II- L’organigramme du personnel d’STIS ......................................................................... 11
III-Les principaux services ................................................................................................... 11
1- Étanchéité ....................................................................................................... 11
2- Bardage ........................................................................................................... 11
3- Voirie légères .................................................................................................. 12
4- Bureau d’études.............................................................................................. 12
II- La culture de l’entreprise ............................................................................................ 12
III- Intégration dans l’entreprise ...................................................................................... 12
Conclusion........................................................................................................................... 13
Partie II : Cahier des charges ....................................................................................................................... 14
Introduction ........................................................................................................................ 15
I- Présentation................................................................................................................ 15
II- Problématique ............................................................................................................ 15
III- Les objectifs ................................................................................................................ 16
IV- Diagramme de Gantt .................................................................................................. 16
V- Les outils et langages utilisés ...................................................................................... 17
1- Environnement technique ................................................................................ 18
2-Environnement logiciel ........................................................................................ 19
Conclusion........................................................................................................................... 20
Partie III : Analyse et Conception ................................................................................................................ 21
I- UML............................................................................................................................. 22
1- Présentation d’UML ........................................................................................ 22
3- Diagramme de cas d’utilisation....................................................................... 23

6
 4- Diagramme de séquence : .............................................................................. 24
Conclusion........................................................................................................................... 25
Partie IV : Réalisation .................................................................................................................................. 26
Introduction ........................................................................................................................ 27
I- La partie administrateur ............................................................................................. 27
1- La page d’authentification .............................................................................. 27
2- La page du Dashboard .................................................................................... 28
4- La gestion des fournisseurs............................................................................. 31
5- La gestion des chantiers.................................................................................. 34
5- La gestion des bons de commande................................................................. 40
6- Dépenses salariés............................................................................................ 41
7- Autres fonctionnalités .................................................................................... 43
Conclusion........................................................................................................................... 45
Conclusion générale .................................................................................................................................... 46
Liste des figures ........................................................................................................................................... 47
Bibliographie................................................................................................................................................ 48

7
 🙥🙧

Introduction générale
🙤🙦

La société STIS est une entreprise créée en 2015 qui est spécialisée dans les travaux de
l’enveloppe du bâtiment et des ouvrages de génie civil. STIS intervient essentiellement sur des
ouvrages publics. L’entreprise a notamment réalisé l’enveloppe de : Parking aérien en super
structure, Parkings souterrains en infrastructure, Gymnases, Musée, Immeubles d’OPHLM,
Collèges / lycées, Théâtres.

Mon contrat d’apprentissage actuel s’inscrit dans le cadre d’un projet nommé « STIS-INTRANET
», ce dernier doit être lancé par cette société dans la future proche, et vise essentiellement à la
création d’une applicationweb qui sera disponible sur le nom de domaine stis-intranet.fr

En vue que cette entreprise souffre du mal gestion de ses employés et chantiers. Ils m’ont attribué
ce projet sous forme d'une application web dynamique pour la gestion fiable et le suivie efficace de
ces activités internes et externes. La réalisation de cette application doit être sous l’encadrement du
directeur de la société.

Cette alternance représente l’un des stade les plus important pour obtenir mon master en Méthodes
Informatiques Appliqués à la Gestion des Entreprises (MIAGE), en effet, cette expérience
professionnelle m’a donné l’occasion de mettre en pratique les connaissances théoriques par
l’implémentation de ce projet.

Le plan adopté pour présenter ce mémoire de fin d’étude est comme suit :

❖ Partie I : La présentation de la société d’accueil STIS, son historique, sa mission, ses

objectifs et ses projets essentiels.
❖ Partie II : Le cahier des charges, dans lequel nous allons présenter le contexte général
de notre cas d’étude, la problématique relevées, les objectifs fixés et les outils et langages
utilisés pour réaliser ce projet.
❖ Partie III : La phase d’analyse et de conception dont on présentera tous les modèles
conceptuels élaborés.
❖ Partie IV : La réalisation avec les différentes captures d’écran qui simulent
l’application et aussi la plateforme.

8
 🙥🙧

Partie I : Présentation de l’entreprise d’accueil

STIS
🙤🙦

9
Introduction
Dans cette partie nous allons vous présenter l’entreprise dans lequel nous avons effectué
notre stage de fin d’étude, qui est L’entreprise STIS, notamment : Une petite présentation
sur elle, Son organigramme, ses services, sa culture, et finalement mon intégration dans
cette entreprise.

I- Description de l’entreprise STIS

La société STIS (Société de Travaux d’Isolation) créée en 2015 est une SAS

(Société par action simplifiée). Le principal bureau est localisé au 261 rue

Edouard Branly à Camon, dans la Zone d’activités (Z.A.C.) de Blanche

Tâche tandis que le siège social est localisé à St-Paul.

Un troisième établissement est situé à Saint-Denis, en région parisienne.

Figure 1: Logo STIS
« La société STIS intervient dans le domaine de l’enveloppe du bâtiment par

La réalisation d’ouvrage en étanchéité, isolation et bardage. Elle possède son propre bureau

d’études. STIS maîtrise toutes les techniques ce qui lui permet d’intervenir sur les ouvrages

traditionnels, les ouvrages de génie civil, les ouvrages classés Monument Historique ainsi

que sur les ouvrages ayant des contraintes techniques poussées en termes de corrosion,

d’hygrométrie et d’acoustique.

Pour ses travaux, STIS se déplace principalement sur les départements de la Somme, l’Oise,

le Val-d’Oise et la Seine-Saint-Denis. Elle peut aussi se déplacer en dehors de ces

départements dans les zones à proximité. C’est le cas des Hauts-de-Seine (92) par exemple,

en région parisienne.

Figure 2: Les départements couverts par STIS

10
 II- L’organigramme du personnel d’STIS
Le personnel de STIS se présente sous la forme suivante :

Figure 3: Organigramme du personnel STIS

La société STIS entretient à travers son activité une certaine culture d’entreprise, ce dont

nous allons aborder par la suite.

III-Les principaux services

1- Étanchéité
STIS est capable de faire de l’étanchéité traditionnelle quel que soit en neuf ou en réhabilitation,

sur des chantiers de constructions et de génie civil.

2- Bardage
STIS réalise tous travaux de bardage et ITE ( Isolation Thermique par l’Extérieur ) tel que :

• la réalisation de bardage en bois, en fibrociment

• l’isolation rapportée

• l’enduit minéral sur isolant

11
 3- Voirie légères
STIS réalise des différents ouvrages tels que :

• les voiries, les rues piétonnes et commerçantes

• les pistes cyclables, les voies de bus et de tramways

• les parkings, les places, les parcs sportifs et des loisirs

• les plates-formes industrielles et commerciales, etc.

4- Bureau d’études

Le bureau d’études d’STIS a été créé par leur ingénieurs du BTP afin d’effectuer des diagnostics.

STIS est capable d’inspecter tous types d’ouvrages et d’accompagner ses clients tout au long de

leur projet depuis l’étude de faisabilité jusqu’à l’étude d’exécution.

II- La culture de l’entreprise

Une partie de la culture d’entreprise de STIS consiste au tutoiement entre tous les membres
de la société, sans exception dans la hiérarchie. Le tutoiement renforce la convivialité dans
les équipes, améliore l’ambiance et participe à la qualité du travail effectué. Parmi les valeurs
de l’entreprise, on peut trouver la rigueur qui est une valeur qui assure une bonne qualité du
travail fourni, dans le but de satisfaire les clients et d’établir une relation de confiance.

III- Intégration dans l’entreprise

L’intégration dans l’entreprise en tant qu’apprenti était assez rapide grâce aux anciens
expériences que j’ai déjà eux avec d’autres différents entreprises. Durant mes premiers
mois d’alternance, le plus difficile était de tutoyer tous les salariés le premier jour, mais cela
devient rapidement une habitude.

Mon intégration a pu être facilitée par l’ambiance très conviviale dans la société. Les salariés
montrent un réel intérêt à me transmettre leur savoir et me font participer aux activités qui les
occupent. J’ai donc eu des missions tant dans la gestion et la conception que dans la mise en
œuvre de l’application.

12
Cette intégration dans la société STIS s’est renforcée avec mon année en apprentissage. J’ai
gagné en expérience et en connaissances, ce qui me permet de me rapprocher du niveau de
mes collègues. Je connais beaucoup mieux le personnel de l’entreprise, et vice-versa, ce qui
permet de mieux se faire comprendre et de comprendre les autres. Après cette présentation,
nous pouvons nous intéresser à la conduite de travaux qui est le domaine principal de mes
activités dans l’entreprise.

Conclusion

Dans cette partie, nous avons présenté l’entreprise où nous avons passé notre alternance
de première année master, par l’énumération de ses missions et ses objectifs, son
organigramme actuel sa culture ainsi que comment j’ai pu s’intégrer facilement au sein
de cette société .

13
 🙥🙧

Partie II : Cahier des charges

🙤🙦

14
Introduction

Dans cette partie, nous allons présenter le cahier des charges de notre projet : une petite
présentation sur son terme général, sa problématique, son objectif, et un diagramme de
GANTT pour représenter le planning temporel du déroulement de ce dernier.

I- Présentation
Dans ce projet nous allons réaliser une application web dynamique qui a comme mission
essentielle : la gestion du personnel de cette société. Cette application va fournir aux
chefs d’entreprise, un espace informatisé et riche par un ensemble des fonctionnalités qui
va leur faciliter et bien organiser le travail. Cette application doit aussi mettre à la
disposition des employées la possibilité d’avoir un compte professionnel dans lequel ils
peuvent exécuter un certain nombre des tâches.

II- Problématique

Depuis sa création, la société STIS reçoit plusieurs projets au cours de l’année. Avant, ils
utilisaient des fichiers Excel pour calculer les dépenses chantiers y compris les dépenses
salariées. Et voyait la quantité importante de ces chantiers reçus et leur consultation non
périodique ainsi que le stockage des dossiers papiers: : La détermination des dépenses
réelles devient l'une des tâches les plus compliquées et faites manuellement. Ainsi, le risque de
perte des données est très élevé puisqu’il s’agit d’un nombre très important des dossiers et
documents circulant d’une personne à une autre qu’il faut imprimer, signer, agrafer, mettre sous
pli, etc.

La société essaie donc d’apporter des solutions à cette problématique, et l’une des options
proposées est de développer une application web dynamique qui doit être exploité d’une manière
facile et efficace et qui a comme principal objectif, de faciliter la tâche du suivi des dépenses sur
chantiers.

15
 III- Les objectifs

Ce projet d’alternance a pour objectifs de développer une application web dynamique qui
devra répondre aux objectifs suivants :

• Faciliter l’accès aux données.

• Limiter la multiplication des supports papier.
• Eviter la perte des documents.
• Assurer une authentification pour l’information.
• Mettre à la disposition des employés un espace pour consulter et mettre à jour leur information.
• Faciliter la recherche du dossier d’un chantier même si le nombre des chantiers est important.
• Automatiser la génération des bons de commande.
• Automatiser les attributions des dépenses salariées et chantiers.
• Garder l’historique des factures.
• Faciliter la suivie des dépenses.
• Comparer les dépenses prévisions avec les dépenses réelles.

IV- Diagramme de Gantt

Après l’installation du logiciel « Ganttproject», on a pu réaliser le diagramme de Gantt
concernant notre projet, qui en résumé, se répertorie toutes les tâches à accomplir pour
mener ce projet à bien. Donc on a défini dans ce diagramme les taches suivantes : l’analyse
de l’existant, la réalisation du cahier des charges, l’analyse et conception, la réalisation et
enfin la rédaction du rapport :

Figure 4: Diagramme de Gantt

16
V- Les outils et langages utilisés

Pour la mise en œuvre de notre application web et aussi la plateforme en ligne, nous
avons essayé de combiner entre les méthodes et techniques que nous avons apprises au
cours de ce semestre aussi les dernières années, et l'intégration des nouveaux techniques
pour assurer les objectifs attendus et afin d'améliorer et d'enrichir notre niveau de
connaissance.

Nous allons présenter dans cette partie tout ce qu'on a utilisé pour répondre aux objectifs
attendus tels que les outils exploités en cours du développement et aussi les langages de
programmation et les Framework servis durant l’implémentation de ce projet.

Nous devons tous d’abord commencé par identifier langages et les Framework que nous
avons utilisés dans l’environnement technique, ensuite on doit classifier les outils utilisés
comme environnements logiciels:

17
 1- Environnement technique

HTML5
HTML (Hypertext Markup Language) est un langage de description (non pas un
langage de programmation) qui permettre de décrire l’aspect d’un document, inclure
des informations variées (textes , images , sons , animations etc.) et d’établir des
relations cohérentes entre ces informations grâce aux liens hypertextes. (HTML,
s.d.)

CSS3
CSS (Cascading Style Skeets) , servent à mettre en forme les pages web. Par
L’intermédiaire de propriétés d’apparence et de placement, le rendu d’une page web
Peut être intégralement modifié sans aucun code supplémentaire dans la page web.

JavaScript
JavaScript est un langage de programmation de scripts principalement employé dans
les pages web interactives et à ce titre est une partie essentielle des applications web.
Avec les langages HTML et CSS, JavaScript est au cœur des langages utilisés par
les développeurs web. (JavaScrip, s.d.)

Tailwind

Tailwind CSS est un framework permettant 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. (Tailwind, s.d.)

JQuery
Jquery permet de manipuler les éléments mis en place en HTML (textes, images,
Liens, vidéos, etc.) et mis en forme en CSS (position, taille, couleur, transparence, Etc
.) en utilisant des instructions simples qui donnent accès aux
immenses possibilités de JavaScript et d’AJAX. (Javascript, s.d.)

18
Laravel 7.0
Laravel est un framework web open-source écrit en PHP respectant le principe
modèle-vue-contrôleur et entièrement développé en programmation orientée objet.
Laravel est distribué sous licence MIT, avec ses sources hébergées sur GitHub.
(Laravel, s.d.)

2-Environnement logiciel

GanttProject
GanttProject est un logiciel libre de gestion de projet écrit en Java, ce quipermet
de l'utiliser sur divers système d'exploitation (Windows, Linux, MacOS); il Permet
d'éditer un diagramme de Gantt. (GanttProject, s.d.)

XAMPP

XAMPP est un ensemble de logiciels permettant de mettre en place un serveur

Web local, un serveur FTP et un serveur de messagerie électronique . Il s'agit
d'une distribution de logiciels libres offrant une bonne souplesse d'utilisation,
réputée pour son installation simple et rapide. (XAMPP, s.d.)

Visual Studio Code

Visual Studio Code est présenté lors de la conférence des développeurs Build d'avril

2015 comme un éditeur de code cross-platform, open source et gratuit,supportant

une dizaine de langages3. Le code source est fourni sous la licence libre MIT (plus

précisément la licence Expiât) sur le site du projet sur Git hub.

(Visual Studio Code, s.d.)

19
 Composer
Composer est un logiciel gestionnaire de dépendances libre écrit en PHP. Il
permet à ses utilisateurs de déclarer et d'installer les bibliothèques dont le projet
principal a besoin. Le développement a débuté en avril 2011 et a donné lieu à
une première version sortie le 1ᵉʳ mars 2012. (Composer, s.d.)

Npm
npm est le gestionnaire de paquets par défaut pour l'environnement d'exécution
JavaScript Node.js de Node.js. npm se compose d'un client en ligne de
commande, également appelé npm, et d'une base de données en ligne de paquets
publics et privés payants, appelée le registre npm. (Npm, s.d.)

PhpMyAdmin
phpMyAdmin (PMA) est une application Web de gestion pour les systèmes de
gestion de base de données MySQL réalisée principalement en PHP et distribuée
sous licence GNU GPL. (PhpMyAdmin, s.d.)

GitHub
GitHub (exploité sous le nom de GitHub, Inc.) est un service web
d'hébergement et de gestion de développement de logiciels, utilisant le logiciel
de gestion de versions Git. Ce site est développé en Ruby on Rails et Erlang par
Chris Wanstrath, PJ Hyett et Tom Preston. (GitHub, s.d.)

Conclusion
Dans cette partie, Nous avons pu insérer notre projet dans son contexte et présenterla durée
précise pour sa réalisation, aussi la problématique et les objectifs à atteindre. Dans la partie
suivante, Nous allons présenter la phase de la conception qui a été mise en œuvre tout au
long de la période de réalisation.

20
 🙥🙧

Partie III : Analyse et Conception

🙤🙦

21
Introduction

Après avoir distingué les différents besoins de notre projet dans le cahier des charges. On va
commencer dans cette troisième partie, une phase très importante et indispensable dans le cycle
de vie d'une application qui est la phase de l’analyse et conception, dans lequel on doit
modéliser notre projet en utilisant le Langage de Modélisation Unifié (UML).

I- UML

1- Présentation d’UML

Le Langage de Modélisation Unifié, de l'anglais Unified Modeling Language (UML), est

un langage de modélisation graphique à base de pictogrammes conçu pour fournir une
méthode normalisée pour visualiser la conception d'un système.
Il est couramment utilisé en développement logiciel et en conception orientée objet.
(UML, s.d.)
2- Le diagramme de classe

Figure 5: Diagramme de classe de l'application

22
 3- Diagramme de cas d’utilisation

Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour donner une vision
globale du comportement fonctionnel d'un système logiciel. Ils sont utiles pour des présentations
auprès de la direction ou des acteurs d'un projet, mais pour le développement, les cas d'utilisation
sont plus appropriés. Un cas d'utilisation représente une unité discrète d'interaction entre un
utilisateur (humain ou machine) et un système. Il est une unité significative de travail. Dans un
diagramme de cas d'utilisation, les utilisateurs sont appelés acteurs (actors), ils interagissent avec
les cas d'utilisation (use cases). (Diagramme de cas d'utilisation, s.d.)

• Diagramme de cas d’utilisation d’employé et administrateur

Le diagramme suivant représente les cas d'utilisation qui définit les rôles de l’administrateur et
l’employé à savoir comme : la création des bons de commande, la gestion des fournisseurs, la
gestion des chantiers, des dépenses…, etc.

Figure 6: Diagramme de cas d'utilisation

23
L'idée forte est de dire que le membre de cette application web a un objectif quand il utilise le
système ! Le cas d'utilisation est une description des interactions qui vont permettre à l'acteur
d'atteindre son objectif en utilisant l’application.

4- Diagramme de séquence :

Les diagrammes de séquences sont la représentation graphique des interactions

entre les acteurs et le système selon un ordre chronologique dans la formulation
Unified Modeling Language. (Diagramme de séquence, s.d.)

• Diagramme de séquence pour la page d’authentification

Dans ce diagramme on a cité trois acteurs :

• L’utilisateur qui peut-être soit un employé soit un administrateur.

• Le système qui est notre application web.
• La base de données de notre application web.

Ce diagramme nous explique comment l’employé et l’administrateur de

l’application sont obligés d’établir une connexion avant qu’ils puissent accéder à
leurs comptes. La procédure de la connexion passe par le remplissage d’un
formulaire où ils sont obligés d’entrer l’adresse mail et le mot de passe correcte.
Dans le cas où les données entrées sont incorrectes un message d’erreur s’affiche
sinon le membre (ou l’administrateur) peut accéder à son compte.

24
 Figure 7: Diagramme de séquence

Conclusion
Donc, nous avons pu présenter la phase de conception pour notre projet en mettant tous les
modèles de conception pris comme référence dans le traitement et la réalisation.

25
 🙥🙧

Partie IV : Réalisation
🙤🙦

26
Introduction

Après avoir terminé la phase de conception et présenter les outils utilisés, nous passerons à
l'étape suivante de la réalisation.

Cette application web comporte deux types de comptes utilisateurs :

• Type 1 : Compte employé, qui est accessible par tous les employés de cette entreprise.
• Type 2 : Compte administrateur, qui est consacré aux administrateurs de l’entreprise.
À savoir : un administrateur est un employé mais un employé n’est pas forcément administrateur.

Ces deux types de comptes sont bien sécurisés, et pour l’y accéder if faut passer par
l’authentification

I- La partie administrateur
1- La page d’authentification

L’application web contient par défaut un compte administrateur, à partir de ce dernier on

peut créer d’autres comptes employés ou administrateurs. La différence entre ces deux
comptes est définit au niveau des rôles. Un administrateur a l’accès abstrait à tous les
fonctionnalité de cette application. Par contre, certain de ces fonctionnalité ne sont pas
accessible par un employé simple. Une fois le compte est créé son titulaire peut y accéder
en utilisant son mail et un mot de passe initial. Pour l’établissions de la connexion, le
membre est obligé de remplir ce formulaire (Figure 8) :

Figure 8: La page d'authentification

27
 2- La page du Dashboard

Une fois que le membre accède à son compte. Une page contenant le Dashboard s’affiche.
À partir de cette page l’administrateur peut avoir une idée générale sur les statistique de la base de
données (nombre des employés, fournisseurs, chantiers, etc.).

Figure 9: La page de Dashboard

3- La gestion des employé

a- Affichage de la liste des employés

Dans cette page l’administrateur peut gérer tous ce qui concerne les comptes des employés et leurs profiles.

Figure 10: Affichage de la liste des employés

28
 b- Ajouter un employé
Ce formulaire permet à l’administrateur l’ajout d’un employé en remplissant les inputs obligatoires
Tels que son nom, prénom, adresse mail et mot de passe.

Figure 11: Le formulaire d'ajout d'un employé

c- Voir le détail d’un employé

Pour Voir le détails d’un employé , l’administrateur doit cliquer sur le bouton (Figure 12).

Figure 12: Affichage du détail d'un employé

29
 d- Modifier un employé
Pour modifier les informations d’un employé, il faut cliquer sur le bouton modifier, établir les
modifications et à la fin les enregistrer en cliquant sur le bouton enregistrer.

Figure 13: Le formulaire de modification d'un employé

e- Supprimer un employé
Une fois cliquer sur le bouton de suppression, le compte est supprimé définitivement de la base
de données.

Figure 14: La suppression d'un employé

30
 4- La gestion des fournisseurs
a- Afficher la liste des fournisseurs
Au cas où il n’existe pas de fournisseurs dans la base de données, la page s’affiche avec un
bouton qui va permettre à l’administrateur d’accéder au formulaire d’ajout d’un fournisseur.

Figure 15: Le bouton d'ajout d'un fournisseur

Sinon, dans le cas où il existe des fournisseurs dans la base de données la page s’affiche avec
le tableau suivant (Figure 16).

Figure 16: La liste des fournisseurs

31
 b- Ajouter un fournisseur

L’administrateur peut ajouter un fournisseur en remplissant le formulaire suivant (Figure 17).

Figure 17: Formulaire d'ajout d'un fournisseur

c- Voir le détail d’un fournisseur

Pour Voir le détails d’un fournisseur , l’administrateur doit cliquer sur le bouton contenant l’icone

« détails ». Une fois c’est fait, la page suivant s’affiche (Figure 18).

Figure 18: L’affichage du détail d’un fournisseur

32
 d- Modifier un fournisseur

Pour modifier les informations d’un fournisseur, il faut cliquer sur le bouton modifier, établir les
modifications et à la fin les enregistrer en cliquant sur le bouton enregistrer.

Figure 19: La page de modification d'un fournisseur

e- Supprimer un fournisseur

Une fois cliquer sur le bouton de suppression, le compte est supprimé définitivement de la base de
données.

Figure 20: La suppression d'un fournisseur

33
 5- La gestion des chantiers
a- Afficher la liste des chantiers

Au cas où il n’existe pas de chantiers dans la base de données, la page s’affiche avec un
bouton qui va permettre à l’administrateur d’accéder au formulaire d’ajout d’un chantier.

Figure 21: Le bouton d'ajout d'un chantier

Sinon, dans le cas où il existe des chantiers dans la base de données la page s’affiche avec
le tableau suivant (Figure 22).

Figure 22: La liste des chantiers

34
 b- Ajouter un chantier

L’administrateur peut ajouter un chantier en remplissant le formulaire suivant (Figure 23).

Figure 23: Le formulaire d'ajout d'un chantier

c- Afficher le détail d’un chantier

Pour Voir le détails d’un chantier , l’administrateur doit cliquer sur le l’image du chantier.
Une fois c’est fait, la page suivant s’affiche (Figure 24).

• Détails
La page détail contient tous les information indiqué lors de la création d’un chantier.

Figure 24: Affichage du détail d'un chantier

35
Cette page contient aussi un tableau de comparaison des dépenses prévisions avec les dépenses

réelles (Figure 25).

Figure 25: Le tableau de comparaison dépenses réels vs prévisions

• Sous catégories

En accédant à cette page, l’administrateur peut cliquer sur le bouton afin de définir les sous

catégories de ce chantier (Figure 26).

Figure 26: Le bouton d'ajout d'une catégorie

36
 Figure 27: Le formulaire d'ajout d'une catégorie

Figure 28: Affichage de la liste des catégories

• Avenants

Figure 29: Affichage de la liste des avenants

37
• Prévisions

Figure 30: Le formulaire d'ajout d'une prévision

• Factures

Figure 31: Le formulaire d'ajout d'une facture

• Dépenses chantier

Figure 32: Le page d’affichage de la liste des dépenses salarié sur chantier

38
d- Modifier un chantier

Figure 33: Le bouton de modification d'un chantier

Figure 34: La page de modification d'un chantier

39
5- La gestion des bons de commande
a- Afficher la liste des bons de commande

Figure 35: Affichage de la liste des bons de commande

b- Ajouter un bon de commande

Figure 36: Le formulaire d'ajout d'un bon de commande

40
 c- Télécharger un bon de commande

Le téléchargement ce fait en cliquant sur le bouton contenant l’icone pdf (Figure 37).

Figure 37: Le bouton de téléchargement d'un bon de commande

6- Dépenses salariés

a- Afficher la liste des dépenses par mois

Figure 38: La page d'affichage de la liste des dépenses salariés par mois

41
 b- Ajouter les dépenses d’un mois

Figure 39: Le formulaire d'ajout des dépenses salariés d'un mois

c- Afficher les dépenses d’un mois

Figure 40: La page d'affichage du détail des dépenses salariés d'un mois

d- Modifier les dépenses d’un mois

42
 Figure 41: La page de modification des dépenses salariés d'un mois

e- Supprimer les dépenses d’un mois

Figure 42: La suppression des dépenses salariées d'un mois

7- Autres fonctionnalités
a- Pagination

On a mis en place une pagination pour permettre au utilisateur de naviguer dans la table dans le

cas où le nombre des enregistrements dépasse 5 enregistrements (Figure 43).

43
 Figure 43: Pagination

b- Barre de recherche
La recherche ce fait par nom ou prénom d’employé.

Figure 44: La barre de la recherche

c- Paramètres

Afin de modifier son compte, l’administrateur doit cliquer sur le bouton paramètres (Figure 45).

Figure 45: Paramètre du compte utilisateur

44
Cette page permet à l’employer la modification de ses information initiales ainsi que le mot de

Passe de son compte.

Figure 46: Le formulaire de modification des données utilisateur

Conclusion

Donc, nous avons pu présenter la phase de réalisation pour notre projet en capturant tous

les pages et formulaires de notre application pour les expliquer dans cette partie du rapport

qui construit la dernière phase mémoire d`étude.

45
 🙥🙧

Conclusion générale
🙤🙦

Durant cette alternance j'ai appris au niveau pratique : comment gérer le temps, faire face
contre ses contraintes, améliorer mon niveau en programmation vue que j’ai eu
l’honneurde travailler avec des nouveaux outils et les frameworks.

Et au niveau savoir j'ai multiplié mes informations sur les sociétés. Durant la réalisation de
ce projet nous avons essayé de satisfaire les besoins, ainsi qu’augmenter l’efficacité des
fonctionnalités d’une application, tout cela pour faciliter la navigation aux employés
d’une part et la manipulation du contenu d’autre part.

En effet, cette alternance était une occasion pour acquérir des connaissances techniques
sur plusieurs outils de développement web, ainsi que des compétences personnelles et
relationnelles.

46
 🙥🙧

Liste des figures

🙤🙦

FIGURE 1: LOGO STIS ........................................................................................................................................................ 10

FIGURE 2: LES DEPARTEMENTS COUVERTS PAR STIS................................................................................................................. 10
FIGURE 3: ORGANIGRAMME DU PERSONNEL STIS ................................................................................................................... 11
FIGURE 4: DIAGRAMME DE GANTT ....................................................................................................................................... 16
FIGURE 5: DIAGRAMME DE CLASSE DE L'APPLICATION............................................................................................................... 22
FIGURE 6: DIAGRAMME DE CAS D'UTILISATION........................................................................................................................ 23
FIGURE 7: DIAGRAMME DE SEQUENCE .................................................................................................................................. 25
FIGURE 8: LA PAGE D'AUTHENTIFICATION............................................................................................................................... 27
FIGURE 9: LA PAGE DE DASHBOARD ...................................................................................................................................... 28
FIGURE 10: AFFICHAGE DE LA LISTE DES EMPLOYES .................................................................................................................. 28
FIGURE 11: LE FORMULAIRE D'AJOUT D'UN EMPLOYE ............................................................................................................... 29
FIGURE 12: AFFICHAGE DU DETAIL D'UN EMPLOYE................................................................................................................... 29
FIGURE 13: LE FORMULAIRE DE MODIFICATION D'UN EMPLOYE .................................................................................................. 30
FIGURE 14: LA SUPPRESSION D'UN EMPLOYE .......................................................................................................................... 30
FIGURE 15: LE BOUTON D'AJOUT D'UN FOURNISSEUR............................................................................................................... 31
FIGURE 16: LA LISTE DES FOURNISSEURS ................................................................................................................................ 31
FIGURE 17: FORMULAIRE D'AJOUT D'UN FOURNISSEUR ............................................................................................................ 32
FIGURE 18: L’AFFICHAGE DU DETAIL D’UN FOURNISSEUR .......................................................................................................... 32
FIGURE 19: LA PAGE DE MODIFICATION D'UN FOURNISSEUR ...................................................................................................... 33
FIGURE 20: LA SUPPRESSION D'UN FOURNISSEUR .................................................................................................................... 33
FIGURE 21: LE BOUTON D'AJOUT D'UN CHANTIER .................................................................................................................... 34
FIGURE 22: LA LISTE DES CHANTIERS ..................................................................................................................................... 34
FIGURE 23: LE FORMULAIRE D'AJOUT D'UN CHANTIER .............................................................................................................. 35
FIGURE 24: AFFICHAGE DU DETAIL D'UN CHANTIER .................................................................................................................. 35
FIGURE 25: LE TABLEAU DE COMPARAISON DEPENSES REELS VS PREVISIONS .................................................................................. 36
FIGURE 26: LE BOUTON D'AJOUT D'UNE CATEGORIE ................................................................................................................. 36
FIGURE 27: LE FORMULAIRE D'AJOUT D'UNE CATEGORIE ........................................................................................................... 37
FIGURE 28: AFFICHAGE DE LA LISTE DES CATEGORIES ................................................................................................................ 37
FIGURE 29: AFFICHAGE DE LA LISTE DES AVENANTS .................................................................................................................. 37
FIGURE 30: LE FORMULAIRE D'AJOUT D'UNE PREVISION ............................................................................................................ 38
FIGURE 31: LE FORMULAIRE D'AJOUT D'UNE FACTURE .............................................................................................................. 38
FIGURE 32: LE PAGE D’AFFICHAGE DE LA LISTE DES DEPENSES SALARIE SUR CHANTIER ..................................................................... 38
FIGURE 33: LE BOUTON DE MODIFICATION D'UN CHANTIER ....................................................................................................... 39
FIGURE 34: LA PAGE DE MODIFICATION D'UN CHANTIER ........................................................................................................... 39
FIGURE 35: AFFICHAGE DE LA LISTE DES BONS DE COMMANDE ................................................................................................... 40
FIGURE 36: LE FORMULAIRE D'AJOUT D'UN BON DE COMMANDE ................................................................................................ 40
FIGURE 37: LE BOUTON DE TELECHARGEMENT D'UN BON DE COMMANDE .................................................................................... 41
FIGURE 38: LA PAGE D'AFFICHAGE DE LA LISTE DES DEPENSES SALARIES PAR MOIS .......................................................................... 41
FIGURE 39: LE FORMULAIRE D'AJOUT DES DEPENSES SALARIES D'UN MOIS .................................................................................... 42
FIGURE 40: LA PAGE D'AFFICHAGE DU DETAIL DES DEPENSES SALARIES D'UN MOIS ......................................................................... 42
FIGURE 41: LA PAGE DE MODIFICATION DES DEPENSES SALARIES D'UN MOIS ................................................................................. 43
FIGURE 42: LA SUPPRESSION DES DEPENSES SALARIEES D'UN MOIS.............................................................................................. 43
FIGURE 43: PAGINATION .................................................................................................................................................... 44
FIGURE 44: LA BARRE DE LA RECHERCHE ................................................................................................................................ 44
FIGURE 45: PARAMETRE DU COMPTE UTILISATEUR .................................................................................................................. 44
FIGURE 46: LE FORMULAIRE DE MODIFICATION DES DONNEES UTILISATEUR .................................................................................. 45

47
 🙥🙧

Bibliographie
🙤🙦

Composer. (s.d.). Récupéré sur wikipedia.org: https://fr.wikipedia.org/wiki/Composer_(logiciel)

Diagramme de cas d'utilisation. (s.d.). Récupéré sur wikipedia.org:
https://fr.wikipedia.org/wiki/Diagramme_de_cas_d%27utilisation
Diagramme de séquence. (s.d.). Récupéré sur fr.wikipedia.org:
https://fr.wikipedia.org/wiki/Diagramme_de_s%C3%A9quence
GanttProject. (s.d.). Récupéré sur wikipedia.org: https://fr.wikipedia.org/wiki/GanttProject
GitHub. (s.d.). Récupéré sur wikipedia.org:
https://fr.wikipedia.org/wiki/GitHub#:~:text=GitHub%20(%2F%C9%A1%C9%AAt%20h,Hyett
%20et%20Tom%20Preston-Werner.
HTML. (s.d.). Récupéré sur https://www.clicours.com/cours-langage-html-hyper-texte-markup-language/
JavaScrip. (s.d.). Récupéré sur wikipedia.org:
https://fr.wikipedia.org/wiki/JavaScript#:~:text=JavaScript%20est%20un%20langage%20de,utilis
%C3%A9s%20par%20les%20d%C3%A9veloppeurs%20web.
Javascript. (s.d.). Récupéré sur http://sdz.tdct.org/sdz/simplifiez-vos-developpements-javascript-avec-
jquery.html
Laravel. (s.d.). Récupéré sur webandcow.com: https://www.webandcow.com/technologies/laravel/
Npm. (s.d.). Récupéré sur wikipedia.org: https://fr.wikipedia.org/wiki/Npm
PhpMyAdmin. (s.d.). Récupéré sur encyclopedie.fr: https://www.encyclopedie.fr/definition/PhpMyAdmin
Tailwind. (s.d.). Récupéré sur https://www.numendo.com/blog/framework/tailwind-css-framework-
totalement-personnalisable
UML. (s.d.). Récupéré sur wikipedia.org: https://fr.wikipedia.org/wiki/UML_(informatique)
Visual Studio Code. (s.d.). Récupéré sur wikipedia.org: https://fr.wikipedia.org/wiki/Visual_Studio_Code
XAMPP. (s.d.). Récupéré sur wikipedia.org: https://fr.wikipedia.org/wiki/XAMPP

48