Ecole Marocaine Des Sciences De L’ingénieur

(EMSI)
Réseaux et Informatiques

RAPPORT DE STAGE D’OBSERVATION

Pour l’entreprise LEONI BERRCHID :

Réalisé par :
Mohamed El Mejdoub

Étudient en 3éme année Ingénierie

Informatique et Réseau

ENCADRANT A l’ENTREPRISE :
M. EJJEBLI MOUHSINE, LEONI Wiring Systems (Berrechid)

ENCADRANT ACADEMIQUE :
Mme Ait Mansour

Durée de stage : 1mois

1|Page
 Remerciements
Tout d'abord, je remercie Dieu pour les opportunités qu'il m'a offertes et pour les bénédictions
qu'il a répandues sur ma vie. Sa grâce et Sa guidance m'ont permis d'atteindre mes objectifs
et de persévérer dans les moments difficiles.

À mon encadrant Mme Ait Mansour, je tiens à exprimer ma reconnaissance pour votre
expertise dans mon stage d’observation. Vos conseils éclairés ont été déterminants dans mon
rapport de stage.

À nos professeurs, je vous remercie pour votre enseignement, votre patience et votre
dévouement à notre réussite. Votre passion pour l'enseignement et votre engagement envers
nos études ont contribué à façonner notre avenir et nous sommes reconnaissants pour cela.

Enfin, à mon encadrant M. EJJEBLI MOUHSINE en entreprise, je vous remercie pour votre
guidance, vos conseils et votre mentorat tout au long de mon stage en entreprise. Votre
expertise et votre soutien ont été essentiels pour mon apprentissage professionnel et je suis
reconnaissant d'avoir eu la chance de travailler sous votre supervision.

Encore une fois, je souhaite exprimer ma profonde gratitude à tous ceux qui ont contribué
mon stage. Votre soutien inestimable m'a aidé à grandir, à apprendre et à réaliser mes rêves.
Meilleur profondément reconnaissant et je suis déterminé à continuer à m'efforcer de donner
le meilleur de moi-même dans toutes les opportunités qui se présenteront à moi.

2|Page
 Résumé
Mon travail consiste à réaliser avec une équipe une application de gestion packaging.
J’intéresse dans ce rapport, à l’étude conceptuel de l’application ainsi que la réalisation de
partie CSS et HTML et mon travail était aussi à la partie UML.

La première partie du rapport présente la problématique et les objectifs du projet, en mettant

en évidence les besoins spécifiques de l'entreprise en matière de gestion packaging.

La deuxième partie du rapport détaille l'architecture de l'application, en mettant en évidence

les modèles de données et les différentes couches de l'application, le service et la couche de
persistance. Les diagrammes modélisants sont également présentés pour illustrer la logique
de fonctionnement pour l’application. L’application a permis d'améliorer les processus
internes de gestion packaging de l'entreprise, en offrant une interface utilisateur conviviale et
des fonctionnalités avancées pour la gestion packaging.

3|Page
 Sommaire
Remerciements .................................................................................................................................................4
Résume .............................................................................................................................................................5
Sommaire ..........................................................................................................................................................7
Introduction générale ........................................................................................................................................14
Chapitre 1 : Contexte général de ce projet..................................................................................................15

Introduction ....................................................................................................................................................15

I. Présentation générale de Leoni ............................................................................................................ 16

1- Historiques ..............................................................................................................................16

2- Fiche technique de LEONI Berrechid ...................................................................................16

3- Organigramme ........................................................................................................................16

4- Processus de production .........................................................................................................17

II. Contexte du projet.......................................................................................................................................17

1- Problématique..........................................................................................................................17

2- L’objectif.................................................................................................................................17

3- Expression du besoin..............................................................................................................17
III. Planification et conduite de projet..................................................................................................18
1- Méthodologie de développement. ..........................................................................................18

2- Planification du projet.............................................................................................................18

3- Diagramme de GANTT..........................................................................................................19
Conclusion ......................................................................................................................................................19

Chapitre 2 : Phase d’inception....................................................................................................................20

Introduction ....................................................................................................................................................20
I. Capture des besoins ....................................................................................................................................... 21
1- Besoins fonctionnels...............................................................................................................21

4|Page
 2- Besoins non fonctionnels …………………............................................................................21

3- Les acteurs du système ...........................................................................................................22

4- Diagramme de contexte statique .......................................................................................... 22

5- Regroupement des exigences par intentions d’acteurs …..................................................... 23

II. Diagramme de cas d’utilisation..........................................................................................................24

1- Diagramme de cas d’utilisation pour les acteurs ..................................................................24

Conclusion ......................................................................................................................................................24

Chapitre 3 : Phase d’analyse et de conception........................................................................................25

Introduction ....................................................................................................................................................25

I. Langage UML...................................................................................................................................................26

II. Description textuelle des cas d’utilisation ....................................................................................26

1- Authentification et autorité ....................................................................................................26

2- Gérer des utilisateurs ..............................................................................................................27

3- Gérer des routes ......................................................................................................................28

4- Gérer des lignes.......................................................................................................................29

5- Gérer des groupes....................................................................................................................30

6- Gérer des objectifs ..................................................................................................................31

7- Ajouter câbles par l’Opérateur...............................................................................................32

8- Ajouter package par l’Opérateur...........................................................................................34

III. Diagramme de séquence .....................................................................................................................36

1- Authentification et autorité .....................................................................................................37

2- Ajoute groupe/utilisateur/objectif/route/ligne...........................................................................38

3- Modifier groupe/utilisateur/objectif/route/ligne.......................................................................39

4- Supprimer groupe/utilisateur/objectif/route/ligne.....................................................................40

5|Page
 5- Ajouter câble par l’opérateur ..................................................................................................41

6- Ajouter package par l’opérateur .............................................................................................42

6|Page
IV. Diagramme d’activité ...........................................................................................................................43

1- Authentification et autorité ......................................................................................................44

2- Ajoute/supprimer/modifier groupe/utilisateur/objectif/route/ligne........................................44

3- Ajouter câble par l’opérateur....................................................................................................44

4- Ajouter package par l’opérateur................................................................................................44

V. Diagramme de class....................................................................................................................................45
VI. Base de données .........................................................................................................................................46

1- MCD .......................................................................................................................................47

2- MLD .......................................................................................................................................48

Conclusion ......................................................................................................................................................49

Conclusion ......................................................................................................................................................50

7|Page
 Introduction générale

Au cours de mon 3éme année informatique, j’ai effectué un stage d’observation dans l’entreprise LEONI
BERRECHID. Ce stage a eu pour objectif de me faire découvrir le monde professionnel, il m’a permis de
voir comment fonctionne une entreprise de l’intérieur et aussi le mode de travail à adopter.

Je me permets de vous adresser ce rapport pour vous présenter le projet d'application web de gestion du
packaging que j'ai travaillé avec une équipe de développement. Cette application a été conçue dans le but
d'optimiser le processus de gestion du packaging au sein de la société Leoni Berrechid, en simplifiant les
tâches liées à la réception, au suivi et à la gestion packaging utilisés dans la production.

Au cours d’un mois, j’ai travaillé avec l’équipe pour comprendre les défis auxquels Leoni Berrechid était
confrontée dans la gestion de son packaging, ainsi que pour identifier les besoins spécifiques de l’entreprise
en matière de suivi et de gestion des emballages. Sur la base de ces informations, L’équipe a fait une
application web sur mesure qui répond aux exigences uniques de Leoni Berrechid.

Ce rapport vous fournira un aperçu détaillé de l’application, de ses fonctionnalités clés, ainsi que des
avantages qu’elle offre à Leoni Berrechid.

Je suis convaincu que cette application web de gestion du packaging sera un outil précieux pour Leoni
Berrechid, permettant d’améliorer l’efficacité opérationnelle, de réduire les coûts et d’optimiser la chaîne
d’approvisionnement. J’espère que ce rapport sera informatif et vous donnera un aperçu complet de cette
application pour Leoni Berrechid.

8|Page
 Chapitre 1 :
Contexte général du projet

Introduction :
L’étude du projet est une démarche stratégique visant à assurer le bon déroulement d’un projet et de la
conduite de toutes les phases qui le composent. Une étude complète et efficace conduit généralement à la
réussite d’un projet. Cette étude fera donc l’objet de notre premier chapitre, consacré à la présentation du
projet ainsi que la définition de notre langage et méthodologie de développement.

9|Page
10 | P a g e
 4- Processus de production :

Le schéma ci-dessous présente les différentes étapes de la production des faisceaux électrique :

Figure 2 : Processus de production.

II. Contexte du projet :

1- Problématique

La problématique du gestion packaging pour la société Leoni Berrechid réside dans une gestion inefficace
des commandes d’emballage, une planification de production d'emballage peu optimisée, entraînant des
retards, des erreurs de commande, et des coûts élevés associés au processus d'emballage. L'absence de
digitalisation de ce processus peut également limiter la traçabilité de l'emballage.

2- L’objectif :

L'objectif de l'application de gestion packaging pour la société Leoni Berrechid est de faciliter et d'optimiser
le processus d'emballage de ses produits. Planifier la production d'emballage, assurer la traçabilité de
l'emballage, et optimiser les coûts associés. L'application permettrait ainsi d'améliorer l'efficacité, la
traçabilité et les coûts du processus d'emballage de l'entreprise et aussi digitaliser ce processus-là.

3- Expression du besoin

Les expressions du besoin pour l'application de gestion packaging de la société Leoni Berrechid sont :

1- Gestion efficace des commandes de packaging, avec des fonctionnalités de saisie simplifiée, suivi en
temps réel des statuts de commande.

2- Planification de production d'emballage optimisée pour éviter les retards et optimiser les ressources.

3- Traçabilité de l'emballage pour garantir la conformité et la qualité des produits emballés.

4- Réduction des coûts associés au processus d'emballage grâce à une gestion efficace des stocks, une
optimisation de la production et une visibilité accrue sur les coûts liés à l'emballage.

11 | P a g e
12 | P a g e
 3- Diagramm e de Gantt :
Un di agramme de Gant t est un outil de gestion de projet qui permet de visualiser les différentes tâches à
effectuer et leur cal endrier de réalisat ion. Il e st composé d'un axe horizontal représentant la durée totale du
projet, découpée en jour s, semaines, mois o u années, et d' un axe vert ical représentant les différentes tâches
à effectuer.

Figure 3 : Diagramme de GANTT.

Conclusion :

En fin de compte , le chap itre "Contexte g énéral de pro jet" permet aux p arties prenantes de comprendre les
raisons pou r lesquelles le projet est i mportant, c e qu 'il vise à accomplir, et comment il sera exécuté,
réduisant ainsi les risques et assurant la réussite du projet.

13 | P a g e
 Chapitre 2 :
Phase d’Inception

Introduction :
L'introduction du chapitre 2 de projet permet de donner une vue d'ensemble du travail à réaliser. Cette
introduction doit permettre au lecteur de comprendre les raisons qui ont conduit à la mise en place du projet,
en soulignant les besoins qu'il doit combler. Il est également important d'identifier les acteurs clés et les
parties prenantes, et de décrire leurs rôles et responsabilités. Enfin, l'introduction doit présenter les grandes
étapes de la phase d’Inception, en expliquant comment le projet sera conduit et quels sont les livrables
attendus à la fin de cette première étape du cycle de vie du projet.

14 | P a g e
 I. Capture des besoins :

1- Besoins fonctionnels :

Ce sont les fonctionnalités concrètes du notre système

Le système à concevoir doit permettre à l’utilisateur d’effectuer les opérations suivantes :

Numéro Fonction

N1 Authentification et autorisation.

N2 Gestion d’utilisateur.

N3 Gestion des routes.

N4 Gestion des lignes.

N5 Gestion des groupes.

N6 Gestion du temps.

N7 Gestion des objectifs.

N8 Interface utilisateur.

N9 Ajouter câble.

N10 Ajouter package.

N11 Lire les objectifs.

Tableau 2 : Tableau d’exigences.

2- Besoins non fonctionnels :

Les besoins non-fonctionnels se concentrent généralement sur les aspects qualitatifs de l'application.

Voici quelques exemples de besoins non-fonctionnels courants de mon application :

Performance : l'application doit être rapide et réactive pour garantir une bonne expérience utilisateur.

Sécurité : l'application doit être sécurisée pour protéger les données confidentielles les informations ne
doivent pas être accessibles par tout le monde.

Fiabilité : l'application doit être fiable et stable pour garantir un accès constant et cohérent pour les
utilisateurs.

Convivialité : l'application doit être facile à utiliser et à naviguer pour tous les types d'utilisateurs, avec une
interface utilisateur claire et intuitive.

15 | P a g e
 3- Les acteurs du système :
Le diagramme ci-dessous représente les différents acteurs de notre système :

Figure 4 : Diagramme des acteurs.

Admin : Il es t la seule personne qui p ossède ou contrôle l'application de toute la gestion des package s qui
contient toute la gestion c'est la gestion des câbles, la gestion des uti lisateurs, la gestion des rôles, la gestion
des packages, la gestion des lignes….

Opérateur : La personne qui scanner les câbles et remplir les pack ages par son propre câble.

4- Diagramme de context e statique :

Le diagramme de contexte statique délimi te le d omaine d’étude en préci sant ce qui est à la c harge du
système et en identifiant l’environnement extérieur au système étudié avec lequel ce dernier communique.

Le système est décrit physiquement et non pas en termes de fonctionnalités.

La figure ci-dessous représente le digramme de contexte statique de notre application :

16 | P a g e
 Figure 5 : Diagramme de contexte statique.

5- Regroupement des exigences par intentions d’acteurs :

Numéro Fonction Intention Acteur

N1 Authentification et autorisation. Authentification et autorisation. Admin/Opérateur

N2 Gestion d’utilisateur. Ajout/suppr/modif des utilisateur. Admin

N3 Gestion des routes. Ajout/suppr/modif des routes. Admin

N4 Gestion des lignes. Ajout/suppr/modif des lignes. Admin

N5 Gestion des groupes. Ajout/suppr/modif des groupes. Admin

N6 Gestion du temps. Ajout/suppr/modif des temps. Admin

N7 Gestion des objectifs. Ajout/suppr/modif des objectifs. Admin

N8 Interface utilisateur. Voir l’interface utilisateur. Admin/Opérateur

N9 Ajouter câble. Scanner les câbles. Opérateur

N10 Ajouter package. Remplir les packages. Opérateur

N11 Lire les objectifs. Lire l’objectif qui effectuer par Opérateur
l’admin.

Tableau 3 : Tableau d’exigences par intention d’acteur.

17 | P a g e
II. Diagramme d e cas d ’utilisation :

Un dia gramme de ca s d'utilis ation est une r eprésentation graphique qui permet de décrire les interactions
entre un système et ses utilisateurs (acteurs) pour a ccomplir un ensemble de tâch es ou de fonctio ns. Le but
de ce d iagramme est de fournir une v ue d'ensemble d es fonctionnalités du système et d es interactions entre
les différents acteurs et le système. Il permet également d'identifier les scénarios d'utilisa tion, les objectifs
et les b esoins des acteu rs, ainsi que les fonctionnalités et les s ervices que le sy stème doit o ffrir pour
répondre à ces besoins. L e diagramme de cas d'utilisation est un outil utile pour la modélisation des
exigences et la planification de la conception d'un système.

Le diagramm e de cas d'utilisation ci -dessous déc rit l es in teractions e ntre l’admin et l’opérateur et le
système :

Figure 6 : Diagramme de cas d’utilisation de l’admin et l’opérateur pour le système.

Conclusion :
A travers ce deuxième chapit re, nous avons pu identif ier les besoins fonction nels et non fonct ionnels de
notre application, et que nous avons pu traduire en diagrammes de cas d’utilisation.

18 | P a g e
 Chapitre3 :
Phase d’analyse et de conception

Introduction :
Dans ce chapitre, j'analyserai les différents cas d'utilisation de l'application, et j'expliquerai également en
détail les fonctions système des scénarios et des fichiers dans des diagrammes UML pour une compréhension
facile.

19 | P a g e
 I. Langage UML :
UML, abréviation de Unified Modeling Language (langage de modélisation unifié en français),
est un langage graphique standardisé utilisé en génie logiciel pour modéliser, visualiser, spécifier,
concevoir et documenter les systèmes logiciels. Il permet de décrire les différents aspects d'un
système logiciel de manière visuelle et compréhensible pour tous les acteurs impliqués dans le
développement de ce système.

UML fournit une notation graphique standardisée pour représenter les différents composants d'un système
logiciel, tels que les classes, les objets, les interfaces, les relations entre les composants, les cas d'utilisation,
les séquences d'actions, les états et les activités. Cette notation permet aux développeurs de communiquer
efficacement entre eux et avec les parties prenantes du projet, tels que les clients et les utilisateurs finaux.

En somme, UML est un langage de modélisation visuelle qui facilite la compréhension et la communication
des concepts et des structures logicielles entre les membres d'une équipe de développement et les parties
prenantes du projet.

II. Description textuelle des cas d’utilisation :

1- Authentification et autorité :

Cas d’utilisation : Authentification et autorité

Acteur : Admin, Opérateur

Pré-condition : Existence des données dans la base de données.

Action des acteurs Action du système

1. Consulter page d’authentification 2. Afficher page d’authentification.

Scénario nominal : 4. Vérifier Login et mot de passe

3. Introduire Login et Mot de passe. 5. Valider et afficher la page de

chaque utilisateur.

1-l’acteur a saisi un email ou un mot de passe incorrect.

Scénario alternatif : 1-a-le système affiche un message d’erreur.

1-b-reprise de l’étape 3 du scénario nominal.

Tableau 4 : Description textuelle du cas d’utilisation « Authentification ».

20 | P a g e
 2- Gérer les utilisateurs :
1/Ajouter utilisateur :
Cas d’utilisation : Ajouter utilisateur

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire.

Scénario nominal : 2.Demander le formulaire d’ajout.

4. Remplir les champs. 5.Enregistre l’utilisateur.

-Données manquants L’enchainement démarre au point 3 du scénario nominal.

- Le système affiche un page d’erreur.

Scénario alternatif : -Le scénario nominal reprend au point 4.

Tableau 5 : Description textuelle du cas d’utilisation « Ajouter utilisateur ».

2/Modifier utilisateur :
Cas d’utilisation : Modifier utilisateur

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire avec les

informations de l’utilisateur.
Scénario nominal : 2.Selectionner un utilisateur.

4. Remplir les champs. 5.Mise à jour d’utilisateur.

Tableau 6 : Description textuelle du cas d’utilisation « Modifier utilisateur ».

21 | P a g e
3/Supprimer utilisateur :
Cas d’utilisation : Supprimer utilisateur

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire avec les

informations de l’utilisateur.
Scénario nominal : 2.Selectionner un utilisateur.

4. valider son choix. 5.Supprimer l’utilisateur.

Tableau 7 : Description textuelle du cas d’utilisation « Supprimer utilisateur ».

3- Gérer les routes :

1/Ajouter route :
Cas d’utilisation : Ajouter route

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire.

Scénario nominal : 2.Demander le formulaire d’ajout.

4. Remplir les champs. 5.Enregistre la route.

- Données manquants L’enchainement démarre au point 3 du scénario nominal.

Scénario alternatif : -Le système affiche une page d’erreur.

-Le scénario nominal reprend au point 4.

Tableau 8 : Description textuelle du cas d’utilisation « Ajouter route ».

22 | P a g e
 2/Modifier route :
Cas d’utilisation : Modifier route

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire avec les

informations de la route.
Scénario nominal : 2.Selectionner la route.

4. Remplir les champs. 5.Mise à jour de la route.

Tableau 9 : Description textuelle du cas d’utilisation « Modifier route ».

3/Supprimer route :
Cas d’utilisation : Supprimer route

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire avec les

informations de la route.
Scénario nominal : 2.Selectionner la route.

4. valider son choix. 5.Supprimer la route.

Tableau 10 : Description textuelle du cas d’utilisation « Supprimer route ».

23 | P a g e
3/Supprimer ligne :
Cas d’utilisation : Supprimer ligne

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire avec les

informations de la ligne.
Scénario nominal : 2.Selectionner la ligne.

4. valider son choix. 5.Supprimer la ligne.

Tableau 13 : Description textuelle du cas d’utilisation « Supprimer ligne ».

5- Gérer les groupes :

1/Ajouter groupe :
Cas d’utilisation : Ajouter groupe

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire.

Scénario nominal : 2.Demander le formulaire d’ajout.

4. Remplir les champs. 5.Enregistre le groupe.

- Données manquants L’enchainement démarre au point 3 du scénario nominal.

Scénario alternatif : -Le système affiche une page d’erreur.

-Le scénario nominal reprend au point 4.

Tableau 14 : Description textuelle du cas d’utilisation « Ajouter groupe ».

24 | P a g e
2/Modifier groupe :
Cas d’utilisation : Modifier groupe

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire avec les

informations du groupe.
Scénario nominal : 2.Selectionner le groupe.

4. Remplir les champs. 5.Mise à jour du groupe.

Tableau 15 : Description textuelle du cas d’utilisation « Modifier groupe ».

3/Supprimer groupe :
Cas d’utilisation : Supprimer groupe

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire avec les

informations du groupe.
Scénario nominal : 2.Selectionner le groupe.

4. valider son choix. 5.Supprimer le groupe.

Tableau 16 : Description textuelle du cas d’utilisation « Supprimer groupe ».

25 | P a g e
 6- Gérer les objectifs :
1/Ajouter objectif :

Cas d’utilisation : Ajouter objectif

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire.

Scénario nominal :
2.Demander le formulaire d’ajout.

4. Remplir les champs. 5.Enregistre l’objectif.

- Données manquants L’enchainement démarre au point 3 du scénario nominal.

-Le système affiche une page d’erreur.

Scénario alternatif : -Le scénario nominal reprend au point 4.

26 | P a g e
 Tableau 17 : Description textuelle du cas d’utilisation « Ajouter objectif ».

2/Modifier objectif :
Cas d’utilisation : Modifier objectif

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire avec les

informations de l’objectif.
Scénario nominal : 2.Selectionner l’objectif.

4. Remplir les champs. 5.Mise à jour l’objectif.

Tableau 18 : Description textuelle du cas d’utilisation « Modifier objectif ».

27 | P a g e
3/Supprimer objectif :
Cas d’utilisation : Supprimer objectif

Acteur : Admin

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 3. Afficher le formulaire avec les

informations d’objectif.
Scénario nominal : 2.Selectionner l’objectif.

4. valider son choix. 5.Supprimer l’objectif.

Tableau 19 : Description textuelle du cas d’utilisation « Supprimer objectif ».

7- Ajouter câbles par l’Opérateur :

Ajouter câble :
Cas d’utilisation : Ajouter câble

Acteur : Opérateur

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 2. Afficher l’input de scanne du scanner le

code bar du câble.
Scénario nominal :
3.Scanner le code barre du câble. 4.Enregister dans un tableau qui appel
package et incrémente dans la colonne
quantité.

- Données manquants L’enchainement démarre au point 2 du scénario nominal.

-Si le système affiche une page d’erreur.

Scénario alternatif : -Le scénario nominal reprend au point 3.

Tableau 20 : Description textuelle du cas d’utilisation « Ajouter câble ».

28 | P a g e
 8- Ajouter package par l’opérateur :
Ajouter package :
Cas d’utilisation : Ajouter package

Acteur : Opérateur.

Pré-condition : Authentification et autorisation

Action des acteurs Action du système

1.Authentification. 2. Afficher l’input de scanne le code barre

du package qui contient scanner code
Scénario nominal : fournisseur, étiquette et quantité.

3.Scanner le code barre du package. 4.Enregister dans un tableau qui appel

package et affiche ce code barre de ce
package.

- Données manquants L’enchainement démarre au point 2 du scénario nominal.

-Le système affiche un message d’erreur.

Scénario alternatif : Le scénario nominal reprend au point 3.

Tableau 21 : Description textuelle du cas d’utilisation « Ajouter package ».

III. Diagramme de séquence :

Un diagramme de séquence est un type de diagramme UML utilisé pour représenter l'interaction entre
différents objets dans un système. Il montre la séquence chronologique des messages échangés entre les
objets pendant leur interaction. Le diagramme est composé d'une ligne de vie pour chaque objet, avec des
boîtes verticales représentant les différents objets impliqués. Les flèches sur la ligne de vie représentent les
messages envoyés entre les objets, avec des étiquettes indiquant le type de message et les paramètres associés.
Le diagramme de séquence est utilisé pour modéliser des processus métier, des interactions entre utilisateurs
et des systèmes, des scénarios d'utilisation de logiciels, ou des interactions entre composants d'un système.

29 | P a g e
 1- Authentification e t autorité :

Figure 7 : Diagramme de séquence <<Authentification>>.

Ce diagramme décrit le processus de l’authentification, pour ce fai re, l’utilisateur doit d’abord consulter la
page de l’authentification, puis saisir son login et mot de passe, si les données saisies sont valides, une
session lui sera ouverte et il sera redirigé vers la page d’accueil. Sinon, un message d’erreur sera aff iché et
il sera redirigé de nouveau vers la page d’authentification jusqu’à la validation des données.

30 | P a g e
 2- Ajouter groupe/utilisateur /objectif/route/l igne :

Figure 8 : Diagramme de séquence <<L’ajout de groupe/u tilisateur /objectif /route/ ligne >>.

Pour ajouter un (groupe/ utilisateur/objectif /route/ ligne) l’admin doit d’abord consulter l a page de gestion
(groupe/ utilisateur/objectif/route/ ligne) en question, puis remplir un formulaire de l’ajoute, si le formulaire
est mal rempli, l’admin doit refaire le même processus jusqu’à la validation du formulaire.

31 | P a g e
 3- Modifier group e/utilisateur /objectif /route/li gne :

Figure 9 : Diagramme de séquence <<Modification de groupe/utilisateur /objectif /route/ ligne >>.

Pour modifier un (groupe/ utilisateur/objectif /route/ ligne) l’admin doit d’abord consulter l a page de gestion
(groupe/ utilisateur/objectif/route/ ligne) en question, puis remplir un formulaire de modification, si le
formulaire est mal rempli, l’admin doit refaire le même processus jusqu’à la validation du formulaire.

32 | P a g e
 4- Supprimer groupe/utilisateur /objectif /rou te/ligne :

Figure 10 : Diagramme de séquence <<Suppression de groupe/utilisateur/objectif /route/ ligne >>.

Pour supprimer un (groupe/ utilisateur/objectif/rou te/ ligne), l’admin doit d’abord consulter
(groupe/ utilisateur/objectif/route/ ligne) en question, le supprimer et puis confirmer la suppression.

33 | P a g e
 5- Ajouter câble par l ’opéra teur :

Figure 11 : Diagramme de séquence <<Ajouter câble>>.

Pour ajouter un câble l’opérateur doit d’abord consulter l a page de scanne va afficher la page et aussi
afficher le formulaire il doit d ’abord scanner le code fournisseur et l ’étiquette et la quantité il passer a
l’input de scanne les câbles et il va ajouter les câbles.

34 | P a g e
 6- Ajouter package par l’opérateur :

Figure 12 : Diagramme de séquence <<Ajouter package>>.

Pour ajouter un package l’opérateur doit d’abord consulter l a page de scanne va afficher la page et aussi
afficher le formulaire il doit d ’abord scanner le code fournisseur et l ’étiquette et la quantité et terminer tout
la quantité des câbles en fin le package va ajouter.

35 | P a g e
IV. Diagramme d’activité :
Le diagramme d'activité es t un diagramme comport emental d'UML, permet tant de représenter le
déclenchement d'événe ments en fonction des états du sys tème et de modéliser des comportements pouvant
être parallèles. Le diagramme d'activité est également utilisé pour décrire un flux de travail.

1- Authenti fication et autorité :

Figure 13 : Diagramme d’activité << Authentification>>.

Ce diagramme représente les différentes étapes et activités à suivre pour réaliser le cas d’utilisation
<<s’authentifier >>.

36 | P a g e
 2- Ajouter/supprimer/modifier : (groupe/utilisateur /ligne/route/objectif ) :

Figure 14 : Diagramme d’activité << Ajouter / supprimer / modifier

(groupe/utilisateur/ligne/route/objectif)>>.

Ce diagramme représente les différentes étapes et activités à suivre pour réaliser le cas d’utilisation
<<ajouter/modifier/supprimer (groupe/utilisateur/ligne/route/objectif)>>.

3- Ajouter câble par l ’opérateur :

Figure 15 : Diagramme d’activité << Ajouter câble >>.

Ce diagramme représente les différentes étapes et activités à suivre pour réaliser le cas d’utilisation
<<Ajouter câble >>.

37 | P a g e
 4- Ajouter package par l’opérateur :

Figure 16 : Diagramme d’activité << Ajouter package >>.

Ce diagramme représente les différentes étapes et activités à suivre pour réaliser le cas d’utilisation
<<Ajouter package >>.

38 | P a g e
V. Diagramme de classe :
 Attribut : chaque attribut d’une classe est le même pour chaque instance de cette classe.

Méthodes : elle défin it le compor tement d’une classe elle -même, et non le comportement de ses
instances qui peut être différ ent.

Le schéma ci-dessous représente le diagramme de classe qu’on a établi pour la conception du système :

Figure 17 : Diagramme d e classe.

39 | P a g e
VI. Base de données :
1- MCD :

Le MCD (Modèle Conceptuel de Données) e st une représentati on graphi que de haut niveau qui pe rmet
facilement et simplement de comprendre comment les différents éléments sont liés e ntre eux.

Faisant partie de la boîte à outil Merise, le MCD décrit les do nnées utilisées par le système d’ information et
leurs relations.

La figure ci-dessous représente le MCD de notre application :

Figure 18 : MCD.

40 | P a g e
 2- MLD :

Le modèle logique de données est une ét ape de la conception qui consiste à décrire la structure des données
utilisées.

Le MCD ne peut pas être implanté dans une base d e données sans modification. Il est obligatoire de
transformer ce modèle. On dit qu’on effectue un passage du modèle conceptuel de données vers le mod èle
logique de données à travers des règles de passage.

La figure ci-dessous représente le MLD de notre application qu’on a obtenu en passant par le MCD :

Figure 19 : MLD.

Conclusion :
Enfin, ce chapitre de la phase d'ana lyse et de conception m'a perm is d'établir un plan de développement
clair et détaillé. J'a i défini le s étapes nécessair es, les ressources requises et les délais prévus, ce qui me
permettra de suivre le projet de m anière organisée et d'assurer la réalisatio n d e mon ap plication dans les
délais impartis.

En somme, ce chapitre a je té les bases soli des de mon projet d'applicati on web de g estion de packaging, en
me fournissant une direction claire pour la phase de développement à venir.

41 | P a g e
 Chapitre 4 :
Phase de réalisation

Introduction :
Pendant mon stage d'observation dans une entreprise de développement d'applications, j'ai eu l'opportunité
d'aider mes amis à créer une application en utilisant les langages CSS et HTML. Grâce à mes
connaissances préalables dans ces domaines, j'ai pu apporter mon soutien en les guidant dans la conception
de l'interface utilisateur et en les aidant à structurer efficacement le code. J'ai partagé avec eux des astuces
et des bonnes pratiques pour optimiser le style et la mise en page des éléments de l'application en utilisant
CSS. J'ai également collaboré avec eux pour résoudre les problèmes rencontrés lors de la création de
différentes fonctionnalités, en proposant des solutions basées sur mes connaissances en HTML. C'était une
expérience enrichissante où j'ai pu mettre en pratique mes compétences et contribuer au succès de ce projet
d'application.

42 | P a g e
 Outils de développement :
J’ai énuméré au cours de cette partie les différents outils utilisés tout au long de ce projet pour l’étude et la
mise en place de mon application web de gestion packaging.

1- PostgreSQL :

J'ai sélectionné PostgreSQL comme système de gestion de base de données pour mon
application. PostgreSQL est un système de base de données relationnelle robuste et performant, offrant une
large gamme de fonctionnalités avancées et une grande fiabilité. Il prend en charge le langage SQL standard
et propose des extensions pour des fonctionnalités spécifiques.

2- Visual Paradigm :

Visual Paradigm est un outil de modélisation et de conception visuelle qui permet de créer des
Diagrammes UML (Unified Modeling Language) et d'autres modèles conceptuels. J'ai utilisé Visual
Paradigm pour représenter visuellement l'architecture de mon application, définir les relations entre les
différentes entités et élaborer des diagrammes de classes, des diagrammes de cas d'utilisation et d'autres
artefacts de conception.

43 | P a g e
5- HTML :

HTML (HyperText Markup Language) est le langage de balisage standard pour la création de
pages web. Il définit la structure et le contenu d'une page web à l'aide de balises et d’attributs...

6- CSS :

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire la présentation et
la mise en forme des documents HTML. Il permet de contrôler l'apparence visuelle des pages web,
notamment la mise en page, les couleurs, les polices de caractères et les animations.

44 | P a g e
11- Bootstrap 5 :

Bootstrap est un Framework CSS populaire qui fournit des composants préconçus et des styles
pour construire des applications web réactives et adaptées aux mobiles. Bootstrap 5 est la dernière version, offrant
une large gamme de composants d'interface utilisateur (UI) et un système de grille flexible.

45 | P a g e
 Conclusion générale

En conclusion, mon expérience d'aider mes amis lors de mon stage d'observation
dans le développement d'une application utilisant CSS et HTML a été
extrêmement gratifiante. J'ai pu mettre à profit mes compétences dans ces
langages pour les guider dans la conception de l'interface utilisateur et la
structuration du code. J'ai également pu partager des astuces et des bonnes
pratiques afin d'optimiser le style et la mise en page de l'application. Travailler
en collaboration avec mes amis pour résoudre les problèmes rencontrés lors du
développement a renforcé ma confiance dans mes compétences et a renforcé
mon intérêt pour le domaine du développement d'applications. Je suis fier
d'avoir pu contribuer au succès de ce projet et je suis reconnaissant d'avoir eu
l'occasion de développer mes connaissances et mes compétences dans un
environnement professionnel. Cette expérience m'a donné une meilleure
compréhension du processus de développement d'applications et m'a inspiré à
poursuivre ma formation dans ce domaine prometteur.

46 | P a g e