Conception d’une plateforme web d’e-commerce au sein d’une entreprise commerciale. « cas de l’entreprise wika »

II.2.2. IMPLEMENTATION DU PROJET

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

Notre application a deux parties :

1. INTERFACE CLIENT : partie qui s'affiche dès l'accès à notre site web (Page d'accueil, contact, les articles disponible en stock,...)

2. ADMIN PANEL : partie accessible aux utilisateurs ayant le privilège admin ; d'ici ils peuvent modifier différentes informations et aussi ajouter des nouvelles articles sur le site web.

41

1. INTERFACE CLIENT Entête

(6)

(3) (5) (4)

(1) (2)

Figure 13 : Entête de notre site web

Cette partie comprend :

1. Le lien qui ramène le client a la page de connexion pour profiter pleinement de la foire virtuelle,

2. Le lien qui ramène le visiteur à la page d'inscription,

3. Différents menus,

4. Le détail du contenu du panier et un lien pour vider le contenu du panier,

5. Le lien qui ramène le visiteur et/ou client sur un formulaire de recherche.

6. Le numéro de téléphone du service client.

42

Pied de page

(4)

(3)

(2)

(1)

(5)

(7)

(7)

Figure 14 : Pied de Page de notre site web

Cette partie comprend :

1. L'adresse de l'entreprise,

2. Les informations sur l'entreprise,

3. Les informations sur le compte du client,

4. Un petit détail sur WIKA SHOP (l'application que nous concevons),

5. Nos adresses sur les réseaux sociaux pour que les visiteurs et/ou clients nous suivent.

6. Les cartes autorisées pour le paiement sur notre site,

7. Le droit d'auteur.

Cette division affiche les meilleures ventes.

43

le corps du page d'acceuil

Figure 15 : Corps accueil site web ; Nouvelles Produits Arrivées Cette division affiche les nouveaux produits Arrivés.

Figure 16 : Corps accueil site web ; Meilleurs Ventes

44

Création Compte

Figure 17 : Page d'inscription

Comme dans tout site web commercial, le visiteur ne peut devenir client qu'après la phase d'inscription, notre site web met à la disposition de ses visiteurs un formulaire d'inscription accessible dans l'entête (cfr. figure 13), pour devenir client le visiteur doit le remplir.

45

Connexion

Figure 18 : Page d'authentification

Après la phase d'inscription présentée dans la figure 18 le client doit s'authentifier pour bien profiter des privilèges qu'un visiteur normal ne possède pas comme par exemple le remplissage du panier et le passage des commandes.

46

Après authentification du client

Figure 19 : Vu du site web après authentification du client

Une fois de plus nous nous trouvons devant une page qui ressemble à une autre (le corps du page d'accueil ; nouvelles arrivées) dans une grande partie même si elle est en réalité, toute différente.

La figure 19 ressemble à la figure 15 sauf que celle-ci est une page qui affiches un nouvel arrivage mais qui s'affiche après authentification (cfr. figure 18) d'un client et non pas par un simple visiteur. Ex : remplissage du panier.

47

Le contenu du panier

Figure 20 : le panier de notre site web

Cette figure représente le contenu du panier virtuel qui permet de conserver la trace des achats du client tout au long de son parcours et de modifier les quantités pour chaque référence.

48

2. ADMIN PANEL

Administrateur ou client de notre site web, ils sont tous appelés aux mêmes étapes d'inscription et d'authentification, mais l'unique différence c'est le privilège. Quand l'utilisateur possède un privilège « Administrateur », il peut accéder directement à la page principal d'administration de notre site web qui se compose aussi de trois parties principales :

Un entête qui contient le logo, photo de l'admin, icone de notification et un formulaire de recherche.

Une barre de menus verticale sous forme d'accordéon, qui contient à son tour des liens à toutes les pages de gestion des articles, des catégories, des marques, des boutiques, des fournisseurs, des utilisateurs, des privilèges, des villes, des modes de livraison, des états de commandes et des propriétés des articles.

Un bas de page qui contient le droit d'auteur du concepteur.

Une partie centrale qui affiche différents formulaires et autres informations se trouvant sur le site, mais elle doit après afficher les formulaires sélectionnés par le webmaster à partir des menus de gestion qui se trouvent dans la partie droite de la page.

Il est accessible à partir du lien « Administrer » se trouvant dans le bas de la page de l'interface client.

49

Connexion à l'Admin Panel

Figure 21 : Page de Login Pour Admin

Sur cette figure nous représentons l'espace d'authentification réservé aux utilisateurs accrédité du privilège de webmaster pour apporter différentes modifications dans notre application.

50

Entête

Figure 22 : Entête de l'Admin Panel

Cette partie comprend :

? Le logo de l'entreprise, ? La photo de l'admin,

? Petites icones de notification, ? Un formulaire de recherche.

Bas de page

Figure 23 : Pied de Page de l'Admin Panel Cette partie comprend le droit d'auteur

Barre de menus (à droite de l'écran)

Figure 24: Barre de Menus de l'Admin panel

51

Formulaire d'Ajout d'articles

Figure 25 : Formulaire d'Ajout d'article

L'ajout de nouveaux articles est l'une de nombreuses taches affectées aux webmasters de notre site web, cette tache englobe la saisie des caractéristiques du produit comme par exemple la désignation, le prix, la marque, la catégorie et d'autres caractéristiques, ainsi que les photos que le webmaster a besoin qu'il peut télécharger de son disque. Pour cela nous mettons à sa disposition un bouton « parcourir ».

52

Liste des articles (produits)

Figure 26: Liste des Articles/Produits

Cette figure représente la listes d'articles ajoutés par le webmaster, nous voulons par cette figure donner un exemple de plusieurs listes qui s'affichant de la même manière que la présente.

53

Accréditation du privilège d'administration

Figure 27 : Accréditation privilège a un Utilisateur

Un Administrateur c'est un utilisateur avec privilège Webmaster, mais comment un utilisateur reste un client ou devient un administrateur c'est pour cela que nous donnons l'autorisation de faire cette modification uniquement à l'administrateur dans la page « Edit User Infos» de l'utilisateur.

54

Liste des commandes

Figure 28 : Détails des Commandes

Cette figure représente les listes des commandes et la liste des états des commandes effectuées par nos différents clients qui sont enregistrés dans notre BD. Lors de la livraison de la commande le livreur va cliquer sur le lien « non livré » afin de confirmer la livraison.