Faculté Des Sciences Rabat Agdal

Rapport de projet de fin d’études

Licence SMI

Conception et Réalisation du site

E-commerce "eSite"

Réalisé par :
Bouamar Mohamed
ELOUAHHABI CHARIFI ALAOUI

Encadrant : M. Redouane BENAINI

Examinateur : M. Mouad BEN MAMOUN

16 Juin 2017
Remerciements

Loin d’être une tradition d’adresser des remerciements, dans tout travail de fin d’étude,
aux personnes qui ont contribué de près ou de loin à sa réalisation, il s’agit pour nous là,
d’un devoir spontané de reconnaissance et de gratitude, envers toutes les personnes sans
lesquelles notre travail n’aurait pas pu voir le jour.
Nous remercions en premier lieu le grand Dieu, le tout puissant qui nous entoure de
sa générosité divine.
Nos remerciements s’adressent à notre encadrant Monsieur Benaini Redouane, dont la
richesse d’esprit, la générosité et le professionnalisme sont pour nous une indéniable réfé-
rence. Qu’il trouve ici l’expression de notre gratitude pour tout le temps qu’il a consacré
à ses précieuses corrections.
Nous tenons également à exprimer l’honneur que nous font les membres du jury pour
avoir accepté de nous prêter leur attention et évaluer notre travail.
Enfin nos remerciements vont aussi à l’ensemble des enseignants et adminitrateurs de la
faculté des Sciences de Rabat qui ont oeuvré pour la valorisation de cette license.

1
Résumé

Développement d’une application Web pour la vente en ligne

L’objectif principal de ce projet de fin d’études consiste à développer une application

web dynamique pour la vente de produits en ligne, basée sur la plateforme e-commerce
développée en php. Les applications web sont utilisées par des personnes de plusieurs
tranches d’âges de différentes manières, notamment pour bénéficier de services multiples
tel que l’achat en ligne, les jeux en ligne, la messagerie éléctronique. . . Notre application
E-commerce est une application à visée de vente, qui permettra aux clients de chercher
des produits de différentes catégories, de remplir leurs paniers et valider ainsi leurs com-
mandes.

Mots clés : PHP, Phpstorm, WampServer, MYSQL, HTML, CSS, Bootstrap, Javas-
cript, Modelio.

Abstract
Development of a web application for e-commerce
This project aims to implement a web application based on php to manage commercial
ads, the client can search for ads from different categories, add them in the basket and
validate the order.

Keywords : PHP, Phpstorm, WampServer, MYSQL, HTML, CSS, Bootstrap, Javas-

cript,Modelio.

2
Table des matières

Remerciements 1

Résumé 2

Abstract 2

Introduction 5

1 E-commmerce : Standards et évolution 6

1.1 Les standards des sites e-commerces . . . . . . . . . . . . . . . . . . . . . . 6
1.2 Évolution 1995-2017 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2.1 Amazon démarre fort (1995) . . . . . . . . . . . . . . . . . . . . . . 7
1.2.2 Alapage, la réplique française (1996) . . . . . . . . . . . . . . . . . 7
1.2.3 Le m-commerce vient du froid (1997) . . . . . . . . . . . . . . . . . 7
1.2.4 Un cauchemar de Noël...(1999) . . . . . . . . . . . . . . . . . . . . 7
1.2.5 Krach, Boo ! (2000) . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2.6 Apple virtualise la musique (2003) . . . . . . . . . . . . . . . . . . . 8
1.2.7 Leboncoin.fr triomphe dans l’ultralocal (2006) . . . . . . . . . . . . 8
1.2.8 Netflix, de la location à la production (2007) . . . . . . . . . . . . . 8
1.2.9 Airbnb, symbole de l’économie du partage (2011) . . . . . . . . . . 8
1.2.10 Ceux qui surfent prendront le train (2012) . . . . . . . . . . . . . . 9
1.2.11 Ne dites pas à ma mère que je travaille dans l’e-commerce... (2014) 9
1.2.12 Arriveé de l’intelligence artificielle (2017) . . . . . . . . . . . . . . . 9
1.3 Les solutions éxistantes (CMS) . . . . . . . . . . . . . . . . . . . . . . . . 9
1.3.1 Top 4 des CMS e-commerces existants . . . . . . . . . . . . . . . . 9
1.3.2 Inconvénients des CMS par rapport au code . . . . . . . . . . . . . 10

2 L’environnement de la Programmation 12
2.1 Technologies et outils de développement utilisés . . . . . . . . . . . . . . . 12
2.1.1 XAMPP : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.1.2 SGBD - MySQL : . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.1.3 PHPStorm IDE : . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3
 2.1.4 PHP : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.1.5 PowerAMC 15 : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.1.6 Autres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3 Analyse des besoins et Conception détaillée 16

3.1 Analyse des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.1.1 Introdution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.1.2 Objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.1.3 Spécification des exigences - Cahier de charge . . . . . . . . . . . . 17
3.1.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2 Conception Detaillée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.1 Introdution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.2 Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.3 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . . 18
3.2.4 Diagramme de classes . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.2.5 Diagramme de Séquence . . . . . . . . . . . . . . . . . . . . . . . . 24

4 Démonstration 25
4.1 Réalisation et tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.1.2 Présentation des interfaces . . . . . . . . . . . . . . . . . . . . . . . 25

Références 44

4
Introduction

Le Web a connu un essor très important durant ces dernières années, ils sont de plus
en plus dotés d’une puissance avec des fonctionnalités assez évoluées permettant de créer
des applications innovantes et de les distribuer en toute simplicité.
Bien plus que ces appareils nous permettent d’effectuer des appels ou d’envoyer des SMS,
ils sont devenus de véritables outils multimédia permettant d’accéder à tous les modes de
communication si bien que les besoins des utilisateurs sont de plus en plus croissants et
spécifiques en termes d’application pour satisfaire leurs besoins quotidiens.
Dans le cadre de notre projet de fin d’étude, nous nous intéressons à développer une
application de vente en ligne, reconnue dans le domaine informatique par le nom " E-
commerce ". Les supports de notre application E-commerce sont les navigateurs web de
n’importe quel appareil électronique (ordinateur – téléphone - tablette).
Mis à part le développement proprement dit de l’application, la première étape c’est de
choisir les outils conviviaux et envisageables à l’aboutissement du projet. Par la suite,
nous entamerons la modélisation et le développement de l’application.

5
Chapitre 1

E-commmerce : Standards et évolution

1.1 Les standards des sites e-commerces

On appelle E-Commerce l’utilisation d’un média électronique pour la réalisation de
transactions commerciales. La plupart du temps il s’agit de la vente de produits à travers
le réseau internet, mais le terme de eCommerce englobe aussi les mécanismes d’achat par
internet. Alors quels sont les standards des sites e-commerces et comment ils ont évolué ?
Il existe différents standards de commerce électronique :
— B2B : Le Business to business, est le nom donné à l’ensemble d’architectures tech-
niques et logicielles informatiques permettant de mettre en relation des entreprises,
dans un cadre de relations clients/fournisseurs.
— B2C : Le Business to consumer, désigne l’ensemble des architectures techniques et
logiciels informatiques permettant de mettre en relation des entreprises directement
avec les consommateurs.
— C2C : Le Customer to customer, désignent l’ensemble des échanges de biens et de
services entre plusieurs consommateurs sans passer par un intermédiaire.
Le tableau 1.1 donne des exemples de sites e-commmerces élustrants les types précé-
dament sités.
B2B B2C C2C
alibaba.com amazon.com ebay.com
partsnow.com aliexpress.com avito.ma

Table 1.1: Types de site e-commerce

1.2 Évolution 1995-2017

Le 11 août 1994, à Philadelphie, Phil Brandenberger ne sait peut-être pas qu’il est
en train de changer le monde. En un clic, comme le raconte le New York Times, il vient

6
pourtant de passer la toute première commande de l’histoire du e-commerce. L’histoire
retiendra qu’il a déboursé 12,48 dollars (sans les frais de port), pour se faire livrer l’album
Ten Summoners’ Tales, de Sting. Un premier petit clic qui en appellera beaucoup d’autres :
retour, en 10 dates charnière, sur les deux décennies qui ont changé la face du commerce.

1.2.1 Amazon démarre fort (1995)

Jeff Bezos est le premier à tirer, en juillet, lorsque sa première commande est expédiée
depuis son garage. Le livre en question, Fluid Concepts and Creative Analogies, du scien-
tifique américain Douglas Hofstader, en toujours en vente sur le site de Jeff Bezos. En
deux mois, le site livre dans 50 Etats américains, et 45 autres pays. Son chiffre d’affaires
mensuel est alors de 20 000 dollars.
Le PDG d’Amazon Jeff Bezos le 6 septembre 2012 à Santa Monica, en CalifornieLe PDG
d’Amazon Jeff Bezos le 6 septembre 2012 à Santa Monica, en Californieafp.com/Joe Kla-
mar

1.2.2 Alapage, la réplique française (1996)

Patrice Magnard, à la tête des éditions du même nom, lance un peu par hasard le
concurrent français d’Amazon : Alapage. Revendue en 1999 à France Télécom, l’enseigne
a fini par disparaître, absorbée par Rueducommerce en 2012.

1.2.3 Le m-commerce vient du froid (1997)

Dix ans avant le premier iPhone, les Finlandais inventent le commerce mobile. En
envoyant un SMS à... un distributeur de Coca-Cola connecté, les habitants d’Helsinki
repartaient avec leur canette. Simple comme un texto...

1.2.4 Un cauchemar de Noël...(1999)

Fini, le temps de pionniers : aux Etats-Unis, Noël 1999 est un grand cru. Nombre de
commandes : +270%. Chiffre d’affaires : +300%. Tout le monde se frotte les mains sauf...
Les milliers de clients du site de Toys-R-Us qui n’ont jamais vu arriver leurs cadeaux. Le
premier gros couac logistique de l’ère Internet, et une amende de 350 000 dollars pour le
géant du jouet américain qui s’alliera l’année suivante avec... Amazon.

1.2.5 Krach, Boo ! (2000)

Emblème de la "bulle Internet", le site Boo.com ferme en mai. Fondé par un ancien
mannequin et un critique littéraire, ce site de mode très (trop) sophistiqué avait pourtant
les moyens avec Bernard Arnault, Alessandro Benetton JP Morgan au capital. Bilan : 120

7
millions de dollars envolés en moins de dix-huit mois d’existence. Et une place dans les
livres d’économie, catégorie "ce qu’il ne fallait pas faire"...

1.2.6 Apple virtualise la musique (2003)

Déjà bien amochés par la vente de CD en ligne, les disquaires font connaissance avec
leur nouveau meilleur ennemi : le 28 avril, Apple lance l’iTunes Music Store. Moins de
dix ans plus tard, la firme de Cupertino annonçait fièrement avoir vendu 25 milliards de
chansons. Désormais fragilisé par l’essor du streaming, le service d’Apple a considérable-
ment accéléré un mouvement inéluctable : les derniers chiffres pour le marché français
montrent que près de la moitié du marché de la musique est digital (43
En 2005, Steve Jobs et Motorola s’associent pour lancer le premier téléphone portable
incluant le logiciel iTunes, le ROKR. L’ancêtre de l’iPhone ?En 2005, Steve Jobs et Mo-
torola s’associent pour lancer le premier téléphone portable incluant le logiciel iTunes, le
ROKR. L’ancêtre de l’iPhone ?REUTERS/Lou Dematteis

1.2.7 Leboncoin.fr triomphe dans l’ultralocal (2006)

Fin avril, un site qui ne paie pas de mine ringardise tranquillement le géant eBay. Lancé
par Spir Communication, spécialiste des petites annonces, et l’éditeur norvégien Schibsted,
Leboncoin.fr révolutionne bien plus que le commerce de consommateur à consommateur
(CtoC). Dès 2012, le site de petites annonces est devenu le premier site automobile fran-
çais, le premier site immobilier et même le premier site d’emploi en nombre d’offres.

1.2.8 Netflix, de la location à la production (2007)

Netflix n’a pas encore vingt ans quand il livre son milliardième DVD... Et en profite
pour changer de fond en comble son modèle économique. La même année, l’entreprise
lance son offre de vidéo à la demande (VoD). Pari risqué, mais gagné : le créateur de
House of Cards compte aujourd’hui plus de 65 millions d’abonnés.
La série entièrement créée et produire par Netflix..La série entièrement créée et pro-
duire par Netflix..Courtesy of House of Cards

1.2.9 Airbnb, symbole de l’économie du partage (2011)

A peine plus de deux ans après son lancement, l’hôtelier collaboratif célèbre sa mil-
lionième nuitée en février 2011. Départ canon ? Juste un échauffement. En juin, le chiffre
passe à 2 millions. Un an plus tard, Airbnb passe le cap des 10 millions de nuitées, et
devient officiellement une licorne : sa valorisation dépasse le milliard de dollars.

8
1.2.10 Ceux qui surfent prendront le train (2012)
L’e-commerce et la "digitalisation" ne sont pas que l’affaire de start-ups biberonnées
dans la Silicon Valley. La preuve, même la vénérable SNCF est sur de bons rails : début
2012, elle annonce que ses ventes de billets en ligne ont dépassé celles du guichet. e

1.2.11 Ne dites pas à ma mère que je travaille dans l’e-commerce...

(2014)
Le nombre d’emplois dans le e-commerce en France passe la barre des 100 000. 112
000 précisément, contre 87 000 l’année précédente : le commerce en ligne est désormais
un plus gros employeur que la publicité ou la presse. Tout un symbole : une étude récente
à montre qu’Amazon était l’un des dix plus gros créateurs d’emplois en France, pas très
loin de géants comme McDo ou Lidl...

1.2.12 Arriveé de l’intelligence artificielle (2017)

En 2017, de nombreux consommateurs auront leur premier échange avec un chatbot
(robot conversationnel), agent de clavardage entièrement automatisé qui répondra aux
questions des internautes, première ligne d’interaction avec la marque. Le chatbot permet
de multiplier les plateformes sur lesquelles une marque interagit en proposant une navi-
gation accompagnée et interactive à tout moment. Les chatbots deviendront rapidement
aussi omniprésents que les systèmes de téléphonie automatisés, mais en beaucoup plus
interactif et plus intéressant. À l’inverse, les conseillers en magasin auront un rôle encore
plus important à jouer car ils s’impliqueront de plus en plus dans l’expérience en ligne.

1.3 Les solutions éxistantes (CMS)

1.3.1 Top 4 des CMS e-commerces existants
WooCommerce est une extension open
source pour WordPress permettant de
créer une boutique en ligne. Il est conçu
pour les petites et grandes entreprises
en ligne utilisant WordPress. Lancé le
27 septembre 2011, le plugin est rapide-
ment devenu célèbre pour sa simplicité
d’installation et de personnalisation.

9
 Shopify a été fondé en 2004 par Tobias
Lütke, Daniel Weinand, et Scott Lake
à la suite de la création du magasin en
ligne Snowdevil.
PrestaShop fut créé en 2007 au sein de
l’école informatique Epitech par cinq
étudiants. Le projet d’origine, traduit
en deux langues (français, anglais) por-
tait le nom de phpOpenStore (POS)
. La plateforme est passée de 2 à 13
langues trois mois après son lancement.
Magento est une plateforme de com-
merce électronique libre lancée le 31
mars 2008. Elle a initialement été créée
par l’éditeur américain Varien sur les
bases du Framework Zend. Depuis ses
créateurs se sont tournés vers des fonc-
tionnalités apportées par le Framework
concurrent Symfony avec notamment
l’utilisation des modules Console et
EventDispatcher

1.3.2 Inconvénients des CMS par rapport au code

les CMS ont également des inconvénients intrinsèques.
Voici les plus notables et les plus répandus.

1. Ils manquent de flexibilité : la grande majorité des CMS proposent énormément

de fonctionnalités, néanmoins il est souvent complexe et coûteux d’ajouter celles
qui ne sont pas initialement prévues.
2. Ils sont moins performants : la généricité et la complexité des CMS les rend,
à qualité égale, moins performants qu’un site construit sans CMS.
3. Ils sont plus susceptibles d’être attaqués :comme tous les sites utilisant le
même CMS partagent un code source commun, il est nettement plus aisé de pirater
un CMS, surtout s’il est mal protégé ou implémenté. Par ailleurs, le temps investi
par un pirate pour attaquer un site web peut être rentabilisé sur d’autres sites
construits avec le même CMS.
4. Ils sont difficiles à migrer : changer de CMS est souvent beaucoup plus long et
complexe que de faire évoluer un site web construit sans CMS.

10
5. Ils sont moins faciles à référencer : la structure des pages et les redondances
limitent souvent l’adéquation avec les règles du référencement.
6. Ils sont moins stables : la complexité des CMS les rend parfois moins stables –
toujours à qualité égale – qu’un site construit sans CMS.

11
Chapitre 2

L’environnement de la Programmation

2.1 Technologies et outils de développement utilisés

2.1.1 XAMPP :
XAMPP est un ensemble de logiciels permettant de mettre en place facilement un
serveur Web confidentiel, un serveur FTP et un serveur de messagerie électronique.
la figure 2.1 montre le logo du logiciel

Figure 2.1: Xampp

2.1.2 SGBD - MySQL :

MySQL est un serveur de bases de données relationnelles SQL développé dans un souci
de performances élevées en lecture, ce qui signifie qu’il est davantage orienté vers le service
de données déjà en place que vers celui de mises à jour fréquentes et fortement sécurisées.
Il est multi-threads et multi-utilisateurs.
la figure 2.2 montre le logo du logiciel

12
 Figure 2.2: Mysql

2.1.3 PHPStorm IDE :

JetBrains PhpStorm est une multi-plateforme IDE commerciale pour PHP construite
sur la plate-forme IntelliJ IDEA de JetBrains. PhpStorm fournit un éditeur pour PHP,
HTML et JavaScript. PhpStorm supporte PHP 5.3, 5.4, 5.5, 5.6 et 7.0, y compris les
générateurs, coroutines, le mot-clé enfin, liste foreach, namespaces, des fermetures, des
traits et la syntaxe des tableaux courts. Il inclut un éditeur à part entière SQL avec des
résultats de requêtes modifiables.
Utilisation : On a choisit cet éditeur parce qu’il est un éditeur complet qui contient la
gestion de contrôle de version, la gestion de la base de données. . .
la figure 2.1.3 montre le logo du logiciel

Figure 2.3: Phpstorm

2.1.4 PHP :
Langage de programmation libre principalement utilisé pour produire des pages Web
dynamiques via un serveur HTTP, mais pouvant également fonctionner comme n’importe
quel langage interprété de façon locale. PHP est un langage impératif orienté-objet.
la figure 2.4 montre le logo du logiciel

13
 Figure 2.4: Php

2.1.5 PowerAMC 15 :
PowerAMC est un logiciel de conception créé par la société SDP, qui permet de mo-
déliser les traitements informatiques et leurs bases de données associées.
la figure 2.4 montre le logo du logiciel

Figure 2.5: PowerAMC

2.1.6 Autres
la figure 2.4 montre l’utilité d’autres logiciels

14
Figure 2.6: des outils de développement web

15
Chapitre 3

Analyse des besoins et Conception

détaillée

3.1 Analyse des besoins

3.1.1 Introdution
Dans ce chapitre, nous présenterons les motivations qui sont derrière l’idée de ce projet,
nous détaillerons aussi la liste exhaustive des fonctionnalités prévues pour l’application
et les objectifs visés.

Pour ce faire, nous allons procéder à l’organisation de notre projet :

— Le premier objectif est de commencer avec une analyse des besoins, suivie d’une
analyse fonctionnelle qui sert à définir les principales fonctionnalités que notre
projet doit fournir aux utilisateurs clients.
— Après avoir défini les besoins de l’application, le second objectif est de réaliser une
conception globale, qui sert à spécifier les fonctionnalités propres à chaque type
d’utilisateur de l’application, en définissant le lien entre eux. Cette conception va
nous aider à définir une architecture globale de l’application.

— Le troisième consiste à développer notre application au format d’un site web qui
répond aux besoins des utilisateurs

— Le quatrième et dernier objectif est d’ouvrir notre produit à un grand public.

16
3.1.2 Objectif
Notre projet consiste à fournir une application qui permet de faciliter le vente en ligne
avec toute securité.

— Point de vue visiteur (client) :

Trouver rapidement les produits de son choix.

— Point de vue propriétaire (Business owner) :

Adaptation a n’importe quel Produit

— Point de vue administrateur (Admin) :

Gestion des Produits
Gestion des Categories
Gestion des Marques
Statistiques sur les Produits les plus demandés

3.1.3 Spécification des exigences - Cahier de charge

Exigences fonctionnelles :
Notre application doit réaliser différents fonctionnalités pour plusieurs interactions avec
les utilisateurs en les classant comme suit :
I) Côté visiteur (Client) :

— Gestion de panier
La gestion de panier demande au visiteur de choisir le produit qui convient, et de
l’ajouter au panier où le prix total sera calculer automatiquement.

— Validation des commandes

La validation des commandes demande au client de saisir les informations person-
nelles.

II) Côté Administrateur (Admin) :

— Gestion des comptes :

L’administrateur a le droit de gérer les comptes des sous admins, il peut : ajouter,
modifier et supprimer un utilisateur.
— Gestion produit en solde :
L’administrateur a le droit de gérer les produits qui sont en periode de solde.

17
 — Gestion produit
L’administrateur a le droit total de gérer les produits :

- Ajouter un produit
- Modifier un produit
- Supprimer le produit

— Gestion des Marques

— Gestion des Categories
III) Côté Administrateur (sous Admin) :
Il a les mêmes droits que l’administrateur sauf qu’il ne peut pas faire la gestion des
comptes.

3.1.4 Conclusion
Nous avons étudié l’environnement de notre projet et analysé le système et les besoins
du client tout au long de ce deuxième chapitre d’analyse des besoins et spécification. Nous
allons par la suite présenter notre conception de cette application.

3.2 Conception Detaillée

3.2.1 Introdution
La phase de conception est considérée comme l’une des phases les plus importantes
dans le cycle de vie d’un logiciel. Il s’agit en premier lieu de présenter la conception de
notre application et de décrire finalement l’architecture de la base de données.

3.2.2 Présentation
Les diagrammes UML de modélisation dynamique nous montrent l’évolution du sys-
tème et les interactions entre objets. Nous allons présenter comme exemple de cette mo-
délisation un diagramme de cas d’utilisations et un diagramme de classe ansi que le
diagramme de séquence.

3.2.3 Diagramme de cas d’utilisation

la partie client Raffinement de cas d’utilisation Client "Acheter un Produit"

18
 Figure 3.1: diagramme de cas d’utilisation pour le client

Cas d’utilisation : Acheter un Produit

Acteur : Client
Pré-conditions : Le Client lance l’application
Scénario : 1.le client choisit le produit
2.le système l’ajoute au panier
3.le client saisit la quantité souhaitée
4.le système verifie la quantité saisie avec la quantité du stock
5. le système affiche le formulaire des informations personnelles pour
l’achat
6. le client remplit le formulaire avec ses informations
7. le système affiche le message de confirmation de l’achat
.

Raffinement de cas d’utilisation "Ajouter Produit"

19
 La partie Admin et sous Admin
.

Figure 3.2: diagramme de cas d’utilisation pour Admin

Cas d’utilisation : Ajouter un Produit

Acteur : Admin ou sous Admin
Pré-conditions : Le système fonctionne et l’admin est connecté
Post-conditions : Un nouveau produit est ajouté au sctock
Scénario :
1. L’admin clique sur ajouter un produit
2. Le système affiche le formulaire pour ajouter un produit
3. L’admin saisit les informations sur le produit
4. Le système vérifie la cohérence des données saisies
5. Le système affiche un message de confirmation concernant l’ajout
du produit

Raffinement de cas d’utilisation "Ajouter un Sous Admin"

20
Cas d’utilisation : Ajouter un Sous Admin
Acteur : Admin
Pré-conditions : Le système fonctionne et l’admin est connecté
Post-conditions : Nouveau Sous Admin
Scénario :
1. L’admin clique sur ajouter un utilisateur
2. Le système affiche le formulaire de l’ajout avec les droits
3. L’admin saisit les informations du nouveau admin
4. Le système vérifie la cohérence des données saisies
5. Le système affiche un message de confirmation concernant l’ajout

Raffinement de cas d’utilisation "Supprimer un Sous Admin"

Cas d’utilisation : Supprimer un Sous Admin

Acteur : Admin
Pré-conditions : Le systeme fonctionne et l’admin est connecté
Post-conditions : Supprimer un Sous Admin de la base de données
Scénario :
1. L’admin clique sur afficher les utilisateurs
2. Le système affiche la liste de tous les utilisateurs
3. L’admin choisit l’utilisateur qu’il désire et clique sur afficher les
details
4. Le système affiche les informations sur l’utilisateur concerné
5. L’admin clique sur supprimer
6. Le système supprime toutes les informations concernants cet uti-
lisateur
7. Le système affiche un message de confirmation

21
 Raffinement de cas d’utilisation "Supprimer un produit"

Cas d’utilisation : Ajouter un Sous Admin

Acteur : Admin ou Sous Admin
Pré-conditions : Le système fonctionne et l’admin est connecté
Post-conditions : Supprimer un porduit de la base de données
Scénario :
1. L’administrateur clique sur afficher les produits
2. Le système affiche la liste de tous les produits
3. L’admin choisit le produit qu’il désire et clique sur détails
4. Le système affiche les informations sur le produit selectionné
5. l’administrateur clique sur supprimer
6. Le système supprime toutes les informations concernants cet uti-
lisateur
7. Le système affiche un message de confirmation

Conclusion :
Dans ce chapitre nous avons détaillé la phase de conception, ainsi nous avons fait la des-
cription des diagrammes de cas d’utilisation, de classe et de séquence afin de délimiter le
cadre de notre travail et préparer pour la prochaine étape.

22
3.2.4 Diagramme de classes
Le diagramme de classes est une modélisation statique du système en termes de classes
et de relations entre ces classes. Son intérêt réside dans la modélisation des entités du
système d’information.

la figure 3.3 montre la conception UML du diagramme de classes

.

Figure 3.3: Diagramme de classes

.
Classe Categories : est la classe qui contient toutes les informations sur les categories
des produits.
Classe Marque : est la classe qui contient toutes les informations sur la marque d’un
produit.
Classe Administrateur : est la classe qui contient toutes les informations concernant
un utilisateur (Admin ou Sous Admin) selon le type.
Classe Produit : est la classe qui contient toutes les information des produits

23
3.2.5 Diagramme de Séquence
Le diagramme de séquence décrit l’aspect dynamique du système. Il modélise les
interactions entre les objets ou entre utilisateur et objet, en mettant l’accent sur la
chronologie des messages échangés.

la figure 3.4 montre le diagmme de sequence .

Figure 3.4: Diagramme de séquence pour la partie Admin

24
Chapitre 4

Démonstration

4.1 Réalisation et tests

4.1.1 Introduction
Dans ce chapitre, nous nous intéressons à la description de quelques interfaces du
système implémentés dans le cadre de quelques scénarios d’utilisation par des imprimés
écrans.

4.1.2 Présentation des interfaces

Le frontend du site eSite, où les clients peuvent sélectionner les produits à
mettre dans leurs paniers.

Figure 4.1: Le frontend du site eSite

Dans les pages qui suivent nous allons commencer par l’explication du fonctionnem-
ment du Backend géré par l’administrateur du site.

25
 Les deux interfaces de la figure 4.2 montrent les messages d’erreur qui
s’affichent quand soit le format de l’adresse email saisie n’est pas correct ou
que l’adresse email n’existe pas sur la base de données.

Figure 4.2: L’interface d’authentification avec une verification du login et du mot de

passe

26
 Les deux interfaces de la figure 4.3 illustrent les messages d’erreur affichés
quand la taille du mot de passe est inférieur à six caractères ou que le mot de
passe saisi est erroné..

Figure 4.3: L’interface d’authentification pour la verification du format de login et du

nombre de caractères du mot de passe.

27
 L’interface de la figure 4.4 illustre la page de l’administrateur pour ajouter
ou supprimer un sous administrateur

L’interface affiche la liste des utilisateurs de l’application

Figure 4.4: L’interface de l’administrateur pour la gestion des profils utilisateurs.

28
 Les deux interfaces de la figure 4.5 illustrent la non conformité du mot de
passe et de sa confirmation pour la création d’un sous admin.

L’interface pour la confirmation du mot de passe

Figure 4.5: L’interface pour ajouter un nouveau utilisateur (Sous Admin).

29
 L’interface de la figure 4.6 illustre les thèmes du site (journal, uunited,
Darkly...), et le fait que la page Themes n’est accessible que par un admin.

Figure 4.6: L’interface de changement de thème du site.

30
 L’interface de la figure 4.7 illustre le fait qu’un Sous admin ne peut pas
changer le thème, il serait redirigé vers la page du login.

Figure 4.7: Un Sous admin ne peut pas changer le thème

31
 L’interface de la figure 4.8 illustre le fait qu’un Sous admin ne peut pas
accéder aux pages Themes et Users, il serait redirigé vers la page du login.

Figure 4.8: Changer le thème et suprimer un User ne sont pas des options pour le Sous
admin

32
 L’interface de la figure 4.9 illustre la redirection du Sous admin vers lo-
gin.php .

Figure 4.9: Message d’erreur pour refus d’accès à la page Users pour le Sous admin

33
L’interface de la figure 4.10 montre La déconnexion du sous admin.

Figure 4.10: La barre de déconnexion

34
 L’interface de la figure 4.11 montre l’authentification de l’Admin et l’inter-
face de gestion des catégories.

Figure 4.11: Authentification de l’Admin et interface de gestion des catégories

35
L’interface de la figure 4.12 illustre l’ajout d’une nouvelle catégorie.

Figure 4.12: Ajout d’une nouvelle catégorie.

36
 L’interface de la figure 4.13 montre que la catégorie est ajoutée sur le
frontend du site.

Figure 4.13: Ajout de la catégorie sur le frontend du site

37
L’interface de la figure 4.14 montre la possibilité de modifier une catégorie.

Figure 4.14: Modification d’une catégorie de produit

38
 L’interface de la figure 4.15 illustre la modification ou suppression d’une
catégorie donnée.

Figure 4.15: Modification ou suppression d’une catégorie donnée

39
L’interface de la figure 4.16 illustre la page de gestion des produits.

Figure 4.16: Interface de gestion des produits

40
 Les interfaces de la figure 4.17 illustrent la création d’un nouveau produit
en remplissant les informations et caractéristiques y correspondants.

Figure 4.17: La saisie des caractéristiques techniques du nouveau produit créé.

41
 Les interfaces de la figure 4.18 montrent la possibilité de faire apparaitre
les produits de tendance sur la page d’acceuil.

Figure 4.18: Les produits de tendance

42
 Les interfaces de la figure 4.18 illustrent la page de catégorie, dans le Fron-
tend du site.

Figure 4.19: La page de catégorie, dans le Frontend

43
Références

Bibliographie
[1] Marty Hall. JavaScript, jQuery and jQuery UI. Addison-Wesley Professional.
[2] Semmy Purewal. Beginning Programming with JavaScript. O’Reilly Media, Inc.
[3] Steve Perry. Building a Complete Web Application. Infinite Skills.
[4] Lorna Jane Mitchell. Intermediate PHP. O’Reilly Media, Inc.
[5] Lorna Jane Mitchell. PHP Web Services. O’Reilly Media, Inc.
[6] Ben Forta. Learning SQL. Addison-Wesley Professional.
[7] Christian Soutou. Programmer avec MySQL. EYROLLES.
[8] Jean Engels. PHP 5 Cours et exercices. EYROLLES.
[9] Marty Hall. JavaScript, jQuery and jQuery UI. Addison-Wesley Professional.

Webographie
www.coursera.org
www.edx.org
www.udacity.com
www.safaribooksonline.com

44