AJa 1 Ir FFQBu 5 Fbe JJ 29 K BMLKGV AK8 RVuf XXJFEu X

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
Université de la Manouba
Institut Supérieur des Arts Multimédias
MÉMOIRE DE PROJET DE FIN D’ETUDES

CM12
CONCEPTION ET DÉVELOPPEMENT D’UN SITE

WEB E-COMMERCE DE MATÉRIEL GAMING
Réalisé par
Arfaoui Farouk CM
Ben Rejeb Chiheb CM
b Encadré par
Mme Hadj Khlifa Ismahen

Mme Abid Abir
Année Universitaire 2018-2019

Remerciement
En préambule à ce mémoire on remercie Dieu qui nous a aidés et nous a donné la

patience et le courage durant ces longues années d’étude.
Aussi nos remerciements au corps professoral et administratif de l’institut qui

déploient de grands efforts pour nous assurer une très bonne formation.
Nous remercions sincèrement Mme Hadj Khlifa Ismahen notre encadrante

technique ainsi que Mme Abid Abir notre encadrante graphique, qui se sont
toujours montrés disponibles tout au long de la réalisation de ce mémoire, ainsi
pour l’inspiration, l’aide et le temps qu’ils ont bien voulu nous consacrer, et sans
eux, ce mémoire n’aurait jamais vu le jour.
Dédicaces
Nos chers parents, pour qui nous devons ce que nous sommes aujourd’hui.
Grâce à vos prières, soutiens et sacrifices tout au long de notre cursus. Que dieu,
le tout puissant vous préserve et vous procure une santé et une longue vie.
À nos chers frères et sœurs, aucune dédicace ne serait suffisante pour vous
exprimer ce que nous ressentons envers vous. Nous vous dirons juste merci pour
vos conseils et vos encouragements, et que nous vous souhaitons une vie pleine de
succès et de prospérité.
À tous nos enseignants, Pour leur bienveillance et pour leur contribution à

notre solide formation.
À nos familles et nos amis, pour leur affection et leur soutien.
L’équipe Web Média International, Pour leurs efforts continus, et leurs

encouragements, avec qui on a partagé de bons moments au cours de ces quatre
mois de stage.
Pour tous ceux qui ont contribué de près ou de loin à la réalisation de ce travail.
Table des matières
Introduction générale 1
Chapitre I : Présentation préalable 3
1.1 Présentation de l’entreprise d’accueil 4
1.2 Présentation du projet 4
1.3 Cible : 5
1.4 Etude de l’existant 5
1.4.1 Etude du site « SBSinformatique.com » 5
1.4.2 Etude du site « tdiscount.tn » 9
1.5 Solution proposé 12
1.5.1 Au niveau graphique 12
1.5.2 Au niveau technique 13
1.6 Diagramme de gantt 14
1.7 Choix méthodologique 15
Chapitre II : Spécification 16
Des besoins 16
2.1 Analyse des besoins 17
2.1.1 Besoins fonctionnels 17
2.1.2 Besoins non fonctionnels 18
2.2 Contraintes esthétiques et ergonomiques 18
2.2.1 Contraintes ergonomiques 18
2.2.2 Contraintes esthétique 18

2.2.3 Contraintes technique 18
2.3 Méthodologie de conception à adopter 19
2.4 Spécification des besoins 19
2. 4.1 Diagramme de cas d’utilisation 19
Conclusion 22
Chapitre III : Etude conceptuelle 23
3.1 Conception graphique 24
3.1.1 Scénarisation du projet 24
3.1.2 Recherche d’un nom du site 24
3.1.3 Conception du logo 26
3.1.4 Conception d’interface 28
3.2 Conception technique 36
3.2.1 Diagramme de classe 36
3.2.2 Dictionnaire des données 38
3.2.3 Modèle relationnel de donnée 39
Chapitre IV : Réalisation et résultat 41
4.1 Environnement matériel 42
4.2 Environnement logiciel et langage utilisé 42
4.3 Problèmes rencontrés 44
4.4 Interfaces homme machine 44
4.4.1 Interfaces visiteur 44
4.4.2 Interfaces membre 48
4.4.3 Interfaces administrateur 50
4.5 Chronogramme 52
Conclusion 52
Conclusion 53
Webographie 54
Bibliographie 55
Liste des Tableaux
Tableau 1: analyse de site web « SBS informatique » [T1] 7

Tableau 2 : analyse de site web « Tdiscount » [T2] 11
Tableau 3 : Recherche graphique de logo [T3] 26
Tableau 4: Dictionnaire des données [T4] 39
Tableau 5: Chronogramme [T5] 52
Liste des Figures
Figure 1: Page gaming su site « SBS informatique » [w1] 6

Figure 2: Page gaming du site « tdiscount » [w2] 10
Figure 3: diagramme de gantt 14
Figure 4: Diagramme de cas d’utilisation globale 20
Figure 5: Diagramme de cas d’utilisation du visiteur 21
Figure 6: Diagramme de cas d’utilisation d’un membre 21
Figure 7: Diagramme de cas d’utilisation de l’administrateur 22
Figure 8: logo du site 27
Figure 9: maquette page d’accueil 28
Figure 10 : maquette page des produits 28
Figure 11 : maquette page détail produit 29
Figure 12: maquette page panier 29
Figure 13 : maquette page connexion 30
Figure 14 : maquette page inscription 30
Figure 15 maquette page facture 30
Figure 16: maquette page connexion (back office) 31
Figure 17: maquette page d’accueil (back office) 31
Figure 18: maquette page ajout produit (back of fice) 31
Figure 19: couleurs du site 32
Figure 20: typographies du site 32
Figure 21: première proposition de la page d’accueil 33
Figure 22: deuxième proposition du page d’accueil 34
Figure 23: première proposition du page panier 35
Figure 24: première proposition du page connexion 35
Figure 25: deuxième proposition du page connexion 36
Figure 26: Diagramme de classe 37
Figure 27: page d’accueil 45
Figure 28: page produits 46
Figure 29: page d’détails produit 47
Figure 30 : page panier 48
Figure 31 : page facture 48
Figure 32: Page inscription 49
Figure 33: Page connexion 49
Figure 34: Page connexion 50
Figure 35: Page d’accueil 50
Figure 36: Page ajout produit 51
Introduction générale
De nos jours une stratégie marketing digital est nécessaire pour tous types de services
afin d’assurer non seulement la visibilité et la notoriété, mais aussi l’accessibilité à
l’information. L’un de ces piliers est l’accès ouvert des sites aux consommateurs, qui a
remplacé le terme « Commerce » par « e-Commerce ».
La naissance du e-Commerce a augmenté le taux de consommation des produits de manière
remarquable car c’est plus facile pour l’internaute d’utiliser son dispositif (ordinateur,
téléphone, tablette), en toute heure afin d’avoir des informations concernant les produits,
procéder à l’achat et le paiement et bénéficier d’une livraison à domicile.
Aujourd’hui, toutes les marques s’orientent vers le e-Commerce pour assurer la visibilité et
faciliter la communication et les échanges avec ses clients.
C’est dans ce contexte que s’intègre notre projet de fin d’étude qui consiste à présenter la
conception graphique et le développement d’un site web e-commerce des produits
informatiques de type gaming dédiés pour les jeux vidéo, dans le site le client peut trouver
une variation des produits ainsi que des informations sur ces produits, et dans ce cadre le
client peut choisir une catégorie ou un type spécifique à partir la navbar pour faciliter la
navigation entre les pages de site. Le client peut aussi ajouter des produits dans le panier, mais
il doit s’inscrire avant de passer une commande. Le paiement va être seulement à la livraison.
Nous essayerons, à travers de ce document, d’expliquer et décortiquer toutes les étapes de
réalisation de notre projet.
Le rapport s’articulera autour de quatre chapitres
Dans le premier chapitre intitulé « Présentation préalable », nous allons présenter notre
projet et l’organisme d’accueil ainsi que l’étude de l’existant pour connaitre les points forts
que lesquels nous allons opter et les points faibles que nous allons exclure lors de la
réalisation de notre projet.
1
Dans le deuxième chapitre « Spécification Des Besoins », nous énumérons les besoins
fonctionnels et non fonctionnels et les diagrammes de cas d’utilisation.
Dans le troisième chapitre « Etude Conceptuelle », nous détaillerons la conception
graphique et technique ainsi que la scénarisation de notre projet en présentant des exemples
des interfaces avant l’amélioration et les changements.
Enfin, dans le quatrième chapitre « Réalisation et Résultat », nous présentons des
interfaces finales de notre site web en mentionnant les différents environnements de travail
matériels et logiciels utilisés et aussi le chronogramme de travail.
2
Chapitre I : Présentation préalable
Il est important de bien analyser et de faire une étude de l’existant avant de

se lancer dans la réalisation de projet pour éviter les mêmes problèmes dans les
sites existants.
1.1
WEB MEDIA est une agence de conseil et de communication digitale avec une expérience
solide de plus de 11 ans, Avec plus de 300 projets réalisés, située au cœur du centre-ville de
la Tunisie et Spécialisée dans les métiers de la communication, du web et du design
graphique.
Depuis sa création en 2005, WEB MEDIA a accompagné plus de 400 clients opérant dans des
secteurs d’activité variés. Nous travaillons avec des entreprises, des professionnels, des
institutions, des artisans et des commerçants, installés dans le monde entier (Tunisie, Canada,
France, Belgique, Italie, Suisse, Lybie, Angleterre, Dubaï…). Ils bénéficient de notre
créativité ergonomique, de notre maîtrise des CMS open source et de notre puissance de
travail.
Logo du l’entreprise :
1.2 Présentation du projet
L’entreprise Web Media International souhaite développer un site web nommé « Gamers
Arena » de vente en ligne de divers produits informatique de GAMING 1dédies aux
GAMERS2.
Ce site web permet aux clients de bien gérer les produits et de contacter l’entreprise. En effet,
le site permet aux visiteurs d’avoir un aperçu sur tous les produits existants ainsi que toutes
1
Le fait de jouer les jeux vidéo.
2
Un joueur de jeu vidéo.
4
les informations qui les concernent. Elle offre également la possibilité de guider les acheteurs
pour bien choisir les produits qui répondent à leurs besoins à travers des suggestions
similaires au produit recherché.
Notre projet consiste à concevoir et développer un site web de vente en ligne. Ce
site doit permettre de :
● Atteindre une bonne image de marque de la société.
● Fidéliser les clients en lui proposant des offres intéressantes et des produits
correspondent à leurs besoins.
● Contacter l’administrateur pour proposer des questions.
● -Amélioré l’expérience client à partie des plusieurs outils techniques (image, vidéo,
texte).
● -développer la promotion du produit.
● Faire baisser le nombre d’abondons de panier.
● Atteindre un grand nombre de visite et prolonger le temps passé d’un visiteur sur le
site.
● Préciser bien la cible.
● Transformer le visiteur en client à travers :
⮚ La qualité du design.
⮚ La facilité d’accès aux informations recherchées.
⮚ Le degré de transparence des informations.
1.3 Cible :
Tous ceux qui sont intéressés de faire des achats au détail des matériels GAMING sur
internet.
1.4 Etude de l’existant

Il est indispensable avant de se lancer dans la réalisation de tout projet, de bien étudier et
analyser des projets similaires pour profiter des avantages et éviter les malveillances dans le
présent projet
5
1.4.1 Etude du site « SBSinformatique.com »
a) Interface du site
❖ Etude graphique de la page gaming
6
Figure 1: Page gaming su site « SBS informatique » [w1]

La figure 1 présente une page de site de vente des matériels informatiques en
ligne nommé sbs informatique
7
Tableau 1: analyse de site web « SBS informatique » [T1]
8
Le tableau 1 représente l’analyse graphique de site web « SBS informatique »
Critique graphique
⮚ Points forts
● Le texte est lisible.
● Le site respecte la charte graphique du logo.
● La composition de la page est simple.
⮚ Points faibles
● Les images des produits sont de très petites tailles.
● Absence absolue d'animation.
● La tête du site est trop chargée.
❖ Etude technique de la page gaming
Critique technique
⮚ Points forts
● Bonne organisation par catégorie, marque et prix.
● Les meilleurs fournisseurs se présentent sur les premières pages.
● Facile à atteindre à un produit.
⮚ Points faibles
● Le site très encombré ce qui implique la difficulté de la navigation.
❖ Etude fonctionnelle
⮚ Visiteur :
● S’inscrire.
9
● Consulter les articles.

● Chercher des produits.
● Ajouter un produit au panier.
⮚ Membre :
le membre a les mêmes fonctionnalités que le visiteur et aussi :

● Consulter le profil.
● Ajouter un produit au panier.
● Passer une commande.
● Choisir la méthode de paiement.
⮚ Administrateur :
● Ajouter et supprimer les produits.
● Manipuler les comptes des clients.
● Gérer le stock.
1.4.2 Etude du site « tdiscount.tn »
a) Présentation de « tdiscount.tn »
Tdiscount est une boutique en ligne spécialisée dans le domaine du matériel
informatique en Tunisie. Ce site marchant propose aux Gamers toute la panoplie
de produits dédies au monde Gaming : Pc portables, Pc de bureau, jeux,
composants ainsi que toutes sortes d’accessoires comme les claviers, les souris et
les casques.
b) Interface du site
Site : https://tdiscount.tn/gaming
❖ Etude graphique de la page gaming
10
Figure 2: Page gaming du site « tdiscount » [w2]
11
La figure 2 présente une page de site de vente des matériels informatiques en

ligne nommé Tdiscount.
Tableau 2 : analyse de site web « Tdiscount » [T2]
12
Le tableau 2 représente l’analyse graphique de site web « Tdiscount »
Critique graphique
➢ Points forts
• La page est bien organisée.
• Les prix sont clairs.
➢ Points faibles
• Un graphique très simple.
• Une dominance totale du blanc.
❖ Etude technique de la page gaming
Description fonctionnelle
Le site liste des différents produit gaming avec un bouton d’achat près du chaque
produit avec la possibilité de coucher les caractéristiques du produit à chercher
pour faciliter la recherche.
Critique technique
➢ Points forts
• Les produits sont organisés du moins cher au plus cher.
• Facile à commander un produit.
➢ Points faibl
es
13
• Le site très encombré ce qui implique la difficulté de la navigation.
1.5 Solution proposé

D’après l’étude de l’existant nous proposons les solutions suivantes :
1.5.1 Au niveau graphique

- Une conception graphique moderne et bien organisé.
- Proposer des photos claires de produit.
- Être claire au niveau les tarifs.
- Les pages du site organisent les services d’une manière ergonomique et structuré.
- La composition de la page est simple, claire et visible.
- Le site doit respecter la charte graphique du logo (une cohérence entre les couleurs
utilisées dans le logo et les couleurs du site).
1.5.2 Au niveau technique

On peut s’appuyer sur des points forts spécifiques tels que :
- adapter des produits aux besoins des consommateurs.

- Avoir une diversité du choix de marques.
- Plusieurs types de paiement en ligne et à domicile.
14
1.6 Diagramme de gaantt
Figure 3: diagramme de gantt
La figure 3 illustre le diagramme de gantt suivi da²ns notre projet
1.7 Choix méthodologique

Nous avons choisi le modèle en v pour la gestion de notre projet.
15
❖ Pourquoi le modèle en V ?
- Il est idéal pour la gestion et le suivit de projet

- Les besoins sont connus d’avance
- La technique utilisée est connue d’avance
- Il est facile à utiliser est comprendre
- L’équipe est inexpérimentée
Conclusion
Dans ce premier chapitre nous avons travaillé de mettre le projet
dans le cadre générale, dans le deuxième chapitre nous allons créer les
diagrammes de cas d’utilisation pour détailler notre choir conceptuelle.
16
Chapitre II : Spécification Des Besoins
La spécification des besoins doit décrire clairement le logiciel à

développer, elle est constituée d’un ensemble de modèles. Tous les personnages
impliqués dans le projet doivent avoir accès à la spécification des besoins.
2.1 Analyse des besoins

La phase de spécification des besoins est nécessaire pour le développement de
n’importe quel projet informatique. Ces besoins sont classés en deux catégories
« besoins fonctionnels » et « besoins non fonctionnels ».
2.1.1 Besoins fonctionnels

Les besoins fonctionnels expriment une action que doit effectuer le système en
réponse a une demande.
Dans notre projet, nous avons 3 acteurs :
⮚ Administrateur : il est responsable du site web, de sa conception et sa maintenance.
- Recevoir et répondre aux messages : l'administrateur recevra les messages des
clients et pourra en même temps envoyer des réponses.
- Gérer les articles : il peut ajouter des nouveaux articles, supprimer des articles et
aussi modifier des informations sur les articles.
- Ajouter des nouveaux administrateurs : Pour bien gérer le site, l'administrateur peut
ajouter de nouveaux administrateurs pour effectuer différentes tâches.
⮚ Visiteur : c’est un simple internaute qui visite le catalogue en ligne.
- S’inscrire : pour permettre aux visiteurs de passer au stade suivant, il faut qu’il
s’inscrive uniquement pour la première commande mais après, le client peut se
connecter avec son e-mail et son mot de passe pour passer d’autre commandes.
- Gérer le panier : après le choix d’un produit le visiteur doit l’ajouter au panier et
mentionner la quantité. Aussi, le visiteur a la possibilité de supprimer les articles.
- Chercher un produit : pour faciliter l’accès aux produits le visiteur peut faire une
recherche avancée (catégorie, marque...) ou une recherche simple dans la barre
spécifique.
⮚ Membrce : c’est l’internaute qui a un compte dans le site.
18
- Confirmer la commande : la commande ne passera qu’après la validation de toutes

les informations avant de passer à la phase de paiement.
- Choisir le mode de paiement : le client est libre de choisir le mode de paiement de sa
marchandise soit par une carte bancaire ou espèce à la livraison.
- Recevoir la facture : à la fin de toutes les opérations, le client reçoit une facture
détaillée sur la commande et le prix total des marchandises.
2.1.2 Besoins non fonctionnels

Les besoins non fonctionnels sont importants car ils agissent de façon indirecte
sur le résultat et sur le rendement de l’utilisateur, pour cela il faut répondre
aux exigences suivantes :
- Fiabilité : l’application doit fonctionner de façon cohérente sans erreurs et doit être
satisfaisante.
- Ergonomie et bonne interface : l’utilisation de l’application doit être claire et facile à
l’utilisateur sans qu’il ne fournisse aucun effort au niveau de navigation entre les
différentes pages.
- Sécurité : il faut respecter la confidentialité des données personnelles des clients.
2.2 Contraintes esthétiques et ergonomiques
2.2.1 Contraintes ergonomiques

- La hiérarchie des liens dans le site doit être logique.
- La navigation entre les pages doit être simple avec des liens pour le visiteur.
- Les informations doit être facile à accéder et bien diffuser sur le site.
- L’interface doit claire pour aider le visiteur à s’y localiser.
2.2.2 Contraintes esthétique

- Les pages de sites doits être homogène et en harmonisation.
- Les textes doit être lisibles et clairs
- Les graphismes et les couleurs doit respecter la charte graphique.
- Le design de site doit être moderne.
19
2.2.3 Contraintes technique

- Le site doit être fiable avec les navigateurs web et les supports.
- Le site doit avoir un contrôle de sécurité.
- La vitesse de chargement de la page doit être optimale.
- Les données personnels des clients doit être sécuriser (mot de passe, adresse,)
2.3 Méthodologie de conception à adopter

Le Langage de Modélisation Unifié, de l’anglais Unified Modeling Language
(UML), est un langage de modélisation graphique à base de pictogramme conçu
pour fournir une méthode normalisée pour visualiser la conception d’un système.
Il est couramment utilisé en développement logiciel et en conception orientée
objet.
2.4 Spécification des besoins
2. 4.1 Diagramme de cas d’utilisation

Un diagramme de cas d’utilisation utilisé pour donner une vision globale
du comportement fonctionnel d’un système logique.
²²²²²²²²²²²²²²²²²
Figure 4: Diagramme de cas d’utilisation globale
La figure 4 représente le diagramme de cas d’utilisation générale du site web

e-commerce.
20
Figure 5: Diagramme de cas d’utilisation du visiteur
La figure 5 illustre le diagramme de cas d’utilisation du visiteur.
Figure 6: Diagramme de cas d’utilisation d’un membre
21
La figure 6 représente le diagramme de cas d’utilisation du membre.
Figure 7: Diagramme de cas d’utilisation de l’administrateur
La figure 7 représente le diagramme de cas d’utilisation de

l’administrateur.
Conclusion
Cette phase de conception est nécessaire pour permettre aux développeurs
de réaliser un site web qui satisfait tous les besoins et toutes les exigences, dans le
chapitre trois nous allons faire l’étude conceptuelle à travers la scénarisation et
les maquettes ainsi que le choix des couleur et la typographie et la diagramme de
classe.
22
Chapitre III : Etude Conceptuelle
La conception est une étape importante dans le développement d’un site web. Nous
serons intéressés par la partie graphique à travers les maquettes, et aussi par la partie
technique en détaillant le diagramme de classe.
3.1 Conception graphique

La conception graphique est une phase essentielle dans la création d’un site web. Dans cette
partie, nous allons présenter la démarche graphique allant de la création du logo jusqu’à la
réalisation des interfaces du site.
3.1.1 Scénarisation du projet
a) Synopsis
Sujet : La réalisation d’une application web de vente en ligne.
Type : Un site web dynamique, commercial.
Thème : Vente du matériel informatique du « gaming » en ligne.
Support : Internet.
Objectifs : Le développement de la promotion du produit et l’amélioration du l’expérience
client.
c) Objectifs
● Présenter des produits.
● Présenter une description de chaque produit.
● Permettre aux visiteurs de faire la recherche.
● Permettre aux visiteurs de contacter l’administrateur.
● Permettre au client de gérer ses commandes.²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²
d) Scénario
L’idée du projet consiste à concevoir un site web e-commerce qui présente une
variation des produits informatiques avec des descriptions et des images.
3.1.2 Recherche d’un nom du site

La recherche d’un nom qui est associée à l’image du site web.
24
«GAMERS ARENA »
GAMERS : nom masculin en anglais. ARENA : nom
Dans le monde de jeux vidéo le terme Une zone entourée de sièges dans
« gamers » est dédié pour les laquelle i y a une organisation du
individus qui sont passionnés par les divertissement d’évènements.
jeux vidéo.
Nb : nous avons choisi le mot « ARENA » parce que c’est un emplacement de
réunion pour les gens qui sont présenter dans notre cas avec les « gamers » et
aussi parce que ce terme est utilisée souvent dans le monde des jeux vidéo.
25
3.1.3 Conception du logo
a) Recherche graphique du logo
Tableau 3 : Recherche graphique de logo [T3]
Le tableau 3 présente l’évolution du logo.
26
b) Charte Graphique du logo
Figure 8: logo du site
La figure 8 présente le logo final du site web.
La charte graphique est basée sur le logo, c'est à partir de ce dernier que nous
allons concevoir l’identité visuelle de notre site web.
Pour cela nous avons commencé par la création de notre logo «gamers arena »
qui va présenter l’identité visuelle de notre site web.
Notre logotype est composé de :
-un texte : typographie : M12 MACH BIKER
C’est une typographie rétro qui reflet le monde de gaming
-une illustration : un mammouth qui présente le symbole de la force et de la
puissance.
-choix des couleurs :
(#ab0000) Le rouge à la même signification que l’illustration c’est la force.
(#cfd0d2) Le gris signifie le modernisme.
(#000000) Le noir est utilisé fréquemment dans les sites et le matériel

gaming.
27
3.1.4 Conception d’interface
a) Scénario maquette
Intitulé et contenu :
Composants interactifs : le logo, le
menu, les réseaux sociaux,
Zone sensible/ Etat de zone sensible :

⮚ Le logo est un lien vers la page
d’accueil
⮚ La barre de menu déroule lors de la
clique
⮚ Survole sur les images
Interaction:
⮚ Vers toutes les pages principales du
site.
Figure 9: maquette page d’accueil
28
Composants graphique : le slider.
menu, les liens des pages produits, les
réseaux sociaux.

d’accueil.
⮚ Les boutons près les images sont
des liens pour la page détail produit
Interaction:
⮚ Vers toutes les pages principales du
site.
Figure 10 : maquette page des

produits
Composants interactifs : le
logo, le menu, les réseaux
sociaux,
Zone sensible/ Etat de zone
sensible :
⮚ Le logo est un lien vers la
page d’accueil
⮚ Le bouton nous permettre
d’ajouter le produit au
panier
⮚ Le flèche nous permettre
de changer l’image
suivante du produit
Interaction:
⮚ Vers toutes les pages
principales du site.
Figure 11 : maquette page détail produit
29
Composants interactifs : le
logo, le menu, les réseaux
sociaux,
sensible :
⮚ Le logo est un lien vers la
page d’accueil
⮚ Le bouton nous permettre
d’aller vers la page de
paiement.
⮚ Les carrés + et – nous
permet d’augmenter ou
bien de diminuer la
Figure 12: maquette page panier quantité voulue.
Interaction:
⮚ Vers toutes les pages
principales du site.
30
menu, le bouton, le lien
sensible :
d’accueil.
⮚ Le bouton nous permettre de
faire la connexion.
⮚ Le lien nous mène vers la page
d’inscription.
Interaction:
⮚ Cette page nous renvoie vers les
pages principales du site.
Figure 13 : maquette page connexion
menu, le bouton, le lien
sensible :
⮚ Le formulaire contient des
chemins de texte à remplir.
⮚ Le lien nous mène vers la page
de connexion dans le cas
d’existence du compte.
Interaction:
⮚ Cette page nous renvoie vers les
pages principales du site.
Figure 14 : maquette page inscription
31
menu
Interaction:
⮚ Le logo nous renvoie vers la
pages d’accueil.
Figure 15 maquette page facture
Composants interactifs :
le bouton.
⮚ Remplissage obligatoire pour
passer à la page d’accueil.
Interaction:
Cette page nous renvoie vers la page
d’accueil de back office.
Figure 16: maquette page connexion (back

office)
Composants graphique : Les icônes,
le logo.
Les liens, le bouton.
⮚ Chaque lien nous ramène vers une
page.
⮚ Le bouton permet l’administrateur
de se déconnecter.
32
Figure 17: maquette page d’accueil (back Interaction:
office) Cette page nous renvoie toutes les
page de back office.
Composants graphique : Les icônes,
le logo.
Les liens, le bouton.
⮚ Le bouton permet l’administrateur
d’ajouter un article.
⮚ Remplissage obligatoire pour
ajouter un article.
Interaction:
Cette page nous renvoie toutes les
pages de back office.
Figure 18: maquette page ajout produit

(back office)
b) 00000000000000Le s couleurs du site
Figure 19: couleurs du site
La figure 18 illustre les couleurs utilisés dans le site
33
c) Les typographies du site
Figure 20: typographies du site
La figure 18 illustre les typographies utilisées dans le site
Nous avons choisi la police « Quantify» parce que c’est une police qui est proche
du monde de gaming et la police « Centry Gothic » pour son aspect moderne et
pour l’utilisation dans les textes plus longs.
34
d) Recherche interfaces
Dans cette partie nous allons présenter des propositions précédentes de quelque
interface avant le changement des couleurs et de la composition.
35
Figure 21: première proposition de la page d’accueil
36
37
Figure 22: deuxième proposition du page d’accueil
Figure 23: première proposition du page panier
Figure 24: première proposition du page connexion
38
Figure 25: deuxième proposition du page connexion
3.2 Conception technique

La conception technique est la mise au point d’une solution à un problème, elle
permet de créer une représentation simplifiée et détaillée d’un projet.
3.2.1 Diagramme de classe

Les principaux éléments représentés dans ce diagramme sont les différentes
classes, leurs attributs ainsi que les relations entre elles.
39
Figure 26: Diagramme de classe
3.2.2 Dictionnaire des données

Le dictionnaire montre les différentes classes ainsi que leurs attributs, les
descriptions et leurs types.
40
41
Tableau 4: Dictionnaire des données [T4]
Le tableau 4 présente le dictionnaire des données
3.2.3 Modèle relationnel de donnée

À la suite des règles, nous pouvons passer du diagramme de classe vers le schéma
relationnel.
Les clés primaires sont soulignées et les clés étrangères sont précédées par un
dièse.
client(idcl, nomcl, prenomcl, email, adresse, ville, code, numtel)
commande(idcmd, datecmd, moypay, #idcl)
photo(idph, image, image1, image2, #reference)
marque(idm, nomm, logo)
categorie(idctg, libctg) type(idtp,libtp, #idctg)
42
message(idmsg, textmsg, datemsg, #idcl)
admin(ida, noma, mdpa)
Produit(reference, nomp, prix, qtedispo, couleur, typsys, pross, typpross, memc,

ram, typmem, capacite, wifi, bleutooth, taiecran, typecran, notemoy, poids,
dimension, resolution, graphic, usb, hdmi, garantie, #nomm, #idctg)
Conclusion
Dans ce chapitre nous venons de terminer le plan conceptuel de travail dans les
deux niveaux graphique et technique. Dans le chapitre suivant nous allons
présenter la partie réalisation de site.
43
Chapitre IV : Réalisation et Résultat
⮚ 1ère PC :
Marque : asus
Système d’exploitation : Windows 10, 64 bits.
Mémoire : 8 GO.
Disque Dur : 1 TO.
Processeur : Core i5 6éme génération.
⮚ 2ème PC :
Marque : asus
Système d’exploitation : Windows 10, 64 bits.
Mémoire : 8 GO.
Disque Dur : 1 TO.
Processeur : Core i7 4éme génération.
Dans ce chapitre nous allons énumérer les environnements matériels et les

environnements logiciels et langages utilisés dans la réalisation du projet et aussi la
présentation de quelques interfaces du site.
4.1 Environnement matériel

Nous avons utilisé deux pc dans la réalisation de ce Project dont les caractéristiques
sont les suivantes :
4.2 Environnement logiciel et langage utilisé

Nous avons aussi utilisé des différents logiciels
⮚ Adobe illustrateur cc 2017 :
Adobe illustrateur est un logiciel de dessin et de création graphique vectorielle, il offre
plusieurs outils qui servent à la création de toute conception artistique ou graphique.
⮚ Adobe Photoshop cc 2017 :
45
Adobe Photoshop est un programme d'édition graphique qui est développé et édité par
Adobe Systems Incorporated [w3]
⮚ Xampp server :
C’est un ensemble de logiciels permettant de mettre en place facilement un serveur
web local, un serveur FTP et un serveur de messagerie électronique. Il s’agit d’une
distribution de logiciels libres « X(cross) Apache MariaDB Perl PHP » offrant une
bonne souplesse d’utilisation, simple et rapide. [w4]
⮚ PHP :
Le PHP est un langage informatique utilisé sur l'internet. Le terme PHP est un
acronyme récursif de "PHP: Hypertext Preprocessor".
Ce langage est principalement utilisé pour produire un site web dynamique. Il est
courant que ce langage soit associé à une base de données, tel que MySQL. [w5]
⮚ Bootstrap :
Bootstrap est une infrastructure de développement frontale, gratuite et open source
pour la création de sites et d'applications Web. L'infrastructure Bootstrap repose sur
HTML, CSS et JavaScript (JS) pour faciliter le développement de sites et
d'applications réactives et tout-mobile. [w6]
⮚ HTML :
L'HTML est un langage informatique utilisé sur l'internet. Ce langage est utilisé pour
créer des pages web. L'acronyme signifie HyperText Markup Language, ce qui signifie
en français "langage de balisage d'hypertexte". Cette signification porte bien son nom
puisqu'effectivement ce langage permet de réaliser de l'hypertexte à base d'une
structure de balisage. [w7]
⮚ CSS :
Le terme CSS est l'acronyme anglais de Cascading Style Sheets qui peut se traduire
par "feuilles de style en cascade". Le CSS est un langage informatique utilisé sur
l'internet pour mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de style,
aussi appelé les fichiers CSS, comprennent du code qui permet de gérer le design
d'une page en HTML. [w8]
46
⮚ JavaScript :
Le JavaScript est un langage informatique utilisé sur les pages web. Ce langage à la
particularité de s'activer sur le poste client, en d'autres mots c'est votre ordinateur qui
va recevoir le code et qui devra l'exécuter. C'est en opposition à d'autres langages qui
sont activé côté serveur. L'exécution du code est effectué par votre navigateur internet
tel que Firefox ou Internet Explorer. [w9]
⮚ JQuery :
jQuery est un framework Javascript sous licence libre qui permet de faciliter des
fonctionnalités communes de Javascript. [w10]
⮚ Ajax :
est l'acronyme d'Asynchronous JavaScript and XML, ce qui, transcrit en français,
signifie « JavaScript et XML asynchrones ».
Derrière ce nom se cache un ensemble de technologies destinées à réaliser de rapides
mises à jour du contenu d'une page Web, sans qu'elles nécessitent le moindre
rechargement visible par l'utilisateur de la page Web [w11]
4.3 Problèmes rencontrés

Au cours de développement de l’application, nous avons traversé beaucoup de
problèmes dont lesquels :
● Absence superviseur de stage.
● Problème au développement de la page panier.
4.4 Interfaces homme machine
4.4.1 Interfaces visiteur

Dans cette partie nous allons présenter les interfaces finale du notre site :
47
48
Figure 27: page d’accueil
49
La figure 27 présente la première page du site qui va mettre le client dans le
monde de gaming
50
Figure 28: page produits
51
La figure 28 présente la page des produits à travers le client peut les ajouter au
panier.
52
Figure 29: page d’détails produit
La figure 29 présente la page qui montre les détails de chaque produit.
4.4.2 Interfaces membre
Figure 30 : page panier
La figure 30 présente la page panier qui permet au client de modifier, supprimer

ses achats.
53
Figure 31 : page facture
La figure 31 présente la page facture qui s’affiche après passer une commande.
54
Figure 32: Page inscription

La figure 32 présente la page d’inscription des nouveaux membres.
55
Figure 33: Page connexion
La figure 33 présente la page connexion qui sont déjà inscrit.
4.4.3 Interfaces administrateur
Figure 34: Page connexion

La figure 34 présente la page connexion de l’administrateur.
56
Figure 35: Page d’accueil

La figure 35 présente la page d’accueil d’administrateur.
57
58
Figure 36: Page ajout produit

La figure 36 présente la page ajout produit.
59
4.5 Chronogramme
Cette partie est réservée pour la description de toutes les étapes de la création du
site. La table 4 présente le chronogramme prévisionnel par semaine.
Tableau 5: Chronogramme [T5]
Le tableau 5 présente le chronogramme prévisionnel par semaine
Conclusion
Dans le chapitre réalisation nous avons appelé à présenter les interfaces réalisé
dans notre site web pour clarifier les étapes d’utilisation de notre site avec ses
deux parties statique et dynamique.
60
Conclusion
Ce projet se dirige dans le cadre de notre mémoire licence en

communication multimédia au sein de l’institut supérieur des arts multimédia de
Manouba
Pour réaliser le site web « «GAMERS ARENA » nous avons passé un stage
de quatre mois dans la société «web media international ». Nous avons été guidés
pour mettre en pratique nos connaissances en conception graphique et en
développement web et même d’amélioré ces connaissances.
Après l’étude de l’existant abordant la même problématique sur laquelle
repose notre projet de fin d’étude nous avons conçu un site web de commerce
électronique qui répond aux besoins des clients ainsi qu’aux tendances graphique.
Nous avons aussi développé le site en le rendant dynamique et sécurisé
Nous avons pu réaliser ce site aux moyens de différents logiciels et langages
de programmation et de Design. Nous avons connaissons quelques-uns que nous
sommes arrivés à maitrise à la fin du stage on cite comme exemple les langages
HTML, PHP, CSS, SQL, JQuery et les logiciels adobe Photoshop et adobe
Illustrator.
Pour conclure, nous avons effectué un stage bénéfique pour notre carrière
dans le domaine de Design et de développement des sites web lors duquel nous
avons eu l’occasion de faire preuve de créativité et nous avons pu mettre en
pratique, non seulement nos connaissances, mais aussi nos compétences sur le
plan professionnel et social.
Nous espérons, dans l’avenir, pouvoir bénéficier de notre expérience dans
«web media international » et de le mettre en valeur dans des nouveau défis et de
satisfaire notre engouement pour l’apprentissage.
61
62
Webographie
✔ [w1] http://www.sbsinformatique.com/
✔ [w2] https://tdiscount.tn/
✔ [w3] http://www.livre-photoshop.com/information.html
✔ [w4]https://desgeeksetdeslettres.com/programmation-java/xampp-plateforme-pour-
heberger-son-propre-site-web
✔ [w5] http://glossaire.infowebmaster.fr/php/
✔ [w6] https://whatis.techtarget.com/fr/definition/Bootstrap
✔ [w7] http://glossaire.infowebmaster.fr/html/
✔ [w8] http://glossaire.infowebmaster.fr/css/
✔ [w9] http://glossaire.infowebmaster.fr/javascript/
✔ [w10] http://glossaire.infowebmaster.fr/jquery/
✔ [w11]https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-j
avascript/1920925-quest-ce-que-lajax
63
Bibliographie
[B1] Christian Soutou, UML 2 pour les bases de données,,2012
[B2] Richard Grin, Langage SQL, 2008.
[B3] Eric daspet, Php 5 avancé 6éme édition, 2012
[B4] Larry Ullman, PHP & MySQL Développement de sites Web, la source d’or,
2004.
64

AJa 1 Ir FFQBu 5 Fbe JJ 29 K BMLKGV AK8 RVuf XXJFEu X

Transféré par

Informations du document

Titre original

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

AJa 1 Ir FFQBu 5 Fbe JJ 29 K BMLKGV AK8 RVuf XXJFEu X

Transféré par

Droits d'auteur :

Formats disponibles

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

Institut Supérieur des Arts Multimédias

MÉMOIRE DE PROJET DE FIN D’ETUDES

CONCEPTION ET DÉVELOPPEMENT D’UN SITE

Mme Hadj Khlifa Ismahen

Année Universitaire 2018-2019

En préambule à ce mémoire on remercie Dieu qui nous a aidés et nous a donné la

Aussi nos remerciements au corps professoral et administratif de l’institut qui

Nous remercions sincèrement Mme Hadj Khlifa Ismahen notre encadrante

À tous nos enseignants, Pour leur bienveillance et pour leur contribution à

À nos familles et nos amis, pour leur affection et leur soutien.

L’équipe Web Média International, Pour leurs efforts continus, et leurs

2.2.1 Contraintes ergonomiques 18

2.2.2 Contraintes esthétique 18

Tableau 1: analyse de site web « SBS informatique » [T1] 7

Figure 1: Page gaming su site « SBS informatique » [w1] 6

Il est important de bien analyser et de faire une étude de l’existant avant de

1.2 Présentation du projet

1.4 Etude de l’existant

1.4.1 Etude du site « SBSinformatique.com »

❖ Etude graphique de la page gaming

Figure 1: Page gaming su site « SBS informatique » [w1]

Tableau 1: analyse de site web « SBS informatique » [T1]

Le tableau 1 représente l’analyse graphique de site web « SBS informatique »

❖ Etude technique de la page gaming

● Consulter les articles.

le membre a les mêmes fonctionnalités que le visiteur et aussi :

1.4.2 Etude du site « tdiscount.tn »

❖ Etude graphique de la page gaming

Figure 2: Page gaming du site « tdiscount » [w2]

La figure 2 présente une page de site de vente des matériels informatiques en

Tableau 2 : analyse de site web « Tdiscount » [T2]

Le tableau 2 représente l’analyse graphique de site web « Tdiscount »

• La page est bien organisée.

• Les prix sont clairs.

• Un graphique très simple.

• Une dominance totale du blanc.

❖ Etude technique de la page gaming

• Les produits sont organisés du moins cher au plus cher.

• Facile à commander un produit.

• Le site très encombré ce qui implique la difficulté de la navigation.

1.5 Solution proposé

1.5.1 Au niveau graphique

1.5.2 Au niveau technique

- adapter des produits aux besoins des consommateurs.

1.6 Diagramme de gaantt

Figure 3: diagramme de gantt

La figure 3 illustre le diagramme de gantt suivi da²ns notre projet

1.7 Choix méthodologique

❖ Pourquoi le modèle en V ?

- Il est idéal pour la gestion et le suivit de projet

La spécification des besoins doit décrire clairement le logiciel à

2.1 Analyse des besoins

2.1.1 Besoins fonctionnels

- Confirmer la commande : la commande ne passera qu’après la validation de toutes

2.1.2 Besoins non fonctionnels

2.2 Contraintes esthétiques et ergonomiques

2.2.1 Contraintes ergonomiques

2.2.2 Contraintes esthétique

2.2.3 Contraintes technique

2.3 Méthodologie de conception à adopter

2.4 Spécification des besoins

2. 4.1 Diagramme de cas d’utilisation