PF Cover V4

cv
Création
d’un site web
e-commerce
Projet de fin d’étude
Année Universitaire :
2021-2022
Rapport du projet
Ce Rapport comporte les différentes phases et
étapes de la conception du site jusqu’à sa
création physique.
Filière : Systèmes d’information- Elaboré par :

Option génie logiciel
Taif Zaineb & Badr Bakkali
Niveau : 3ème année
Encadré par : Mme Najlae Amourgha
Promotion : 2019-2022
Projet Lapcom
1
2
- Dédicace
-
- On dédie ce projet de fin d’étude à :
- A nos parents pour les sacrifices et efforts déployés à notre égard ainsi que pour leur
patience, confiance et amour.
- A nos familles respectives qui n'ont jamais cessé, de nous soutenir tout au long de nos
études.
- A tous nos enseignants, nous sommes très reconnaissants envers leur soutien et leurs
conseils précieux tout au long de ces années études.
- A nos chers amis et collègues, pour tous les moments d’échange, d’entraide et de
soutien.
- A toute personne ayant participé de près ou de loin à la réalisation de ce travail.
- On est reconnaissant envers l’intérêt et le soutien que toutes ses personnes nous ont
fourni et on les remercie énormément. Avec tous mes souhaits de réussite, bonheur et
prospérité.
-
Projet Lapcom
2
3
Remerciements
Projet Lapcom
3
4
Résumé
4 Projet Lapcom
Sommaire
Remerciements ..................................................................................................................... 2
Résumé ................................................................................................................................. 3
CHAPITRE I : Présentation du projet ................................................................................110
I. Introduction : .....................................................................................................110
II. Présentation générale du projet : ........................................................................110
1. Introduction au concept de l’e-commerce : .....................................................110
a. Définition de l’e-commerce : .......................................................................110
b. Définition d’une boutique en ligne : ............................................................110
2. Présentation du projet : ................................................................................... 11
a. Présentation générale du sujet projet : ........................................................121
b. Objectifs du projet : ....................................................................................121
c. Etude de l’existant du projet : .....................................................................132
d. Critique de l’existant : .................................................................................143
e. Solutions proposées : ...................................................................................143
III. Conclusion : ....................................................................................................154
CHAPITRE II : Conception ................................................................................................165
I. Introduction : .....................................................................................................165
II. Méthode de Modélisation : .................................................................................165
1. Définition de l’UML :1 ......................................................................................165
a. Diagramme de cas d’utilisation : .................................................................165
1. Définition diagramme de cas d’utilisation : 2.........................................165
1.1. Identifications des acteurs de notre système : .....................................176
1.2. Diagramme de cas d’utilisation générale du système : .........................187
2. Détails Diagramme de cas d’utilisation : ................................................ 18
2.1. Diagramme de cas d’utilisation « Gérer les produits » ............................ 18
2.2. Diagramme de cas d’utilisation « Gérer les utilisateurs » ........................210
2.3. Diagramme de cas d’utilisation « Gérer le panier » .................................221
2.4. Cas d’utilisation « Evaluer les produits » .................................................232
2.5. Cas d’utilisation « Gérer les produits » ...................................................243
2.6. Cas d’utilisation « S’authentifier » ..........................................................254
2.7. Cas d’utilisation « S’inscrire » .................................................................276
2.8. Cas d’utilisation « Consulter les produits » .............................................276
2.9. Diagramme de cas d’utilisation « Gérer marques » .................................287
5 Projet Lapcom
b. Diagrammes de séquence système (simplifié) ............................................... 29

1. Définition diagramme de séquence ........................................................... 29
c. Diagrammes de séquence (détaillé) ..............................................................321
d. Diagramme de classe : .................................................................................343
1. Définition diagramme de classe : 4 ............................................................343
2. Diagramme de classe globale : ..................................................................343
3. Schéma de la base de données : ................................................................354
III. Conclusion : .........................................................................................................354
CHAPITRE III : Conception architecturale et Design ..........................................................365
I. Introduction : .....................................................................................................365
II. Présentation théorique de l’ensemble du projet : ................................................365
1. Description du projet : ....................................................................................365
2. Mise en place de la stratégie marketing de Lapcom : .........................................365
a. Détermination de la cible et des objectifs pour la stratégie e-commerce de
Lapcom ..............................................................................................................365
1. Définition de la cible : ...............................................................................365
2. Définition des offres de produits : .............................................................376
3. Définition des objectifs : ...........................................................................376
b. Détermination du périmètre du projet : ......................................................387
3. Optimisation de l’Expérience utilisateur :........................................................ 37
a. Définition et rôle de l’expérience utilisateur 5 .............................................387
b. L’expérience utilisateur et l’e-commerce (Lapcom) 6 ................................... 38
4. Ergonomie et web design de Lapcom : ............................................................. 38
a. Ergonomie de Lapcom : ............................................................................... 38
b. Web design de Lapcom : .............................................................................. 39
5. L’identité visuelle de Lapcom : .......................................................................410
a. Charte graphique (les couleurs) : ................................................................410
b. Typographie ................................................................................................432
c. Logo : ...........................................................................................................443
6. Responsive Web Design-Lapcom ....................................................................454
III- Présentation Conceptuelle et technique de l’ensemble du projet : ...................465
1. Conception de la structure générale du site.....................................................465
a. Conception de l’arborescence de Lapcom : ....................................................465
1. Architecture générale de Lapcom : ................................................................465
2. User Flow : ...................................................................................................466
3. Exemples d’application de l’ergonomie : .......................................................476
6 Projet Lapcom
b. Wire framing : ...........................................................................................487

2. Présentation technique :..................................................................................469
IV- Présentation graphique de l’ensemble du projet : ...........................................510
1. Présentation des interfaces utilisateurs : .........................................................510
a. La page d’Accueil : .....................................................................................510
b. La page de la boutique : ..............................................................................521
c. La page du détail produit : ..........................................................................532
d. La page du Blog : ........................................................................................543
e. La page d’un article : ..................................................................................554
f. La page A Propos de nous : .........................................................................565
g. La page Contactez-nous : ............................................................................576
h. La page FAQs : ...........................................................................................587
i. La page de connexion et d’inscription : ..................................................... 5958
j. La page des favoris :..................................................................................... 58
k. La page du panier : ...................................................................................... 59
l. La page de paiement : ..................................................................................609
m. La page d’erreur : ...................................................................................610
n. La page de réinitialisation du mot de passe : ...............................................610
o. La page d’aide :...........................................................................................621
p. La page du tableau de bord : .......................................................................621
2. Présentation des interfaces Administrateur : ..................................................... 62
a. La page du tableau de bord : .......................................................................643
b. Exemples de pages liste : .............................................................................654
c. Exemples de formulaires : ...........................................................................665
d. Pages de connexion et d’inscription :...........................................................665
V. Conclusion : .....................................................................................................676
CHAPITRE IV : Conception architecturale et Design ........................................................... 36
I. Introduction : .....................................................................................................687
II. Réalisation du projet : ........................................................................................687
1. Etude architecturale du back end : .................................................................687
a. Définition de L’architecture MVC 11 ..........................................................687
b. Avantage de l’architecture MVC : ............................................................... 68
2. Etude technique : ............................................................................................. 68
a. Environnement de réalisation : .................................................................... 69
1. Matériels de base ...................................................................................... 69
2. Langages et outils utilisés : ........................................................................710
7 Projet Lapcom
3. Etude Fonctionnelle : ......................................................................................721

a. Choix et fonctionnement de Laravel : ..........................................................721
1. Choix de Laravel .......................................................................................721
2. Avantages de Laravel : ..............................................................................721
3. Fonctionnalités de Laravel ........................................................................743
4. Fonctionnement de Laravel .......................................................................754
5. Paquets utilisés :.......................................................................................765
III. Conclusion : ....................................................................................................765
CHAPITRE V : Méthodologie et Outils de travail ...............................................................776
I. Introduction : .........................................................................................................776
II. Méthodologie de travail :.......................................................................................776
1. Cycle de Développement : ...............................................................................776
a. Cycle spirale : .................................................................................................776
b. Avantage du cycle de développement incrémentale : ......................................776
2. Outils de gestion du flux de travail : ...............................................................787
III. Conclusion :...................................................................................................... 78
Conclusion : ........................................................................................................................ 79
Annexe :.............................................................................................................................810
I. Diagrammes de séquence simplifié :....................................................................810
1. Authentification : ...................................................................................................810
2. Inscription : .............................................................................................................821
3. Ajout commerçant : ................................................................................................832
4. Ajout produit : ........................................................................................................843
5. Supprimer produit : ...............................................................................................854
6. Modifier commande : .............................................................................................865
II. Diagramme de séquence (détaillé) ......................................................................876
1. Authentification : .....................................................................................................876
2. Inscription : ..............................................................................................................887
3. Ajouter commerçant : ..............................................................................................88
4. Ajouter produit : ........................................................................................................89
5. Rechercher un produit : ...........................................................................................910
6. Supprimer produit : .................................................................................................921
7. Modifier commande : ..............................................................................................932
Références .........................................................................................................................943
8 Projet Lapcom
Tableaux et figures
Figure 1: Diagramme de cas d'utilisation général ......................................................................187

Figure 2: Diagramme de cas d'utilisation « Gérer les produits » ...............................................198
Figure 3: Diagramme de cas d'utilisation « Gérer les utilisateurs » ............................................20
Figure 4: Cas d’utilisation « Gérer le panier » ..............................................................................21
Figure 5: Diagramme de cas d'utilisation « Evaluer les produits » ............................................232
Figure 6: Diagramme de cas d'utilisation « gérer produit » .......................................................243
Figure 7: Diagramme de cas d'utilisation « gérer marque » ......................................................287
Figure 8 : Diagramme de séquence d'authentification ..............................................................309
Figure 9: Diagramme de séquence d'inscription ......................................................................3130
Figure 10: : Diagramme de séquence détaillé d'authentification ................................................31
Figure 11: Diagramme de séquence détaillé d'inscription .........................................................332
Figure 12: Diagramme de classe global .......................................................................................343
Figure 13: schéma général de la base de données .....................................................................354
Figure 14: Charte graphique de Lapcom .......................................................................................40
Figure 15: Typographie de Lapcom .............................................................................................432
Figure 16: Résultat du logo Lapcom.........................................................................................443
Figure 17: Présentation du logo Lapcom .................................................................................443
Figure 18: Responsive Web design Lapcom ............................................................................454
Figure 19: Architectures globale de Lapcom ...........................................................................465
Figure 20 : Diagramme du User Flow ......................................................................................476
Figure 21: Fil d'Arian de la page F.A.Q ...................................................................................476
Figure 22:Maquette de la page Boutique ...................................................................................498
Figure 23:Maquette de la page d'accueil ....................................................................................498
Figure 24:Maquette de la page d'aide ........................................................................................498
Figure 25: La page d'accueil ...........................................................................................................50
Figure 26: Page de la Boutique ...................................................................................................51
Figure 27: La page du détail de produit ...................................................................................532
Figure 28 : La page du blog .......................................................................................................543
Figure 29: La page d'un article .................................................................................................554
Figure 30 : La page d'à propos de nous....................................................................................565
Figure 31 : La page de contact ..................................................................................................576
Figure 32 : La page FAQs ..........................................................................................................587
Figure 33: La page de connexion et d'inscription....................................................................598
Figure 34: La page des Favoris .................................................................................................598
Figure 35: La page du panier ....................................................................................................609
Figure 36: La page de paiement ................................................................................................609
Figure 37: La page d'erreur 404 .................................................................................................60
Figure 38: La page de réinitialisation du mot de passe .............................................................60
Figure 39 : La page d'aide ...........................................................................................................61
Figure 40: Page du tableau de bord du client ............................................................................61
Figure 41: Tableau de bord de l'administrateur .....................................................................643
Figure 42: Barre de navigation du tableau de bord admin ....................................................643
9 Projet Lapcom
Figure 43: Listes des produits ...................................................................................................654

Figure 44: Liste des commandes ...............................................................................................665
Figure 45: Liste des clients ........................................................................................................665
Figure 46: Formulaire de modification du profil admin.........................................................665
Figure 47: Formulaire d'ajout d'un client................................................................................665
Figure 48: Formulaire d'inscription .........................................................................................665
Figure 49: Formulaire de connexion.........................................................................................665
Figure 50: Architecture Logique MVC ....................................................................................698
Tableau 1: Matériels de base .....................................................................................................699
Figure 51: Interface de notre application Notion ......................................................................77
Figure 52: Diagramme de séquence d'authentification.............................................................80
Figure 53: Diagramme de séquence d’inscription .....................................................................81
Figure 54: Diagramme de séquence d’ajout client ....................................................................82
Figure 55: Diagramme de séquence d’ajout produit.................................................................83
Figure 56: Diagramme de séquence de suppression produit ....................................................84
Figure 57: Diagramme de séquence de modification commande .............................................85
Figure 58: Diagramme de séquence détaillé d'authentification ...............................................86
Figure 59: Diagramme de séquence détaillé d’inscription........................................................87
Figure 60: Diagramme de séquence détaillé d’ajout commerçant ...........................................88
Figure 61: Diagramme de séquence détaillé d’ajout produit ...................................................89
Figure 62: Diagramme de séquence détaillé de recherche produit ..........................................90
Figure 63: Diagramme de séquence détaillé de suppression produit ......................................91
Figure 64: Diagramme de séquence détaillé de modification commande ...............................92
Projet Lapcom
10
CHAPITRE I : Présentation du projet
I. Introduction :
Ce chapitre comprend une description et une explication du cadre général du projet ainsi
d’une présentation détaillée et globale du projet.
II. Présentation générale du projet :
1. Introduction au concept de l’e-commerce :
a. Définition de l’e-commerce :
Le e-commerce ou le commerce électronique, est représenté comme un sous ensemble

de l’e-business, comprenant l’achat, la vente et l’échange de biens et de services sur les
réseaux informatiques (comme internet) et à travers lequel sont exercées les opérations
ou les conditions de vente par voie électronique.
Contrairement à l’une des croyances répandues, le commerce électronique n’est pas

uniquement sur le web. En fait, le commerce électronique était bien présent dans les
transactions entre les entreprises avant le web dans les années 70 par l’intermédiaire de
l’EDI (Electronic Data Interchange) à travers des VAN (Value-Added Networks).
On ajoute à ceci que le E-commerce peut bien être réparti en quatre catégories
principales bien distinctes : B2B, B2C, C2B et C2C.
b. Définition d’une boutique en ligne :
Grâce à une boutique virtuelle, un prospect ou client peut bien voir plus aisément, choisir
et payer les articles dont il est intéressé comme au niveau d’un magasin réel.
Pour acheter un produit de cette boutique en ligne, il suffit à l’internaute de choisir les
produits et articles désirés puis de les mettre dans un panier d'achat.
Projet Lapcom
11
L'acheteur peut, ensuite, remplir un bon et payer sa commande par le moyen de paiement
qui lui convient le plus.
Ainsi, sa commande lui sera livrée en fonction de ses choix et selon les modalités et
réglementations définies par le ou les responsable(s) de la boutique.
2. Présentation du projet :
a. Présentation générale du sujet projet :
Le sujet de notre projet de fin d’étude consiste à développer une boutique en ligne afin
de présenter, de commercialiser et de livrer nos divers produits et articles à nos clients,
que nous estimons devenir plus nombreux et plus actifs.
L'objectif de ce mémoire est de concevoir et de développer un site web commercial qui

permet l’inscription des visiteurs et prospects et de les convertir en acheteurs actifs et
en clients fidèles, ainsi que le suivi des commandes effectuées sur la plateforme, la
gestion des méthodes de livraison, du paiement en ligne et aussi le suivi des livraisons.
b. Objectifs du projet :
L’objectif du présent projet consiste à mettre en œuvre et à développer un site web

dynamique et pratique d’une boutique de matériels audiovisuels et informatiques et qui
permettra de réaliser les opérations suivantes :
 Gérer les relations avec les clients,

 Gérer les relations avec les fournisseurs,
 Gérer les commandes,
 Mettre en place des promotions,
 Gérer les produits (ajouter, modifier ou supprimer des articles) etc.
En effet, ce site donnera aux internautes la possibilité de chercher une grande gamme de
produits, de créer leur compte, d’effectuer leurs demandes en ligne, et de recevoir une
confirmation immédiate.
Projet Lapcom
12
En plus, les internautes peuvent aussi consulter en ligne le catalogue et toutes ses
nouveautés.
c. Etude de l’existant du projet :
Pour se procurer et acheter un équipement de communication tel un téléphone, un

ordinateur portable ou autre matériel, le client devrait se déplacer au local ou au point
de vente de la société afin de chercher une offre qui satisfait ses besoins et attentes.
Ses déplacements dans certains cas peuvent être inutiles, fatigants et représentant même
un gaspillage de temps pour lui.
D’un autre côté, même le vendeur ne trouve pas toujours moyen de présenter ses
annonces de vente, d’offres et de services à un grand public intéressé, à l’exception des
supports traditionnels tels que les journaux ou les affiches.
Par conséquent, un moyen fiable, pratique et automatisé permettant d’informer un grand

nombre de prospects et de clients des offres de vente et des services des vendeurs est
bien intéressant et nécessaire pour les 2 parties.
On pourrait citer d’autres divers traitements représentant aussi des sources de

problématiques, adoptant les méthodes traditionnelles de travail :
 Le règlement des factures se fait en espèce ou par chèque, sur place.

 L’enregistrement des clients se fait manuellement sur papier.
 Les produits sont classés par catégories (caméra numérique, caméra de
surveillance et matériel sonore) et par sous-catégories non liées et non
hiérarchisées, ce qui rend la recherche plus pénible et compliquée.
 Les fiches et documents sont nombreux et mal organisés. Vu l'accroissement de
la technologie Internet, l'achat en ligne est devenu une nécessité incontournable
pour les commerçants.
Projet Lapcom
13
d. Critique de l’existant :
La solution actuelle est manuelle, posant ainsi diverses problématiques, à savoir :
 L'abondance des documents dans l'entreprise pouvant ralentir considérablement

ses services.
 Risque de mélanger les fichiers et documents ; ce qui peut être contraignant et
fatal.
 Le suivi en ligne des clients et des fournisseurs (suivi de livraison, des
commandes, des réclamations etc.).
 La perte de la clientèle est possible, surtout quand le traitement de leurs
demandes traîne ou prend beaucoup de temps pour être livré.
e. Solutions proposées :
Grâce à Internet, nous nous apercevons de nouvelles perspectives de développement qui

apparaissent au fur et à mesure dans l'élargissement du marché économique.
La création d’un site Internet a pour but de valoriser l'image de l’entreprise, de ses
prestations de service et de faire des économies.
L'utilisation d'Internet, comme segment de communication de masse, permet également de

baisser les coûts marketing et d'autres frais.
En outre, avec la transmission du haut débit et la sécurisation augmentée des moyens de

paiement en ligne, la confiance des utilisateurs en ce qui concerne l'e-commerce se présente
de plus en plus croissante. D’où la plupart des personnes adultes l’utilisent de nos jours
pour faire des achats.
Les consommateurs et les entreprises s'orientent de plus en plus vers les boutiques en ligne
qui permettent la comparaison, la disponibilité des produits et la vérification des prix
favorisant l’économie considérable du temps de la personne.
Ce projet consiste donc à la mise en place d’un site Web dynamique qui gère la
commercialisation des matériels audiovisuels. Ceci est possible à travers des catalogues en
ligne proposant ces produits aux meilleurs prix et offres par rapport aux concurrents.
Projet Lapcom
14
L’entreprise ou la société n’aura donc qu’à agencer ses produits et bien sûr de mettre à jour
sa base de données.
Les clients peuvent bien évidemment consulter le site après leur inscription, et de
commander leurs produits, qui sont par la suite livrés à leur adresse de livraison. Cette
boutique en ligne permettra d’offrir beaucoup des services à savoir :
 · Recherche de produits,
 · Consultation de catalogues de produits,
 · Lancer une commande en ligne, etc.
Cette application Web permettra de cibler une nouvelle catégorie de clientèles (locale et
internationale), et d’offrir une meilleure qualité de services en communication et en
commerce. Ce site devra contenir deux interfaces séparées : partie admin et client qui seront
expliquées ultérieurement.
III. Conclusion :
Ce premier chapitre est introductif vous donnant une vision globale sur le projet et les
tâches que je dois réaliser pour atteindre les objectifs du cahier de charges. Le chapitre
suivant comportera une étude préalable des sites e-commerce présents sur le marché.
Projet Lapcom
15
CHAPITRE II : Conception
I. Introduction :
Dans ce chapitre du rapport va expliciter la méthode de conception et modélisation ainsi

que les différents diagrammes reflétant les fonctionnalités, structures et enchaînements du
système.
II. Méthode de Modélisation :

Pour la Méthodologie de conception, nous avons utilisé la méthode de modélisation unifié
« UML ».
1. Définition de l’UML :1
L'UML (Unified Modeling Language ou Langage de modélisation unifiée en français) est

un langage graphique de modélisation informatique. Ce langage est désormais la référence
en modélisation objet, ou programmation orientée objet. Cette dernière consiste à
modéliser des éléments du monde réel (immeuble, ingrédients, personne, logos, organes du
corps...) ou virtuel (temps, prix, compétence...) en un ensemble d'entités informatiques
appelées « objet ».
2. Les diagrammes UML dans la conception du projet :
a. Diagramme de cas d’utilisation :
1. Définition diagramme de cas d’utilisation : 2
Au cours du processus de conception basé sur la méthode de modélisation UML, les

diagrammes de cas d'utilisation sont parmi les diagrammes les plus importants qui ont pour
rôle de traduire les besoins utilisateurs contribuant à formaliser la définition des besoins et
en général des différentes fonctionnalités du système.
Projet Lapcom
16
1.1 Identifications des acteurs de notre système :
Les acteurs qui interagissent avec le système sont :
L’administrateur : c’est le responsable du bon fonctionnement du site et qui gère

l’intégralité des services et entités interagissant avec le système.
L’internaute : c’est la personne qui visite le site pour consulter, naviguer et rechercher
sans inscription.
Le client : c’est l’utilisateur inscrit qui consulte les produits disponibles, il peut effectuer
des recherches, des achats, des réclamations, abonnement...
Le commerçant : c’est l’utilisateur qui utilise le site pour promouvoir ses produits et
informe les internautes de ce qui se rapporte à ses produits : promotions …
Projet Lapcom
17
1.2 Diagramme de cas d’utilisation générale du système :
Figure 1 : Diagramme de cas d'utilisation général

Projet Lapcom
18
2. Détails Diagramme de cas d’utilisation :
Explication :
A l’exception de l’internaute qui peut consulter le catalogue des produits et rechercher sans
authentification, cette dernière est obligatoire pour tous les autres acteurs principaux.
-Le client doit s'authentifier pour pouvoir : passer des commandes, évaluer des produits,
…
-L’administrateur peut, après l’authentification, gérer les utilisateurs, gérer les produits et
traiter les factures des commerçants, …
Ci-dessous- quelques exemples de cas d’utilisation détaillés :
2.1 Diagramme de cas d’utilisation « Gérer les produits »
Figure 2 : Diagramme de cas d'utilisation « Gérer les produits »

Projet Lapcom
19
Acteur principal : Administrateur

Objectif : Ce cas d’utilisation vise à décrire toutes les étapes relatives à l’ajout d’un
produit
Préconditions : L’administrateur doit être authentifié

Poste-conditions : Un nouvel article est ajouté à la liste des produits
Scénario nominal :
1. L’administrateur demande au système la page de mise à jour de ses produits

2. Le système affiche la page ainsi que la liste des produits et des différentes
opérations possibles
3. L’administrateur choisit l’opération d’ajout
4. Le système affiche le formulaire d’ajout
5. L’administrateur remplit le formulaire et valide
6. Le système met à jour la liste des produits et par défaut la liste les produits les
plus récentes
Scénario alternatif :
A1 : Modifier un produit
Aller à l’opération qui suit 2
3- l’administrateur sélectionne un produit et choisit l’opération de modification
4- Aller à l’opération qui suit 4
A2 : Supprimer un produit
3- l’administrateur sélectionne un produit et choisit l’opération de suppression
4- Le système met à jour la base de données
Scénario d’exception :
E1 : Fermeture de session
3- le système ferme la session après une période d’inactivité et invite l’administrateur à

s’authentifier à nouveau
Projet Lapcom
20
2.2. Diagramme de cas d’utilisation « Gérer les utilisateurs »
Figure 3 : Diagramme de cas d'utilisation « Gérer les utilisateurs »
Le cas d’utilisation « Gérer les utilisateurs » représente l’intégralité des opérations

qui peuvent être exécutées sur chaque type utilisateur :
 Pour un administrateur il lui est possible de gérer les administrateurs
- Ajouter administrateur
- Activer ou désactiver un compte admin
- Modifier administrateur
- Supprimer administrateur
 Pour un administrateur il lui est possible de gérer les clients
- Ajouter un compte client

- Activer ou désactiver un compte client
- Modifier client
- Supprimer client
Projet Lapcom
21
 Pour un administrateur il lui est possible de gérer les commerçants
- Ajouter commerçant
- Activer ou désactiver un compte commerçant
- Modifier commerçant
- Supprimer commerçant
Remarque :
L’action d’inscription et de modification du compte est aussi allouée aux clients
2.3. Diagramme de cas d’utilisation « Gérer le panier »
Figure 4 : Cas d’utilisation « Gérer le panier »

Projet Lapcom
22
2.4. Cas d’utilisation « Evaluer les produits »
Administrateur
Figure 5 : Diagramme de cas d'utilisation « Evaluer les produits »

23 Projet Lapcom
2.5. Cas d’utilisation « Gérer les produits »
Administrateur
Figure 6 : Diagramme de cas d'utilisation « gérer produit »

Objectif : Ce cas d’utilisation vise à décrire toutes les étapes relatives à l’ajout d’un
produit.

Poste-conditions : Un nouvel article est ajouté à la liste de ses produits
Scénario nominal :
1. L’administrateur demande au système la page de mise à jour de ses produits
2. Le système affiche la page ainsi que la liste des produits et des différentes
6. Le système met à jour la liste des produits et par défaut la liste les produits les
plus récentes
Projet Lapcom
24
A1 : Modifier un produit
3- l’administrateur sélectionne un produit et choisit l’opération de modification
4-Aller à l’opération qui suit 4
A2 : Supprimer un produit
3- l’administrateur sélectionne un produit et choisit l’opération de suppression
4-Le système met à jour la base de données
2.6. Cas d’utilisation « S’authentifier »

Acteur principal : Internaute
Objectif : Ce cas d’utilisation décrit les différentes étapes concernant l’authentification
d’un utilisateur au niveau du serveur.
Préconditions :
- Serveur accessible
- Accès au réseau Internet disponible
- Navigateur fonctionnel
- Système fonctionnel
Poste-conditions :
- Accès à l’administration du site ou du compte
- Ouverture d’une session
Projet Lapcom
25
Scénario nominal :
1. L’internaute lance le navigateur
2. L’internaute tape l’adresse URL du site
3. Le système affiche la page d’accueil
4. L’internaute demande au système le formulaire d’authentification
5. Le système affiche le formulaire d’authentification
6. L’internaute saisit son adresse électronique et son mot de passe valide
7. Le système vérifie l’adresse mail et le mot de passe
8. Le système ouvre une session et affiche l’interface d’accueil
A1 : Vérification de l’adresse électronique
6- Le système affiche un message d’erreur
A2 : Vérification du mot de passe

6- Le système affiche un message d’erreur
E1 : Erreur dans l’adresse URL de l’administration
3- le navigateur affiche un message d’erreur
E2 : Période d’inactivité
Le système ferme automatiquement la session et invite l’utilisateur à s’authentifier à
nouveau
26 Projet Lapcom
2.7. Cas d’utilisation « S’inscrire »

Objectif : Ce cas d’utilisation décrit les différentes étapes concernant l’inscription d’un
internaute.
Préconditions :
Poste-conditions :
Utilisateur inscrit et authentifié par une adresse électronique et un mot de passe.
Scénario nominal :
1. L’internaute demande de s’inscrire
2. Le système affiche le formulaire d’inscription
3. L’internaute remplit les champs nécessaires et valide
4. L’internaute saisit son adresse électronique et son mot de passe valide
5. Le système vérifie l’adresse mail et le mot de passe
6. Le système vérifie si l’utilisateur n’est pas déjà inscrit avec l’adresse email
donnée puis enregistre le nouveau compte et envoie un email de confirmation à
l’internaute
E1 : Lors de la vérification, le système trouve que l’internaute est déjà inscrit
2.8. Cas d’utilisation « Consulter les produits »

Objectif : Ce cas d’utilisation décrit les différentes étapes concernant la consultation des
produits
Préconditions :
Projet Lapcom
27
Poste-conditions : Page consultée

Scénario nominal :
1. L’internaute lance le navigateur
2. L’internaute tape l’adresse URL du site
3. Le système affiche la page d’accueil où se trouvent les produits
4. L’internaute clique sur un produit et accède à sa description détaillée
5. Le système affiche la page de description
E1 : Erreur dans l’adresse URL de l’administration
3- le navigateur affiche un message d’erreur
2.9. Diagramme de cas d’utilisation « Gérer marques »
Figure 7 : Diagramme de cas d'utilisation « gérer marque »

Projet Lapcom
28

Objectif : Ce cas d’utilisation vise à décrire toutes les étapes relatives à l’ajout d’une
marque

Poste-conditions : Une nouvelle marque est ajoutée à la liste des marques existantes
Scénario nominal :
1. L’administrateur demande au système la page de mise à jour des marques
2. Le système affiche la page ainsi que la liste des marques et des différentes
6. Le système met à jour la liste des marques et par défaut la liste des marques les
plus récentes
A1 : Modifier une marque
3- l’administrateur sélectionne une marque et choisit l’opération de modification
4-Aller à l’opération qui suit 4
A2 : Supprimer une marque

3- l’administrateur sélectionne une marque et choisit l’opération de suppression
4-Le système met à jour la base de données
Projet Lapcom
29
b. Diagrammes de séquence système (simplifié)
1. Définition diagramme de séquence : 3
Le diagramme de séquence est l’un des diagrammes UML qui permettent de capturer les
comportements dynamiques du système en représentant les interactions entre ses différents
composants ou acteurs et ainsi nous permettant de visualiser le flux des messages entre ces
derniers.
Authentification :
Figure 8 : Diagramme de séquence d'authentification

Projet Lapcom
30
Inscription :
Figure 9 : Diagramme de séquence d'inscription
Voir Annexe (diagrammes de séquence simplifiés)

Projet Lapcom
31
c. Diagrammes de séquence (détaillé)
Authentification :
Figure 10 : Diagramme de séquence détaillé d'authentification

Projet Lapcom
32
Inscription :
Figure 11 : Diagramme de séquence détaillé d'inscription
Voir Annexe (diagrammes de séquence détaillés)

Projet Lapcom
33
d. Diagramme de classe :
1. Définition diagramme de classe : 4

Le diagramme de classe est l’un des diagrammes UML les plus importants dans la
programmation orientée objet. Il nous permet d’avoir une vue générale sur l'architecture
conceptuelle du système et à partir de ce diagramme nous pouvons visualiser les classes
composant le système ainsi que les relations qui les relient.
2. Diagramme de classe globale :
Ci-dessous, il s’agit du diagramme de classe globale de notre système :
Figure 12 : Diagramme de classe global

Projet Lapcom
34
3. Schéma de la base de données :
Il s’agit du schéma général de la base de données :
Figure 13 : schéma général de la base de données
III. Conclusion :
Ce chapitre inclut l’étape globale de conception qui s’est faite principalement avec la
méthode UML, se basant ainsi sur 3 diagrammes essentiels :
- Diagramme de cas d’utilisation

- Diagramme de séquence
- Diagramme de classe
Projet Lapcom
35
CHAPITRE III : Conception architecturale et Design
I. Introduction :
Dans ce chapitre du rapport, nous allons étudier le projet sous une vue théorique globale
comprenant la stratégie du site ainsi que ses objectifs, ensuite sous une vue conceptuelle,
en décrivant l’architecture générale que nous allons suivre lors de la réalisation du projet
ainsi que les outils utilisés et enfin une représentation des différentes pages obtenues.
II. Présentation théorique de l’ensemble du projet :
1. Description du projet :
Le projet de fin d’année qui nous a été remis, consiste à développer une boutique en
ligne pour présenter, commercialiser et livrer les produits de la société Lapcom à ses clients.
L’idée principale de ce projet, vise à permettre aux membres inscrits sur le site Lapcom :
de consulter, de rechercher, d'acheter des produits en ligne, d'avoir leur propre espace et
également leur assurer une bonne expérience utilisateur.
2. Mise en place de la stratégie marketing de Lapcom :
Lorsqu’il s’agit de la création d’un site e-commerce, il est indispensable de penser

préalablement à sa stratégie marketing et par ceci nous référons à définir le type de ses
offres, déterminer la cible et également définir les objectifs.
a. Détermination de la cible et des objectifs pour la

stratégie e-commerce de Lapcom
1. Définition de la cible :
La mise en place d’une stratégie e-commerce impose systématiquement une définition
claire de la cible en vue.
Projet Lapcom
36
Lapcom étant un site de vente de matériels informatiques au Maroc, il suscitera

essentiellement l’intérêt de l’audience marocaine relativement jeune, intéressée par
l’électronique, cherchant à s’informer sur les prix ou à s’acquérir un appareil électronique
(nous estimons une marge d’âge entre 25ans et 37ans).
Aussi, on peut noter que l’intérêt de l’audience nous reflète, en particulier, l’intérêt de la
navigation, il est donc l’objet d’une clientèle utilisant nécessairement les supports digitaux.
2. Définition des offres de produits :
Le type de produits vendus, sont second à être définis. Leur définition est primordiale aussi,
car ils sont censés être adéquats à la demande et doivent intéresser la cible précédemment
précisée. Etant donné que le thème de Lapcom est la vente de matériels informatiques, nous
avons choisi des produits informatiques de différentes marques et comme exemple :
 Ordinateur portable
 Imprimante
 Tablette
 Composant (Carte mère/RAM/…)
 Ordinateur de bureau
 Stockage
 Moniteur
 Gaming…
3. Définition des objectifs :
Les objectifs majeurs de ce site sont :
La possibilité de présenter les produits de la société Lapcom dans une boutique en ligne,
d’effectuer des transactions commerciales en ligne, de faciliter la tâche du paiement et de
pouvoir suivre les commandes.
Projet Lapcom
37
Objectifs plus détaillés :
1- Recherche accès facile aux informations.

2- Achat rapide des produits en ligne.
3- Garantir des transactions financières sécurisées grâce au système de
paiement à la livraison.
4- Permettre une évaluation pour les différents produis.
b. Détermination du périmètre du projet :

La détermination du périmètre du projet est très importante du point de vue que ce celui-ci
est le résultat direct de la cible adressé par notre projet. Nous devons, par conséquent,
cohérer entre la cible et le périmètre.
- Lapcom sera un site marocain visant uniquement le Maroc.

- Le site sera responsive avec les supports mobiles et tablettes.
- Lapcom sera disponible en français.
3. Optimisation de l’Expérience utilisateur :

Une priorité, aussi, qui reste primordiale lors de la conception d’un site est de pouvoir
garantir une expérience satisfaisante aux clients.
a. Définition et rôle de l’expérience utilisateur 5

L'expérience utilisateur (en anglais, User Experience ou UX) résulte de toutes les
perceptions, interactions ou sentiments qu'un utilisateur a à propos d'un produit ou d'un
service avant, pendant et après son utilisation. Par conséquent, considérer l'expérience
utilisateur augmente la valeur capitalistique du produit/service. Ce qui construit la valeur
d'une marque ou d'une image sur le long terme et contribue en grande partie à sa pérennité.
Projet Lapcom
38
b. L’expérience utilisateur et l’e-commerce (Lapcom) 6

Pour les sites e-commerce, l’expérience utilisateur correspond à l’expérience
globale vécue par un internaute qui visite la boutique.
L’UX est centrée sur une meilleure compréhension de l’intention du client et la façon
d’aider ce dernier à atteindre ses objectifs. Le but ultime de l’UX, pour notre projet, est de
s’assurer que le produit que l’on a créé produit les résultats dont nos clients ont besoin.
Et donc, vu son importance, lors de la conception des différentes interfaces de Lapcom, on

s’est basé essentiellement sur les conditions suivantes pour garantir une expérience
utilisateur de bonne qualité :
 Manipulation simple et facile (expérience sans efforts)

 Disposition claire des produits
 Disponibilité des outils d’aide et d’assistance
 Contenu Intéressant utile et crédible
4. Ergonomie et web design de Lapcom :
Lors de la conception des interfaces de Lapcom, on a pris en considération trois

principes essentiels pour optimiser l’expérience de l’utilisateur sur le site : ergonomie
efficace, web design professionnel et le responsive web design.
a. Ergonomie de Lapcom :
L’ergonomie, comme connu pour tous, est un facteur essentiel pour garantir la
satisfaction de l’e-consommateur, car une mauvaise ergonomie web d’un e-commerce peu
bien devenir l’un des facteurs principaux de la perte des clients.
Ci-dessous, les règles d’ergonomie que l’on a prises en considération lors de la

conception des interfaces de Lapcom avec des exemples d’application.
Rapidité de l’affichage : en compressant la taille des images.

Identification facile de l’emplacement actuel : en mettent en place le fil
d’Ariane pour pouvoir facilement se repérer lors de la navigation.
Informations disponibles : lors de la validation de l’achat, le client peut toujours
visualiser le prix, les frais de livraison…
Projet Lapcom
39
Fluidité du contenu : en évitant la surmultiplication des clics.

Harmonie entre ergonomie, design et code : unification entre les membres de
l’équipe pour pouvoir avancer avec une même philosophie réconciliant design et
code.
Adaptation de la boutique Lapcom : entre client, offre et produit
Respect de la logique de navigation des internautes : en respectant les
standards et conventions qui aident la majorité des internautes à naviguer de
manière intuitive sur les sites e-commerce.
Qualité visuelle : avec des interfaces conviviales, professionnelles et expressives
du thème.
Importance des boutons d’action : puisqu’ils s’incitent à l’action (ex : bouton
« ajouter au panier »), nous avons pris en considération le choix de couleur
attrayant, l’intitulé précis et court, les effets de survol captivants (état graphique
changeant et attrayant), utilisation des verbes d’action à la place des phrases
nominales longues.
Simplification des étapes de commandes : pour éviter l’abandon des paniers, le
principe de simplicité, lisibilité et de rapidité a été maintenu à partir de l’étape de
la visualisation du panier jusqu’à la validation de la commande.
Accessibilité des menus : avec une barre de navigation horizontale et un menu
déroulant contenant les catégories de produits disponibles.
Logo : positionné en haut à droite de la page, contenant un lien renvoyant vers la
page d’accueil.
b. Web design de Lapcom :

Comme cité plutôt, le but omniprésent est l’optimisation de l’expérience de l’e-
consommateur sur notre site Lapcom. Ce qui insinue que la représentation des pages et le
design de celle-ci peut s’avérer être un facteur crucial pour, premièrement, gagner la
confiance du visiteur et éventuellement de le convertir en un acheteur.
Notre équipe, s’est basé essentiellement sur cet état d’esprit pendant de la conception et
création physique de interfaces du site Lapcom.
Projet Lapcom
40
5. L’identité visuelle de Lapcom :

L’identité visuelle, se dotant d’un rôle déterminant dans la première impression et la
crédibilité du site ainsi que dans le renforcement de l’image de marque de Lapcom, il
lui a été consacré un temps non négligeable mais raisonnable durant la partie de la
conception.
Les principaux éléments composant l’identité visuelle de la marque de Lapcom sont

présentés comme suit :
a. Charte graphique (les couleurs) :
Figure 14 : Charte graphique de Lapcom

Projet Lapcom
41
La palette de couleurs a été choisie de façon à ce qu’elle renforce le thème du projet et à ce

qu’elle soit appropriée, associée et adaptée à la marque. Rendant le site Lapcom unique et
rapidement distinguable visuellement.
Le choix des couleurs :
Le choix des couleurs a été réalisé en prenant en considération la psychologie derrière

chacune et, notant que pour chaque couleur, il lui est associé un taux de conversion (pour
les sites e-commerce). Pour but principal, attirer l’attention du client, déclencher son
comportement d’achat et surtout d’augmenter son volume d’achat.
2 couleurs principales ont été choisies pour la charte graphique : 7
- Le bleu : crée un sentiment de fiabilité et de confiance

1- Cette couleur est des plus préférées puisqu’elle est perçue par tout le monde,
même par les daltoniens.
2- C’est la couleur la plus utilisée sur les sites et par les marques (Skype,
LinkedIn, Facebook, ibm, twitter, Ford, PayPal, Visa, …).
3- Utilisé essentiellement pour évoquer la confiance (très utilisé par les
banques et les entreprises de sécurité informatique).
4- C’est la couleur préférée de 57% des hommes et 35% des femmes.
 Cette couleur est considérée idéale pour le domaine de la technologie et de
l’électronique, la finance, …
- L’orange : encourage les achats impulsifs

1- Cette couleur est considérée idéale pour les sites e-commerce et parmi les
plus utilisées dans ce domaine.
2- C’est la couleur la plus conseillée à adopter pour les boutons d’action :
vendre, acheter ou s’inscrire.
3- Parmi les sites qui l’utilisent (Jumia, Orange, Hermès, Alibaba, Cosmos...)
4- La couleur orange fait partie des couleurs qui obtiennent les meilleurs taux
de conversion.
 Cette couleur est considérée idéale pour le domaine de la technologie, santé ….
Le bleu et l’orange, sur le cercle chromatique, ce sont des couleurs diamétralement

opposées, ce qui fait que ces deux couleurs fonctionnent par paire et sont considérées
comme étant parfaitement complémentaires.
Projet Lapcom
42
b. Typographie
Figure 15 : Typographie de Lapcom
La police de caractères utilisée est Rubik.
Le choix de la typographie a été fait de façon à ce qu’il soit homogène avec le reste des
éléments constituant l’identité de Lapcom.
Rubik est une police sans serif populaire considérée comme étant une police minimaliste,
futuriste et très adéquate aux sites Web voulant afficher des produits avec une apparence
nette et propre.
Projet Lapcom
43
c. Logo :
Figure 16 : Résultat du logo Lapcom
Le concept du logo a été mis en place de manière à ce qu’il soit simple, professionnel et
facilement mémorisable afin de faciliter sa distinction et ultérieurement favoriser la fidélité
à la marque.
Figure 17 : Présentation du logo Lapcom
Explication du logo
Le logo contient les 2 couleurs principales de notre charte graphique et la flèche se trouvant
au milieu du cercle symbolise, d’une part, le curseur pour faire référence à la souris et donc
Projet Lapcom
44
à l’informatique et en même temps c’est une flèche dirigée vers le haut dont la signification
est ‘UP’ et par laquelle nous voulons exprimer la
bonne qualité de la marque. D’autre part, il permet
d’exprimer l’action de cliquer, une forme
d’appellation aux visiteurs de venir visiter et cliquer
pour acheter nos produits.
6. Responsive Web Design-Lapcom
Vu l’importance du responsive web design dans l’amélioration de l’expérience utilisateur,

la satisfaction des clients en plus du fait que les e-commerce Responsive sont plus forts sur
les moteurs de recherche et demande moins de travail (ex : Google favorise les sites Web
Responsive sur son moteur de recherche), Nous avons donc choisi une approche responsive
pour le site en utilisant par exemple Bootstrap (outil parmi ceux que nous avons utilisé lors
de la création physique des pages -III)
Figure 18 : Responsive Web design Lapcom

Projet Lapcom
45
III- Présentation Conceptuelle et technique de

l’ensemble du projet :
1. Conception de la structure générale du site
a. Conception de l’arborescence de Lapcom :
1. Architecture générale de Lapcom :
Après avoir précisé quelles approches nous allons suivre pour le projet, nous
passerons pour cette deuxième étape à la conception structurelle de ce dernier. Afin
de pouvoir mettre en place une structure et un enchainement aux interfaces de notre
projet e-commerce, il était primordial de commencer avec la mise en place de
l'arborescence de celui-ci.
Cette arborescence, qui par la suite, nous permettra de spécifier et d’hiérarchiser les
différentes pages de Lapcom, ainsi que d’avoir une vue générale sur leur
enchaînement (le maillage interne du site). L’arborescence, dont on fait référence
est issue du cahier de charge qui nous a été remis, qui contient principalement une
description des fonctionnalités du site. Nous avons donc repris l’ensemble de ces
fonctionnalités et on les a regroupés dans une figure donnant une représentation
simplifiée schématisant tout ceci.
Figure 19 : Architectures globale de Lapcom

Projet Lapcom
46
2. User Flow :
Il s’agit d’une schématisation des chemins possibles que l’utilisateur peut

éventuellement emprunter sur notre site web.
Commençant depuis l’entrée (page d’accueil, ...) jusqu’à l’action finale (achat d’un
produit).
Ci-dessous, schéma du USER Flow correspondant à Lapcom.
Figure 20 : Diagramme du User Flow
3. Exemples d’application de l’ergonomie :

Fil d’Ariane :
Figure 21 : Fil d'Arian de la page F.A.Q

Projet Lapcom
47
Bouton d’action acheter :
Standardisation du panier :
Le panier sur Lapcom, comme pour la plupart des sites e-commerce, contient les éléments
suivants :
 L’intitulé du produit
 Le prix unitaire
 La quantité acheté (avec possibilité de modification)
 Prix total
 Possibilité de supprimer un produit
 Bouton de passage de la commande
b. Wire framing :
Lors de la création de Lapcom, il était important pour nous de commencer avec la création
des maquettes fonctionnelles du site afin que nous puissions créer un site sur mesure et
satisfaisant les règles d’ergonomie que nous avons citées plutôt.
Ci-dessous quelques maquettes que nous avons créés lors de la conception des différentes
pages du site Lapcom.
Projet Lapcom
48
Figure 22 : Maquette de la page Boutique
Figure 24 : Maquette de la page d'aide
Figure 23 : Maquette de la page

d'accueil
Projet Lapcom
49
2. Présentation technique :
Langages et outils utilisés : 8-9-10
3. HTML :
L'HTML est un langage informatique utilisé sur l'internet. Ce
langage est utilisé pour créer des pages web. L'acronyme
signifie HyperText Markup Language, ce qui signifie en français
"langage de balisage d'hypertexte". Cette signification porte bien
son nom puisqu'effectivement ce langage permet de réaliser de
l'hypertexte à base d'une structure de balisage.
4. CSS :
Le terme CSS est l'acronyme anglais de Cascading Style Sheets qui
peut se traduire par "feuilles de style en cascade". Le CSS est un
langage informatique utilisé sur l'internet pour mettre en forme les
fichiers HTML ou XML. Ainsi, les feuilles de style, aussi appelées
les fichiers CSS, comprennent du code qui permet de gérer le design
d'une page en HTML.
5. JAVASCRIPT :
Le JavaScript est un langage informatique utilisé sur les pages
web. Ce langage à la particularité de s'activer sur le poste client, en
d'autres mots c'est votre ordinateur qui va recevoir le code et qui
devra l'exécuter. C'est en opposition à d'autres langages qui sont
activés côté serveur. L'exécution du code est effectuée par votre
navigateur internet tel que Firefox ou Internet Explorer.
6. BOOTSTRAP :
Bootstrap est un framework (une librairie) développé par Twitter
et mis en open-source en février 2012. Ce langage utilise les
principaux langages de développement web (HTML, CSS &
Javascript). Il s’agit d’un code qui raccourcit différentes
fonctionnalités (plugins utilisant la bibliothèque JQuery), permettant au
développeur de gagner du temps et de réaliser simplement des codes complexes
(animation, carrousel, tableau, histogramme, …) et tout en réduisant la quantité de
caractères requis, et donc le poids du site web.
Projet Lapcom
50
7. VISUAL STUDIO :
Visual studio code ou VS Code est un éditeur de code développé
par Microsoft en 2015. Contrairement à ce à quoi Microsoft a eu
l’habitude de nous habituer durant des années, il est l’un de ces
premiers produits open source et gratuit, et surtout disponible sur les
systèmes d’exploitation Windows, Linux et Mac.
IV- Présentation graphique de l’ensemble du

projet :
1. Présentation des interfaces utilisateurs :
a. La page d’Accueil :
Il s’agit de la première page qui va apparaître après avoir entré
l’url du site dans le navigateur. L’accueil a pour fonction de :
- Donner une 1ère impression du site aux visiteurs.

- D’afficher un aperçu des produits selon certains critères
(selon une catégorie, tag, …).
- D’afficher les offres les plus importants qui sont en cours.
- Afficher les catégories disponibles.
- Afficher les bannières de promotion.
- Rediriger vers d’autres pages (ex : boutique, blog…).
Cette page est constituée principalement de : sliders de produits et

de bannières publicitaires.
La page d’Accueil a été créée et désignée de façon à ce qu’elle ait

un style professionnel, adéquat pour tout âge, convivial et clair. Et
comme cité plutôt, elle respecte comme toutes les autres pages,
l’identité visuelle de Lapcom (la charte graphique, la disposition du
logo...) les règles d’ergonomie, le maillage interne (redirection vers
d’autres pages), design graphique simple et professionnel (création
des bannières, des animations et des effets de survol). Figure 25 : La page
d'accueil
Projet Lapcom
51
b. La page de la boutique :
Cette deuxième page présente la page de la boutique, en

cliquant sur Magasin dans la barre de navigation ou en
cliquant sur l’une des catégories le client serait redirigé vers
cette page.
Cette interface a pour fonction de lister tous les produits et de

les afficher clairement aux potentiels acheteurs ainsi que de
leur permettre de filtrer leur recherche.
Comme il est bien visible, cette page est composée de deux

parties principales ; la partie gauche contenant les filtres de
recherche pour simplifier la recherche d’un produit aux clients
et la partie droite principale qui contient la liste des produits
contenus dans la base de données.
Les produits sont affichés selon 4 colonnes, assez espacés

pour qu’ils puissent être bien visibles afin d’éviter les vides
indésirables et d’éviter aussi leur encombrement.
Figure 26 : Page de la Boutique

Projet Lapcom
52
c. La page du détail produit :
Cette page comprend les détails d’un des

produits présents dans la liste des produits (La
boutique).
Elle contient les détails suivants :
- L’intitulé du produit
- Le prix actuel du produit
- L’ancien prix du produit
- Une description du produit
- Une galerie d’image verticale du produit
- Bouton d’action « ajouter au panier »
- Les avis relatifs au produit
- D’autres produits à consulter qui pourraient
potentiellement intéresser le client.
La consultation de cette page, ne se fait qu’après

avoir cliqué préalablement sur un produit.
Figure 27 : La page du détail de produit

Projet Lapcom
53
d. La page du Blog :
La page du blog comporte une liste des

articles Lapcom.
Le Blog est parmi les pages qui vont aider le plus

à améliorer le référencement du site.
La répartition de la page est presque la même que

celle de la « Boutique » excepté que les articles
sont affichés sur 2 colonnes afin que le texte soit
espacé et lisible.
Figure 28 : La page du blog

Projet Lapcom
54
e. La page d’un article :
La page d’un article affiche le contenu complet

relatif à un seul article ; texte, images, …
Elle n’est accessible qu’après avoir cliqué sur un article

depuis le Blog.
Composé également d’une barre latérale et cette fois

d’une seule colonne pour la partie principale, et ce pour
donner l’espace suffisant à l’article pour qu’il soit lisible
et esthétiquement professionnel à lire.
Figure 29 : La page d'un article

Projet Lapcom
55
f. La page A Propos de nous :
La page A propos de nous est une page

informative présentant du contenu sur
l’équipe de Lapcom ainsi que d’autres
informations supplémentaires :
- Qui Sommes-nous ?
- Nos partenaires
- les membres de notre équipe
- Ce qu’ils disent sur Nous
Figure 30 : La page d'à propos de nous

Projet Lapcom
56
g. La page Contactez-nous :
Depuis cette page, l’utilisateur peut remplir

le formulaire de contact pour prendre contact avec
le support de Lapcom.
C’est une page assez simple, en comparaison avec

les pages précédentes et ceci pour que le
formulaire qui est le plus important dans la page
soit clair et voyant.
La page contient aussi des informations sur la

localisation du siège de la société ainsi que
d’autres moyens pour contacter le service clientèle
(réseaux sociaux, téléphone...).
Figure 31 : La page de contact

Projet Lapcom
57
h. La page FAQs :
La page Faq comprend une liste de

réponses aux questions les plus fréquemment
posées.
On a jugé essentiel de la créer, dans la mesure
où celle-ci ajoute du contenu au site ce qui
aidera, éventuellement à améliorer son
référencement.
Figure 32 : La page FAQs

Projet Lapcom
58
i. La page de connexion et
d’inscription :
Cette page, comme son nom l’indique, est

une page contenant les 2 formulaires ;
d’inscription et de connexion.
On les a mis sur une même page pour
faciliter le trajet d’inscription et connexion
et favoriser l’inscription des visiteurs.
Figure 33 : La page de connexion et d'inscription
j. La page des favoris :
Cette interface représente la wishlist.

Cette liste de souhaits affiche au client les
articles qu’il souhaiterait acheter ou se voir
offrir ultérieurement ou simplement les
sauvegarder pour les reconsulter.
Figure 34 : La page des Favoris

Projet Lapcom
59
k. La page du panier :
Cette page rassemble une liste de tous les
produits que le client s’avise d’acheter.
Le panier comporte :
 L’intitulé du produit
 Le prix unitaire
 La quantité achetée (avec possibilité de
modification)
 Prix total
 Possibilité de supprimer un produit
 Bouton de passage de la commande
 Autres infos (adresses, types de
livraison...)
Figure 35 : La page du panier
l. La page de paiement :
Cette interface est celle qui, selon l’architecture
du site, s’affiche après avoir cliqué sur le bouton
« passer la commande » présent dans la page
« panier ».
Elle offre la possibilité de préciser plusieurs détails et

changer certains (ex : l’adresse de livraison). Pour but,
de valider et finaliser la commande souhaitée.
Figure 36 : La page de paiement

Projet Lapcom
60
m. La page d’erreur :
La page d’erreur s’affiche quand la page que
l’utilisateur recherche est introuvable.
Elle comprend un paragraphe explicatif et un

bouton de redirection vers la page d’accueil
Figure 37 : La page d'erreur 404
n. La page de réinitialisation du mot de

passe :
A partir de cette interface, l’utilisateur inscrit
peut réinitialiser son mot de passe de connexion
soit en cas d’oubli ou d’envie d’un mot de passe
plus sécurisé.
Figure 38 : La page de réinitialisation du mot de passe

Projet Lapcom
61
o. La page d’aide :
Il s’agit du centre d’assistance qui a pour

but essentiel de faciliter et de simplifier au
plus l’expérience de l’utilisateur sur le site
Lapcom.
La page contient des boutons redirigeant

vers d’autres pages d’assistance selon le
problème choisi ainsi que des rubriques
contenant les solutions des problèmes, des
plus aux moins fréquents.
Figure 39 : La page d'aide
p. La page du tableau de bord :
Cette Interface représente le tableau de

bord d’un utilisateur inscrit sur la plateforme.
A partir du tableau de bord, le client peut :
- Gérer son profil

- Gérer ses achats (commandes)
- Gérer ses retours
Figure 40 : Page du tableau de bord du client

Projet Lapcom
62
2. Présentation des interfaces Administrateur :
La finalité principale du tableau de bord est de permettre à l’admin de piloter l’activité

commerciale de Lapcom.
Basé sur le principe du pilotage opérationnel et stratégique, il permet à l’équipe

administratrice de :
- Gérer les entités interagissant avec le système qui ont été citées dans le cahier de
charge (ex : clients)
- Gérer les activités commerciales (ex : commandes)
- Gérer les comptes utilisateurs (client et admin)
- Visualiser les statistiques
Le tableau de bord, comme pour le site, respecte la charte graphique précisée lors de l’étape
de la conception de l’identité visuelle et avec un design clair et convivial motivant pour
l’exploiter avec aisance.
Les Interfaces seront répétitives puisqu’en général, il s’agit du même principe pour chaque
volet :
Exemple :
Gestion des clients :
- Une liste des clients

- Formulaire de consultation d’un produit
- Formulaire d’ajout
- Formulaire de modification
Et donc ainsi la même structure va être trouvée dans presque tous les autres volets de
gestion.
Projet Lapcom
63
a. La page du tableau de bord :

Il s’agit du tableau de bord contenant un aperçu général sur toute l’activité.
Figure 41 : Tableau de bord de l'administrateur
Pour la barre de navigation verticale, elle présente les fonctionnalités suivantes :
Figure 42 : Barre de navigation du tableau de bord admin

Projet Lapcom
64
 Publicité :
- Gestion des bannières
 Boutique :
- Gestion des coupons
- Gestion des modes de livraison
- Gestion des marques
- Gestion des commandes
- Gestion des catégories
- Gestion des produits
- Gestion avis
 Utilisateurs :
- Gestion des clients
- Gestion des administrateurs
- Gestion des vendeurs
- Gestion des clients
b. Exemples de pages liste :
Figure 43 : Listes des produits

Projet Lapcom
65
Figure 45 : Liste des clients Figure 44 : Liste des commandes
c. Exemples de formulaires :
Figure 46 : Formulaire de modification du profil admin Figure 47 : Formulaire d'ajout d'un client
d. Pages de connexion et d’inscription :
Figure 49 : Formulaire de Figure 48 : Formulaire

connexion d'inscription
Projet Lapcom
66
V- Conclusion :
Dans ce chapitre nous avons pu décortiquer un peu plus notre stratégie marketing ensuite
traiter l’étape de la conception architecturale du site Lapcom, en précisant le user flow,
l’identité visuelle de la marque … Et Enfin, une présentation des interfaces principales de
Lapcom du Frontend et Backend.
Projet Lapcom
67
CHAPITRE IV : Réalisation
I. Introduction :
Le présent chapitre présente l’intégralité de la partie de développement et de réalisation
physique des deux parties de la Boutique Lapcom. Comporte essentiellement,
l’architecture du backend ainsi que les l’environnement, outils langages utilisés.
II. Réalisation du projet :
1. Etude architecturale du back end :
Le sujet du projet de fin d’année, étant la création d’un site e-commerce, il ‘est avéré
nécessaire et efficace de se baser sur l’architecture logique MVC (Model-View-Controller)
qui est l’une des architectures logicielles les plus répandues et utilisées pour les
applications web.
a. Définition de L’architecture MVC 11
L’architecture MVC (Model-View-Controller) va nous permettre de créer notre

application web pour mieux gérer la structure du projet. Elle se compose de trois modules :
Modèle, vue, contrôle
• Modèle : un noyau de l’application qui gère les données, permet de récupérer les
informations dans la base de données, de les organiser pour qu’elles puissent ensuite être
traitées par le contrôleur.
• Vue : composant graphique de l’interface qui permet de présenter les données du

modèle à l’utilisateur.
• Contrôleur : composant responsable des prises de décision, gère la logique du code

qui prend des décisions, il est l’intermédiaire entre le modèle et la vue.
Projet Lapcom
68
Figure 50 : Architecture Logique MVC
b. Avantage de l’architecture MVC :
Cette architecture a pas mal d’avantages pour qu’elle reste toujours la plus utilisée
dans le monde de développement Web étant donné qu’elle se caractérise par :
- Meilleure organisation du code.

- Travail clair et efficace grâce à la séparation des données de la vue et du contrôleur.
- Possibilité de réutilisation de code dans d’autres applications.
- Un gain de temps de maintenance et d’évolution du site.
- Une plus grande souplesse pour organiser le développement du site entre
différents développeurs.
- Plus de facilité pour les tests unitaires.
2. Etude technique :
Dans cette partie, nous allons décrire l’architecture technique sur laquelle on s’est
basé lors de la création de la partie dynamique du projet.
L’étude technique, suit l’étude conceptuelle déjà traitée, comme complément de

spécification des outils informatique qui ont été nécessaire lors de la réalisation du projet.
Projet Lapcom
69
a. Environnement de réalisation :
1. Matériels de base :
Le développement du site a été réalisé en utilisant un ordinateur portable ayant les

caractéristiques suivantes :
Caractéristique PC Acer
Marque Acer
Processeur 926Go
Mémoire physique (RAM) 4,00 Go
Disque Dur Intel(R) Core(TM) i3-8130U CPU @
2.20GHz, 2208 MHz
Système d’exploitation Microsoft Windows 10 Professionnel
Tableau 1 : Matériels de base

70 Projet Lapcom
2. Langages et outils utilisés : (12-13-14-15)
Les outils et langage utilisés pour la partie dynamique sont :
 PHP 8.1.5 :
Le PHP, pour Hypertext Preprocessor, 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.
 XAMPP :
XAMPP est un ensemble de logiciels servant à mettre en place aisément un
serveur Web, un serveur FTP et un serveur de messagerie
électronique. C'est une distribution de logiciels libres (X
Apache MySQL Perl PHP) offrant une bonne souplesse
d'utilisation, reconnue pour son installation simple et rapide.
Ainsi, il est à la portée de la plupart de personnes dans la
mesure où il ne requiert pas de connaissances spécifiques et fonctionne, qui
plus est, sur les dispositifs d'exploitation les plus communs.
 Composer :
Composer est un outil de gestion des dépendances en PHP. Il
vous permet de déclarer les bibliothèques dont dépend votre
projet et il les gère (installation/mise à jour) pour vous.
 Laravel 9 :
Laravel est un framework PHP multi-plateforme permettant de créer des
applications web. Laravel permet à un développeur de tirer parti
d’une vaste bibliothèque de fonctionnalités pré-programmées
(telles que l’authentification, le routage et la création de modèles
HTML). L’accès à cette bibliothèque simplifie la création rapide
d’applications web robustes tout en minimisant la quantité de
code nécessaire.
Laravel offre un environnement de développement très fonctionnel, ainsi

que des interfaces de ligne de commande intuitives et expressives. En outre,
Laravel utilise la cartographie objet-relationnel (ORM) pour simplifier
l’accès et la manipulation des données.
Projet Lapcom
71
Les applications Laravel sont hautement évolutives et leur base de code est
facile à maintenir. Les développeurs peuvent également ajouter des
fonctionnalités à leurs applications de manière transparente, grâce au
système de packaging modulaire de Laravel et à la gestion robuste des
dépendances.
3. Etude Fonctionnelle :
III.
a. Choix et fonctionnement de Laravel :
1. Choix de Laravel :
Après avoir passé en revue les plus populaires des framework PHP (symphony,
cakePHP, Zend…), notre choix final s’est porté sur LARAVEL.
Ce choix a été basé sur les points suivants :
 Laravel est un framework PHP très populaire en entreprise et réputé pour la
facilité de son utilisation
 Il présente un ORM puissant (Eloquent) qui permet de récupérer les
éléments présents en base de données de manière plus rapide et efficace en
les associant à des classes PHP de manière automatique, et proposant des
requêtes optimisées pour la base de données.
 Laravel possède également un système de migration de base de données. Il
va permettre ainsi de développer et déployer plus rapidement l’application.
2. Avantages de Laravel : 15
- Laravel simplifie le processus de développement
Dès le départ, Laravel a été conçu pour simplifier les tâches communes à de nombreux
projets de développement web, comme le routage, l’authentification, la migration, la mise
en cache, etc. Laravel permet d’intégrer facilement des modules préfabriqués dans une
application, à l’aide d’interfaces intuitives et expressives de ligne de commande et de
Composer.
Projet Lapcom
72
- Laravel dispose d’outils pour les développeurs de tous les niveaux
Laravel se décrit comme un framework progressif, ce qui signifie qu’il inclut une variété
de fonctionnalités que les utilisateurs de tous niveaux trouveront utiles. Par exemple, les
débutants ont accès à des kits de démarrage pour des modules tels que les fonctions
d’authentification de base.
- Laravel évolue facilement
Laravel est hautement évolutif. Grâce à la prise en charge intégrée de systèmes de cache
rapides et distribués, les applications Laravel sont capables de traiter des millions de
requêtes par mois. Laravel propose également une plateforme de déploiement sans serveur,
Vapor, qui est basée sur AWS et offre un haut degré d’évolutivité.
- Laravel est largement utilisé
De nombreuses entreprises utilisent Laravel pour créer des sites web hautement
fonctionnels :
Exemple :
Le site web de Setapp, qui propose des applications pour Mac et iOS, est également
construit à l’aide du framework PHP Laravel.
SetApp est construit avec Laravel.

Projet Lapcom
73
L’application de recherche de restaurants de Restaurants.com est très intuitive à utiliser,

grâce au fait qu’elle est construite à partir de modèles d’applications mobiles Laravel.
3. Fonctionnalités de Laravel : 15
Parmi les fonctionnalités de Laravel que nous avons exploité lors du développement du
site :
 Traitement des routes
Laravel offre une gestion des routes simple et intuitive, en utilisant des noms simples pour
identifier les routes plutôt que de longs noms de chemin. L’utilisation d’identificateurs de
route facilite également la maintenance des applications, car le nom de la route peut être
modifié à un seul endroit plutôt que de devoir le changer partout. Toutes les routes de
l’interface web d’une application Laravel sont enregistrées dans le fichier routes/web.php.
 Sécurité
Laravel comprend un certain nombre de fonctions de sécurité, notamment

l’authentification des utilisateurs, l’autorisation des rôles des utilisateurs, la vérification
des e-mails, les services de cryptage, le hachage des mots de passe et les fonctions de
réinitialisation des mots de passe.
 Migration
Laravel fournit un contrôle de version pour les bases de données d’applications en utilisant
les migrations. Les migrations permettent de suivre la façon dont une base de données a
été modifiée au fil du temps, ce qui facilite la destruction ou la recréation de la base de
données si nécessaire.
 Templating
Blade est le moteur de templating PHP de Laravel. Les moteurs de modèles

PHP permettent de séparer la logique métier des modèles HTML, ce qui permet d’obtenir
une base de code plus facile à maintenir. De nombreuses fonctionnalités de Laravel
reposent sur les modèles Blade. Blade offre plus de fonctionnalités que les autres moteurs
Projet Lapcom
74
de création de modèles car il permet d’utiliser du code PHP simple, ce que les autres ne
font pas.
 Sessions
Laravel utilise des sessions pour stocker des informations sur l’utilisateur à travers
plusieurs requêtes. Les cookies sont un exemple de pilote de session intégré à Laravel.
 Validation des données
Laravel simplifie la validation des données utilisateur entrantes. Laravel comprend un

certain nombre de règles de validation des données, avec des messages d’erreur
personnalisables.
4. Fonctionnement de Laravel : 15
Laravel est basé sur une architecture MVC et répond aux requêtes des utilisateurs, que le
contrôleur utilise pour récupérer et traiter les données du modèle et présenter les
informations à l’utilisateur dans une vue.
Une requête entre dans une application Laravel via le fichier public/index.php, qui charge
le reste du framework et récupère une instance de l’application Laravel. Une fois l’instance
de l’application récupérée, la requête est acheminée vers le noyau de la console ou le noyau
HTTP.
Parmi d’autres tâches, le noyau définit une sélection d’amorceurs qui exécutent des tâches
qui doivent être accomplies avant que le traitement des requêtes ait lieu, ainsi que la
définition de tout intergiciel (middleware) par lequel les requêtes doivent passer avant le
traitement. Parmi ces tâches de pré-traitement figure le chargement des fournisseurs de
services requis par l’application.
Une fois l’amorçage terminé et les fournisseurs de services enregistrés, la requête est
transmise au routeur, qui la dirige ensuite vers une route ou un contrôleur. En outre, le
routeur exécute tout intergiciel spécifique à la route. Une fois que la requête est passée par
tous les intergiciels nécessaires, l’exécution d’une méthode de route ou de contrôleur
renvoie une réponse qui repasse par la chaîne jusqu’à la vue.
Projet Lapcom
75
5. Paquets utilisés :
Définition de paquet :
Les paquets sont la façon dont les fonctionnalités sont ajoutées à Laravel. Il existe à la fois
des paquets autonomes et des paquets spécifiques à une application. Les fournisseurs de
services indiquent à Laravel où charger les ressources des paquets.
Laravel, comme de nombreux autres outils de développement local, s’appuie sur Docker.
Docker est un outil basé sur les conteneurs qui permet aux développeurs de créer et de
déployer plus facilement leurs applications. En utilisant les conteneurs Docker, un
développeur empaquette son application avec ses dépendances, et la déploie en un seul
paquet.
Exemple de paquet utilisé :
 LaravelShoppingcart (panier)
Le Shopping Cart est un paquet open source, facile à intégrer et à utiliser et contient un
nombre de fonctionnalité intéressant mais tout de même limité.
Le package se compose uniquement de panier / liste de souhaits et s’intègre dans les

applications Laravel. Cependant, il nous été indispensable d’implémenter nous-même la
gestion des produits et le paiement.
III. Conclusion :
Ce chapitre traite l’étape de la réalisation physique du site partie développement, en
précisant l’environnement de travail, les outils et langages utilisés ainsi que l’architecture
suivie pour ce projet.
Projet Lapcom
76
CHAPITRE V : Méthodologie et Outils de travail
I. Introduction :
Ce chapitre du rapport va traiter les différentes méthodes de travail ainsi que les outils qui
nous ont permis d’aboutir au résultat final.
II. Méthodologie de travail :
1. Cycle de Développement :
a. Cycle spirale :
Lors de la phase de développement de notre site web, il s’est avéré indispensable de se baser
sur une notion de cycle de vie qui pourra nous faciliter la manière avec laquelle nous
construisons le code de l’application web.
Le développement, puisqu’il nécessite une réactivité importante au niveau des modifications,

on a opté sur un cycle de vie incrémentale appelé « spirale » plutôt que de suivre un cycle
linéaire classique (conception, implémentation, test).
Le cycle de vie incrémentale, nous a permis une adaptation plus souple et flexible aux
changements au cours du développement des différentes parties de notre boutique.
On a essayé de découper les fonctionnalités voulues, en se basant sur le cahier de charges,

de telle sorte à ce qu’il soit construit progressivement. Après chaque étape, le site ne couvrait
pas toutes les fonctionnalités attendues néanmoins il était fonctionnel et testables sur toutes
les fonctionnalités réalisées.
b. Avantage du cycle de développement

incrémentale :
Le cycle de développement incrémentale à plusieurs avantages :
- Les risques de non fonctionnement sont réduits significativement : Le test se

fait après chaque étape ce qui nous garantit et certifie le fonctionnement de notre
code.
- La définition des incréments et de leurs ordres :(acquis prioritairement à partir
du cahier de charge) nous a facilité la décomposition du projet et de ses
principaux axes en fonctionnalités.
Projet Lapcom
77
- Développement piloté principalement par les tests : les tests font donc partie du
processus de développement ce qui nous a permis de faire passer pour chaque
partie des tests simulant des simples et ordinaires et d’autres plus complexes.
2. Outils de gestion du flux de travail :
Notion : (https://www.journaldunet.fr/web-tech/guide-de-l-
entreprise-digitale/1443808-notion-so-la-digital-workplace-tout-en-
un-star21022022/)
Notion.so se présente comme une digital Workplace tout-en-
un. Elle combine divers outils collaboratifs de prise de notes, de
gestion de tâches, de gestion de projet (autour de tableau kanban) ou
encore de stockage et échange de documents.
A partir de Notion, on a pu créer une mini-application de gestion

de l’avancement du projet ainsi que de la gestion des tâches de chaque
membre de l’équipe.
Ci-dessous une image de l’interface de notre gestion sous Notion :
Figure 51 : Interface de notre application Notion
L’application nous a permis, non seulement de travailler plus rapidement dû aux deadlines
précisés pour chaque tâche mais aussi d’un espace commun de partage pour notre équipe,
ainsi le feedback pour chaque partie accomplie et quasi-instantanée ce qui a permis un flux
de travail souple et une gestion plus globale de chaque membre et de ses tâches.
Projet Lapcom
78
III. Conclusion :
Dans ce chapitre nous avons pu expliciter la méthodologie interne qu’a suivi notre équipe
durant les différentes étapes depuis la conception jusqu’à la construction physique du
frontend et backend de notre site Lapcom.
79 Projet Lapcom
Conclusion :
Dans le cadre du projet de fin d’année, il nous a été demandé de concevoir et de

développer une boutique de vente en ligne de produits et matériels informatiques
« Lapcom ».
La réalisation de site s’est faite sur deux parties : La partie administrateur qui est
un tableau de bord dédié aux administrateurs par laquelle ils peuvent gérer
l’intégralité du site (commandes, utilisateurs, coupon, livraison…) et la partie
client dédiée au client qui comporte plusieurs pages de l’accueil jusqu’au centre
d’aide mais qui comporte principalement la boutique dans laquelle le client peut
naviguer entre les différents produits, rechercher, filtrer, …
Avant d’arriver au résultat final, le projet a dû passer par différentes étapes
commençant par la collecte des données, la conception de la structure du système,
de ses fonctionnalités ainsi que son architecture en plus de l’expérience
utilisateur sur Le site Lapcom…
Le projet qui nous a été proposé nous a non seulement permis de tester nos acquis
mais plus de les défier. On a pu gérer entre temps, équipe, ampleur du projet,
développement… ce qui nous a fortement aider à améliorer significativement
nos compétences professionnelles et techniques.
Projet Lapcom
80
Annexe :
I. Diagrammes de séquence (simplifié) :

1. Authentification :
Figure 52 : Diagramme de séquence d'authentification

Projet Lapcom
81
2. Inscription :
Figure 53 : Diagramme de séquence d'inscription

Projet Lapcom
82
3. Ajout commerçant :
Figure 54 : Diagramme de séquence d'ajout client

Projet Lapcom
83
4. Ajout produit :
: Administrateur :
Figure 55 : Diagramme de séquence d'ajout produit

Projet Lapcom
84
5. Supprimer produit :
Figure 56 : Diagramme de séquence de suppression produit

Projet Lapcom
85
6. Modifier commande :
Figure 57 : Diagramme de séquence de modification commande

Projet Lapcom
86
II. Diagrammes de séquence (détaillé)
1. Authentification :
Figure 58 : Diagramme de séquence détaillé d'authentification

Projet Lapcom
87
2. Inscription :
Figure 59 : Diagramme de séquence détaillé d'inscription

Projet Lapcom
88
3. Ajouter commerçant :
Figure 60 : Diagramme de séquence détaillé d'ajout commerçant

Projet Lapcom
89
4. Ajouter produit :
: Administrateur
I. Rechercher produit :
Figure 61 : Diagramme de séquence détaillé d'ajout produit

Projet Lapcom
90
5. Rechercher un produit :
Figure 62 : Diagramme de séquence détaillé de recherche produit

Projet Lapcom
91
6. Supprimer produit :
Figure 63 : Diagramme de séquence détaillé de suppression produit

Projet Lapcom
92
7. Modifier commande :
Figure 64 : Diagramme de séquence détaillé de modification commande

Projet Lapcom
93
Références
1. https://www.futura-sciences.com/tech/definitions/informatique-uml-3979/
2. Définition diagramme de cas d’utilisation : Hal-Lirmm - Archives Ouvertes
3. Définition diagramme de séquence : theseFatma_dhaou_finale_juin2018
4. Définition du diagramme de classe :
d1wqtxts1xzle7.cloudfront.net/57352532/cours_UML-with-cover-page-v2
5. https://www.cairn.info/revue-i2d-information-donnees-et-documents-2015-4-
page-40.htm
6. https://www.shopify.com/fr/blog/experience-utilisateur-e-commerce-ux
7. https://www.btobmarketers.fr/ecommerce/e-commerce-limportance-choix-
couleurs/
8. https://agency-inside.com/2016/06/01/definition-webmarketing-bootstrap/
9. https://glossaire.infowebmaster.fr/
10. https://blog.webnet.fr/visual-studio-code/
11. https://rosedienglab.defarsci.org/a-quoi-sert-une-architecture-mvc-son-
fonctionnement/#:~:text=Mod%C3%A8le%20%3A%20un%20noyau%20de%20l,
du%20mod%C3%A8le%20%C3%A0%20l'utilisateur.
12. https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203597-
php-hypertext-preprocessor-definition/
13. http://www.standard-du-web.com/xampp.php
14. https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203597-
php-hypertext-preprocessor-definition/
15. https://kinsta.com/fr/base-de-connaissances/qu-est-ce-que-laravel/

PF Cover V4

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

PF Cover V4

Transféré par

Droits d'auteur :

Formats disponibles

cv

Projet de fin d’étude

Filière : Systèmes d’information- Elaboré par :

b. Diagrammes de séquence système (simplifié) ............................................... 29

b. Wire framing : ...........................................................................................487

3. Etude Fonctionnelle : ......................................................................................721

Figure 1: Diagramme de cas d'utilisation général ......................................................................187

Figure 43: Listes des produits ...................................................................................................654

CHAPITRE I : Présentation du projet

II. Présentation générale du projet :

1. Introduction au concept de l’e-commerce :

Le e-commerce ou le commerce électronique, est représenté comme un sous ensemble

Contrairement à l’une des croyances répandues, le commerce électronique n’est pas

b. Définition d’une boutique en ligne :

a. Présentation générale du sujet projet :

L'objectif de ce mémoire est de concevoir et de développer un site web commercial qui

L’objectif du présent projet consiste à mettre en œuvre et à développer un site web

 Gérer les relations avec les clients,

c. Etude de l’existant du projet :

Pour se procurer et acheter un équipement de communication tel un téléphone, un

Par conséquent, un moyen fiable, pratique et automatisé permettant d’informer un grand

On pourrait citer d’autres divers traitements représentant aussi des sources de

 Le règlement des factures se fait en espèce ou par chèque, sur place.

La solution actuelle est manuelle, posant ainsi diverses problématiques, à savoir :

 L'abondance des documents dans l'entreprise pouvant ralentir considérablement

Grâce à Internet, nous nous apercevons de nouvelles perspectives de développement qui

L'utilisation d'Internet, comme segment de communication de masse, permet également de

En outre, avec la transmission du haut débit et la sécurisation augmentée des moyens de

Dans ce chapitre du rapport va expliciter la méthode de conception et modélisation ainsi

II. Méthode de Modélisation :

L'UML (Unified Modeling Language ou Langage de modélisation unifiée en français) est

2. Les diagrammes UML dans la conception du projet :

a. Diagramme de cas d’utilisation :

1. Définition diagramme de cas d’utilisation : 2

Au cours du processus de conception basé sur la méthode de modélisation UML, les

1.1 Identifications des acteurs de notre système :

Les acteurs qui interagissent avec le système sont :

L’administrateur : c’est le responsable du bon fonctionnement du site et qui gère

1.2 Diagramme de cas d’utilisation générale du système :

Figure 1 : Diagramme de cas d'utilisation général

2. Détails Diagramme de cas d’utilisation :

Ci-dessous- quelques exemples de cas d’utilisation détaillés :

2.1 Diagramme de cas d’utilisation « Gérer les produits »

Figure 2 : Diagramme de cas d'utilisation « Gérer les produits »

Acteur principal : Administrateur

Préconditions : L’administrateur doit être authentifié

1. L’administrateur demande au système la page de mise à jour de ses produits

3- le système ferme la session après une période d’inactivité et invite l’administrateur à

2.2. Diagramme de cas d’utilisation « Gérer les utilisateurs »

Figure 3 : Diagramme de cas d'utilisation « Gérer les utilisateurs »

Le cas d’utilisation « Gérer les utilisateurs » représente l’intégralité des opérations

 Pour un administrateur il lui est possible de gérer les administrateurs

 Pour un administrateur il lui est possible de gérer les clients

- Ajouter un compte client

 Pour un administrateur il lui est possible de gérer les commerçants

2.3. Diagramme de cas d’utilisation « Gérer le panier »

Figure 4 : Cas d’utilisation « Gérer le panier »

2.4. Cas d’utilisation « Evaluer les produits »

Figure 5 : Diagramme de cas d'utilisation « Evaluer les produits »

2.5. Cas d’utilisation « Gérer les produits »

Figure 6 : Diagramme de cas d'utilisation « gérer produit »

Acteur principal : Administrateur

Préconditions : L’administrateur doit être authentifié