Mémoire de Mastère

Figure 13: Diagramme de séquences de l'inscription ................. 42

Figure 14: Diagramme de séquences d'authentification .............. 43

Figure 15: Diagramme de séquences de suppression d'un article 44

Figure 16: Diagramme des classes .......................................... 46

Figure 17: Structure du site en évolution ................................. 48

Figure 18: charte graphique de la page d'accueil ....................... 49

Figure 19: charte graphique de la page client ........................... 49

Figure 20: charte graphique de la page administrateur .............. 50

Figure 21: Page d'accueil ....................................................... 57

Figure 22: Sélection par critère ............................................... 57

Figure 23: Détails d'un article sélectionné ................................ 58

Figure 24: Page des contacts .................................................. 58

Figure 25: Inscription ............................................................ 59

Figure 26: Authentification ..................................................... 59

Figure 27: Accueil admin (Ajout des articles) ............................ 60

Figure 28: Téléchargement de l'image de l'article ...................... 61

Figure 29: Liste des articles.................................................... 61

Raissi ADEL

Page 4

Mémoire de mastère N2TR UVT 2012/2013

Figure 30: Changement du privilège ........................................ 62

Figure 31: Accueil du client (catalogue client) ........................... 62

Figure 32: Détails des articles en mode client ........................... 63

Figure 33: Changement du profil ............................................. 63

Raissi ADEL

Page 5

Mémoire de mastère N2TR UVT 2012/2013

Introduction générale :

Des ventes de mains en mains, vers des ventes virtuelles, passent

les priorités des opérations de ventes des biens et des services, ce qui

nous rend obligés de donner plus d’importance à la vente électronique.

Les boutiques en ligne sont depuis des années, largement

conseillés pour les sociétés qui se basent sur la vente des produits et

même des services Ces types de sites web représentent un dispositif

global fournissant aux clients un pont de passage à l’ensemble des

informations, des produits, et des services à partir d’un portail unique en

rapport avec son activité.

Les sites de vente en ligne permettent aux clients de profiter d’une

foire virtuelle disponible est quotidiennement mise à jours sans la moindre

contrainte, ce qui leur permettrai de ne jamais rater les coups de cœur,

ainsi Une foire sans problèmes de distance géographique, ni d’horaire de

travail ni de disponibilité de transport. D’une autre part ces sites offrent à

la société de profiter de cette espace pour exposer ses produits à une plus

large base de clientèle.

Notre projet est réalisé dans le cadre du mémoire de mastère N2TR

ayant comme objectif principal : la conception et la création d’une

boutique virtuelle pour le compte de LSAT_Nokia qui est une société de

vente et réparation des téléphones mobiles Nokia.

Raissi ADEL

Page 6

Mémoire de mastère N2TR UVT 2012/2013

Chapitre I : Cadre général

Raissi ADEL

Page 7

Mémoire de mastère N2TR UVT 2012/2013

I.

Cadre du projet

Durant le quatrième semestre N2TR au sein de l’Université Virtuelle

de Tunis« UVT » nous somme appelés à passer un stage de quatre mois

dont le fruit est ce mémoire.

Notre projet portera sur la conception et la réalisation d’un site web

commercial pour le compte de la société LSAT_Nokia.

II. L’organisme d’accueil :

1. Description :

LSAT-NOKIA comme l’indique son nom c’est une société Sarl,

Tunisienne qui représente les produits Nokia en Tunisie, on peut aussi la

nommer le groupe LSAT parce qu’elle a un siège social à Tunis et des

agences distribuées sur le reste des gouvernorats du pays. Les principales

activités de LSAT_Nokia sont la vente et la réparation des téléphones

mobiles de la marque internationale NOKIA de la basse à la haute gamme.

2. Organigramme de la société d’accueil :

Figure 1: Organigramme de L'organisme d'accueil

Raissi ADEL

Page 8

Mémoire de mastère N2TR UVT 2012/2013

III. Présentation du sujet :

Le sujet de notre mémoire de mastère consiste à développer une

boutique en ligne pour présenter, commercialiser et livrer nos produits à

nos clients, que nous estimons devenir de plus en plus nombreux.

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

commercial qui doit permettre l’inscription des visiteurs pour devenir

clients, le suivi des commandes effectuée, la gestion des payements en

lignes et le suivi des livraisons.

IV. Plan de travail :

1. Organisation du rapport :

Pour un bon travail il nous faut un rapport bien structuré qui peut

être exploité après la mise en place de ce site, pour cela nous allons

organiser notre présent rapport de la manière suivante :

Dans le premier chapitre « Cadre général », nous allons mettre

notre projet dans son cadre général en définissant la société d’accueil et

en présentant le sujet.

Dans le deuxième chapitre intitulé « Etudes préalables», nous

Allons prendre deux sites web tunisiens de la même activité que le notre,

comme des exemples a fin de les analyser et dégager les bénéfices et les

inconvénients et donc obtenir une idée plus claire de ce que nous devons

faire dans notre site.

Dans le troisième chapitre intitulé «Etude de l’existant et

spécification des besoins» nous allons en premier lieu, étudier les

Procédures de vente utilisées actuellement en relevant les manques et les

insuffisances et proposant les solutions convenables. En deuxième lieu,

nous précisons les principales solutions offertes par notre projet en tenant

compte de ses besoins fonctionnels et non fonctionnels. Et enfin, nous

présentons le contexte global de notre projet.

Raissi ADEL

Page 9

Mémoire de mastère N2TR UVT 2012/2013

Dans le quatrième chapitre «Conception» nous abordons la phase

de conception. Nous spécifions d’abord la méthode de conception adaptée,

après, nous présentons les différents diagrammes de notre site web.

Enfin et au niveau du cinquième et dernier chapitre intitulé

«Réalisation», nous allons présenter notre site web, en mentionnant les

différents environnements de travail matériels et logiciels utilisés pour

entamer le projet, ainsi qu’en citant les principales interfaces réalisées.

2. Diagramme de Gantt :

Le diagramme de Gantt est un outil de planification des tâches

nécessaires pour la réalisation d'un projet quelque soit le secteur

d’activité. Il permet de visualiser l’avancement des tâches d’un projet de

manière simple et concise, de planifier et suivre les besoins en ressources

humaines et matérielles et donc de pouvoir suivre l’avancement du projet.

Le diagramme suivant va représenter les taches principales à

réaliser dans notre projet.

Figure 2: Diagramme de Gantt

Raissi ADEL

Page 10

Mémoire de mastère N2TR UVT 2012/2013

Conclusion

Dans ce premier chapitre nous avons mis le sujet dans son cadre

général. Nous allons commencer un deuxième chapitre intitulé «Etudes

préalables» dans le quel nous allons préciser nos besoins après une étude

analytique et comparative entre deux exemples de sites de ventes en

ligne en déduisant leurs avantages et leurs défaillances que nous allons

dépasser dans notre projet.

Raissi ADEL

Page 11

Mémoire de mastère N2TR UVT 2012/2013

Chapitre II : Etude Préalable

Raissi ADEL

Page 12

Mémoire de mastère N2TR UVT 2012/2013

Introduction

Il est indispensable avant de se lancer dans la réalisation de tout

projet, de bien étudier et analyser des projets similaires pour profiter des

avantages et éviter les malveillances dans le présent projet.

Pour cela j’ai choisis deux sites très fameux dans la vente en ligne

en Tunisie

le premier est www.Mytek.tn

et

le deuxième est

www.phonotunisie.com.

I.

Analyse du Site Mytek

1. Inconvénients :

Figure 3: partie publicitaire de Mytek

-

Une très grande partie de la page réservée à la publicité de

telle sorte que de premier coup l’utilisateur se sont pointé sur un site

publicitaire et non pas un site de vente.

Figure 4: Barre des menues de Mytek

-

Les catégories sont présentées sous forme d’une barre des

menus ce qui limite l’ajout d’autres catégories car si en ajoute plusieurs

catégories nous allons obtenir soit une longue barre de menue ce qui

entrainera l’apparence d’une barre de défilement horizontale dans la page,

Raissi ADEL

Page 13

Mémoire de mastère N2TR UVT 2012/2013

soit nous aurons recours à minimiser la taille des menues et donc

changement de l’aspect de la page.

-

Beaucoup de couleurs avec des tendances différentes ce qui

cause une sorte d’incohérence entre les vues, le client se trouve perdu

dans la grande variété des couleurs abandonnant le but principal du site.

-

-

Les titres sont à 100% de niveau h4 et h5, une taille excessive

Excès des images, des animations et des liens même en

doublant les mêmes images dans la même page.

-

Les liens contact, plan du site et favoris sont presque invisibles

en haut de la page, ce qui diminue la chance de multiplicité de clients.

Figure 5: présentation des nouveaux produits

-

Les meilleures ventes et les nouveaux articles sont affichés au

milieu de la page avec les autres produits, ce qui ne leur attire point

l’attention.

- Des liens très importants comme le lien « voir », menant à la

page des détails d’un article pour plus d’information, sont presque

invisibles.

-

Le panier est disponible pour tout le monde sans inscription,

ce qui provoque

les commandes non rigoureuses entrainant au

remplissage de la base de données sans le moindre intérêt.

Raissi ADEL

Page 14

Mémoire de mastère N2TR UVT 2012/2013

-

Les bannières publicitaires, les catégories et les menus du site

ne seraient plus visibles sur la page dès que nous descendons en bas de

cette dernière.

2. Avantage :

-

-

Titres claires.

Informations disponibles sur la même page ce qui donne une

idée très claire sur les produits dès la première visite des pages.

-

-

Les animations se diffèrent par catégorie.

Les liens des réseaux sociaux et des sites de même intérêt

sont disponible en permanence.

-

Les contacts des boutiques de Mytek sont clairs et net.

Raissi ADEL

Page 15

Mémoire de mastère N2TR UVT 2012/2013

II.

Analyse du Site Phono

1. Inconvénients :

Figure 6: Partie publicitaire de Phono

- Partie publicitaire énorme, qui prend une grande partie de la

page, même remarque que pour notre site web de Mytek et presque tous

les sites de vente tunisiens.

-

Les catégories se présentent sous forme de sous titres en bas

de la page ce qui ne donne pas l’intention des liens ou des sélections des

catégories des produits.

Figure 7: Présentation des promotions se des nouveaux produits

-

Les promotions et les nouveaux articles ne s’affichent pas en

premier lieux pour attirer l’attention de l’utilisateur, ils sont affichés entre

les autres articles.

Raissi ADEL

Page 16

Mémoire de mastère N2TR UVT 2012/2013

-

Les liens et les bannières publicitaires ne sont plus visibles en

descendant vers le bas de page.

-

Le panier est aussi disponible pour tout le monde comme la

majorité des sites de vente en ligne ce qui rend l’essayage des

commandes sans achat plus simple et donc entraine la présence des

milliers de ces commandes dans la base sans intérêt.

-

Les liens accueil, société … sont presque invisibles d’où une

minorité des clients qui vont distinguer ces liens et profiter de leurs

magnitudes.

Figure 8: Apparence multiple des mêmes critères de recherche

-

Les mêmes formulaires de recherche apparaissent trois fois sur

la même page, une présentation qui ne peut engendrer que le chargement

de cette page sans profit.

2. Avantage :

Pour notre site web de phono nous trouvons plusieurs avantages

surtout en ce qui concerne l’aspect ergonomique des pages.

- Une cohérence entre les tendances des couleurs choisies.

- Les liens sont clairs.

- La barre des menus représente une variété des liens logiques

d'une importance primordiale.

Raissi ADEL

Page 17

Mémoire de mastère N2TR UVT 2012/2013

III. Synthèse :

Les inconvénients rencontrés

Nos solutions proposées

L’incohérence des couleurs

Utilisation des tendances d’une

utilisées dans les pages des sites.

seule couleur, nous avons choisi le

bleu et ses dérivés.

Les doublets et triplets des

Spécification des parties de la

liens dans la même page.

page c'est-à-dire chaque partie sera

dédiée à son propre besoin.

La disparition de la barre des

Division des pages templates

menues et de la bannière publicitaire

en sections fixes qui s’appellent en

en descendant vers

le bas des

java les « playout »

pages.

Les problèmes d’ajout des

Présenter les catégories dans

catégories et leurs influences sur

une liste déroulante qui reste toujours

l’ergonomie des pages du site.

flexible à ajouter autant de catégories

que possible.

Un grand nombre d’images

Utilisation d’une «carousel» un

sur la même page.

panneau qui affiche seulement trois

produits et donc 3 images par page.

La disponibilité de panier

Le panier sera dans notre site

pour tout le monde sur la page

disponible seulement pour les clients

accueil, menant à un bourrage de

après l’inscription et l’authentification.

commandes non validées.

Conclusion

Beaucoup des leçons tirées de ce chapitre, il reste maintenant

d’étudier les Méthodes de ventes utilisées actuellement par la société

d’accueil et de bien spécifier les besoin pour la réalisation d’une nouvelles

solution plus efficaces.

Raissi ADEL

Page 18

Mémoire de mastère N2TR UVT 2012/2013

Chapitre III : Etude de l’existant & spécification des

besoins

Raissi ADEL

Page 19

Mémoire de mastère N2TR UVT 2012/2013

Introduction :

Dans ce troisième chapitre, nous allons mettre le sujet dans son

cadre général. Par la suite, nous aborderons l’étude de la manière de

vente actuelle, suivie d’une critique pour pouvoir concentrer sur les

problèmes à résoudre pendant la réalisation de notre projet.

Ainsi, ce chapitre présente un ensemble des besoins fonctionnels et

autres non fonctionnels.

I. Etude de l’existant

1. Description de l’existant

Comme toutes les sociétés commerciales, LSAT Nokia possède sa

manière de présenter et de commercialiser ses produits.

Cette manière est divisée en deux étapes principales, la premières

étape c’est l’exposition des produits par des affiches publicitaires, des

dépliants, les spots publicitaire dans les radios et les télévision et aussi

par des vitrines qui se trouvent au sein de la société, la deuxième étape

consiste à vendre les produits à guichet ou par l’intermédiaire des agents

commerciaux.

2. Critique de l’existant

Depuis sa mise en place La procédure existante atteint ces objectifs

avec une fréquence limité et non extensible voir qu’elle ne concerne qu’un

nombre limité des clients qui sont très proches de la société pour pouvoir

visiter les vitrines, voir les produits exposés et savoir la disponibilité de

ces derniers ainsi que leurs prix et leurs caractéristiques techniques, tout

ça représente une entrave devant la commercialisation des produits.

3. Solution proposée

Afin de pallier aux défaillances, nous proposons d’informatiser la

commercialisation de nos produits par la création d’une boutique virtuelle

sur Internet.

Il nous est indispensable de préciser à cette étape que notre projet

de fin d’étude prendra en considération toutes ces contraintes en essayant

Raissi ADEL

Page 20

Mémoire de mastère N2TR UVT 2012/2013

de présenter les solutions nécessaires tout en respectant les règles des

jeux d’un site web tels que la simplicité de navigation entre les pages, la

bonne ergonomie et la sécurité des données confidentielles des clients.

II. Etude des besoins

Dans cette section du chapitre, nous nous intéressons aux besoins

des utilisateurs traités dans notre projet c’est à dire l’inscription du client,

le choix des produits, le lancement des commandes enfin la confirmation

et donc le payement en ligne à travers les spécifications fonctionnelles et

non fonctionnelles pour aboutir à un site de qualité qui répond aux besoins

des clients.

1. Besoins fonctionnels

Les besoins fonctionnels se présentent en huit grandes parties

- Exposition des produits ainsi que leurs prix et caractéristiques.

- Inscription des clients.

- Ajout des produits choisis au panier.

- Choix du mode de livraison.

- Choix de la boutique de livraison.

- Confirmation de la commande.

- Le payement en ligne.

- Confirmation de l’opération d’achat et la réception de la facture.

a. L’exposition des produits:

Notre site doit disposer d’une vitrine virtuelle à travers laquelle le

client peut consulter une grande variété des produits, il sera donc

indispensable d’y présenter les prix et les caractéristiques techniques de

chaque produit pour faciliter la sélection du produit à acheter.

b. L’inscription du client :

Jusqu’à ce stade, le client est toujours anonyme mais pour pouvoir

passer à un stade plus rigoureux, il faut qu’il s’inscrive, ce la se fait

uniquement pour la première commande mais après, notre client peut

Raissi ADEL

Page 21

Mémoire de mastère N2TR UVT 2012/2013

s’authentifier avec son E-mail et son mot de passe pour passer d’autres

commandes.

c. Ajout des produits au panier :

Après le choix d’un produit le client doit mentionner la quantité qui

s’ajoute automatiquement à son panier avec le prix unitaire et le prix

total.

d. Mode de livraison :

Un client qui a déjà confirmé sa commande il est libre de choisir le

mode de livraison de sa marchandise soit à domicile ou chez une boutique

selon une liste de chois mentionnée sur notre site web.

e. Boutique de livraison:

Si le mode de livraison choisi est la boutique il faut que le client

indique cette boutique avec une précision qui permet aux livreurs d’être

sûrs que la marchandise sera dans le bon lieu et dans les rendez-vous,

ayant une panoplie de boutiques réelles, le client pourra choisir la plus

proche.

f. la livraison à domicile :

En choisissant cette option comme mode de livraison, le client

devrait remplir soigneusement un formulaire contenant les informations

nécessaires telles que :

- Le nom du destinataire qui peut être le client même ou une

autre personne.

- L’adresse précise de livraison.

- Le numéro de la pièce d’identité du destinataire.

- Le jour et l’heur de la livraison estimés.

g. La confirmation de la commande :

Jusqu’à cette phase on a un client, une commande et une adresse

de livraison le chemin maintenant est plus clair, la commande ne passera

Raissi ADEL

Page 22

Mémoire de mastère N2TR UVT 2012/2013

qu’après la validation de toutes les informations qui sont affichées dans

une seule interface avant de passer à la phase de payement.

h. Le payement :

C’est une phase très sensible, pour cela il faut qu’elle soit très

sécurisée, pour terminer la procédure de payement avec succès le client

doit choisir un type de carte dans une liste de choix des cartes proposées

sur notre site web, indiquer le numéro de sa carte et sa valeur de

vérification dite CVV.

i. La fin de l’opération d’achat:

La page finale représente un petit message de remerciement à nos

clients avec une idée sur l’adresse, la date, le temps de la livraison en

question et bien sur la possibilité d’imprimer la facture du client.

2. Besoins non fonctionnels :

Les besoins non fonctionnels sont importants car ils agissent de

façon indirecte sur le résultat et sur le rendement de l’utilisateur, ce qui

fait qu’ils ne doivent pas être négligés, pour cela il faut répondre aux

exigences suivantes :

a. Fiabilité:

L’application doit fonctionner de façon cohérente sans erreurs et

doit être satisfaisante.

b. Les erreurs :

Les ambigüités doivent être signalées par des messages d’erreurs

bien organisés pour bien guider l’utilisateur et le familiariser avec notre

site web.

c. Ergonomie et bonne Interface :

L’application doit être adaptée à l’utilisateur sans qu’il ne fournisse

aucun effort (utilisation claire et facile) de point de vue navigation entre

les différentes pages, couleurs et mise en textes utilisés.

Raissi ADEL

Page 23

Mémoire de mastère N2TR UVT 2012/2013

d. Sécurité :

Notre solution doit respecter surtout la confidentialité des données

personnelles des clients qui reste l’une des contraintes les plus

importantes dans les sites web.

e. Aptitude à la maintenance et la réutilisation :

Le système doit être conforme à une architecture standard et claire

permettant sa maintenance et sa réutilisation.

f. Compatibilité et portabilité :

Un site web quel que soit son domaine, son éditeur et son langage

de programmation ne peut être fiable qu’avec une compatibilité avec tout

les navigateurs web et tous les moyens que ce soit PC, IPAD ou Mobiles.

Conclusion

Dans ce chapitre on a présenté une étude du système existant, les

lacunes qu’il comprend ainsi que les solutions que nous proposons pour

pallier ces problèmes, nous avons aussi cité les besoins fonctionnels et

non fonctionnels qui sont indispensables pour mieux faciliter le travail à

réaliser.

Dans le chapitre suivant nous allons aborder l’étude conceptuelle

de notre site, tout en mentionnant tous les scénarios possibles, les

acteurs, les diagrammes …

Raissi ADEL

Page 24

Mémoire de mastère N2TR UVT 2012/2013

Chapitre IV : Conception

Raissi ADEL

Page 25

Mémoire de mastère N2TR UVT 2012/2013

Introduction

Dans le cycle de vie de notre projet, la conception représente une

phase primordiale et déterminante pour produire une application de haute

qualité. C’est dans ce stade que nous devons clarifier en premier lieu la

vue globale, en décrivant l’architecture générale que nous allons suivre

dans la partie réalisation de notre projet. Puis, dans un deuxième lieu

nous allons détailler notre choix conceptuel à travers plusieurs types de

diagrammes.

I.

Conception Générale

1. Cycle de vie :

1.1 Définition

Le cycle de vie d'une application comprend toutes les étapes depuis

sa conception et sa réalisation jusqu’à sa mise en œuvre. L'objectif d'un

tel découpage est de permettre de définir des jalons intermédiaires

permettant la validation du développement du logiciel et la vérification de

son processus de développement.

L'origine de ce découpage provient du constat que les erreurs ont

un coût si élevé qu'elles sont détectées tardivement dans le processus de

réalisation. Le cycle de vie permet de détecter les erreurs le plutôt

possible.

1.2 Les activités d’un cycle de vie

Le cycle de vie suivi pour réaliser un site e-commercial, comprend

généralement au minima les activités suivantes :

-

Spécification des besoins: elle consiste à définir la finalité

du projet et son intégration dans une stratégie globale.

-

Conception générale: dans cette activité, il s'agit de la

préparation de l'architecture générale du logiciel.

Raissi ADEL

Page 26

Mémoire de mastère N2TR UVT 2012/2013

-

Conception détaillée: elle consiste à définir précisément

chaque sous-ensemble du logiciel.

- Développement: (Implémentation ou programmation)

il

s’agit d’une traduction des fonctionnalités définies dans la phase de

conception en langage de programmation.

-

Tests unitaires: ils permettent de vérifier individuellement

que chaque sous-ensemble du logiciel est implémenté conformément aux

normes définies dan