Vous êtes sur la page 1sur 66

MINISTÈRE DE L'ENSEIGNEMENT SUPÉRIEUR, DE LA ‫وزارة التعليم العالي والبحث العلمي واالبتكار‬

RECHERCHE SCIENTIFIQUE ET DE L'INNOVATION *********


********* ‫امانة العامة‬
SECRÉTARIAT GÉNÉRAL
*********
**********
INSTITUT NATIONAL SUPÉRIEUR DES SCIENCES ET ‫المعهد الوطني العالي للعلوم والتقنيات باشه‬
TECHNIQUES D'ABÉCHÉ *********
********* ‫قسم هندسة الحاسوب‬
DÉPARTEMENT DE GÉNIE INFORMATIQUE **********
*********

RAPPORT DE FIN D’ETUDES EN VUE DE L’OBTENTION DE LA LICENCE


PROFESSIONNELLE
OPTION : GÉNIE LOGICIEL

Conception et réalisation d’une application web de


gestion des établissements commerciaux :
Cas de l’établissement al-nadjma

Réalisés par : Encadré par :

ALI Moussa Kadjalla (10493) Dr MAHAMAT Habib Senoussi


Alimoussa06@gmail.com

MOUSTAPHA Ismail Sakine (10510)


moustaphaismailsakine@gmail.com

Présenté le 18/ 07 /2022 à 10h30mn


Le jury est composé de :
Président du jury : Mr. MAHAMAT Seid Souleymane
1er Rapporteur : Mr. ABDELRAHMANE Adoum Oumar
2eme Rapporteur : Mr MOUKHTAR Hassan
3eme Rapporteur : Dr KADRI Harouna
Année académique 2020/2021
Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

RÉSUME
Le but principal de ce projet de fin d’études est de concevoir et réaliser

une application web dédiée à la gestion des établissements commerciaux (cas

de l’’établissement Al-nadjma). En d’autres termes, mettre sur pied une

application web capable de gérer les informations de façon fiable et rapide.

Cette application web permettra de faciliter le travail du gérant en

automatisant la gestion du stock, ventes, commandes, les produits vendus et

elle offrira aussi la possibilité au gérant de lister les ventes, les produits en

voie de rupture, en plus elle sera bilingue (français et arabe).

Comme tout projet de génie logiciel, on a fait l’’étude de l’’existant,

l’’analyse et spécification de besoins, la conception, la réalisation et les tests

(modèle en V). Pour réaliser ces différentes étapes, on a utilisé le processus de

développement “Processus Unifier“ (UP) et le langage de modélisation Unified

Modeling Language (UML) afin de schématiser la solution.

Ce travail a été réalisé en utilisant le framwork LARAVEL qui est basé sur le

langage Personal Home Page (PHP), MYSQL comme Système de Gestion de

Base de Données (SGBD).

Mots clés : Application Web, LARAVEL, PHP, MYSQL, SGBD, UP, UML

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine I


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

ABSTRACT

The main aim of this graduation project is to design and create a


web application dedicated to the management of commercial
establishments (case of the Al-nadjma establishment). In other words,
the aim of this work is developing a web application which is capable to
manage reliable and quickly information’s. This web application will
facilitate manager purpose by automating stocks, sales, orders,
products sold management. It Will also offers the possibility to the
manager to sales ‘list, out-of-stock products. In addition, it should be
bilingual (French and Arabic).

Like any software engineering project, we studied the existing


situation, analyzed and specified needs, designed, implemented and
tested (V-model). To carry out these different steps, we used the “Process
Unifier” (UP) development process and the Unified Modeling Language
(UML) to outline the solution.

This work was carried out using the LARAVEL framework which is
based on the Personal Home Page (PHP) language, MYSQL as the
Database Management System (SGBD).

Keywords: Web application, LARAVEL, PHP, MYSQL, DBMS, UP,


UML

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine II


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

DÉDICACE
Nous dédions ce modeste travail :

À nos pères ISMAIL Sakine et MOUSSA Kadjalla, pour leurs

sacrifices et efforts fournis jour et nuit pour notre éducation et bien-être.

Aucune dédicace ne pourrait exprimer l’’amour, l’estime, le dévouement

et le respect que nous avons toujours eu pour eux.

À nos mères DAMILA Abakar Meri et ZAHRA Moussa, pour nous

avoir donné la vie et la joie de vivre. Leurs prières et bénédictions nous

ont été un grand secours pour mener à bien nos études. Aucune dédicace

ne saurait être assez éloquente pour exprimer ce qu’elles méritent pour

tous les sacrifices qu’elles ont fait pour nous depuis notre naissance,

durant notre enfance, et même à l’âge adulte.

À nos frères et sœurs telles que : AICHA ISMAIL SAKINE,

HASSAN ISMAIL SAKINE , MAHAMAT MOUSSA KADJALLA et

ADAM MOUSSA ALI, pour leur grand amour et soutien qu’ils trouvent

ici l’expression de notre haute gratitude.

À nos intimes amis tel que : HASSANE Abdallah Nigue, ISMAIL Ibet
Chaib, SENOUSSI Moussa Mollo, ABDEL-SALAM Adam Abdel-Manane,

ABDELRAHAMAN Hassan Yakoub, ABAKAR Allafouza Witi Witi, ISSA

Ibrahim, MAHAMT Nour Chaibo, ADAM Mahamat Annour Wadak, ALI

Ahmat Moussa, ALBECHIR Alhissein Bichara, MAHAMAT Adam Moursal et

SALEH Idriss Abakar

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine III


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

REMERCIEMENTS
Louange à Allah,
Nous tenons à exprimer notre profonde gratitude et nos sincères
remerciements :
Allah le tout-puissant pour nous avoir donné le souffle de vie, le courage, la
volonté, la patience et la santé durant toutes ces années d’études, et ce,
jusqu’à la réalisation de ce travail.
À notre encadreur Docteur MAHAMAT Habib Senoussi qui s'est toujours
montré à l'écoute et très disponible tout au long de la réalisation de ce
mémoire, ainsi pour l'inspiration, l'aide, ses remarques, critiques, suggestions
et le temps qu’il a bien voulu nous consacrer.
À nos tuteurs de stage de l’établissement Al-Nadjma M. ALKHALI Mahamat
Alkhali et M. AHMAT Mahamat Alkhali pour tout le temps qu’ils ont
consacré, leurs directives précieuses, et pour la qualité de leur suivi durant
toute la période de notre stage.
Vont également à l’endroit du Mr. MAHAMAT ADOUD IBRAHIM,
pour avoir corrigé notre travail malgré son calendrier chargé.
À nos enseignants de département de génie informatique, tout(e)s les
enseignants de l'INSTA et les membres du jury d’’avoir accepté d’examiner et
juger notre travail.
À nos familles pour nous avoir soutenus, accompagnés et nous avoir permis
d’en arriver là.
Enfin, À tous nos ami(e)s pour leurs aides et encouragements. Et tous ceux
qui ont contribué à la réalisation de ce projet.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine IV


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

AVANT-PROPOS

L’Institut National Supérieur des Sciences et Techniques d’Abéché (INSTA) ex-Institut


Universitaire des Sciences et Techniques d’Abéché (IUSTA) créé par Ordonnance numéro 007/PR/97 le
03 avril 1997 est un établissement public d'enseignement supérieur et de formation professionnelle à
caractère scientifique, doté de la personnalité juridique et de l'autonomie financière. Il est placé sous la
tutelle du ministère en charge de l’enseignement supérieur, son siège est à Abéché [1]. Du point de vue
géographique, il est situé au Nord-Est du pays, plus précisément à Abéché, chef-lieu de la province du
Ouaddaï, sur l’axe GOZ BEIDA à trois (3) kilomètres du centre-ville.
L’INSTA forme des Techniciens et Ingénieurs dans les domaines de l’industrie, de l’élevage et de
la santé. Récemment, les cycles de Master ont été mis en place (Masters Professionnels et Recherche en
Génie Mécanique, Génie Électrique et Élevage).
De nos jours, INSTA comprend sept départements :
1. Département de Génie électrique (GE) ;
2. Département de Génie énergétique (GEn) ;
3. Département de Génie mécanique (GM) ;
4. Département de Génie informatique (GI) ;
5. Département de Télécommunications et Multimédia (DTM) ;
6. Département de Sciences et Techniques de l'Élevage (STE) ;
7. Département des Sciences Biomédicales et Pharmaceutiques (SBMP) section
français/arabe.
En fin, l’INSTA a pour objectifs majeurs :
➢ La formation initiale et continue ;
➢ La formation professionnelle ;
➢ La recherche scientifique et technologique ainsi que la valorisation des résultats ;
➢ La diffusion de culture et de l’information scientifique [1].

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine V


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

SOMMAIRE
RÉSUME ........................................................................................................................................ I
ABSTRACT ................................................................................................................................. II
DÉDICACE ................................................................................................................................. III
REMERCIEMENTS .................................................................................................................. IV
AVANT-PROPOS......................................................................................................................... V
SOMMAIRE ................................................................................................................................ VI
LISTE DES TABLEAUX .......................................................................................................... IX
LISTE DES FIGURES ................................................................................................................. X
LISTE DES ANNEXES.............................................................................................................XII
LISTE DES ABREVIATIONS ET SIGLES ......................................................................... XIII
INTRODUCTION GENERALE ..................................................................................................1
CHAPITRE I : CONTEXTE GÉNÉRAL ET MOTIVATION .................................................3
INTRODUCTION ..................................................................................................................................... 3
1. PRESENTATION DE LIEU DE STAGE ................................................................................................ 3
1.1. Présentation de l’établissement Al-nadjma .......................................................................... 3
1.2. Organigramme de l’établissement al-nadjma....................................................................... 3
1.3. Rôle des personnels de l’établissement al-nadjma ............................................................... 4
1.4. Service de l’établissement al-nadjma .................................................................................... 5
2. PRESENTATION DU PROJET ........................................................................................................... 5
2.1. Problématique du projet ........................................................................................................ 5
2.2. Objectif ................................................................................................................................... 6
2.3. Planning du projet ................................................................................................................. 6
2.4. Intervenants du projet............................................................................................................ 7
2.5. Cycle de vie ............................................................................................................................. 8
CONCLUSION ......................................................................................................................................... 9
CHAPITRE II : ANALYSE ET SPÉCIFICATION DES BESOINS .....................................10
INTRODUCTION ................................................................................................................................... 10
1. ÉTUDE DE L’EXISTANT................................................................................................................. 10
2. CRITIQUE DE L’EXISTANT ........................................................................................................... 10
3. SOLUTIONS PROPOSEES ............................................................................................................... 11

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine VI


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

4. SPECIFICATION DES BESOINS....................................................................................................... 12


4.1. Besoins fonctionnels ............................................................................................................ 12
4.2. Besoins non-fonctionnels .................................................................................................... 13
5. METHODOLOGIE DE DEVELOPPEMENT ....................................................................................... 14
5.1. Définition du processus unifié ............................................................................................ 14
5.2. Phases du Processus Unifié ................................................................................................. 14
5.3. Activités du processus unifié ............................................................................................... 14
6. LANGAGE DE MODELISATION ...................................................................................................... 15
6.1. Unified Modeling Language (UML) ................................................................................... 15
6.2. Diagrammes UML utilisés ................................................................................................... 16
7. MVC (MODELE, VUE, CONTROLEUR)........................................................................................ 16
7.1. Les différentes couches de MVC ......................................................................................... 17
7.2. Illustration du modèle MVC ................................................................................................ 18
CONCLUSION ....................................................................................................................................... 18
CHAPITRE III : CONCEPTION ..............................................................................................19
INTRODUCTION ................................................................................................................................... 19
1. ACTEURS DU SYSTEME ................................................................................................................. 19
1.1. Identification des acteurs..................................................................................................... 19
2. CAS D’UTILISATION ..................................................................................................................... 20
2.1. Identification des cas d’utilisation ...................................................................................... 20
3. DIAGRAMME DE CAS D’UTILISATION .......................................................................................... 21
3.1. Diagramme de cas d’utilisation du gérant .......................................................................... 22
3.2. Description textuelle des cas d’utilisations ......................................................................... 23
4. DIAGRAMME DE SEQUENCE ......................................................................................................... 24
4.1. REALISATION DE DIAGRAMME DE SEQUENCE ......................................................................... 25
5. REALISATION DU DIAGRAMME DE CLASSE ................................................................................. 29
5.1. Diagramme de classes .......................................................................................................... 29
5.2. Dictionnaire de données ...................................................................................................... 30
CONCLUSION ....................................................................................................................................... 32
CHAPITRE IV : ETUDE TECHNIQUE ET IMPLEMENTATION.....................................33
INTRODUCTION ................................................................................................................................... 33
1. APPLICATION WEB ....................................................................................................................... 33
1.1. AVANTAGES D’UNE APPLICATION WEB ................................................................................... 33
2. OUTILS DE DEVELOPPEMENT ...................................................................................................... 33
2.1. Développement des diagrammes ......................................................................................... 33
2.2. Mozilla Firefox .................................................................................................................... 34
2.3. MYSQL ................................................................................................................................. 34
2.4. LARAGON ........................................................................................................................... 35

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine VII


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

2.5. Visual Studio Code............................................................................................................... 35


2.6. Photoshop ............................................................................................................................. 35
3. LANGAGE DE DEVELOPPEMENT .................................................................................................. 36
3.1. HTML ................................................................................................................................... 36
3.2. CSS ....................................................................................................................................... 36
3.3. SELECT2 ............................................................................................................................. 37
3.4. TOASTR ............................................................................................................................... 37
3.5. BOOTSTRAP ....................................................................................................................... 37
3.6. JavaScript ............................................................................................................................. 38
3.7. JQuery .................................................................................................................................. 38
3.8. PHP ...................................................................................................................................... 38
3.9. Framwork ............................................................................................................................. 39
3.10. Laravel .................................................................................................................................. 39
4. REPRESENTATION DES INTERFACES DE L’APPLICATION ............................................................ 40
4.1. Interface d’authentification ................................................................................................ 40
4.2. Interface d’accueil ............................................................................................................... 40
4.3. Interface de création de produits......................................................................................... 41
4.4. Interface de listes de produits .............................................................................................. 42
4.5. Interface de création d’échange .......................................................................................... 43
4.6. Interface de liste d’échange ................................................................................................. 43
4.7. Interface de création de vente ............................................................................................. 44
4.8. Interface de facture de vente ............................................................................................... 44
CONCLUSION ....................................................................................................................................... 45
CONCLUSION GÉNÉRALE .....................................................................................................46
PERSPECTIVES .........................................................................................................................47
ANNEXE ......................................................................................................................................48
BIBLIOGRAPHIE ......................................................................................................................50
WEBOGRAPHIE ........................................................................................................................51

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine VIII


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Liste des tableaux


Tableau I : Planning du projet...................................................................................................... 7
Tableau II : Intervenants du projet............................................................................................... 7
Tableau III : Descriptif des diagrammes UML. ........................................................................... 16
Tableau IV : Identification des cas d’utilisation .......................................................................... 21
Tableau V : Description textuelle du cas d’utilisation d’Authentification ............................... 23
Tableau VII : Description textuelle du cas d’utilisation gérer les ventes .................................... 23
Tableau VIII : Description textuelle du cas d’utilisation gérer les utilisateurs ........................... 24
Tableau X : Description textuelle du cas d’utilisation consulter l’état des ventes ................... 24
Tableau XI : Représentatif du dictionnaire de données. .............................................................. 30

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine IX


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Liste des figures


Figure 1 : Organigramme de l’établissement al-nadjma .............................................................. 3
Figure 2 : Cycle de vie en V .............................................................................................................. 9
Figure 3 : Icon de l’UML ................................................................................................................ 15
Figure 4 : Illustration du paterne MVC. [8] ................................................................................. 18
Figure 5 : Présentation d’un acteur(actor) ................................................................................... 19
Figure 6 : Présentation d’un cas d’utilisation .............................................................................. 20
Figure 7 : Présentation d’un diagramme cas d’utilisation .......................................................... 22
Figure 8 : Diagramme de cas d’utilisation du gérant .................................................................. 22
Figure 9 : Diagramme de séquence du cas d’utilisation (Authentification) .............................. 25
Figure 10 : Diagramme de séquence du cas d’utilisation (Enregistrement de ventes) ............... 26
Figure 11 : Diagramme de séquence du cas d’utilisation (Modification d’un utilisateur) ......... 27
Figure 12 : Diagramme de séquence du cas d’utilisation (État de ventes). ................................. 28
Figure 13 : Diagramme de classes. .................................................................................................. 29
Figure 14 : Icon de Umbrello ........................................................................................................... 33
Figure 15 : Icon de Draw.io .............................................................................................................. 34
Figure 16 : Icon de Mozilla Firefox ................................................................................................. 34
Figure 17 : Icon de MySQL .............................................................................................................. 34
Figure 18 : Icon de Laragon ............................................................................................................. 35
Figure 19 : Icon de Visual Studio Code........................................................................................... 35
Figure 20 : Icon de Photoshop ......................................................................................................... 36
Figure 21 : Icon de HTML ............................................................................................................... 36
Figure 22 : Icon de CSS .................................................................................................................... 36
Figure 23 : Icon de Select2 ............................................................................................................... 37
Figure 24 : Icon de Toastr ................................................................................................................ 37
Figure 25 : Icon de Bootstrap........................................................................................................... 37
Figure 26 : Icon de JavaScript ......................................................................................................... 38
Figure 27 : Icon de JQuery............................................................................................................... 38

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine X


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Figure 28 : Icon de PHP ................................................................................................................... 39


Figure 29 : Icon de Laravel .............................................................................................................. 39
Figure 30 : Interface d’authentification .......................................................................................... 40
Figure 31 : Interface d’accueil en français ..................................................................................... 40
Figure 32 : Interface d’accueil en arabe ......................................................................................... 41
Figure 33 : Interface de création de produits en arabe ................................................................. 41
Figure 34 : Interface d’ajout de produits en français .................................................................... 42
Figure 35 : Interface de listes de produits....................................................................................... 42
Figure 36 : Interface de création d’échange ................................................................................... 43
Figure 37 : Interface de liste d’échange .......................................................................................... 43
Figure 38 : Interface de création de vente de produits .................................................................. 44
Figure 39 : Interface de facture de vente de produits .................................................................... 44

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine XI


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Liste des annexes

Annexe 1 : journal de vente ............................................................................................................. 48


Annexe 2 : journal de commande sur papier ................................................................................ 49
Annexe 3 : journal de commande sur WhatsApp ......................................................................... 49

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine XII


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Liste des abréviations et sigles


UP : Processus Unified.
INSTA : Institut National des Sciences et Technique d'Abéché.
IUSTA : Institut Universitaire des Sciences et Technique d'Abéché.
UML : Unified Modeling Language.
STE : Sciences et Techniques de l'Elevage.
PR : Président de la République.
SQL: Strutured Query Language.
HTML: Hypertext Markup Language.
CSS : Cascading Style Sheet (feuille de style en cascade).
iOS: Iphone Operating System.
MySQL: My Structured Query Language.
PHP: Personal Home Page.
HTTP: Hypertext Transfer Protocol.
URL: Uniform Resource Locator.
PC: Personnel Computer.
DOM : Document Object Model.
MIT : L'Institut de technologie du Massachusetts.
XML: Extensible Markup Language.
WAMP: Windows Apache MySQL PHP.
XAMPP : (Windows, linux et Mac os x) Apache MySQL/MARIADB PHP PERL
SGBD : Système de Gestion de Base de Données.
MVC : Modèle-Vue-Contrôleur.
OMT : Technique de modélisation objet
OOSE: Object-oriented software engineering
UI: User Interface
BLL: Business Logic Layer
DAL: Data Access Layer.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine XIII


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

INTRODUCTION GENERALE
L’informatique est une science qui étudie les techniques du traitement automatique de
l'information. De par sa définition, l’informatique est l’ensemble des sciences et techniques en rapport
avec le traitement de l’information. Elle joue un rôle important dans le développement des entreprises et
d'autres secteurs d’activités. Durant ces dernières années, le monde connaît une avancée technologique
considérable dans tous les secteurs grâce à l'informatique. D’où l’informatique est incontournable dans
tous les secteurs [2].
Ainsi, jusqu'à présent, l'ordinateur reste le moyen le plus sûr pour le traitement et la sauvegarde
de l'information. Cette invention permet d'informatiser les systèmes de gestion de données des
entreprises, ce qui est la partie essentielle dans leur développement d’aujourd’hui.
En effet, la croissance du nombre des produits nécessite la mise en place d'une gestion rationnelle
efficace et rapide, or jusqu’à ce jour, la gestion manuelle est encore la plus dominante.
De ce fait, nous avons été sollicités par les responsables de l’établissement Al-nadjma afin de leur
concevoir une application web de gestion des ventes, archives, achats, clients, employés, échanges,
fournisseurs, commandes et des stocks.
On remarque ainsi la mauvaise organisation du travail dans l’établissement Al-nadjma lors de
la recherche d'une information ou lors de la création des statistiques, l'information n'est pas toujours
précise et disponible d'où la nécessité d'introduire l'informatique au sein de l’établissement Al-nadjma.
Notre projet de fin de cycle a pour objectif de concevoir et mettre en œuvre une application web
fiable, conviviale et facile à intégrer dans l'environnement de travail de l’établissement Al-nadjma.
Ainsi, le rapport est structuré en quatre chapitres principaux :
Le premier chapitre : portant contexte général et motivation. Dans ce premier chapitre, il sera
question de présenter l’organisme d’accueil et la présentation du projet, nous délimiterons notre
problématique et les objectifs visés, tout en introduisant le choix du cycle de vie et les étapes à suivre
pour concevoir notre application web.
Le deuxième chapitre : porte sur l’analyse et spécification des besoins, il permettra de délimiter
l’étude d’existant, critique de l’existant, spécification des besoins et regroupe toutes les étapes de
processus de développement en utilisant le langage de modélisation (UML), le processus unifié (UP) et
l’architecture du système.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 1


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Le troisième chapitre : réservé pour la conception, ce chapitre permettra de délimiter les rôles
des acteurs, le cas d’utilisation et les différents diagrammes.
Le quatrième chapitre : consacré à la réalisation, dans ce chapitre, l’accent sera mis sur les outils
et langages de développement qui ont permis de concevoir l’application web, quelques interfaces seront
présentées.
Ce travail s’achèvera par une conclusion générale.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 2


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

CHAPITRE I : CONTEXTE GÉNÉRAL ET MOTIVATION


Introduction
Dans ce chapitre, il est question de faire une présentation sur l’organisme d’accueil qui est
l’établissement Al-nadjma. Nous déterminerons le rôle de chaque acteur agissant dans cet organisme
pour répondre aux problèmes rencontrés par chacun. Nous énumérons les objectifs à atteindre dans le
but d’assurer une meilleure gestion.
1. Présentation de lieu de stage
1.1. Présentation de l’établissement Al-nadjma
L’établissement Al-nadjma est une entreprise de commerce générale (objets électroniques et
constructions de bâtiment) ouvert en 2008, elle est située au niveau du marché central d’Abéché au
quartier Aguad-chawai non loin du marché Tchoury dans la deuxième rue de l’Est D’Ecobank.
1.2. Organigramme de l’établissement al-nadjma
L’établissement AL-NADJMA compte six personnes qui sont entre autres :
➢ Un Directeur ;
➢ Un Gérant ;
➢ Un Adjoint Gérant ;
➢ Trois Employés.

Figure 1 : Organigramme de l’établissement al-nadjma

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 3


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

1.3. Rôle des personnels de l’établissement al-nadjma


❖ Le Directeur :
Le Directeur assure le fonctionnement de l’organisation dont il a la charge de superviser et valider
toutes les opérations quotidiennes de la société, à savoir :
• Les opérations administratives, commerciales, financières, partenariales,
stratégiques ;
• Assurance et rentabilité ;
• Amélioration, visibilité et répartitions des toutes les tâches de chaque employé.
❖ Le Gérant et l’adjoint gérant :
Le gérant assure plusieurs tâches à savoir :
• Vente des produits ;
• Régularisation des factures ;
• Formation des vendeurs ;
• Gestion des produits en stocks ;
• Compte rendu journalier de la vente et dépense ;
• L’approvisionnement journalier en termes de produits chez le fournisseur ;
• Vérification des commandes, du budget, la bonne marche de l’établissement en
générale ;
• Contact, autant avec les clients, qu’avec les fournisseurs et les employés ;
• Vérifications des arrivages (factures des produits) ;
• Payement des charges fiscales ;
• Versement hebdomadaire à la banque ;
• Payement des employés.
L’adjoint gérant assure la même tâche que le gérant dans l’établissement en cas d’absence, dans
le cas échéant, il joue le rôle d’employé.
❖ Les employés :
Les employés assurent plusieurs tâches telles que :
 Réception des clients ;
 Conseils aux clients (en cas de doute, le vendeur doit systématiquement demander
conseil à l’employé ou au gérant) ;

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 4


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

 Mise en place des produits ;


 Nettoyage de l’établissement ;
 Ouverture et fermeture de l’établissement.
1.4. Service de l’établissement al-nadjma
Il offre des services de ventes, échanges, commandes et des produits tels que les objets
électroniques et constructions de bâtiments, elle cherche en permanence à satisfaire sa clientèle en
répondant à sa demande dans les délais et a des prix accessibles de manière à fidéliser sa clientèle, vendre
des produits et gérer les stocks.
2. Présentation du projet
2.1. Problématique du projet
La gestion actuelle de l’établissement se fait manuellement et n’est pas encore informatisée, c’est
ce qui engendre plusieurs problèmes tels que :
a) La perte de temps dans la recherche des produits ;
b) Le manque d’information précise sur la disponibilité du stock ;
c) La complexité de gestion ;
d) Le problème d’ergonomie ;
e) La manque de précisions dans les calculs qui pourrait fragiliser la confiance entre les collaborateurs ;
f) Le risque d’erreurs dans le remplissage de différentes archives ;
g) Des erreurs des calculs manuels qui impactent l’efficacité et l’efficience de la gestion ;
h) La fatigue, l’oubli et l’erreur ont de grandes répercussions sur la qualité du travail et un effet
négatif sur les résultats attendus ;
i) Une dispersion de stock pour certains produits ;
j) L’utilisation de plusieurs documents (facture, liste des produits) ce qui entraîne une mauvaise
organisation de ces derniers.
Afin de pallier à ces problèmes, nous proposerons de développer une application web permettant
à l’établissement Al-nadjma d’atteindre les objectifs présentés dans le point suivant.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 5


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

2.2. Objectif
L’objectif de notre projet est d’arriver à concevoir et réaliser une application web pour la gestion
de l’établissement Al-nadjma très puissante et efficace pour gérer ses activités. À cet effet, l’application
web doit répondre à certaines obligations telles que :
1. Informatisation de stocks ;
2. Pertes des données ;
3. Organisation du travail du gérant ;
4. Facilitation du processus de commande ;
5. Visibilité et impressions des factures ;
6. Amélioration le suivi de commande ;
7. Sécurisation des accès ;
8. Avoir un historique et une vue d’ensemble sur l’établissement ;
9. L’alerter sur la quantité existante du produit de stock est en dessous de 30 ;
10. Organisation des produits en différentes catégories ;
11. Facilitation de recherche et le suivi d’un produit ;
12. Connaissance des recettes de l’établissement (recettes journalières, hebdomadaires,
mensuels et annuels).
2.3. Planning du projet
Dans le but de bien organiser ce travail et atteindre les objectifs fixés, nous avons établi un
planning de travail qui présente les différentes tâches qui sont les activités menées avec leur délai
d’exécutions représenté dans le tableau suivant :

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 6


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Tableau I : Planning du projet


ACTIVITÉS MENÉES DÉLAIS D’EXÉCUTIONS

Étude de l’existant
❖ Recueil des informations ; 25 Jours
❖ Élaboration de cahier de charges.
Conception
❖ Spécifications des besoins fonctionnels/non fonctionnels ;
15 Jours
❖ Conception détaillée ;
❖ Conception architecturale.
Codage
❖ Réalisation ;
60 Jours
❖ Tests Unitaires ;
❖ Intégrations et Test d’intégration.
❖ Déploiement et formation de l’utilisateur. 15 Jours
TOTAL 115 Jours
2.4. Intervenants du projet
Le tableau ci-dessous représente la liste des différents intervenants dans la réalisation de ce projet :
Tableau II : Intervenants du projet
INTERVENANTS TITRE RÔLE
Dr MAHAMAT Habib Senoussi Enseignant permanent à l’INSTA Encadreur
Dr FARIKOU OUSMANE Enseignant permanent à l’INSTA Superviseur
Dr ALI Ouchar Chérif Enseignant permanent à l’INSTA Superviseur
M. AHMAT Hassan Mahamat Enseignant permanent à l’INSTA Superviseur
ING. HISSEIN Abdelwahid Sarwal Enseignant missionnaire à l’INSTA Superviseur
ING. ALLAMINE Mahamat Ingénieur en informatique Superviseur
M. ALKHALI Mahamat Alkhali Gérant Utilisateur principal
M. AHMAT Mahamat Alkhali Adjoint Gérant Utilisateur
ALI Moussa Kadjalla Etudiant en licence 3 à l’INSTA Développeur

MOUSTAPHA Ismail Sakine Etudiant en licence 3 à l’INSTA Développeur

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 7


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

2.5. Cycle de vie


Le cycle de vie de développement d’une application représente la période de temps qui recouvre
la vie d’une application à savoir la naissance, la construction, l’exploitation, la maintenance et le retrait.
Le cycle de vie d’un projet est la période qui s’écoule de la naissance d’une idée jusqu’à la fin
de son exploitation.
Il comprend les étapes de développement suivant : la planification, la conception, le codage, le
test, l’installation et la maintenance.
Il peut être structuré en phase, où chaque phase regroupe les activités, qui visent un objectif
commun et se caractérise par :
 Les critères de déclenchement ;
 Le résultat produit (document, code et jeu de tests) ;
 Les critères de terminaison.
Il existe quatre (4) modèles de cycle de vie d’un logiciel :
 Cycle de vie en cascade ;
 Cycle de vie en V ;
 Cycle de vie en spirale ;
 Cycle de vie en incrémentale.
Pour la conception et la réalisation de l’application web, nous avons choisi d’appliquer le
processus de développement en V. Ce modèle de cycle de vie part du principe que les procédures de
vérification de la conformité du logiciel aux spécifications doivent être élaborées dès la phase de
conception. Il s’agit d’un modèle conceptuel qu’a vu le jour suite au problème rencontré avec celui qui
le précédé (le modèle en cascade) [3] .
De manière simplifiée, le cycle en V comprend les grandes étapes que l'on retrouve, pour la
plupart, dans le modèle en cascade1 :
 Une première série d'étapes, le flux descendant, vise à détailler le produit jusqu'à sa réalisation.
Il comprend l'expression des besoins, l'analyse, la conception, puis la mise en œuvre. Pour un
logiciel, la mise en œuvre correspond essentiellement à la programmation. Pour le matériel c'est
la réalisation d'un équipement6. Pour des mesures organisationnelles, la mise en œuvre
correspond à la rédaction de manuels de procédure.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 8


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

 Une deuxième série d'étapes, le flux ascendant, vise à valider le produit jusqu'à sa « recette »,
c'est-à-dire son acceptation par le client. Il comprend principalement une série de tests jusqu'à
pouvoir valider que le produit répond au besoin et aux exigences.

Il est appelé modèle en V (modèle conceptuel) par sa représentation visuelle en deux branches
obliques :

Figure 2 : Cycle de vie en V


Conclusion
En somme, l’établissement al-nadjma est une entreprise de commerce général et compte six
personne avec des rôles spécifiques. La gestion actuelle de l’établissement se fait manuellement.
Ensuite, nous avons déterminé les différents problèmes rencontrés par ces derniers dans la réalisation
de leurs tâches quotidiennes, les objectifs à atteindre ainsi que le cycle de vie qui nous conduira à la
réalisation de notre projet.
Le chapitre suivant nous mènera à l’analyse et spécification des besoins effectuée sur le terrain.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 9


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

CHAPITRE II : ANALYSE ET SPÉCIFICATION DES BESOINS


Introduction
L’analyse et la spécification des besoins sont des phases primordiales dans un projet. Elles servent
à analyser ce qui existe, dans le but de dégager les manquements des entreprises et de proposer une
solution. Dans ce chapitre, nous présentons l’étude de l’existant, quelques critiques de l’existant afin de
bien identifier les besoins fonctionnels et non fonctionnels. Ensuite de choisir le processus à suivre, le
langage de modélisation adéquat et l’architecture du système.
1. Étude de l’existant
Le but de cette partie est de connaître le cheminement des informations internes et externes, de
prendre connaissance dans le domaine auquel un service souhaite améliorer son fonctionnement. Lors de
cette étape, toutes les procédures existantes doivent être étudiées. Pendant notre stage, nous avions
rencontré le gérant pour recueillir les informations de leur fonctionnement, qui ont permis de recenser
toutes les tâches accomplies à travers les documents et archives.
Toutes les activités sont enregistrées manuellement dans les archives. Ces différentes activités se
présentent comme suit :
 Enregistrement des produits dans le magasin ;
 Notation de l’absence des produits ;
 Vente des produits ;
 Suivi de commande dans un papier ;
 Délivrance de facture ;
 Enregistrement de chaque vente ;
 Fiche de stock ;
 Gestion des échanges entre les fournisseurs ;
 Établir l’état journalier, hebdomadaire, mensuel et annuel.
2. Critique de l’existant
Pour arriver à mettre en œuvre un système d’information plus précisément une application web
de gestion des ventes, archives, achats et des stocks, il est primordial de faire une étude complète sur les
processus de travail existant.
Dans cet établissement, le manque d’une base de données ni une salle d’archivage pour faire la
recherche. Il devient très difficile de fouiller dans les archives.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 10


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Cette étude consiste à relever les insuffisances et les difficultés qui peuvent mener à des
défaillances et toucher à la qualité de la gestion des informations qu’on peut citer. Les insuffisances et
difficultés sont :
1. Les erreurs de calcul et statistique de l’état de ventes (journalier, hebdomadaire,
mensuel et annuel) ;
2. Les remplissages des informations concernant les produits se font manuellement ;
3. L’absence d’une base des données ;
4. Ne disposant d’aucun site web qui permet de diffuser l’information et d’échanger avec
les différents clients et fournisseurs.
3. Solutions proposées
Pour répondre aux difficultés évoquées ci-haut, on peut proposer une solution adéquate qui
consiste à développer une application web pour améliorer la gestion de l’établissement d’une manière
efficace et efficiente.
Cette application web fera gagner du temps et facilitera le travail grâce à une meilleure
organisation, automatisation des traitements de données transformera la méthode de travail classique en
dynamique. Elle permettra à l’établissement d’entrer dans l’ère du numérique en utilisant des interfaces
graphiques faciles à comprendre pour gagner en efficacité et efficience. Cette solution présente plusieurs
avantages à savoir :
1. Accès aux données par authentification, afin de restreindre le droit d’accès ;
2. Offrir une interface conviviale et simple d’utilisation ;
3. Simplifier la recherche des données ;
4. Faciliter les opérations (enregistrement, modification et consultation) ;
5. Utilisation des outils informatiques pour le stockage et la sécurité des informations ;
6. Archivages numériques des données ;
7. Tenir les fiches et formulaires numériques des fournisseurs afin de faciliter la mise à
jour et d’assurer un meilleur suivi ;
8. Assurer la sécurité des données et leur fiabilité avec mot de passe ;
9. Alarmes de notifications ;
10. Améliorer le processus des ventes, échanges et commandes ;
11. Impression des données.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 11


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

4. Spécification des besoins


Cette étape, primordiale au début de chaque démarche de développement. Son but est de veiller
à développer une application adéquate, sa finalité est la description générale des fonctionnalités du
système, en répondant à la question : quelles sont les fonctions du système ?
➢ Besoins fonctionnels
➢ Besoins non fonctionnels
4.1. Besoins fonctionnels
Les besoins fonctionnels se rapportent aux fonctionnalités que l'application doit offrir pour
satisfaire les utilisateurs.
Les fonctionnalités que doit intégrer l'application à développer sont :
 La gestion des produits : elle consiste à gérer les produits (enregistrer, modifier, supprimer,
imprimer et consulter) ;
 La gestion des commandes : cette opération est établie lorsqu'il y a un besoin de renouveler le
stock des produits. L'utilisateur peut créer un bon de commande correspondant à ses besoins ou
se référer directement à la liste des produits en rupture dans le stock ;
 La gestion des ventes : elle permet de réaliser une vente sur l’application. L’utilisateur peut
même consulter l’état des ventes (journalières, hebdomadaires, mensuelles et annuelles) ;
 La gestion des échanges : cette fonctionnalité consiste à enregistrer les échanges entre les
fournisseurs ;
 La gestion des stocks : cette action consiste à suivre l'état du produit à savoir les mouvements
réalisés sur le produit (variation de quantité des produits dans le stock, et avoir une vue globale
sur la liste de produits) ;
 La gestion des archives : elle consiste à consulter les activités réaliser par l’établissement
(commandes, dettes et échanges) ;
 La gestion des clients : cette tâche consiste à gérer les clients (enregistrement, modification et
suppression) ;
 La gestion des fournisseurs : cette opération consiste à gérer les fournisseurs (enregistrement,
modification et suppression) ;

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 12


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

 La gestion des catégories : cette opération consiste à gérer les différentes informations de
catégories du produit ;
 La gestion des états : cette action consiste à calculer la statistique de la vente, dépense et
échanges entrants (journalier, hebdomadaire, mensuel et annuel) ;
 La gestion d’alarme : cette opération consiste à savoir si la quantité restant en stock est
inférieure à 30. S’il tente de vendre une quantité d’un produit qui est supérieur à la quantité
dispensable un message d’alerte apparaître ;
 La gestion des employés : cette opération consiste à gérer les employés (enregistrement,
modification et suppression).
4.2. Besoins non-fonctionnels
Les besoins non fonctionnels sont indispensables et permettent l'amélioration de la qualité
logicielle du système. Ils agissent comme des contraintes sur les solutions, mais leur prise en
considération fait éviter plusieurs incohérences dans le système. Ce dernier doit répondre aux exigences
suivantes :
➢ Authentification : le système doit permettre à l'utilisateur de saisir son login et son mot de
passe pour accéder au système. Cette opération assure la sécurité du système et limite le
nombre des utilisateurs ;
➢ Facilite d’utilisation : l’application doit être simple, facile à comprendre par n’importe
quel utilisateur ;
➢ Ergonomie : le système devra offrir aux utilisateurs une interface qui soit la plus riche
possible afin de faciliter la manipulation. Par ailleurs, l'interactivité devra être adaptée
(usage du clavier, menu, etc..) ;
➢ Fiabilité : le système doit être fiable (l’utilisateur doit avoir confiance en la qualité de son
produit, pour mieux s’occuper de ses clients) ;
➢ Sécurité : l’application doit garantir la sécurité des données afin d’éviter la perte des
données et modification ;
➢ Maintenabilité : les différents modules de l’application doivent être lisibles et
compréhensibles afin de les maintenir et les mettre à jour rapidement et facilement ;
➢ Réutilisation : cet outil doit permettre l’ajout et édition de l’extension future.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 13


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

5. Méthodologie de développement
Selon la nature du projet, nous avons jugé que le processus unifié (PU) serait le plus adapté pour
sa réalisation.
5.1. Définition du processus unifié
PU ou UP (Processus Unifié ou Unified Process), est une méthode orientée objet pour le
développement de logiciel, c’est une méthode générique itérative et incrémentale, pilotée par les cas
d’utilisation centrés sur l’architecture.
Le processus unifié fournit un cadre au développement logiciel pour la construction de systèmes
orientés objet. [4].
5.2. Phases du Processus Unifié
La méthode UP se base sur quatre phases :
❖ Analyse des besoins : Établir une vision globale du projet où spécifie les besoins et étudie
la faisabilité du projet ;
❖ Élaboration : Reprendre les éléments de l’analyse des besoins et développe une
architecture de référence, les risques et la plupart des besoins sont identifiés ;
❖ Construction : Finaliser l’analyse, la conception, l’implémentation et les tests puis
transformer l’architecture de référence en produit exécutable tout en veillant à respecter
son intégrité. ;
❖ Transition : Livraison du produit au client afin d’effectuer des essais pour détecter
d’éventuelles anomalies. [4].
5.3. Activités du processus unifié
Chaque phase est constituée d’une succession d’activités. Les activités de la méthode UP sont :
➢ Expression des besoins : Permet d’écouter le client et de recevoir la commande de ses
besoins et exigences fonctionnelle ou non fonctionnelle ;
➢ Analyse et Conception : Permet d’acquérir une compréhension approfondie des
contraintes liées aux outils de réalisation en prenant en compte le choix d’architecture
technique retenu pour le développement et l’exploitation du système ;
➢ Implémentation : Permet d’implanter le système sous forme de composants,
bibliothèques et de fichiers. Elle a pour objectif de planifier l’intégration ;

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 14


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

➢ Tests : Permet de vérifier les résultats de l’implémentation de toutes les exigences et


de s’assurer de la bonne intégration de tous les composants dans le logiciel ;
➢ Déploiement : Livraison et exploitation du produit [4].

6. Langage de modélisation
Sachant que le processus unifié exige l'utilisation d’UML, notre modélisation de la solution se
fera en utilisant des diagrammes UML.
6.1. Unified Modeling Language (UML)
UML (Unified Modeling Language) est un langage de modélisation objet, né de la fusion de trois
langages de modélisation objet (Booch, OMT, OOSE) qui ont révolutionné la modélisation dans les
années 90.
UML est dit universel, car il est indépendant des langages de programmation, des domaines
d’application et aussi du processus de développement adopté. Il permet de représenter un système sous
forme de schémas. Sa notation graphique permet d’exprimer visuellement une solution objet, ce qui
facilite la comparaison et l’évaluation de la solution.
Sa véritable force repose sur une méta modèle qui normalise la sémantique des concepts, qu’il
véhicule. Notez qu’UML est ouvert et n’est la propriété de personne [5].

Figure 3 : Icon de l’UML

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 15


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

6.2. Diagrammes UML utilisés


Pour modéliser notre système, nous avons utilisé les trois types de diagrammes suivants :
Tableau III : Descriptif des diagrammes UML.
Diagramme Objectifs Type
1. Décrire la manière dont une organisation ou un
système externe doivent interagir avec le système ;
Diagramme de cas Fonctionnel
2. Décrire ce que doit faire le système ;
d’utilisation
3. Mettre en évidence les services rendus par le système.
1. Validation des cas d'utilisation pour comprendre la
logique de l'application ;
Diagramme de séquence 2. Complète le diagramme des cas d’utilisation en mettant Dynamique
en évidence les objets et leurs interactions d’un point
de vue temporel.
1. Point central de la modélisation du système pour décrire
ce que le système doit faire (analyse) et avec quoi il va
le faire (Conception) ; Statique
Diagramme de classes
2. Représentation de la structure statique du système
d’information ;
3. Modélisation des classes et leurs relations.

7. MVC (Modèle, Vue, Contrôleur)


MVC est un modèle d’architecture qui cherche à séparer nettement les couches de
présentation (UI : User Interface), métier (BLL : Business Logic Layer) et d’accès aux données
(DAL : Data Access Layer). Le but étant d’avoir une dépendance minimale entre les différentes
couches de l’application ainsi les modifications effectuées sur n’importe quelle couche de
l’application n’affectent pas les autres couches [6].

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 16


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

7.1. Les différentes couches de MVC


7.1.1 Couche modèle
Elle représente la partie de l’application qui exécute la logique du métier. Cela signifie
qu’elle est responsable de récupérer les données, de les convertir selon des concepts chargés de
sens pour l’application, tel que le traitement, la validation, l’association et beaucoup d’autres tâches
concernant la manipulation des données.
À première vue, l’objet modèle peut être vu comme la première couche d’interaction avec
n’importe quelle base de données de l’application. Mais plus globalement, il fait partie des concepts
majeurs autour desquels l’application est exécutée [7].
7.1.2 Couche vue
La vue retourne une présentation des données venant du modèle. Étant séparée par les
Objets Modèles, elle est responsable de l’utilisation des informations dont elle dispose pour
produire une interface de présentation de l’application.
Par exemple, de la même manière que la couche modèle retourne un ensemble de données,
la vue utilise ces données pour fournir une page HTML. Ou un résultat XML formaté.
La couche Vue n’est pas seulement limitée au HTML ou à la représentation en texte de
données. Elle peut aussi être utilisée pour offrir une grande variété de formats en fonction de vos
besoins, comme les vidéos, la musique, les documents et tout autre format auquel vous pouvez
penser [7].
7.1.3 Couche contrôleur
Elle gère les requêtes des utilisateurs. Elle est responsable de retourner une réponse avec
l’aide mutuelle des couches Modèle et Vue.
Les contrôleurs peuvent être imaginés comme des managers qui ont pour mission de vérifier
que toutes les ressources souhaitées pour accomplir une tâche soient déléguées aux travailleurs de
façon appropriée. Il attend des requêtes des clients, vérifie leur validité selon l’authentification et
les règles d’autorisation, délèguent les données récupérées et traitées par le Modèle et sélectionne
les types de présentation correcte que le client accepte, pour finalement déléguer le processus
d’affichage à la couche Vue [7].

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 17


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

7.2. Illustration du modèle MVC

Figure 4 : Illustration du paterne MVC [8].


Conclusion
A l’issue de cette étape, nous avons pu exprimer clairement les objectifs attendus du futur système
à concevoir. Car cette étude préalable appelée analyse et spécification des besoins, constitue une phase
capitale dans tout le projet. Il était question de présenter l’étude de l’existant, qui a permis de comprendre
le mode de fonctionnement de l’établissement, de dégager les critiques de l’existant sur certaines tâches
de l’établissement et de circonscrire les fonctionnalités des modules. Ensuite, cela a permis de proposer
des solutions répondant aux problèmes suggérés par l’établissement.
Le chapitre suivant nous mènera à la conception.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 18


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

CHAPITRE III : CONCEPTION


Introduction
Ce chapitre est réservé exclusivement, à la conception, il définit le rôle de chaque acteur qui
interagit avec le système. Nous modélisons le rôle de chacun sous forme de diagrammes de cas
d’utilisation, puis définir aussi les cas d’utilisation et finalement les modéliserons sous forme de
diagramme de séquence. Nous finirons par le diagramme de classe.
1. Acteurs du système
Un acteur est une entité externe qui interagit avec le système (Utilisateur, dispositif matériel, ou
autre système...). En réponse à l'action d'un acteur, le système fournit un service qui correspond à son
besoin (modification du système ou simple consultation). Les acteurs peuvent être classés
hiérarchiquement [9].
Voici comment est représenté un acteur graphiquement sous l’outil Draw.io.

Figure 5 : Présentation d’un acteur(actor)


1.1. Identification des acteurs
1.2.1 Les acteurs principaux (ou primaires)
Les acteurs primaires (ou internes) sont ceux qui agissent directement sur le système, c’est-à-dire
qu’ils l’utilisent pour réaliser des opérations.
Ainsi donc, le gérant et l’adjoint gérant ont le même rôle, excepté la gestion des utilisateurs.
1.2.1.1. Le gérant :
Le rôle du gérant est de Gérer :
➢ Les produits ;
➢ Les commandes ;
➢ Les ventes ;
➢ Les échanges ;
➢ Les stocks ;

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 19


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

➢ Les clients ;
➢ Les fournisseurs ;
➢ Les catégories ;
➢ Les archives ;
➢ Les dépenses ;
➢ Les dettes ;
➢ Les utilisateurs ;
➢ Les marques ;
➢ Les employés.
1.2.1.2. L’administrateur :
Le seul acteur ayant le droit d’accès au code source, la mise à jour de l’application et à sa
maintenance en cas de panne.
2. Cas d’utilisation
Le cas d’utilisation correspond à un ensemble d’actions réalisées par le système en interaction
avec les acteurs en vue d’une finalité. L’ensemble des cas d’utilisation permet ainsi de décrire les
exigences fonctionnelles d’un système en adoptant le point de vue et le langage de l’utilisateur final. Il
est représenté en forme d’une ellipse, dont le contenu en est le nom [10].

Voici comment est représenté un cas d’utilisation graphiquement sous l’outil Draw.io.

Figure 6 : Présentation d’un cas d’utilisation


2.1. Identification des cas d’utilisation
Dans l’application à développer, nous définissons les cas d’utilisation suivant :

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 20


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Tableau IV : Identification des cas d’utilisation


Acteurs Cas d’utilisation
1. Authentification ;
2. Gérer le stocks (Rechercher un produit et consulter) ;
3. Gérer les ventes (Enregistrer, Modifier, Rechercher une vente, annuler et consulter) ;
4. Gérer les échanges (Enregistrer, modifier, rechercher un échange, annuler et consulter) ;
5. Gérer les utilisateurs (Ajouter, Modifier, Supprimer, rechercher un utilisateur et
consulter) ;
6. Gérer les clients (Enregistrer, modifier, rechercher un client, annuler et consulter) ;
7. Gérer les marques (Enregistrer, modifier, rechercher une marque, annuler et consulter) ;
8. Gérer les fournisseurs (Enregistrer, modifier, rechercher un fournisseur, annuler et
consulter) ;
Gérant 9. Gérer les produits (Enregistrer, modifier, rechercher un produit, annuler, consulter et
Imprimer) ;
10. Gérer les employés (Enregistrer, modifier, rechercher un employé, annuler et consulter) ;
11. Gérer les catégories (Enregistrer, modifier, rechercher une catégorie, annuler et consulter) ;
12. Gérer les commandes (Enregistrer, modifier, rechercher une commande, annuler et
consulter) ;
13. Gérer les dettes (Enregistrer, modifier, rechercher une dette, annuler et consulter) ;
14. Gérer les dépenses (Enregistrer, modifier, rechercher une dépense, annuler et consulter) ;
15. Gérer les archives (Imprimer et Visualiser) ;
16. Gérer l’état des ventes (Imprimer et Visualiser).

3. Diagramme de cas d’utilisation


Les diagrammes de cas d'utilisation décrivent les utilisations requises d'un système, ou ce qu'un
système est supposé faire. Les principaux concepts de ces diagrammes sont les acteurs, cas d'utilisation
et sujets. Un sujet représente un système avec lequel les acteurs et autres sujets interagissent. Le
comportement requis du sujet est décrit par les cas d'utilisation. Le diagramme de cas d’utilisation
modélise à quoi sert le système [11].
Voici comment est représenté un diagramme cas d’utilisation graphiquement sous l’outil Draw.io.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 21


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Figure 7 : Présentation d’un diagramme cas d’utilisation


3.1. Diagramme de cas d’utilisation du gérant

Figure 8 : Diagramme de cas d’utilisation du gérant

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 22


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

3.2. Description textuelle des cas d’utilisations


 Cas d’utilisation N°1 : Authentification
Tableau V : Description textuelle du cas d’utilisation d’Authentification
Acteur principal Gérant
Objectif  S’authentifier avant d’accéder à la page d’accueil de l’application.
Pré-conditions  Avoir un navigateur.

1. L’utilisateur lance l’application web via un navigateur web ;


2. Le système demande à l’utilisateur de s’authentifier ;
3. L’utilisateur saisit son nom et son mot de passe ;
Scénarios 4. Le système vérifie la conformité des informations saisies en envoyant une
requête aux serveurs ;
5. La requête est vérifiée par le serveur et envoie une réponse favorable ;
6. L’utilisateur accède au menu principal.
 En cas de réponse défavorable du serveur, le système affiche un message
Alternative d’erreur en cas d’erreur de saisie ou bien d’un champ incomplet (retour à
2).
 Cas d’utilisation N°2 : Gérer les ventes
Tableau VI : Description textuelle du cas d’utilisation gérer les ventes

Acteur principal Gérant


Objectif  Enregistrer une vente de produit/Imprimer la facture si besoin.
Pré-conditions  Authentification.
1. L’utilisateur saisit le nom du produit dans la barre de recherche de
produit puis sélectionne le bon produit ajoute la quantité et clique sur
enregistrer ;
Scénario
2. Une requête est envoyée au serveur pour le traitement ;
3. Le serveur envoie un message de succès à l’interface de l’utilisateur ;

 Le système affiche un message d’erreur en cas d’une erreur de saisie ou


Alternative
bien d’un champ incomplet (retour à -1-).

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 23


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

 Cas d’utilisation N°3 : Gérer les utilisateurs


Tableau VII : Description textuelle du cas d’utilisation gérer les utilisateurs
Acteur principal Gérant.
Objectif  Modifier un utilisateur.
Pré-conditions  Authentification.
1. Le gérant accède à l’interface gérer les utilisateurs puis clique sur
modifier un utilisateur et enfin saisit le formulaire de modification et
Scénario clique sur modifier ;
2. Une requête est envoyée au serveur pour le traitement ;
3. Le serveur envoie un message de succès à l’interface de l’utilisateur.
 Le système affiche un message d’erreur en cas d’une erreur de saisie ou
Alternative
bien d’un champ incomplet (retour à -1-).
 Cas d’utilisation N°4 : Consulter l’état des ventes
Tableau VIII : Description textuelle du cas d’utilisation consulter l’état des ventes
Acteur principal Gérant
Objectif  Accéder aux nombreuse listes (liste des produits vendue)
Pré-conditions  Authentification
 Le gérant demande le formulaire de consultation ;
 Le système affiche le formulaire ;
Scénario  Le gérant demande de consulter une des listes (listes des produits) ;
 Une requête est envoyée au serveur pour traitement ;
 Le serveur répond et le système affiche la liste demandée.
Alternative  Problème technique (réactualiser la page).
4. Diagramme de séquence
Un diagramme de séquence est un diagramme UML (Unified Modeling Language) qui représente
la séquence de messages entre les objets et acteurs du système au cours d’une interaction. Un diagramme
de séquence comprend un groupe d'objets, représentés par des lignes de vie, et les messages que ces
objets échangent lors de l'interaction. Les diagrammes de séquence représentent la séquence de messages
transmis entre des objets. Ils peuvent également représenter les structures de contrôle entre des objets.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 24


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

4.1. Réalisation de diagramme de séquence


 Diagramme de séquence N°1 : cas d’authentification
Lorsque l’utilisateur (Gérant) veut accéder à notre application web, il sera obligé de s’authentifier
avant d’y accéder en saisissant son identifiant et mot de passe, après la saisie le système envoie une
requête au serveur pour traiter les informations envoyées, si les informations sont correctes, l’utilisateur
accédera à sa session, sinon un message d’erreur sera affiché et reconduira l’utilisateur à la page
authentification.

Figure 9 : Diagramme de séquence du cas d’utilisation (Authentification)

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 25


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

 Diagramme de séquence N°2 : cas d’enregistrement des ventes


Lorsque l’utilisateur (Gérant) a accédé à l’application, il lui sera possible d’effectuer une vente
en cliquant sur la gestion de vente, après la clique, il pourra enregistrer une vente de produit en
introduisant les champs requis et en cliquant sur enregistrer le système envoi la requête au serveur qui
lui enregistre les données et envoie un message de succès ou sinon un message d’erreur sera affiché s’il
manque un champ.

Figure 10 : Diagramme de séquence du cas d’utilisation (Enregistrement de ventes)

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 26


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

 Diagramme de séquence N°3 : cas de modification d’un utilisateur


Lorsque le gérant veut gérer les utilisateurs, il doit tout d’abord accéder à la gestion des
utilisateurs puis rechercher un utilisateur donné pour le modifier. Après sa recherche, le gérant n’a qu’à
cliquer sur modifier et remplir les champs requis et envoyer au serveur pour traitement et enregistrement.
Un message d’erreur est envoyé en cas de champ incomplet sinon un message de succès.

Figure 11 : Diagramme de séquence du cas d’utilisation (Modification d’un utilisateur)

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 27


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

 Diagramme de séquence N°4 : cas de consultation de l’état de ventes


Lorsque le gérant veut consulter l’une des nombreuses listes de notre application, il doit tout
d’abord accéder à la rubrique état des ventes ou il pourra sélectionner une des listes (liste des ventes). Le
serveur envoie les données requises dès que la requête d’affichage finit son traitement.

Figure 12 : Diagramme de séquence du cas d’utilisation (État de ventes).

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 28


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

5. Réalisation du diagramme de classe


5.1. Diagramme de classes
Le diagramme de classes est sans doute le diagramme le plus important à représenter pour
les méthodes d’analyse orientées objet. En effet, il permet de spécifier qui intervient à l’intérieur
du système.
Un diagramme de classes fait abstraction des aspects dynamiques et temporels du système,
il permet de représenter une vue statique du système d’information. Il s’agit plutôt des relations
entre les classes, des services rendus et utilisés par chacune d’elles et de l’articulation de
l’ensemble. [12]

Figure 13 : Diagramme de classes.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 29


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

5.2. Dictionnaire de données


Tableau IX : Représentatif du dictionnaire de données.
Classe Attributs Signification Type
- Id_u - Identifiant de l’utilisateur - Chaine de caractère
- Nom - Nom de l’utilisateur. - Chaine de caractère
- Prénom - Prénom de l’utilisateur. - Entier
Utilisateur
- Login - Login de l’utilisateur. - Chaine de caractère
- Mot_de_passe - Clé de sécurité - Chaine de caractère
- Photo - Photo de l’utilisateur - Chaine de caractère
- id_p - Identifiant de produit - Entier
- designation - Désignation de produit - Chaine de caractère
- id_cg - Identifiant de catégorie - Entier
Produit
- quantite - Quantité de produit - Double
- prix_d’achat - Prix d’achat de produit - Réel
- Date - Date d’enregistrement de produit - Date et heure
- Id_e - Identifiant d’échange - Entier
- Produit - Nom de produit - Chaine de caractère
- Quantité - Quantité d’entrée de produit - Réel
Echange
- Prix_d’achat - Prix d’achat de produit - Réel
- id_f - Identifiant de fournisseur - Entier
- Date - Date d’enregistrement d’échange - Date et heure
- id_v - Identifiant de vente - Entier
- id_p - Identifiant de produit - Entier
- id_c - Identifiant de client - Entier
Vente
- quantite_sortie - Quantité de sortie d’un produit - Double
- prix_vente - Prix de vente d’produit - Réel
- Date_sortie - Date de sortie d’une vente - Date et heure
- id_com - Identifiant de commande - Entier
Commande - id_f - Identifiant de fournisseur - Entier
- id_p - Identifiant de produit - Entier

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 30


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

- quantite_entree - Quantité d’entrée de produit - Réel


- prix_d’achat - Prix d’achat d’un produit - Réel
- date_entree - Date d’enregistrement d’une - Date et heure
commande
- id_f - Identifiant de fournisseur - Entier
- nom - Nom de fournisseur - Chaine de caractère
Fournisseur - prenom - Prénom de fournisseur - Chaine de caractère
- tel - Numéro de téléphone de fournisseur - Chaine de caractère
- adresse - Adresse (quartier) de fournisseur - Chaine de caractère
- id_c - Identifiant de client - Entier
- nom - Nom de client - Chaine de caractère
Client - prenom - Prénom de client - Chaine de caractère
- tel - Numéro de téléphone de client - Chaine de caractère
- adresse - Adresse (quartier) de client - Chaine de caractère
- id_cg - Identifiant de catégorie - Entier
Categorie - type - Type de catégorie - Chaine de caractère

- id_em - Identifiant d’un employé - Entier


- nom - Nom d’un employé - Chaine de caractère
- prenom - Prénom d’un employé - Chaine de caractère
- tel - Numéro de téléphone d’un employé - Chaine de caractère
Employé
- adresse - Adresse (quartier) d’un employé - Chaine de caractère
- poste - Poste d’un employé - Chaine de caractère
- Salaire - Salaire d’un employé - Réel
- Photo - Photo d’employé - Chaine de caractère

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 31


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Conclusion
Enfin, dans ce chapitre, nous avons décrit explicitement les différentes démarches de la
conception qui nous permettent de mettre facilement les mains à la patte de mieux implémenter les
modules distincts que notre future application renferme. En s’appuyant sur l’analyse des besoins
de notre application. Nous avons pu là modéliser sous forme de diagrammes de cas d’utilisation
puis de séquence, puis concevoir notre application sous forme de diagrammes de classe, reste à
concevoir et a créé notre application.
Le chapitre suivant nous mènera à l’étude technique et implémentation.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 32


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Chapitre IV : ÉTUDE TECHNIQUE ET IMPLEMENTATION


Introduction
Ce chapitre est dédié à l’étude technique et à l’implémentation, il définit les outils de
développement utilisés pour l’implémentation de l’application. Ensuite, nous passerons à la
présentation de l’application puis une conclusion sera tirée vers la fin.
1. Application web
Une application web désigne un logiciel applicatif hébergé sur un serveur et accessible via
un navigateur web. Contrairement à un logiciel traditionnel, l’utilisateur d’une application web n’a
pas besoin d’être installée sur son ordinateur. Il lui suffit de se connecter à l’application à l’aide de
son navigateur [13] .
1.1. Avantages d’une application web
➢ Accès universel depuis n’importe quel type de poste : PC, portables, téléphone mobile,
tablette ;
➢ Aucune incompatibilité de système d’exploitation (il suffit d’avoir un navigateur) ;
➢ Travailler depuis n’importe quel endroit de la planète ;
➢ Les données sont centralisées ;
➢ Les données sont disponibles 24h sur 24 et 7j sur 7 ;
➢ Aucun risque de perte de données.
2. Outils de développement
2.1. Développement des diagrammes
Pour réaliser les diagrammes UML qui ont servi à modéliser notre application web, nous
utilisons un logiciel et une application web de développement de diagramme, qui sont :
2.1.1. Umbrello
Umbrello est un outil de modélisation de langage de modélisation unifiée (UML) et un
générateur de code. Développé par KDE sous linux. Il peut créer des diagrammes de logiciels et
d'autres systèmes dans le format UML standard de l'industrie, et peut également générer du code à
partir de diagrammes UML dans une variété de langages de programmation [14].

Figure 14 : Icon de Umbrello

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 33


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

2.1.2. Draw.io
Draw.io est une application web de création de diagramme compatible avec google drive et
complètement gratuite, elle permet de dessiner des diagrammes UML en ligne via un navigateur
(sou protocole http) [15].

Figure 15 : Icon de Draw.io


2.2. Mozilla Firefox
Mozilla Firefox est un navigateur web libre et gratuit, développé et distribué par la Mozilla
Foundation avec l’aide de milliers de bénévoles grâce aux méthodes de développement du logiciel
libre (open source) et à la liberté du code source [16] .

Figure 16 : Icon de Mozilla Firefox


2.3. MYSQL
MySQL est un système de gestion de bases de données relationnelle libre qui a vu le jour en
1995 et très employée sur le Web, souvent en association avec PHP (langage) et Apache (serveur
web). MySQL fonctionne indifféremment sur tous les systèmes d’exploitation (Windows, Linux,
Mac OS notamment). Le principe d’une base de données relationnelles est d’enregistrer les
informations dans des tables qui représentent des regroupements de données par sujets (table des
produits, table d’utilisateur par exemple). Les tables sont reliées entre elles par des relations [17] .

Figure 17 : Icon de MySQL

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 34


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

2.4. LARAGON
Laragon est un environnement de développement web rapide, flexible, intuitif, productif et
puissant qui s'adresse à tous. Laragon vous offre tout ce dont vous avez besoin pour créer des
applications web modernes. Vous pouvez faire fonctionner Apache et MySQL d'un clic et déployer
facilement des frameworks ou CMS par exemple Laravel, Drupal ou Wordpress [18].

Figure 18 : Icon de Laragon


2.5. Visual Studio Code
Visual Studio Code est un éditeur de code extensible développé par Microsoft pour
Windows, Linux et macOS2.
Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la
syntaxe, la complétion intelligente du code, les snippets, la refactorisation du code et Git intégré.
Les utilisateurs peuvent modifier le thème, les raccourcis clavier, les préférences et installer des
extensions qui ajoutent des fonctionnalités supplémentaires. [19].
Visual Studio Code est un éditeur de code source léger mais puissant qui s’exécute sur votre
bureau et est disponible pour Windows, macOS et Linux. Il est livré avec un support intégré pour
JavaScript, TypeScript et Node.js et dispose d’un riche écosystème d’extensions pour d’autres
langages (tels que C ++, C #, Java, Python, PHP, Go) et des runtimes (tels que .NET et Unity) [20].

Figure 19 : Icon de Visual Studio Code


2.6. Photoshop
Photoshop est un logiciel de retouche, de traitement et de dessin assisté par ordinateur, lancé
en 1990 sur MacOS puis en 1992 sur Windows. Édité par Adobe, il est principalement utilisé pour
le traitement des photographies numériques, mais sert également à la création ex nihilo d’images.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 35


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Il travaille essentiellement sur images matricielles, car les images sont constituées d’une
grille de points appelés pixels. L’intérêt de ces images est de reproduire des gradations subtiles de
couleurs [21].

Figure 20 : Icon de Photoshop


3. Langage de développement
3.1. HTML
HyperText Markus Language, généralement abrégé HTML c’est un langage de balises
utilisé pour structurer et donner du sens au contenu web. Par exemple : définir des paragraphes,
titres et tables de données ou encore intégrer des images ou des vidéos dans une page [22] .

Figure 21 : Icon de HTML


3.2. CSS
CSS (Cascading Style Sheets) en Français Feuilles de Styles en Cascade, est un langage de
règles de style utilisé pour mettre en forme le contenu HTML. Par exemple : en modifiant la couleur
d'arrière-plan ou les polices, ou en disposant le contenu en plusieurs colonnes [23].
Ce langage est le complément du langage HTML pour obtenir une page web avec du style.
Le navigateur parcourt le document HTML. Lorsqu'il rencontre une balise, il demande à la CSS de
quelle manière, il doit l'afficher.

Figure 22 : Icon de CSS

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 36


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

3.3. SELECT2
Select2 est un remplacement basé sur jQuery pour les zones de sélection standard affichée
par le navigateur. Il prend en charge la recherche, les ensembles de données distants et le défilement
infini des résultats [24] .

Figure 23 : Icon de Select2


3.4. TOASTR
Toastr est une bibliothèque Javascript pour les notifications non bloquantes de type Gnome
/ Growl. JQuery est requis. L’objectif est de créer une bibliothèque de base simple qui peut être
personnalisée et étendue [25] .

Figure 24 : Icon de Toastr


3.5. BOOTSTRAP
Bootstrap est un framework développé par l'équipe du réseau social Twitter. Proposé en
open source (sous licence MIT), ce framework utilisant les langages HTML, CSS et JavaScript
fournit aux développeurs des outils pour créer un site facilement. Ce framework est pensé pour
développer des sites avec un design responsive, qui s'adapte à tout type d'écran, et en priorité pour
les smartphones. Il fournit des outils avec des styles déjà en place pour des typographies, des
boutons, des interfaces de navigation et bien d'autres encore. On appelle ce type de framework un
"Front-End Framework" [26].

Figure 25 : Icon de Bootstrap

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 37


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

3.6. JavaScript
JavaScript est un langage de programmation qui permet de créer du contenu mis à jour de
façon dynamique, de contrôler le contenu multimédia, d'animer des images, et tout ce à quoi on
peut penser. Bon, peut-être pas tout, mais vous pouvez faire bien des choses avec quelques lignes
de JavaScript [27].
C’est aussi un langage utilisé pour développer des extensions de logiciels tels que Chrome,
Firefox.

Figure 26 : Icon de JavaScript


3.7. JQuery
JQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter
l'écriture de scripts côté client dans le code HTML des pages web3. La première version est lancée
en janvier 2006 par John Resig [28].
Le but de la bibliothèque étant le parcours et la modification du DOM (y compris le support
des sélecteurs CSS 1 à 3 et un support basique de XPath), elle contient de nombreuses
fonctionnalités ; notamment des animations, la manipulation des feuilles de style en
cascade (accessibilité des classes et attributs), la gestion des évènements, etc..

.
Figure 27 : Icon de JQuery
3.8. PHP
PHP signifie Personnal Home Page, c’est un langage incrusté au HTML et interprété ou
compilé côté serveur. Il dérive du C et du Perl dont il reprend la syntaxe. Ce langage est
principalement utilisé pour produire un site web dynamique. Il est courant que ce langage soit
associé à une base de données, telle que MySQL.
Exécuté du côté serveur (l'endroit où est hébergé le site) il n'y a pas besoin aux visiteurs
d'avoir des logiciels ou plugins particulier. Comme il supporte tous les standards du web et qu’il
est gratuit, il s’est rapidement répandu sur la toile. PHP peut être installé sur les principaux serveurs
web du marché.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 38


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Néanmoins, les web masters qui souhaitent développer un site en PHP doivent s'assurer que
l'hébergeur prend en compte ce langage. Lorsqu'une page PHP est exécutée par le serveur, alors
celui-ci renvoie généralement au client (aux visiteurs du site) une page web qui peut contenir du
HTML, XHTML, CSS [29].

Figure 28 : Icon de PHP


3.9. Framwork
Un framework est, comme son nom l'indique en anglais, un "cadre de travail". L'objectif
d'un framework est généralement de simplifier le travail des développeurs informatiques, en leur
offrant une architecture "prête à l'emploi" et qui leur permet de ne pas repartir à zéro, chaque
nouveau projet. Il constitue une base cohérente et regroupe en général les fondations d’un logiciel
informatique ou d’une application web [30].
3.10. Laravel
Laravel est un framework web PHP gratuit et open-source, créé par Taylor Otwell et
destiné au développement d’applications web suivant le modèle architectural modèle-vue-
contrôleur (MVC) et basé sur Symfony. Certaines des caractéristiques de Laravel sont un système
d’emballage modulaire avec un gestionnaire de dépendance dédié, différentes façons d’accéder
aux bases de données relationnelles, des utilitaires qui aident au déploiement et à la maintenance
des applications, et son orientation vers le sucre syntaxique [31].
Il s’efforce de fournir une expérience de développement incroyable tout en fournissant des
fonctionnalités puissantes telles que l’injection de dépendances approfondie, une couche
d’abstraction de base de données expressive, des files d’attente et des tâches planifiées, des tests
unitaires et d’intégration, etc. [32].

Figure 29 : Icon de Laravel

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 39


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

4. Représentation des interfaces de l’application


4.1. Interface d’authentification
Les membres du personnel doivent impérativement se connecter à leur session via cette
interface.

Figure 30 : Interface d’authentification


4.2. Interface d’accueil
Cette figure représente l’interface d’accueil en français.

Figure 31 : Interface d’accueil en français

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 40


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Cette figure représente l’interface d’accueil en arabe.

Figure 32 : Interface d’accueil en arabe


4.3. Interface de création de produits
Cette figure représente l’interface de création de produits c’est-à-dire l’ajout au stock d’un
produit en arabe.

Figure 33 : Interface de création de produits en arabe

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 41


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Cette figure représente l’interface de création de produits c’est-à-dire l’ajout au stock d’un
produit en français.

Figure 34 : Interface d’ajout de produits en français


4.4. Interface de listes de produits
Cette capture représente l’interface de listes de produits.

Figure 35 : Interface de listes de produits

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 42


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

4.5. Interface de création d’échange


Cette capture représente l’interface de création d’échange de produit entre l’établissement.

Figure 36 : Interface de création d’échange


4.6. Interface de liste d’échange
Cette figure représente l’interface de liste d’échange de produits entre l’établissement.

Figure 37 : Interface de liste d’échange

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 43


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

4.7. Interface de création de vente


Cette figure représente l’interface de création de vente de produits.

Figure 38 : Interface de création de vente de produits


4.8. Interface de facture de vente
Cette figure représente l’interface de facture de vente de produits.

Figure 39 : Interface de facture de vente de produits

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 44


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Conclusion
Au terme de ce travail dédié à l’étude technique et implémentation, nous sommes passés de
la théorie à la pratique, il a permis d’atteindre les objectifs décrits dans les étapes précédentes. Nous
avons présenté les outils qui nous ont aidé pour concevoir notre application, le langage de
programmation et le framework en passant par la représentation graphique de l’architecture global
de l’application en question et les interfaces pour bien illustrer le travail qui a été fait.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 45


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

CONCLUSION GÉNÉRALE
En somme, nous avons pu présenter les différentes étapes ayant conduit à la mise en œuvre
d’une application web dédiée à la gestion (vente, stock, échange, produit, commande, dépense,
dette) au sein de l’établissement al-nadjma à Abéché. On a commencé à recenser les difficultés que
rencontre le personnel de l’établissement afin d’apporter la solution adéquate et de spécifier ainsi
les besoins.
Le langage de modélisation UML et le processus unifié UP ont constitué le support
d’analyse des besoins et la conception de notre application web via les différents diagrammes UML
couvrant les aspects fonctionnels, dynamiques et statiques de tout le développement.
Ce projet a fait l’objet d’une expérience intéressante, très bénéfique pour nous. En effet, il
nous a permis d’enrichir nos connaissances théoriques et compétences dans le domaine de la
conception et de la programmation. Ajoutant à cela, la mise en application des connaissances
acquises tout au long de nos études.
Pour la réalisation de l’application, nous avons utilisé LARAGON pour implémenter la
base de données et le langage PHP via le framwork LARAVEL qui est basé sur MVC (Modèles,
vue, contrôleurs) pour les interfaces.
En plus, c’était une bonne occasion pour réaliser un travail concret avec des objectifs clairs
et bien définis. Ce projet nous a également permis de nous familiariser avec l’environnement de
travail et de la vie professionnelle.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 46


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Perspectives
Nous avons bien souhaité et voulu au départ d’arriver jusqu’au bout afin de résoudre une
grande partie du problème. Cependant, des perspectives restent envisageables, tels que :
➢ L’enrichissement de l’application par la fonctionnalité permettant d’établir des statistiques ;
➢ Gestion des personnelles ;
➢ Création de site web ;
➢ Héberger le système ;
➢ L’amélioration de la qualité des renseignements via une application Android et iOS qui
viendra complémenter l’application web.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 47


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Annexe

Annexe 1 : journal de vente s


Cette image montre toutes les informations de la vente effectuée par jours.

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 48


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

Annexe 2 : journal de commande sur papier

Cette image montre toutes les informations de commande qui ont été faites sur papier.

Annexe 3 : journal de commande sur WhatsApp


Cette image montre toutes les informations de commande qui ont été faites sur WhatsApp ;

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 49


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

BIBLIOGRAPHIE

[1] Décret 460 statut de l’iusta0001.pdf consulter (28 juin 2022).

[3] Cours PDF UML 2.0 de Génie logiciel de Mr. Laurent AUDIBERT de l’Institut Universitaire de Technologie
de Villetaneuse - département d’Informatique Avenue JeanBaptiste Clément.. Consulter (25 mars 2022)

[4] PIECHOCKI Laurent UML en français définition d’UML du dictionnaire conception, 2005. Consulter (15 mars
2022)..

[5] G.picard SMA/G2/ENS Mines, définition d’UP Saint-Etienne, 2009. Consulter (15 mars 2022)..

[9] P. Roques, UML2 par la pratique, Eyrolles, 2006. Consulter (20 mars 2022)..

[11] [6] Référence RAD Studio UML 2.0 2015. Consulter (12 mars 2022)..

[12] sylvain Cherrier Diagramme de classes UML 2015. Consulter (15 mars 2022).

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 50


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

WEBOGRAPHIE

[2] «http://www.memoireonline.com/02/13/7039/Application-web-Gestion-de-pharmacie-enJava.html (25 mars


2022).,» [En ligne].

[6] «http://dico.developpez.com/html/3020-Conception-MVC-Model-View-Controller.php. Consulter (10 mars


2022).,» [En ligne].

[7] «https://book.cakephp.org/2.0/fr/cakephp-overview/understanding-model-viewcontroller.html. Consulter (1 mars


2022).,» [En ligne].

[8] «https://www.developpez.net/forums/d751216/generaldeveloppement/alm/architecture/autres/conception-
trois-tiers-3-tier/ Consulter (1 mars 2022).,» [En ligne].

[10] «Cas d'utilisation — Wikipédia (wikipedia.org),» [En ligne].

[13] «www.ideematic.com. Consulter (1 avril 2022).,» [En ligne].

[14] «[Comparatif] Vous cherchez un modeleur UML? at E. Renaux (imt.fr),» Consulter (25 mars 2022) [En ligne].

[15] «diagrams.net - Prix, tarif, abonnement et avis | GetApp France 2022,» Consulter (10 juin 2022) [En ligne].

[16] «http://dictionnaire.sensagent.leparisien.fr/Mozilla%20Firefox/fr-fr/. (01 avril 2022).,» Consulter (30 mars 2022)


[En ligne].

[17] «http://www.mosaique-info.fr/glossaire-web-referencement-infographie-multimediainformatique/m-glossaire-
informatique-et-multimedia/448-mysql-definition.html. (05 avril 2022).,» Consulter (10 juin 2022) [En ligne].

[18] «Télécharger Laragon (Apache) gratuit pour PC - CCM (commentcamarche.net),» Consulter (10 aout 2022) [En ligne].

[19] «https://fr.wikipedia.org/w/index.php?title=Visual_Studio_Code&oldid=176135085,» Consulter (15 aout 2022) [En


ligne].

[20] «Documentation pour Visual Studio Code,» Consulter (10 aout 2022) [En ligne].

[21] «https://fr.wikipedia.org/w/index.php?title=Adobe_Photoshop&oldid=178426012,» Consulter (28 mars 2022) [En


ligne].

[22] «Qu'est-ce que le JavaScript ? - Apprendre le développement web | MDN (mozilla.org),» Consulter (10 mars 2022)
[En ligne].

[23] «Qu'est-ce que le JavaScript ? - Apprendre le développement web | MDN (mozilla.org),» Consulter (12 juin 2022)
[En ligne].

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 51


Conception et réalisation d’une application web de gestion des établissements commerciaux :
Cas de l’établissement Al-nadjma

[24] «select2 - Bibliothèques - cdnjs - Le CDN gratuit et open source n°1 conçu pour faciliter la vie des développeurs,»
Consulter (28 juin 2022) [En ligne].

[25] «Toastr par CodeSeven,» Consulter (10 aout 2022) [En ligne].

[26] «Bootstrap : définition, tutoriels, astuces, pratiques (journaldunet.com),» Consulter (10 mars 2022) [En ligne].

[27] «Qu'est-ce que le JavaScript ? - Apprendre le développement web | MDN (mozilla.org),» Consulter (29 mars 2022)
[En ligne].

[28] «jQuery — Wikipédia (wikipedia.org),» Consulter (10 mars 2022) [En ligne].

[29] «[9] http://glossaire.infowebmaster.fr/php/. consulter (11 avril 2022).,» [En ligne].

[30] «[9] https://www.1min30.com/dictionnaire-du-web/framework. (07 juin 2022).,» Consulter (20 juin 2022) [En
ligne].

[31] «Laravel — Wikipédia (wikipedia.org),» Consulter (25 juin 2022) [En ligne].

[32] «. Installation - Laravel - Le framework PHP pour les artisans du web,» Consulter (25 juin 2022) [En ligne].

Rédigé par : ALI Moussa Kadjalla et MOUSTAPHA Ismail Sakine 52

Vous aimerez peut-être aussi