République Algérienne Démocratique et Populaire

Ministère de la formation et de l’enseignement professionnelle

Institut National Spécialisé Dans La Formation Professionnelle
BEKKOUCHA AMIR ZOUBIR
-SIDI LAHCEN- Sidi Bel Abbes
-Mémoire fin d’étude-

Thème :

Spécialité : technicien supérieur en développement web & multimédia

Lieu de stage : Epe-CMA-spa-sidi bel abbes
Réalisation d’une application pour la gestion de stock

Présenté par :
- OURRED FOUAD MOHAMED REDA
- BELGHAITAR FAROUK ZOUBIR

Encadrant :
- Madame : Djazia kermouni

Promotion : 2021-2023
CHAPITRE 01 : PRESENTATION LIEU DE STAGE
 Remerciement
Nous tenons tout d’abord à remercier Dieu le tout puissant et
miséricordieux, qui nous a donné la force et la patience d’accomplir ce
Modeste travail.
En second lieu, nous tenons à remercier notre encadrant Madame
‘Djazia Kermouni ’ pour son précieux conseil et son aide durant toute
la période du travail.
Nous remercions les membres de jury qui nous font l’honneur de
présider et d’examiner ce modeste travail et les enseignants pour leurs
enseignements.
Finalement on tient remercier toute personne qui a participé de près ou
de loin à la réalisation de ce projet.
 Dédicace

Au nom d’Allah. Nous tenons à dédier ce travail à

nos familles : Nos parents et Nos frères, avec tous
nos sentiments de respect, d’amour et de
reconnaissance pour tous les sacrifices déployés
pour nos ‘assurer une éducation dans les meilleures
conditions. A nos professeurs sans exception, pour
leurs efforts afin de m’assurer une formation
solide. A tous Nos amis, A tous ceux pour qui nos
réussites leur tiennent au cœur.
A toute la promo 2021

FOUAD & FAROUK

Table des matières :
Remerciement ......................................................................................................................
Dédicace................................................................................................................................
- Table des matières...............................................................................................................
- Table des figures..................................................................................................................
- Table des tableaux...............................................................................................................
- liste des abréviation.............................................................................................................
- Introduction générale .........................................................................................................1
Chapitre I : présentation lieu de stage………………………………………………………………………….....3
-Introduction………………………………………………………………………………………………………………….....4
-Fiche technique et organigramme ………………………………………………………………………………......4
-Information juridique……………………………………………………………………………………………………....7
-Les produits innovants……………………………………………………………………………………………….......7
-L’équipe CMA……………………………………………………………………………………………………………….....8
-Conclusion……………………………………………………………………………………………………………………....9
Chapitre II : la technologie web ……………………………………………………………………………………...10
Introduction……………………………………………………………………………………………………………………..11
-Les avantages de la technologie web...................................................................................11
Les défis de la technologie web ……………………………………………………………………………………….11
-L’avenir de la technologie web.............................................................................................12
-Présentation HTML, CSS,Javascript,MYSQL………………………………………………………………………12
-Introduction au développement web ……………………………………………………………………………..12
-HTML………………………………………………………………………………………………………………………………12
-PHP…………………………………………………………………………………………………………………………………13
-CSS…………………………………………………………………………………………………………………………………13
-JavaScript……………………………………………………………………………………………………………………….13
-MYSQL……………………………………………………………………………………………………………………………14
-Conclusion……………………………………………………………………………………………………………………..14
-WWW(world wide web )……………………………………………………………………………………………….14
-Qu’est ce que le World Wide Web…………………………………………………………………………………14
-L’historique de World Wide Web……………………………………………………………………………………15
-Comment fonctionne le World Wide Web……………………………………………………………………..15
-L’importance du World Wide Web…………………………………………………………………………………15
-L’avenir de World Wide Web………………………………………………………………………………………….16
-Site web et application…………………………………………………………………………………………………..16
-Introduction………………………………………………………………………………………………………………....16
-Différence entre un site web et application web…………………………………………………………..17
-Pourquoi avoir un site web ………………………………………………………………………………………….17
-Pourquoi avoir une application web …………………………………………………………………………...17
-Comment créer un site web………………………………………………………………………………………..18
-Comment créer une application web………………………………………………………………………….18

Chapitre III : Langage de modélisation……………………………………………………………….........19

-Introduction……………………………………………………………………………………………………………....20
-Définition UML……………………………………………………………………………………………………….....20
-Historique UML………………………………………………………………………………………………………....20
-Les diagrammes UML…………………………………………………………………………………………….....20
-Les diagrammes comportementaux……………………………………………………………………….... 21
-Diagramme de cas d’utilisation…………………………………………………………………………….....21
-Les cas d’utilisation………………………………………………………………………………………………....21
-Les acteurs……………………………………………………………………………………………………………...21
-Les acteurs principaux……………………………………………………………………………………………..21
-Les acteurs secondaires…………………………………………………………………………………………..21
-Le matériel externe………………………………………………………………………………………………....21
- Les autre système …………………………………………………………………………………………………..22
-Les relations entre les cas d’utilisation………………………………………………………………….....22
-La relation d’inclusion…………………………………………………………………………………………......22
-La relation d’extension………………………………………………………………………………………….....22
-Diagramme de collaboration……………………………………………………………………………….......22
-Diagramme de séquence…………………………………………………………………………………….......23
-L’objet………………………………………………………………………………………………………………….......23
-Le lien……………………………………………………………………………………………………………………....23
-Le message………………………………………………………………………………………………………….......23
-Diagramme d’états transition………………………………………………………………………………......24
-Diagramme d’activités…………………………………………………………………………………………......24
-Les diagrammes structurels…………………………………………………………………………………......24
-Diagramme de classe…………………………………………………………………………………………….....24
-Classe………………………………………………………………………………………………………………….......25
-Attribut……………………………………………………………………………………………………………….......25
-Opération……………………………………………………………………………………………………………......25
-Les relations entre classe…………………………………………………………………………………….......25
-Association………………………………………………………………………………………………………….......25
-Agrégation………………………………………………………………………………………………………….......25
-Composition…………………………………………………………………………………………………….........25
-Dépendance………………………………………………………………………………………………………......26
-Généralisation……………………………………………………………………………………………………......26
-Réalisation…………………………………………………………………………………………………………......26
-Diagramme d’objet………………………………………………………………………………………………....26
- Diagramme de composants…………………………………………………………………………………...26
-Diagramme de déploiement…………………………………………………………………………………...26
-Conclusion……………………………………………………………………………………………………………...26
Chapitre IV : Système de gestion de stock « CMA Stock»…………………………………….....27
-Introduction…………………………………………………………………………………………………………….28
-Quel est le point de vente ……………………………………………………………………………………....28
-Définition de l’application « CMA Stock »………………………………………………………………...28
-Caractéristiques………………………………………………………………………………………………………..28
-Modélisation du système ………………………………………………………………………………………….29
-Itération…………………………………………………………………………………………………………………….29
-Diagramme de cas d’utilisation ………………………………………………………………………………….30
-Le magasinier………………………………………………………………………………………………………………30
-Le directeur général…………………………………………………………………………………………………….30
-Diagramme de cas d’utilisation « gestion des clients »……………………………………………….31
-Diagramme de cas d’utilisation « gestion des ventes »………………………………………………..32
-Diagramme de séquence……………………………………………………………………………………………..32
-Magasinier « ajouter un produit »....................................................................................33
-Magasinier « ajouter un client »......................................................................................34
-Magasinier « modifier ou supprimer un client »..............................................................34
-Magasinier « créer une facture de vente ».......................................................................35
-Diagramme de classe de l’application « CMA Stock ».......................................................36
-L’interface de l’application.................................................................................................37
-LARAVEL………………………………………………………………………………………………………………………..37
-la base de données............................................................................................................38
-MYSQL…………………………………………………………………………………………………………………………..39
-La base de données de l’application « CMA Stock » ........................................................39
-Le programme……………………………………………………………………………………………………………….40
-Description de l’application……………………………………………………………………………………….....40
-Fenêtre d’authentification …………………………………………………………………………………………...40
-Fenêtre principale……………………………………………………………………………………………...............42
-Fenêtre : Liste des produits…………………………………………………………………………………………….42
-Ajouter un type de produit…………………………………………………………………………………………....43
-Liste des clients………………………………………………………………………………………………………………44
-Liste des utilisateurs……………………………………………………………………………………………………….44
-Saisir une facture de vente…………………………………………………………………………………………....45
-les codes source de l’application.........................................................................................46
- Conclusion…………………………………………………………………………………………………………………....48
-Références bibliographiques
Table des figures :
Figure 1 :logo de l’entreprise (page de garde )
Figure 2 :l’organigramme de l’entreprise (page 6 )
Figure 3 :épandeur de fumier (page 8 )
Figure 4 :pulvériseur porte (page 8 )
Figure 5 :atomiseur 1000L (page 8 )
Figure 6:dérouleuse de câble (page 8 )
Figure 7:la technologie web (page 9 )
Figure 8:gestion de stock (page 10 )
Figure 9:langage UML (page )
Figure 10:la relation d’inclusion (page 22 )
Figure 11:la relation d’extension (page 22 )
Figure 12:diagramme de classe (page 22 )
Figure 13:relation entre composition et agrégation (page 25 )
Figure 14:page d’accueil de l’application « CMA Stock » (page 28 )
Figure 15:diagramme de cas d’utilisation « gestion de produits » (page 30 )
Figure 16:diagramme de cas d’utilisation « gestion des clients » (page 31)
Figure 17:diagramme de séquence « gestion des ventes » (page 32 )
Figure 18:diagramme de séquence (page 33 )
Figure 19:diagramme de séquence magasinier « ajouter un produit » (page 33 )
Figure 20:diagramme de séquence magasinier « ajouter un client » (page 34 )
Figure 21:diagramme de séquence « modifier ou supprimer un client » (page 35 )
Figure 22:diagramme de séquence magasinier « créer une facture de vente » (page 36 )
Figure 23:diagramme de classe de l’application « CMA Stock » (page 37 )
Figure 24:l’interface de LARAVEL (page 38 )
Figure 25:base de données d’application « CMA stock » (page 39 )
Figure 26:page d’authentification (page 40 )
Figure 27:page d’authentification incorrecte (page 41 )
Figure 28:fenêtre principale (page 42 )
Figure 29:liste des produits (page 42 )
Figure 30:ajouter un type de produit (page 43 )
Figure 31:liste des clients (page 44 )
Figure 32:liste des utilisateurs (page 44 )
Figure 33:facture de vente (page 45 )
Figure 34:les codes source de l’application (page 46 )

Table des tableaux :

Tableau 1 : Tableau des diagrammes UML (page 21)
Liste des abréviation :
HTML HTML,ou HyperText Markup Language,
est la base de toutes les pages Web. Il
s'agit d'un langage de balisage qui décrit la
structure et le contenu d'une page Web à
l'aide de diverses balises.

PHP PHP est un langage côté serveur qui

permet aux développeurs Web de créer
des pages Web dynamiques.
Contrairement au HTML, qui fournit
uniquement du contenu statique, PHP peut
interagir avec des bases de données et
générer du contenu personnalisé pour
chaque utilisateur.

CSS CSS signifie Cascading Style Sheets

et est utilisé pour contrôler la présentation
des pages Web, y compris la mise en
page, la typographie, les couleurs et
d'autres aspects visuels.

JAVA SCRIPT JavaScript est un langage de

programmation côté client qui permet aux
développeurs Web d'ajouter de
l'interactivité à leurs pages Web.

MYSQL MySQL est un système de gestion de base

de données relationnelle open source
populaire qui est largement utilisé dans le
développement Web.

UML UML se définit comme un langage de

modélisation graphique et textuel destiné à
comprendre et décrire des besoins.

LARAVEL Laravel est un Framework web open-

source écrit en PHP respectant le principe
modèle-vue-contrôleur et entièrement
développé en programmation orientée
objetavec ses sources hébergées sur
GitHub.
POS Point of sales (POS) ou un point de vente
(PDV) est un endroit où un client exécute
le paiement de biens ou de services et où
les taxes de vente peuvent devenir
payables.
 Introduction Générale :

Dans un entourage industriel déterminé par une concurrence acharnée,

l'entreprise est trouvée plus que le passé, dans l'obligation de respecter les
exigences de productivité, de qualité, de coût et de délai. Pour conserver cet
équilibre, elle cherche à renvoyer toutes les distorsions existantes dans le système
de son travail, passant du principe que tout problème est une opportunité
d'amélioration.
Le mot « stock » peut être défini comme un ensemble des produits que l’on
garde en vue d’une utilisation ultérieure. D’un point de vue économique, la gestion de
stock occupe une grande importance dans les intérêts des entreprises industrielles.
Cette opération lourde en termes de ressources humaines et matérielles représente
une artère vitale pour ces entreprises qui cherche à répondre au mieux aux
demandes des clients.
Néanmoins, les stocks représentent plus qu’une dépense initiale. De fait, les
stocks entraînent avec le temps des coûts de plus en plus importants. Le fait de
maintenir une grande quantité de stocks peut provoquer un effet nuisible sur la
gestion financière d’une entreprise. D’un autre côté, ces stocks sont importants pour
calmer les risques reliés aux délais de livraison, aux comportements changeants des
utilisateurs et aux canaux de distribution. C’est là où les gestionnaires doivent trouver
un bon équilibre entre les niveaux de leurs stocks afin de réduire les coûts, en
réduisant les niveaux d'inventaire sans risquer l'interruption de venteen raison de
rupture de stock.
Avant l'invention de l'ordinateur, les entreprises du secteur industriel utilisaient
des supports en papier afin d’enregistrer les informations liées à la gestion des
stocks, ce qui engendrait beaucoup de problèmes tels que la perte de temps
considérable dans la recherche de ces informations ou la dégradation de ces
dernières...etc. L’homme a compris qu’il lui fallait des moyens plus sophistiqués s’il
voulait améliorer sa gestion et ses calculs, c’est l’informatique. Cette science
marquée par la volonté des hommes d’automatiser certains travaux longtemps
réalisés à la main, en particulier les calculs et la gestion.
- Choix et intérêt du sujet
Ce travail intitulé « Conception et réalisation d’un système de gestion de stock
pour une entreprise de production : Cas de l’entreprise CMA » rentre dans le cadre
des applications de gestion de stock qui consiste à informatiser les différentes tâches
liées à cette activité. Notre objectif est de présenter une conception et une
implémentation d’un système d’information permettant aux gestionnaires de
l’entreprise CMA à gérer au mieux les différents stocks en leur offrant une application
impeccable, rapide et fiable.
Ce travail nous permettre de concilier la théorie à la pratique en modélisant les
différentes parties du système.
Ce travail est structuré comme suit :

- Le premier chapitre est une présentation de notre lieu stage qui est
l'entreprise de Construction Matériels d'Agriculture (CMA).

1
 - Le deuxième chapitre est consacré au ‘ tech-web’.
- le troisième chapitre on va parler des secrets de la gestion de stock.
- le quatrième chapitre sera conclu parla langage de modélisation UML.
-le cinquième chapitre c’est notre application de la gestion de stock‘ Stocky
CMA ‘.

2
Chapitre 1 : présentation de
notre lieu de stage
L’entreprise CMA :
Chapitre 1 : présentation de notre lieu de stage L’entreprise CMA

1.1 Introduction :
Fondée il y a plus de 50 ans, notre entreprise a commencé comme une petite
entreprise familiale avec une vision simple : aider les agriculteurs à réussir. Au fil des
années, Ils savent développer des produits innovants et établi des partenariats
solides avec nos clients pour les aider à prospérer dans un marché en constante
évolution.
L’équipe CMA est fière de son héritage et de notre engagement envers la qualité et
l'excellence. Ils travaillent dur pour offrir à ses clients les meilleurs produits, services
et conseils possibles. Cette entreprise est synonyme de fiabilité, d'intégrité et de
passion pour l'agriculture.
L’entreprise CMA est une filiale relevant du HOLDING AGM Spa « Algerian Group of
Mechanics », dotée d’un Capital social de 2 785 470 000 DA (23 Millions d’EURO),
Son domaine d’activité est la Production des Matériels Agricoles.
CMA est constituée de deux (02) joint-ventures créés avec de Grands Groupes
Internationaux spécialisés dans la fabrication des Matériels Agricoles, Engins de
nouvelle génération
CMA est spécialisée dans la conception, le développement, la production des
produits entrant dans la filière des Matériels Agricoles et la distribution de pièces de
rechange.

1.2 Fiche Technique et organigramme :

1) Entreprise CMA:

Production de Matériels de récolte, Matériels de semis, Matériels de fertilisation et

traitement, Matériels de travail du sol, Matériels de transport agraire, Autres produits
Agricoles et la pièce de rechange est installée à Sidi Bel Abbés.

2) Unité MBB:

Pour la production de Matériels de Semis Fertilisation et de traitement. La filiale est

située à Mostfa Ben Brahim –Sidi Bel Abbes.

3) Unité HBH :

Pour la production de Matériels de transport Agraire. La filiale est située à Hammam

Bouhdjer – Ain Timouchent.

4) J.V SAMPO-ALGERIE:

Pour la production de Moissonneuse-batteuse de Nouvelle Génération avec SAMPO

Rosenlew (Finlande) .

4
Chapitre 1 : présentation de notre lieu de stage L’entreprise CMA

5) J.V GALUCHO-ALGERIE:

Pour la production de Matériels de travail du sol et de transport agraire avec

GALUCHO (Portugal).

6) Réseaux PMAT :

Ce réseau compte quatre (04) unités commerciales principales implantées au niveau

des grandes villes, à savoir :

Alger
Oran
Constantine
Bou Saâda M’Sila

7) Unités Auxiliaires PMAT :

Des unités auxiliaires implantées à travers dix (10) autres wilayas à vocation
agricole.

5
Chapitre 1 : présentation de notre lieu de stage L’entreprise CMA

1.3 Organigramme de l’entreprise :

Figure2 :L’organigramme de l’entreprise

6
Chapitre 1 : présentation de notre lieu de stage L’entreprise CMA

1.4 INFORMATIONS JURIDIQUE :

Secteur d'activité :
Industries mécaniques
Date de création :
1973
Date de restructuration :
1997 (scission de PMA et création de CMA / Spa
Sigle après restructuration :
EPE / CMA. Spa
Forme juridique :
Société par actions (EPE Spa)
Dénomination :
Entreprise Construction de Matériels Agricoles
Date de démarrage :
1976
Cadre Dirigeant Principal :
Mr AIT BRAHAM BRAHAM PDG / Mr BERBER BENAISSA, DG
Siège social :
Boulevard MESSALI El Hadj, BP 38, Sidi Bel Abbés
Capital social :
2. 785. 470. 000 DA

1.5 Les produits innovants :

Nous sommes fiers de présenter nos produits agricoles les plus innovants et les
plus performants. Grâce à notre recherche et développement constant, nous avons
développé des solutions qui aident les agriculteurs à maximiser leur rendement tout
en minimisant leur impact sur l'environnement.
Notre gamme de produits comprend des semences génétiquement modifiées,
des engrais biologiques et des pesticides naturels. Nous avons également développé
des outils numériques qui permettent aux agriculteurs de surveiller leur production en
temps réel et d'optimiser leurs pratiques agricoles.

7
Chapitre 1 : présentation de notre lieu de stage L’entreprise CMA

Figure3 : Epandeur de fumier Figure4 : Pulvériseur porte

Figure5 : Atomiseur 1000L Figure6 : Dérouleuse de câble

1.6 L’équipe CMA :

L’équipe est composée de professionnels passionnés et dévoués qui ont pour

objectif d'aider les agriculteurs à réussir. Chaque membre de L’équipe apporte une
expertise unique et travaille en collaboration pour offrir des solutions innovantes et
efficaces.
Ils fièrent de dire que son équipe compte des experts dans divers domaines, allant
de la recherche et du développement à la vente et au marketing.Sa culture
d'entreprise encourage l'apprentissage continu et le développement personnel, ce
qui nous permet de rester à la pointe de l'industrie et de mieux servir nos clients.

8
Chapitre 1 : présentation de notre lieu de stage L’entreprise CMA

1.7 Conclusion :

L’équipe est convaincue que l'avenir de l'agriculture est entre ses mains. Chez
[CMA], Ils sont déterminés à continuer à innover et à développer des produits qui
répondent aux besoins changeants des agriculteurs. Ils avaient une équipe de
recherche et développement dédiée qui travaille sans relâche pour trouver de
nouvelles solutions pour améliorer les rendements et la qualité des cultures.
Ils croient également que la clé du succès réside dans le partenariat avec les
agriculteurs. Ils continueront à travailler en étroite collaboration avec eux pour
comprendre leurs besoins et leur offrir des solutions sur mesure. Ensemble, Ils
peuvent faire face aux défis futurs de l'agriculture et assurer un avenir durable pour
tous.

9
 Chapitre 2 :
La Technologie Web
Chapitre 2 : La Technologie Web

1.1 Introduction de la technologie web :

Le Web technologique est un terme utilisé pour décrire le réseau technologique
interconnecté qui nous permet de communiquer, de partager des informations et de
collaborer à l’échelle mondiale. À la base, le Web technologique se compose de
matériel, de logiciels et de données qui fonctionnent ensemble de manière
transparente pour créer un écosystème numérique qui alimente notre vie
quotidienne. Cet écosystème numérique est composé de diverses composantes,
notamment Internet, les plateformes de médias sociaux, le cloud computing, les
appareils mobiles, etc. Chacun de ces composants joue un rôle essentiel dans le
façonnement du Web technologique et nous permet de nous connecter les uns aux
autres et au monde qui nous entoure d’une manière qui était autrefois
inimaginable[6].

1.2 Les avantages de la technologie web :

Les avantages du Web technologique :
L’un des principaux avantages du Web technologique est une connectivité
accrue. Grâce à la capacité de nous connecter avec des personnes et des
ressources du monde entier, nous sommes en mesure de collaborer et de partager
des connaissances comme jamais auparavant. Cela a conduit à des percées dans
des domaines tels que la médecine, la science et l’ingénierie.
Un autre avantage du Web technologique est une accessibilité améliorée.
Grâce aux progrès technologiques, nous sommes désormais en mesure d’accéder
aux informations et aux services de n’importe où et à tout moment. Cela a rendu
l’éducation et les soins de santé plus accessibles aux personnes vivant dans des
zones reculées, améliorant ainsi leur qualité de vie.

1.3 Les défis de la technologie web :

L’un des plus grands défis du Web technologique est la question de la vie
privée. Avec autant d’informations personnelles partagées en ligne, il existe un risque
qu’elles soient exploitées par des acteurs malveillants. Ceci est particulièrement
préoccupant compte tenu des récentes violations et fuites de données très
médiatisées. Cependant, il est important de noter que de nombreuses entreprises
prennent des mesures pour protéger la confidentialité des utilisateurs et améliorer
leurs mesures de sécurité.
Un autre défi du Web technologique est le risque de cyberattaques. Avec de
plus en plus d’appareils connectés à Internet, les pirates informatiques ont de plus en
plus de possibilités d’exploiter les vulnérabilités et d’accéder sans autorisation à des
informations sensibles. Bien que cela constitue certainement une préoccupation, il
convient de noter que de nombreuses entreprises investissent massivement dans
des mesures de cybersécurité pour prévenir ce type d'attaques[7].
11
Chapitre 2 : La Technologie Web

1.4 L'avenir de la technologie web :

Alors que nous regardons vers l’avenir, les possibilités du Web technologique
sont infinies. De la réalité virtuelle à l’intelligence artificielle, le Web technologique
continuera d’évoluer et de façonner notre monde d’une manière que nous n’aurions
jamais cru possible. Imaginez un monde dans lequel vous pouvez contrôler votre
maison avec simplement votre voix ou avoir accès à toutes les connaissances du
monde à portée de main. Ce n’est que le début de ce que le Web technologique a à
offrir [8].

1.5 Présentation HTML , PHP , CSS , JAVA SCRIPT ,

MYSQL :

1) Introduction au développement Web :

Le développement Web est le processus de création de sites Web et
d’applications Web accessibles via Internet. Il implique diverses technologies et
langages de programmation tels que HTML, PHP, CSS, JavaScript et MySQL.
HTML est l’élément constitutif des pages Web et est utilisé pour structurer le
contenu sur le Web. PHP est un langage côté serveur utilisé pour créer des pages
Web dynamiques. CSS est le langage de style utilisé pour rendre les pages Web
visuellement attrayantes. JavaScript est le langage côté client utilisé pour ajouter de
l'interactivité aux pages Web. Et MySQL est le langage de base de données utilisé
pour stocker et récupérer des données pour les applications Web[9].

2) HTML : la pierre angulaire des pages Web :

HTML, ou HyperText MarkupLanguage, est la base de toutes les pages Web. Il
s'agit d'un langage de balisage qui décrit la structure et le contenu d'une page Web à
l'aide de diverses balises.
Les balises HTML sont placées entre crochets (<>) et sont présentées par
paires, avec une balise d'ouverture et une balise de fermeture. La balise d'ouverture
commence l'élément et la balise de fermeture le termine. Certaines balises HTML
courantes incluent <html>, <head>, <title>, <body>, <h1> à <h6>, <p>, <a>, <img>,

12
Chapitre 2 : La Technologie Web

<ul>, <ol> et <li>. Chaque balise a un objectif spécifique, comme définir des titres,
des paragraphes, des liens, des images, des listes, etc.

3) PHP : Le langage côté serveur :

PHP est un langage côté serveur qui permet aux développeurs Web de créer
des pages Web dynamiques. Contrairement au HTML, qui fournit uniquement du
contenu statique, PHP peut interagir avec des bases de données et générer du
contenu personnalisé pour chaque utilisateur.
L'une des fonctionnalités clés de PHP est sa capacité à intégrer du code dans
des pages HTML. Cela signifie que les développeurs peuvent utiliser PHP pour
générer du code HTML à la volée, en fonction des entrées de l'utilisateur ou d'autres
variables. Par exemple, un script PHP pourrait générer une page différente pour
chaque utilisateur, en fonction de son statut de connexion ou de ses préférences.

4) CSS : le langage de style :

CSS signifie Cascading Style Sheets et est utilisé pour contrôler la présentation
des pages Web, y compris la mise en page, la typographie, les couleurs et d'autres
aspects visuels.
CSS fonctionne en sélectionnant des éléments HTML et en leur appliquant des
styles. Cela peut être fait à l'aide de sélecteurs, qui ciblent des éléments spécifiques
en fonction de leur nom de balise, de leur classe ou de leur ID. Les styles sont
ensuite appliqués à l'aide de propriétés telles que la taille de la police, la couleur
d'arrière-plan ou la marge.

5) JavaScript : le langage côté client :

JavaScript est un langage de programmation côté client qui permet aux
développeurs Web d'ajouter de l'interactivité à leurs pages Web. Contrairement à
HTML et CSS, qui sont utilisés pour créer la structure et le style d'une page Web,
JavaScript est utilisé pour créer des éléments dynamiques et interactifs sur une page
Web.Quelques exemples de ce que JavaScript peut faire incluent la validation des
entrées utilisateur dans des formulaires Web, la création d'animations et d'effets et la
mise à jour du contenu d'une page Web sans avoir à recharger la page entière. Le
code JavaScript interagit avec HTML et CSS en manipulant le modèle objet de
document (DOM), qui est une représentation de la structure et du contenu de la page
Web.

13
Chapitre 2 : La Technologie Web

6) MySQL: langage de la base de données :

MySQL est un système de gestion de base de données relationnelle open
source populaire qui est largement utilisé dans le développement Web. Il permet aux
développeurs de stocker et de récupérer des données pour leurs applications Web,
ce qui en fait un outil essentiel pour la INTRODUCTIONcréation de sites Web
dynamiques. L’une des principales caractéristiques de MySQL est sa capacité à
gérer efficacement de grandes quantités de données. Cela le rend idéal pour les
applications Web qui nécessitent un stockage et une récupération de données
rapides et fiables. MySQL prend également en charge des fonctionnalités avancées
telles que les transactions et les clés étrangères, qui permettent de garantir l’intégrité
et la cohérence des données. Lorsqu’ils travaillent avec MySQL dans le
développement Web, les développeurs utilisent généralement PHP pour interagir
avec la base de données. Ils peuvent écrire du code PHP pour exécuter des
requêtes MySQL, récupérer des données de la base de données et mettre à jour ou
supprimer des enregistrements selon les besoins. Cela leur permet de créer des
applications Web puissantes capables de gérer des interactions de données
complexes.

1.6 Conclusion :
En conclusion, nous avons exploré le concept du web technologique et son
évolution au fil du temps. Nous avons discuté de ses composants, de ses avantages,
de ses défis et de ses possibilités futures.
Même s’il existe certainement des risques associés au Web technologique, tels
que des problèmes de confidentialité et des menaces en matière de cybersécurité,
nous pensons que les avantages dépassent de loin ces défis. Le Web technologique
a le potentiel de nous connecter d’une manière qui était auparavant inimaginable et
de fournir un accès à l’information et aux ressources à une échelle sans précédent.
En adoptant cette technologie et en travaillant à atténuer ses risques, nous pouvons
créer un avenir meilleur pour tous.

I. WWW :
a) Qu’est-ce que le World Wide Web ?
Le World Wide Web, ou simplement le Web, est un vaste réseau de documents
et de ressources interconnectés accessibles via Internet. Il a été créé en 1989 par
Tim Berners-Lee, un informaticien britannique, et a depuis révolutionné la façon dont
nous communiquons, travaillons et vivons.

14
Chapitre 2 : La Technologie Web

Le Web nous permet d'accéder à des informations de n'importe où dans le

monde, de nous connecter avec des personnes du monde entier et de partager nos
pensées et nos idées avec un public mondial. Elle a transformé des secteurs tels que
les médias, l’éducation et le commerce, et a donné naissance à de nouvelles formes
de communication et d’interaction sociale[10].

b) L'histoire du World Wide Web :

Le World Wide Web, ou WWW, a été créé en 1989 par l'informaticien
britannique Tim Berners-Lee alors qu'il travaillait au CERN, l'Organisation
européenne pour la recherche nucléaire. L'objectif de Berners-Lee était de créer un
système qui permettrait aux scientifiques de partager facilement des informations
entre eux, quel que soit leur emplacement.
La première page Web a été publiée en 1991 et le premier navigateur Web,
appelé World Wide Web, a été lancé l'année suivante. Au début du Web, il était
principalement utilisé à des fins académiques et scientifiques. Cependant, à mesure
que de plus en plus de personnes ont accès à Internet et que la technologie
progresse, le Web est devenu plus accessible et plus convivial. Aujourd'hui, le Web
fait partie intégrante de la société moderne et a révolutionné la façon dont nous
communiquons, travaillons et accédons à l'information.

c) Comment fonctionne le World Wide Web ?

Le World Wide Web est un vaste réseau d'ordinateurs interconnectés qui
communiquent entre eux à l'aide d'un protocole standardisé appelé HTTP. Lorsque
vous accédez à un site Web, votre ordinateur envoie une requête au serveur
hébergeant le site, qui répond avec les fichiers et données nécessaires pour afficher
le contenu sur votre écran[11].

d) L'importance du World Wide Web aujourd'hui :

Le World Wide Web a révolutionné la façon dont nous communiquons,

apprenons et faisons des affaires. En quelques clics, nous pouvons nous connecter
avec des personnes du monde entier, accéder à de grandes quantités d’informations
et même acheter et vendre des produits ou des services.

15
 Chapitre 2 : La Technologie Web

L’un des impacts les plus importants du World Wide Web est sa capacité à
démocratiser le savoir. Internet a rendu l'éducation plus accessible que jamais,
permettant à toute personne disposant d'une connexion Internet de se renseigner sur
presque tous les sujets qui l'intéressent. Cela a conduit à une société plus informée
et plus autonome, où les individus disposent des outils dont ils ont besoin pour
prendre des décisions éclairées et poursuivre leurs passions.

e) L'avenir du World Wide Web :

L’avenir du World Wide Web est passionnant et plein de potentiel. Une
tendance majeure à laquelle nous pouvons nous attendre est la croissance continue
de l’Internet des objets (IoT), qui permettra aux appareils du quotidien de
communiquer entre eux et avec le Web. Cela mènera à un monde plus connecté où
tout, de nos voitures à nos cafetières, pourra partager des données et travailler
ensemble de manière transparente.
Un autre développement clé pour l’avenir du Web est l’essor de l’intelligence
artificielle (IA) et de l’apprentissage automatique. À mesure que ces technologies
deviendront plus avancées, elles seront capables d’analyser et d’interpréter de
grandes quantités de données en temps réel, nous permettant ainsi de prendre de
meilleures décisions et d’améliorer nos vies d’innombrables façons[12].

II. Site Web et Application web :

a) Introduction :
De nos jours, les sites web et les applications web sont omniprésents dans
notre vie quotidienne. Ils nous permettent de communiquer avec des amis et des
collègues à travers le monde, de faire des achats en ligne, de réserver des voyages
et même de suivre notre santé et notre condition physique. Mais saviez-vous que ces
outils ont également une grande importance pour les entreprises ?
En effet, les sites web et les applications web sont devenus des éléments
essentiels de la présence en ligne d'une entreprise. Ils permettent aux entreprises de
se connecter avec leur public cible, de promouvoir leurs produits et services et de
générer des revenus. Les sites web peuvent être utilisés pour fournir des
informations sur l'entreprise, tandis que les applications web offrent des

16
Chapitre 2 : La Technologie Web

fonctionnalités plus avancées telles que la personnalisation et l'intégration avec

d'autres services en ligne.

b) Différences entre un site web et une application web :

Un site web est généralement accessible via un navigateur web et permet aux
utilisateurs de consulter du contenu statique ou dynamique. Par exemple, un site
web peut être utilisé pour afficher des informations sur une entreprise ou pour vendre
des produits en ligne.
D'autre part, une application web est un programme qui s'exécute dans un
navigateur web et offre une expérience utilisateur plus interactive et personnalisée.
Par exemple, une application web peut être utilisée pour gérer des tâches, stocker
des données ou créer des graphiques interactifs.

c) Pourquoi avoir un site web ?

Aujourd'hui, avoir un site web est essentiel pour toute entreprise ou personne
qui souhaite être visible en ligne. En effet, selon une étude récente, plus de 80% des
consommateurs effectuent des recherches en ligne avant d'acheter un produit ou un
service. Cela signifie que si vous n'avez pas de site web, vous risquez de perdre une
grande partie de votre clientèle potentielle.
De plus, un site web bien conçu peut aider à renforcer la crédibilité de votre
entreprise ou de votre marque. Selon une autre étude, près de 75% des
consommateurs jugent la crédibilité d'une entreprise en fonction de la qualité de son
site web. Avoir un site web professionnel et bien conçu peut donc vous aider à
gagner la confiance de vos clients actuels et potentiels[13].

d) Pourquoi avoir une application web ?

Une application web est un outil puissant qui peut aider les entreprises et les
individus à atteindre leurs objectifs en ligne. Contrairement à un site web statique,
une application web offre une expérience utilisateur plus interactive et personnalisée.
Par exemple, une application de commerce électronique peut permettre aux
utilisateurs de sauvegarder leur panier d'achat et de recevoir des recommandations
de produits en fonction de leurs achats précédents.
De plus, une application web peut être accessible depuis n'importe quel
appareil connecté à Internet, ce qui la rend plus pratique pour les utilisateurs en
déplacement. Par exemple, une application de gestion de projet peut permettre aux
travailleurs distants de collaborer facilement sur des tâches importantes, peu importe
où ils se trouvent dans le monde.

17
Chapitre 2 : La Technologie Web

e) Comment créer un site web ?

Le choix d'un nom de domaine est crucial pour votre site web. Il doit être facile
à retenir et à taper, refléter l'identité de votre entreprise ou de votre marque, et être
disponible à l'enregistrement. Vous pouvez utiliser des outils en ligne pour vous aider
à trouver un nom de domaine qui répond à ces critères.
La sélection d'un hébergeur est également importante. Vous devez choisir un
hébergeur fiable avec une bonne réputation et des fonctionnalités adaptées à vos
besoins. Vous pouvez comparer les offres d'hébergement en ligne pour trouver celui
qui convient le mieux à votre site web.
La conception du site est un autre élément clé. Vous devez créer un design
attrayant et convivial qui reflète votre marque et attire les visiteurs. Vous pouvez
utiliser des outils de conception de sites web pour vous aider à créer un design
professionnel et personnalisé[14].

f) Comment créer une application web ?

La création d'une application web nécessite plusieurs étapes importantes. Tout
d'abord, il est essentiel de sélectionner un Framework qui convient à vos besoins. Il
existe de nombreux Frameworks disponibles, chacun avec ses propres avantages et
inconvénients. Ensuite, il est important de concevoir une interface utilisateur intuitive
qui permettra aux utilisateurs de naviguer facilement dans votre application. Enfin,
vous devrez mettre en œuvre des fonctionnalités spécifiques qui répondent aux
besoins de vos utilisateurs.
Il est également important de prendre en compte les performances de votre
application web. Assurez-vous qu'elle est rapide et réactive, même lorsque vous
travaillez avec de grandes quantités de données. Vous pouvez améliorer les
performances de votre application en utilisant des outils de développement tels que
les tests de charge et les profilers. Enfin, n'oubliez pas de tester soigneusement
votre application avant de la publier afin de garantir qu'elle fonctionne correctement
pour tous les utilisateurs[15].

18
Chapitre 2 : La Technologie Web

Chapitre 3 :

Langage de modélisation UML

19
Chapitre 3 : Langage de modélisation UML

1.1 Introduction :
Ce chapitre a pour objectif de définir les principaux concepts du langage UML
«Unified Modeling Language » qui représente l’état de l’art des langages de
modélisation objet. Ilfournit les fondements pour spécifier, construire, visualiser et
décrire les artefacts d’unsystème logiciel et ces concepts de base et offre également
des mécanismes d’extension deces concepts.

1.2 Définition UML :

UML se définit comme un langage de modélisation graphique et textuel destiné
à comprendre et décrire des besoins, spécifier et documenter des systèmes,
esquisser des architectures logicielles, concevoir des solutions et communiquer les
divers aspects d'un système d'information[16] .
Ce langage est certes issu du développement logiciel, mais pourrait être
applique à toute science fondée sur la description d’un système[17].

1.3 Historique UML :

UML est le résultat de la fusion de trois méthodes d’analyse orientées objet : la
méthode OOD(Object Oriented Design), la méthode OMT (Object Modeling
Technique) et la méthodeOOSE (Object Oriented Software Engineering). À l’initiative
de la société Rational Software,les auteurs principaux de ces trois méthodes se sont
mis d’accord sur un langage demodélisation unifié. Celui est devenu une référence
lorsqu’il a été retenu par un groupementpublic, l’Object Management Group (OMG)
en 1997[18] .
UML était initialement un ensemble de diagrammes permettant de représenter
un systèmeinformatique pour les développeurs travaillant avec une approche
orientée objet. Après sonévolution en 2004 vers la version UML2, ce langage de
modélisation a été utilisé pour décrireun système d’information, notamment au
niveau du cahier des charges.

1.4 Les diagrammes UML :

Un diagramme est une photographie simplifiée et structurée des concepts, des
idées, desconstructions, des relations, des données statistiques, de l'anatomie, …
etc. réalisé dans tous lescôtés des activités humaines pour afficher et éclaircir la
matière. Un diagramme permet aussi de faire une description des phénomènes, de
mettre en évidence des corrélations entre certains facteurs ou de représenter des
parties d’un ensemble.UML comporte 09 types de diagrammes représentant des
concepts particuliers du système d'information. Ils se répartissent en deux groupes :

20
Chapitre 3 : Langage de modélisation UML

Structurels (statique) Comportementaux (dynamique)

-Diagramme de classe -Diagramme de collaboration
-Diagramme d’objet -Diagramme de séquence
-Diagramme de composants -Diagramme d’état/transition
-Diagramme de déploiement -Diagramme d’activités
-Diagramme de cas d’utilisation

Tableau 1 : tableau des diagrammes UML

1.5 Les diagrammes comportementaux :

Ce sont les diagrammes qui focalisent sur le comportement dynamique du
système. Ils présentent ce qui se passe dans le système. Il existe cinq types de
diagrammescomportementaux[19] :

Diagramme de cas d’utilisation :

Les diagrammes de cas d’utilisation représentent un ensemble de cas
d’utilisation, d’acteurs et de leurs relations. Ils représentent la vue statique des cas
d’utilisation d’un système et sont particulièrement importants dans l’organisation et la
modélisation des comportements d’un système.

Les cas d’utilisation :

ils se décrivent sous la forme d’actions et de réactions, le comportement, ou
tout simplement ce qui faitle point de vue d’utilisateur, encore appelé acteur. On
recense de la sorte, l’ensemble des fonctionnalités d’un système en examinant les
besoins fonctionnels de chaque acteur.

Les acteurs :
un acteur représente un ensemble cohérent de rôles joués par les utilisateurs
des cas d’utilisation eninteraction avec ces cas d’utilisation. En règle générale, un
acteur représente un rôle qu’un homme, une machine ou même un autre système
joue avec le système. Il existe 4 grandes catégories d’acteurs :
Les acteurs principaux : ce sont les personnes qui utilisent les fonctions principales
dusystème.
Les acteurs secondaires : ce sont les personnes qui effectuent des tâches
administratives ou de maintenance.
Le matériel externe :il représente les dispositifs matériels incontournables qui
fontpartie du domaine de l’application et qui doivent être utilisés.

21
Chapitre 3 : Langage de modélisation UML

Les autres systèmes : ce sont les systèmes avec lesquels le système doit interagir.

Les relations entre les cas d’utilisation :

UML définit 2 types de relations standardiséesentre cas d’utilisation :

La relation d’inclusion :
formalisée par dépendance « include ». Lors de description descas d’utilisation,
il apparaît qu’il existe des sous-ensembles communs à plusieurs casd’utilisation, il
convient donc de factoriser ces fonctionnalités en créant de nouveauxcas d’utilisation
qui seront utilisés par les cas d’utilisation qui les avaient en commun.

Figure 10:La relation d’inclusion

La relation d’extension :
formalisée par la dépendance « extend ». La relation stéréotypée « extend »
permet d’étendre les interactions et donc les fonctions décrites par les interactions.
Le cas de base peut fonctionner tout seul, mais il peut également être complété par
un autre, sous certaines conditions, et uniquement à certains points particuliers de
son flot d’évènements (point d’insertion). On utilise principalement cette relation pour
séparer le comportement optionnel (les variantes) du comportementobligatoire.

Figure 11: La relation d’extension

Diagrammes de collaboration :
Le diagramme de collaboration permet de mettre en évidence les interactions
entre les différents objets du système. Dans le cadre de l’analyse, il sera utilisé pour :

22
Chapitre 3 : Langage de modélisation UML

- Préciser le contexte dans lequel chaque objet évolue.

- Mettre en évidence les dépendances entre les différents objets impliqués dans
l’exécution d’un processus ou d’un cas d’utilisation.
Un diagramme de collaboration fait apparaître les interactions entre des objets et les
messagesqu’ils échangent .

Diagrammes de séquence :
Un diagramme de séquence met en évidence le classement des messages par
ordre chronologique. L’axe vertical représente le temps et l’axe horizontal représente
les objets qui collaborent. Ce diagramme donne au lecteur une indication visuelle
claire du flot de contrôle dans le temps. En générale, les diagrammes de séquence
contiennent :
L’objet:est une manifestation concrète d’une abstraction à laquelle on peut appliquer
un ensemble d’opérations et qui possède un état capable de mémoriser les effets de
ces
opérations. On représente un objet en soulignant son nom.
Le lien : est une liaison sémantique entre objets. En générale, il s’agit d’une instance
d’une association. Chaque fois qu’une classe est reliée à une autre par une
association, il peut y avoir un lien entre les instances des deux classes, et chaque
fois qu’un lien existe entre deux objets, le premier objet peut envoyer un message au
deuxième.
Le message : est la spécification d’une communication entre objets, qui transporte
des informations et qui s’affiche dans le but de déclencher une activité. La réception
d’une instance de message peut être considérée comme une instance d’un
évènement.

Diagrammes d’états-transitions :
Ce type de diagramme a comme objectif de représenter des traitements en les
positionnant par rapport à une classe et plus précisément à des états d’une classe.
Ce diagramme fait ainsi apparaître l’ordonnancement des différents travaux. Ce
diagramme utilise deux types de concepts :
- Etat : c’est une situation durable dans laquelle peuvent se trouver les objets d’une
classe.
- Transition : c’est une relation entre deux états signifiant qu’un passage de l’un à
l’autre est possible. Un processus peut ainsi être représenté comme une classe, dont
les états correspondent aux activités du processus.
23
Chapitre 3 : Langage de modélisation UML

Diagrammes d’activités :
Un diagramme d’activités visualise un graphe d’activités qui modélise le
comportement interne d’une méthode (la réalisation d’une opération), d’un cas
d’utilisation ou plus généralement d’un processus impliquant l’utilisation d’un ou de
plusieurs classificateurs .

Les diagrammes structurels :

Ces diagrammes, au nombre de quatre, ont vocation à représenter l’aspect
statique d’un système (classes, objets, composants…).
Diagrammes de classes :
Le diagramme de classes exprime la structure statique du système en termes
de classes et de relations entre ces classes. L’intérêt du diagramme de classe est de
modéliser les entités du système d’information. Il permet de représenter l’ensemble
des informations finalisées qui sont gérées par le domaine [21].
Le diagramme de classes comporte généralement les éléments suivants :
Classe :
c’est une description abstraite (condensée) d’un ensemble d’objets du domainede
l’application : elle définit leur structure, leur comportement et leurs relations.

Figure12 : diagramme de classe

24
Chapitre 3 : Langage de modélisation UML

Attribut :
c’est une propriété nommée d’une classe qui décrit un ensemble de valeurs que
les instances de cette propriété peuvent prendre. Une classe peut ne pas avoir,
comme elle peut avoir un ou plusieurs attributs.
Opération :
c’est une abstraction de ce que peut réaliser un objet et qui est réalisable par
tous les objets de la classe. Une classe peut ne pas avoir comme elle peut avoir
plusieurs opérations.

Les relations entre classes :

c’est une connexion sémantique entre des éléments. Lesquatres relations les
plus importantes sont :
Association :
Une association est une relation structurelle qui précise que les objets d’un élément
sont reliés aux objets d’un autre élément, en reliant deux classes et vice-versa.
Agrégation :
c’est une association particulière spécifiant une relation ‘tout – partie’ entre l’agrégat
et un composant.
Composition :
c’est une agrégation forte qui lie les cycles de vie entre le composé(ensemble) et les
composants (éléments).

Figure13 : relation entre composition et agrégation

25
Chapitre 3 : Langage de modélisation UML

Dépendance :
Quand une classe utilise une autre classe, parexemple comme membre ou
comme paramètred'une de ces fonctions, elle "dépend" ainsi de cette classe.
Généralisation :
Une généralisation est une relation entre un élément général (appelé mère) et
un élémentdérivé de celui-ci, mais plus spécifique (désigné par une file).
Réalisation :
Il est parfois souhaitable de modifier une relation dans laquelle une classe
représente unélément plus grand qui consiste en un ensemble d’éléments plus petit.

Diagrammes d’objets :
Les diagrammes d’objets permettent de mettre en évidence des liens entre les
objets. Les objets, instances de classes, sont reliés par des liens, instances
d’associations. Les diagrammes d’objets utilisent les mêmes concepts que le
diagramme de classes. Ils sont essentiellement utilisés pour comprendre ou illustrer
des parties complexes d’un diagramme de classes .

Diagrammes de composants :
Le diagramme de composants décrit les composants du système (fichiers,
bibliothèques, bases de données...) et leurs dépendances dans l’environnement de
réalisation d'un point de vuephysique, tels qu'ils sont mis en œuvre.

Diagrammes de déploiement :
Un diagramme de déploiement décrit la disposition physique des ressources
matérielles qui composent le système et montre la répartition des composants sur
ces matériels.

1.6 Conclusion :
Notre choix s’est tourné vers le langage de modélisation UML, car il propose
une approche orienté objet qui s’accorde parfaitement avec l’application présentée
dans ce travail «Stocky CMA ». Grace à son outil graphique qui donne une
dimension méthodologique à l’approche objet, UML définit un langage commun
standardisé pour que notre projet soit mené à bien de façon la plus cohérente.

26
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Chapitre 4 :
Système de Gestion de Stock
« CMA Stock »
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

1) Introduction :
‘ CMA Stock ‘ - Inventaire ultime avec POS (point of sales).

1) Quel est le point de vente en POS ?

Point of sales (POS) ou un point de vente (PDV) est un endroit où un client

exécute le paiement de biens ou de services et où les taxes de vente peuvent
devenir payables. Une transaction au point de vente peut avoir lieu en personne ou
en ligne, avec des reçus générés en version imprimée ou électronique. Les systèmes
de point de vente basés sur le cloud sont de plus en plus populaires parmi les
commerçants.

2) Définition de l’application Web ‘ CMA Stock ‘ :

CMA Stock : Il s’agit d’un système de gestion des stocks avec POS qui vous
permet de gérer les stocks, les ventes, les achats, les clients, les factures, la
réception des paiements, et plus encore. Il vous permettra également de faire des
achats et des ventes de n’importe où, n’importe quand. Que vous dirigiez une petite
entreprise ou une grande entreprise C’est la solution dont vous avez besoin pour
gérer les stocks, les achats et les ventes - le tout dans une seule application.

3) Caractéristiques :
Cette application web a des plusieurs qualités comme :
 Facile POS (point de vente) et tableau de bord dynamique.
 Articles, rajustement, transfert.
 Cotations, ventes, achats.
 Retours Client & Fournisseur.
 Utilisateurs, clients, fournisseurs.
 Devise, unités, catégorie, sauvegarde.
 Ventes de paiements, achats.
 Rapport sur les paiements.
 Vue d’ensemble et graphiques de stock d’entrepôt.
 Rapport sur les achats et les ventes.

28
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

 Rapports clients & fournisseurs.

 Alertes de quantité de produit.
 Système de notification par courrier.
 Système de notification SMS.
 Utilise un code structuré et personnalisable.
 Intégré avec Vuex, Vue Router.
 Version sombre incluse.
 Multilingue 15 langues et plus.
 RTL Support.
 Pure Vue Js.
 Code propre et organisé.
 Code bien documenté.
 Structure du dossier standard.
 Easy POS et tableau de bord dynamique.
 Soutien de six mois.
 Et beaucoup plus à l’intérieur de l’application.

4) Modélisation du système :
La modélisation de notre application a été faite en se basant sur la langage
UML. Comme nous l’avons est connu par sa nature itérative et incrémentale. Dans
notre cas, pour faciliter le processus de développement, nous avons effectué deux
itérations. Chaque itération sera décrite par un diagramme d’utilisation réparti en
plusieurs petits diagrammes, un ensemble des diagrammes de séquence et un
diagramme de classe. Notant que les autres types de diagrammes n’ont pas été
utilisés dans ces deux premières itérations.

5) Itération :
Cette première itération regroupe les fonctionnalisées de base de l’application, à
savoir :
Celles de la gestion des produits finis, des clients et des factures de vente.

29
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

6) Diagramme de cas d’utilisation :

30
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Figure15 : diagramme de cas d’utilisation gestion de produits

Identification des acteurs Dans les diagrammes de cas d’utilisation qui suit, on
définit clairement les deux principaux acteurs qui interagissent avec le système.
Le magasinier : c’est l’utilisateur principal du système. Cette unité extérieure
interagieavec le système via une interface graphique. Son travail est de faire
introduire dansL’application toutes les informations sur toutes les opérations
effectuées dans lemagasin, notamment celles liées à la gestion des stocks, la
gestion des ventes et desachats, la gestion des clients et des fournisseurs.
Le directeur général : il est considéré comme un super administrateur du
magasin. Ilcontrôle toutes les opérations qui se passent dans le magasin et vérifie
leur conformitéavec les données introduites dans l’application de gestion.
- Diagramme de cas d’utilisation « Gestion des produits »
Ce diagramme de cas d’utilisation illustre les cas d’utilisation liés à la gestion
desproduits finis, ainsi que les interactions entre eux. Le magasinier a la possibilité
d’afficher laliste des produits avec toutes ses informations (Référence, libellé,
description, quantité…),d’ajouter unnouveau type de produit, modifier ou supprimer
un autre. On définit les deuxtypes de relations de dépendance, la première se
nomme « extend » et exprime la notiond’héritage entre le cas d’utilisation « gérer des
produits» et les autres cas d’utilisation. Ladeuxième relation est appelé « include » et
elle exprime la relation d’inclusion ou dedépendance entre le cas d’utilisation « gérer
des produits » et le cas d’utilisation« Login ou authentification ». Cette dernière
relation indique qu’aucune opération ne peut pas êtreeffectuée qu’après une
authentification de l’utilisateur de l’application.

7) Diagramme de cas d’utilisation « Gestion des clients » :

Ce deuxième diagramme de cas d’utilisation montre les opérations liées à la
gestion des clients, à savoir : la consultation de la liste des clients, la modification de
ses informations (Adresse, téléphone, …), l’ajout d’un nouveau client ou la
suppression d’un ancien client.

31
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Figure16 :Diagramme de cas d’utilisation « Gestion des clients »

8) Diagramme de cas d’utilisation « Gestion des ventes » :

Les cas d’utilisation liés aux opérations de vente sont représentés dans la figure
suivante. Le magasinier a la possibilité de créer des factures de vente, de consulter
les quantités des produits finis disponibles dans le stock et de les mettre à jour.
Toutes ces opérations doivent être effectuées sous la supervision du directeur
général.

32
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Figure17 : Diagramme de cas d’utilisation « Gestion des ventes »

9) Diagrammes de séquence :
Le diagramme de séquence est une représentation intuitive qu’on a utilisée
pour schématiser les interactions entre les différentes entités du système. Le
système «Stocky CMA» possède six diagrammes de séquence, chacun correspond
à un ou plusieurs cas d’utilisations cités auparavant. Magasinier/Directeur général «
Authentification ». La figure suivante représente le diagramme de séquence qui
illustre le scénario d’authentification. Quand l’un des acteurs veut utiliser le système,
il doit d’abord introduire son identifiant et son mot de passe. Si ces deux entrées sont
correctes, le système affichera le menu principal de l’application, sinon il affichera le
message suivant : « Identifiant ou mot de passe incorrect ».

33
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Figure18 : Diagrammes de séquence

Magasinier « Ajouter un produit » :

Figure19 : Diagramme de séquence Magasinier « Ajouter un produit »

34
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Ce scénario se réalise quand l’entreprise décide de fabriquerun nouveau type

de produit. Dans ce cas, le magasinier commence par introduire les informations
relatives à ce produit(Référence, libellé, description…). Si ce produit existe déjà dans
la base de données (ajouté par un autre magasinier par exemple), le système affiche
le message « Ce produit existe déjà », sinon il indique que ce produit a été ajouté
avec succès dans la base de données – Magasinier « Modifier ou supprimer un
produit » Ce diagramme de séquence décrit deux cas d’utilisation à la fois : le cas de
la modification d’un produit et le cas de suppression d’un produit. Ces deux
scénarios s’effectuent à l’aide de l’interface dédiée à la gestion des produits finis.
Pour la modification, le magasinier cherche et sélectionne le produit qui fait l’objet de
cette opération où il peut modifier ces informations (sa description ou sa quantité
dans le stock par exemple). Dans le cas où l’entreprise décide de ne plus fabriquer et
vendre un produit donné, le magasinier le supprime de la base de données.

Magasinier « Ajouter un client » :

Ce diagramme représente l’opération effectuée par le magasinier sur le
système quand un nouveau client vient à l’entreprise. Le magasinier introduit les
informations personnelles de ce dernier (Matricule fiscal, nom, prénom, adresse,
téléphone …). Automatiquement, le système vérifie si ce client a été déjà inscrit ou
non à travers du matricule fiscale (plusieurs clients ne peuvent pas avoir le même
matricule fiscal). Si oui, le système affiche le message suivant « Ce client a été
ajouté avec succès », sinon il affiche « Ce client existe déjà ».

Figure20 : Diagramme de séquence Magasinier « Ajouter un client »

Magasinier « Modifier ou supprimer un client » :

Dans le cas où un client change une de ses informations personnelles (changement
de son adresse ou son numéro de téléphone par exemple), le magasinier va les
modifier sur le système. Dans le cas où un client ne fait plus d’achats pendant une
longue durée, l’utilisateur doit le supprimer du système.

35
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Figure21 :Diagramme de séquence « Modifier ou supprimer un client »

Magasinier « Créer une facture de vente » :

A la réception d’un bon de commande de la part d’un client, le magasinier doit
créer une facture de vente pour ce client. Il commence par sélectionner ce dernier
dans la liste des clients. Si ce client n’existe pas, le magasinier doit lui rajouter dans
le système. Ensuite, il sélectionne les produits inscrits sur le bon de commande avec
leurs quantités. Après cette opération, le système affiche le montant total de cette
facture avec tous ces détails. Le magasinier valide la facture et le système met à jour
la quantité des produits dans le stock.

36
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Figure22 : Diagramme de séquence Magasinier « Créer une facture de vente »

Diagramme de classe de l’application ‘CMA Stock’ :

Avec l’enrichissement de l’application, le diagramme de classe définit
auparavant s’élargis en incluant des nouveaux concepts et de nouvelles relations. Ce
nouveau diagramme de classe rassemble sept classes et leurs relations. Les classes
rajoutées sont : fournisseur, matières premières et facture d’achat.

37
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Figure23 :Diagramme de classe d’application « CMA Stock »

L’interface de l’application :
C’est l’intermédiaire entre le système et ses utilisateurs. Cette interface graphique a
été développée et éditée par le logiciel LARAVEL.

LARAVEL :
Laravel est un Framework web open-source écrit en PHP respectant le principe
modèle-vue-contrôleur et entièrement développé en programmation orientée
objetavec ses sources hébergées sur GitHub[20].

38
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Langage de programmation : PHP

Date de sortie initiale : juin 2011
Créateur : Taylor Otwell
Dernière version : 10.0 (14 février 2023)
Développé par : Équipe de développement Laravel
Licence : MIT
Première version : 15 juin 2011

Figure24 : l’interface de LARAVEL

La base de données :
La base de données de notre application permet de stocker toutes les données
liées à la gestion de stock, à savoir les données sur les produits finis, les matières
premières, les clients, les fournisseurs, les opérations d’achat et de vente. Le
langage de gestion de base de données utilisé dans cette application est le langage
MYSQL.

39
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

MYSQL :
MySQL est un système de gestion de bases de données relationnelles SQL
open source développé et supporté par Oracle. C’est la réponse courte, en une
phrase, à la question « qu’est-ce que MySQL », mais décomposons cela en termes
un peu plus humains. Une base de données n’est qu’une collection structurée de
données qui est organisée pour en faciliter l’utilisation et la récupération. Pour un site
WordPress, ces «données » sont des choses comme le texte de vos articles de blog,
des informations pour tous les utilisateurs enregistrés sur votre site, des données
chargées automatiquement, des configurations de paramètres importants, etc.
MySQL n’est qu’un système populaire qui peut stocker et gérer ces données
pour vous, et c’est une solution de base de données particulièrement populaire pour
les sites WordPress.

La base de données de l’application ‘ CMA Stock ‘ :

40
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Figure25 : Base de données d’application « CMA Stock »

Le programme :
Le programme de notre application est constitué d’un ensemble d'instructions
destinées à être exécutées quand l’utilisateur effectue des manipulations sur
l’interface. Il est réparti en plusieurs fragments, ou chacun d’entre eux est appelé
pour exécuter une opération faite par l’utilisateur que ce soit une opération de
chargement ou de mise à jour des données.

Description de l’application :
Dans cette partie, nous présentons les principaux écrans de l’application ‘ CMA
Stock‘.

Fenêtre d'authentification :
Au démarrage de l’application «CMA Stock», une fenêtre d’authentification
s’ouvre. Les utilisateurs doivent introduire un identifiant et un mot de passe pour
pouvoir accéder l’application.

41
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Figure26 : page d’authentification

Si l’identifiant introduit, ou le mot de passe, est valide, le système affiche le menu

principal,sinon il renvoie le message d'erreur suivant :

Figure27 : page d’authentification incorrecte

42
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

La fenêtre principale :
L’écran principal contient les différents menus permettant d’accéder aux différents
écrans de l’application. Elle comprend sept menus principaux, et chaque menu
contient un ensemble des sous-menus.

Figure28 : fenêtre principale

Fenêtre : Liste des produits :

43
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Figure29 :liste des produis

Cette fenêtre affiche toutes les informations sur l’ensemble des produits finis qui
existent dans le stock. Cette fenêtre offre la possibilité à l’utilisateur :
- d’accéder à la fenêtre qui permet l’ajout d’un nouveau produit en cliquant sur le
bouton « ajouter un produit ».
- de modifier les informations d’un produit existant en cliquant sur le bouton «
modifier ».
- ou de supprimer un produit en cliquant sur le bouton « supprimer ».

Ajouter un type de produit :

Figure30 : ajouter un type de produit

Cette fenêtre permet d’ajouter un nouveau type de produit. Cette opération

commence par saisir la référence du produit, son libellé, sa description, son prix de
vente, sa quantité en stock, la quantité d’alerte, ainsi son image.

44
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Liste des clients :

Figure31 : liste des clients

Cette fenêtre permet de visualiser la liste des clients qui fonts des achats
régulières et toutesleurs informations personnelles. Comme pour les produits finis et
les matières premières, cette fenêtre donne la main au magasinier d’ajouter un
nouveau client, modifier les informationsd’un client existant, ou de supprimer un
autre.

Liste des utilisateurs :

Figure32 : Liste des utilisateurs

Cette fenêtre permet de visualiser la liste des utilisateurs qui gèrent l’application.

45
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Saisir une facture de Vente :

Figure33 : Facture de vente

46
Chapitre 4 : Système de Gestion de Stock « CMA Stock »

Cette fenêtre permet au magasinier de saisir des factures de vente. Pour cela, il
doit :
- indiquer sa date de création.
- sélectionner le client concerné par cette opération de vente.
- sélectionner l’ensemble des articles vendus avec ses quantités.
En accédant à cette fenêtre, le magasinier et le directeur général ont la
possibilité de consulter à tout moment la liste des factures de vente effectuées. Ces
factures peuvent être en format « PDF » en cliquant sur le bouton « imprimer ». Une
autre fonctionnalité est offerte dans cette fenêtre permettant de générer un bon de
livraison automatiquement.

Les codes source de l’application :

Voici tous les codes source de l’application ‘ CMA Stock’ :

Figure34 : les codes source de l’application

47
CONCLUSION
CONCLUSION

Conclusion :
Dans ce travail, nous nous somme intéressé à la création d’un système de
gestion du stock pour l’entreprise CMA. L’application réalisée «CMA Stock » permet
aux magasiniers de garder une trace sur tous les mouvements effectués (sortie des
produits, entrée de la matière première) dans les stocks de l’entreprise. Ses
mouvements. L’application permet aussi la gestion des clients, des fournisseurs,
ainsi la gestion des factures des achats et des ventes. Cette solution a été proposée
aux responsables de l’entreprise CMA afin derésoudre les problèmes liés à la gestion
de son stock. Durant un stage de 180 jours dans cette entreprise, nous avons pu
identifier les grands problèmes que les magasiniers subissent pour gérer les
différents stocks. La conception du système CMA Stock a été faite en utilisant le
langage UML et en se basant sur le logiciel open source laravel. L’implémentation de
l’application a été réalisée sousl’environnement laravel. Les objectives visées de ce
projet de fin d’études ont été réalisées dans la limite du temps qui nous a été
accordé. Nous avons souhaité d’avoir plus de temps pour rajouter d’autres
fonctionnalités. Suite au travail réalisé, nous avons tracé le chemin de l’évolution de
notre application dans le futur. Vu le processus de développement suivi, chaque
itération correspond à une version améliorée de l’application, nous avons tracé un
objectif qui définit ce qui sera ajouté dans les versions prochaines. Au futur, nous
allons ajouter des nouvelles fonctionnalités pour :
- La gestion de stock des pièces de rechange utilisées dans les opérations des
machines de production.
- La gestion de deux types de commandes internes, la première pour la matière
première afin de servir les différents ateliers de production, la deuxième pour les
pièces de rechange pour effectuer des opérations de maintenance des machines.
D’autres fonctionnalités peuvent être ajoutées à notre système pour la gestion des
ressources humaines de l’entreprise Au final, les recherches et les études réalisées
toute au long de ce projet de fin d’études, nous ont permis de consolider nos
connaissances dans le domaine de gestion de stock, mais aussi l’acquisition de
nouvelles connaissances d’enrichir nos connaissances dans d’autres domaines
variés comme : la modélisation UML, la programmation sous Laravel, la gestion des
bases de données.

48
Références bibliographiques :

Références bibliographiques :
[1]LIGHTstock « Une gestion de stock simple et puissante »,
http://www.logitheque.com/logiciels/windows/comptabilite_gestion/gestion_de_stock/t
Consulté le 06/09/2023
[2]Stock It Easy : Un bon logiciel de gestion de stock
https://www.lacompta.org/logiciels/logiciels-gestion-stock/khoyohtstock.php
consulté le 06/09/2023.
[3]Stock Express https://stock.klick.app/ consulté le 06/09/2023.
[4]StockJMB https://www.toucharger.com/fiches/windows/stockjmb/2460.htm
Consulté le 06/09/2023.
[5]CybGestion pour Windows
https://www.logitheque.com/windows/cybgestion-23139
consulté le 06/09/2023.
[6]le web technologie
https://asiasociety.org/education/five-ways-use-technology-and-digital-media-global-
learning
consulté le 06/09/2023.
[7].les défis de la technologie web https://builtin.com/artificial-intelligence/artificial-
intelligence-future
consulté le 06/09/2023
[8]l’avenir de la technologie web https://builtin.com/artificial-intelligence/artificial-
intelligence-future
Consulté le 06/09/2023.
[9]présentation de HTML ,PHP,CSS,JAVASCRIPT
https://www.w3schools.com/whatis/
consulté le 06/09/2023.

[10]Qu’est-ce que le World Wide Web ?

https://webfoundation.org/about/vision/history-of-the-web/ consulté le 06/09/2023.
[11]Comment fonctionne le World Wide Web ?
Références bibliographiques :

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/
Document_and_website_structure
consulté le 06/09/2023.
[12]l’avenir de world wide web https://www.clariontech.com/blog/ai-and-iot-blended-what-
it-is-and-why-it-matters consulté le 06/09/2023.
[13] pourquoi avoir un site web ?
https://www.francenum.gouv.fr/guides-et-conseils/developpement-commercial/site-web/
creer-un-site-internet-pour-developper consulté le 06/09/2023.
[14] comment créer un site web ? https://www.hostinger.fr/tutoriels/comment-creer-un-site-
internet consulté le 06/09/2023.
[15] comment créer une application web ? https://www.lafabriquedunet.fr/blog/creer-
application-web-guide/ consulté le 06/09/2023.
[16]Roques, P. UML 2: Modéliser une application web. Editions Eyrolles. (2008).
[17]Roques, P., & Vallée, F. UML en action: de l'analyse des besoins à la conception enava.
Eyrolles. (2000).
[18]Morley,C,Figueiredo, M. B., & Gillette, Y. Processus métiers et systèmesd’information :
gouvernance, management, modélisation. Dunod. (2011).
[19]UML2.0-Laurent AUDIBERT-Institut Universitaire de Technologie de Villetaneuse –
Département Informatique.
[20] Laravel Framework https://fr.wikipedia.org/wiki/Laravelconsulté le 06/09/2023 .
Résumé :

Résumé :
La gestion de stock est une activité incontournable qui reste au cœur des
préoccupations de tout gestionnaire voulant piloter son entreprise vers la
performance. Vu le volume important des informations liées à la gestion de stock
dans une entreprise de production, l’utilisation d’un système de gestion de stock est
indispensable. Ceci est grâce à leur souplesse d’utilisation et les fonctions riches de
suivi et de gestion qu’ils offrent. L’objectif de ce projet est de développer un système
de gestion de stock pour l'entreprise CMA spécialisé dans la fabrication des produits
d’agriculture. La modélisation de notre système a été faite par le langage UML en
suivant des étapes du logiciel Laravel. L’implémentation de l’application a été
réalisée en utilisant le logiciel Laravel.
Mots-clés : gestion de stock, UML, Laravel.

Abstract :
Inventory management is an essential activity, which remains a concern of any
manager who wants to drive his company towards performance. Given the large
volume of information related to stock management in a production company, the use
of an inventory management system is essential. This is due to their flexibility of use
and the functions of monitoring and management they offer. The objective of this
project is to develop an inventory management system for the company CMA
specialized in production of the agriculture machines.The modeling of our system has
been done by the UML language by following steps of the software Laravel. The
implementation of the application was carried out using the software Laravel.
Keywords: inventory management, UML, Laravel.

:‫الملخص‬
‫ادارة المخزون هي النشاط االساسي الذي يشغل جل اهتمامت المسؤولين الراغبين في تحقيق االفضل لمؤسساتهم و نضرا‬
‫للحجم الهام للمعلومات ذات الصلة بادارة المخزون في المؤسسات االنتاجية فان استخدام نظام لتسيير المخزون امرا‬
‫ الهدف االساسي من هذا‬.‫ضروريا و هذا بفضل مرونة استعماله و توفره على وظائف المتابعة و االدارة التي يقدمها‬
‫ المشروع هو تطوير نظام يمكن من‬.CMA‫ادارة و تسيير المخزون لشركة المتخصصة في صناعة العتاد الفالحي‬
. UML‫باالستناد على لغة النمذجة الموحدة‬
.Laravel‫والمطور‬