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..*

vil le

-

-

vil leid

vil lelib

: int

: String

commande

-

-

-

-

cmdid

cmddate

totalcmd

cmddescription

: int

: Date

: Float

: String

etatcmd

-

-

etatcmdid

etatcmdlib

: int

: int

l ivraison

-

-

-

l ivid

livdate

livdescription

: int

: Date

: String

boutique

-

-

-

-

-

-

-

boutid

boutlib

boutadresse

bouttel

boutfax

boutmail

boutdescription

: int

: String

: String

: String

: String

: String

: String

facture

-

-

-

-

-

-

-

factid

datefact

baseht

tva

remise

totalht

totalttc

: int

: Date

: float

: float

: float

: float

: float

modelivraison

-

-

-

modlivid

modlivlib

modlivdescription

: int

: String

: String

article

-

-

-

-

-

-

-

-

artid

artdesignation

prix

qtestock

tauttva

tautremise

artimg

artdescription

: int

: String

: float

: int

: int

: int

: String

: String

categorie

-

-

catid

catlib

: int

: String

fournisseaur

-

-

-

-

-

-

-

fourid

fourname

fourmail

fourtel

fourfax

fouradresse

fourdescription

: int

: String

: String

: String

: String

: String

: String

marque

-

-

marqid

marqlib

: int

: String

privilege

-

-

-

privid

privlib

description

: int

: String

: String

propriete

-

-

-

propid

proplib

propvaleur

: int

: String

: String

util isateurs

-

-

-

-

-

-

-

-

-

-

-

-

-

util id

utilmail

uti l login

utilpass

utilsexe

utilnom

utilprenom

utiltel

uti lfax

utiladresse

utilcodepostal

utilCIN

utilremarque

: int

: String

: String

: String

: String

: String

: String

: String

: String

: String

: String

: String

: String


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

Documents

Transcript of Conception Developpement Site Web e Commerce Compte LSAT Nokia