République Tunisienne Ingénieur en :

Ministère de l’Enseignement Supérieur Génie Systèmes Électroniques

et de la Recherche Scientifique et Communication
EnetCom.png
Université de Sfax Option :
Systèmes Embarqués
École nationale d’électronique
et des télécommunications de Sfax N° d’ordre : GEC-aaa-0-00-00

MEMOIRE
présenté à

L’École Nationale d’Électronique et des

Télécommunications de Sfax

en vue de l’obtention du
Diplôme National d’Ingénieur en :
Génie Systèmes Électroniques et Communication

Option :
Systèmes Embarqués

par
Prénom NOM

TITRE DU PROJET

Soutenu le jj/mm/aaaa, devant la commission d’examen :

M. Prénom Nom Président

Mme. Prénom Nom Rapporteur
M. Prénom Nom Encadrant
Mme. Prénom Nom Encadrant
Mme. Prénom Nom Responsable Entreprise
 DEDICATION

J’ai le grand plaisir de dédier ce travail à tous ceux qui me sont chers, ceux qui ont sacrifié leur
vie pour moi, une vie si pleine d’amour et de dévouement, et qui ont fait de moi ce que je
puisse être aujourd’hui et demain. Je pense particulièrement à mes chers parents Slim et
Fadoua en témoignage de ma reconnaissance pour tous les efforts qu’ils ont consentis pour
mon éducation.À ma chère sœur Khadija en reconnaissance de sa affection et sa
encouragement. À tous mes chères cousines, mes fidèles amis et tous ceux qui me sont chers
pour leur chaleur, leur gaieté et leur soutien moral qu’ils trouvent dans ce travail le témoignage
de ma profonde gratitude.

À vous tous,
Je dédie ce travail.
Yosr KHNAFIR

ENET’COM SFAX Page i

 REMERCIEMENT

C’est avec un grand honneur et un grand plaisir que je dédie ces quelques lignes afin de
remercier toute personne ayant contribué de près ou de loin à l’accomplissement de ce projet.
A Monsieur Mounir BENSALEM pour son encadrement, pour son aide, sa patience, ses
consignes et ses recommandations qui ont été d’un grand intérêt et qui m’ont permis de mener
à terme ce projet. A Monsieur Sahbi DAOUD , le directeur informatique de Maison Masmoudi
pour l’aide, le support, les précieux conseils, et de m’avoir accueilli chaleureusement. A Monsieur
bilel et A Madame mariem, pour son assistance, son soutien et ses conseils pertinents amicale
durant ce stage.

ENET’COM SFAX Page ii

 TABLE DES MATIÈRES

LISTE DES FIGURES vii

LISTE DES ABRÉVIATIONS viii

INTRODUCTION GÉNÉRALE 1

1 Contexte générale du projet 2

1.1 Présentation de l’organisme d’acceuil . . . . . . . . . . . . . . . . . . . . . . 3
1.1.1 Présentation de l’entreprise . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.2 Catalogue des departements . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.3 Organigramme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Cadre du stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Présentation gérnerale du projet . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 Etude de l’existance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.5 Problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.6 Solutions proposées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.7 Choix technologique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.7.1 laravel 10.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.7.2 html 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.7.3 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.7.4 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.7.5 Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.7.6 Mysql . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.8 Envirennement matériel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.9 Outils utilisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.9.1 Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.9.2 Power bi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.9.3 Overleaf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.9.4 MockFlow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

ENET’COM SFAX Page iii

TABLE DES MATIÈRES

1.10 Choix méthodologique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

1.10.1 Processus Unifié . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.10.2 Cycle en V . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.10.3 Méthodologie adoptée : Processus Unifié . . . . . . . . . . . . . . . . 14
1.11 Présentation de l’équipe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.12 Chronogramme de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.13 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

2 Analyse des besoins 16

2.1 Defenir les exigences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.1.1 Cahier de charges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2 Analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2.1 Ebauche de use-cases . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2.1.1 Identifications des acteurs . . . . . . . . . . . . . . . . . . . 17
2.2.1.2 Identification des use-cases . . . . . . . . . . . . . . . . . . 17
2.2.1.3 Description briéve des use-cases . . . . . . . . . . . . . . . 18
2.2.1.4 Diagramme de use-cases . . . . . . . . . . . . . . . . . . . 20
2.2.2 Assigner les priorités aux use-cases . . . . . . . . . . . . . . . . . . . 21
2.2.3 Description textuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.2.4 Le protétype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.2.4.1 Page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.2.4.2 Fiche D’hygiéne à remplir . . . . . . . . . . . . . . . . . . . 23
2.2.4.3 Modifier le fiche d’hygiéne par un administrateur . . . . . . 24
2.2.4.4 Ajouter un utilisateur . . . . . . . . . . . . . . . . . . . . . 24
2.2.4.5 Afficher le taux de conformité . . . . . . . . . . . . . . . . . 25
2.2.4.6 Afficher le dashboard . . . . . . . . . . . . . . . . . . . . . 25
2.2.4.7 Le protétype du pied de page . . . . . . . . . . . . . . . . . 26
2.2.4.8 Gérer les départements . . . . . . . . . . . . . . . . . . . . 26
2.2.4.9 Gérer les ateliers . . . . . . . . . . . . . . . . . . . . . . . . 27
2.2.5 Diagramme de use-cases détaillé . . . . . . . . . . . . . . . . . . . . . 27

3 Analyse architecturale 28
3.1 Ebauche de classe d’analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.1.1 Ebauche de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.1.2 Ebauche de package . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2 Ebauche package d’analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

ISIM’Sfax Page iv
TABLE DES MATIÈRES

3.2.1 Identification des classe . . . . . . . . . . . . . . . . . . . . . . . . . 29

3.2.2 Identification des séquences . . . . . . . . . . . . . . . . . . . . . . . 29
3.3 Analyse de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.3.1 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.4 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

4 Réalisation 30
4.1 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.2 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.3 SECTION 1.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.3.1 SUBSECTION 1.3.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.3.2 SUBSECTION 1.3.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.4 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

5 CONCLUSION GÉNÉRALE 32

CONCLUSION GÉNÉRALE 32

BIBLIOGRAPHIE 32

ANNEXES 34
A.1 TITRE ANNEXE 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
A.2 TITRE ANNEXE 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

ISIM’Sfax Page v
 LISTE DES FIGURES

1.1 logo patisserie Masmoudi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.2 logo Laravel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3 logo Html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4 logo css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.5 logo java script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.6 logo bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.7 logo Mysql . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.8 Environnement matériel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.9 logo Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.10 logo Power BI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.11 logo Overleaf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.12 logo Mockflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.13 PU : Enchainements d’activités au cours du cycle de vie [15] . . . . . . . . . . 13
1.14 PU : Enchainements d’activités au cours du cycle de vie . . . . . . . . . . . . . 14

2.1 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . 20

2.2 Maquette de page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.3 Maquette de choisir le souhaité de l’intente . . . . . . . . . . . . . . . . . . . 23
2.4 Maquette de fiche d’hygiéne pour tous les départements sauf "maintenance" . . 23
2.5 Maquette de fiche d’hygiéne pourle département "maintenance" . . . . . . . . 23
2.6 Maquette de modifier fiche d’hygiénel . . . . . . . . . . . . . . . . . . . . . . 24
2.7 Maquette d’ajouter une personne . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.8 Maquette de taux de conformité . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.9 Maquette de dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.10 Maquette du pied de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.11 Maquette de gérer les départements . . . . . . . . . . . . . . . . . . . . . . . 26
2.12 Gérer les ateliers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

A.1 Titre de figure annexe 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

ENET’COM SFAX Page vi

LISTE DES FIGURES

A.2 Titre de figure annexe 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

ISIM’Sfax Page vii

 LISTE DES ABRÉVIATIONS

PU : Processus Unifié

BI : Bussiness Intelligence

CCC Ccc Ccc Ccc

ENET’COM SFAX Page viii

 INTRODUCTION GÉNÉRALE

Le projet de fin d’études est une initiation à la vie professionnelle vu que c’est une opportunité.
Pour valoriser mes compétences et mes connaissances dans le domaine informatique grâce à
mon cursus scolaires en particulier à l’Institut Supérieur d’informatique et de multimédia de
Sfax. C’est le fruit de mes travaux pour obtenir mon diplôme de licences en informatique
spécialité Big Data et Analyse de données. Afin de faciliter les taches, les administrateurs,
les responsables d’hygiénes ont migrés vers le domaine de l’informatique avec des moyens
assez avancés, notamment les plateformes web. A titre d’exemple, mon projet de fin d’études
est effectué au sein de la société Patisserie Masmoudi où j’ai développé une application
web sous le nom none qui permet à ses utilisateurs (administrateurs, responsables d’hygiénes)
de minimiser les feuilles à remplir. Dans ce contexte, m’activité consiste à développer cette
application. Une application qui facilite le remplissage des critéres necessaires pour les ateliers,
aussi qu’elle calcule leurs le taux de conformité. Tout atelier sera suveillé par un professionnel
d’hygiéne, et ainsi être surveillé plus précisément. En effet rien n’est plus gratifiant que de
donner un tel service afin de conserver la haute qualité.

ENET’COM SFAX Page 1

Chapitre

1
Contexte générale du projet

Sommaire
1.1 Présentation de l’organisme d’acceuil . . . . . . . . . . . . . . 3
1.1.1 Présentation de l’entreprise . . . . . . . . . . . . . . . . . . . . 3
1.1.2 Catalogue des departements . . . . . . . . . . . . . . . . . . . . 3
1.1.3 Organigramme . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Cadre du stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Présentation gérnerale du projet . . . . . . . . . . . . . . . . . 4
1.4 Etude de l’existance . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.5 Problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.6 Solutions proposées . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.7 Choix technologique . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.7.1 laravel 10.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.7.2 html 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.7.3 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.7.4 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.7.5 Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.7.6 Mysql . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.8 Envirennement matériel . . . . . . . . . . . . . . . . . . . . . . 9
1.9 Outils utilisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.9.1 Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.9.2 Power bi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.9.3 Overleaf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.9.4 MockFlow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.10 Choix méthodologique . . . . . . . . . . . . . . . . . . . . . . . 12
1.10.1 Processus Unifié . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.10.2 Cycle en V . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.10.3 Méthodologie adoptée : Processus Unifié . . . . . . . . . . . . . 14
1.11 Présentation de l’équipe . . . . . . . . . . . . . . . . . . . . . . 15
1.12 Chronogramme de travail . . . . . . . . . . . . . . . . . . . . . . 15
1.13 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

ENET’COM SFAX Page 2

CONTEXTE GÉNÉRALE DU PROJET

1.1 Présentation de l’organisme d’acceuil

Dans cette partie je vais présenter l’organisme d’accueil où a été réalisé mon projet de fin
d’études. Pour ce faire, je vais commencer par introduire l’entreprise mère.

1.1.1 Présentation de l’entreprise

La Patisserie Masmoudi est la signature d’une gastronomie fine et la quintessence d’un

héritage transmis. Pâtisserie fine fondée en 1972 à Sfax, en Tunisie, par Madame Masmoudi,
elle est cette tradition fière et fidèle, à la richesse subtile et intemporelle [1].

F IGURE 1.1 – logo patisserie Masmoudi

1.1.2 Catalogue des departements

En tant que société de gastronomie, Maison Masmoudi contient les domaines du bon production
du produit de A jusqu’à Z , On peut notée :
• Informatique
• Production
• Achat
• Preparation
• Marketing
• Finance
• comptabilité
• commerciale

ISIM’Sfax Page 3
CONTEXTE GÉNÉRALE DU PROJET

1.1.3 Organigramme

1.2 Cadre du stage

Le présent projet intitulé "Application de surveillance hygiène" est réalisé dans le cadre
d’un projet de fin d’études en vue de l’acquisition du diplôme national de licence en big data et
analyse de données. Ce projet a été effectué au sein de l’entreprise Patisserie Masmoudi durant
14 semaines.

1.3 Présentation gérnerale du projet

Aujourd’hui,le secteur de la gastronomie et de la pâtisserie évolue rapidement grace aux

innovations technologiques qui apportent de nouvelles méthodes et outils de travail. c’est pour
cela on se tourne vers le domaine d’hygiène et de sécurité alimentaire afin de garantir la
qualité et l’intégrité des aliments proposés aux clients et d’assurer le bon fonctionnement des
appareils. Donc pour respecter les normes d’hygiène et de sécurité alimentaire internationale,
les professionnels du secteur gastronomique doivent visiter régulièrement les ateliers et les
laboratoires de production afin de mener des inspections précises et rigoureuses. Dans ce cadre,
j’ai réalisé mon projet de fin d’études intitulé " Application de surveillance hygiène " qui
présente une plateforme de surveillance commune entre les administrateurs et les professionnels
d’hygiène. Dans lequel il y’a partage des informations d’hygiène : fiche de surveillance, taux
de conformité, dashboard,...

1.4 Etude de l’existance

L’étude de l’existant est une phase importante pour bien comprendre le système actuel. Il a
pour objectif d’étudier et de dégager les lacunes du système existant et de proposer les solutions
adéquates et définir les objectifs à atteindre au titre de perfectionnement. Il existe deux cas
lorsqu’on procède à l’étude de l’existant :

ISIM’Sfax Page 4
CONTEXTE GÉNÉRALE DU PROJET

• Soit le produit existe déjà, alors il faut l’améliorer.

• Soit le produit n’existe pas, il faudra donc le créer.

Dans ce cas, le produit n’existe pas,

1.5 Problématique

Parmi les causes qui poussent Patisserie MASMOUDI à développer cette plateforme ,
c’est qu’il n’existante pas de solution informatique qui facilite l’accomplissement des taches ,
les professionnels de secteur hygiene sont obligés chaque jour de noter leurs travails dans des
tableaux imprimer sur papiers. Apres qu’ils terminent leurs tours ,ils rentrent aux bureaux et les
saisis dans un fichier exel.

1.6 Solutions proposées

Après avoir dégagé la problématique, le défi de ce projet est de faire une conception et de
mettre en place une solution de noter la propretée des ateliers. Cette solution doit être unique
et accessible par l’ensemble des administrateurs et les professionnels d’hygiéne qui permet une
meilleure surveillance des ateliers de preparations, production et logistique qu’on va afficher le
taux de conformiter de ces atliers dans un dashboard.

1.7 Choix technologique

Le choix technologique doit être structurant et lié à l’aspect général du projet. Ce choix se
base généralement sur 4 axes :
• Le système de gestion de bases de données
• Le langage de développement
• Les outils de développement
• Les outils de reporting

ISIM’Sfax Page 5
CONTEXTE GÉNÉRALE DU PROJET

1.7.1 laravel 10.2

Laravel est un framework PHP multi-plateforme permettant de créer des applications web
[2],il est choisi comme une base de développement pour beaucoup de projets Open Source
et a depuis de nombreuses années conquit le monde de la Tech. Cet framework permet à un
développeur de tirer parti d’une vaste bibliothèque de fonctionnalités pré-programmées (telles
que l’authentification, le routage et la création de modèles HTML). L’accès à cette bibliothèque
simplifie la création rapide d’applications web robustes tout en minimisant la quantité de code
nécessaire.

F IGURE 1.2 – logo Laravel

Le choix de Laravel est fait pour plusieurs raisons :

• Laravel est facile à apprendre : Il est relativement facile à apprendre, si l’on dispose
d’une formation adéquate. Laravel nécessite une compréhension générale de PHP,
des concepts de Programmation Orientée Objet (POO) pour une utilisation efficace,
connaître au moins quelques notions de HTML,l’architecture MVC et comprendre
les systèmes de gestion de bases de données relationnelles .
• Laravel simplifie le processus de développement : Il a été conçu pour simplifier les
tâches communes à de nombreux projets de développement web, comme le routage,
l’authentification, la migration, la mise en cache, etc
• Laravel dispose d’outils pour les développeurs de tous les niveaux : Il se décrit
comme un framework progressif, ce qui signifie qu’il inclut une variété de fonctionnalités
que les utilisateurs de tous niveaux trouveront utiles.
• Laravel évolue facilement : Grâce à la prise en charge intégrée de systèmes de cache
rapides et distribués, les applications Laravel sont capables de traiter des millions
de requêtes par mois.
• Laravel dispose d’un écosystème et d’une communauté massive : Laravel dispose
d’un formidable écosystème soutenu par une vaste communauté de développeurs.
Laravel étant l’un des frameworks PHP les plus utilisés, la bibliothèque d’applications
et de paquets Laravel disponibles est importante. Les paquets officiels Laravel et les
paquets tiers sont facilement disponibles.

ISIM’Sfax Page 6
CONTEXTE GÉNÉRALE DU PROJET

• Laravel est largement utilisé : De nombreuses entreprises utilisent Laravel pour

créer des sites web hautement fonctionnels [3].

1.7.2 html 5

Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière version,
HTML5, est le langage de balisage conçu pour représenter les pages web.[4]

F IGURE 1.3 – logo Html

Ce langage permet d’écrire de l’hypertexte (d’où son nom), de structurer sémantiquement

une page web, de mettre en forme du contenu, de créer des formulaires de saisie ou encore
d’inclure des ressources multimédias dont des images, des vidéos, et des programmes informatiques.
L’HTML offre également la possibilité de créer des documents interopérables avec des équipements
très variés et conformément aux exigences de l’accessibilité du web.

Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des

feuilles de style en cascade (CSS) [4].

1.7.3 CSS

CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie « feuille de style en
cascade ».Le CSS correspond à un langage informatique permettant de mettre en forme des
pages web (HTML ou XML).Ce langage est donc composé des fameuses « feuilles de style en
cascade » également appelées fichiers CSS (.css) et contient des éléments de codage [5].

ISIM’Sfax Page 7
CONTEXTE GÉNÉRALE DU PROJET

F IGURE 1.4 – logo css

1.7.4 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.
Une grande majorité des sites web l’utilisent, et la majorité des navigateurs web disposent d’un
moteur JavaScript5 pour l’interpréter.

JavaScript est aussi employé pour les serveurs Web avec l’utilisation (par exemple) de
Node.js ou de Deno [6].

F IGURE 1.5 – logo java script

1.7.5 Bootstrap

Bootstrap est une collection d’outils utiles à la création du design (graphisme, animation
et interactions avec la page dans le navigateur, etc.) de sites et d’applications web. C’est un

ISIM’Sfax Page 8
CONTEXTE GÉNÉRALE DU PROJET

ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et
autres éléments interactifs, ainsi que des extensions JavaScript en option. C’est l’un des projets
les plus populaires sur la plate-forme de gestion de développement GitHub [7].

F IGURE 1.6 – logo bootstrap

1.7.6 Mysql

MySQL est un système de gestion de bases de données relationnelles (SGBDR) open-source

puissant et gratuit. Il fait partie des logiciels de gestion de base de données les plus utilisés au
monde, autant par le grand public que par des professionnels, en concurrence avec Oracle,
PostgreSQL et Microsoft SQL Server [8].

F IGURE 1.7 – logo Mysql

1.8 Envirennement matériel

J’ai élaboré ce travail en utilisant un ordinateur portable qui représente la machine de

développement possédant les caractéristiques suivantes :

ISIM’Sfax Page 9
CONTEXTE GÉNÉRALE DU PROJET

F IGURE 1.8 – Environnement matériel

1.9 Outils utilisé

1.9.1 Visual Studio Code

Est un éditeur de code, développé par Microsoft. Il peut interpréter et compiler toute languages
à l’aide des extensions à integrer [9].

F IGURE 1.9 – logo Visual Studio Code

1.9.2 Power bi

Microsoft Power BI est une solution d’analyse de données de Microsoft. Il permet de créer
des visualisations de données personnalisées et interactives avec une interface suffisamment
simple pour que les utilisateurs finaux créent leurs propres rapports et tableaux de bord.

ISIM’Sfax Page 10
CONTEXTE GÉNÉRALE DU PROJET

Power BI est un ensemble de services logiciels, d’applications et de connecteurs qui fonctionnent

ensemble pour transformer différentes sources de données en informations visuelles, immersives
et interactives [10] .

F IGURE 1.10 – logo Power BI

1.9.3 Overleaf

Un éditeur Latex en ligne pour l’écriture des rapports [11].

F IGURE 1.11 – logo Overleaf

1.9.4 MockFlow

MockFlow offre une solution rapide, facile et complète à la conception du produit que tout
le monde peut utiliser. Ce service est offert par ’A Produle Systems (P) Limited’ - un organisme
certifié ISO 27001 :2013 et SOC2 Type II [12].

F IGURE 1.12 – logo Mockflow

ISIM’Sfax Page 11
CONTEXTE GÉNÉRALE DU PROJET

1.10 Choix méthodologique

Choisir la bonne méthodologie de gestion de projet est une étape indispensable pour réussir
mon projet. Cette méthodologie doit valoriser les objectifs de mon projet aussi de finaliser le
projet dans les délais de livraison.Pour cette raison j’ai pensée à ces deux méthodes.

1.10.1 Processus Unifié

Le processus unifié (PU) est une famille de méthodes de développement de logiciels orientés
objets. Elle se caractérise par une démarche itérative et incrémentale, pilotée par les cas d’utilisation,
et centrée sur l’architecture et les modèles UML. Elle définit un processus intégrant toutes les
activités de conception et de réalisation au sein de cycles de développement composés d’une
phase de création, d’une phase d’élaboration, d’une phase de construction et d’une phase de
transition, comprenant chacune plusieurs itérations. Le processus unifié est cyclique et il se
compose de quatre phase :
• Inception : vise à définir le produit et les objectifs du projet.
• Elaboration : vise à clarifier les exigences, à définir l’architecture du produit et à
en valider la faisabilité.
• Construction : vise à construire et à mettre en œuvre le produit et les livrables
associés.
• Transition : vise à livrer, diffuser ou déployer le produit de sorte qu’il soit prêt à
être utilisé [13].

Le processus unifié propose les enchainements d’activités suivants :

• Exigences : recherche des acteurs et des cas d’utilisation, priorisation, description
des cas d’utilisation, prototypage de l’interface utilisateur, et structuration du modèle
des cas d’utilisation.
• Analyse : analyse approfondie des exigences (architecture, cas d’utilisation, classe,
package).
• Conception : conception de l’architecture, conception d’un cas d’utilisation, conception
d’une classe, et conception d’un sous-système .
• implémentation : travail sur le code apartir des modéles de coneption.

ISIM’Sfax Page 12
CONTEXTE GÉNÉRALE DU PROJET

• Test : planification des tests, conception des tests, mise en œuvre des tests, exécution
des tests d’intégration, exécution de tests systèmes, et évaluation des tests.. [14].

F IGURE 1.13 – PU : Enchainements d’activités au cours du cycle de vie [15]

1.10.2 Cycle en V

Le cycle en V est un modèle d’organisation des activités de développement d’un produit qui
se caractérise par un flux d’activité descendant qui détaille le produit jusqu’à sa réalisation, et
un flux ascendant, qui assemble le produit en vérifiant sa qualité. Ce modèle est issu du modèle
en cascade dont il reprend l’approche séquentielle et linéaire de phases [16].

ISIM’Sfax Page 13
CONTEXTE GÉNÉRALE DU PROJET

F IGURE 1.14 – PU : Enchainements d’activités au cours du cycle de vie

1.10.3 Méthodologie adoptée : Processus Unifié

Apés discussion avec l’encadrant professionnel, l’encadrant universitaire et les recherches

que j’ai fait pour prendre décision, j’ai choisit le Processus unifié comme méthodoligie.

En général, le processus unifié peut être considéré comme plus flexible et itératif que le
cycle en V. Le processus unifié implique une approche centrée sur l’architecture, qui implique
des itérations continues pour affiner les spécifications et les solutions techniques. Cela permet
de s’adapter plus facilement aux changements de priorités et aux nouvelles exigences du client.
En revanche, le cycle en V suit une approche plus séquentielle et linéaire, où chaque phase est
clairement définie et doit être achevée avant de passer à la suivante. Cela peut être considéré
comme plus rigide mais cela a l’avantage de fournir une documentation plus complète et une
traçabilité plus claire des résultats.

ISIM’Sfax Page 14
CONTEXTE GÉNÉRALE DU PROJET

1.11 Présentation de l’équipe

Acteur Role Mission

2-1 2-2 2-3

3-1 3-2 3-3

1.12 Chronogramme de travail

1.13 CONCLUSION

Dans ce premier chapitre, j’ai situé mon projet dans son contexte, en présentant l’organisme
d’accueil et le contexte du projet. Je me suis aussi intéressée à l’étude de l’existant et je
l’avais critiqué pour pouvoir déterminer mes objectifs d’une façon claire et objective. Pour
le chapitre suivant je me concentre sur l’identification des acteurs, les besoins fonctionnels et
nonfonctionnels, l’architecture de ma solution et les choix technologique adoptés.

ISIM’Sfax Page 15
Chapitre

2
Analyse des besoins

Sommaire
2.1 Defenir les exigences . . . . . . . . . . . . . . . . . . . . . . . . 17
2.1.1 Cahier de charges . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2 Analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2.1 Ebauche de use-cases . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2.2 Assigner les priorités aux use-cases . . . . . . . . . . . . . . . . 21
2.2.3 Description textuelle . . . . . . . . . . . . . . . . . . . . . . . . 21
2.2.4 Le protétype . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.2.5 Diagramme de use-cases détaillé . . . . . . . . . . . . . . . . . 27

ENET’COM SFAX Page 16

ANALYSE DES BESOINS

2.1 Defenir les exigences

2.1.1 Cahier de charges

2.2 Analyse

Les diagrammes de cas d’utilisation représentent une solution UML pour représenter le
modèle conceptuel, ils permettent de structurer les différents besoins des utilisateurs et les
objectifs correspondants d’un système. L’ensemble des fonctionnalités d’une application est
déterminé en spécifiant les exigences fonctionnelles de tous les acteurs, ils sont exprimés sous
formes d’ensemble d’interaction dans des cas d’utilisation.

2.2.1 Ebauche de use-cases

2.2.1.1 Identifications des acteurs

• Administrateur : C’est la personne qui controle le travail terminé par l’utilisateur,

aussi c’est lui qui crée les comptes.
• Utilisateur : C’est le responsable d’hygiéne, c’est à dire, la personne qui travaille
dans le departement qualité, et sa tache principale est de controlé les ateliers.

2.2.1.2 Identification des use-cases

a) Pour l’Administrateur

• S’authentifier
• Créer les comptes
• Gérer les departements
• Gérer les ateliers
• Gérer les PRP
• Gérer les critéres

ISIM’Sfax Page 17
ANALYSE DES BESOINS

• Gérer les indices

• Consulter les taux de conformités
• Consulter les dashboards
• Modifier les fiches d’hygiénes

b) Pour l’Utilisateur

• S’authentifier
• Consulter les taux de conformités
• Consulter les dashboards
• Remplir les fiches d’hygiénes

2.2.1.3 Description briéve des use-cases

• S’authentifier :Avant tous il faut s’authentifier, donc chaque utilisateur (Administrateur,

Responsable Qualité) met son e-mail et mot de passe pour accéder à l’application.
• Créer les comptes :C’est la tache de l’administrateur. Son but et d’ajouter un
nouveau utilisateur (Administrateur, Responsable Qualité).
• Gérer les departements :C’est la tache de l’administrateur. Il accéde a cette interface
pour Afficher, Ajouter, Modifier et Supprimer un département.
• Gérer les ateliers :C’est la tache de l’administrateur. Il accéde a cette interface pour
Afficher, Ajouter, Modifier et Supprimer un atelier.
• Gérer les PRP :C’est la tache de l’administrateur. Il accéde a cette interface pour
Afficher, Ajouter, Modifier et Supprimer un prp.
• Gérer les critéres : C’est la tache de l’administrateur. Il accéde a cette interface
pour Afficher, Ajouter, Modifier et Supprimer un critére.
• Gérer les indices :C’est la tache de l’administrateur. Il accéde a cette interface pour
Afficher et Modifier un indice.
• Consulter les taux de conformités :Chaque utilisateur (Administrateur, Responsable
Qualité), peut consulter les taux de conformités de chaque atelier et chaque Prp
suivant le choix et de les afficher en pourcentage pendant une durée bien détérminer.
• Consulter les dashboards :Chaque utilisateur (Administrateur, Responsable Qualité),
peut consulter les dashboards (histogramme,..) pendant une durée bien détérminer
qui exprime l’evolution des ateliers.

ISIM’Sfax Page 18
ANALYSE DES BESOINS

• Modifier les fiches d’hygiénes : Cette interface pour l’administrateur, lui permet
de modifier les fiches d’hygiéne remplient par les responsables qualités si il y a une
faute.
• Remplir les fiches d’hygiénes : C’est la tache du responsable qualité. Il est concérner
de remplir les fiches d’hygiénes de chaque atelier à traver cette interface.

ISIM’Sfax Page 19
ANALYSE DES BESOINS

2.2.1.4 Diagramme de use-cases

F IGURE 2.1 – Diagramme de cas d’utilisation

ISIM’Sfax Page 20
ANALYSE DES BESOINS

2.2.2 Assigner les priorités aux use-cases

Use-cases Importance Critique Priorité

S’authentifier 2-2 2-3 2-3

Remplir les fiches d’hygiénes 3-2 3-3 2-3

Consulter les taux de conformités -2 3-3 2-3

Consulter les dashboards 3-2 3-3 2-3

Modifier les fiches d’hygiénes 3-2 3-3 2-3

Gérer les ateliers 3-2 3-3 2-3

Gérer les departements 3-2 3-3 2-3

Gérer les ateliers 3-2 3-3 2-3

Gérer les PRR 3-2 3-3 2-3

Gérer les critéres 3-2 3-3 2-3

Gérer les indice 3-2 3-3 2-3

Créer les comptes 3-2 3-3 2-3

2.2.3 Description textuelle

2.2.4 Le protétype

Cette technique consiste à préparer quelques interfaces graphiques de l’application en utilisant

un outil de conception des prototypes afin de mesurer le degré de satisfaction du client par
rapport à la compréhension du projet. L’interaction qui se produit entre l’utilisateur final et le
développeur, à la suite de la discussion sur ces interfaces, permet d’ajuster les besoins et de les
concevoir de manière précise et exacte. En effet, les interfaces graphiques font que l’utilisateur
final soit plus interactif, précis et le pousse à mieux s’exprimer.

ISIM’Sfax Page 21
ANALYSE DES BESOINS

2.2.4.1 Page d’accueil

F IGURE 2.2 – Maquette de page d’accueil

ISIM’Sfax Page 22
ANALYSE DES BESOINS

2.2.4.2 Fiche D’hygiéne à remplir

F IGURE 2.3 – Maquette de choisir le souhaité de l’intente

F IGURE 2.4 – Maquette de fiche d’hygiéne pour tous les départements sauf "maintenance"

F IGURE 2.5 – Maquette de fiche d’hygiéne pourle département "maintenance"

ISIM’Sfax Page 23
ANALYSE DES BESOINS

2.2.4.3 Modifier le fiche d’hygiéne par un administrateur

F IGURE 2.6 – Maquette de modifier fiche d’hygiénel

2.2.4.4 Ajouter un utilisateur

F IGURE 2.7 – Maquette d’ajouter une personne

ISIM’Sfax Page 24
ANALYSE DES BESOINS

2.2.4.5 Afficher le taux de conformité

F IGURE 2.8 – Maquette de taux de conformité

2.2.4.6 Afficher le dashboard

F IGURE 2.9 – Maquette de dashboard

ISIM’Sfax Page 25
ANALYSE DES BESOINS

2.2.4.7 Le protétype du pied de page

F IGURE 2.10 – Maquette du pied de page

2.2.4.8 Gérer les départements

F IGURE 2.11 – Maquette de gérer les départements

ISIM’Sfax Page 26
ANALYSE DES BESOINS

2.2.4.9 Gérer les ateliers

F IGURE 2.12 – Gérer les ateliers

2.2.5 Diagramme de use-cases détaillé

ISIM’Sfax Page 27
Chapitre

3
Analyse architecturale

Sommaire
3.1 Ebauche de classe d’analyse . . . . . . . . . . . . . . . . . . . . 29
3.1.1 Ebauche de classe . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.1.2 Ebauche de package . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2 Ebauche package d’analyse . . . . . . . . . . . . . . . . . . . . . 29
3.2.1 Identification des classe . . . . . . . . . . . . . . . . . . . . . . 29
3.2.2 Identification des séquences . . . . . . . . . . . . . . . . . . . . 29
3.3 Analyse de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.3.1 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . 29
3.4 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

ENET’COM SFAX Page 28

ANALYSE ARCHITECTURALE

3.1 Ebauche de classe d’analyse

3.1.1 Ebauche de classe

3.1.2 Ebauche de package

3.2 Ebauche package d’analyse

3.2.1 Identification des classe

3.2.2 Identification des séquences

3.3 Analyse de classe

3.3.1 Diagramme de classe

3.4 CONCLUSION

ISIM’Sfax Page 29
Chapitre

4
Réalisation

Sommaire
4.1 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.2 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.3 SECTION 1.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.3.1 SUBSECTION 1.3.1 . . . . . . . . . . . . . . . . . . . . . . . . 31
4.3.2 SUBSECTION 1.3.2 . . . . . . . . . . . . . . . . . . . . . . . . 31
4.4 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

ENET’COM SFAX Page 30

RÉALISATION

4.1 Implementation

4.2 Test

4.3 SECTION 1.3

4.3.1 SUBSECTION 1.3.1

4.3.2 SUBSECTION 1.3.2

4.4 CONCLUSION

ISIM’Sfax Page 31
Chapitre

5
CONCLUSION GÉNÉRALE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus
tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec
nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.
Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in
risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in
pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae ; Aliquam nibh.
Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
hendrerit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus
tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec
nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.
Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in
risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in
pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae ; Aliquam nibh.
Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
hendrerit.

ENET’COM SFAX Page 32

 BIBLIOGRAPHIE

[1] https ://patisseriemasmoudi.fr/pages/qui-sommes-nous

[2] https ://kinsta.com/fr/base-de-connaissances/qu-est-ce-que-laravel/questce-que-laravel-

[3] https ://kinsta.com/fr/base-de-connaissances/qu-est-ce-que-laravel/pourquoi-utiliser-laravel-

[4] https ://fr.wikipedia.org/wiki/HTML5

[5] https ://www.atinternet.com/glossaire/css/ : :text=CSS

[6] https ://fr.wikipedia.org/wiki/JavaScript

[7] https ://fr.wikipedia.org/wiki/Bootstrap (framework)

[8] https ://matob.web.id/fr/avantages-de-base-de-donnees-mysql/

[9] https ://code.visualstudio.com/

[10] https ://fr.wikipedia.org/wiki/Microsoft8Power8BI

[11] https ://fr.overleaf.com/project

[12] https ://mockflow.com/about/

[13] https ://fr.wikipedia.org/wiki/Processus8unifiéCycle8de8vie8des8projets

[14] https ://fr.wikipedia.org/wiki/Processus8unifiéEnchainementsd’activités

[15] https ://fr.wikipedia.org/wiki/Processus8unifiéEnchainementsd’activités

[16] https ://fr.wikipedia.org/wiki/Cycle en V

ENET’COM SFAX Page 33

 ANNEXES

A.1 TITRE ANNEXE 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus
tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec
nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.
Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.

images/your_image.png

F IGURE A.1 – Titre de figure annexe 1

ENET’COM SFAX Page 34

ANNEXES

A.2 TITRE ANNEXE 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus
tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec
nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.
Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in
risus volutpat libero pharetra tempor.

images/your_image.png

F IGURE A.2 – Titre de figure annexe 2

ISIM’Sfax Page 35
 TITRE DU PROJET

Prénom NOM

Résumé :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy
molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu
massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.
Mots clés :Lorem, ipsum, dolor, sit amet, consectetur, adipiscing elit.

Abstract :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy
molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu
massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.
Key-words : Lorem, ipsum, dolor, sit amet, consectetur, adipiscing elit.