‫الجمهورية الجزائرية الديمقراطية الشعبية وزارة التعليم العالي و‬

‫البحث العلمي‬

Université de khenchela

Faculté de MATHÉMATIQUES et INFORMATIQUE

Département d’Informatique

MEMOIRE
En vue de l’obtention du diplôme de LICENCE en :

Informatique
SPECIALITE : SYSTEMES INFORMATIQUES (SI)
Intitulé

Conception d’un site E-commerce de vente d’accessoires mobiles

Présenté par :

▪ Hamzaoui Isra Meryem

▪ Hamlaoui Amel
▪ Friha Laiche Anouar

Devant les membres de jury :

 Année: 2023/2024

Dédicaces :
On a le plaisir de dédier ce modeste travail :

A nos chers parents qui nous ont soutenus durant la durée de

ce projet et qui ont toujours souhaité notre réussite.

A toutes nos familles A tous nos amis(e) pour leurs présences

et
encouragement.

A tout le personnel de département Informatique qui nous ont

apportés de l’aide.

Semmach Chekre Mama Mohamed El Amine

 Dédicaces :
On dédie ce modeste travail
A nos chers parents, pour tous leurs sacrifices, leur amour,
leur tendresse, leur soutien et leurs prières tout au long de
nos études,
A tous nos amis et nos proches pour leur appui et leur
encouragement,
A toutes nos familles pour leur soutien tout au long de nos
parcours universitaire,
Que ce travail soit l’accomplissement de vos vœux tant
allégués, et le fruit de votre soutien infaillible.
Merci d’être toujours là pour nous.
 Benali Mahdjouba
Remerciements
On remercie dieu tout le puissant de nous avoir donné la
Force, la santé, le courage et la patience de pouvoir accomplir
ce travail qui est pour nous le point de départ d’une
merveilleuse aventure, celle de la recherche, source de remise
en cause permanente et de perfectionnement perpétuel.
Un grand merci à toutes nos familles surtout nos parents pour
leur encouragement et leur suivi avec patience le déroulement
de notre projet.
Nous tenons à remercier également notre professeur :
Dr. AMARA SOFIANE
D’avoir accepté de Nous guider tout au long de ce travail.
Nous tenons aussi à remercier tous les membres De jury
d’avoir accepté d’évaluer notre travail.
Nos sincères remerciements à tous ceux qui ont contribué de
près ou de loin à la réalisation de ce travail.
Résumé :

Le présent mémoire porte sur la conception et la réalisation d’un site web

dynamique pour la vente d’accessoires mobiles. Pour bien implémenter les besoins de
notre projet, nous nous sommes orientés vers la modélisation qui représente une étape
clé de tout travail réussi. Nous avons utilisé le formalisme graphique proposé par UML,
ce dernier est un langage basé sur l’orienté objet. Guidés par le processus UP, nous avons
réussi à faire une bonne conception qui nous a facilité la réalisation de notre application.
Pour ce qui concerne la réalisation, nous avons pu aboutir à une application dynamique
en utilisant des langages de programmation tels que PHP, HTML, CSS et JavaScript. Ces
outils dont les performances sont indiscutables nous ont permis d’implémenter un site
web capable de répondre aux exigences des utilisateurs.

Mots clés : E-commerce, Site web, Conception, UML, Développement.

Abstract:

The present dissertation focuses on the design and creation of a dynamic website
for the sale of mobile accessories. To well implement the requirements of our project, we
were oriented to the modeling which is considered as a key step in any successful work.
We used the graphical formalism proposed by UML, a language that is based on oriented
object method. Guided by the UP process, we have managed to make a good design that
helped us to create our site. Regarding the implementation phase, we were able to
achieve a dynamic website using some programming languages like PHP, HTML, CSS and
JavaScript. These tools with indisputable performances allowed us to implement a
website that can meet the user’s requirements.

KeyWords : E-commerce, Web site, Conception, UML, Développement.

Table des matières

3
Résumé : ................................................................................................................................................
3
Abstract: ................................................................................................................................................
3
Table de figures : .................................................................................................................................
7
Liste de tableaux : ................................................................................................................................
9
Liste des abréviations : .....................................................................................................................
10
Introduction générale ......................................................................................................................
11
Chapitre 1 : E-commerce et le domaine de la téléphonie mobile ............................... 13
1. Introduction : .............................................................................................................................
14
1.1. Histoire de E-commerce : [1] ...........................................................................................
14
2. Définition et types de E-commerce : ......................................................................................
15
2.1. Définition de E-commerce : .............................................................................................
15
2.2. Types de E-commerce : .....................................................................................................
15
2.2.1. B2B (Business-to-Business) ....................................................................................
15
2.2.2. B2C (Business-to-consumer)................................................................................... 15
2.2.3. B2A (Business to Administration) : ....................................................................... 15
2.2.4. C2C (Consumer-to-Consumer) ................................................................................
16
2.2.5. A2C (Administration to Consumer) : ..................................................................... 16
3. Avantages et inconvénients du e-commerce :...................................................................... 16
3.1. Les avantages : ...................................................................................................................
16
3.2. Les inconvénients : ............................................................................................................
17
4. Différence entre un site web statique et un site web dynamique : ................................. 17
4.1. Définition et fonctionnement d’un site web statique : ...............................................
17
4.2. Définition et fonctionnement d’un site web dynamique : .........................................
18
4.3. Les avantages d’un site web statique et dynamique : ................................................ 19

4
 4.3.1. Les avantages d’un site web statique : .................................................................. 19
4.3.2. Les avantages d’un site web dynamique ............................................................... 19
4.4. Comparaison entre un site web statique et un site web
dynamique ............................... 20
5. Les moyens de paiement sur les sites web de commerce électronique : ....................... 20
6. Présentation de notre projet : .................................................................................................
21
6.1. Classification des articles liés à la téléphonie mobile : ..............................................
21
6.1.1. Définition de la téléphonie mobile : ...................................................................... 21
6.1.2. Les types de la téléphonie mobile : ........................................................................
21
6.1.3. Accessoires : ............................................................................................................... 22
6.1.4. Services : ......................................................................................................................
22
6.1.5. Application mobile : ..................................................................................................
22
6.2. Problématique ............................................................................................................... 23
6.3. Les objectifs principaux de notre projet ................................................................... 23
7. Conclusion : .................................................................................................................................
23 Chapitre 2 : Conception et
Modélisation ..................................................................................... 24
1. Introduction : .............................................................................................................................
25
2. Cycle de vie de logiciel : ............................................................................................................
25
2.1 . Phases de cycle de vie : ...................................................................................................
25
2.1.1. Définition des objectifs :........................................................................................... 25
2.1.2. L’analyse des besoins : ..............................................................................................
25
2.1.3. La Conception : ...........................................................................................................
25
2.1.4. Le Codage : ..................................................................................................................
25
2.1.5. Le test : .........................................................................................................................
25
2.1.7. La maintenance : ........................................................................................................ 26
2.2 Modèles de Cycle de vie : ..................................................................................................
26

5
 2.2.1. Modèle en cascade : ...................................................................................................
26
2.2.2. Modèle en V :...............................................................................................................
27
2.2.3. Modèle en Spirale : ....................................................................................................
27
2.2.4. Modèle Incrémental : ................................................................................................
28
2.3 Les avantages et les inconvénients de chaque modèle : ............................................ 29
Comparaison entre les modèles de cycle de vie : ....................................................................
31
3. Méthodologie de conception : .................................................................................................
32
3.1 Merise [10]: .........................................................................................................................
32
3.1.1. Cycle d’abstraction de merise : ...............................................................................
32
3.2 UML : [11] ............................................................................................................................
33
3.2.1. Les différents diagrammes UML .............................................................................
34
Diagramme de cas d’utilisation ..............................................................................................
35
Diagramme d'activités ..............................................................................................................
36
Diagramme de séquence ..........................................................................................................
38
Diagramme de classes ..............................................................................................................
41
3. Conception de la base de données : ...........................................................................................
42
3.1 Les tables de la base de données : .......................................................................................
42
La table produits : ......................................................................................................................
43
La table administrateur : ......................................................................................................... 43
La table catégories : ..................................................................................................................
43
La table utilisateur : ..................................................................................................................
44

6
Conclusion :.........................................................................................................................................
44
Chapitre 3 : ..........................................................................................................................................
45
Réalisation ..........................................................................................................................................
45
1. Introduction : ........................................................................................................................
46
2. L’environnement de développement ....................................................................................
46
2.1. L’environnement matériel : .............................................................................................
46
2.2. Environnement Logiciel (outils de développements) : ..............................................
46
2.2.1. XAMPP .........................................................................................................................
46
2.2.2. PHPMyAdmin : ...............................................................................................................
.. 47
2.2.3. Visual studio
code: .......................................................................................................... 48
2.2.4. Navigateur web
: ............................................................................................................. 49
2.2.5. Apache :............................................................................................................................
. 50
2.2.6. Langages et outils de développement : ......................................................................
50
3. Les principales interfaces
graphiques : .................................................................................... 52
3.1. La page d’accueil : .................................................................................................................
52
3.2. Inscription d’un utilisateur : ...............................................................................................
53
3.3. Connexion d’un utilisateur : ................................................................................................
53
3.4. Espace
administrateur : ........................................................................................................ 54
3.5. Ajouter un client : ..................................................................................................................
54
3.6. Consulter (modifier et supprimer) la listes des clients inscrits : ................................
55

7
 3.7. Ajouter un Article : ................................................................................................................
55
3.8. Consulter (modifier et supprimer) la listes des articles disponibles : .......................
56
Conclusion :.........................................................................................................................................
56
Conclusion générale : ........................................................................................................................
57
Bibliographie .........................................................................................................................................
58

8
 9

Table de figures :
Figure 1 : Un Site Web statique………………………………………………………………………………..18
Figure 2 : Un site web dynamique……………………………………………………………………………18
Figure 3 : Modele en cascade…………………………………………………………………………………...26
Figure 4 : Modèle en V……………………………………………………………………………………………..27
Figure 5 : Modèle en spirale……………………………………………………………………………………..28
Figure 6 : Modèle Incrémental………………………………………………………………………………….29
Figure 7 : Les niveaux de merise…………………………………………………………………………….33
Figure 8 : Diagramme de cas utilisation pour visiteur un client……………………………….…35
Figure 9 : Diagramme de cas utilisation pour admin………………………………………………….36
Figure 10 : Diagramme d’activité de l’authentification………………………………………...........36
Figure 11 : Diagramme d’activité d’ajout d’un produit par administrateur………………....37
Figure 12 : Diagramme d’activité d’un produit par un administrateur…………………….…37
Figure 13 : Diagramme d’activité de suppression d’un produit par un administrateur..38
Figure 14 : Diagramme de séquence pour admin………………………………………......................39
Figure 15 : Diagramme de séquence pour inscription……………………………………….............40
Figure 16 : Diagramme de séquence pour passer une commande………………………………41
Figure 17 : Diagramme de class……………………………………….........................................................42
Figure 18 : La table produite………………………………………...............................................................43
Figure 19 : La table administrateur………………………………………..................................................43
Figure 20 : La table de Base de données catégories………………………………………..................43
Figure 21 : La table de Base de données utilisateur…………………………………………………...44
Figure 22 : Capteur de XAMPP……………………………………................................................................47

Figure 23 : Capture de PHPMy……………………………………................................................................48

Figure 24 : Capture de Visual studio code ………………………………….........................................49

Figure 25 : Capture de Navigateur web ……………………………………...........................................50

Figure 26 : Capture de l’interface Edraw UML Diagram……………………................................52

Figure 27 : Capture de la page d’accueil……………………………………..........................................52

Figure 28 : Capture de l’interface Inscription d’un utilisateur ……………….….......................53

9
 10

Figure 29 : Capture de l’interface Connexion d’un utilisateur ………………….…………………..53

Figure 30 : Capture de l’interface Espace administrateur ……….………………...........................54

Figure 31 : Capture de l’interface Ajouter un client ………………………......................................54

Figure 32 : Capture de l’interface Consulter la listes des clients inscrits…………………………..55

Figure 33 : Capture de l’interface Ajouter un Article …………………….........................................55

Figure 34 : Capture de l’interface Consulter la liste des articles……………………………………56

1
 11

Liste de tableaux :

Tableau 1 : Tableau comparatif entre un site web statique et un site web dynamique...20

Tableau 2 : Les avantages et les inconvénients entre les modèles de cycle de vie............29

Tableau 3 : Tableau Comparaison entre les modèles de cycle de vie.....................................31

Tableau 4 : Tableau les diagrammes d’UML……………………………………………………………….…….34

Liste des abréviations :

E-commerce: Electronique commerce.

UML: Unified Modeling Langage.

HTML: Hyper Text Markup language

CSS: Cascading Style Sheets

B2B: Business-to-Business

1
 12

B2C: Business-to-consumer

B2A: Business to Administration

C2C: Consumer-to-Consumer

A2C: Administration to Consumer

Introduction générale
Les avancées technologiques de la science informatique dans le domaine du
développement accaparent une large part d'attention du public. Il devient impensable à
notre époque de ne pas disposer de cet outil « l’ordinateur » dans l'administration vue
son importance et son efficacité, dans presque tous les domaines de l'entreprise

Cette émergence en perpétuelle évolution et l'apparition de l'internet ont offert la

possibilité d'intervention considérable d'accroitre et d'épanouir la communication dans
le monde à travers un lieu virtuel qui regroupe des pages web que nous appelons le « site
web », qui est devenu une vitrine pour les différentes sociétés à travers le monde.

Dans le souci de combiner les technologies des ordinateurs personnels, et des

réseaux informatiques en un système d'information puissant à utiliser, le web est venu
pour répondre aux interrogations humaines, lesquelles : Comment partager les
informations entre des personnes sans tenir compte de la distance, comment peut-on
visiter une entreprise à distance. Et à toutes ses interrogations la réponse est celle de
l'intégration dans le domaine du www (World Wide Web).

L’utilisation rapide de ce moyen de communication (l’interne) a permet

l’apparition d’une nouvelle forme de commerce, qui est le commerce électronique ou
bien E-commerce. En utilisant ce dernier, les frontières n’existent plus. Les avantages
sont nombreux : plus de choix, comparaison des prix plus facile… Mais cela ne signifie
pas qu’il n’existe pas de règle précise pour bien consommer sur le net.

1
 13

Dans le cadre de notre projet de fin d’études nous avons réalisé un site web
dynamique commercial offrant aux clients la possibilité d’effectuer leurs commandes en
ligne sans se déplacer et aussi de consulter le catalogue d’accessoires mobile disponible.

Au cours de ce projet, nous allons voir en premier chapitre une vue d’ensemble
sur notre travail et nos objectifs avec quelques généralités sur notre domaine de travail
qui est le e-commerce.

Ensuite, en chapitre 2, nous aborderons la partie conception à savoir toute l’étude qui a
été faite et les diagrammes de la méthode UML utilisée ainsi que quelques définitions et
généralités sur ces derniers.

Et enfin en troisième et dernier chapitre, nous présenterons la partie réalisation

incluant la présentation de l’environnement dans lequel notre application a été réalisée,
les outils utilisés, et quelques interfaces de notre application.

1
Chapitre 1 : l’e-commerce et le domaine de la téléphonie mobile 14

Chapitre 1 :
E-commerce et le
domaine de la
téléphonie mobile

1. Introduction :

Le E-commerce s’est imposé comme une nouvelle forme de commerce qui a

entrainé de nouvelles relations clients fournisseurs, de nouvelles méthodes de gestion, et
de nouvelles formes d’organisations.
A travers ce premier chapitre, Nous allons déterminer le cahier de charge et les
objectifs à atteindre dans ce projet. Ainsi, nous réalisons une étude de l’existant dans le

1
Chapitre 1 : l’e-commerce et le domaine de la téléphonie mobile 15

domaine du commerce (classique) des accessoires des téléphones mobiles, et nous

proposons des solutions pour les différents problèmes rencontrés.

1.1. Histoire de E-commerce : [1]

La numérisation de l’économie a modifié en profondeur les processus traditionnels

de production des entreprises ainsi que les marchés de consommation. De nouveaux
modèles apparaissent comme en témoigne la domination du commerce électronique.
C’est au cours des années 90 qu’internet commence à envahir petit à petit notre
quotidien pour ne plus être réservé seulement ce que son usage ne reste plus limité aux
professionnels et le e-commerce commence alors à se mettre en place. -Voici quelques
dates à retenir qui ont marqués l’histoire du e-commerce :
-1979 : Michael Aldrich invente la transaction en ligne.
-1981 : Citibank lance les premiers services bancaires.
-1981 : Première transaction B2B au Royaume-Uni.
-1991 : The National Science Fondation autorise le web commercial
-1992 : Charles M. Stack fonde la première librairie en ligne (Book
StacksUnlimited) et crée le site com.
-1994 : Phil Brandenberger effectue la première transaction en ligne entièrement
sécurisée par un logiciel de cryptage (un Album de l’artiste Sting couté 12,48 $).
-1994 : Pizza Hut lance le premier système de commande et de paiement en ligne.
-1995 : Amazon, Ebay et Dell ouvrent leur site.
-1997 : Naissance du commerce mobile (les Finlandais inventent l’m-commerce.
En envoyant un SMS, ils achètent leurs canettes depuis un distributeur de Coca-Cola
connecté)

-1998 : Lancement de PayPal, grâ ce à la fusion entre Cofinity et [Link]. -2001 :

Naissance d’ITunes Store.
-2003 : Google lance Google AdWords.
-2006 : Apparition de Google Checkout.
-2008 : Lancement de Groupon.
-2008 : Apparition de Magneto pour faciliter la création des boutiques en ligne.

2. Définition et types de E-commerce :

1
Chapitre 1 : l’e-commerce et le domaine de la téléphonie mobile 16

2.1. Définition de E-commerce :

Le e-commerce, également appelé commerce électronique, est toute activité

commerciale qui se déroule via internet, certains le connaissent comme une activité
commerciale dans laquelle des biens et des services sont achetés, vendus et échangés sur
internet.

2.2. Types de E-commerce :

2.2.1. B2B (Business-to-Business)

Ce type de e-commerce est basé sur l’échange électronique entre deux ou plusieurs
entreprises. Dans ce type de commerce électronique, la relation entre les différentes
parties (entreprises) est souvent à long terme, et ne se limite pas à l’achat d’un produit
uniquement, comme c’est le cas dans le type B2C.

2.2.2. B2C (Business-to-consumer)

Il représente l’échange électronique entre une entreprise et une personne privée

(consommateur). C’est l’un des types de commerce électronique les plus courants et il
s’incarne simplement sous la forme d’une boutique en ligne qui vend des produits à des
consommateurs individuels.

2.2.3. B2A (Business to Administration) :

Ce type de commerce électronique est basé sur l’échange électronique entre les
entreprises privées et l’administration, souvent appelé B2G ("Business to Government").
Dans ce type de commerce, une entreprise privée (une partie commerciale) vent un
produit ou fournis un service à une autorité gouvernementale par le biais d’internet par
exemple.

2.2.4. C2C (Consumer-to-Consumer)

C’est l’échange électronique entre deux consommateurs. La diffusion de ce type

d’échange se fait à travers des sites de commerce électronique dans lesquels des
particuliers proposent leurs produits à la vente à d’autres particuliers, à condition que le
site par intermédiaire duquel la vente a lieu reçoive une commission à un pourcentage
préalablement convenu.

1
Chapitre 1 : l’e-commerce et le domaine de la téléphonie mobile 17

2.2.5. A2C (Administration to Consumer) :

C’est l’échange électronique entre une administration et une personne privée. A

travers ce type de commerce, les gens peuvent avoir des services en ligne fournis par des
administrations différentes (par ex : paiement des factures, choix et achat des logements,
etc.).

3. Avantages et inconvénients du e-commerce :

Comme toutes activités de ventes, le commerce électronique se caractérise par

des avantages et des inconvénients.

3.1. Les avantages :

Dans un premier temps, nous allons analyser les avantages que le e-commerce
procure à l’entreprise ainsi qu’à ses clients.

• Pour l’entreprise :

- Réduire les dépenses de l’entreprise.

- Créer de nouveaux marchés pour les importateurs et les exportateurs.
- Il permet de se développer sur des marchés, surtout dans les cas où il est
impossible de créer des marchés réels.
- Il facilite les transactions en évitant à l’acheteur de se déplacer (donc de lui faire
gagner du temps) tout en lui offrant un service identique et confortable.

• Pour les clients :

- Economiser du temps et des efforts

- Faciliter la recherche du meilleur prix.
- Fournir un marché aux puces à l’échelle mondiale.
- Fournir des offres actualisés (on trouve toujours les derniers modèles.)

3.2. Les inconvénients :

• Pour l’entreprise :

1
Chapitre 1 : l’e-commerce et le domaine de la téléphonie mobile 18

- Le manque de confiance et les problèmes de confidentialité : le E-commerce est

exposé à de nombreuses fraudes du fait de l’impossibilité de vérifier l’identité des
clients. - Les pannes technologiques peuvent avoir une incidence sur la capacité de
vendre : si le site de e-commerce d’une entreprise est lent ; en panne ou indisponible
pour ses clients, cela signifie qu’aucune vente ne sera possible.
- Les problèmes de sécurité électronique (les attaques, les virus, etc).

• Pour les clients :

- Il n’y a pas de possibilité d’essayer le produit avant de l’acheter.

- La difficulté de faire appel au service après-vente en cas de problème.
- La possibilité de tomber sur un site malveillant.

4. Différence entre un site web statique et un site web

dynamique :

4.1. Définition et fonctionnement d’un site web statique :

Un site web statique contient des pages web avec un contenu fixe. Chaque page
est codée en HTML et affiche les mêmes informations à chaque visiteur. Les sites
statiques constituent le type de site web les plus faciles à crées. Contrairement à sites
dynamiques, ils ne nécessitent aucune programmation web ou base de données
spécifique. Un site web statique peut être réalisé en créant simplement quelques pages
HTML et en les publiant sur un serveur web [9] (voir la figue 1).

1
Chapitre 1 : l’e-commerce et le domaine de la téléphonie mobile 19

Figure 1 : Un Site Web statique

4.2. Définition et fonctionnement d’un site web dynamique :

Les sites dynamiques contiennent des pages web qui sont générés en temps réel.
Ces pages incluent du code de script web, tel que PHP or ASP. Lors de l’accès à une page
dynamique, le code de page est analysé sur le serveur web et le résultat HTML est envoyé
au navigateur web du client.
Les sites web dynamiques ont la possibilité d’accéder à tout moment aux
informations d’une base de données [3].

Figure 2 : un site web dynamique

4.3. Les avantages d’un site web statique et dynamique :

1
Chapitre 1 : l’e-commerce et le domaine de la téléphonie mobile 20

4.3.1. Les avantages d’un site web statique :

Pour modifier une page web statique il suffit de maitriser l’HTML. Mettre à
jour ce genre de pages web représente alors une tache fastidieuse. Parmi les avantages
des sites web statiques on peut citer :
➢ Le site internet est mis à jour en local sur la machine de l'administrateur :
il n'y a donc pas de surprise une fois que le site est en ligne. [4]
➢ Le site internet ne fait pas appel aux technologies en perpétuelles
évolutions qui permettent la mise en place de sites dynamique (PHP, Ruby, Python, Perl,
Java, ASP, etc.) : on gagne donc en sécurité et en veille technologique [4]
➢ Le site internet statique consomme peu de ressource serveur : le site
n'utilisant aucune technologie compliquée (ex : PHP + MySQL + Apache). Les coû ts
d'entretien et de maintenance sont très inférieurs à ceux d'un site dynamique. [4]
➢ Le site internet statique se sauvegarde plus facilement. Le fait de disposer
directement des pages HTML du site facilite la sauvegarde (un simple copier / coller sur
une clé USB est suffisant). [4]

4.3.2. Les avantages d’un site web dynamique

➢ De nombreux scripts gratuits existent déjà et permettent de réaliser tous

les sites qu'on souhaite. Ainsi en téléchargeant le script (ou CMS : Content Management
System) qui va bien, il sera très simple de créer un forum, un blog ou tout autre site. [4]
➢ La mise à jour est très simple : une fois le script dynamique en place, on
met à jour le site en ligne dans la partie « administration » du site. On peut donc mettre à
jour le site de n'importe quel ordinateur et même depuis certains téléphones mobiles
(avec un accès Internet). [4]
➢ Avec un site dynamique il est possible de réaliser une grande interaction
avec les visiteurs. Ils peuvent donc rester beaucoup plus longtemps sur vos pages si les
fonctionnalités sont intéressantes. [4]

4.4. Comparaison entre un site web statique et un site web

dynamique

Site web statique Site web dynamique

2
Chapitre 1 : l’e-commerce et le domaine de la téléphonie mobile 21

Un site web dont les pages sont Un site internet dont les pages
codées en HTML. Et le contenu de web générées en temps réel
chaque page est fixe, et ne se
change
Développé à l’aide du client. Développé à l’aide du client.
Technologie annexe telle que Technologies annexe ainsi
HTML et CSS que langage de script coté
serveur

Le contenu reste inchangé sauf s’il Le contenu change en fonction

est modifié à partir du code source des demandes des clients
Simple et facile à programmer Plus complexe et d’interaction
avec l’utilisateur
Accéder aux
Ne pas accéder aux bases de informations d’une
données base de données

Moins cher à héberger Couteux à héberger

Difficile à mettre à jour Plus facile à mettre à jour

Utilisé pour les sites web à petite Convient pour les sites web
échelle qui nécessitent des de commerce électronique et
changements continus de médias sociaux à grand
échelle

Tableau 1 : Tableau comparatif entre un site web statique et un site web dynamique

5. Les moyens de paiement sur les sites web de commerce

électronique :

Plusieurs moyens de paiement peuvent être distingués :

✓ Le paiement par carte bancaire : La carte bancaire est aujourd’hui utilisée

dans la majorité des paiements en ligne. L’acheteur se connecte au site du vendeur et
envoie son numéro de carte bancaire. Le serveur communique à la banque de ce dernier
afin d’obtenir ces coordonnées bancaires via un formulaire virtuel. [5]

✓ PayPal : c’est le moyen le plus utilisé sur internet actuellement.

L’utilisateur communique ses informations d’accès (nom utilisateur et mot de passe), en

2
Chapitre 1 : l’e-commerce et le domaine de la téléphonie mobile 22

plus de son numéro de carte avec sa date d’expiration. A travers PayPal, les risques
d’interception des informations d’accès sont très faibles.
✓ Paiement par téléphonie : Le payement par téléphone est utilisé surtout
pour des transactions peu importantes, l’acheteur doit utiliser son téléphone pour
appeler le numéro fourni par le vendeur sur son site Internet, et le montant de l’achat
apparaît sur la facture de l’abonnement du téléphone à la fin du mois. [5]
✓ Paiement contre livraison : C’est une solution coû teuse, mais rassurante,
tant pour le client que pour le vendeur. Cette formule très classique permet au client de
régler le montant de l’achat lors d’une donnée de la livraison. [5]

6. Présentation de notre projet :

Notre travail s’intègre dans le domaine du e-commerce, d’où l’objectif de notre

projet consistant en la conception et la réalisation d’un site web dynamique pour la vente
d’accessoires mobiles qui offre aux clients une navigation rapide et intuitive, des offres
claires et une interface ergonomique.

6.1. Classification des articles liés à la téléphonie mobile :

6.1.1. Définition de la téléphonie mobile :

La téléphonie mobile désigne toute l'infrastructure de télécommunication

permettant d'utiliser des téléphones portables (que l'on appelle également téléphone
mobile ou téléphone cellulaire), permettant de téléphoner presque partout. Cette
technologie, notamment grâ ce aux progrès constant de l'électronique, s'est
considérablement développé auprès du grand public ces dix dernières années,
supplantant même dans certains pays (scandinaves principalement) le téléphone fixe.
[6]

6.1.2. Les types de la téléphonie mobile :

- Téléphone portable classique

- Téléphone multimédia
- Smart phone
- Tablette tactile

2
Chapitre 1 : l’e-commerce et le domaine de la téléphonie mobile 23

6.1.3. Accessoires :

Pour utiliser votre téléphone de façon optimale, il existe différents accessoires

utiles au quotidien. Au moment d’acheter votre téléphone, jetez un œil aux accessoires
proposés compatibles avec votre modèle de portable.
Il existe un large choix d'accessoires pour smartphones et téléphones mobiles selon
le choix de l’utilisateur :
➢ Housses, coques et étuis de protection.
➢ Câ bles, chargeurs, batteries, et power Banks.
➢ Adaptateurs allume-cigare, secteur, USB...
➢ Cartes mémoire Micro SD.
➢ É couteurs.
➢ Pieces de recharge.

6.1.4. Services :

- Changement de réseau.
- Programme de fidélité.
- Messagerie Vocale Visuelle.
- Espace client entreprises.
- La Volte/Vowifi.
- Prêt de matériel.
- Gestion des smartphones.

6.1.5. Application mobile :

Une application mobile est un logiciel qui contient un programme téléchargeable

et exécutable grâ ce au système d'exploitation (généralement Android ou IOS) d'un
smartphone ou d'une tablette. Et il existe deux types d’applications mobiles :
applications gratuites et applications payantes.
Il existe plusieurs applications mobiles tel que :
- Facebook.
- Twitter.
- Picplz. - Kindle.

2
Chapitre 1 : l’e-commerce et le domaine de la téléphonie mobile 24

- Quick office.
6.2. Problématique

Pour acheter un équipement lié à la téléphonie mobile, le client doit se déplacer

directement au local de la société afin de chercher une offre de vente qui satisfait ses
besoins. Ses déplacements peuvent être inutiles et peuvent même provoque un
gaspillage de temps.
D’ailleurs, même le vendeur n’a aucun moyen pour mettre à disposition ses
annonces de vente et services.
Pour ces raisons, nous essayons à travers ce projet de mettre en place un moyen
fiable et automatisé permettant d’informer un grand nombre de clients des offres de
vente et des services nécessaires.

6.3. Les objectifs principaux de notre projet

Nos objectifs à travers ce site sont :

✓ Concevoir un site web dynamique pour vente d’accessoires mobiles offrant
une large gamme de produits neufs aux clients.
✓ Offrir au client la possibilité de faire des achats tout en ayant une certaine
autonomie cotée temps et lieu (au moment où il veut et sans se déplacer.) ✓ Permettre
au client de faire des achats en toute sécurité.
✓ Offrir une interface à la fois conviviale, professionnelle et facile
d’utilisation

7. Conclusion :

Dans ce chapitre, nous avons présenté une idée générale sur le concept du
ecommerce et sa relation avec le domaine de la téléphonie mobile. A travers la phase de
la recherche bibliographique, nous avons trouvé que le commerce électronique peut
avoir un impact très important sur la réussite du commerce d’accessoires mobile. Pour
cette raison, nous avons choisi de réaliser un site web dynamique qui répond aux besoins
des commerçants ainsi que des clients.
Dans le chapitre suivant, nous allons discuter les phases de conception et de
modélisation de notre projet.

2
Chapitre 2 : Conception Et Modélisation 25

Chapitre 2 :
Conception et
Modélisation

1. Introduction :
Ce chapitre portera sur la phase d’analyse et d’étude de notre projet, Comme
n’importe quel type de projet, un projet informatique nécessite une phase d’analyse,
suivi d’une étape de conception qui définissent en générale la démarche de projet , toute
application informatique convient de suivre une démarche méthodologique , pour notre
projet en se base sur le formalisme d’UML.

2. Cycle de vie de logiciel :

Le cycle de vie d'un logiciel est un ensemble de phase séquentiellement cohérente qui
désigne toutes les étapes du développement d'un logiciel, et qui permet de détecter les
erreurs tout au long du processus de réalisation et ainsi les corriger pour produire un
logiciel de qualité [7].

Le cycle de vie du logiciel comprend généralement les activités suivantes :

2.1 . Phases de cycle de vie :

2.1.1. Définition des objectifs :

Cette étape consiste à déterminer la finalité du projet et son inclusion dans une
stratégie globale. [8]

2
Chapitre 2 : Conception Et Modélisation 26

2.1.2. L’analyse des besoins : Cette phase doit contenir la mise du logiciel
dans son contexte et l’étude de l’existant, l’étude de l’existant désigne
l’étude des produits similaires dans le marché et l’étude de processus
ou des logiciels similaires à l’entreprise. [8]
2.1.3. La Conception : La conception utilise les spécifications pour décider
des solutions proposées. Elle peut contenir la description des
fonctionnalités de l’application. Il s’agit des fonctionnalités précisées
lors de la spécification des besoins. La conception peut contenir la
conception des interfaces, la conception des données et la conception
de l’architecture matérielle. [8]
2.1.4. Le Codage : Il transforme des solutions proposées lors de la
conception en un code opérationnel. Les techniques de codage
dépendent du langage et doivent être bien conforme à la conception.
[8]
2.1.5. Le test : Il s’agit de la phase de test et de validation. Les tests
déterminent les bugs techniques, les bugs fonctionnels et la qualité du
logiciel. Pour cela, on peut utiliser des logiciels de test, des techniques
et des benchmarks. [8]

2.1.6. Le Déploiement : La phase de déploiement regroupe toutes les

activités qui mènent à l’installation et la mise en marche de
l’application développée. [8]
2.1.7. La maintenance : Cette étape consiste à ajuster l’application après la
livraison du produit au client. Elle a pour but de corriger les erreurs et
les anomalies du système et modifier le système pour y ajouter des
fonctionnalités. [8]

2.2 Modèles de Cycle de vie :

2.2.1. Modèle en cascade :

C’est un modèle qui a comme objectif majeur de jalonner

rigoureusement le processus de développement et de définir de façon
précise les rô les respectifs du fournisseur qui produit un livrable et du
client qui accepte ou refuse le résultat, Le découpage temporel se présente
comme une succession de phases, Chaque phase donne lieu à une
validation officielle. Si le résultat du contrô le n’est pas satisfaisant, on

2
Chapitre 2 : Conception Et Modélisation 27

modifie le livrable. En revanche, il n’y a pas de retour possible sur les

options validées à l’issue de phases antérieures.
L’activité d’une étape se réalise avec les résultats fournis par l’étape
précédente ; ainsi, chaque étape sert de contrô le du travail effectué lors de
l’étape précédente et chaque phase ne peut remettre en cause que la phase
précédente ce qui, dans la pratique, s’avère insuffisant. [9]

Figure 3 : Modele en cascade

2.2.2. Modèle en V :

Le modèle en V du cycle de vie du logiciel précise la conception des tests, Dérivé

du modèle de la cascade, le modèle en V du cycle de développement montre non
seulement l’enchaînement des phases successives, mais aussi les relations
logiques entre phases plus éloignées. Ce modèle fait apparaître le fait que le
début du processus de développement conditionne ses dernières étapes. Le
modèle du cycle de vie en V est souvent adapté aux projets de taille et de
complexité moyenne. La première branche correspond à un modèle en
cascade classique. Toute description d’un composant est accompagnée de
définitions de tests. Avec les jeux de tests préparés dans la première branche, les
étapes de la deuxième branche peuvent être mieux préparées et planifiées. La
seconde branche correspond à des tests effectifs effectués sur des composants
réalisés. L’intégration est ensuite réalisée jusqu’à l’obtention du système logiciel
final. [9]

2
Chapitre 2 : Conception Et Modélisation 28

Figure 4 : modèle en V

2.2.3. Modèle en Spirale :

Le modèle en spirale a été proposé par Barry W. Boehm en 1984. Ce modèle est
beaucoup plus général que le précédent. Il met l’accent sur l’activité d’analyse des
risques (pas de gestion de projet, insuffisance de données....etc.). . Chaque cycle de la
spirale se déroule en quatre phases : Analyse du risque

➢ Développement d'un prototype

➢ Simulation et essais du prototype

➢ Détermination des besoins à partir des résultats des essais

➢ Validation des besoins par un comité de pilotage
➢ Planification du cycle suivant

Le modèle du cycle de vie en spiral est un modèle itératif, où la planification de la

version se fait selon une analyse de risques. L’idée est de s’attaquer aux risques les plus
importants assez tô t, afin que ceux-ci diminuent rapidement. [9]

2
Chapitre 2 : Conception Et Modélisation 29

Figure 5 : Modèle en spirale

2.2.4. Modèle Incrémental :

Le Dans les modèles précédents, un logiciel est décomposé en composants

développés séparément et intégrés à la fin du processus. Dans les modèles par incrément
un seul ensemble de composants est développé à la fois: des incréments viennent
s’intégrer à un noyau de logiciel développé au préalable. Chaque incrément est
développé selon l’un des modèles précédents. En bref, le modèle par incrément découpe
le système en domaines qui sont traités individuellement sur le modèle en cascade. [12]

2
Chapitre 2 : Conception Et Modélisation 30

Figure 6 : modèle Incrémental 2.3. Les

avantages et les inconvénients de chaque modèle :
Modèle Avantages Inconvénient
Cascade - Une structure simple grâ ce à - Les projets complexes ou à
des phases de projet clairement plusieurs niveaux ne peuvent que
délimitées. rarement être divisés en phases de
-Une bonne documentation du projet clairement définies.
processus de développement par - Une faible marge pour les
des étapes clairement définies. ajustements du déroulement du
-Les coû ts et la charge de travail projet en raison d’exigences
peuvent être estimés dès le début modifiées.
du projet. - L’utilisateur final est
-Les projets structures d’après le uniquement intégré dans le
modelé en cascade peuvent être processus de production
représentes facilement sur un après la programmation.
temporel. - Les erreurs sont parfois
détectées uniquement à la fin du
processus de développement.

Modèle en V Il évite les allers-retours durant - Il nécessite juste quelques

le cycle de vie du projet : si des réunions régulières pour le
problèmes sont rencontrés, pilotage du projet et le suivi
chaque étape de la partie budgétaire. Quant à la
ascendante peut s’appuyer sur documentation, elle peut être

3
Chapitre 2 : Conception Et Modélisation 31

la documentation produite lors créée à partir de modelés déjà

de l’étape de la partie existants
descendante correspondante - Il requiert moins de
-il apporte plus de précisions formation et de prérequis pour son
durant sa phase de test. application
- il s’adapte facilement aux
projets impliquant des structures
multi sites, contrairement aux
modèles de gestion de projet
nécessitant des réunions
quotidiennes.
Spirale -Modèle générique flexible - Effort de gestion important
- Contrô le périodique dû aux - Les décisions régulières
risques peuvent retarder le processus de
- Maîtrise maximale des développement
coû ts, ressources et qualité du - À cause de la subdivision du
projet logiciel processus de développement, des
- Implication précoce du erreurs et incohérences de
client et des utilisateurs possibles conception peuvent facilement se
retrouver dans le produit final
- Coordination parfaite entre
exigences techniques et - Connaissance en analyse et
conception gestion des risques indispensable,
mais souvent manquante
- Adapté aux
environnements techniques - Inadapté aux petits projets
novateurs aux risques raisonnables

-un prototype n’est pas une bonne

- Améliore la facilité d’utilisation base pour un système commercial
du système - Il peut être impossible de
répondre à des exigences non
Incrémental -Meilleur adéquation avec les
besoins réels fonctionnelles

-Améliore la maintenabilité -Les prototypes sont souvent non

documentés
-Réduit les efforts de
- Les structures d’un
développement
prototype se dégradent
généralement
rapidement avec les évolutions

Tableau 2 : Les avantages et les inconvénients entre les modèles de cycle de vie

Comparaison entre les modèles de cycle de vie :

3
 Chapitre 2 : Conception Et Modélisation 32

Le tableau 3 Illustre une comparaison entre les différents modèles de cycle de vie
MODELE FORCES FAIBLESSES

-Facile à comprendre et à utiliser - Tous les besoins doivent être bien

EN CASCADE

spécifiés au départ
-Adapté pour une équipe
inexpérimentée - Les limites de chaque - Donne une fausse
étape sont visibles impression de
l’avancée des travaux
- Facilite un management du
projet - Pas d’interaction entre les phases
de développement
- La définition des besoins est
nonévolutive - Le client peut se retrouver non
satisfait
- La qualité prime sur le coû t
- Pas de retour en arrière d’une
phase à l’autre
- Facile à utiliser - Une mauvaise prise en compte des
EN V

évènements concurrents
- Les tests sont effectués à chaque
étape - Le processus n’est pas itératif Une
mauvaise prise en compte des
- Le contrô le se fait
changements de la spécification des
progressivement à chaque étape
besoins
- Les phases de validation sont
prises en main très tô t dans le - Ne contient pas les activités
processus de développement d’analyses de risques

· Sans coû t élevé, donne des indications · Le temps consacré à l’évaluation des
EN SPIRALE

sur les risques majeurs risques est trop élevé pour des petits
projets
· La conception ne doit pas forcément
être terminée · Ce modèle est complexe
· Les utilisateurs finaux sont · Une expertise en évaluation des risques
intimement associés à toutes les est nécessaire
étapes du développement
· La spirale peut être infinie
· Le développement se fait en
· les développeurs
interaction avec les clients
travaillent par intermittence
· L’évolution du coû t de · il est difficile de définir les objectifs et
développement est sous contrô le les points de validation intermédiaires
· Les utilisateurs ont dès le départ une entre les différentes étapes
vue globale du système
Tableau 3: Tableau Comparaison entre les modèles de cycle de vie

3
Chapitre 2 : Conception Et Modélisation 33

3. Méthodologie de conception :

La conception d'un système d'information n'est pas évidente car il faut réfléchir à
l'ensemble de l'organisation que l'on doit mettre en place. La phase de conception
nécessite des méthodes permettant de mettre en place un modèle sur lequel on va
s'appuyer

3.1. Merise [10]:

Merise est une méthode de conception, de développement et de réalisation de projets
informatiques.

Le but de cette méthode est d'arriver à concevoir un système d'information. La

méthode MERISE est basée sur la séparation des données et des traitements à effectuer
en plusieurs modèles conceptuels et physiques.

La séparation des données et des traitements assure une longévité au modèle. En

effet, l'agencement des données n'a pas à être souvent remanié, tandis que les
traitements le sont plus fréquent.

3.1.1. Cycle d’abstraction de merise :

Merise définit trois niveaux de description du système d’information :

➢ Le niveau conceptuel : se subdivise en deux niveaux : le Modèle Conceptuel des
Données (MCD) et le Modèle Conceptuel des Traitements (MCT).
➢ Le niveau organisationnel : La formation merise nous apprend alors la
construction :
- D'un Modèle Logique des Données (ou MLD)
- D’un Modèle Logique des Traitements (ou MLT),

➢ Le niveau physique
Le Modèle Physique des Données (ou MPD ou MPhD) permet de préciser les systèmes de
stockage employés. Le Modèle Opérationnel des Traitements (ou MOT ou MOpT) permet de
spécifier les fonctions telles qu'elles seront ensuite réalisées par le programmeur.

3
Chapitre 2 : Conception Et Modélisation 34

Figure 7 : les niveaux de merise

3.2. UML : [11]

UML (Unified Modeling Language ou langage de modélisation unifié) est un métalangage

de modélisation. Il est synthèse de certaines méthodes de modélisation objet (OMT,
Booch et OOSE).
UML a été normalisé en 1997 par l’OMG (Object Management Group). Son but est de
formaliser les concepts orientés au travers de diagrammes l’OMG a normalisé depuis
novembre 2007 la version UML 2.1.2 et prépare la version 2.2.
Les premières versions d’UML proposaient neuf diagrammes spécifiques :
➢ Le diagramme de cas d’utilisation qui représente les relations
entre les auteurs et les fonctionnalités du système.
➢ Le diagramme de classes est un ensemble d’éléments statiques
qui montre la structure du modèle étudié.
➢ Le diagramme d’objets (objet : instance d’une classe)
représente les objets et leurs interdépendances.
➢ Le diagramme d’états/transitions représente le cycle de vie des
objets générés par une classe.

3
Chapitre 2 : Conception Et Modélisation 35

➢ Le diagramme de composants détaille les éléments logiciels

(exécutables, fichiers.) et leurs dépendances.

➢ Le diagramme de déploiement montre la réparation physique

des éléments matériels du système (processeurs, périphériques)
et leurs connexions.
➢ Le diagramme séquence détaille les messages échangés entre les
acteurs et le système selon un ordre chronologique.
➢ Le diagramme de collaboration qui représente les messages
échangés entre les objets. Il insiste plus particulièrement sur la
notion organisationnelle.
➢ Le diagramme d’activités est une variante du diagramme
états/transition qui représente le déclenchement d’évènements
selon certains états du système.

La version 2 d’UML propose 13 diagrammes dépendants hiérarchiquement

3.2.1. Les différents diagrammes UML

Les diagrammes Les diagrammes Les diagrammes dynamiques

statiques comportementaux

Diagramme de classes Diagramme des cas Diagramme de séquences

d’utilisation

Diagramme d’objets Diagramme Diagramme de communication

étatstransitions

Diagramme de Diagramme d’activité Diagramme global

composants d’interaction

Diagramme de Diagramme de temps

déploiement

Diagramme de
paquetages

Diagramme de structure
composite

Tableau 4 : les diagrammes de UML

3
Chapitre 2 : Conception Et Modélisation 36

Les diagrammes les plus utilisés dans la conception des SI par UML sont les suivants :

Diagramme de cas d’utilisation

Le diagramme de cas d'utilisation représente la structure des grandes fonctionnalités

nécessaires aux utilisateurs du système. Il assure la relation entre l'utilisateur et le
système (les besoins) [13].

• Un cas d'utilisation : est un service rendu à l'utilisateur, il implique des séries

d'actions plus élémentaires.
• Un acteur : est une entité extérieure au système modélisé, et qui interagit
directement avec lui.

Figure 8 : diagramme de cas d’utilisation visiteur et client

3
Chapitre 2 : Conception Et Modélisation 37

Figure 9 : diagramme de cas d’utilisation pour l’administrateur.

Diagramme d'activités

Le diagramme d'activités n'est autre que la transcription dans UML de la

représentation du processus telle qu'elle a été élaborée lors du travail qui a
préparé la modélisation : il montre l'enchaînement des activités qui
concourent au processus [14].

Figure 10 : diagramme d’activité de l’authentification

3
Chapitre 2 : Conception Et Modélisation 38

Figure 11 : diagramme d’activité d’ajout d’un produit par administrateur

Figure 12 : diagramme d’activité de modification d’un produit par un administrateur

3
Chapitre 2 : Conception Et Modélisation 39

Figure 13 : diagramme d’activité de suppression d’un produit par un administrateur

Diagramme de séquence

Le diagramme de séquence représente la succession chronologique des opérations

réalisées par un acteur. Il indique les objets que l'acteur va manipuler et les opérations
qui font passer d'un objet à l'autre [14].

3
Chapitre 2 : Conception Et Modélisation 40

Figure 14 : Diagramme séquence pour admin

4
Chapitre 2 : Conception Et Modélisation 41

Figure 15 : diagramme de séquence pour inscription

4
Chapitre 2 : Conception Et Modélisation 42

Figure 16 : diagramme de séquence pour passer une commande

Diagramme de classes

Le diagramme de classes est généralement considéré comme le plus

important dans un développement orienté objet. Il représente l'architecture
conceptuelle du système : il décrit les classes que le système utilise, ainsi que
leurs liens, il est le seul obligatoire lors d’une telle modélisation [14].

4
Chapitre 2 : Conception Et Modélisation 43

Figure 17 : diagramme de class

3. Conception de la base de données :

Après l’élaboration des différents diagrammes nécessaires à la modélisation de
notre application, nous allons entreprendre la construction des tables de la base de
données.

3.1 Les tables de la base de données :

La table produits :

4
Chapitre 2 : Conception Et Modélisation 44

Figure 18 : la table produits La

table administrateur :

Figure 19 : la table administrateur

La table catégories :

Figure 20 : la table catégories

La table utilisateur :

4
Chapitre 2 : Conception Et Modélisation 45

Figure 21 : la table utilisateur

Conclusion :
Dans ce chapitre nous avons pu définir la démarche UML et les différents diagrammes qu’elle
propose afin d’avoir une vue d’ensemble de notre site. Nous avons en premier lieu identifié les
acteurs, leurs tâ ches et les scénarios des tâ ches, par la suite nous avons représenté le diagramme
de cas d’utilisation ainsi que les diagrammes de classes et enfin quelques diagrammes de
séquences. Enfin nous avons conclu par la présentation des tables de la base de données

4
 Chapitre 3 : Réalisation 46

Chapitre 3 :

Réalisation

1. Introduction :
Ce chapitre portera sur la phase de réalisation de notre produit finale (un site web
dynamique). La première partie présente l’environnement de développement, alors que
la seconde partie concerne les principales interfaces graphiques.

2. L’environnement de développement
2.1. L’environnement matériel :
Pour réaliser notre projet, nous avons utilisé une machine, configurée comme suit :

• Modèle de la machine : HP • Processeur : Intel (R) Core (TM) I 3.

• Mémoire Vive : 4 Go. • Disque Dur : 500 Go.

4
 Chapitre 3 : Réalisation 47

• Système d’exploitation : Windows 10.

2.2. Environnement Logiciel (outils de développements) :

Pour la bonne construction de notre projet, nous avons utilisé certains outils de
développement installés sur le site web (machine serveur), ayant chacun des rô les
différents.

2.2.1. XAMPP :

XAMPP est un ensemble de logiciels permettant de mettre en place 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, réputée pour son installation simple et rapide. Ainsi, il est à la
portée d'un grand nombre de personnes puisqu'il ne requiert pas de connaissances
particulières et fonctionne, de plus, sur les systèmes d'exploitation les plus répandus.

4
 Chapitre 3 : Réalisation 48

Figure 22 : Capteur l’interface de XAMPP

2.2.2. PHPMyAdmin :

Il s’agit de l’une des plus célèbres interfaces pour gérer une base de données MySQL
sur un serveur PHP. Cette interface pratique permet d’exécuter très facilement et sans
grandes connaissances en bases de données, des requêtes comme les créations de table
de données, insertions, mise à jour, suppressions et modifications de structure de la base
de données. Ce système permet de sauvegarder commodément une base de données
sous forme de fichier .SQL d’y transférer ses données, même sans connaître SQL.

PHPMyAdmin permet d'administrer les éléments suivants :

• les bases de données

• les tables et leurs champs (ajout, suppression, définition du type)

• les index, les clés primaires et étrangères

4
 Chapitre 3 : Réalisation 49

• les utilisateurs de la base et leurs permissions.

Figure 23: Capture de l’interface PHPMyAdmin

2.2.3. Visual studio code:

Visual studio code est un éditeur de code extensible développé par Microsoft pour
Windows, Linux, et macOS2.

Les fonctionnalités de Visual studio code incluent :

• La prise en charge du débogage,

• La mise en évidence de la syntaxe,
• La complétion intelligente du code,
• Les snippets,
• La refactorisation du code et Git intégré.

Les utilisateurs peuvent modifier le thème, les raccourcis clavier, les préférences et installer des
extensions qui ajoutent des fonctionnalités supplémentaires.

4
 Chapitre 3 : Réalisation 50

Figure 24: Capture de l’interface de Visual studio code

2.2.4. Navigateur web :

Nous avons utilisé le navigateur web Google Chrome pour tester notre application.
Chrome est un navigateur web propriétaire développé par Google basé sur le projet libre
Chromium (Chromium est le projet de navigateur Web libre sur lequel est basé Google Chrome)
fonctionnant sous Windows, Mac ,Linux, Android et iOS .
Google Chrome est identique à Chromium hormis, un logo différent et quelques fonctionnalités
en moins ou en développement.

5
 Chapitre 3 : Réalisation 51

Figure 25 : Capture de l’interface Navigateur web

2.2.5. Apache :
Apache est le serveur le plus répandu sur Internet. Il fonctionne principalement sur les systèmes
d'exploitation UNIX (Linux, Mac OS X, Solaris, BSD et UNIX) et Windows. La version Windows
n'est considérée comme stable que depuis la version 1.2 d'Apache.

Apache est utilisé par de nombreux produits, dont WebSphere d'IBM, ainsi que par Oracle
Corporation. Il est également supporté d'une façon ou d'une autre par les outils de
développement Borland Delphi et Kylix, ainsi que par des CMS comme Drupal.

2.2.6. Langages et outils de développement :

HTML (Hyper Texte Markup Language) :

C’est un langage de description de pages web. Cette description porte l’extension «

html». Ce code se cache derrière toute page web constituée de texte, d’images et des
liens. Ce langage offre aussi un moyen de réaliser des documents interactifs en utilisant
des liens hypertexte.

5
 Chapitre 3 : Réalisation 52

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.

PHP :

Est un langage principalement utilisé pour produire un site web dynamique. Il est
courant que ce langage soit associé à une base de données, tel que MySQL. Exécuté du
cô té serveur (l’endroit où est hébergé le site) il n’pas besoin aux visiteurs d’avoir des
logiciels particuliers.

MySQL :

MySQL est un système de gestion de base de données (SGBD). Selon le type

d'application, la licence est libre ou propriétaire. Il fait partie des logiciels de gestion de
base de données les plus utilisés au monde, autant par le grand public (applications web
principalement) que par des professionnels, en concurrence avec Oracle et Microsoft
SQL Server

Framework Bootstrap :

Bootstrap est une boîte à outils open source pour le développement avec HTML, CSS et JS.
C’est un système de grille réactif, de nombreux composants prédéfinis et des plugins
puissants construits sur jQuery.

Edraw UML Diagram :

Edraw UML [15] est un logiciel d'édition de diagrammes de nombreux exemples

permettent une conception rapide de tous types de diagrammes : organigramme
d’organisation, plan de bâ timent, diagramme de réseau, diagramme UML, carte d'esprit ,
diagramme de base de données etc. Une bibliothèque de diagrammes pré dessinés et plus
de 2, 000 symboles sont inclus.

5
 Chapitre 3 : Réalisation 53

Figure 26 : Capture de l’interface de Edraw UML Diagram

3. Les principales interfaces graphiques :

3.1. La page d’accueil :

Figure 27 : Capture de la page d’accueil

5
 Chapitre 3 : Réalisation 54

3.2. Inscription d’un utilisateur :

Figure 28 : Capture de l’interface d’Inscription d’un utilisateur

3.3. Connexion d’un utilisateur :

Figure 29 : Capture l’interface de Connexion d’un utilisateur

5
 Chapitre 3 : Réalisation 55

3.4. Espace administrateur :

Figure 30 : Capture de Espace administrateur

3.5. Ajouter un client :

Figure 31 : Capture de Ajouter un client

5
 Chapitre 3 : Réalisation 56

3.6. Consulter (modifier et supprimer) la listes des clients inscrits :

Figure 32 : Capture de Consulter (modifier et supprimer) la listes des clients inscrits

3.7. Ajouter un Article :

Figure 33 : Capture de Ajouter un Article

3.8. Consulter (modifier et supprimer) la listes des articles disponibles :

5
 Chapitre 3 : Réalisation 57

Figure 34 : Capture de Consulter (modifier et supprimer) la listes des articles

Conclusion :

A travers ce chapitre nous avons pu aboutir à la représentation concrète du produit fini.

Ce dernier chapitre décrit tout d’abord les outils de développement que nous avons
utilisé pour la réalisation de notre projet. Ensuite, nous avons présenté les interfaces les
plus essentiels de notre site web.

5
 58

Conclusion générale

Conclusion générale :

Le travail présenté a pour objectif principale de mettre en place un site web dynamique
pour la vente d’accessoires mobiles. Grace à la solution que nous avons proposée, le
visiteur aura tout le nécessaire pour une excellente navigation dans notre site.

Pour présenter ce travail, nous avons introduit des généralités sur le e- commerce, selon
différents aspects comme les définitions et les différents concepts de base de e-
commerce. En plus nous avons présenté des informations importantes sur les méthodes
de conception, modélisation et réalisation des sites web dynamiques.

Nous avons utilisé un ensemble de langages nécessaires pour le développement de notre

site (PHPMyAdmin, PHP, HTML, CSS, etc...) qui nous ont permet de réaliser notre projet,
et de mener à terme notre mémoire. Nous avons essayé à travers ce mémoire de donner
un aperçu de notre application, ses interfaces et ses fonctionnalités.

En plus de travail présenté, des améliorations pourraient aussi être apportées à notre
site web. Par exemple, nous proposons de mettre en place une connexion sécurisée lors
du paiement d’une commande. Nous proposons aussi d’ajouter une autre méthode de
paiement basée sur l’ajout d’un nouvel attribut (nommé Crédit ou Solde) sur la table
client. Le solde (ou le crédit) disponible de chaque client va lui permettre d’effectuer les
différents achats sans besoin d’avoir une carte de paiement.

Enfin, on peut dire que à travers ce projet, on a acquis une excellente expérience dans le
domaine de développement des sites web dynamiques. Un tel site de vente en ligne est
l’un des facteurs principaux pour la réussite de chaque type commerce.

Bibliographie

Bibliographie

[1]------ L’histoire de e-commerce: un marché en constante évolution. [Link]

[2]------ [Link]

5
 59

[3]------ [Link]

[4]------ Zéphyrin Soh. Cours de Génie Logiciel. [Link]

[5]------ UNIVERSITE MOULOUD MAMMERI DE TIZI OUZOU, Mémoire de fin d'études de Cycle de
LICENCE, Thème; Conception et Réalisation d’un site web de vente de Matériel Informatique.

[6]------ [Link]/ [Link],/[Link]/

[Link]

[7]------ Ngang bilanga jean jacques. « Méthode de conception des systèmes d’information ».

[8]------ [Link]

[9]------ Raphael Yende. SUPPORT DE COURS DE GENIE LOGICIEL. Licence. RDC (BÉNI),
Congo-Kinshasa. 2019.

[10]------ [Link]
formation-informatique-css-merise-webmaster-internet-/formation-merise/formation-meriseniveau-
conceptuel. 2021

[11]------ Jean Luc BAPTISE. Merise Guide pratique 2eme Edition. Eni Editions

[12]------ [Link]
[Link] consulté le 18/03/2018

[13]------ Pierre Gérard. « Introduction à UML 2 Modélisation Orientée Objet de Systèmes Logiciels ».
Université de Paris 13 IUT Villetaneuse

[14]------ Laurent AUDIBER. «UML 2 De l'apprentissage à la pratique ». (2009)

[15]------
[Link]
y3Jz-igBup-ItZ41ViCSkxz7HXENHFiOVBoCN50QAvD_BwE