République Tunisienne

Ministère de l’enseignement ‫الجمهورية التونسية‬

Supérieur et de la recherche
Scientifique ‫وزارة التعليم العالي والبحث العلمي‬
Université de Gafsa ‫جامعة قفصة‬
Institut Supérieur
D'Administration des Entreprises ‫المعهد العالي إلدارة المؤسسات بقفصة‬
de Gafsa

MEMOIRE
DE PROJET DE FIN D’ETUDES

En vue de l’obtention du diplôme national de

Conception et développement d'un

site web E-commerce de produits
informatiques « AlGiNET»

Elaboré par : Zina akermi

Soutenu Le 22 juin 2024, Devant Le Jury Composé De :

Président : Mr. Ridha Zaghdoud

Rapporteur : Mme. Imen Rahal
Encadrante : Mme. Najwa Dellali

Année Universitaire 2023-2024

ISAEG, Rue Elhoucine Ben Gadour Sidi Ahmed Zarroug.Gafsa
Tél : 76 211 440
 Remerciements

C’est avec plaisir que je réserve cette page en signe de gratitude et de

profonde reconnaissance, à tous ceux qui m’ont aidé tout au long de ce
stage. Je tiens à exprimer ma gratitude envers mon encadrant de stage,
Monsieur KAIS SAHBI, pour son soutien et son expertise tout au long de
mon projet de fin d’études. Les conseils précieux qu’il m’a prodigués ont
grandement contribue à la réussite de mon stage et m’ont permis
d’acquérir des compétences essentielles pour ma future carrière
professionnelle.

Je souhaite également remercier mon encadrante universitaire, Madame

NAJWA DELLALI pour son soutien tout au long de mon parcours
académique et pour les connaissances qu’elle m’a transmises. Je suis
reconnaissante de l’opportunité qui m’a été offerte de travailler sous leur
supervision, et je suis convaincue que les compétences acquises grâceàleur
encadrement me seront très utiles dans ma future carrière.

Enfin, j’espère que ma conduite et mon apprentissage ont laissé une bonne
impression de l’institut supérieur d’administration des entreprises à
GAFSA. Je suis fière d’avoir fait partie de cette institution prestigieuse et
je suis reconnaissante de l’expérience enrichissante qu’elle m’a offerte.
 Dédicaces
Je dédie ce travail à :

” À mon cher père qui nous manques, qui m’a toujours encouragé `a
poursuivre mes rêves et à travailler dur pour atteindre mes objectifs. Votre
force, votre soutien et votre amour me donnent la force de continuer même
lorsque les choses semblent impossibles. Tu nous manques tellement, mais
je sais que tu seras toujours avec moi, dans mon cœur et dans ma mémoire.

À ma chère mère, qui a été une force constante de bienveillance et

d’encouragement tout au long de mes études.

À mes sœurs "MALOUKA" et "MAROUMA", qui m'ont toujours poussée

à viser plus haut et à ne jamais abandonner mes rêves, et qui ont fait
beaucoup de sacrifices pour que je puisse être à ce niveau.

A mon université pour m’avoir offert la chance de suivre cette formation

exceptionnelle en ` business information system’.

À tous ceux qui ont contribué à la réalisation de ce projet. Leur soutien a

été essentiel, et je suis très reconnaissante de les avoir à mes côtés tout au
long de ce parcours.”

Zina akermi
 Tables des matières
Chapitre 1 : Cadre générale du projet.........................................................................................1

Introduction.............................................................................................................................2

I. Cadre du Projet.............................................................................................................2

II. Présentation de l’organisme d’accueil..........................................................................2

III. Présentation du projet...............................................................................................3

IV. Etude de l’existant....................................................................................................4

1. Analyse d l’existant..................................................................................................4

2. Critique de l’existant................................................................................................4

3. Solution proposée.....................................................................................................5

4. Objectif.....................................................................................................................6

V. Spécification des besoins.............................................................................................6

1. Les besoins fonctionnels...........................................................................................6

2. Les besoins non fonctionnels....................................................................................7

a) La sécurité :...........................................................................................................7

b) Temps de réponse :...............................................................................................7

c) La disponibilité :...................................................................................................7

d) La convivialité :....................................................................................................7

e) L’ergonomie :........................................................................................................7

Conclusion...............................................................................................................................7

Chapitre 2 : Étude conceptuelle..................................................................................................8

Introduction.............................................................................................................................9

I. La modélisation des données........................................................................................9

1. Présentation..............................................................................................................9

2. Langage de modélisation des données......................................................................9

 a) Langages graphiques et textuels...........................................................................9

3. Choix de langage de modélisation..........................................................................10

a) Uml.....................................................................................................................10

b) Utilité d’UML.....................................................................................................10

4. Les diagrammes de cas d'utilisation.......................................................................11

a) Identification des acteurs....................................................................................11

II. Cas d’utilisation générale...........................................................................................13

1. Diagramme de cas d’utilisation générale................................................................13

2. Description brève des cas d’utilisation...................................................................13

3. Raffinement de cas d’utilisation.............................................................................14

a) Diagramme de cas d’utilisation « s’authentifier »..............................................14

b) Raffinement de cas d’utilisation « Gérer compte »............................................15

c) Raffinement de cas d’utilisation « Gérer produit ».............................................17

d) Diagramme de cas d’utilisation « consulter ordre » :.........................................19

e) Raffinement de cas d’utilisation « consulter produit ».......................................20

f) Diagramme de cas d’utilisation « passer commander »......................................21

g) Diagramme de cas d’utilisation « consulter produit».........................................22

h) Diagramme de cas d’utilisation « Gérer publicité»............................................23

III. Digramme de séquances.........................................................................................25

1. Diagramme de séquence «Authentification»..........................................................25

2. Diagramme de séquence «ajouter produit»............................................................26

3. Diagramme de séquence «modifier produit»..........................................................27

4. Diagramme de séquence «supprimer un produit»..................................................28

5. Diagramme de séquence «effectuer commande»...................................................29

IV. Digramme de classes..............................................................................................29

Chapitre 3 : Réalisation et Outillage.........................................................................................31

Introduction...........................................................................................................................32
 1. Environnement de travail matériel.........................................................................32

2. Les technologies.....................................................................................................32

3. Les outils.................................................................................................................35

4. Environnement de rédaction de rapport..................................................................36

5. Environnement de conception et de réalisation de la présentation.........................37

6. Démonstration des interfaces..................................................................................37

a) Interface page d’accueil :....................................................................................37

b) Interface d’authentification :...............................................................................38

c) Interface s’inscrire :............................................................................................38

d) Interface profil client:.........................................................................................39

e) Interface listes de produits..................................................................................39

f) Interface d’un produit :.......................................................................................40

g) Interface contact admin :.....................................................................................40

h) Interface authentification : Administrateur.........................................................41

i) Interface d’ajout nouvelle produit :.....................................................................41

Conclusion.............................................................................................................................42

Conclusion générale Et perspectives........................................................................................43

 Liste des tableaux

Tableau 1 : Description textuelle « s’authentifier »...............................................................14

Tableau 2 : Description du raffinement « lister »..................................................................15

Tableau 3 : Description du raffinement « modifier »............................................................16

Tableau 4 : Description du raffinement « supprimer produit ».............................................16

Tableau 5 : Description du raffinement « ajouter»................................................................17

Tableau 6 : Description du raffinement « modifier »............................................................18

Tableau 7 : Description du raffinement « supprimer »..........................................................18

Tableau 8 : Description du raffinement « consulter ordre »..................................................19

Tableau 9 : Description du raffinement « consulter produit »...............................................20

Tableau 10 : Description du raffinement « passer commande »..........................................21

Tableau 11 : Description du raffinement « consulter produit »...........................................22

Tableau 12 : Description du raffinement « ajouter publicité »............................................23

Tableau 13 : Description du raffinement « modifier publicité »..........................................24

Tableau 14 : Description du raffinement « supprimer publicité ».......................................24

Tableau 15 : Environnement de travail matériel..................................................................32

 Liste des figures
Figure 1 : Logo de la compagnie de phosphate de Gafsa (CPG)..............................................3

Figure 2 : Logo UML [3]........................................................................................................10

Figure 3 : Diagramme de cas d’utilisation générale................................................................13

Figure 4 : Diagramme de cas d’utilisation "Authentifier"......................................................14

Figure 5 : Raffinement du cas d’utilisation « Gérer le compte »............................................15

Figure 6 : Raffinement du cas d’utilisation « Gérer produit».................................................17

Figure 7 : Raffinement du cas d’utilisation « consulter ordre »..............................................19

Figure 8 : Raffinement du cas d’utilisation « consulter produit»............................................20

Figure 9 : Raffinement du cas d’utilisation « passer commande»..........................................21

Figure 10 : Raffinement du cas d’utilisation « consulter produit»........................................22

Figure 11 : Raffinement du cas d’utilisation « gérer publicité»............................................23

Figure 12 : Diagramme de séquence du cas « authentification »..........................................25

Figure 13 : Diagramme de séquence du cas « ajouter un produit »......................................26

Figure 14 : Diagramme de séquence détaillé du cas « modifier un produit ».......................27

Figure 15 : Diagramme de séquence détaillé du cas « supprimer un produit ».....................28

Figure 16 : Diagramme de séquence détaillé du cas « effectuer commande »......................29

Figure 17 : Diagramme de classes.........................................................................................30

Figure 18 : logo HTML [3]...................................................................................................32

Figure 19 : logo AJAX [3].....................................................................................................33

Figure 20 : Logo Bootstrap [3]..............................................................................................34

Figure 21 : Logo PHP [3]......................................................................................................34

Figure 22 : Logo Visual basic code[3]..................................................................................35

Figure 23 : Logo WampServer [3]........................................................................................35

Figure 24 : Logo STARUML [3]..........................................................................................36

Figure 25 : Logo Microsoft Office[3]...................................................................................36

Figure 26 : Logo Microsoft Word [3]....................................................................................36

Figure 27 : Logo Microsoft PowerPoint [3]..........................................................................37

Figure 28 : Interface page d’accueil......................................................................................37

Figure 29 : Interface Authentification...................................................................................38

Figure 30 : Interface gérer les clients et investisseurs...........................................................38

Figure 31 : Interface profil....................................................................................................39

Figure 32 : Interface produit..................................................................................................40

Figure 33 : Interface Contact.................................................................................................40

Figure 34 : Interface authentification pour l’Administrateur................................................41

Figure 35 : Interface d’ajout nouvelle produit.......................................................................41

Introduction Générale ISAEG 2024

Introduction Générale
Vu que l’informatique en Tunisie entre dans une phase d’accélération qui se manifeste par
l’introduction rapide des applications informatiques et des NTIC (Nouvelle Technologies de
L'Information et de la Communication) généralement dans la plupart des aspects de la vie
professionnelle et quotidienne, nos établissements se doivent améliorer la qualité de leurs
services et ce par le biais de l’informatisation et l’intégration de l’informatique dans toutes
leurs activités.
Le présent travail s’inscrit dans le cadre d’un Projet de Fin d’Études conçu et réalisé
au sein de la société «Compagnie de Phosphate Gafsa CPG» qui est une entreprise basée à
Tunis, qui veule évoluer et de diversifier ses produits et ses solutions à plusieurs niveaux,
entre autres : La conception et le développement des nouvelles solutions et applications
informatiques.
En effet, nous cherchons souvent des solutions informatiques qui leurs facilitent la vie,
notamment au niveau de la gestion de documents, de personnels, de données.
Les boutiques en ligne sont depuis des années, largement conseillés pour les sociétés qui se
basent sur la vente des produits et même des services. Ces types de sites web représentent un
dispositif global fournissant aux clients un pont de passage à l’ensemble des informations, des
produits, et des services à partir d’un portail unique en rapport avec son activité.
Les sites de vente en ligne permettant aux clients de profiter d’une foire virtuelle disponible
est quotidiennement mise à jour sans la moindre contrainte, ce qui leur permettrai de ne
jamais rater les coups de cœur, ainsi une foire sans problèmes de distance géographique, ni
d’horaire de travail ni de disponibilité de transport. D’une autre part ces sites offrent à la
société de profiter de cet espace pour exposer des produits à une plus large base de clientèle.
Ce projet visait donc à ajouter les fonctionnalités nécessaires :
 Gestion des utilisateurs : Permettre aux utilisateurs de créer un compte, de se
connecter, de gérer leurs informations personnelles et de consulter leur historique
d'achat.
 Gestion des stocks : Permet aux administrateurs de gérer les niveaux de stock des
produits et de recevoir des notifications lorsque les stocks sont bas.
Introduction Générale ISAEG 2024

 Système de recherche avancée : Permet aux utilisateurs de rechercher des produits

par catégorie, marque, prix, etc.
 Catalogue de produits : Permettre aux utilisateurs de parcourir et de rechercher
facilement les produits disponibles à l'achat, avec des filtres et des options de tri.
 Panier d'achat : Permettre aux utilisateurs d'ajouter des produits à leur panier, de le
modifier et de passer à la caisse.
 Gestion des commandes : Permet aux administrateurs de gérer les commandes, de
suivre leur statut et d'envoyer des notifications aux clients.
 Suivi des commandes : Fournir aux utilisateurs des mises à jour sur l'état de leur
commande, de la confirmation à la livraison.
 Intégration des réseaux sociaux : Permet aux utilisateurs de partager des produits sur
les réseaux sociaux et de se connecter via leurs comptes sociaux.
Notre rapport est organisé en trois chapitres comme suit :
 Le premier chapitre intitulé « Cadre générale du projet » est consacrée à présenter les
problèmes rencontrer au sein de la CPG pour gérer les courriers tout en présentant une liste
non exhaustive de nos applications dans ce domaine.
 Le deuxième chapitre intitulé« étude conceptuel » introduit la problématique et donne
un aspect aux besoins. Il définit également le processus de développement et la méthodologie
à suivre. Il présente aussi la conception de notre application en utilisant le langage de
modélisation UML.
 Le dernier chapitre intitulé« Réalisation et Outillage » sera destinée à la réalisation et
l’implémentation de notre application et à la mise en œuvre de la solution conçue.
Chapitre 1 : cadre générale du projet ISAEG 2024

Chapitre 1 : Cadre
générale du projet

1
Chapitre 1 : cadre générale du projet ISAEG 2024

Introduction
L'étude préalable constitue une étape préliminaire pour la réalisation d'une application. En
effet, elle permet d'analyser, d'évaluer et de critiquer le fonctionnement habituel tout en
élaborant la liste des solutions possibles. Ce chapitre sera réservé à la présentation de l'étude
préalable de notre projet. Nous commençons par présenter le projet et les objectifs à atteindre.
L'analyse et la critique de l'existant nous ont permis de cerner nos objectifs afin de développer
un système de qualité à l'avenir. Enfin, nous proposons différentes solutions aux problèmes
soulevés.

I. Cadre du Projet
Ce projet est mené dans le cadre d’un stage de fin d’études pour l’obtention de la licence en
BUSINESS COMPUTING (BC) à l’Institut Supérieur des Administrations des Entreprises de
Gafsa(ISAEG). Ce stage est réalisé au sein de la “CPG” sous la supervision de M. Kais Sahbi,
et s’étale sur une période de trois mois.

II. Présentation de l’organisme d’accueil

La Compagnie des Phosphates de Gafsa (CPG) est une entreprise tunisienne spécialisée dans
l'extraction et la transformation du phosphate. Fondée en 1897, la CPG est l'un des principaux
producteurs mondiaux de phosphate, un minéral essentiel utilisé dans la fabrication d'engrais
et dans diverses industries chimiques. Son siège social est situé à Gafsa, une région du sud-
ouest de la Tunisie renommée pour ses vastes réserves de phosphate.

Sur le plan environnemental, la CPG a fait l'objet de critiques et de préoccupations quant à ses
pratiques d'exploitation minière et leurs répercussions sur les écosystèmes locaux. Les
communautés locales et les groupes de défense de l'environnement ont soulevé des questions
concernant la gestion des déchets miniers et la préservation des ressources naturelles.

Aujourd'hui, la Compagnie des Phosphates de Gafsa (CPG) reste un pilier essentiel de

l'industrie mondiale du phosphate et demeure d'une importance stratégique pour l'économie
tunisienne. Malgré les défis persistants tels que les fluctuations des prix mondiaux du
Aujourd'hui, la Compagnie des Phosphates de Gafsa (CPG) reste un pilier essentiel de
l'industrie mondiale du phosphate et demeure d'une importance stratégique pour l'économie
tunisienne. Malgré les défis persistants tels que les fluctuations des prix mondiaux du

2
Chapitre 1 : cadre générale du projet ISAEG 2024

phosphate, les préoccupations environnementales et les questions sociales, la CPG continue

de maintenir sa position en tant que l'un des principaux producteurs mondiaux. En réponse à
ces défis, elle poursuit ses efforts de modernisation, en investissant dans des technologies plus
propres et des pratiques opérationnelles durables, tout en renforçant son engagement envers
les communautés locales par le biais de programmes de responsabilité sociale d'entreprise.
Avec un engagement envers l'adaptation aux évolutions du marché et une vision axée sur la
durabilité, la CPG est optimiste quant à ses perspectives d'avenir, visant à consolider sa
position concurrentielle et à contribuer de manière significative au développement
économique et social de la Tunisie.

Figure 1 : Logo de la compagnie de phosphate de Gafsa (CPG)

III. Présentation du projet

Notre mission est de concevoir une plateforme de commerce électronique dans le but de
simplifier le processus d'achat et de vente pour les utilisateurs. Nous visons également à
répondre efficacement aux besoins spécifiques de nos précieux clients.

Nos ambitions pour ce projet incluent notamment :

o Augmentation de la qualité des données :pour garantir une expérience utilisateur
optimale, des décisions commerciales efficaces et des performances marketing
améliorées.
o La sécurité de l’utilisation de la plateforme :protéger les données sensibles, garantir la
confidentialité des utilisateurs et maintenir la confiance dans votre entreprise.
o Création d’un site qui répond aux besoins des clients et des investisseurs : une
compréhension approfondie de leurs attentes et une conception réfléchie de
l'expérience utilisateur.

3
Chapitre 1 : cadre générale du projet ISAEG 2024

o Personnalisation et recommandation: Nous souhaitons intégrer des

fonctionnalités de personnalisation pour offrir une expérience d'achat sur mesure à
chaque utilisateur. Cela peut inclure des recommandations de produits basées sur
l'historique d'achat, les préférences personnelles et les comportements de navigation.
o Commercialiser les produits de l’entreprise sur le web.
o Permettre aux clients de réaliser de commandes via le web, et d’envoyer leurs
remarques ainsi que leur commentaire.
o Voir les produits par catégorie.
o Passé les commandes.

Ce site permettra de réaliser les opérations suivantes :

 Inscription des visiteurs pour devenir clients.
 Exposition des produits ainsi que leurs prix et caractéristiques.
 Ajout des produits choisis au panier.
 Confirmation de l’opération d’achat.
 Choix du mode de livraison.
 Confirmation de la commande.

IV. Etude de l’existant

1. Analyse d l’existant
Dans l'approche classique de la vente au détail, les consommateurs sont souvent obligés de
déplacer de boutique en boutique pour comparer les qualités et les prix des produits. Cette
démarche peut s'avérer extrêmement lourde et chronophage car elle nécessite de vérifier la
disponibilité des articles en magasin. Il est également difficile de rassembler toutes les
informations pertinentes ou de faire des comparaisons efficaces entre les meilleures offres ou
les plus économiques
En somme, le processus traditionnel d'achat est non seulement long et complexe, mais il
requiert également un effort considérable de la part du client pour dénicher le produit idéal au
prix le plus avantageux.

2. Critique de l’existant
Les ventes en magasin physique ont lieu dans des emplacements physiques tels que des
magasins de détail ou des points de vente.

4
Chapitre 1 : cadre générale du projet ISAEG 2024

Il est essentiel de considérer les défis associés aux achats en magasin physique.
L'expérience d'achat traditionnelle implique souvent des efforts physiques significatifs pour
parcourir plusieurs boutiques afin de trouver les produits souhaités.
Ce processus peut être chronophage et exigeant, nécessitant des déplacements fréquents d'un
lieu à un autre.
De plus, les conditions météorologiques défavorables peuvent compliquer d’avantage cette
expérience, exposant les clients à des environnements inconfortables ou même dangereux
lorsqu'ils se déplacent entre les magasins.

3. Solution proposée
Pour combler ces problèmes, nous proposons de développer une application d’un site E-
commerce « AlGiNET » qui permet des ventes en ligne offrant une alternative qui atténue les
obstacles physiques avec une simple connexion Internet.
De plus, les plateformes de commerce électronique offrent souvent des fonctionnalités de
recherche avancées et des filtres de catégorie, facilitant la découverte et la sélection de
produits spécifiques sans avoir à parcourir de multiples points de vente physiques.

Notre application rend le processus d’inscription plus facile et fiables. Le client n’a pas besoin
de se déplacer au niveau des boutiques. Le tri des dossiers se fait d’une manière automatique :

En mettant en œuvre ces solutions, le site e-commerce peut améliorer son expérience
utilisateur, augmenter ses taux de conversion et renforcer la confiance des utilisateurs dans la
marque.

La mise en place de cette application est une solution efficace qui permet :
o La facilitation des transactions en évitant aux acheteurs de se déplacer, ce qui leur
fait gagner du temps, tout en leur offrant un service identique et confortable.
o Une navigation facile pour les clients sur le site, leur permettant de trouver ce qu'ils
cherchent sans difficulté.
o Des processus de commande et de paiement fluides et sécurisés, garantissant une
expérience d'achat sans souci pour les clients.
oTous les clients et investisseurs intéressés par nos nouveautés doivent s'inscrire à
l'application en remplissant un formulaire d'inscription avec leurs coordonnées
personnelles. La gestion de ces inscriptions est assurée par l'administrateur.

5
Chapitre 1 : cadre générale du projet ISAEG 2024

4. Objectif
 Fournir un système de vente en ligne pour gagner le temps.
 Permettre de s’inscrire de nouveaux clients à distance.
 Faciliter le processus du travail au niveau de l’administration.
 Assurer la sécurité de l’application par l’authentification, l’enregistrement des
informations, modifier et supprimer.
 Disposer d’un module d’administration de l’application permet la gestion, la mise à
jour et la maintenance de l’application.
 Implémentation de la base de données.
 Générer des ventes en ligne puis de fidéliser des clients.
 Rechercher les besoins des clients afin d'y répondre de la meilleure des façons, de
vendre les produits et services de l'entreprise.
 Interface facile à utiliser.
 Application sécurisée.

V. Spécification des besoins

Étant donnée la nécessité d'avoir un système informatique de qualité, notre site abordera le
sujet qui répondra aux besoins des responsables de notre site E-commerce.

1. Les besoins fonctionnels

 Gérer les clients.
 Gérer les actualités.
 Gérer les commandes.
 Intégration de profils pour les membres de la boutique.
 Authentification des utilisateurs par le biais d'un identifiant et d'un mot de passe pour
accéder aux différentes fonctionnalités.
 Inscription des clients : Le logiciel doit être capable de simplifier et de fiabiliser au
maximum l'inscription des clients. Les utilisateurs pourront s'inscrire sur le site etcréer
un compte personnel.
 Authentification du personnel.
 Ajout d'un utilisateur.
 Consultation d'un utilisateur.
 Modification d'un utilisateur.
 Suppression d'un utilisateur.

6
Chapitre 1 : cadre générale du projet ISAEG 2024

 Activation d'une ligne

 Désactivation d'une ligne
 Transfert d'une ligne
 Affichage des offres

2. Les besoins non fonctionnels

Les besoins non fonctionnels se réfèrent aux contraintes à prendre en compte lors de la
mise en place d'une solution appropriée pour répondre aux attentes des architectes de
systèmes dynamiques.
Notre application doit nécessairement assurer ces besoins :
a) La sécurité :
Il est nécessaire d'établir une connexion sécurisée en ayant une interface d'authentification qui
permet à chaque utilisateur de se connecter pour consulter son profil
b) Temps de réponse :
Le temps de réponse doit être le plus court possible.
c) La disponibilité :
Lorsqu'un utilisateur souhaite consulter le site, il doit être disponible.
d) La convivialité :
Le site doit être facile à utiliser, avec une interface logique et une navigation rapide. Le texte
doit être compréhensible, visible et lisible, avec un ensemble de liens adéquat.
e) L’ergonomie :

Le thème adopté par l'application doit s'inspirer des couleurs et du logo de l'entreprise
d'accueil pour garantir la cohérence visuelle. [2]

Conclusion
Ce chapitre nous a permis de mieux comprendre notre organisme d’accueil ainsi que le
contexte du projet. Il nous a permis également de définir le cadre général de ce dernier et
l’identification des principaux besoins attendus pour la réalisation. Dans le chapitre qui
suit nous présentons les démarches de conception de notre solution.

7
Chapitre 2 : Étude conceptuelle ISAEG 2024

Chapitre 2 : Étude
conceptuelle

8
 Chapitre 2 : Étude conceptuelle ISAEG 2024

Introduction
La conception décrit le fonctionnement de notre système par une étude générale basée sur la
spécification des besoins en premier lieu, puis une étude détaillée du projet sur plusieurs
approches.

I. La modélisation des données

1. Présentation
La modélisation des données fait référence aux processus et événements qui se produisent
pendant la conception et le développement d'une application. Les techniques et les outils de
modélisation des données sont utilisés pour collecter les différentes conceptions d'un système
complexe et les transformer en une représentation simplifiée suivante :

 Processus et flux de données pour construire et créer des modèles refonte.

 Vous pouvez comparer le modèle de données avec un diagramme ou un

organigramme.

 Illustre la relation entre les données.

figure 1 Représenter les mêmes données et assurer tous les processus, entités, relations
et le flux de données a été identifié.

2. Langage de modélisation des données

Un langage de modélisation est un langage artificiel qui peut être utilisé pour exprimer de
l'information ou de la connaissance ou des systèmes dans une structure qui est définie par un
ensemble cohérent de règles.
Les règles sont utilisées pour l'interprétation de la signification des composants dans la
structure.
a) Langages graphiques et textuels
Un langage de modélisation peut être graphique ou textuel :
Les langages de modélisation graphiques utilisent des techniques de diagrammes avec des
symboles associés à des noms qui représentent les concepts et des lignes qui connectent les
symboles et qui représentent les relations et les diverses autres annotations graphiques pour
représenter les contraintes.

9
 Chapitre 2 : Étude conceptuelle ISAEG 2024

Les langages de modélisation textuels utilisent typiquement des mots-clés standardisés

accompagnés de paramètres pour rendre les expressions interprétables par les
ordinateurs.

3. Choix de langage de modélisation

Afin de prendre en compte de manière appropriée les besoins de nos applications, y compris tous
les aspects des systèmes physiques et humains, nous avons eu recours à la modélisation
conceptuelle pour avoir une architecture précise adaptée à nos produits. Dans le cadre de
notre projet, nous avons choisi UML comme méthode de conception. Ci-dessous, nous
présentons ce langage et en même temps justifions notre choix.
a) Uml
UML (UNIFIEDMODELING LANGUAGE, traduisez "langage de modélisation objet
unifié") est un langage de modélisation destiné à fournir un moyen standard de visualiser la
conception d'un système. UML peut être utilisé pour visualiser différentes perspectives d'un
système. Il peut être utilisé pour modéliser la structure, le comportement, l'architecture, les
processus métier et la structure des données de l'application. Pour ce faire, UML fournit une
collection de diagrammes structurels et comportement aux, également appelés diagrammes
statiques et dynamiques.[1]

Figure 2 : Logo UML [3]

b) Utilité d’UML
UML est utilisé pour spécifier, visualiser, modifier et construire les documents nécessaires
au bon développement d'un logiciel orienté objet. UML offre un standard de modélisation
pour représenter l'architecture logicielle. Les différents éléments représentables sont
"Activité d'un objet/logiciel, Acteurs, Processus, Schéma de base de données, Composants
logiciels et Réutilisation de composants". Grâce aux outils de modélisation UML, il est
également possible de générer automatiquement une partie du code, par exemple en
langage Java, à partir des divers documents réalisés.
10
Chapitre 2 : Étude conceptuelle ISAEG 2024

4. Les diagrammes de cas d'utilisation

Un cas d'utilisation est une illustration conceptuelle d'une portion du fonctionnement d'un
système, tel qu'elle est réalisée par une instance d'un acteur. Lorsqu'on identifie l'acteur, il est
essentiel d'examiner les diverses manières dont il interagit avec le système et de les
représenter en utilisant une notation facile à comprendre pour tous. C'est pour cette raison que
nous avons choisi de détailler, à travers des cas d'utilisation, l'intégralité des fonctionnalités
que le système met à la disposition de nos acteurs.
a) Identification des acteurs
Un acteur fait référence à un rôle endossé par des entités extérieures qui ont une interaction
directe avec le système en question. Il a la capacité de visualiser et/ou changer l'état du
système en envoyant et/ou en recevant des messages. Ces messages peuvent potentiellement
comprendre des données.

 Administrateur :

C'est la personne qui gère l'administration de l'application telle que la gestion des
clients, des commandes, des stocks, des promotions et des catégories.

 Utilisateur :

C'est la personne qui utilise l'application pour consulter les informations de la

boutique de vente et faire l'inscription.

 Visiteur:
Il était un utilisateur anonyme qui visitait le site sans s'engager dans une interaction
spécifique.

 Investisseur :

Cette personne utilise l'application pour consulter les informations de la boutique

de vente et crée un compte investisseur pour promouvoir ses produits sur le site.

11
Chapitre 2 : Étude conceptuelle ISAEG 2024

Acteur Rôles
Administrateur (responsable au - Ajouter un produit
boutique) - Gérer les produits
-Consulter Ordre

Client - Commander
- Consulter les produits

Visiteur -Consulter produit

Investisseur -Gérer publicités

12
Chapitre 2 : Étude conceptuelle ISAEG 2024

II. Cas d’utilisation générale

1. Diagramme de cas d’utilisation générale
La représentation graphique ci-dessous clarifie le diagramme de cas d’utilisation générale :

Figure 3 : Diagramme de cas d’utilisation générale

2. Description brève des cas d’utilisation

Les diagrammes de cas d’utilisation « use cases » permettent de structurer les besoins des
utilisateurs et les objectifs correspondants d’un système. Ils centrent l’expression des
exigences du système sur ses utilisateurs.
Ils définissent généralement ses fonctionnalités c'est-à-dire les « uses cases » décrivent
chaque tâche de l’utilisation. Donc les use cases avec ses multiples relations (Extend, Include.
etc.), nous donnent une vue presque réelle de l’application.

13
Chapitre 2 : Étude conceptuelle ISAEG 2024

3. Raffinement de cas d’utilisation

a) Diagramme de cas d’utilisation « s’authentifier »

Figure 4 : Diagramme de cas d’utilisation "Authentifier"

 Description textuelle :
Cas d’utilisation S’authentifier
Acteur Administrateur, Client, Investisseur
Précondition. L’acteur doit être présent dans la base de données.

Postcondition Les authentifications sont effectuées, les acteurs peuvent

accéder aux sessions qui les concernent.
Scénario de base : 1. L’acteur ouvre l’application.
2. Le système affiche la page d’authentification.
3. L’acteur saisit le login et le mot de passe.
4. Le système affiche la page correspond
Scénario d’exception : Si login ou mot de passe non valide ou bien Champs
erronés ou vides le système affiche un message d’erreur.
Tableau 1 : Description textuelle « s’authentifier »

14
Chapitre 2 : Étude conceptuelle ISAEG 2024

ADMIN :
b) Raffinement de cas d’utilisation « Gérer compte »

Figure 5 : Raffinement du cas d’utilisation « Gérer le compte »

 Description textuelle du raffinement « lister »:

Cas d’utilisation Lister
Acteur Administrateur
Précondition. L'administrateur est connecté à son compte

Postcondition : Afficher les éléments de l’utilisateur et d’investisseur

Scénario de base : 1. L'administrateur accède à la fonction de liste des éléments

pour un compte utilisateur spécifique.
2. Le système affiche la liste complète des éléments présents
dans le tableau du compte utilisateur.
Scénario d’exception : Rupture de connexion
Tableau 2 : Description du raffinement « lister »

15
Chapitre 2 : Étude conceptuelle ISAEG 2024

 Description textuelle du raffinement « Modifier » :

Cas d’utilisation Modifier
Acteur Administrateur
Précondition L'administrateur authentifié.

Post condition Les éléments sont modifiés

Scénario de base : 1. L'administrateur accède à la fonction de modification d'élément pour

un compte utilisateur spécifique.
2. L'administrateur sélectionne l'élément qu'il souhaite modifier.
3. Le système affiche le formulaire de modification
5. L'administrateur effectue les modifications nécessaires sur l'élément.
6. Le système enregistre les modifications.
7. Le système affiche un message de confirmation de la modification.
Scénario d’exception : Si champs valide ou erronés ou vides le système affiche un message
d’erreur.
Tableau 3 : Description du raffinement « modifier »

 Description textuelle du raffinement « Supprimer » :

Cas d’utilisation Supprimer
Acteur Administrateur
Pré condition L'administrateur authentifié.

Postcondition L'élément est supprimé du tableau du compte utilisateur.

Scénario de base : 1. L'administrateur accède à la fonction de suppression d'élément pour

un compte utilisateur spécifique.
2. L'administrateur sélectionne l'élément qu'il souhaite supprimer.
3. Le système demande confirmation de suppression à l'administrateur.
4. L'administrateur confirme la suppression.
5. Le système supprime l'élément du tableau du compte utilisateur.
6. Le système affiche un message de confirmation de suppression.
Scénario d’exception : L’administrateur annule la suppression
Tableau 4 : Description du raffinement « supprimer produit »

16
Chapitre 2 : Étude conceptuelle ISAEG 2024

c) Raffinement de cas d’utilisation « Gérer produit »

Figure 6 : Raffinement du cas d’utilisation « Gérer produit»

 Description textuelle du raffinement « ajouter » :

Cas d’utilisation Ajouter
Acteur Administrateur
Précondition. L'administrateur est connecté

Post condition : Le produit est ajouté avec succès dans le système.

Scénario de base : 1. L'administrateur accède à la fonction d'ajout de produit.

2. Le système affiche le formulaire de création de produit.
3. L'administrateur saisit les informations du nouveau produit.
4. L'administrateur soumet le formulaire.
5. Le système enregistre le nouveau produit.
6. Le système affiche un message de confirmation de l'ajout.
Scénario d’exception : Si Champs vides ou bien erronés le système affiche un message
d’erreur.
Tableau 5 : Description du raffinement « ajouter»

17
Chapitre 2 : Étude conceptuelle ISAEG 2024

 Description textuelle du raffinement « modifier » :

Cas d’utilisation Modifier
Acteur Administrateur
Pré condition. L'administrateur est connecté à son compte d'administration

Post condition : Produit modifié

Scénario de base : 1. Le système affiche la liste des produits disponibles.
2. L'administrateur sélectionne le produit qu'il souhaite modifier.
3. Le système affiche les détails du produit sélectionné.
4. L'administrateur effectue les modifications nécessaires sur le
produit.
5. Le système enregistre les modifications apportées.
6. Le système affiche un message de confirmation des
modifications.
Scénario d’exception : Si champs valide ou erronés ou vides le système affiche un message
d’erreur.
Tableau 6 : Description du raffinement « modifier »

 Description textuelle du raffinement « supprimer » :

Cas d’utilisation Supprimer
Acteur Administrateur
Pré condition. L'administrateur est connecté à son compte d'administration

Post condition : Le produit est supprimé avec succès du système.

Scénario de base : 1. Le système affiche la liste des produits disponibles.

2. L'administrateur sélectionne le produit qu'il souhaite supprimer.
3. Le système demande confirmation à l'administrateur pour la
suppression.
4. L'administrateur confirme la suppression.
5. Le système supprime le produit sélectionné. 6. Le système affiche
un message de confirmation de la suppression.
Scénario d’exception : L’administrateur annule la suppression
Tableau 7 : Description du raffinement « supprimer »

18
Chapitre 2 : Étude conceptuelle ISAEG 2024

d) Diagramme de cas d’utilisation « consulter ordre » :

Figure 7 : Raffinement du cas d’utilisation « consulter ordre »

 Description textuelle du raffinement « consulter ordre » :

Cas d’utilisation Consulter un ordre
Acteur Administrateur
Pré condition. L'administrateur est connecté à son compte d'administration

Post condition : Ordre affiché

Scénario de base : 1. Le système affiche la liste des commandes passées.

2. L'administrateur sélectionne l'ordre qu'il souhaite consulter.
3. Le système affiche les détails de l'ordre sélectionné, y compris
les produits commandés, l'adresse de livraison, le montant total, et
l'état de la commande.
Scénario d’exception : Rupture de connexion
Tableau 8 : Description du raffinement « consulter ordre »

19
Chapitre 2 : Étude conceptuelle ISAEG 2024

CLIENT:
e) Raffinement de cas d’utilisation « consulter produit »

Figure 8 : Raffinement du cas d’utilisation « consulter produit»

 Description textuelle du raffinement « consulter produit » :

Cas d’utilisation Consulter les produits
Acteur Client
Pré condition. Le client est connecté à son compte

Post condition Les produits affichés.

Scénario de base 1. Le système affiche la liste des produits disponibles avec leurs
détails, tels que le nom, la description, le prix, etc.
2. Le client explore les produits et leurs caractéristiques.
Scénario d’exception Rupture de connexion
Tableau 9 : Description du raffinement « consulter produit »

20
Chapitre 2 : Étude conceptuelle ISAEG 2024

f) Diagramme de cas d’utilisation « passer commander »

Figure 9 : Raffinement du cas d’utilisation « passer commande»

 Description textuelle du raffinement « passer commande » :

Cas d’utilisation Passer une commande
Acteur Client
Pré condition. Le client est connecté à son compte.

Post condition La commande est enregistrée dans le système.

Scénario de base 1. Le client consulte les produits disponibles.
2. Le client sélectionne les produits qu'il souhaite acheter et les
ajoute à son panier.
3. Le client accède à son panier pour vérifier les produits
sélectionnés et ajuster les quantités si nécessaire.
4. Le client procède au paiement en choisissant le mode de paiement
approprié (carte de crédit, virement bancaire, etc.).
5. Le système enregistre la commande avec les détails de livraison
et de paiement.
6. Le système affiche un message de confirmation de la commande
Scénario d’exception Le client annule le processus de commande.
Tableau 10 : Description du raffinement « passer commande »

21
Chapitre 2 : Étude conceptuelle ISAEG 2024

VISITEUR :
g) Diagramme de cas d’utilisation « consulter produit»

Figure 10 : Raffinement du cas d’utilisation « consulter produit»

 Description textuelle du raffinement « consulter produit » :

Cas d’utilisation Consulter les produits
Acteur Visiteur
Pré condition. Aucune

Post condition Aucune

Scénario de base 1. Le visiteur accède à la page d'accueil du site. 2. Le système

affiche la liste des produits disponibles avec leurs détails, tels que
le nom, la description et le prix.
3. Le visiteur explore les produits et leurs caractéristiques.

Scénario d’exception Aucun scénario d'exception défini pour cette fonctionnalité

spécifique.
Tableau 11 : Description du raffinement « consulter produit »

22
Chapitre 2 : Étude conceptuelle ISAEG 2024

INVESTISSEUR :
h) Diagramme de cas d’utilisation « Gérer publicité»

Figure 11 : Raffinement du cas d’utilisation « gérer publicité»

 Description textuelle du raffinement « ajouter publicité » :

Cas d’utilisation Ajouter une publicité par l'investisseur
Acteur Investisseur
Pré condition. L'investisseur est connecté à son compte sur le site.

Post condition La publicité est ajoutée avec succès dans le système.

Scénario de base 1. Le système affiche les emplacements disponibles pour les publicités
sur le site.
2. L'investisseur sélectionne l'emplacement où il souhaite afficher sa
publicité.
3. L'investisseur télécharge le fichier de la publicité (image, vidéo, etc.).
4. L'investisseur soumet sa demande.
5. Le système enregistre la publicité dans le système et l'affiche selon les
paramètres sélectionnés.
5. Le système affiche un message de confirmation de l'ajout de la
publicité.
Scénario d’exception L'investisseur annule l'ajout de publicités.
Tableau 12 : Description du raffinement « ajouter publicité »

23
 Chapitre 2 : Étude conceptuelle ISAEG 2024

 Description textuelle du raffinement « modifier publicité » :

Cas d’utilisation Modifier publicité
Acteur Investisseur
Pré condition L'investisseur est connecté à son compte sur le site.
Post condition Publicité modifié
Scénario de base 1.. Le système affiche les publicités actuellement disponibles pour
l'investisseur.
2. L'investisseur sélectionne la publicité qu'il souhaite modifier.
3. L'investisseur effectue les modifications nécessaires sur la publicité
(changement d'image, de texte, etc.).
4. L'investisseur soumet les modifications.
5. Le système enregistre les modifications apportées à la publicité.
6. Le système affiche un message de confirmation de la modification de
la publicité.
Scénario d’exception Si Champs vides ou bien erronés le système affiche un message d’erreur.
Tableau 13 : Description du raffinement « modifier publicité »

 Description textuelle du raffinement « supprimer publicité » :

Cas d’utilisation Supprimer publicité
Acteur Investisseur
Précondition. L'investisseur est connecté à son compte sur le site.

Postcondition La publicité est supprimée avec succès du système.

Scénario de base 1. Le système affiche les publicités actuellement disponibles pour

l'investisseur.
2. L'investisseur sélectionne la publicité qu'il souhaite supprimer.
3. L'investisseur confirme la suppression.
4. Le système supprime la publicité sélectionnée du système.
5. Le système affiche un message de confirmation de la suppression de la
publicité.
Scénario d’exception L'investisseur annule le processus de suppression.
Tableau 14 : Description du raffinement « supprimer publicité »

24
Chapitre 2 : Étude conceptuelle ISAEG 2024

III. Digramme de séquances

Dans cette section, nous allons présenter les diagrammes de séquence de notre
application. Les diagrammes de séquences sont la répresentation graphique des
interactions entre les acteurs et le système selon un ordre chronologique dans la
formulation UML.

1. Diagramme de séquence «Authentification»

L’authentification est une tache primordiale en vue de limiter l’accés et sécuriser
notre application.

Figure 12 : Diagramme de séquence du cas « authentification »

25
Chapitre 2 : Étude conceptuelle ISAEG 2024

2. Diagramme de séquence «ajouter produit»

Figure 13 : Diagramme de séquence du cas « ajouter un produit »

26
Chapitre 2 : Étude conceptuelle ISAEG 2024

3. Diagramme de séquence «modifier produit»

Figure 14 : Diagramme de séquence détaillé du cas « modifier un produit »

27
Chapitre 2 : Étude conceptuelle ISAEG 2024

4. Diagramme de séquence «supprimer un produit»

Figure 15 : Diagramme de séquence détaillé du cas « supprimer un produit »

28
Chapitre 2 : Étude conceptuelle ISAEG 2024

5. Diagramme de séquence «effectuer commande»

Figure 16 : Diagramme de séquence détaillé du cas « effectuer commande »

IV. Digramme de classes

Le diagramme de classe est une description statique du système focalisé sur le concept
de classe et d’association. Une classe representé un ensemble d’objets qui possèdent des
propriétés similaires et des comportements communs décrivant en terme d’attributs et
d’opérations.
Une association consiste à présenter les liens entre les instances de classe. Durant
cette section, nous allons présenter les diagrammes de classes entités à notre application.

29
Chapitre 2 : Étude conceptuelle ISAEG 2024

Figure 17 : Diagramme de classes

30
Chapitre 3 : Réalisation et Outillage ISAEG 2024

Chapitre 3 : Réalisation et
Outillage

31
Chapitre 3 : Réalisation et Outillage ISAEG 2024

Introduction
Nous consacrons ce chapitre pour la présentation des différentes technologies utilisées dans
notre projet puis les interfaces hommes machines constituants notre application.

1. Environnement de travail matériel

Notre application a été développée sur un ordinateur portable possédant les caractéristiques
suivantes :
Marque ASUS
Processeur Intel(R) Core(TM) i7-
6500U
Disque dur 222Go
RAM 8Go
Système d’exploitation Windows 10
Professionnel
Tableau 15 : Environnement de travail matériel

2. Les technologies
Dans notre choix de technologies utilisées dans la conception de sites Web, nous avons
choisi plusieurs technologies modernes, car nous voulions activer plus d'une technologie
nécessaire pour obtenir plus de connaissances :
 HTML5 :
Le HTML5, pour HyperText Markup Langage 5, est une version du célèbre format HTML
utilisé pour concevoir les sites Internet. Celui-ci se résume à un langage de balisage qui sert à
l'écriture de l'hypertexte indispensable à la mise en forme d'une page Web. Lancée en octobre
2014, cette version HTML5 apporte de nouveaux éléments et de nouveaux attributs par
rapport à la version précédente.

Figure 18 : logo HTML [3]

32
Chapitre 3 : Réalisation et Outillage ISAEG 2024

• JavaScript :
JavaScript se distingue des langages serveurs par le fait que l'exécution des tâches est
opérée par le navigateur lui-même, sur l'ordinateur de l'utilisateur, et non sur le serveur Web.
Il s'active donc généralement sur le poste client plutôt que côté serveur.
Le langage JavaScript offre en effet la possibilité d'exécuter un code sans être contraint de
recharger une page web. En cela, il joue un rôle dans l'amélioration de la rapidité de
chargement des pages, un critère d'ergonomie et de référencement de plus en plus important.
Il existe de nombreux Framework JavaScript tel que : AngularJS, Angular, ReactJS,
NodeJS, JQuery ...etc.

Figure : logo JavaScript [3]

 AJAX :
AJAX est un acronyme qui désigne Asynchrones Javascript And XML (qui signifie
littéralement Javascript et XML Asynchrones). Il ne s'agit pas d'une technologie en soi mais
plutôt d'un ensemble de technologies qui permettent la mise à jour du contenu d'une page
Web d'une manière rapide et sans chargement complet de celle-ci.
AJAX s'appuie sur les technologies suivantes:
▪ Javascript et DOM pour le traitement.
▪ XML ou JSON pour l’extraction des données (le contenu à afficher).
▪ HTML e 6 Aucune source spécifiée dans le document actif.
▪ Aucune source spécifiée dans le document actif. CSS pour la présentation.

Figure 19 : logo AJAX [3]

33
Chapitre 3 : Réalisation et Outillage ISAEG 2024

 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".

Figure 20 : Logo Bootstrap [3]

 PHP :
Le PHP, pour HyperText Préprocesseur, désigne un langage informatique, ou un langage de
script, utilisé principalement pour la conception de sites web dynamiques. Il s'agit d'un
langage de programmation sous licence libre qui peut donc être utilisé par n'importe qui
de façon totalement gratuite.
Créé au début des années 1990 par le Canadien et Groenlandais RASMUSLERDOLF, Le
langage PHP est souvent associé au serveur de base de données MySQL et au serveur
Apache. Avec le système d'exploitation Linux, il fait partie intégrante de la suite de
logiciels libres LAMP.

Figure 21 : Logo PHP [3]

34
 Chapitre 3 : Réalisation et Outillage ISAEG 2024

3. Les outils
 VISUAL STUDIO CODE :

Visual Studio Code est un éditeur de code extensible développé par Microsoft pour
Windows, Linux et MACOS. Ses fonctionnalités incluent le débogage, la mise en évidence de
la syntaxe, la complétion intelligente du code, les extraits de code, la refactorisation du code
et l'intégration de Git.

Figure 22 : Logo Visual basic code[3]

 WampServer :

WampServer est une plate-forme de développement Web sous Windows pour des applications
Web dynamiques à l’aide du serveur Apache2, du langage de scripts PHP et d’une base de
données MySQL. Il possède également PHPMyAdmin pour gérer plus facilement vos bases
de données.

Figure 23 : Logo WampServer [3]

 STAR UML. :

STARUML est un logiciel de modélisation UML (Unified Modeling Langage) open source.
Étant simple d’utilisation, nécessitant peu de ressources système, supportant UML 2, ce
logiciel constitue une excellente option pour une familiarisation à la modélisation.

35
Chapitre 3 : Réalisation et Outillage ISAEG 2024

Figure 24 : Logo STARUML [3]

4. Environnement de rédaction de rapport

Microsoft office : est un ensemble de programmes informatiques propriétaire de la société
Microsoft fonctionnant avec les plates-formes fixes et mobiles. Elle s'installe sur ordinateur
et fournit une suite de logiciels comme : Word, Excel, PowerPoint, OneNote, Outlook.

Figure 25 : Logo Microsoft Office[3]

• Microsoft Word:
Est un logiciel de traitement de texte publié par Microsoft. La version la plus récente est
Word 2019.

Figure 26 : Logo Microsoft Word [3]

36
Chapitre 3 : Réalisation et Outillage ISAEG 2024

5. Environnement de conception et de réalisation de la

présentation
• Microsoft PowerPoint :
Est un logiciel de présentation édité par Microsoft. Il fait partie de la suite Microsoft Office.
Microsoft PowerPoint fonctionne sous Windows et Mac OS.

Figure 27 : Logo Microsoft PowerPoint [3]

6. Démonstration des interfaces

Cette partie dénombre la présentation des Scénarios applicatifs de l’application. Nous allons
présenter dans ce qui suit, les imprimes-écran des principales interfaces réalisées dans notre
application.

a) Interface page d’accueil :

Figure 28 : Interface page d’accueil

37
Chapitre 3 : Réalisation et Outillage ISAEG 2024

C’est l’interface principale, elle s’affiche lors du lancement de notre application et elle est
sensée à capter l’attention des utilisateurs à l’ensemble des fonctionnalités de l’application.

b) Interface d’authentification :

Figure 29 : Interface Authentification

Cette interface est mise en disposition à l’admin, user et investisseur pour qu’ils puissent
s’authentifier. Il suffit de saisir leurs login (email ou User Name) et Mot de passe.
c) Interface s’inscrire :

Figure 30 : Interface gérer les clients et investisseurs

L’interface de l’administration permet de gérer la liste des utilisateurs et des investisseurs.

38
Chapitre 3 : Réalisation et Outillage ISAEG 2024

d) Interface profil client:

Figure 31 : Interface profil

L'utilisateur et l'investisseur termineront l'enregistrement de leur compte.

e) Interface listes de produits

Figure : Interface liste de produits

Liste des produits proposés par la boutique.

39
Chapitre 3 : Réalisation et Outillage ISAEG 2024

f) Interface d’un produit :

Figure 32 : Interface produit

Cette interface ci-dessus montre les détails de produit qui a été sélectionné par le client
pour mieux et connaître définir les détails de produit.
g) Interface contact admin :

Figure 33 : Interface Contact

Cette interface présente le page de contact de boutique.

40
Chapitre 3 : Réalisation et Outillage ISAEG 2024

h) Interface authentification : Administrateur

Figure 34 : Interface authentification pour l’Administrateur

L’interface ci-dessus présente l’authentification pour l’administrateur.
i) Interface d’ajout nouvelle produit :

Figure 35 : Interface d’ajout nouvelle produit

Cette interface d’ajout nouvelle produit par l’administrateur.

41
Chapitre 3 : Réalisation et Outillage ISAEG 2024

Conclusion
En conclusion, notre projet présente un environnement de travail robuste, tant sur le plan
logiciel que matériel, et les résultats obtenus démontrent une interface utilisateur conviviale et
efficace. À l'avenir, l'intégration de solutions de paiement sécurisé pourra améliorer
considérablement la sécurité de l'application, assurant ainsi son succès et sa durabilité.

42
Conclusion générale Et perspectives ISAEG 2024

Conclusion générale Et
perspectives

43
Conclusion générale Et perspectives ISAEG 2024

Ce projet nous permet de mettre en pratique notre esprit d'apprentissage, d'analyse et de

critique et utilisez certaines de nos connaissances et les connaissances acquises dans le
processus d'apprentissage lors de la formation ISAEG,

Ce stage a été une expérience riche qui nous a non seulement permis d'investir utiliser les
connaissances acquises au cours des trois années d'études l’Institut Supérieur
d’Administration des Entreprises de Gafsa peut également améliorer nos compétences au
niveau du développement et acquérir de nouvelles compétences informatiques.

Notre sujet consiste à concevoir et réaliser une application web qui permet de favoriser et
faciliter l'expérience d'achat en ligne pour les utilisateurs dans mon site« AlGiNET ».

Durant la réalisation de cette application, nous avons pu apprendre à manipuler les outils
de développement «VisualStudio », «WampServer » et à pratiquer le langage «JavaScript»,
«HTML5» et «PHP».

44
WEBOGRAPHIE ISAEG 2024

WEBOGRAPHIE
[1] https://fr.wikipedia.org/wiki/Langage_de_modelisation
[2] Exigences non fonctionnelles : types, exemples et approches - Visure Solutions
[3] https://fr.wikipedia.org/wiki/UML_(informatique)
 ‫الجمهورية التونسية‬
République Tunisienne
Ministère de l’enseignement ‫وزارة التعليم العالي والبحث‬
Supérieur et de la recherche
‫العلمي‬
Scientifique
Université de Gafsa ‫جامعة قفصة‬
Institut Supérieur
D'Administration des Entreprises ‫المعهد العالي إلدارة‬
de Gafsa
‫المؤسسات بقفصة‬

Conception et développement d'un site web

E-commerce « AlGiNET »

:‫الخالصة‬

‫تقرير لمشروع تخرج قدم في المعهد العالي إلدارة المؤسسات بقفصة يتيح‬
‫للزبائن الراغبين في التسوق من اإلطالع على متجري االلكتروني و تصفح‬
‫أين تتم عملية الشراء بصفة آلية‬,‫المنتجات‬
: Résumé
Un rapport d’un projet de fin d’études présenté à l’Institut
supérieur d’administration des entreprises de Gafsa permet aux
clients souhaitant faire des achats de consulter ma boutique en
ligne et de parcourir les produits, où le processus
d’achat se fait automatiquement
Abstract:
A report of a graduation project presented at the Higher Institute of Business
Administration of GAFSA allows customers who want to make purchases to
check out my online store and browse the products, where the purchasing
process is done automatically

Réalisé par : Encadrée par :

ZINA AKERMI Mme. NAJWA
DELLALI

ISAEG, Rue Elhoucine Ben Gadour Sidi Ahmed Zarroug.Gafsa

Tél : 76 211 440