Vous êtes sur la page 1sur 25

4 IIR – 1

ANNÉE UNIVERSITAIRE 2018-2019

Rapport de stage :
Développement d’un site web
E-commerce

par Youssef ELOMARI

Encadré par Mme El Ghali

1
Résumé
La société ETCE INFO avait besoin d’un nouveau site web pour une
activité complémentaire. Ils aimeraient se lancer dans la vente de décorations
murale, plus précisément les photos imprimé et encadré, comme ceux que l’on
peut trouver dans un hôtel ou restaurant.

L’objectif du stage était donc de développer un site E -commerce qui


répondra aux exigences pré mentionné.

2
Remerciements
Je tiens tout d’abord à sincèrement remercier Mme El Ghali, mon
encadrante de stage qui a toujours été disponible pour moi, m'a conseillée et
soutenue.

Je remercie également Monsieur Bousfiha pour son acco mpagnement


pendant ce stage malgré son emploi du temps chargé.

Ensuite, j'aimerais remercier le personnel de la société pour leur


convivialité et leur assistance.

Finalement, j’adresse mes vifs remerciements à toutes personnes ayant


participé de près ou de loin à la réussite de mon stage.

3
Table des matières

Résumé ................................................................................................................................................................. 2
Remerciements ..................................................................................................................................................... 3
Table des matières ................................................................................................................................................ 4
Table des figures .................................................................................................................................................. 5
Introduction ........................................................................................................................................................ 6

Chapitre I : Présentation de l’entreprise ......................................................................................................... 7


1.1 Introduction de l’entreprise ........................................................................................................ 7
1.2 Le centre de copie ....................................................................................................................... 9

Chapitre II : Mission du stage......................................................................................................................... 10


2.1 Les objectifs du projet .............................................................................................................. 10
2.2 Démarche de réalisation du projet ............................................................................................ 11
2.3 Les outils et technologies utilisés ............................................................................................. 12
2.4 Description de la base de données ............................................................................................ 15
2.5 Les diagrammes de cas d'utilisation ......................................................................................... 19
2.6 L'architecture du site................................................................................................................. 21

Conclusion......................................................................................................................................................... 25

4
Table des figures

1.1 Logo de la société ETCE INFO ............................................................................................................. 7


1.2 Conventions de la société ETCE INFO .................................................................................................. 8

2.1 Logo de Laragon .................................................................................................................................. 12


2.2 Logo de WordPress .............................................................................................................................. 13
2.3 Logo d’Adobe Photoshop ..................................................................................................................... 14
2.4 Diagramme de la base de données WordPress ...................................................................................... 16
2.5 Diagramme de cas d’utilisation du client .............................................................................................. 20
2.6 Diagramme de cas d’utilisation de l’administrateur .............................................................................. 20
2.7 Liste des pages du site vu du Dashboard .............................................................................................. 21
2.8 Aperçu de la page ‘Créer votre tableau’ (cadre bois noir) .................................................................... 23
2.9 Aperçu de la page ‘Créer votre tableau’ (cadre bois blanc) .................................................................. 24

5
Introduction
La société ETCE INFO avait besoin d’un nouveau site web pour une
activité complémentaire. Ils aimeraient se lancer dans la vente de décorations
murale, plus précisément les photos imprimé et encadré, comme ceux que l’on
peut trouver dans un hôtel ou restaurant. L’objectif du stage é tait donc de
développer un site E -commerce qui offre au client un choix varié de
photographies, qu’il pourra utiliser comme base pour son tableau .

L’administration du site se doit d’être simple et intuitif . Aussi, le site


doit être ouvert à des modificati ons et/ou extensions qui pourront être
éventuellement effectué par une autre personne.

En vue de ces critères, j’ai choisi d’utiliser WordPress comme outil de


développement.

La première partie du rapport traitera de mon cadre de stage, soit la


société ETCE INFO. La seconde décrira le projet , son fonctionnement et les
outils qui ont été utilisés.

6
Chapitre I :
Présentation de l’entreprise

1.1 Introduction de l’entreprise


Créée en 1993, ETCEINFO Maroc est spécialisée dans la vente de
matériel inform atique au Maroc, l'ingénierie réseaux et câblage, la réparation
et la maintenance, la vente d e matériel de bureau, les fournitures de bureau et
la vente d'imagerie, vidéo et téléphonie.

Figure 1.1 – Logo de la société ETCE INFO

Afin de mieux servir leurs clients, ils ont pu tisser des liens étroits avec
les marques les plus import antes. Grace à ces partenariats leurs équipes sont
capables de conseiller, proposer et de maintenir l'ensembl e du matériel qu’ils
offrent.

Une société informatique au Maroc, parmi les plus anciennes, présent à


Casablanca, Rabat, Kenitra et Marrakech. Sur leur site www.etceinfo.ma dans
lequel ils proposent des appareils photo Canon ou Nikon, des ordinateurs de
bureau et portable de marque HP ou ASUS, des photocopieurs, des ser veurs
NAS, des câbles, des logiciels…

7
Leur Partenariats :
ETCEINFO est membre du programme HP Prefe rred Partner. Ce
programme nous permet d'avoir les prix les plus intéressants et une maitrise
des produits et solutions HP. Nous vous offrons notre savo ir-faire et notre
expérience avec cette marque n°1 dans le secteur.

ETCEINFO a reçu la confiance de la marque ACCENT pour assurer le


SAV sur la région de RABAT Maroc. En effet fort de son service technique
de 5 techniciens spécialisés, ETCEINFO offre un SAV de qualité.

Ce sont des partenaires agréés de la marque Fujitsu Siemens Computers ,


nos techniciens suivent des formations régulières chez eux afin de suivre les
évolutions technologiques de la marque.

Nos principales conventions : Canon Maroc - HP Maroc - Asus maroc -


Microsoft Maroc - Dell Maroc - Lenovo Maroc - APC Maroc - Eaton Maroc -
Acer Maroc - HPE Maroc - Ricoh Maroc - Kyocera Maroc - Samsung Maroc -
Toshiba Maroc

Figure 1.2 – Conventions de la société ETCE INFO

8
1.2 Le centre de copie
ETCE INFO dispose aussi d’un centre de copie équipé de matériel
performant, professionnel et rapide.

Toujours à l’écoute des besoins des clients, leur équipe dynamique,


composé de personnes compétentes avec un savoir -faire forgé sur plusieurs
années d’expérience dans le domaine de l’impression est en mesure de fournir
des solutions et des conseils taillés selon les exigences.

Parmi leurs clients ; les étudiants, particuliers et professionnels. Ils


répondent à toutes commandes quel que soit sa taille.

Le projet qui fait l’objet de ce stage sera implémenté sur le centre de


copie de l’entreprise.

9
Chapitre II :
Mission du stage

2.1 Les objectifs du projet


L’entreprise ETCE INFO, disposant déjà d’un centre de copie
performant, souhaite mettre en place une plateforme en ligne qui lui permettra
d’élargir son domaine d’activit é.

Elle cible principalement les hôtels, restaurants et toute autre


établissement ayant besoin de décorer ses murs.

Le site doit permettre au client de choisir l’image qu’il s ouhaite avoir


sur son tableau, ses dimensions, le cadre de son choix et autres détails, tout
cela en ayant un aperçu dynamique du produit qu’il construit.

10
2.2 Démarche de réalisation du
projet
Afin d’arriver à réaliser les besoins exprimés par l’entreprise, il a été
nécessaire de passer par l es phases cités comme suivant :

 Phase de définition du sujet, durant laquelle nous avons décrit la


problématique, et définit les objectifs généraux de notre travail.

 Phase de définition des outils, qui va être traitée et amplifiée dans la


prochaine partie de ce chapitre durant laquelle nous allons parler des
différents outils utilisés pour la réalisation de l’application
accompagnés des informations sur chaque outil qui ont validé nos
choix.

 Phase de la base d e données durant laquelle nous allons traiter d e façon


détaillée la base de données crée ainsi que les modèles utilisées pour la
phase de conception du projet.

 Phase de la création du site web qui va porter sur une étude détaillée de
chaque interface conçue.

11
2.3 Les outils et technologies
utilisés
Cette partie traite les différents moyens techniques que nous avons
adoptés pour la conception et le développement de notre application, ceci
comprend également des explications des choix de chaque éléme nt utilisé.

Laragon

Figure 2.1 – Logo de Laragon

Laragon est un environnement de développement universel portable,


isolé, rapide et puissant pour PHP, Node.js, P ython, Java, Go, Ruby. Il est
rapide, léger, facile à utiliser et facile à étendre.

Ce dernier est idéal pour créer et gérer des applications Web modernes.
Il est axé sur la performance - conçu autour de la stabilité, de la simplicité,
de la flexibilité et de la liberté.

Il est très léger et restera aussi mince que possible. Le noyau binai re
lui-même est inférieur à 2 Mo et utilise moins de 4 Mo de RAM lors de
l'exécution.

Laragon n’utilise pas les services Windows. Il possède sa propre


orchestration de services qui gère les services de manière asynchrone et non
bloquante. Ainsi, il fonctionne rapidement et en douceur.

12
Beaucoup travaillent leur site en ligne par mesure de simplicité. Mais
lorsque l’on en vient à développer des thèmes sur WordPress, il est préférable
d’opter pour un environnement de développement local. Il est essentiel de
pouvoir coder sur une instance isolée de son site, afin de pouvoir faire tous
les tests nécessaires avant la mise en production.

WordPress

Figure 2.2 – Logo de WordPress

WordPress est un système de gestion de contenus très flexible (Content


Management S ystem) ou CMS qui vous permet d’administrer, de créer et de
gérer votre site internet hautement fonctionnel en n’utilisant que votre
navigateur internet.

Libre, gratuit et personnalisable. Il est aussi reconnu comme l’un des


outils les plus efficac es pour le référencement dans les moteurs de recherches.
Le CMS possède en effet de solides capacités dans ce domaine.

Souvent qualifier comme plateforme de blogs, majoritairement utilisé


dans cette fonction par le passé, WordPress a évolué à travers les années
jusqu’à devenir ce qu'il est aujourd’hui : le CMS le plus utilisé au monde.

Selon les critères liés à ce projet , WordPress réponds parfaitement aux


besoins d’accessibilité, simplicité et flexibilité exigé.

13
Adobe Photoshop

Figure 2.3 – Logo d’Adobe Photoshop

Adobe Photoshop est un logiciel de retouche, de traitement et de dessin


assisté par ordinateur, lancé en 1990 sur MacOS puis en 1992 sur Windows
qui a révolutionné la photographie et jusqu'à la conception que l'on pouvait
s'en faire.

Édité par Adobe, il est principalement utilisé pour le traitement de


photographies numériques, mais sert également à la création ex nihilo
d’images.

Il travaille essentiellement sur images matricielles car les images sont


constituées d’une grille de point s appelés pixels. L’intérêt de ces images est
de reproduire des gradations subtiles de couleurs.

Notre projet traite principalement des images, en particulier les images


transparentes. En effet, la solution que j’ai utilisé afin de proposer au client
un aperçu dynamique du tableau qu’il crée est qu’avec l’assistance d’un
plugin, empiler plusieurs images transparentes (.PNG) afin de les regrouper
en une seule image, et de changer différentes parties de l’image selon ce que
le client choisit.

14
2.4 Description de la base de
données
Étant donné que WordPress interagit avec la base de données
automatiquement , il est possible de manipuler ses données sans avoir à se
soucier de sa structure. Par contre pour écrire un plugin ou simplement
approfondir nos con naissances sur WordPress , il est mieux de savoir comment
WordPress stocke ses données et ses relations .

Le diagramme ci-dessous fournit un aperçu visuel de la base de données


WordPress et des relations entre les tables créées lors de l'installation
standard de WordPress.

15
Figure 2.4 – Diagramme de la base de données WordPress

16
Description des Tables

Nom de la table Description


wp_commentmeta Chaque commentaire contient des
informations appelées métadonnées
qui sont stockées dans
wp_commentmeta.

wp_comments Les commentaires dans WordPress


sont stockés dans la table
wp_comments.

wp_links Wp_links contient des informations


relatives aux liens entrés dans la
fonctionnalité Liens de WordPress.
(Cette fonctionnalité est obsolète,
mais peut être réactivée avec le
plug-in Links Manager.)

wp_options Les options définies dans le


panneau Administration> Paramètres
sont stockées dans la table
wp_options.

wp_postmeta Chaque publication contient des


informations appelées métadonnées
qui sont stockées dans wp_postmeta.
Certains plugins peuvent ajouter
leurs propres informations à ce
tableau.

wp_posts Les messages sont au cœur des


données WordPress. Il est stocké
dans la table wp_posts. Les pages
et les éléments de menu de
navigation sont également stockés
dans cette table.

wp_terms Les catégories pour les


publications et les liens et les
balises pour les publications se
trouvent dans la table wp_terms.

wp_termmeta Chaque terme contient des


informations appelées métadonnées,
qui sont stockées dans wp_termmeta.

wp_term_relationships Les publications sont associées aux


catégories et aux balises de la
table wp_terms et cette association
17
est conservée dans la table
wp_term_relationships. Les
associations de liens vers leurs
catégories respectives sont
également conservées dans ce
tableau.

wp_term_taxonomy Ce tableau décrit la taxonomie


(catégorie, lien ou balise) des
entrées de la table wp_terms.

wp_usermeta Chaque utilisateur contient des


informations appelées métadonnées,
qui sont stockées dans wp_usermeta.

wp_users La liste des utilisateurs est


gérée dans la table wp_users.

18
2.5 Les diagrammes de cas
d'utilisation
Un diagramme de cas d'utilisation capture le comportement d'un
s ystème, d'un sous -système, d'une classe ou d'un composa nt 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. Les cas
d'utilisation permettent d'exprimer le besoin des utilisateurs d'un système, ils
sont donc une vision orientée utilisateur de ce besoin au contraire d'une
vision informatique.

19
Diagrammes de cas d’utilisation du projet

Figure 2.5 – Diagramme de cas d’utilisation du cli ent

Figure 2.6 – Diagramme de cas d’utilisation de l’administrateur

20
2.6 L’architecture du site
Dans cette partie, nous allons voir les pages du site :

Figure 2.7 – Liste des pages du site vu du Dashboard

À propos :

Contrairement à l’opinion générale des gens sur cette page, c’est l’une
des pages les plus souvent visit é dans un site, surtout lors de la premi ère
visite, elle fait souvent la différence entre un client en confiance et un client
perdu. Il est donc important qu ’elle soit claire et qu’elle mette en avant la
crédibilité de l’entreprise.

Accueil :

C’est probablement la page la plus visit é dû à sa nature d ’être la page


index, il est important de mettre des appels à l’action et pousser l ’internaute à
visiter le site et voir ce qu ’il a à offrir.
21
Boutique :
C’est la page qui contient le catalogue de photographies. C’est là où ira
le client pour choisir l’image à imprimer sur son tableau.

Contact :

Cette page est réservée au contact avec le responsable du site, que ce


soit pour une réclamation, plus d’information ou encore une commande
spéciale.

Mon compte :

Lorsque c’est le client qui s ’authentifie, cette page est un tablea u de


bord où le client peut modifier ses diff érentes informations (tel que son mot
de passe ou son adresse de livraison).

Paiement :

C’est la page où toutes les commandes sont effectuées par le client,


c’est là où il choisit son mode de paiement et entre plus d ’informations si
nécessaire.

Panier :

Ici le client peut g érer ses produits avant d e valider ou bien ann uler sa
commande (Supprimer et/ou changer la quantité d’un article)

Créer votre tableau :

Sur cette page, le client construit son produit tout en ayant un aperçu
dynamique des changements afin qu ’il puisse marier les cadres aux photos et
choisir ce qui le convient avant d ’effectuer sa commande, comme vue sur les
figures ci-dessous :

22
Figure 2.8 – Aperçu de la page ‘Créer votre tableau’ (cadre bois noir)

23
Figure 2.9 – Aperçu de la page ‘Créer votre tableau’ (cadre bois blanc)

24
Conclusion
J'ai effectué mon stage de fin d'année au sein de la société ETCE INFO,
une entreprise renommé au Maroc qui a commencer par la vente de produits
informatiques, mais qui continue d'élargir son domaine d'activité et souhaite
ajouter la vente de décorations murales à son éventail.

Au cours de ces deux derniers mois, ce stage a été une opportunité de


mettre en exergue mes compétences et de les exploiter à travers un projet
concret.

J’ai aussi été conscient que ce site peut évoluer dans l’avenir et donc il
faut vraiment au niveau du développement faire un travail précis et clair afin
de faciliter le travail de la personne qui le reprendra.

J’ai capitalisé sur mes compétences acquises au cours de ma formation,


mais ai dû faire preuve d'inventivité pour régler ou contourner un nombre
problèmes encouru tout le long du développement du site.

Ce stage m’aura permis d’approfondir mes connaissances sur WordPress


et d'avoir une expérience plus appliquée du monde professionnel.

25