Rapport de Stage (PFE)

Université Hassan 1er
Faculté des Sciences et Techniques

-Settat-
Projet de Fin d’Etude

En vue de l’obtention du diplôme
LICENCE SCIENCES ET TECHNIQUES EN GENIE

INFORMATIQUE
Présenté par :
LATRACHE OHTMAN
Application Web pour la gestion des scraps
Effectué à :
LEONI Wiring Systems (Berrechid)
Sous la direction de :
Pr. Sara AREZKI, Faculté des Sciences et Techniques de Settat
M. Yassir EZZAAF, LEONI Wiring Systems (Berrechid)
Soutenu le 13 Juin 2023, devant le jury :
M. Amine BENMAKHLOUF Professeur à la FST de Settat

Mme. Sara AREZKI Professeur à la FST de Settat
Année Universitaire : 2022-2023

Dédicaces
Je dédie ce modeste travail :
A ma Mère AMINA,
‘‘ Vous m’avez donné la vie, la tendresse et le courage pour réussir. Tout ce que je
peux vous offrir ne pourra exprimer l’amour et la reconnaissance que je vous porte.
En témoignage, je vous offre ce modeste travail pour vous remercier pour vos
sacrifices et pour l’affection dont vous m’avez toujours entourée’’
A mon Père HASSAN,

‘‘Nos épaules solides, aucune dédicace ne saurait exprimer mes sentiments. Que
Dieu vous préserve et vous procure santé et longue vie. ’’
A mes Frères (NOUHAILA, RADOUANE, FATIMA et MANAL),

‘‘Nos anges gardiens et nos fidèles accompagnants dans les moments les plus délicats
de cette vie. On vous dédie ce travail avec tous nos vœux de bonheur, de santé et
de réussite. ’’
A mes ami(e)s,
Pour leur soutien et leur encouragement. A tous ceux qui ont contribué de près ou
de loin à la réalisation de ce travail.
LATRACHE OHTMAN
Remerciement
« Louange à Dieu, le très miséricordieux, le tout clément »
Au niveau professionnel, j’aimerais amorcer mes remerciements par la

citation de Socrate : « Le savoir est la seule matière qui s’accroit lorsqu’on la
partage », afin de mettre en valeur toute personne ayant partagé avec moi son savoir
à la FST SETTAT et à LEONI.
Suite à ce présent travail, je tiens à remercier notre professeur Madame

AREZKI SARA, l’encadrant pédagogique pour son soutien et ses recommandations
judicieuses, pour tout le temps qu’elle m’a octroyé et pour tous les conseils
pertinents qu’elle m’a prodigués.
Je tiens à exprimer ma profonde admiration aussi, mon respect et mes hautes

considérations à toute l´équipe du service IT pour l´expérience enrichissante et
pleine d’intérêts qu´elles nous faits vivre durant ce stage au sein de leur
établissement en particulier :
Mr EZZAAF Yassir chef de département IT et mon encadrent au sein du

groupe LEONI, pour son accueil chaleureux, son aide précieuse et ses conseils
pertinents tout au long de ce stage.
Mes remerciements vont également à l’ensemble du personnel de LEONI, il

me faut une liste très longue des personnes avec qui j’ai passé une très bonne
expérience même si de deux mois. Merci de m’avoir intégré chaleureusement dans
votre équipe et d’avoir passé du temps pour partager des informations avec nous.
Merci aussi à l’ensemble des professeurs de la faculté des sciences et

techniques de Settat spécialement nos professeurs du département Mathématiques-
Informatique, pour leur contribution à notre formation.
Résumé
Le présent rapport découle d'un projet de fin d’études effectué au sein de Leoni
Berrechid, dans le cadre de notre parcours de formation en vue de l'obtention du diplôme de
LICENCE SCIENCES ET TECHNIQUES EN GENIE INFORMATIQUE.
L'objectif principal de ce projet est la conception et le développement d'un site web

dédié à la gestion du parc informatique de la direction d'exploitation au Port de Safi. La
réalisation de ce site web s'appuie sur les langages HTML, CSS, PHP et MySQL, ainsi que sur
le Framework Bootstrap.
Abstract
This report stems from a final year project conducted at Leoni Berrechid, as part
of our training program leading to the Bachelor's degree in Computer Engineering
Sciences and Technologies.
The main objective of this project is the design and development of a website
dedicated to managing the computer park of the Operations Department at the Port
of Safi. The implementation of this website relies on HTML, CSS, PHP, and MySQL
languages, as well as the Bootstrap framework.
Liste des tableaux
Tableau 1 : Historique de LEONI……………………………………………………………………………………………………….….…….3
Tableau 2 : LEONI région MAROC……………………………………………………….………………..……3
Tableau 3 : procédure de la gestion des rebuts………………………………………………………………………………………..……9
Tableau 4 : Planning prévisionnel…………………………………………………………………….………...12
Tableau 5 : Acteurs du système………………………………………………………………………..………...14
Tableau 6 : Description textuelle « Authentification » ………………………………….……………….…….17
Tableau 7 : Description textuelle « Voir informations segment » ……………………….………………...…17
Tableau 8 : Description textuelle « Voir info référence » ………………………………….………………….18
Tableau 9 : Description textuelle « Voir info projet » ……………………………………………….…….….18
Tableau 10 : Description textuelle « Voir info famille » …………………………………………….………...18
Tableau 11 : Description textuelle « Voire demande de mitraillage »………………………………..……….19
Tableau 12 : Description textuelle « Remplir fichier de ramassage »…………………………….………..…19
Tableau 13 : Description textuelle « Remplir demande de mitraillag » ………………………..………….…19
Tableau 14 : Matériel de base…………………………………………………………………….……………..28

Liste des figures
Figure 1 : Site Berrechid………………………………………………………………………………………………………………………………4
Figure 2 : Poste opérateur……………………………………………………………………………………………………………………………7
Figure 3 : Demande de Mitraillage…………………………………………………………………………………………………….……..…8
Figure 4 : la balance………………………………………………………………………………………………………………………………….…8
Figure 5 : Zone de Ramassage………………………………………………………………………………………………………………..…..8
Figure 6 : Les étapes de la méthodologie en Y………………………………………………………………………………………..…12
Figure 7 : Diagramme de Gantt…………………………………………………………………………………………………………………13
Figure 8 : Diagramme de cas d’utilisation…………………………………………………………………………………………………16
Figure 9 : Diagramme de classe………………………………………………………………………………………………………………..20
Figure 10 : Diagramme de séquence « Authentification » ……………………………………………………………………….21
Figure 11 : Diagramme de séquence « remplir demande de mitraillage » ………………………………………………22
Figure 12 : Diagramme de séquence « gestion_projet » ……………………………………………………………………………23
Figure 13 : Diagramme de séquence « consulter demande de mitraillage »………………………………………………24
Figure 14 : Diagramme de séquence « remplir fichier de ramassage » ………………………………………………….…25
Figure 15 : Diagramme de séquence « gestion_segment »………………………………………………………………………..26
Figure 16 : Diagramme de séquence « consulter demande de ramassage »………………………………………………27
Figure 17 : logo HTML……………………………………………………………………………………………………………………………..28
Figure 18 : logo CSS3 ……………………………………………………………………………………………………………………………….29
Figure 19 : logo PHP………………………………………………………………………………………………………………………………….29
Figure 20 : logo JS …………………………………………………………………………………………………………………………………….29
Figure 21 : logo MySQL…………………………………………………………………………………………………………………………….30
Figure 22 : logo Bootstrap………………………………………………………………………………………………………………………….30
Figure 23 : logo VS Code…………………………………………………………………………………………………………………………..31
Figure 24 : logo WampServer……………………………………………………………………………………………………………………32
Figure 25 : logo Enterprise Architect…………………………………………………………………………………………………………32
Figure 26 : logo Gantt project……………………………………………………………………………………………………………………33
Figure 27 : Interface « Home »………………………………………………………………………………………………………………….34
Figure 28 : Interface « Authentification»………………………………………………………………………………………………….34
Figure 29 : Interface « demande de mitraillage »………………………………………………………………………………………35

Figure 30 : Interface « Authentification»………………………………………………………………………………………..………..35
Figure 31 :Interface « Accueil»………………………………………………………………………………………………………….………36
Figure 32 : affichage du boutons Profil et Déconnexion…………………………………………………………………………….36
Figure 33 : Interface « Consulter profil »…………………………………………………………………………………………….……37
Figure 34 : Interface « Modifier profil »……………………………………………………………………………………………….…..37
Figure 35 : Interface « Voire projet »………………………………………………………………………………………………………..38
Figure 36 : Interface « Ajouter projet »…………………………………………………………………………………………………….38
Figure 37 : Interface « Modifier projet »…………………………………………………………………………………………………..39
Figure 38 : Interface « Voire segment »…………………………………………………………………………………………………….39
Figure 39 : Interface « Ajouter segment »…………………………………………………………………………………………………40
Figure 40 : Interface « Modifier segment »……………………………………………………………………………………………….40
Figure 41 : Interface « Consulter demande de mitraillage »……………………………………………………………………..41
Figure 42 : Interface « Demande de mitraillage »……………………………………………………………………………………..41
Figure 43 : Exemple d’une demande de mitraillage…………………………………………………………………………………..42
Figure 44 : Interface « remplir fichier de ramassage »……………………………………………………………………………..43
Figure 45 : Interface « consulter fichier de ramassage »…………………………………………………………………………..43
Figure 46 : Exemple d’un fichier de ramassage………………………………………………………………………………………..44

Table des matières
Introduction générale ............................................................................................................................ 1

Chapitre 1 : Contexte Générale du Projet .......................................................................................... 2
A. Présentation du Groupe LEONI : ............................................................................................ 2
1. Le Groupe LEONI : .............................................................................................................. 2
2. Evolution du groupe LEONI : .............................................................................................. 3
3. LEONI Région Maroc :......................................................................................................... 3
B. Présentation de LEONI Berrechid : ........................................................................................ 4
1. Activités du site :.................................................................................................................... 4
2. Organigramme : .................................................................................................................... 4
3. Les services du site : .............................................................................................................. 4
C. Contexte du projet : .................................................................................................................. 7
1. L’existent (description de la procédure de la gestion des rebuts de production) :................... 7
Le transfert des rebuts à la zone de pesage : ...................................................................................... 9
2. Critiques de l’existent :.......................................................................................................... 10
3. Solution proposée : ................................................................................................................ 11
4. Méthodologie de travail :....................................................................................................... 12
5. Planning prévisionnel du déroulement du projet : ................................................................. 12
6. Diagramme de Gantt : .......................................................................................................... 13
D. Conclusion :.............................................................................................................................. 13
Chapitre 2 : Etude fonctionnelle et technique .................................................................................. 14
A. Etude fonctionnelle : ..................................................................................................................... 14
1. Identification des acteurs : ......................................................................................................... 14
2. Spécification des besoins fonctionnels : .................................................................................... 14
3. Spécification des besoins non fonctionnels : ......................................................................... 15
4. Méthode de conception : UML.................................................................................................. 16
5. Diagramme de cas d’utilisation : ............................................................................................... 16
Description : .................................................................................................................................. 17
Identification des cas d’utilisation : ............................................................................................. 17
6. Diagramme de classe : ............................................................................................................... 20
7. Diagrammes de séquence : ........................................................................................................ 20
B. Etude technique : ........................................................................................................................... 28
1. Matériel de base : ...................................................................................................................... 28
2. Langage de programmation : ..................................................................................................... 28
3. Framework : .............................................................................................................................. 30
4. Logiciels : .................................................................................................................................. 31
C. Conclusion :................................................................................................................................... 33
Chapitre 3 : Réalisation ...................................................................................................................... 34
A. Partie Opérateur :........................................................................................................................... 34
1. Interface « Home » : .................................................................................................................. 34
2. Interface « Authentification » :.................................................................................................. 34
3. Interface « demande de mitraillage » : ...................................................................................... 35
B. Partie Agent matière : .................................................................................................................... 35
1. Interface « Authentification » :.................................................................................................. 35
2. Interface « Accueil » : ............................................................................................................... 36
3. Interface « Consulter profil » : .................................................................................................. 36
4. Interface « Modifier profil » :.................................................................................................... 37
5. Interface « Voire projet » : ........................................................................................................ 38
6. Interface « Ajouter projet » : ..................................................................................................... 38
7. Interface « Modifier projet » : ................................................................................................... 39
8. Interface « Voire segment » : .................................................................................................... 39
9. Interface « Ajouter segment » : ................................................................................................. 40
10. Interface « Modifier segment » : ......................................................................................... 40
11. Interface « Consulter demande de mitraillage » : .................................................................. 41
12. Interface « Remplir fichier de ramassage » : ......................................................................... 43
13. Interface « Consulter fichier de ramassage » : ...................................................................... 43
C. Conclusion :................................................................................................................................... 44
Conclusion Générale ............................................................................................................................. 45
Webographie ......................................................................................................................................... 47
INTRODUCTION GENERALE
Introduction générale
Le présent rapport présente en détail le projet de fin d'études réalisé au sein de

l’entreprise LEONI Wiring Systems (Berrechid), une entreprise spécialisée dans L’industrie
automobile, dans le cadre de la conception et du développement d'une application web de
gestion des scraps.
L'objectif principal de ce projet était de concevoir et de développer une application web

efficace et conviviale permettant à l'entreprise de gérer de manière optimale ses scraps. Les
scraps, ou rebuts, représentent les produits défectueux, les matériaux non conformes ou les
résidus de production qui nécessitent une gestion appropriée pour minimiser les pertes et
maximiser la productivité.
Dans un contexte où l'efficacité opérationnelle et la réduction des coûts sont des enjeux
majeurs pour les entreprises, il est essentiel de mettre en place des solutions technologiques
adaptées pour optimiser la gestion des scraps. L'application web développée dans le cadre de
ce projet vise à répondre à ce besoin en offrant une plateforme centralisée et intuitive pour le
suivi, l'analyse et la gestion des scraps.
Le présent rapport va nous aider à bien comprendre l'objectif de l'application réaliser.

Ce dernier se compose de quatre chapitres :
Le premier chapitre, dresse une présentation générale de LEONI Berrechid en tant

qu’organisme d’accueil où j’ai réalisé mon projet de fin d’études. Il donne également, un aperçu
sur le processus de production des câbles, et une présentation du projet de fin d’études qui
définit la problématique, le cahier de charges, ainsi que le planning de travail.
Ensuite Le deuxième chapitre sera focalisé sur la phase conceptuelle de notre projet et les
langages de développements utilisés.
Le dernier chapitre va présenter la phase de réalisation.
Finalement, le rapport est clôturé par une conclusion qui résume l'ensemble du travail.
1
CONTEXTE GENERALE DU PROJET
Chapitre 1 : Contexte Générale du Projet
Dans ce chapitre, nous allons donner un aperçu général sur le groupe Allemand Leoni Wiring
Système ainsi que sa filiale Marocaine LEONI Berrechid, tout en présentant ses principales
missions et ses différents services et en détaillant son processus de fabrication des faisceaux
automobiles. Ainsi, nous allons présenter notre projet de fin d’études et le contexte dans lequel
il s’inscrit.
A. Présentation du Groupe LEONI :

1. Le Groupe LEONI :
LEONI Wiring System est une entreprise multinationale allemande qui se compte
parmi les plus grands et plus anciens fabricants et concepteurs mondiaux de fils, de
câbles et de systèmes de câblage. Sur de nombreux marchés internationaux. L’entreprise
se caractérise par sa capacité à apporter des changements, et des nouveaux
développements sur le marché, satisfaire les besoins et les exigences des clients. Le
groupe occupe une position du leader et compte plus de 75 000 collaborateurs répartis
dans 32 pays et au sein d’une centaine d’implantations, développent, fabriquent et
vendent des produits dans des domaines d’application variés.
Les clients du groupe LEONI sont des entreprises de l'industrie, des fournisseurs
d’appareils électriques comme l’automobile, de biens d'équipements et de
communication ainsi que l’ingénierie médicale. La société a une chaîne de valeur des
produits, ce qui est unique dans le secteur Par ailleurs, la clientèle de LEONI comprend
des sociétés bien connues telles que : BMW, Bosch, Yazaki, Fiat, IBM, Jaguar et Land
Rover, Mercedes-Benz, Peugeot Citroën, Philips, Porsche, Nissan, Renault, Shell,
Siemens et Volvo.
2
2. Evolution du groupe LEONI :
L'histoire de LEONI est marquée par des progrès rapides. Le fondement de la société
a été posé dans le Moyen Age, mais c’est durant les 20 dernières années que l’entreprise
a pu atteindre sa plus forte croissance :
1569 Anthoni Fournier fond un atelier à Nuremberg pour fabriquer des fils d’or et d’argent.
3 sociétés Johann Balthasar Stieber & Sohn /Nuremberg, Johann Philip Stieber /Roth, et
1917 Vereinigte Leonische Fabriken/Nuremberg forment Leonische Werke Roth-Nürnberg AG’.
1931 Le nom de la société est modifié pour Leonische Drahtwerke AG.
Les premiers faisceaux de câbles sont produits, en augmentant sensiblement le ratio de la
1956 production réelle nette.
Le début de la stratégie d'acquisition avec le rachat de Westfälische Kupfer-und Messingwerke
1989 Lüdenscheid, en Allemagne et Kabelfabrik Otto Zimmermann.
LEONI acquiert la division système de câblage de la société Valeo, réalisant ainsi la plus
2008 importante acquisition dans son histoire et devenant leader du marché européen.
LEONI lance un programme très important de réduction de coûts.
2009
Tableau 1 : Historique de LEONI
3. LEONI Région Maroc :
Le Maroc soutient et accompagne les projets industriels de grande envergure qui

participent à la dynamique de la régionalisation à l’œuvre dans le royaume et à la
concrétisation d’un développement équilibré et intégré. En effet, le secteur automobile
marocain continue d’avoir le vent en poupe.
Le spécialiste allemand du câblage, LEONI compte à :
Berrechid Casablanca
• LEONI Wiring Systems (Berrechid) • LEONI Wiring systems Bouskoura
• LEONI Wiring Systems (GM) • LEONI Wiring systems Ain sebaa
• LEONI Wiring systems Bouznika
• Bureau d’études à Technopark.
Tableau 2 : LEONI région MAROC
3
B. Présentation de LEONI Berrechid :

1. Activités du site :
Le site produit des faisceaux électriques pour automobile à partir des câbles
électriques, des boitiers et des connexions qui sont stockés dans le magasin de la matière
première. Les différentes familles de faisceaux électriques fabriquées sont : « Habitacle
», « Principal » « Planche de bord »
Figure 1 : Site Berrechid
2. Organigramme :
LEONI Berrechid adopte une structure fonctionnelle. En effet, elle est composée de
plusieurs départements à savoir : IT, ressources humaines, logistique, management de
la qualité, LPS plus, et financier. Pendant notre stage, nous étions affectées au service
Engineering.
3. Les services du site :
Nombreux sont les services du site LEONI Berrechid dont chacun a un rôle différent de l’autre.
Parmi ces services, on trouve :
4
Service IT :
✓ Surveiller les performances de différents systèmes informatiques, tels que les serveurs,
les réseaux et les applications.
✓ Gestion des incidents.
✓ Gérer la configuration de divers systèmes informatiques.
Service achat :
✓ Déployer la stratégie et le politique achat du groupe LEONI.

✓ Etablir et gérer le panel fournisseurs et la mesure et l’évaluation de leurs
performances.
✓ Négocier les contrats dans tout leur aspect.
✓ Valider et gérer les bons de commande.
Service Direction des Ressources Humaines :
Il se compose de deux départements :
Administration du personnel & Gestion Opérationnelle RH dont les missions sont :
✓ Elaborer la paie, gérer le pointage.

✓ Gérer l’effectif et tableau de bord.
✓ Gérer les dossiers et les contrats des salariés, et établir les déclarations auprès des
organismes sociaux.
Développement RH dont les missions sont :
✓ Recrutement et intégration des nouveaux embauchés et stagiaires.

✓ Etablir le plan de formation, organiser et réaliser les formations, suivre l’évaluation.
✓ Suivre des entretiens annuels d’évaluation et plan de carrière et mobilité.
Service SHE :
✓ Gérer la mise en place du Système de Management Environnement (S.M.E).

✓ Etablir les actions correctives et préventives pour l’environnement.
Service comptabilité :
✓ Assurer la comptabilité.
✓ Etablir les états de synthèse (Bilan et comptes de résultats) à leur exacte période.
5
✓ Préparer et établir les différentes déclarations fiscales.

✓ Faire le suivi des dossiers de remboursement de T.V.A et autres crédits d’impôts.
Service contrôle de gestion :
✓ Gérer la trésorerie et optimiser le besoin en fonds de roulement du site.

✓ Analyser et valider les résultats comptables et de gestion.
✓ Assurer le calcul des principaux indicateurs de la performance financière
Service logistique :
✓ Contrôler et améliorer le niveau des stocks conformément aux objectifs et cibles.

✓ Assurer la planification, le suivi, et l’application des modifications d’ordonnancement
des produits finis.
✓ Suivre les commandes en cours de livraison (transit, retards fournisseurs…).
Service PPE :
✓ Assurer la rentabilité des investissements matériels de l’entreprise en maintenant son

potentiel d’activité.
✓ Auditer systématiquement les moyens de contrôle électrique et veiller à la
maintenance préventive des bancs off line par les techniciens maintenance selon les
gammes en vigueur.
Service qualité :
✓ Garantir la conformité des produits par rapport aux standards LEONI, cahiers des
charges, normes et réglementations.
✓ Animer la démarche qualité totale orientée vers le zéro défaut.
✓ Etablir et maintenir le système qualité selon les orientations de la direction qualité.
Service LEONI Productivity System (LPS Plus) :
✓ Réduire les coûts de la chaîne de valeur, en éliminant en permanence les Mudas

engendrés par la mauvaise utilisation de ressources.
✓ Animer des workshops et chantiers d’amélioration continue.
✓ Suivre les CIP (CIP : Continuos Improvement Proposition).
6
Le centre industriel (Engineering) :
✓ Traduire des plans de câblages reçus des clients en nomenclatures d’assemblage.

✓ Gérer et maîtriser les dossiers d’industrialisation des familles de produit pilotées
(Plans/Chiffrage).
✓ Réaliser des préséries en coordination avec les responsables.
C. Contexte du projet :
1. L’existent (description de la procédure de la gestion des rebuts de production) :
Chaque équipe identifiée par un Projet, Famille, Segment dispose d'un bac dédié pour y ajouter
tous les types de rebuts générés durant leur période de travail.
Le bac dédié
pour ajouter les
rebuts
Figure 2 : Poste opérateur
7
A la fin de chaque période, un opérateur par équipe est désigné pour remplir un formulaire de
déclaration de références de tous les rebuts collectés (Fiche de demande de mitraillage).
Cette fiche est ensuite validée par un Agent Matière.
Figure 3 : Demande de Mitraillage
Parallèlement, On passe à l'étape de peser les rebuts par équipes. Et remplir un fichier (Fichier
de ramassage).
Figure 4 : la balance Figure 5 : Zone de Ramassage
8
Voici un tableau qui simplifier l’exécution de cette procédure :
Tableau 3 : procédure de la gestion des rebuts
Préparation et stockage des rebuts sur le segment :

✓ Les rebuts doivent être triés en fils, composants plastiques, connexion…lors de
leur stockage sur le segment chaque jour une heure avant la fin d’équipe.
✓ Les signatures du superviseur, responsable segment, Responsable Qualité
opérationnelle segment et Responsable Logistique sont exigées pour le transfert
des rebuts à la zone de pesage.
Le transfert des rebuts à la zone de pesage :

L’agent matière est responsable du transfert les rebuts du segment à la zone de pesage et
ne doit pas accepter un rebut :
✓ Mélangé.
✓ Sans fiche de mitraillage des rebuts y relative. (Répondant aux exigences déjà citées)
9
Ce processus professionnel permet de garantir une gestion optimale des scraps tout en assurant
la traçabilité de chaque étape du processus.
2. Critiques de l’existent :
Les tâches liées à la gestion des scraps sont d'une importance cruciale, mais leur caractère
fastidieux et complexe est souvent exacerbé par une approche manuelle.
À l'heure actuelle, la gestion du scraps repose sur la saisie manuelle d'informations dans des
fichiers papier, ce qui entraîne un certain nombre de défis à relever.
Parmi ceux-ci figurent :

✓ La gestion d'une masse importante d'informations à traiter manuellement présente
de nombreux défis. Tout d'abord, il est nécessaire de rechercher manuellement le prix
de chaque référence, ce qui accroît le risque d'erreurs et de donner un prix erroné. En
effet, le processus de recherche manuelle peut être laborieux et fastidieux, laissant place
à des inexactitudes potentielles. De plus, lors de la saisie des références, il existe un
risque de commettre des erreurs, notamment en saisissant une référence qui n'existe pas
dans le système. Cette problématique est souvent exacerbée par la grande quantité de
références à saisir lors du remplissage d'un fichier, augmentant ainsi les possibilités
d'erreurs de saisie. Par ailleurs, la lecture des références à partir d'un support papier peut
également poser des difficultés, car l'écriture manuelle peut parfois être illisible, ce qui
entraîne des confusions et des erreurs lors de l'interprétation des données.
✓ Lorsqu'il y a une grande quantité de documents papier à archiver, il existe un risque

de perte de ces documents. Cela est dû à la nature même du support papier, qui peut être
facilement égaré, endommagé ou détruit. La manipulation fréquente de nombreux
documents papier augmente les chances de les perdre ou de les confondre. De plus, les
documents papier sont sensibles à divers facteurs tels que l'usure, l'humidité, les
incendies ou les dégâts causés par des accidents. Si ces documents sont perdus, cela peut
entraîner des problèmes tels que la perte d'informations précieuses, des retards dans les
processus de travail ou des difficultés à respecter les exigences légales ou
réglementaires. Une redondance de l'information et une perte de temps considérable lors
de la recherche d'informations.
10
✓ Lorsque l'on doit faire face à un grand nombre de documents à archiver, il devient
essentiel de disposer d'une surface suffisamment spacieuse pour les stocker de manière
adéquate.
3. Solution proposée :
Face au constat de la situation, j'ai suggéré une approche informatique pour remédier au
problème et simplifier les tâches en question.
Il s'agit de la conception d'une application web dotée de fonctionnalités variées.
Cette solution vise à offrir une expérience utilisateur intuitive et efficace, tout en atteignant les
objectifs suivants :
• Automatisation du traitement des informations : L'application pourrait automatiser

le processus de recherche du prix de chaque référence, Cela réduirait considérablement
le risque d'erreurs humaines et d'inexactitudes, tout en accélérant le traitement des
informations.
• Grâce à cette application, l’accès à toutes les informations dont j'ai besoin devient
rapide et facile. Tout est à portée de main. Plus besoin de passer des heures à chercher
des informations dispersées, les obtenir instantanément en quelques clics. Cette
fonctionnalité est un véritable atout, car elle permet de gagner en efficacité et en
productivité. On peut prendre des décisions éclairées et rapides, car l'information dont
on a besoin est disponible en tout temps
• L'utilisation de cette application peut considérablement optimiser l'espace d'archivage
disponible. En effet, grâce à cette application, il devient possible de réduire la
dépendance aux supports physiques tels que les documents papier. En numérisant les
documents et en les stockant électroniquement, l'application permet de libérer de
l'espace physique précieux dans les locaux d'archivage.
• Cette application offre une sécurité optimale pour les informations qu'elle contient.
L'accès à ces données n'est pas donné à n'importe qui. Grâce à un système
d'authentification robuste, seuls les utilisateurs autorisés peuvent accéder à l'information
disponible. Cela garantit la confidentialité et la protection des données sensibles. En
restreignant l'accès aux personnes appropriées, cette application assure une gestion
sécurisée des informations, réduisant ainsi les risques de fuites ou de violations de la
confidentialité.
11
• La gestion des scraps est grandement améliorée grâce à cette application. Elle offre une
réduction significative des risques d'erreur liés aux informations et facilite la prise de
décisions. Grâce à une interface conviviale et des fonctionnalités avancées, cette
application permet une meilleure gestion des scraps tout en améliorant l'efficacité
opérationnelle.
4. Méthodologie de travail :
Le modèle en Y est un modèle de développement logiciel qui combine les phases

descendantes (Downstream) et ascendantes (Upstream) pour assurer une collaboration étroite
entre les différentes disciplines impliquées dans le processus de conception d'une application.
Il vise à réduire les risques en identifiant rapidement les problèmes et en facilitant la
communication entre les équipes.
Figure 6 : Les étapes de la méthodologie en Y
5. Planning prévisionnel du déroulement du projet :
Le planning prévisionnel consiste à coordonner l'ensemble des activités d'un projet de

manière méthodique. Il facilite la mise en place des différentes phases de réalisation du projet
et offre une vue d'ensemble de leur progression chronologique.
12
Mois Avril Mai
Etape
SEMAINE 1 2 3 4 1 2 3 4
Etude préalable
Conception
Réalisation
Test et validation
Rédaction du
rapport
Tableau 4 : Planning prévisionnel
6. Diagramme de Gantt :
Figure 7 : Diagramme de Gantt
D. Conclusion :
Ce chapitre nous a permis de situer le projet dans son contexte. En effet, notre projet de fin
d'études a été réalisé au sein de l'entreprise LEONI et avait pour objectif la mise en place d'une
solution de gestion des déchets de production.
13
ETUDE FONCTIONNELLE ET TECHNIQUE
Chapitre 2 : Etude fonctionnelle et technique
A. Etude fonctionnelle :
Cette partie est dans le but d’identifier les services que doit fournir notre application, nous allons
détailler les exigences spécifiques qui consistent en des besoins fonctionnels et non
fonctionnels.
1. Identification des acteurs :
Un acteur représente l’abstraction d’un rôle joué par des entités qui interagissent directement
avec le système étudié. Dans cette partie, nous allons énumérer les acteurs susceptibles
d’interagir avec le système. Généralement nous pouvons distinguer trois types d’acteurs :
Il est responsable sur le bon fonctionnement du site

web. Il peut accéder, voir et imprimer toutes les
demandes de mitraillages, voir les statistiques.
Est un employé de l’entreprise qui va remplir les

demandes de mitraillages.
Tableau 5 : Acteurs du système
2. Spécification des besoins fonctionnels :
Il est nécessaire que l'application soit en mesure de prendre en charge deux catégories
d'utilisateurs distinctes : le responsable et l’opérateur. Une exigence primordiale à satisfaire
pour cette application est la suivante :
14
L’agent matière est censé :
❖ S’authentifier.
❖ Accéder à toutes les demandes de mitraillages.
❖ Remplir les fichiers de ramassages.
❖ Ajouter, modifier et supprimer un Projet.
❖ Ajouter, modifier et supprimer un Segment.
❖ Ajouter, modifier et supprimer un opérateur.
❖ Ajouter, modifier et supprimer une référence.
L’opérateur est censé :
❖ Se connecter en utilisant le nom d'utilisateur et le mot de passe du segment.

❖ Remplir demande de mitraillage.
3. Spécification des besoins non fonctionnels :
En dehors des besoins de base, notre système doit respecter les critères suivants :
❖ Ergonomie et convivialité : l'application doit offrir une interface utilisateur simple et

élégante pour faciliter l'utilisation de ses services.
❖ Portabilité, maintenance et évolutivité : l'application doit être compatible avec

plusieurs systèmes d'exploitation pour garantir sa flexibilité, son évolutivité et sa
maintenance. Le code doit être facilement lisible, compréhensible et modulaire afin de
répondre rapidement aux changements du marché.
❖ Rapidité et robustesse : l'application doit être rapide et fiable pour garantir une
expérience utilisateur fluide, permettant aux candidats de postuler facilement et à
l'administrateur de sélectionner rapidement et efficacement les candidatures les plus
pertinentes.
❖ Sécurité : l'application doit respecter la confidentialité des données pour garantir la

sécurité de tous les utilisateurs.
15
4. Méthode de conception : UML
L'UML (Unified Modeling Language ou Langage de modélisation unifiée en français)

est un langage graphique de modélisation informatique. Ce langage est désormais la référence
en modélisation objet, ou programmation orientée objet. Cette dernière consiste à modéliser des
éléments du monde réel (immeuble, ingrédients, personne, logos, organes du corps...) ou virtuel
(temps, prix, compétence...) en un ensemble d'entités informatiques appelées « objet ».
5. Diagramme de cas d’utilisation :
Les cas d’utilisation permettent d’exprimer les besoins des utilisateurs d’un système. Le
diagramme de cas d’utilisation permet donc d’identifier les possibilités d’interaction entre le
système et les acteurs.
Figure 8 : Diagramme de cas d’utilisation
16
Description :
Ce schéma présente les cas d'utilisation de notre application web, avec deux acteurs
principaux : l'agent matière et l'opérateur. L'agent matière a plusieurs actions possibles, telles
que l'ajout, la modification ou la suppression d'un projet, d'une équipe, d'un segment ou d'une
référence. Il peut également consulter les demandes de mitraillage et les imprimer. De plus, il
peut remplir le fichier de ramassage et l'imprimer. Quant à l'opérateur, sa principale activité est
de remplir la demande de mitraillage. Toutes ces actions nécessitent une authentification de
l'utilisateur.
Identification des cas d’utilisation :

Cas d’utilisation « Authentification » :
Acteur Agent matière, opérateur
Evénement déclencheur L’utilisateur veut accéder à l’application
Rôle L’utilisateur entre son username et son mot de

passe puis se connecter.
Précondition L’utilisateur a un compte
Postcondition L’utilisateur est connecté
Tableau 6 : Description textuelle « Authentification »
Cas d’utilisation « Voire informations segment » :
Acteur Agent matière
Evénement déclencheur L’Agent matière veut consulter, ajouter,

modifier ou supprimer un segment
Rôle Gérer le compte d’un ou plusieurs segments
Précondition L’authentification dans l’application web
Postcondition Une mise à jour est faite dans la base de

données
Tableau 7 : Description textuelle « Voir informations segment »
17
Cas d’utilisation « Voire info référence » :

modifier ou supprimer une référence
Rôle Gérer les références des rebuts

données
Tableau 8 : Description textuelle « Voir info référence »
Cas d’utilisation « Voire info projet » :

modifier ou supprimer un projet
Rôle Gérer les projets

données
Tableau 9 : Description textuelle « Voir info projet »
Cas d’utilisation « Voire info famille » :

modifier ou supprimer une référence
Rôle Gérer les familles de chaque projet

données
Tableau 10 : Description textuelle « Voir info famille »
18
Cas d’utilisation « Voire demande de mitraillage » :
Evénement déclencheur L’Agent matière veut consulter et imprimer

les demandes de mitraillages
Rôle Imprimer les demandes de mitraillages
Postcondition Aucune
Tableau 11 : Description textuelle « Voire demande de mitraillage »
Cas d’utilisation « Remplir fichier de ramassage » :
Evénement déclencheur L’Agent matière veut remplir, consulter et

imprimer les fichiers de ramassages
Rôle Imprimer les fichiers de ramassages

données
Tableau 12 : Description textuelle « Remplir fichier de ramassage »
Cas d’utilisation « Remplir demande de mitraillage » :
Acteur Opérateur
Evénement déclencheur L’opérateur veut remplir les demandes de
mitraillages
Rôle Remplir demande de mitraillage
données
Tableau 13 : Description textuelle « Remplir demande de mitraillage »
19
6. Diagramme de classe :
Le diagramme de classe est un schéma largement utilisé dans le domaine du génie logiciel pour
représenter les classes, les interfaces et les relations des systèmes. Il fait partie des diagrammes
les plus couramment utilisés dans le cadre de l'UML en raison de sa notation syntaxique
détaillée. Ce diagramme permet de visualiser la structure d'une application orientée objet en
mettant en évidence les classes et les liens qui les unissent.
Figure 9 : Diagramme de classe
7. Diagrammes de séquence :
Les diagrammes de séquence sont largement utilisés dans le cadre de l'UML pour modéliser
dynamiquement des systèmes. Ils se concentrent spécifiquement sur les lignes de vie, les
processus et les objets qui coexistent simultanément, ainsi que sur les messages échangés entre
eux pour accomplir une fonction avant la fin de la ligne de vie. Cette approche permet de
représenter de manière détaillée l'ordre et la chronologie des interactions entre les différents
éléments du système.
20
Diagramme de séquence « Authentification » :
Figure 10 : Diagramme de séquence « Authentification »
Description :
• L’utilisateur entre son nom et son mot de passe.

• Le système vérifie les données entrées.
• Si les données sont déjà dans la base de données, il va afficher la page d’accueil.
• Sinon un message d’erreur s’affiche.
21
Diagramme de séquence « remplir demande de mitraillage » :
Figure 11 : Diagramme de séquence « remplir demande de mitraillage »
Description :
• L’opérateur entre son nom et son mot de passe.

• Après l’identification, la page demande de mitraillage s’affiche.
• Après avoir saisi les informations et cliqué sur le bouton "Envoyer", le système vérifie
si tous les champs sont remplis. Si c'est le cas, la page demande de mitraillage s'affiche.
Sinon, un message d'erreur indique à l'opérateur de remplir tous les champs avant de
cliquer à nouveau sur le bouton "Envoyer".
22
Diagramme de séquence « gestion_projet » :
Figure 12 : Diagramme de séquence « gestion_projet »
23
Description :
• Après l’identification, la page d’accueil s’affiche.

• L’agent matière clique sur projet, puis d'utiliser le bouton "ajouter" pour inclure un
nouveau projet, le bouton "modifier" pour apporter des modifications à un projet
existant, ou encore le bouton "supprimer" pour le retirer complètement.
• Après la saisie des informations, le système vérifie les champs.
• La page projet s’affiche après que l’agent matière clique sur ajouter, sur modifier ou
sur supprimer.
Diagramme de séquence « consulter demande de mitraillage » :
Figure 13 : Diagramme de séquence « consulter demande de mitraillage »
Description :

• L’agent matière clique sur demandes de mitraillages, puis il remplit les champs
• La demande de mitraillage s’affiche après que l’agent matière clique sur search.
24
Diagramme de séquence « remplir fichier de ramassage » :
Figure 14 : Diagramme de séquence « remplir fichier de ramassage »
Description :

• L’agent matière clique sur remplir, puis il remplit les champs
• La page remplir s’affiche après que l’agent matière clique sur envoyer et les données
sont enregistrés.
25
Diagramme de séquence « gestion_segment » :
Figure 15 : Diagramme de séquence « gestion_segment »

26
Description :

• L’agent matière clique sur segments, puis d'utiliser le bouton "ajouter" pour inclure un
nouveau segment, le bouton "modifier" pour apporter des modifications à un segment
existant, ou encore le bouton "supprimer" pour le retirer complètement.
• La page segments s’affiche après que l’agent matière clique sur ajouter, sur modifier
ou sur supprimer.
Diagramme de séquence « consulter demande de ramassage » :
Figure 16 : Diagramme de séquence « consulter demande de ramassage »
Description :

• L’agent matière clique sur voir, puis il remplit les champs
• Le fichier de ramassage s’affiche après que l’agent matière clique sur search.
27
B. Etude technique :
Au cours de la réalisation de notre application web, nous avons en recours à

plusieurs moyens matérielset logiciels.
1. Matériel de base :
Le site web est réalisé via un ordinateur portable ayant les caractéristiques
suivantes :
Marque DELL
Processeur Intel(R) Core (TM) i5-4210M CPU @ 2.60GHz 2.60 GHz
Ram 8.00 Go
Carte graphique Intel(R) HD Graphics 4600
Tableau 14 : Matériel de base
2. Langage de programmation :
• HTML5 :
HTML (Hypertext Markup Language) est un langage de balisage utilisé pour créer des
pages Web et d'autres documents qui peuvent être affichés dans un navigateur Web.
HTML permet aux développeurs de structurer le contenu sur une page Web en utilisant une
variété d'éléments et d'attributs pour définir différents types de contenu tels que du texte, des
images, des vidéos, des liens, des formulaires et plus encore.
Figure 17 : logo HTML
28
• CSS3 :
CSS (Cascading Style Sheets) est un langage de style utilisé pour définir la présentation
et l'apparence visuelle des pages web. Il permet de contrôler la mise en forme et la mise en page
des éléments HTML tels que les polices, les couleurs, les marges, les bordures, les images et
les animations.
Figure 18 : logo CSS3
• PHP :
PHP est un langage côté serveur, ce qui signifie que le code est exécuté sur le serveur
plutôt que sur le navigateur Web de l'utilisateur. Il est principalement utilisé pour la gestion de
bases de données, la manipulation de formulaires, la création de sessions utilisateur et la gestion
de fichiers. PHP est un langage open-source, ce qui signifie que le code source est librement
disponible et peut être modifié pour répondre aux besoins spécifiques du développeur.
Figure 19 : logo PHP
• JAVASCRIPT :
JavaScript est un langage de programmation de haut niveau utilisé principalement pour

créer des applications web interactives et dynamiques. Il est souvent utilisé en combinaison
avec HTML et CSS pour créer des pages web interactives.
Figure 20 : logo JS
29
• MySQL :
MySQL est un Système de Gestion de Base de Données (SGBD) parmi les plus
populaires au monde. MySQL est un serveur de base de données relationnelles SQL qui
fonctionne sur de nombreux systèmes d’exploitation (dont Linux, Mac OS X, Windows,
Solaris, FreeBSD…) et qui est accessible en écriture par de nombreux langages de
programmation, incluant notamment PHP, Java, Ruby, C, C++, NET, Python …
Figure 21 : logo MySQL
3. Framework :
• Bootstrap :
Bootstrap est un Framework de développement web open source largement utilisé. Il
fournit des composants prédéfinis, des styles CSS et des fonctionnalités JavaScript pour faciliter
la création d'interfaces utilisateur réactives et esthétiquement attrayantes. Avec Bootstrap, les
développeurs peuvent rapidement concevoir et personnaliser des sites web et des applications
responsives, en utilisant une base solide et éprouvée. Bootstrap offre également une grille de
mise en page flexible, des classes utilitaires, des modèles de conception prédéfinis et une
compatibilité multiplateforme, ce qui en fait un choix populaire pour le développement web.
Figure 22 : logo Bootstrap
30
• Chart.js :
Chart.js est une bibliothèque JavaScript open source qui permet de créer des graphiques
et des visualisations de données interactives dans des pages web. Il fournit une interface simple
et conviviale pour générer une grande variété de graphiques, tels que des graphiques en barres,
des graphiques circulaires, des graphiques en lignes, des graphiques à aires, des graphiques à
dispersion
Chart.js est largement utilisé dans le développement web pour représenter visuellement
des données et faciliter la compréhension des informations. Il offre des fonctionnalités telles
que la personnalisation des couleurs, des légendes, des tooltips, des animations, la gestion des
axes et des échelles, ainsi que la prise en charge de l'interaction utilisateur., etc.
4. Logiciels :
• Visual Studio Code (VS Code) :
Visual Studio Code (VS Code) est un éditeur de code source léger et très populaire
développé par Microsoft. Il est utilisé pour le développement de logiciels dans différents
langages de programmation tels que JavaScript, Python, C++, Java, HTML/CSS, et bien
d'autres.
VS Code est apprécié pour sa facilité d'utilisation, sa grande flexibilité et ses

nombreuses fonctionnalités. Il offre des fonctionnalités d'édition avancées telles que la
coloration syntaxique, l'indentation automatique, l'autocomplétion intelligente et la mise en
évidence des erreurs. Il prend également en charge la gestion de projet, l'intégration avec des
outils de contrôle de version tels que Git, le débogage, les extensions personnalisées, et bien
plus encore.
Visual Studio Code est disponible en téléchargement gratuit et est compatible avec les
systèmes d'exploitation Windows, macOS et Linux, ce qui en fait un choix populaire parmi les
développeurs de logiciels.
Figure 23 : logo VS Code
31
• WampServer :
WampServer est une plateforme de développement web qui facilite la configuration d'un
environnement de développement local. Il permet de mettre en place un serveur web Apache,
une base de données MySQL et le langage de script PHP sur un ordinateur Windows.
Avec WampServer, les développeurs peuvent créer et tester des applications web
localement avant de les déployer sur un serveur en ligne. Il fournit une interface conviviale pour
gérer et configurer les paramètres du serveur web, de la base de données et du langage de script.
En utilisant WampServer, vous pouvez créer et héberger des sites web dynamiques, des
applications PHP et des bases de données MySQL sur votre propre machine. Il facilite
également la création de sites web locaux pour le développement et le test, sans nécessiter une
connexion Internet.
Figure 24 : logo WampServer
• Enterprise Architect :
Enterprise Architect est un logiciel de modélisation et de conception utilisé
principalement dans le domaine de l'ingénierie logicielle et des systèmes d'information. Il est
développé par la société Sparx Systems.
Enterprise Architect offre une large gamme de fonctionnalités pour la modélisation et

la gestion de différents aspects d'un projet logiciel. Il permet de créer des diagrammes UML
(Unified Modeling Language) pour représenter visuellement la structure, le comportement et
les interactions des différents composants d'un système. Il prend également en charge d'autres
langages de modélisation, tels que BPMN (Business Process Model and Notation) pour la
modélisation des processus métier.
Figure 25 : logo Enterprise Architect
32
• Gantt Project :
Gantt Project est un logiciel de gestion de projet gratuit et open-source qui permet de
planifier, organiser et suivre les différentes étapes d'un projet. Il est principalement utilisé pour
créer des diagrammes de type Gantt, qui permettent de visualiser les tâches, les dépendances,
les durées et les échéances du projet.
Avec Gantt Project, vous pouvez créer une liste de tâches, les organiser dans une
structure hiérarchique, définir les dépendances entre les tâches, attribuer des ressources et des
durées à chaque tâche, et générer automatiquement un diagramme de Gantt à partir de ces
informations. Le diagramme de Gantt affiche la chronologie du projet, les dates de début et de
fin des tâches, les jalons et les dépendances entre les tâches.
Figure 26 : logo Gantt project
C. Conclusion :
Dans ce chapitre, nous avons abordé la phase de conception de notre projet et identifié
les exigences techniques essentielles pour assurer le bon fonctionnement de notre application
web.
33
REALISATION
Chapitre 3 : Réalisation
A. Partie Opérateur :
1. Interface « Home » :
Figure 27 : Interface « Home »
2. Interface « Authentification » :
Figure 28 : Interface « Authentification »
34
REALISATION
3. Interface « demande de mitraillage » :
Figure 29 : Interface « demande de mitraillage »
B. Partie Agent matière :

1. Interface « Authentification » :
Figure 30 : Interface « Authentification »
35
REALISATION
2. Interface « Accueil » :
Après l’authentification, la page d’accueil s’affiche (Dashboard), cette page donne des
informations sur le nombre du projets, familles, segments et références.
Figure 31 : Interface « Accueil »
3. Interface « Consulter profil » :

En cliquant sur l'icône à côté de "Monsieur danouni", deux boutons apparaissent : l'un
pour consulter le profil et l'autre pour se déconnecter.
Figure 32 : affichage du boutons Profil et Déconnexion
36
REALISATION
Lorsque vous cliquez sur le bouton "Profil", le profil sera affiché.
Figure 33 : Interface « Consulter profil »
4. Interface « Modifier profil » :

En cliquant sur l'icône de modification, j'ai la possibilité de modifier mon profil.
Figure 34 : Interface « Modifier profil »
37
REALISATION
5. Interface « Voire projet » :
Figure 35 : Interface « Voire projet »
6. Interface « Ajouter projet » :

En cliquant sur Ajouter un projet, j'ai la possibilité d’ajouter un nouveau projet.
Figure 36 : Interface « Ajouter projet »
38
REALISATION
7. Interface « Modifier projet » :

En cliquant sur l'icône de modification, j'ai la possibilité de modifier un projet.
Figure 37 : Interface « Modifier projet »
8. Interface « Voire segment » :
Figure 38 : Interface « Voire segment »
39
REALISATION
9. Interface « Ajouter segment » :
Figure 39 : Interface « Ajouter segment »
10. Interface « Modifier segment » :
Figure 40 : Interface « Modifier segment »
40
REALISATION
11. Interface « Consulter demande de mitraillage » :

Lorsque vous cliquez sur « demande de mitraillage », la page consulter demande de
mitraillage sera afficher.
Figure 41 : Interface « Consulter demande de mitraillage »
Une fois que j'ai rempli les champs requis et cliqué sur "Rechercher", la page suivante sera
affichée.
Figure 42 : Interface « Demande de mitraillage »
41
REALISATION
En cliquant sur Imprimer, on peut imprimer cette demande :
Figure 43 : Exemple d’une demande de mitraillage
42
REALISATION
12. Interface « Remplir fichier de ramassage » :
Figure 44 : Interface « remplir fichier de ramassage »
13. Interface « Consulter fichier de ramassage » :
Figure 45 : Interface « consulter fichier de ramassage »
43
REALISATION
En cliquant sur Imprimer, on peut imprimer ce fichier de ramassage
Figure 46 : Exemple d’un fichier de ramassage
C. Conclusion :
Ce chapitre a fourni un guide utilisateur en présentant certaines interfaces de l'application de
manière illustrative.
44
CONCLUSION GENERALE
Conclusion Générale
Ce rapport présente en détail le processus de réalisation du projet de fin d'études chez

LEONI Wiring Systems (Berrechid). L'objectif principal était de développer une application
Web de gestion des rebuts de production, permettant d'optimiser la gestion des déchets générés
lors du processus de fabrication. Le rapport couvre différentes étapes, depuis le contexte général
du projet jusqu'à la réalisation concrète.
Pour mener à bien ce projet, j'ai suivi une approche de gestion de projet rigoureuse. J'ai
commencé par définir clairement le contexte général du projet, puis j'ai réalisé une étude
fonctionnelle détaillée pour identifier les acteurs impliqués dans le système.
Ensuite, j'ai procédé à la conception et à la modélisation des différents cas d'utilisation

et classes du système en utilisant le langage de modélisation UML. Cette étape m'a permis
d'avoir une vision précise de la structure et du fonctionnement de l'application.
La mise en œuvre du projet s'est appuyée sur plusieurs technologies clés, notamment
HTML, CSS, JavaScript et PHP. J'ai également utilisé MySQL comme système de gestion de
base de données pour stocker les informations nécessaires.
Ce projet de fin d'études m'a offert une opportunité précieuse de me familiariser avec le
monde professionnel au sein d'un environnement réel. J'ai acquis une expérience significative
et j'ai appris l'importance de développer de bonnes relations professionnelles, de résoudre les
problèmes de manière autonome, d'être méticuleux dans mon travail, d'être attentif aux
directives de mes supérieurs hiérarchiques, et d'être organisé pour respecter les délais et les
exigences des tâches qui m'ont été confiées.
Pendant la réalisation de mon projet, j'ai été confronté à certaines contraintes,

notamment la contrainte de temps qui a limité l'ajout de certaines fonctionnalités. Cependant,
cela a été l'occasion pour moi de mettre en pratique mes connaissances en informatique et de
développer mes compétences.
Ce projet a un potentiel d'amélioration en ajoutant des modules ou des interfaces

supplémentaires pour répondre aux besoins spécifiques des utilisateurs et pour rester en phase
avec les progrès réalisés par l'entreprise.
45
CONCLUSION GENERALE
En résumé, ce projet a été une expérience enrichissante et formatrice, me permettant

d'appliquer mes connaissances et compétences informatiques dans un contexte professionnel
réel.
46
WEBOGRAPHIE
Webographie
• https://www.leoni.com/en/
• htpps://www.w3schools.com
• htpps://www.developpez.net
• https://www.getbootstrap.com
• htpps://www.openclassrooms.com
47

Rapport de Stage (PFE)

Transféré par

Informations du document

Titre original

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 (PFE)

Transféré par

Droits d'auteur :

Formats disponibles

Université Hassan 1er

Faculté des Sciences et Techniques

Projet de Fin d’Etude

LICENCE SCIENCES ET TECHNIQUES EN GENIE

Application Web pour la gestion des scraps

Soutenu le 13 Juin 2023, devant le jury :

M. Amine BENMAKHLOUF Professeur à la FST de Settat

Année Universitaire : 2022-2023

Je dédie ce modeste travail :

A mon Père HASSAN,

A mes Frères (NOUHAILA, RADOUANE, FATIMA et MANAL),

« Louange à Dieu, le très miséricordieux, le tout clément »

Au niveau professionnel, j’aimerais amorcer mes remerciements par la

Suite à ce présent travail, je tiens à remercier notre professeur Madame

Je tiens à exprimer ma profonde admiration aussi, mon respect et mes hautes

Mr EZZAAF Yassir chef de département IT et mon encadrent au sein du

Mes remerciements vont également à l’ensemble du personnel de LEONI, il

Merci aussi à l’ensemble des professeurs de la faculté des sciences et

L'objectif principal de ce projet est la conception et le développement d'un site web

Tableau 1 : Historique de LEONI……………………………………………………………………………………………………….….…….3

Tableau 2 : LEONI région MAROC……………………………………………………….………………..……3

Tableau 3 : procédure de la gestion des rebuts………………………………………………………………………………………..……9

Tableau 4 : Planning prévisionnel…………………………………………………………………….………...12

Tableau 5 : Acteurs du système………………………………………………………………………..………...14

Tableau 6 : Description textuelle « Authentification » ………………………………….……………….…….17

Tableau 7 : Description textuelle « Voir informations segment » ……………………….………………...…17

Tableau 8 : Description textuelle « Voir info référence » ………………………………….………………….18

Tableau 9 : Description textuelle « Voir info projet » ……………………………………………….…….….18

Tableau 10 : Description textuelle « Voir info famille » …………………………………………….………...18

Tableau 11 : Description textuelle « Voire demande de mitraillage »………………………………..……….19

Tableau 12 : Description textuelle « Remplir fichier de ramassage »…………………………….………..…19

Tableau 13 : Description textuelle « Remplir demande de mitraillag » ………………………..………….…19

Tableau 14 : Matériel de base…………………………………………………………………….……………..28

Figure 1 : Site Berrechid………………………………………………………………………………………………………………………………4

Figure 2 : Poste opérateur……………………………………………………………………………………………………………………………7

Figure 3 : Demande de Mitraillage…………………………………………………………………………………………………….……..…8

Figure 5 : Zone de Ramassage………………………………………………………………………………………………………………..…..8

Figure 6 : Les étapes de la méthodologie en Y………………………………………………………………………………………..…12

Figure 7 : Diagramme de Gantt…………………………………………………………………………………………………………………13

Figure 8 : Diagramme de cas d’utilisation…………………………………………………………………………………………………16

Figure 9 : Diagramme de classe………………………………………………………………………………………………………………..20

Figure 10 : Diagramme de séquence « Authentification » ……………………………………………………………………….21

Figure 11 : Diagramme de séquence « remplir demande de mitraillage » ………………………………………………22

Figure 12 : Diagramme de séquence « gestion_projet » ……………………………………………………………………………23

Figure 13 : Diagramme de séquence « consulter demande de mitraillage »………………………………………………24

Figure 14 : Diagramme de séquence « remplir fichier de ramassage » ………………………………………………….…25

Figure 15 : Diagramme de séquence « gestion_segment »………………………………………………………………………..26

Figure 16 : Diagramme de séquence « consulter demande de ramassage »………………………………………………27

Figure 17 : logo HTML……………………………………………………………………………………………………………………………..28

Figure 18 : logo CSS3 ……………………………………………………………………………………………………………………………….29

Figure 19 : logo PHP………………………………………………………………………………………………………………………………….29

Figure 20 : logo JS …………………………………………………………………………………………………………………………………….29

Figure 21 : logo MySQL…………………………………………………………………………………………………………………………….30

Figure 22 : logo Bootstrap………………………………………………………………………………………………………………………….30

Figure 23 : logo VS Code…………………………………………………………………………………………………………………………..31

Figure 24 : logo WampServer……………………………………………………………………………………………………………………32

Figure 25 : logo Enterprise Architect…………………………………………………………………………………………………………32

Figure 26 : logo Gantt project……………………………………………………………………………………………………………………33

Figure 27 : Interface « Home »………………………………………………………………………………………………………………….34

Figure 28 : Interface « Authentification»………………………………………………………………………………………………….34

Figure 29 : Interface « demande de mitraillage »………………………………………………………………………………………35

Figure 31 :Interface « Accueil»………………………………………………………………………………………………………….………36

Figure 32 : affichage du boutons Profil et Déconnexion…………………………………………………………………………….36