Conception Developpement Site Web e Commerce Compte LSAT Nokia

Mmoire de Mastre
Pour obtenir le mastre en nouvelles technologies de

tlcommunication et rseaux
Thme :
Conception et dveloppement dun site web de e-
commerce pour le compte de LSAT_Nokia
Ralis par :
Adel RAISSI
Encadr par :
UVT : LSAT_Nokia :
Melle Maroua CHAABANI M. Majdi Guermazi
Mme Lamia Bouafif
Soutenu le : lUVT
Devant le jury compos de :
: Prsident
: Membre
: Rapporteur

Anne Universitaire :
2012-2013

Ddicaces
Remerciement
Rsum
Dclaration de proprit
Table des matires
Table des figures
Avant propos
Introduction gnrale
Cadre gnral
Etude pralable & spcification des besoins
Conception
Ralisation
Conclusion et perspectives
Recommandation
Glossaire
Webographie

Ddicaces
A mes parents Mohamed Salah et Zohra ainsi
que mes frres et surs.
A ma femme et binme Feten Ridene Raissi.
A ma belle mre Assia Ridene.
A la mmoire de mon beau pre Mohamed
Ridene.
A mes amis et mes collgues (UVT + LSAT)
A tous ceux qui maiment et que jaime.

Je ddie ce modeste travail

Remerciement

En prambule ce mmoire je remercie ALLAH
qui maide et me donne la patience et le courage durant
ces langues annes dtude.
Aussi mes remerciements au corps professoral et
administratif de luniversit Virtuelle de Tunis qui
dploient de grands efforts pour nous assurer une
formation trs actualise.
Je remercie sincrement Mlle Marwa Chaabani,
Mme Lamia Bouafif et Mr Riadh Bouhouchi :mes
encadreurs Universitaire ainsi que Mr Majdi
Guermazi mon encadreur Industriel, qui se sont
toujours montrs disponibles tout au long de la
ralisation de ce mmoire, ainsi pour linspiration,
laide et le temps quils ont bien voulu me consacrer, et
sans qui, ce mmoire naurait jamais vu le jour.

Rsum
Notre mmoire se concentre sur ltude, la conception et la
ralisation dun site de commerce lectronique pour le compte de LSAT
Nokia, qui permet notre socit denrichir de plus en plus sa base de
donnes clientle, ayant pour cible dans notre cas, ce quon appelle le
cyberconsommateur, cest dire le client distant sur le net.
Les objectifs majeurs de ce site sont : la possibilit de prsenter
nos produits dans une boutique virtuelle la disposition de tout le monde,
de faire des transactions commerciales, de faciliter la tache du payement
en ligne et de suivre la livraison des produits.
Ce prsent rapport, rsumera le droulement de toutes les tapes
du projet.

Abstract
Our master thesis concentrates on the study, the design and the
implementation of an e-commerce website on the behalf of the LSAT
Nokia company, which will allow it to increasingly expand its customers
database and the target audience this time, is called the cyber-
consumers.
The main objectives of this web site are: the ability to present our
products in an online store available to everyone for checking or
commanding and commercial transactions, in order to facilitate the task of
online payment and follow the products delivery until receiving the
customers confirmation.
This report will summarize all the stages of our project.

Proprit intellectuelle

Les opinions mises dans ce mmoire sont propres leur auteur
Adel RAISSI. LUniversit Virtuelle de Tunis ne donne ni approbation ni
improbation aux opinions exprimes par lauteur.
La politique de lUniversit Virtuelle de Tunis est de dnoncer
vigoureusement et de sanctionner svrement toute utilisation non-
conforme lthique des donnes, ides des autres ou reproduction qui ne
respecte strictement pas le droit de la proprit intellectuelle
Mmoire de mastre N2TR UVT 2012/2013
Raissi ADEL Page 1

Table des matires

Table des figures .................................................................... 4
Introduction gnrale : ......................................................... 6
Chapitre I : Cadre gnral........................................................ 7
I. Cadre du projet .............................................................. 8
II. Lorganisme daccueil : .................................................. 8
1. Description : ............................................................... 8
2. Organigramme de la socit daccueil : ........................... 8
III. Prsentation du sujet : .................................................. 9
IV. Plan de travail : ............................................................ 9
1. Organisation du rapport : .............................................. 9
2. Diagramme de Gantt : ................................................ 10
Conclusion ...................................................................... 11
Chapitre II : Etude Pralable .................................................. 12
Introduction ......................................................................... 13
I. Analyse du Site Mytek ...................................................... 13
1. Incontinents : ............................................................ 13
2. Avantage : ................................................................ 15
II. Analyse du Site Phono .................................................. 16
1. Incontinents : ............................................................ 16
2. Avantage : ................................................................ 17
III. Synthse :............................................................... 18
Chapitre III : Etude de lexistant & spcification des besoins ...... 19
Introduction : .................................................................... 20
Raissi ADEL Page 2

I. Etude de lexistant .......................................................... 20
1. Description de lexistant ............................................... 20
2. Critique de lexistant .................................................... 20
3. Solution propose ........................................................ 20
II. Etude des besoins .......................................................... 21
1. Besoins fonctionnels ..................................................... 21
2. Besoins non fonctionnels : ............................................ 23
Conclusion ........................................................................ 24
Chapitre IV : Conception ........................................................ 25
Introduction ...................................................................... 26
I. Conception Gnrale ..................................................... 26
1. Cycle de vie : ............................................................ 26
2. Mthodologie de conception .......................................... 30
II. Conception dtaill ..................................................... 31
1. Les diagrammes des cas dutilisation. ........................... 31
2. Les diagrammes dactivits. ........................................ 35
3. Diagrammes des squences ........................................ 40
4. Diagramme de classes ................................................ 44
5. Schmas Relationnelles : ............................................ 47
III. Maquettes ................................................................. 48
1. Structure de lapplication ............................................ 48
2. La charte graphique ................................................... 48
Conclusion ........................................................................ 50
Chapitre V : Ralisation ........................................................ 51
I. Environnement de travail : ............................................. 52
1. Environnement Hard : ................................................. 52
Raissi ADEL Page 3

2- Atelier de Gnie Logiciel : ............................................. 52
II. Dmonstrations des interfaces: .................................... 56

Raissi ADEL Page 4

Table des figures
Figure 1: Organigramme de L'organisme d'accueil ...................... 8
Figure 2: Diagramme de Gantt ............................................... 10
Figure 3: Modle de cycle de vie en cascade ... Erreur ! Signet non
dfini.
Figure 4: Modle de cycle de vie en V . Erreur ! Signet non dfini.
Figure 5: Modle de cycle de vie en Spirale .... Erreur ! Signet non
dfini.
Figure 6: L'architecture MVC .................................................. 31
Figure 7: Cas d'utilisation d'un visiteur Erreur ! Signet non dfini.
Figure 8: Cas d'utilisation d'un client .. Erreur ! Signet non dfini.
Figure 9: Cas d'utilisation d'un administrateur .......................... 34
Figure 10: Diagramme d'activit Inscription ............................. 37
Figure 11: Diagramme d'activit Authentification ...................... 38
Figure 12: diagramme de gestion des articles ........................... 39
Figure 13: Diagramme de squences de l'inscription ................. 42
Figure 14: Diagramme de squences d'authentification .............. 43
Figure 15: Diagramme de squences 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: Slection par critre ............................................... 57
Figure 23: Dtails d'un article slectionn ................................ 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: Tlchargement de l'image de l'article ...................... 61
Figure 29: Liste des articles.................................................... 61
Raissi ADEL Page 5

Figure 30: Changement du privilge ........................................ 62
Figure 31: Accueil du client (catalogue client) ........................... 62
Figure 32: Dtails des articles en mode client ........................... 63
Figure 33: Changement du profil ............................................. 63

Raissi ADEL Page 6

Introduction gnrale :
Des ventes de mains en mains, vers des ventes virtuelles, passent
les priorits des oprations de ventes des biens et des services, ce qui
nous rend obligs de donner plus dimportance la vente lectronique.
Les boutiques en ligne sont depuis des annes, largement
conseills pour les socits qui se basent sur la vente des produits et
mme des services Ces types de sites web reprsentent un dispositif
global fournissant aux clients un pont de passage lensemble des
informations, des produits, et des services partir dun portail unique en
rapport avec son activit.
Les sites de vente en ligne permettent aux clients de profiter dune
foire virtuelle disponible est quotidiennement mise jours sans la moindre
contrainte, ce qui leur permettrai de ne jamais rater les coups de cur,
ainsi Une foire sans problmes de distance gographique, ni dhoraire de
travail ni de disponibilit de transport. Dune autre part ces sites offrent
la socit de profiter de cette espace pour exposer ses produits une plus
large base de clientle.
Notre projet est ralis dans le cadre du mmoire de mastre N2TR
ayant comme objectif principal : la conception et la cration dune
boutique virtuelle pour le compte de LSAT_Nokia qui est une socit de
vente et rparation des tlphones mobiles Nokia.

Raissi ADEL Page 7

Chapitre I : Cadre gnral

Raissi ADEL Page 8

I. Cadre du projet
Durant le quatrime semestre N2TR au sein de lUniversit Virtuelle
de Tunis UVT nous somme appels passer un stage de quatre mois
dont le fruit est ce mmoire.
Notre projet portera sur la conception et la ralisation dun site web
commercial pour le compte de la socit LSAT_Nokia.
II. Lorganisme daccueil :
1. Description :
LSAT-NOKIA comme lindique son nom cest une socit Sarl,
Tunisienne qui reprsente les produits Nokia en Tunisie, on peut aussi la
nommer le groupe LSAT parce quelle a un sige social Tunis et des
agences distribues sur le reste des gouvernorats du pays. Les principales
activits de LSAT_Nokia sont la vente et la rparation des tlphones
mobiles de la marque internationale NOKIA de la basse la haute gamme.
2. Organigramme de la socit daccueil :

Figure 1: Organigramme de L'organisme d'accueil
Raissi ADEL Page 9

III. Prsentation du sujet :
Le sujet de notre mmoire de mastre consiste dvelopper une
boutique en ligne pour prsenter, commercialiser et livrer nos produits
nos clients, que nous estimons devenir de plus en plus nombreux.
L'objectif de ce mmoire est concevoir et dvelopper un site web
commercial qui doit permettre linscription des visiteurs pour devenir
clients, le suivi des commandes effectue, 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 aprs la mise en place de ce site, pour cela nous allons
organiser notre prsent rapport de la manire suivante :
Dans le premier chapitre Cadre gnral , nous allons mettre
notre projet dans son cadre gnral en dfinissant la socit daccueil et
en prsentant le sujet.
Dans le deuxime chapitre intitul Etudes pralables, nous
Allons prendre deux sites web tunisiens de la mme activit que le notre,
comme des exemples a fin de les analyser et dgager les bnfices et les
inconvnients et donc obtenir une ide plus claire de ce que nous devons
faire dans notre site.
Dans le troisime chapitre intitul Etude de lexistant et
spcification des besoins nous allons en premier lieu, tudier les
Procdures de vente utilises actuellement en relevant les manques et les
insuffisances et proposant les solutions convenables. En deuxime lieu,
nous prcisons les principales solutions offertes par notre projet en tenant
compte de ses besoins fonctionnels et non fonctionnels. Et enfin, nous
prsentons le contexte global de notre projet.
Raissi ADEL Page 10

Dans le quatrime chapitre Conception nous abordons la phase
de conception. Nous spcifions dabord la mthode de conception adapte,
aprs, nous prsentons les diffrents diagrammes de notre site web.
Enfin et au niveau du cinquime et dernier chapitre intitul
Ralisation, nous allons prsenter notre site web, en mentionnant les
diffrents environnements de travail matriels et logiciels utiliss pour
entamer le projet, ainsi quen citant les principales interfaces ralises.
2. Diagramme de Gantt :
Le diagramme de Gantt est un outil de planification des tches
ncessaires pour la ralisation d'un projet quelque soit le secteur
dactivit. Il permet de visualiser lavancement des tches dun projet de
manire simple et concise, de planifier et suivre les besoins en ressources
humaines et matrielles et donc de pouvoir suivre lavancement du projet.
Le diagramme suivant va reprsenter les taches principales
raliser dans notre projet.

Figure 2: Diagramme de Gantt
Raissi ADEL Page 11

Conclusion
Dans ce premier chapitre nous avons mis le sujet dans son cadre
gnral. Nous allons commencer un deuxime chapitre intitul Etudes
pralables dans le quel nous allons prciser nos besoins aprs une tude
analytique et comparative entre deux exemples de sites de ventes en
ligne en dduisant leurs avantages et leurs dfaillances que nous allons
dpasser dans notre projet.

Raissi ADEL Page 12

Chapitre II : Etude Pralable

Raissi ADEL Page 13

Introduction
Il est indispensable avant de se lancer dans la ralisation de tout
projet, de bien tudier et analyser des projets similaires pour profiter des
avantages et viter les malveillances dans le prsent projet.
Pour cela jai choisis deux sites trs fameux dans la vente en ligne
en Tunisie le premier est www.Mytek.tn et le deuxime est
www.phonotunisie.com.
I. Analyse du Site Mytek
1. Inconvnients :

Figure 3: partie publicitaire de Mytek
- Une trs grande partie de la page rserve la publicit de
telle sorte que de premier coup lutilisateur se sont point sur un site
publicitaire et non pas un site de vente.

Figure 4: Barre des menues de Mytek
- Les catgories sont prsentes sous forme dune barre des
menus ce qui limite lajout dautres catgories car si en ajoute plusieurs
catgories nous allons obtenir soit une longue barre de menue ce qui
entrainera lapparence dune barre de dfilement horizontale dans la page,
Raissi ADEL Page 14

soit nous aurons recours minimiser la taille des menues et donc
changement de laspect de la page.

- Beaucoup de couleurs avec des tendances diffrentes ce qui
cause une sorte dincohrence entre les vues, le client se trouve perdu
dans la grande varit des couleurs abandonnant le but principal du site.
- Les titres sont 100% de niveau h4 et h5, une taille excessive
- Excs des images, des animations et des liens mme en
doublant les mmes images dans la mme 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: prsentation des nouveaux produits

- Les meilleures ventes et les nouveaux articles sont affichs au
milieu de la page avec les autres produits, ce qui ne leur attire point
lattention.
- Des liens trs importants comme le lien voir , menant la
page des dtails dun article pour plus dinformation, 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 donnes sans le moindre intrt.
Raissi ADEL Page 15

- Les bannires publicitaires, les catgories et les menus du site
ne seraient plus visibles sur la page ds que nous descendons en bas de
cette dernire.
2. Avantage :
- Titres claires.
- Informations disponibles sur la mme page ce qui donne une
ide trs claire sur les produits ds la premire visite des pages.
- Les animations se diffrent par catgorie.
- Les liens des rseaux sociaux et des sites de mme intrt
sont disponible en permanence.
- Les contacts des boutiques de Mytek sont clairs et net.

Raissi ADEL Page 16

II. Analyse du Site Phono
1. Inconvnients :

Figure 6: Partie publicitaire de Phono
- Partie publicitaire norme, qui prend une grande partie de la
page, mme remarque que pour notre site web de Mytek et presque tous
les sites de vente tunisiens.
- Les catgories se prsentent sous forme de sous titres en bas
de la page ce qui ne donne pas lintention des liens ou des slections des
catgories des produits.

Figure 7: Prsentation des promotions se des nouveaux produits
- Les promotions et les nouveaux articles ne saffichent pas en
premier lieux pour attirer lattention de lutilisateur, ils sont affichs entre
les autres articles.
Raissi ADEL Page 17

- Les liens et les bannires 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 lessayage des
commandes sans achat plus simple et donc entraine la prsence des
milliers de ces commandes dans la base sans intrt.
- Les liens accueil, socit sont presque invisibles do une
minorit des clients qui vont distinguer ces liens et profiter de leurs
magnitudes.

Figure 8: Apparence multiple des mmes critres de recherche
- Les mmes formulaires de recherche apparaissent trois fois sur
la mme page, une prsentation 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 laspect ergonomique des pages.
- Une cohrence entre les tendances des couleurs choisies.
- Les liens sont clairs.
- La barre des menus reprsente une varit des liens logiques
d'une importance primordiale.

Raissi ADEL Page 18

III. Synthse :

Les inconvnients rencontrs Nos solutions proposes
Lincohrence des couleurs
utilises dans les pages des sites.
Utilisation des tendances dune
seule couleur, nous avons choisi le
bleu et ses drivs.
Les doublets et triplets des
liens dans la mme page.
Spcification des parties de la
page c'est--dire chaque partie sera
ddie son propre besoin.
La disparition de la barre des
menues et de la bannire publicitaire
en descendant vers le bas des
pages.
Division des pages templates
en sections fixes qui sappellent en
java les playout
Les problmes dajout des
catgories et leurs influences sur
lergonomie des pages du site.
Prsenter les catgories dans
une liste droulante qui reste toujours
flexible ajouter autant de catgories
que possible.
Un grand nombre dimages
sur la mme page.
Utilisation dune carousel un
panneau qui affiche seulement trois
produits et donc 3 images par page.
La disponibilit de panier
pour tout le monde sur la page
accueil, menant un bourrage de
commandes non valides.
Le panier sera dans notre site
disponible seulement pour les clients
aprs linscription et lauthentification.

Conclusion
Beaucoup des leons tires de ce chapitre, il reste maintenant
dtudier les Mthodes de ventes utilises actuellement par la socit
daccueil et de bien spcifier les besoin pour la ralisation dune nouvelles
solution plus efficaces.

Raissi ADEL Page 19

Chapitre III : Etude de lexistant & spcification des
besoins

Raissi ADEL Page 20

Introduction :
Dans ce troisime chapitre, nous allons mettre le sujet dans son
cadre gnral. Par la suite, nous aborderons ltude de la manire de
vente actuelle, suivie dune critique pour pouvoir concentrer sur les
problmes rsoudre pendant la ralisation de notre projet.
Ainsi, ce chapitre prsente un ensemble des besoins fonctionnels et
autres non fonctionnels.
I. Etude de lexistant
1. Description de lexistant
Comme toutes les socits commerciales, LSAT Nokia possde sa
manire de prsenter et de commercialiser ses produits.
Cette manire est divise en deux tapes principales, la premires
tape cest lexposition des produits par des affiches publicitaires, des
dpliants, les spots publicitaire dans les radios et les tlvision et aussi
par des vitrines qui se trouvent au sein de la socit, la deuxime tape
consiste vendre les produits guichet ou par lintermdiaire des agents
commerciaux.
2. Critique de lexistant
Depuis sa mise en place La procdure existante atteint ces objectifs
avec une frquence limit et non extensible voir quelle ne concerne quun
nombre limit des clients qui sont trs proches de la socit pour pouvoir
visiter les vitrines, voir les produits exposs et savoir la disponibilit de
ces derniers ainsi que leurs prix et leurs caractristiques techniques, tout
a reprsente une entrave devant la commercialisation des produits.
3. Solution propose
Afin de pallier aux dfaillances, nous proposons dinformatiser la
commercialisation de nos produits par la cration dune boutique virtuelle
sur Internet.
Il nous est indispensable de prciser cette tape que notre projet
de fin dtude prendra en considration toutes ces contraintes en essayant
Raissi ADEL Page 21

de prsenter les solutions ncessaires tout en respectant les rgles des
jeux dun site web tels que la simplicit de navigation entre les pages, la
bonne ergonomie et la scurit des donnes confidentielles des clients.
II. Etude des besoins
Dans cette section du chapitre, nous nous intressons aux besoins
des utilisateurs traits dans notre projet cest dire linscription du client,
le choix des produits, le lancement des commandes enfin la confirmation
et donc le payement en ligne travers les spcifications fonctionnelles et
non fonctionnelles pour aboutir un site de qualit qui rpond aux besoins
des clients.
1. Besoins fonctionnels
Les besoins fonctionnels se prsentent en huit grandes parties
- Exposition des produits ainsi que leurs prix et caractristiques.
- 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 lopration dachat et la rception de la facture.
a. Lexposition des produits:
Notre site doit disposer dune vitrine virtuelle travers laquelle le
client peut consulter une grande varit des produits, il sera donc
indispensable dy prsenter les prix et les caractristiques techniques de
chaque produit pour faciliter la slection du produit acheter.
b. Linscription du client :
Jusqu ce stade, le client est toujours anonyme mais pour pouvoir
passer un stade plus rigoureux, il faut quil sinscrive, ce la se fait
uniquement pour la premire commande mais aprs, notre client peut
Raissi ADEL Page 22

sauthentifier avec son E-mail et son mot de passe pour passer dautres
commandes.
c. Ajout des produits au panier :
Aprs le choix dun produit le client doit mentionner la quantit qui
sajoute automatiquement son panier avec le prix unitaire et le prix
total.
d. Mode de livraison :
Un client qui a dj 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 mentionne 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 prcision qui permet aux livreurs dtre
srs que la marchandise sera dans le bon lieu et dans les rendez-vous,
ayant une panoplie de boutiques relles, 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
ncessaires telles que :
- Le nom du destinataire qui peut tre le client mme ou une
autre personne.
- Ladresse prcise de livraison.
- Le numro de la pice didentit du destinataire.
- Le jour et lheur de la livraison estims.
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 23

quaprs la validation de toutes les informations qui sont affiches dans
une seule interface avant de passer la phase de payement.
h. Le payement :
Cest une phase trs sensible, pour cela il faut quelle soit trs
scurise, pour terminer la procdure de payement avec succs le client
doit choisir un type de carte dans une liste de choix des cartes proposes
sur notre site web, indiquer le numro de sa carte et sa valeur de
vrification dite CVV.
i. La fin de lopration dachat:
La page finale reprsente un petit message de remerciement nos
clients avec une ide sur ladresse, la date, le temps de la livraison en
question et bien sur la possibilit dimprimer la facture du client.
2. Besoins non fonctionnels :
Les besoins non fonctionnels sont importants car ils agissent de
faon indirecte sur le rsultat et sur le rendement de lutilisateur, ce qui
fait quils ne doivent pas tre ngligs, pour cela il faut rpondre aux
exigences suivantes :
a. Fiabilit:
Lapplication doit fonctionner de faon cohrente sans erreurs et
doit tre satisfaisante.
b. Les erreurs :
Les ambigits doivent tre signales par des messages derreurs
bien organiss pour bien guider lutilisateur et le familiariser avec notre
site web.
c. Ergonomie et bonne Interface :
Lapplication doit tre adapte lutilisateur sans quil ne fournisse
aucun effort (utilisation claire et facile) de point de vue navigation entre
les diffrentes pages, couleurs et mise en textes utiliss.
Raissi ADEL Page 24

d. Scurit :
Notre solution doit respecter surtout la confidentialit des donnes
personnelles des clients qui reste lune des contraintes les plus
importantes dans les sites web.
e. Aptitude la maintenance et la rutilisation :
Le systme doit tre conforme une architecture standard et claire
permettant sa maintenance et sa rutilisation.
f. Compatibilit et portabilit :
Un site web quel que soit son domaine, son diteur et son langage
de programmation ne peut tre fiable quavec une compatibilit avec tout
les navigateurs web et tous les moyens que ce soit PC, IPAD ou Mobiles.
Conclusion
Dans ce chapitre on a prsent une tude du systme existant, les
lacunes quil comprend ainsi que les solutions que nous proposons pour
pallier ces problmes, nous avons aussi cit les besoins fonctionnels et
non fonctionnels qui sont indispensables pour mieux faciliter le travail
raliser.
Dans le chapitre suivant nous allons aborder ltude conceptuelle
de notre site, tout en mentionnant tous les scnarios possibles, les
acteurs, les diagrammes

Raissi ADEL Page 25

Chapitre IV : Conception

Raissi ADEL Page 26

Introduction
Dans le cycle de vie de notre projet, la conception reprsente une
phase primordiale et dterminante pour produire une application de haute
qualit. Cest dans ce stade que nous devons clarifier en premier lieu la
vue globale, en dcrivant larchitecture gnrale que nous allons suivre
dans la partie ralisation de notre projet. Puis, dans un deuxime lieu
nous allons dtailler notre choix conceptuel travers plusieurs types de
diagrammes.
I. Conception Gnrale
1. Cycle de vie :
1.1 Dfinition
Le cycle de vie d'une application comprend toutes les tapes depuis
sa conception et sa ralisation jusqu sa mise en uvre. L'objectif d'un
tel dcoupage est de permettre de dfinir des jalons intermdiaires
permettant la validation du dveloppement du logiciel et la vrification de
son processus de dveloppement.
L'origine de ce dcoupage provient du constat que les erreurs ont
un cot si lev qu'elles sont dtectes tardivement dans le processus de
ralisation. Le cycle de vie permet de dtecter les erreurs le plutt
possible.
1.2 Les activits dun cycle de vie
Le cycle de vie suivi pour raliser un site e-commercial, comprend
gnralement au minima les activits suivantes :
- Spcification des besoins: elle consiste dfinir la finalit
du projet et son intgration dans une stratgie globale.
- Conception gnrale: dans cette activit, il s'agit de la
prparation de l'architecture gnrale du logiciel.

Raissi ADEL Page 27

- Conception dtaille: elle consiste dfinir prcisment
chaque sous-ensemble du logiciel.
- Dveloppement: (Implmentation ou programmation) il
sagit dune traduction des fonctionnalits dfinies dans la phase de
conception en langage de programmation.
- Tests unitaires: ils permettent de vrifier individuellement
que chaque sous-ensemble du logiciel est implment conformment aux
normes dfinies dans la conception.
- Intgration: dite aussi tests systmes, elle consiste vrifier
que le logiciel correspond exactement au cahier des charges du projet en
obtenant enfin un manuelle dutilisation bien dtaill aux utilisateurs.
- Validation: c'est--dire la validation de conformit du site
avec les buts spcifis la premire tape du cycle de vie.
1.3 Quelque exemples de modle de cycles de vie
a. Modle de cycle de vie en cascade

Figure 9: Modle de cycle de vie en cascade
Dans ce modle le principe est trs simple : chaque phase se
termine une date prcise en produisant certains documents ou logiciels.
Les rsultats sont dfinis la base des interactions entre tapes, ils sont
Raissi ADEL Page 28

soumis une revue approfondie et on ne passe la phase suivante que
s'ils sont jugs quivalents aux normes. Le modle original ne comportait
pas la possibilit de retour en arrire. Celle-ci a t rajoute
ultrieurement sur la base qu'une tape ne remet en cause que l'tape
prcdente, ce qui s'avre insuffisant dans la pratique.
b. Modle de cycle de vie en V

Figure 10: Modle de cycle de vie en V
Le modle du cycle de vie en V est un modle conceptuel de
gestion de projet, imagin suite au problme de ractivit du modle en
cascade. Il permet, en cas d'anomalie, dliminer le retour aux tapes
prcdentes tardivement.
Les avantages du modle du cycle de vie en V sont les suivants :
- La qualit de la mise en uvre des tests.
- Modle prouv dans lindustrie.
- Normalis (ISO-12207, MILSTD-498)
- Deux types de tches sont ralises en parallle :
Verticalement on prpare ltape suivante et Horizontalement : on prpare
la vrification de la tche en cours.

Raissi ADEL Page 29

Ses inconvnients
- La validation finale par le client trs tardive augmente les
risques de dpassement de dlai et donc laugmentation du cot.
- Phases squentielles.
- Rigidit face une volution du besoin.
c. Modle de cycle de vie en Spirale

Figure 11: Modle de cycle de vie en Spirale
Le modle en spirale (spiral modle) est un modle de cycle de vie
qui reprend les diffrentes tapes du cycle en V. Par l'implmentation de
versions successives, le cycle recommence en proposant un produit de
plus en plus complet. Il met cependant plus l'accent sur la gestion des
risques que le cycle en V.
1 .4 Notre choix :
Afin de concevoir et dvelopper notre application, nous avons opt
pour le modle de cycle de vie en V. Ce choix reviens au fait que ce cycle
est le plus efficace avec son principe de travail qui ncessite la vrification
de chaque tape et la possibilit de corriger les fautes avant de se lancer
vers ltape suivante.
Raissi ADEL Page 30

2. Mthodologie de conception
Pour faciliter notre tche nous avons recours langage de
modlisation unifi (UML : Unified Modelling Language) cest une notation
qui permet de modliser un problme de faon standard. Ce langage est
n de la fusion de plusieurs mthodes existantes auparavant, et il est
devenu une rfrence en terme de modlisation objet, un tel point que
sa connaissance devienne indispensable pour un dveloppeur.
3. Concept et architecture :
Notre mmoire consiste concevoir et raliser une boutique
virtuelle pour la vente en ligne des produits en se basant sur le modle
MVC constitu de trois parties. Bien videmment, les deux parties connues
qui sont les vues V (les interfaces IHM) et le modle M(le serveur de
donnes) et une troisime Partie reprsent comme contrleur de trafic C,
(le serveur dapplication).
Cette architecture a pas mal davantages pour quelle reste
toujours la plus utilise dans le monde de dveloppement Web tant
donne quelle se caractrise par :
- Lallgement du poste de travail.
- La prise en compte de l'htrognit des plates-formes
(serveurs, clients, langages, etc.).
- Lintroduction de clients dits " lgers " (plus lie aux
technologies Intranet/HTML qu'au 3-tiers proprement dit).
- Une meilleure rpartition de la charge entre les diffrents
entits clients et serveurs.
Raissi ADEL Page 31

Figure 12: L'architecture MVC
II. Conception dtaill
1. Les diagrammes des cas dutilisation.
1.1 Dfinition
Les rles des diagrammes de cas dutilisation sont de recueillir,
danalyser et dorganiser les besoins, ainsi que de recenser les grandes
fonctionnalits dun systme. Il sagit donc de la premire tape UML pour
la conception dun systme.
Un diagramme de cas dutilisation capture le comportement dun
systme, dun sous-systme, dune classe ou dun composant tel quun
utilisateur extrieur le voit. Il scinde la fonctionnalit du systme en units
cohrentes, les cas dutilisation, ayant un sens pour les acteurs. Ainsi ces
cas dutilisation permettent dexprimer le besoin des utilisateurs dun
systme, ils sont donc une vision oriente utilisateur de ce besoin au
contraire dune vision informatique.
Raissi ADEL Page 32

Il ne faut jamais ngliger cette premire tape pour produire un
site web conforme aux attentes des utilisateurs cibls. Pour laborer les
cas dutilisation, il faut se fonder sur des entretiens avec les utilisateurs.
1.2 Composition du diagramme de cas
Le diagramme de cas se compose de trois lments principaux :

Un Acteur : cest lidalisation dun rle jou par une personne
externe, un processus ou une chose qui interagit avec un systme. Il se
reprsente par un petit bonhomme avec son nom inscrit dessous.

Un cas dutilisation : cest une unit cohrente reprsentant une
fonctionnalit visible de lextrieur. Il ralise un service de bout en bout,
avec un dclenchement, un droulement et une fin, pour lacteur qui
linitie.
Un cas dutilisation modlise donc un service rendu par le systme,
sans imposer le mode de ralisation de ce service. Il reprsente par une
ellipse contenant le nom du cas (un verbe linfinitif), et optionnellement,
au-dessus du nom, un strotype.

Les relations : Trois types de relations sont pris en charge par la
norme UML et sont graphiquement reprsentes par des types particuliers
de ces relations. Les relations indiquent que le cas d'utilisation source
prsente les mmes conditions d'excution que le cas issu. Une relation
simple entre un acteur et une utilisation est un trait simple.
Cas dutilisation
Raissi ADEL Page 33

1.3 Les acteurs de notre projet
Le visiteur : cest un individu qui est entrain de fouiller sur le net,
cherchant un produit pour lacheter ou pour avoir une ide sur les modles
et les prix. Jusquau ce stade cest un utilisateur inconnu donc il nest pas
encore un client.
Le Client : cette acteur est un visiteur ayant dj crer un compte
sur notre site, il peut donc suivre le processus dachat des produits en
toute scurit sachant que notre systme doit tre lunique responsable de
la confidentialit des donnes personnelles de ses clients.
Ladministrateur : pour les sites web on lappelle gnralement
le webmaster . Cest celui qui assure le dynamisme du site et veille sur
les mises jour des produits, de leurs prix, de leurs disponibilits, de la
gestion des payements et la gestion des livraisons.
1.4 Diagrammes de cas dutilisation de notre site web
a. Diagramme de cas dun visiteur

Figure 13: Cas d'utilisation d'un visiteur
Avant de devenir client, un internaute ne possde que la possibilit
de consulter le catalogue des produits disponibles dans le stock du
fournisseur et la possibilit de sinscrire pour devenir client sur notre site
web.
Raissi ADEL Page 34

b. Diagramme de cas dun client

Figure 14: Cas d'utilisation d'un client
Aprs linscription, le visiteur devient client. Il est donc apte de
continuer toute une procdure dachat en ligne sur notre site.
c. Diagramme de cas du webmaster du site web
Le terme webmaster de site web dsigne communment celui qui
est charg d'un site web. Il gre toute la mise en place technique et
Parfois la mission ditoriale, il doit grer au jour le jour la technique et
mettre jour le contenu du site web.

Figure 15: Cas d'utilisation d'un webmaster ou administrateur
Raissi ADEL Page 35

2 Les diagrammes dactivits.
2.1 Dfinition
Cest un Diagramme associ un objet particulier ou un
ensemble d'objets, qui illustre les flux entre les activits et les actions. Il
permet de reprsenter graphiquement le droulement d'un cas
d'utilisation.
2.2 Composition dun diagramme dactivits
Le diagramme dactivit se compose des lments suivants :

Une activit reprsente une excution d'un mcanisme,
autrement dit, un droulement d'tapes squentielles.

Une transition qui reprsente Le passage d'une activit vers une
autre. Cette transition peut tre automatique, qui se dclenche par la fin
d'une activit, provoquent le dbut immdiat d'une autre ou
conditionnelle, qui ne se dclenche quaprs la satisfaction de la condition
quon appelle aussi garde.

Les gardes qui reprsentent la condition de passage dune activit
une autre dans les transitions conditionnelles ils sont symboliss par des
losanges comme dans la figure suivante :

Transition conditionnelle
Activit 1 Activit 2
G
ar
de
G
Oui
Non
Condition de passage
Activit 2 Activit 1
Transition automatique
Activit
Raissi ADEL Page 36

Les barres de synchronisation sont des barres reprsentes par
une ligne paisse, le rle cette barre est de synchroniser le dpart de
plusieurs transitions qui arrivent de dfrentes activits, aboutissant
toutes une activit commune.
2.3 Les activits de notre site web:
La consultation : un catalogue est une foire virtuelle des produits.
Do, il est indispensable de mettre la consultation de ce dernier la
disposition de tous les visiteurs du site sans exception.
Linscription : aprs la consultation, et pour passer la phase
dachat des produits exposs, un visiteur doit devenir client et ce la ne se
fait quaprs linscription.
Lauthentification : cest une activit principale dans tous les
sites de e-commerce. Cest par cette tape que nous allons identifier le
client qui est en train de charger son panier, payer sa facture et attendre
sa livraison.
La gestion du panier : suite dune authentification notre visiteur
est maintenant un client qui peut librement ajouter ou supprimer des
produits son panier, tout en pouvant mettre jour la quantit de larticle
command.
La gestion de stock : cette activit nest disponible qu
ladministrateur du site web. Elle consiste grer le nombre la marque la
quantit et le prix dun article du stock.
Barre de Synchronisation
Activit 1 Activit 2
Activit 3
Raissi ADEL Page 37

2.4 Les diagrammes dactivit de notre site web
a. Diagramme dinscription
La phase dinscription est indispensable pour passer dun simple
visiteur du site qui na le droit que de consulter les produits et leurs prix
un client qui peut acheter ses articles dsirs et payer sa facture en ligne
et donc attendre la livraison de sa commande domicile.

Figure 16: Diagramme d'activit Inscription
- Le visiteur demande linscription.
- Le formulaire dinscription saffiche sur lcran.
- Le visiteur remplit les champs demand dans le formulaire.
- Le systme vrifie les donnes entres.
- Si les donnes sont acceptes, le systme les envoie la base si
non, il revient ltape prcdente.
- Le serveur vrifie lexistence du client dans la base.
Raissi ADEL Page 38

- Si le client existe dj, un message derreur saffiche.
- Si le client nexiste pas, linscription se termine avec succs.
b. Diagramme dauthentification
L'authentification est la procdure qui consiste, pour un systme
informatique, vrifier l'identit d'une entit (personne, ordinateur),
afin d'autoriser son accs aux systmes, rseaux, applications Elle
permet donc de valider l'authenticit de l'entit en question.

Figure 17: Diagramme d'activit Authentification
- Le client demande lauthentification en cliquant sur le bouton login.
- Le formulaire dauthentification saffiche sur lcran.
- Le client entre son nom dutilisateur et son mot de passe.
- Le systme vrifie les coordonns du client sur la base.
- La conformation du succs ou chec est envoye au client.
Raissi ADEL Page 39

c. Diagramme de gestion des articles
Un webmaster est dit galement l'administrateur du site. Il a pour
but de s'assurer de la fiabilit de ses services proposs, ainsi que leur
audimat et rentabilit. Parmi ces services nous pouvons citer
- La gestion des produits.
- La gestion des comptes utilisateurs.
- La gestion de la liste des catgories.
- La gestion des listes des marques, des produits et beaucoup
dautres activits.

Figure 18: diagramme dactivit gestion des articles
Raissi ADEL Page 40

- Ladministrateur prcise lopration appliquer sur larticle.
- Sil sagit dune opration dajout, ladministrateur demande le
formulaire dajout des nouveaux articles.
- Ce formulaire saffiche.
- Ladministrateur saisit les donnes relatives larticle
concern.
- Vrification de la validit des donnes saisies.
- En cas de validit, les donnes prennent chemin vers la base
de donnes.
- Une deuxime vrification, en ce qui concerne lexistence de
larticle dans notre base.
- Si non les donnes seront valides.
- Maintenant, si lopration dsire et de grer un article dj
existant dans la base, la slection de cette article est la premire tape.
- Choix du type de gestion qui peut tre consultation,
modification ou bien suppression.
- Et enfin la validation de lopration.
3 Diagrammes des squences
3.1 Dfinition
Un diagramme de squences est un diagramme d'interaction qui
expose en dtail la faon dont les oprations sont effectues : quels
messages sont envoys et quand ils le sont.
Les diagrammes de squences sont organiss en fonction du temps
qui s'coule au fur et mesure que nous parcourons la page.
Les objets impliqus dans l'opration sont rpertoris de gauche
droite en fonction du moment o ils prennent part dans la squence.

Raissi ADEL Page 41

3.2 Composition dun diagramme de squences
Ce type des diagrammes est compos par les lments suivants :
Les lignes de vie : Une ligne verticale qui reprsente la squence
des vnements, produite par un participant, pendant une interaction,
alors que le temps progresse en bas de ligne.
Ce participant peut tre une instance d'une classe, un composant
ou un acteur.
Les messages : deux types de messages dans le diagramme de
squences, le premier est dit message synchrone utilis pour reprsenter
des appels de fonction ordinaires dans un programme, le deuxime est
appel message asynchrone, tant utilis pour reprsenter la
communication entre des threads distincts ou la cration d'un nouveau
thread.
Les occurrences d'excution : reprsente la priode dexcution
dune opration.
Les commentaires : Un commentaire peut tre joint tout point
sur une ligne de vie.
Les itrations : reprsente un message de rponse suite une
question de vrification.
3.2 Les diagrammes de squences de notre site web
a. Diagramme de squences dinscription
Pour bien profiter des privilges Ddis aux clients, un visiteur doit
dabords entamer la phase dinscription avec succs et pour cela il faut
quil passe par lensemble des squences que nous allons simplifier par le
schma suivant:
Raissi ADEL Page 42

Figure 19: Diagramme de squences de l'inscription
- Le visiteur demande le formulaire dinscription.
- Le formulaire saffiche.
- Le visiteur rempli le formulaire.
- Une vrification de lexistence du client dans la base se lance.
- Si le client existe dj un message derreur saffiche.
- Si cest un nouveau client confirmation de linscription saffiche.
b. Diagramme de squences dauthentification
Avant datteindre la phase dauthentification, notre visiteur est une
personne prsente sur notre site web dune faon anonyme, do il
devient indispensable dentrer son login et son mot de passe. Puis, tout au
long de sa navigation, il na la possibilit d'accder qu'aux services dont il
est autoris.
Le schma suivant va vous montrer les squences effectuer pour
entamer la phase dauthentification.
Raissi ADEL Page 43

Figure 20: Diagramme de squences d'authentification

- Le client entre son login et son mot de passe.
- Une vrification se lance dans la base de donnes.
- Aprs un temps de rponse ou lauthentification se valide ou ne
message derreur saffiche
d. Diagramme de squences de suppression dun article
Parmi les scnarios dont ladministrateur est en charge nous
pouvons mentionner la gestion des produits exposs sur notre site web
telles que La consultation, lajout, la modification et la suppression que
nous allons montrer dans le diagramme de squence suivant.
Raissi ADEL Page 44

Figure 21: Diagramme de squence de suppression d'un article
- Ladministrateur choisit linterface de suppression.
- Le menu de suppression saffiche.
- Ladministrateur doit slectionner le produit quil dsire
supprimer.
- Le systme averti ladministrateur de lopration de suppression.
- Ladministrateur confirme la suppression.
- Lopration de suppression se termine avec succs.
- Le produit en question se disparait dfinitivement de la base de
donnes.
4 Diagramme de classes
4.1 Dfinition
Un diagramme de classes UML dcrit les structures d'objets et
d'informations utilises sur notre site web, la fois en interne et en
communication avec ses utilisateurs. Il dcrit les informations sans faire
rfrence une implmentation particulire. Ses classes et relations
peuvent tre implmentes de nombreuses manires, comme les tables
Raissi ADEL Page 45

de bases de donnes, les nuds XML ou encore les compositions d'objets
logiciels.
4.2 La composition dun diagramme de classes
En gnral un diagramme de classe peut contenir les lments
suivants :
Les classes: une classe reprsente la description formelle dun
ensemble dobjets ayant une smantique et des caractristiques
communes. Elle est reprsente en utilisant un rectangle divis en trois
sections.
La section suprieure est le nom de la classe, la section centrale
dfinit les proprits de la classe alors que la section du bas numre les
mthodes de la classe.
Les associations : une association est une relation entre deux
classes (association binaire) ou plus (association n-aire), qui dcrit les
connexions structurelles entre leurs instances. Une association indique
donc que des liens peuvent exister entre des instances des classes
associes.
Les attributs : les attributs reprsentent les donnes encapsules
dans les objets des classes. Chacune de ces informations est dfinie par
un nom, un type de donnes, une visibilit et peut tre initialis. Le nom
de lattribut doit tre unique dans la classe.

Raissi ADEL Page 46

4.2 Notre diagramme des classes

Figure 22: Diagramme des classes
1..1
0..1
1..1
0..1
0..*
0..1
1..1
0..*
1..1
0..*
1..1
0..*
1..*
0..*
1..1
0..*
1..1
0..*
1..1
1..*
1..1
0..*
1..1
0..*
1..*
0..*
vi l l e
-
-
vi l l ei d
vi l l el i b
: i nt
: Stri ng
commande
-
-
-
-
cmdi d
cmddate
total cmd
cmddescri pti on
: i nt
: Date
: Fl oat
: Stri ng
etatcmd
-
-
etatcmdi d
etatcmdl i b
: i nt
: i nt
l i vrai son
-
-
-
l i vi d
l i vdate
l i vdescri pti on
: i nt
: Date
: Stri ng
bouti que
-
-
-
-
-
-
-
bouti d
boutl i b
boutadresse
bouttel
boutfax
boutmai l
boutdescri pti on
: i nt
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
facture
-
-
-
-
-
-
-
facti d
datefact
baseht
tva
remi se
total ht
total ttc
: i nt
: Date
: fl oat
: fl oat
: fl oat
: fl oat
: fl oat
model i vrai son
-
-
-
modl i vi d
modl i vl i b
modl i vdescri pti on
: i nt
: Stri ng
: Stri ng
arti cl e
-
-
-
-
-
-
-
-
arti d
artdesi gnati on
pri x
qtestock
tauttva
tautremi se
arti mg
artdescri pti on
: i nt
: Stri ng
: fl oat
: i nt
: i nt
: i nt
: Stri ng
: Stri ng
categori e
-
-
cati d
catl i b
: i nt
: Stri ng
fourni sseaur
-
-
-
-
-
-
-
fouri d
fourname
fourmai l
fourtel
fourfax
fouradresse
fourdescri pti on
: i nt
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
marque
-
-
marqi d
marql i b
: i nt
: Stri ng
pri vi l ege
-
-
-
pri vi d
pri vl i b
descri pti on
: i nt
: Stri ng
: Stri ng
propri ete
-
-
-
propi d
propl i b
propval eur
: i nt
: Stri ng
: Stri ng
uti l i sateurs
-
-
-
-
-
-
-
-
-
-
-
-
-
uti l i d
uti l mai l
uti l l ogi n
uti l pass
uti l sexe
uti l nom
uti l prenom
uti l tel
uti l fax
uti l adresse
uti l codepostal
uti l CIN
uti l remarque
: i nt
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
: Stri ng
Raissi ADEL Page 47

5 Schmas Relationnelles :
article (artid, #marqid, #catid, #fourid, artdesignation, prix,
qtestock, tauttva, tautremise, artimg, artdescription)
categorie (catid, catlib)
marquee (marqid, marqlib)
fournisseur (fourid, fourname, fourmail, fourtel, fourfax,
fouradresse, fourdescription)
boutique (boutid ,boutlib, boutadresse, bouttel, boutfax, boutmail,
boutdescription)
utilisateur (utilid, #privid, #villeid, utilmail, utillogin, utilpass,
utilsexe, utilnom, utilprenom, utiltel, utilfax, utiladresse, utilcodepostal,
utilCIN, utilremarque)
privilege (privid, privlib, description)
ville (villeid, villelib)
propriete (propid, proplib, propvaleur)
facture (factid, #cmdid, datefact, baseht, tva, remise, totalht,
totalttc)
commande (cmdid, #utilid, #etatcmdid, cmddate, totalcmd,
cmddescription)
etatcmd (etatcmdid, etatcmdlib)
lignecmd (artid, cmdid)
ligneprop (propid, artid)
livraison (livid, #modlivid, #boutid, #cmdid, livdate,
livdescription)
modleivraison (modlivid, modlivlib, modlivdescription)
Raissi ADEL Page 48

III. La Maquette de notre site web
1. Structure du site
Dans un site web commercial, la navigation et obligatoirement
volutive car le passage une phase dachat ncessite la confirmation de
la phase prcdente, de plus le faite maintenir une hirarchisation
quilibre qui permet l'accs rapide l'information et une comprhension
intuitive de la faon dont les pages sont organises tout en donnant la
possibilit dvoluer est un objectif pralable. Pour cela nous avons choisis
la structure en volution.

Figure 23: Structure de notre site web en volution
2. La charte graphique
Une charte graphique aboutit gnralement la cration de
modles de pages (en anglais Template) servant comme des gabarits pour
la cration du site web. Les Template sont des images cres sous forme
de calques ou bien des pages web reprsentant le squelette graphique des
pages types dans notre site web comme par exemple : la page daccueil,
la page client et la page administrateur dans notre projet .
Raissi ADEL Page 49

Figure 24: charte graphique de la page d'accueil

Figure 25: charte graphique de la page client
Raissi ADEL Page 50

Figure 26: charte graphique de la page administrateur
Conclusion
Nous venons de terminer cette partie de conception, qui consiste
dterminer aussi bien les mthodes de travail que les chartes graphiques
de notre site web avec ses parties statiques et dynamiques.
Dans le chapitre suivant nous allons aborder la dernire partie qui
reprsente la partie ralisation de notre site web, en se basant sur les
mcanismes et les solutions dtermins dans la phase de conception.

Raissi ADEL Page 51

Chapitre V : Ralisation

Raissi ADEL Page 52

I. Environnement de travail :
Au niveau de cette dernire partie, nous allons numrer les outils
soft et hard que nous avons utiliss pour raliser notre site ainsi que ses
principales interfaces.
1. Environnement Hard :
- Hte : DELL INSPIRON N5010
- Microprocesseur : Intel I3 Inside
- RAM : 4GO
2- Atelier de Gnie Logiciel :
a-Langage de programmation :
Nous avons eu recours, pour le dveloppement de notre application
au langage de programmation J2EE. Cest la garantie de portabilit qui fait
la russite de Java dans les architectures client-serveur en facilitant la
migration entre serveurs, trs difficile pour les gros systmes.
Dautre part JAVA est scurise, il a t conu pour tre exploit
dans des environnements serveur et distribus. Dans ce cadre, la scurit
na pas t ngligeable. Cest le langage le plus adopt par les
dveloppeurs grce sa fiabilit et sa performance lev.
b-Environnement de dveloppement :
JDK : Java Dveloppent Kit Java est l'environnement dans lequel le
code Java est compil pour tre transform en byte-code afin que la
machine virtuelle JAVA (JVM) puisse l'interprter.
Les composants primaires du JDK sont une slection d'outils de
programmation.
Javac : le compilateur, qui convertit le code source en fichier .class
(contenant le bytecode Java).
Raissi ADEL Page 53

Jar : cest lui qui se charge de mettre l'ensemble des fichiers class
sous forme d'un paquetage unique dans un fichier JAR pour les archiver.
Javadoc : cest bien le gnrateur de documentation, qui gnre
automatiquement la documentation partir des commentaires du code
source.
Jdb : le dbogueur des applications java.
JEE : Java Enterprise Edition, ou Java EE, cest une spcification
pour la technique Java de Sun plus particulirement destine aux
applications dentreprise. Ces applications sont considres dans une
approche multi-niveaux. Dans ce but, toute implmentation de cette
spcification contient un ensemble dextensions au Framework Java
standard (JSE, Java Standard Edition) afin de faciliter la cration
dapplications rparties.
JPA : cest une API Java Persistance qui repose sur des entits
annots et sur un gestionnaire de ces entits (EntityManager) qui propose
des fonctionnalits pour les manipuler (ajout, modification suppression,
recherche). Ce gestionnaire est responsable de la gestion de l'tat des
entits et de leur persistance dans la base de donnes.
EJB : Les Entreprise Java Bean ou EJB sont des composants
serveurs donc non visuels qui respectent les spcifications d'un modle
dit par Sun. Ces spcifications dfinissent une architecture, un
environnement d'excution et un ensemble d'API.

c- Outil de Conception :
: PowerAMC reprsente un logiciel qui nous permet de
modliser les traitements informatiques et leurs bases de donnes
associes et qui gre la plupart des diagrammes spcifis dans la norme
UML 2.0, elle est base sur le langage de modlisation UML (Unified
Raissi ADEL Page 54

Modelling Language) que nous avons adopt pour toute la suite de notre
travail.
d-Environnement de dveloppement:
: NetBeans cest un environnement de
dveloppement intgr (EDI), qui comprend toutes les caractristiques
d'un IDE moderne (diteur en couleur, projets multi-langage, refactoring,
diteur graphique d'interfaces et de pages Web).
e-Serveur dapplication :
: GlassFish reprsente le serveur d'applications Open
Source Java EE 5 et dsormais Java EE 6 avec sa version 3 qui sert de
socle au produit Oracle GlassFish Server1 (anciennement Sun Java
System Application Server2 de Sun Microsystems). Sa partie Toplink
persistence3 provient d'Oracle. C'est la rponse aux dveloppeurs Java
dsireux d'accder aux sources et de contribuer au dveloppement des
serveurs d'applications de nouvelle gnration.
f-Systme de gestion de base de donnes :
: EasyPHP Il s'agit d'une plateforme de dveloppement
Web, permettant de faire fonctionner localement (sans se connecter un
serveur externe). Cest un environnement comprenant deux serveurs (un
serveur web Apache et un serveur de bases de donnes MySQL. Il permet
donc d'installer en une seule fois tout le ncessaire au dveloppement
local du Web.
g-Framework :
: Java Server Faces est un Framework Java, pour le
dveloppement d'applications Web. l'inverse des autres Framework MVC
traditionnels base d'actions, JSF est bas sur la notion de composants,
comparable celle de Swing ou SWT, o l'tat d'un composant est
Raissi ADEL Page 55

enregistr lors du rendu de la page, pour tre ensuite restaur au retour
de la requte.
h-Design & Multimdia :
: PrimeFaces Cest une bibliothque lgre, aucune
configuration et aucunes dpendances requises. Vous avez juste besoin de
tlcharger PrimeFaces, ajouter le jar Primefaces Dans votre classpath et
importer l'espace de noms pour commencer.
: XHTML (eXtensible HyperText Markup Language) cest
un langage de balisage servant crire des pages pour le World Wide
Web. Conu l'origine comme le successeur d'HTML, XHTML se fonde sur
la syntaxe dfinie par XML, plus rcente, mais plus exigeante que celle
dfinie par SGML sur laquelle repose HTML : il s'agit en effet de prsenter
un contenu affichable non seulement par les ordinateurs classiques, mais
galement sans trop de dgradation par des PDA bien moins puissants.
: CSS (Cascading Style Sheets) cest un langage
informatique qui sert dcrire la prsentation des documents HTML et
XML. Les standards dfinissant CSS sont publis par le World Wide Web
Consortium (W3C). Introduit au milieu des annes 1990, CSS devient
couramment utilis dans la conception de sites web et bien pris en charge
par les navigateurs web dans les annes 2000.
: Photoshop CS6 il sagit dun logiciel de retouche image de
trs grande base des filtres et des effets comme il serre dans ses
dernires versions dtablir des animations, donc il nous a aids dans la
construction de la bannire publicitaire.

Raissi ADEL Page 56

II. Dmonstrations des interfaces:
Cette partie dnombre la prsentation des Scnarios applicatifs de
lapplication. Nous allons prsenter dans ce qui suit, les imprimes-cran
des principales interfaces ralises dans notre site web.

Raissi ADEL Page 57

Figure 27: Page d'accueil
Cest la page daccueil qui saffiche ds laccs notre site web, elle
est constituer de trois parties principales :
- Une bannire publicitaire qui contient des animations donnant
un flash sur les nouveauts, ainsi que les promotions et les remises.
- Une page principale qui contient laffichage des produits dans
un panneau qui naffiche que trois produits par page.
- Un formulaire de recherche donnant aux visiteurs de notre site
le choix de slection des produits afficher, par catgorie, par marque
et/ou par fourchette de prix comme indique la figure suivante.

Figure 28: Slection par critre
Raissi ADEL Page 58

Figure 29: Dtails d'un article slectionn
Cette figure garde la mme structure que ses prcdentes sauf que
la partie centrale ne contient plus le catalogue des produit, elle reprsente
maintenant les dtails dun produit slectionn par le visiteur de notre site
web en cliquant sur le bouton voir qui se trouve sous chaque produit du
catalogue (voir figure 26)

Figure 30: Page des contacts
La figure 30 nous affiche les contactes de notre webmaster que
tout client peut le contacter par tlphone, par ou par E-mail en cas de
besoin.
Raissi ADEL Page 59

Figure 31: Inscription
Comme dans tout site web commercial le visiteur ne peut devenir
client quaprs la phase dinscription, notre site web met la disposition
de ses visiteurs un formulaire dinscription accessible partir du menu
inscription dans la barre des menus en haut de la page daccueil.

Figure 32: Authentification
Aprs la phase dinscription prsente dans la figure 31 le client
doit sauthentifier pour bien profiter des privilges quun visiteur normal
ne possde pas comme par exemple le remplissage du panier et le
passage des commandes.
Raissi ADEL Page 60

Figure 33: Accueil admin (Ajout des articles)
Comme administrateur ou client de notre site web vous tes
appels aux mmes tapes dinscription et dauthentification, mais
lunique diffrence cest le privilge. Dans la figure 33 lutilisateur possde
un privilge Administrateur , cest pourquoi il accde directement la
page principal dadministration de notre site web qui se compose aussi de
trois parties principales :
- Une barre de menus verticale sous formes daccordon, qui
contient son tour des liens toutes les pages de gestion des articles,
des catgories, des marques, des boutiques, des fournisseurs, des
utilisateurs, des privilges, des villes, des modes de livraison, des tats de
commandes et des proprits des articles.
- Une Bannire publicitaire comme celle de la page accueil mais
avec une barre de menus horizontale diffrente.
- Une page centrale qui affiche par dfaut le formulaire dajout
des nouveaux articles, mais elle doit aprs afficher les formulaires
slectionns par le webmaster partir des menus de gestion qui se
trouvent dans la partie gauche de la page.

Raissi ADEL Page 61

Figure 34: Tlchargement de l'image de l'article
Lajout des nouveaux articles, cest lune des taches nombreuses
affectes aux webmasters de notre site web, cette tache englobe le saisie
des caractristiques du produit comme par exemple la dsignation, le prix
la marque, la catgorie et dautres caractristiques, ainsi que les photos
que le webmaster a besoin de les tlcharger de son disque, Pour cela
nous mettons sa disposition un bouton parcourir .

Figure 35: Liste des articles
Cette figure reprsente la listes des articles ajouts par le
webmaster, nous voulons par cette figures donner un exemple de
plusieurs listes qui saffichent de la mme manire que la prsente.
Raissi ADEL Page 62

Figure 36: Changement du privilge
Un webmaster cest un utilisateur avec privilge Administrateur,
mais comment un utilisateur reste un client ou devient un administrateur
cest pour cela que nous donnant la main de faire cette modification
uniquement ladministrateur dans la page Edit de lutilisateur.

Figure 37: Accueil du client (catalogue client)
Cette page nous apparait ds le premier coup identique celle
daccueil, mais en regardant plus attentivement en haut de la page nous
allons constater que la barre de menus est distincte de celle de la page
daccueil ce qui nous donne limpression que cette figure prsente la page
daccueil des clients aprs lauthentification.
Raissi ADEL Page 63

Figure 38: Dtails des articles en mode client
Une autre fois nous nous trouvons devant une page qui ressemble
une autre dans une grande partie mme quelle est toute diffrente.
La figure 38 ressemble la figure 29 sauf que la prsente, cest la
page des dtails dun article slectionn par un client et non pas par un
simple visiteur.

Figure 39: Changement du profil
Dans cette page nous avons donn au client la main pour modifier
son profil tout moment.
Raissi ADEL Page 64

Conclusion
Dans le chapitre ralisation nous avons appel prsenter les
interfaces ralis dans notre site web pour clarifier les tapes dutilisation
de notre site avec ses deux parties statique et dynamique.

Conclusion et perspective
Ce projet se dirige dans le cadre De notre mmoire de mastre
N2TR au sein de lUniversit Virtuelle de Tunis pour le compte du socit
LSAT_Nokia.
Nous somme appels dans ce travail de concevoir et raliser une
boutique virtuelle pour la vente en ligne des produits, nous avons termin
ce stage que nous esprons enrichissant pour nous et pour tous qui
consulte ce rapport qui rsume quatre mois de travail rigoureux.
Pour le moment le site e-commerce est presque termin nous
souhaitons quil trouvera les conditions ncessaires pour entrer en
vigueur.

Glossaire
A

B

C
D
E EDI, Easy php, E-Learning , EJB
F
G Glassfish

H
I
J JSF, JPA, JEE,
K
L
M MVC
N NetBeans
O
P
Q
R

T
U
V
W Web
X XHTML
Y
Z

Webographie
- http://web.univ-pau.fr/~lompre/conception/conception.htm
- http://www.memoireonline.com/02/09/2005/m_Conception-et-
Developpement-dun-logiciel--de-gestion-commerciale15.html
- http://fr.wikipedia.org/wiki/Cycle_de_d%C3%A9veloppement
- http://www.lafabrick.com/blog/2009/01/13/786-reflex-1-une-micro-
architecture-pour-flex-simple/
- http://laurent-audibert.developpez.com/Cours-UML/html/Cours-
UML010.html.
- http://fr.wikipedia.org/wiki/Webmaster
- http://docwiki.embarcadero.com/RADStudio/XE3/fr/Dfinition_des_
diagrammes_de_squence
- http://msdn.microsoft.com/fr-fr/library/vstudio/dd409437.aspx
- http://www.primefaces.org/showcase/ui/home.jsf
- http://www.jmdoudoux.fr/java/dej/chap-ejb.htm
- http://www.jmdoudoux.fr/java/dej/chap-jpa.htm

Conception Developpement Site Web e Commerce Compte LSAT Nokia

Transféré par

Informations du document

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

Conception Developpement Site Web e Commerce Compte LSAT Nokia

Transféré par

Droits d'auteur :

Formats disponibles

Mmoire de Mastre

Pour obtenir le mastre en nouvelles technologies de

Vous aimerez peut-être aussi