Rapport du Site WEB Commerce

Mono-Shop

Genie industriel
UML

Présenté par :
Imad Laksimi
Doha Sakhnouni

Encadré par :
M. Ennadi

Année Universitaire :2022/2023

 Remerciement

Avant de présenter ce travail, il apparait apportant de commencer par

exprimer dans quelques lignes des remerciements envers note
professeur Mr. Ennadi, pour ses présences, le soutien, ses
disponibilités et ses conseils, tout au long du semestre ce qui nous a
permis de réaliser le travail demandé et aussi de nous donner la
chance de réaliser ce travail.

Nous tenons aussi à remercier nos collègues, pour leurs

disponibilités, conseils, et leurs soutiens dans chaque instant de
besoin.

Ma gratitude va également à toute l’équipe pédagogique du

département de Génie Industriel de la Faculté des Sciences et de
Techniques de Fès.

1
 Introduction :

Dans l'absolu, l'e-commerce, c'est-à-dire le commerce électronique, désigne

simplement l'achat et la vente de produits et services sur Internet. Cependant, le
terme est souvent utilisé pour décrire toutes les mesures et actions entreprises par
un vendeur dans le but de vendre des produits directement aux consommateurs.

Le principal objectif d'un site e-commerce est d'attirer le maximum de

trafic sur son site afin d'effectuer un maximum de ventes. Dans cette optique, un
bon référencement naturel constitue une arme redoutable pour attirer les clients et,
in fine, réussir à les convertir.

Le but de ce projet est de réaliser un site web qui facilite la vente des
produits. Nous avons essayé d’atteindre cet objectif, tout en appliquant les
notions théoriques et techniques qu’nous avons vues au cours de notre
formation à la FSTF et d’autre nouveaux programmes. Nous avons suivi une
méthode de conception suivant le modèle d’UML et utilisé les différentes
techniques du développement web pour réaliser ce site web.

Dans ce document nous allons expliquer en premiers lieu les objectifs

du site. La deuxième partie va exposer la conception, la méthodologie, et la
modélisation du projet. Enfin, nous allons passer à la réalisation du site.

2
I. Généralités :
a. Définition d’un site web dynamique :

Un site dynamique est un site internet qui affiche différents types de contenu
chaque fois qu’un utilisateur la consulte vue que chaque mise à jour sur le site est
automatique.

Cet affichage change en fonction d’un certain nombre de facteurs tels que les :

• Données démographiques de l’utilisateur,

• L’heure de la journée,
• Le lieu,
• Les paramètres linguistiques,
• Etc.
Un site dynamique offre un contenu unique aux visiteurs chaque fois qu’ils
consultent le site. Cela se fait par une combinaison de scripts de la part du client
et du serveur. Les logiciels génèrent des pages web dynamiques avec les langages
:

• PHP
• Java Server Pages (JSP)
• Active Server Pages (ASP) …

Ainsi, une page web dynamique peut fournir des informations aux utilisateurs en
fonction de leur navigation sur le serveur. Deux utilisateurs peuvent consulter
simultanément la même page web sans pour autant avoir le même contenu affiché
à l’écran, contrairement au site web statique.

3
 b. Qu’est-ce qu’un site web statique ?

Un site web statique est un site web dont le contenu est figé et ne varie pas en fonction des
caractéristiques de la demande. C’est-à-dire que les internautes qui demandent la page au même
moment reçoivent le même contenu.

Dans un site web statique, pour chaque page du site qu’on veut créer, on crée un document
HTML correspondant selon les données stockées dans le serveur.

On dit alors qu’une page web est statique quand le serveur reste statique pour la création de la
page Internet. Il ne fait rien pour réajuster la page Web, il ne fait que la récupérer telle quelle
du serveur.

Les pages statiques impliquent donc que les pages – figées – sont déjà existantes sur le serveur.
Une mise à jour dans un site statique doit être manuelle.

Ces pages web sont alors dites statiques, car leur contenu ne change jamais. Il est le même pour
tous les visiteurs et sont en général créées par un Webmaster ou votre agence de création de
sites web.

La page Web statique possède une autre particularité. Le code de la page programmée est le
même que le code de la page affichée.

Page programmée = page affichée.

Ainsi, l’éditeur d’un site statique rédige et enregistre chaque page dans un fichier HTML (qui
porte soit l’extension .htm, soit .html).

4
 c. Différence entre un site internet dynamique et statique :
Les pages web statiques constituent le type le plus élémentaire, sans codage ni base de données
personnalisable. C’est la page internet la plus facile à créer.

À l’inverse, les pages web dynamiques peuvent afficher différents contenus appartenant au
même code source, chose qui les rend plus dynamiques et sophistiquées.

Une page Web statique est simple à concevoir tandis que les pages Web dynamiques sont
complexes à construire.

Une page Web statique intègre des technologies telles que HTML, JavaScript, CSS, etc. pour
sa construction. Au contraire, un site web dynamique est conçu lui aussi avec du HTML,
JavaScript, CSS mais également à l’aide de langages de code tels qu’AJAX, ASP, PERL,
PHP…

Les pages Web statiques affichent le même contenu à chaque visite. Alors que dans le site Web
dynamique possède une base de données qui permet à la page de changer selon l’utilisateur.

d. L’ASSOCIATION DES DEUX :

Un site peut également être composé de pages web statiques et de pages
dynamiques s’il nécessite des pages stockées dans le serveur et d’autres
générées en même temps de la recherche. D’ailleurs, quasiment tous les sites
modernes et performants sont un mix des deux.

II. Définition de travail réalisé :

La réalisation d’un site Web dynamique de vente des chaussures (MONOSHOP) de

différent type en donnant un choix large aux clients, en utilisant les logiciels suivants :
PHP, My SQL, HTML, XAMPP.

a. Le site web doit donner aux :

i. Clients :
Le droit de demander un achat de n’importe quel produit listé dans la page l’accueil
après la visualisation des détails du produit, ainsi que le droit de contacter
l’establishment en envoyant un message via email.

5
 ii. Administrateurs :
Le droit de s’authentifier et d’ajouter, modifier ou supprimer un produit, de visualiser
la boite des messages et la boite des demandes d’chat des clients, et le droit aussi de
supprimer un message ou une demande d’achat.
Les administrateurs auront la possibilité d’ouvrir leurs sessions dans le site web (via
un bouton significatif).
Le client peut voir les détails du produit en faisant un double clic sur l’image du
produit

6
III. Modélisation UML :
a. Environnement technique (Entreprise Architect) :
Enterprise Architect est un outil de création des modèles dont le langage UML qui est un
langage visuel de modélisation d'objet. Ceci est basé sur des graphiques sous Windows,
peut être utilisé par plusieurs personnes. Il comprend un utile de production de
Documentation souple et de haute qualité.

b. Diagrammes :
i. Diagramme de package :
Le diagramme de packages est un diagramme UML qui fournit une représentation
graphique de haut niveau de l'organisation d’une application, et aide à identifier les
liens de généralisation et de dépendance entre les package.

ii. Diagramme de cas d’utilisation :

Le diagramme de cas d'utilisation capture le comportement d'un système, d'un
sous- système, d'une classe ou d'un composant tel qu'un utilisateur extérieur le voit.
Il scinde la fonctionnalité du système en unités cohérentes, les cas d'utilisation, ayant
un sens pour les acteurs.

7
➢ Diagramme de cas d’utilisation de l’acteur « CLIENT » :
➢
➢
➢

➢ Diagramme de cas d’utilisation de l’acteur « ADMINISTRATEUR » :

8
iii. Diagramme de séquence :
Le diagramme de séquence est un diagramme d'interaction mettant l'accent sur la
chronologie de l'envoi des messages.
➢ Diagramme de vente :

9
 iv. Diagramme de classes :
Le diagramme de classes permet de fournir une représentation abstraite des objets
Du système qui vont interagir pour réaliser les cas d'utilisation. Il s'agit d'une vue
statique, car on ne tient pas compte du facteur temporel dans le comportement du
système.

IV. Réalisation :
La phase de réalisation est la plus importante étape dans le cycle de vie de notre site web
Car à la fin de cette phase, nous aurions le fruit de toutes les étapes précédentes. Pour réaliser
notre site web nous avons été face à plusieurs outils de développement, dans ce chapitre
nous essayerons de décrire brièvement les outils utilisés dans le développement de cette
application, et capturer les tâches principales du site.

10
c. Outils et technologies de développement :
i. HTML :
HTML5 (HyperText Markup Langage 5) est la dernière révision majeure d'HTML
(format de données conçu pour représenter les pages web). Cette version est en
développement en 2013. HTML5 spécifie deux syntaxes d'un modèle abstrait défini
en termes de DOM : HTML5 et XHTML5.
Le langage comprend également une couche application avec de nombreuses API,
ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non
conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par
le WHATWG. Les deux organisations travaillent en parallèle sur le même document
afin de maintenir une version unique de la technologie.

ii. Php :
HyperText Préprocesseur, plus connu sous son sigle PHP (acronyme récursif), est
un langage de programmation libre principalement utilisé pour produire des pages
Web dynamiques via un serveur HTTP, mais pouvant également fonctionner comme
n'importe quel langage interprété de façon locale. PHP est un langage impératif
orienté objet.

11
iii. MySQL :
MySQL est un système de gestion de base de données (SGBD). Il est distribué sous
une double licence GPL et propriétaire. Il fait partie des logiciels de gestion de base
de données les plus utilisés au monde1, autant par le grand public (applications web
principalement) que par des professionnels, en concurrence avec Oracle, Informix et
Microsoft SQL Server.

iv. XAMPP :
Le but recherché par XAMPP est de fournir une distribution facile à installer. Ainsi,
les développeurs peuvent se lancer facilement dans le monde d'Apache. Pour le
rendre encore plus pratique, XAMPP est livré avec toutes les fonctionnalités
activées.

12
V. Site WEB :
d. Présentation du site MonoShop :
Dans cette partie j’essayerai de présenter mon site web de vente en se basant sur
des captures d’écran.

i. Page d’accueil :

ii. La haute partie du site web et ses composantes :

• Logo de notre site web MonoShop cliquable et qui conduit vers la page
d’accueil.

• Bouton de l’animation a une fonction d’afficher le texte a gauche et

d’autorisé l’accès à se connecter.

13
 • Lien « se connecter » qui emmène le client a une page d’inscription.

• Titre About signifier les informations nécessaires de fonctionnement de

MonoShop.

VI. Page d’administration :

iii. La liste de tous les produits et leurs prix :
Cette partie des produits, elle contient la liste de tous les produits et leurs prix et
descriptions à coté …
Cette liste est représentée sous forme de suites des boutons cliquable chaqu’une
conduit vers la description du produit cliqué…

• Le bouton à gauche Editer faire une Modification de

l’insertion d’un produit au niveau de son nom prix ainsi que sa
description, il présente sous forme de la page ci-dessous :

14
iv. Les produits :

Le bouton emmène à l’ajout d’un nouveau produit

aux plateformes.

15
 Le bouton emmène à supprimer un produit qui rupture au
stock.

VII. Page des visiteurs :

e. Login visiteur :
Un login est un identifiant. Cet anglicisme permet d'ouvrir une session privée sur un
système informatique ou un site présent sur internet. Complété par un mot de passe le
login est une mesure de sécurité pour garder des informations privées (Email, Gmail ...)
Après l’inscription on actualise notre page et on va trouves cette interface :

16
f. Le choix des produits :
Cette partie se situe au milieu du site web, elle liste tous les produits présentés par la
société.
Chaque produit est présenté sous forme d’une image qui lui décrit et qui est cliquable
et emmène vers la description du produit, un titre qui lui correspond, son prix et deux
boutons :’Voir plus’ pour choisir couleur ou bien la tailles et la commande.

17
g. La commande des produits :
Après la clique sur ce bouton on passe la commande par le bouton commander ci-
dessous :

h. Déconnecter le compte :
Par ce Bouton on déconnecter notre compte et fait retour à la page d’accueil :

18
 Conclusion :

Plusieurs technologies ont été nécessaires pour la réalisation de ce projet, nous

mentionnerons donc le langage HTML et CSS pour la réalisation des pages statiques, le
langage PHP pour la partie dynamique, et SQL pour l'élaboration des requêtes
d'interrogation de la base de données.
Le travail a été divisé en deux phases, dans la première phase est la phase d’analyse et
conception, enfin la deuxième phase était la phase de réalisation où nous avons cité les outils
de développement, et où nous avons présenté le site web par des captures d’écran.
Les difficultés majeures rencontrées résident essentiellement dans la nouveauté des
technologies avec lesquelles nous avons travaillé, et la contrainte du temps pour les
maitriser.
Cette expérience en domaine informatique, nous a offert une bonne maitrise aux langages
de programmation (surtout la programmation web), et elle fut pour nous une expérience
enrichissante et complète.

19