Table des matières

Introduction 4

Chapitre 1 : Cadre de projet 5

I Cadre de projet 5
1 Présentation de l’entreprise Best Web Business 5

2 Critique de l’existant 5

3 Solution proposée 5

4 Spécification des besoins 6

4.1 Les besoins fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
4.2 Les besoins non fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

II Spécification des besoins et conception 7

1 Analyse des besoins 7
1.1 Ebaucher modèle U-C : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.1 Décrire le système : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.2 Les acteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2 Diagramme globale des uses cases . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3 Diagramme de classe : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.4 Détailler les U-C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.4.1 Cas d’utilisation « Creer un compte ». . . . . . . . . . . . . . . . . . . . 10
1.4.2 Cas d’utilisation «Authentification» . . . . . . . . . . . . . . . . . . . . . 11
1.4.3 Cas d’utilisation «Ajouter Produit» . . . . . . . . . . . . . . . . . . . . . 12

2 Conception de use-case 13
2.1 Authentification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2 S’inscrire à la plateforme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3 Gérer son profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

III 17
1 L’environnement matériel 17
1.1 Environnement Hard : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.2 Environnement Soft : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
1.2.1 Langage de programmation : . . . . . . . . . . . . . . . . . . . . . . . . . 18
1.2.2 Environnement de développement : . . . . . . . . . . . . . . . . . . . . . 18
1.2.3 Outil de Conception : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
1.2.4 Serveur d’application : . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
1.2.5 Système de gestion de base de données : . . . . . . . . . . . . . . . . . . 19
1.2.6 Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

1
 1.2.7 Design Multimédia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

2 Interfaces de l’application 22
2.1 Interface de creation de compte . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3 Interface d’authentification 23

4 Interface de modifier profil 23

5 Interface de supprimer profil 24

6 conclusion et perspectives 24

2
Table des figures
1 Logo Societe BWB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4 Cas d’utilisation «Creer un compte » . . . . . . . . . . . . . . . . . . . . . . . . 10
5 Cas d’utilisation «Authentification » » . . . . . . . . . . . . . . . . . . . . . . . 11
6 Cas d’utilisation «Ajouter Produit » » . . . . . . . . . . . . . . . . . . . . . . . 12
7 Diagramme des séquences Authentification . . . . . . . . . . . . . . . . . . . . . 13
8 Diagramme des séquences inscrire à la plateforme . . . . . . . . . . . . . . . . . 14
9 Diagramme des séquences Ajouter des informations . . . . . . . . . . . . . . . . 15
10 Diagramme des séquences Modifier des informations . . . . . . . . . . . . . . . . 16
11 Image de ASUS X550VX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
12 Logo PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
13 Logo Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
14 Logo Laragon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
15 Logo Enterprise Architect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
16 Logo GitMind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
17 Logo Apache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
18 Logo phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
19 Logo Laravel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
20 Logo HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
21 Logo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
22 Logo Bootstap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
23 Interface de creation de compte . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
24 Interface d’authentification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
25 Interface de modifier Profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
26 Interface de supprime Profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3
Introduction

L’informatique est aujourd’hui présente dans les divers domaines de la vie professionnelle et
privée. Ainsi que l’utilisation de l’internet est devenue une nécessité pour tout le monde et à
tous les niveaux, chacun selon ses besoins et ses préoccupations, ces besoins augmentent de jour
en jour en matière de présentation mais surtout en matière d’utilisation.
Avec la révolution de l’Internet et du World Wide Web, le rêve des milliers est de réalisé des
applications Web car ces derniers sont devenue très nécessaire aujourd’hui dans les différents
domaines (communication, éducation, économie, banques, commerce,. . .).
Un site web est un ensemble de pages web hyper liées entre elles et mises en ligne à une
adresse web. en 2006, le web dépassé les 100 millions de sites web. Chaque site web a un pro-
priétaire : entreprise, administration, association, etc. Le propriétaire choisit l’adresse web a
laquelle le site est accessible.
Dans le cadre de notre projet d’éte, nous avons réalisé un site web commercial dynamique
pour Alpha Store.
le e-commerce est considéré comme une priorité par de nombreuses organisations internatio-
nales, d’autant plus que les enjeux liés à la facturation numérique ramènent les technologies
de l’information, de la communication et Développements dans l’actualité. Des propositions
stratégiques spécifiques sont faites dans différents domaines : infrastructures et services de té-
lécommunications, fiscalité, protection des consommateurs, cybersécurité, protection de la vie
privée et Les données. La confiance est un élément clé dans le développement du commerce
électronique. Il s’agit essentiellement de fournir aux consommateurs et aux entreprises des ser-
vices Web sécurisés, fiables et vérifiables.
De même, les consommateurs entendent garder le contrôle sur la collecte et l’utilisation de
leurs données personnelles et veulent s’assurer que des mécanismes de remédiation appropriés
sont disponibles. L’établissement du niveau de confiance requis nécessite une technologie so-
lide, des dispositions réglementaire et d’autorégulation appropriées, et Pratiquer l’éducation
publique.
Ce rapport présentant ces travaux est structuré en trois chapitres comme suit :
1. Dans le premier chapitre, je présenterai l’entreprise, le cahier des charges et les objectifs
pour cet article.
2. Le deuxième sera consacré à l’analyse des besoins et à la conception projet.
3. Au chapitre 3, j’étudierai la mise en œuvre de l’application, en Décrivez l’environnement
matériel et logiciel, je donnerai un aperçu de l’interface mettre en place.

4
Première partie
Cadre de projet
1 Présentation de l’entreprise Best Web Business

BWB (Best Web Business) est une Agence tunisienne, basée à Sfax, travaillant dans le
domaine de Impression ,marketing et Developement Web.
Cette Agence opère dans les divers domaines marketing :
∗ Création des site web
∗ Conception graphique
∗ Digital marketing
∗ Impression Offset
∗ Impression Numérique

Figure 1 – Logo Societe BWB

2 Critique de l’existant
Parmis les activités de la societe BWB, sont les projets innovants de l’actualité qui vise à
pallier les insuffisances du consommateur de nos jours qui sera de plus en plus un demandeur de
comfort et d’efficacité . L’ecommerce est maintenant un atout primordial dans la vie quotidienne
, on a toujours hate à commander nos besoins via un site web et attendre jusqu’a ce que l’article
viendra à nos mains en toute sécurité .

3 Solution proposée
La societe BWB présente sa solution qui est le projet E-commerce "BetaStore",un marché
électronique sous forme d’une site web qui comporte trois modules : -Module du Panier -
Module du Marketplace -Module du livraison Notre site offre l’opportunité aux utilisateurs de
commander leur achat tout en accédant au marché ou de devenir un gérant dans le marketplace
et vendre ses articles. En fait les articles seront livrés au domiciles , un livreur sera chargé de
la livraison des articles.

5
4 Spécification des besoins
4.1 Les besoins fonctionnels
Dans ce chapitre nous allons détailler les besoins fonctionnels de notre projet :
Gestion des comptes :
∗ Le client doit se connecter .
∗ Le gérant doit se connecter .
Gestion du panier :
∗ Le client gère le panier :
∗ il peut ajouter un article ou supprimer .
∗ Il peut passer ou annuler sa commande
Gestion du Marketplace :
∗ Le gérant doit gérer son marché :
∗ Il ajoute ses articles .
∗ Il supprime ses articles .
∗ Il modifie la description de ses articles
Gestion de l’application :
∗ L’administrateur supervise les comptes des gérants.
∗ Il supervise les livraisons.
∗ Il supervise les états des commandes ;

4.2 Les besoins non fonctionnels

Dans l’ingénierie des systèmes et des exigences, une exigence non fonctionnelle est une
exigence qui précise les critères pouvant être utilisés pour juger du fonctionnement d’un système,
comportements spécifiques. Ils sont contrastés avec les exigences fonctionnelles qui définir un
comportement ou des fonctions spécifiques :
• L’efficacité : L’application doit fonctionner correctement quelles que soient les circons-
tances entourant l’utilisateur
• La sécurité : L’application doit définir les niveaux d’accès possibles pour les utilisateurs
du système et protéger les données personnelles.

6
Deuxième partie
Spécification des besoins et conception
1 Analyse des besoins
1.1 Ebaucher modèle U-C :
Dans cette partie, nous introduisons d’abord le diagramme de cas d’utilisation général. Cette
phase représente une vue fonctionnelle de l’architecture du système. Ensuite, nous identifions les
principaux cas d’utilisation de notre application. Les drapeaux seront une description détaillée
de chacun ci-dessous.

1.1.1 Décrire le système :

On se propose de créer un plateforme d’un site web e-commercial permettant aux clients
d’acheter des produits en ligne a aide de notre site.

1.1.2 Les acteurs

Dans le cadre de notre projet les acteurs sont les suivants :
Livreur :c’est l’acteur principale qui valider la livrison de commande.
Client : c’est l’acteur principal qui va créer son compte et va commander son article, il passera
par un panier puis il confirmera sa commande et enfin va contacter le livreur où ce dernier livre
la commande en toute sécurité
Gérant : C’est celui qui va créer son compte et ajouter ses articles à son marché .
Administrateur : Superviser les états des marchés et les ventes .

1.2 Diagramme globale des uses cases

Un diagramme de cas d’utilisation est une représentation qui décrit les éventuelles actions
réalisées par le système. La figure ci-dessous nous montre le diagramme de cas d’utilisation de
notre système.

7
 Figure 2 – Diagramme de cas d’utilisation

1.3 Diagramme de classe :

Dans cette section nous allons présenté le diagramme de classe général de l’application

8
Figure 3 – Diagramme de classe

9
1.4 Détailler les U-C
1.4.1 Cas d’utilisation « Creer un compte »

Titre : Creer un compte

Resume : Ce cas d’utilisation permet de client de
creer votre compte au site web
Acteur : Client
Précondition : Le client n’est pas inscrit au systeme
Post condition : un compte est cree pour le client et de-
vient inscrit et authentifie par login et un
mot de passe
Scenario nominal : 1- L’client demande le formulaire de ins-
cription
2- Le système affiche le formulaire
3- Le Client remplie les champs néces-
saires et confirme
4- Le système vérifie les données saisies
5- Le système enregistre le nouvel
Compte et affiche un message de succès
de l’opération

Scénario alternatif Le Client saisie des données manquantes

ou invalides
le système affiche un message d’erreur
reprise de l’étape 3 du scénario nominal
le compte existe déjà
le système affiche un message d’erreur
reprise de l’étape 3 du scénario nominal

Figure 4 – Cas d’utilisation «Creer un compte »

10
1.4.2 Cas d’utilisation «Authentification»

Titre : Authentification
Resume L’utilsateur utilise son login et son mot de
passe pour s’identifier aupres du systeme
Acteur : Administrateur, Gérant,Client,Livreur
Précondition : L’utilisateur possede un login et mot de
passe
le systeme est en marche
Post condition : L’utilisateur accede au systeme
Scenario nominal : 1-L’utilisateur accede a site web
2-Affiche interface d’authentification
3-L’utilisateur saisit son login et son mot
de passe
4-L’utilisateur valide les informations sai-
sies
5-Le systeme verfie les cordonnees.
6-Le systeme affiche l’interface principale

Scénario alternatif Le login ou le mot de passe est incorrect

Le scenario commance au point 5 du sce-
nario nominal
Le systeme informe l’acteur que les don-
nees saisies sont erronees
Le scenario reprend au point 3 du scena-
rio nominal

Figure 5 – Cas d’utilisation «Authentification » »

11
1.4.3 Cas d’utilisation «Ajouter Produit»

Titre : Ajouter Produit

Resume Gerant utilise votre platforme de Ajouter
produit
Acteur : Gérant
Précondition : Le Gerant a ete connecte
Post condition : Le gerant accede au systeme
Scenario nominal : 1-Le gerant accede a site web
2-Affiche interface d’ajouter produit
3-Le gerant saisit les informations de pro-
duit
4-Le gerant valide les informations saisies
5-Le systeme verfie les cordonnees.
6-Le systeme affiche les listes du produits

Scénario alternatif Les Information est non forme

Le scenario commance au point 5 du sce-
nario nominal
Le systeme informe le gerant que les don-
nees saisies sont erronees
Le scenario reprend au point 3 du scena-
rio nominal

Figure 6 – Cas d’utilisation «Ajouter Produit » »

12
2 Conception de use-case
2.1 Authentification

Figure 7 – Diagramme des séquences Authentification

13
2.2 S’inscrire à la plateforme
L

Figure 8 – Diagramme des séquences inscrire à la plateforme

14
2.3 Gérer son profil
Ajouter des informations

Figure 9 – Diagramme des séquences Ajouter des informations

15
Modifier des informations

Figure 10 – Diagramme des séquences Modifier des informations

16
Troisième partie

1 L’environnement matériel
Au niveau de cette dernière partie, nous allons énumérer les outils soft et hard que nous
avons utilisés pour réaliser notre site ainsi que ses principales interfaces.

1.1 Environnement Hard :

Marque : Asus
Modele : X550VX
Processeur : Intel Core i7
Mémoire cache : 6 Mo
Mémoire Ram : 16 Go
Carte graphique : NVIDIA GeForce 950m
Disque dur : 1 To
Taille d’écran 15.6

Figure 11 – Image de ASUS X550VX

17
1.2 Environnement Soft :
1.2.1 Langage de programmation :
Nous avons eu recours, pour le développement de notre application au langage de program-
mation PHP.est un langage impératif orienté objet. Il s’agit d’un langage de script interprété
côté serveur.
Il est considéré comme une des bases de la création de sites web dits dynamiques mais
également des applications web. PHP a permis de créer un grand nombre de sites web célèbres,
comme Facebook, Wikipédia, etc.

PHP : PHP : Hypertext Preprocessor, plus connu sous son sigle PHP (sigle auto-référentiel),
est un 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.

Figure 12 – Logo PHP

1.2.2 Environnement de développement :

Visual Studio Code : est présenté lors de la conférence des développeurs Build d’avril
2015 comme un éditeur de code multiplateforme, open source et gratuit, supportant une dizaine
de langages. Laragon :est un environnement de développement web rapide, flexible, intuitif,

Figure 13 – Logo Visual Studio Code

productif et puissant qui d’adresse à tous. Laragon vous offre tout ce dont vous avez besoin
pour créer des applications web modernes. Vous pouvez avec faire fonctionner Apache et MySQL
d’un clic et déployer facilement des frameworks ou CMS comme par exemple Laravel, Drupal
ou Wordpress.

Figure 14 – Logo Laragon

18
1.2.3 Outil de Conception :
Enterprise Architect : est un logiciel de modélisation et de conception UML, édité par la
société australienne Sparx Systems. Couvrant, par ses fonctionnalités, l’ensemble des étapes du
cycle de conception d’application, il est l’un des logiciels de conception et de modélisation les
plus reconnus. GitMind : est un logiciel libre de création des cartes heuristiques en ligne, déve-

Figure 15 – Logo Enterprise Architect

loppé par GitMind Ltd. Ce logiciel de mind mapping peut non seulement être utilisé pour créer
des cartes mentales, mais également pour des séances de brainstorming en groupe, une pensée
créative, une planification d’événements, une prise de notes, un apprentissage collaboratif, etc.
Toutes ces manipulations peuvent-être créées avec une seule carte.

Figure 16 – Logo GitMind

1.2.4 Serveur d’application :

Apache HTTP Server :est un logiciel de serveur Web multiplateforme gratuit et open
source, publié sous les termes de la licence Apache 2.0. Apache est développé et maintenu par
une communauté ouverte de développeurs sous les auspices de l’Apache Software Foundation.

Figure 17 – Logo Apache

1.2.5 Système de gestion de base de données :

phpMyAdmin : est une application Web utilisée pour gérer les bases de données MySQL.
Il permet aux utilisateurs de créer, modifier et supprimer facilement des tables et des champs ;
ajouter, supprimer et modifier des données ; exécuter des instructions SQL et gérer les privilèges
des utilisateurs.

19
 Figure 18 – Logo phpMyAdmin

1.2.6 Framework
Laravel : est un framework web open-source écrit en PHP respectant le principe modèle-
vue-contrôleur et entièrement développé en programmation orientée objet. Laravel est distribué
sous licence MIT, avec ses sources hébergées sur GitHub

Figure 19 – Logo Laravel

1.2.7 Design Multimédia

HyperText Markup Language (HTML) : est le code utilisé pour structurer une page
web et son contenu. Par exemple, le contenu de votre page pourra être structuré en un ensemble
de paragraphes, une liste à puces ou avec des images et des tableaux de données. Comme le
suggère le titre, cet article vous fournit les bases de compréhension du HTML et de ses fonctions.

Figure 20 – Logo HTML

20
 CSS (Cascading Style Sheets) : c’est un langage informatique qui sert à décrire la
présentation des documents HTML et XML. Les standards définissant CSS sont publiés par
le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient
couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs
web dans les années 2000.

Figure 21 – Logo CSS

Bootstap : est un framework HTML/CSS qui permet de créer facilement et rapidement des
sites et applications web responsives. Il a été conçu pour aider les développeurs dans leurs
travaux quotidiens sur les langages que sont le HTML et le CSS. Il fonctionne notamment sur
un système de grille.

Figure 22 – Logo Bootstap

21
2 Interfaces de l’application
Dans cette partie nous allons présenter les interfaces développées de l’application web.

2.1 Interface de creation de compte

L’utilisateur doit Remplir la formulaire pour créer son compte.

Figure 23 – Interface de creation de compte

22
3 Interface d’authentification
L’utilisateur doit Remplir la formulaire pour Login a votre Dashboard.

Figure 24 – Interface d’authentification

4 Interface de modifier profil

L’utilisateur doit Remplir la formulaire pour Modifier a votre Dashboard.

Figure 25 – Interface de modifier Profil

23
5 Interface de supprimer profil
L’utilisateur doit click sur button delete et saisir votre Mot de passe pour supprimer votre
profil.

Figure 26 – Interface de supprime Profil

6 conclusion et perspectives
Suite au période limitée du stage , on a pas pu de terminer le développement de l’application
AlphaStore , mais le travail continue pour finaliser notre idée innovante. Nous estimons à finir
le module du compte gérant et du livreur. Ce stage m’a aidé à concevoir un tel projet et à
acquérir de nouvelles technologies et compétences comme le langage php .

24