MISE EN PLACE D’UNE application web E-commerce

ProfesseurEncadrant:
M. Mohamed HARRANE
Maitre de stage :
Mlle. ChaymaeBOUHACHEM
Réalisé par :
OussamaZERRYIANDALOUSSI
Best Creative
Fès - Maroc
MISE EN PLACE D’UNE APPLICATION
WEB CALLAFOOD.COM
SOCIETE
BEST CREATIVE - FES
Sous le thème :
Effectué au sein de :

2| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
✓ À mes chers parents qui m’ont soutenu moralement et
financièrement à tracer ma voie.
✓ À ma famille ; mes amis ; et à toute personnes proches.
✓ À tous ceux qui m’ont aidé, de près ou de loin.
✓ À mes amis ; mes professeurs et à toute personnes proches.
DÉDICACE
Je dédie ce modeste travail :

REMERCÎMENT
Avant d’entamer le présent rapport, je remercie Dieu, tout-
puissant,qui m’a éclairélebon chemin et m’a aidéà réaliser mon stage.
Au terme de ce travail,je tiens à exprimer ma profonde gratitude,
mes sincères remerciements et reconnaissances à l’entreprise Best
Creativeet en particulier à la Direction,pour leur dévouement au travail
au servicedes stagiaires.
Je tiens aussi à remercier vivement mon encadrent ; MlleChaymae
BOUHACHEM la développeuse web, également Mr Mohamed JIHANI le
designer graphique ;ainsi quemesplusvifsremerciements s’adressent à
Mr MAHRAZAmine le directeur général, pour tout ce temps qu’ils m’ont
consacré, leurs directives précieuses, leur immense savoir-faire et
surtout pourla qualitédeleursuividuranttoutela périodedemon stage.
Je remercie aussi à Mr Mohamed HARRANE pour la qualité de son
enseignement, ses conseils et son intérêt incontestable qu’il porte à
toutes les étudianteset tous les étudiants.Sansoublier de remercier tout
le corps professoral du BTS ; Mr Abdelmajid EL ALAMI et Mr Hamid
MACHHOUR pour leur effort fournit tout allant notreformation.

TABLE DE MATIERES
DÉDICACE................................................................................................................................2
REMERCÎMENT.......................................................................................................................3
TABLE DE MATIERES.............................................................................................................4
INTRODUCTION ....................................................................................................................6
CH – 1 : Présentation globale de l’entreprise ....................................................................7
1) Introduction ..................................................................................................................7
2) La société BestCreative ...............................................................................................7
a) Lieu de la société BestCreative ..............................................................................7
b) Présentation de la société........................................................................................7
c) Les valeurs de l’entreprise......................................................................................9
d) Les missions de l’entreprise...................................................................................9
3) Organigramme..............................................................................................................9
CH – 2 : Description des services de l’organisation .......................................................11
1) Développement web .................................................................................................11
a) Les produits de service Développement web...................................................11
b) Les outils et logiciels du développement informatique.................................13
2) Design graphique ......................................................................................................15
a) Les services graphiques ........................................................................................15
b) Les outils graphiques ............................................................................................16
3) Impression Numérique & Offset............................................................................17
a) Les services d’impressions ...................................................................................18
b) Méthodologie et processus d’impression..........................................................19
4) Design 3D....................................................................................................................19
a) Les outils de traitement.........................................................................................20

5) Développement de logiciel et création d’application.........................................20
a) Les outils de développement...............................................................................20
CH – 3 : Présentation du projet réaliser............................................................................21
1) Etude de besoin..........................................................................................................21
2) Analyse et Conception ..............................................................................................22
a) Diagramme de case....................................................................................................22
b) Modèle Logique de Données...................................................................................23
3) Conception des menus..............................................................................................23
4) Les interfaces de l’application web Calla Food ...................................................25
a) Accueil......................................................................................................................25
b) A-propos...................................................................................................................25
c) Catégories ................................................................................................................26
d) Recettes.....................................................................................................................27
e) Contact......................................................................................................................27
f) Footer........................................................................................................................28
g) Page des Produits...................................................................................................28
h) Page ajout au panier ..............................................................................................29
i) Page de panier.........................................................................................................29
j) Email envoyer à l’entreprise ................................................................................30
5) Les interfaces de l’application web Calla Food Admin .....................................31
a) Login.........................................................................................................................31
b) Tableau de bord......................................................................................................31
c) Catégorie..................................................................................................................32
d) Page produit............................................................................................................34
e) Page Commande.....................................................................................................34
f) Page Message..........................................................................................................35
g) Page d’utilisateur....................................................................................................36
CONCLUSION .......................................................................................................................37
TABLE DE FIGURES..............................................................................................................38
WEBOGRAPHIE/ BIBLIOGRAPHIE..............................................................................................40

INTRODUCTION
Dans le cadre de ma formation de Technicien Supérieur en
Développement des Systèmes d’Information, j’ai eu
l’opportunité d'effectuer un stage de fin d’études d’un mois.
Ce dernier est pour l’objectif de faire synthèse de mes
connaissances théoriques, d'affiner ma Perception de
l'entreprise, d’en retirer une expérience ainsi qu'une analyse
globale et approfondie de l'entreprise et de son environnement,
tout en me préparant dans les meilleures conditions à la vie
professionnelle.
Pour ce stage j'ai décidé d'orienter mon choix vers une
entreprise développement web, BestCreative – Fès, pour
découvrir les conditions de travail dans un milieu professionnel
d’où j’ai eu l’occasion de créer une application web pour un
client de l’entreprise.

Figure 1 Localisation Google Maps du site BestCreative
CH – 1 : Présentation globale de l’entreprise
1) Introduction
Dans le cadre de mon stage de fin d’études au sein de la société
BestCreative, j’ai eu l’occasion de rejoindre le staff informatique, et plus
précisément le service de développement. Ce service est chargé par tous ce qui
est développement de la société BestCreative.
2) La société BestCreative
a) Lieu de la société BestCreative
b) Présentation de la société
BestCreative est une entreprise de conseil en communication globale qui
propose des prestations de conseil en communication mais intègre également
l’ensemble de la production et de la réalisation des opérations de
communication ; notamment la création graphique, conception de Sites Web,
Impression numérique & offset. En ce qui concerne la Création ; l’entreprise
Conçoit et réalise tous les projets graphiques sur mesure ; elle fait la Création
et refonte sur mesure de site Web et elle propose toutes les solutions
Multimédia adaptées aux besoins des clients.

Figure 3 Fiche signalétique de société.
Figure 2 Logo de la société Best Creative.
Le statut d’indépendant apporte une motivation supplémentaire pour
l’entreprise qui pousse plus loin le désir de faire de chacune des interventions
une prestation de qualité. Aujourd’hui, les conditions du succès de
BestCreative tiennent dans la définition même de la qualité : « aptitude d’un
produit à satisfaire les besoins de l’utilisateur ». Contrairement à des sociétés
qui essaient de concilier diverses activités, BestCreative a choisi de se
positionner comme expert dans le domaine de la création de logiciel
spécifique. Les considérations qui ont guidé l’entreprise dans ce choix sont :
les applications personnalisées selon les besoins des clients ; La fiabilité des
logiciels grâce à des solutions moderne et sécurisées ; La modernité des
interfaces qui facilite l’utilisation et l’administration des logiciel pour la
clientèle ; sans négligé l’installation dans le locale des clients et les différentes
formations sur le logiciel gain de productivité.
Dénomination: BEST CREATIVE
Forme juridique : SARL A ASSOCIE UNIQUE
Date d'immatriculation : 02/02/2015
Tribunal : FES
N° Affiliation CNSS : 4262466
N° RC : 45657
N° de ICE : 001702183000047
Patente : 13636327
Téléphone: +212 5 35 62 46 62

c) Les valeurs de l’entreprise
Confiance, Proximité, Rigueur et Créativité reflètent l’entreprise
responsable que BestCreative aspire à devenir sur le plan professionnel. Ces
valeurs sont au cœur de chacune de ces décisions. Ainsi chez BestCreative tout
le monde se considère responsable de tout ce que l’entité entreprenne.
BestCreative a pour principe de s’impliquer totalement dans les projets qui lui
sont confiés et souvent au niveau même de leur définition. La relation entre
l’entreprise et ses clients dépasse le cadre purement commercial, elle se
caractérise plutôt comme un partenariat. Il est hors de question pour
BestCreative de livrer une application spécifique mal définie ou non viable.
Les pratiques commerciales obscures ne font pas partie de la culture de
BestCreative. Cela passe inévitablement par une forte implication et une très
bonne connaissance préalable du domaine d’activité de ses clients.
d) Les missions de l’entreprise
Elle prend en charge le développement de logiciels sur mesure pour tous
les domaines de la gestion. En utilisant des outils et des techniques de
programmation modernes qui permettent de créer des bases de données et de
proposer des applications monopostes, réseau et Web très performantes à des
prix compétitifs. En plus, les applications créer ont une ergonomie simple et
des interfaces modernes qui facilitent l’utilisation pour les clients et
l’administration de ces logiciels.
3) Organigramme
L’organigramme illustré dans la figure ci-dessous représente la structure
hiérarchique de la société où j’ai effectué mon stage de fin d’études.

Figure 4 Structure hiérarchique de l’organisation.
Directeur Générale
Mr Amine MAHRAZ
Responsable Design
Mr Mohamed JIHANI
Responsable Développement
Mlle ChaymaeBOUHACHEM

CH – 2 : Description des services de l’organisation
1) Développementweb
Avoir un site web c'est se donner une visibilité immédiate dans tous les
pays du monde. Améliorez la présence sur le marché Grâce à internet ! Un site
web permet à toute entreprise d’exister sur internet, de faire connaitre son
activité, des produits, etc...
L’équipe indépendante de l’entreprise spécialisée dans la création, la
conception et le Référencement des sites web statiques et dynamiques, la mission
de service est d'accompagner les entreprises, les agences et les particuliers dans
la mise en place de leurs projets, en apportant une expertise et une solution
adaptée, performante et évolutive. L’équipe assiste ses clients pendant toutes les
étapes pour réussir votre site web : création, hébergement, Référencement et
programmation. L’équipe de développement maîtrise l'ensemble des
technologies et des langages utilisés pour la création de site internet afin de
fournir à la clientèle des solutions puissantes, rapides, évolutives et fiables.
a) Les produits de service Développement web
Site web vitrine : est un site Internet informatif qui présente l’activité d’une
entreprise sur le Web. On appelle généralement un site web ; un site vitrine
lorsqu’il présente des informations sur une entreprise, des produits ou des
services. Cette appellation s’oppose aux boutiques en ligne qui génèrent
directement des ventes et du chiffre d’affaires.
Figure 5: Développent web.

BestCreative établit son offre à travers : Nom de domaine (.com, .net, .org) 1
ans ; Hébergement 1 ans ; 5 Emails professionnels ; Nombre de pages (5-10) ;
Formulaire de contact et enfin une Formation.
Site web dynamique : est un site Internet dont les pages sont créées
"dynamiquement" en fonction des requêtes des internautes (les requêtes sont
générés par l'utilisation d'objets tels que zones de saisie, des boutons, des cases
à cocher, les listes déroulantes, etc...). Le contenu rédactionnel du site est
généralement stocké dans une base de données, ce qui permet de dissocier le
contenu (textes, images et autres médias tels que des vidéos) de sa
présentation, qui peut être définie au moyen de feuilles de style (fichiers
portant l'extension .css) ou de Template, qui sont des modèles de mise en
forme, comme le fait le CMS Joomla. L'interrogation de la base de données et
la réalisation de traitements dynamiques s'effectue au moyen d'un langage de
programmation, tel que PHP, interprété sur le serveur web.
A l'inverse des sites web dynamiques, on trouve les sites web statiques,
construits autour d'un ensemble de pages HTML distincte.
BestCreative établit son offre à travers : Interface de gestion des contenus du
site ; Web design ; Nom de domaine (.com, .net, .org) 1an ; Hébergement 1an ;
10 Emails professionnels ; Nombre de pages (<15) ; Maintenance technique ;
Page Facebook ; Page Google plus ; Formulaire de contact ; et enfin une
Formation.
Figure 6: architecture d'un site web dynamique.

Site web E-commerce : On appelle généralement un site web une boutique en
ligne (ou site e-commerce ou site marchand) lorsque ce dernier permet aux
visiteurs de commander et/ou de payer des produits et/ou des services. Le
terme est utilisé pourdistinguer ce type de site des sites vitrines, dontl’objectif
se limite généralement à la présentation d’une entreprise, de ses produits et/ou
de ses services. Certains puristes introduisent une nuance entre une boutique
en ligne et un site e-commerce,
arguant que le premier serait une
émanation d’un commerce
physique. Dans la pratique, cette
différentiation est très peu usitée.
En revanche, il ne faut pas
confondre la notion de boutique en
ligne et celle de drive-to-store, qui consiste à attirer les clients en magasin par
le biais du web et du mobile.
BestCreative établit son offre à travers : Interface de gestion des contenus du
site ; Web design ; Nom de domaine (.com, .net, .org) 1an ; Hébergement 1an ;
100 Emails professionnels ; Nombre de pages illimités ; Gestion comptes
clients ; Gestion des promotions ; Choix du mode de payement ; Gestion du
catalogue gestion des catégories, des sous catégories et des articles ;
Maintenance technique ; Page Facebook ; Page Google plus ; Formulaire de
contact ; et enfin une Formation.
b) Les outils et logiciels du développement informatique
HTML : L’HyperText Markup Langage, généralement abrégé HTML, est le
langage de balisage conçu pour représenter les pages web. C’est un langage
permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de
structurer sémantiquement et logiquement et de mettre en forme
le contenu des pages, d’inclure des ressources multimédias dont
des images, des formulaires de saisie et des programmes
informatiques.
Figure 7: Site web E-commerce.
Figure 8: HTML.

CSS : Cascading Style Sheets, est un langage de feuille de style utilisé pour
décrire la présentation d'un document écrit en HTML ou en XML
.CSSdécrit la façon dont les éléments doivent être affichés à l'écran,
sur du papier, en vocalisation, ou sur d'autres supports.
JavaScript : est un langage de programmation de scripts
principalement employé dans les pages web interactives mais
aussi pour les serveurs2 avec l'utilisation (par exemple) de
Node.js.
JQuery : est une bibliothèque JavaScript libre et multiplateforme créée pour
faciliter l'écriture de scripts côté client dans le code
HTML des pages web.
Node.js : est une plateforme logicielle libre et événementielle en JavaScript
orientée vers les applications réseau qui doivent
pouvoir monter en charge.
Bootstrap : est une collection d'outils utiles à la création du design (graphisme,
animation et interactions avec la page dans le navigateur, etc.) de sites et
d'applications web. C'est un ensemble qui contient des codes HTML et CSS,
des formulaires, boutons, outils de navigation et autres
éléments interactifs, ainsi que des extensions JavaScript
en option.
PHP : HyperText Preprocessor, est un langage de programmation libre,
principalement utilisé pour produire des pages Web
dynamiques via un serveur http.
MySQL : est un système de gestion de bases de données relationnelles
(SGBDR).
Figure 9: css.
Figure 10: java script.
Figure 11: jQuery.
Figure 12: Node Js.
Figure 13: Bootstrap.
Figure 14: PHP.
Figure 15: MySQL

2) Design graphique
Les infographies (ou les photos), sont les premiers éléments sur lesquels
un lecteur pose son regard. C’est aussi le format de stockage préféré de la
mémoire humaine. BestCreative assure la réalisation d'illustrations très diverses
(plaquettes, flyers, cartes de visite, création de logos, journaux d’entreprise,
affiches...) le client explique le style d’images qui a retenu son attention, son
objectif et votre sa cible et l’entreprise se charge du reste. Webdesign Le terme
webdesign se rapporte à la discipline consistant à structurer les éléments
graphiques d’un site web afin de traduire, à travers une dimension esthétique,
l’identité visuelle de la société ou de l’organisation. Il s’agit donc d’une étape de
conception visuelle, par opposition de la conception fonctionnelle (ergonomie,
navigation).
a) Les services graphiques
Création de logo et d'identité visuelle : Le logo est l'élément fondateur de
l’identité visuelle, facteur essentiel de la réussite de l’entreprise ou d’une
marque. Le studio de BestCreative élabore avec les clients les principales idées
que doit véhiculer l'image de la société cliente, ses valeurs, son secteur et ses
ambitions. Une fois créé, le logo peut être décliné sur tous les supports de
communication (papier à
en-tête, cartes de visite,
enveloppes, site internet,
signalétique, véhicules...).
Figure 17: Création logo.
Figure 16: Design graphique.

Création de charte graphique : En complément du logo, l’entreprise réalise une
charte graphique cohérente et flexible. Elle déterminera le style graphique de
chacun de des supports de
communication et
garantira l'homogénéité de
l’identité visuelle.
Création de PACKAGING : L'emballage est l'un des principaux arguments de
séduction d'un produit. Dans studio de création de l’entreprise ; se conçoit
pour le packaging, une identité graphique originale, forte et séduisante dans
le respect des standards du produit et secteur. BestCreative est toujours à
l’écoute pour définir ensemble les atouts de produit et créer l'identité
graphique qui retiendra l'attention et suscitera l'envie des consommateurs.
Création d'outils de communication print : BestCreative propose la création
d'une large gamme d'outils imprimés pour la communication des entreprises.
Elle conçoit ces outils dans le respect devotre charte graphique tout en assurant
le suivi de fabrication, de l'impression
à la livraison de vos documents.
b) Les outils graphiques
Adobe Flash : est un logiciel permettant la manipulation de graphiques
vectoriels, d'images matricielles et de scripts Action Script en vue
de créer des contenus multimédia (animations, vidéos, jeux,
applications...) destinés à être publiés sur Internet.
Adobe Illustrator : est un logiciel de création graphique vectorielle. Il fait
partie de la gamme Adobe, peut être utilisé indépendamment ou
en complément de Photoshop, et offre des outils de dessin
vectoriel puissants.
3D Studio Max : est un logiciel de modélisation et d'animation 3D, développé
par la société Autodesk. Avec Maya, Softimage XSI, Lightwave,
Figure 18: Création des charts graphique.
Figure 19: Création d'outils de communication print.
Figure 20: Adobe Flash.
Figure 21: Adobe Illustrator.
Figure 22: 3D Studio Max.

Houdini et Blender, il est l'un des logiciels de référence dans le domaine de
l'infographie 3D.
Adobe InDesign : est un logiciel de PAO produit par Adobe Systems.
Initialement conçu pour créer des œuvres telles que des affiches,
dépliants, brochures, magazines, journaux ou livres, il peut
également publier du contenu adapté aux tablettes, utilisé avec
Adobe DPS.
Adobe Photoshop : est unlogiciel de retouche d'image et de création graphique
édité par la société Adobe. Lancé à l'origine comme un simple logiciel de
retouche d'image, ses fonctionnalités se sont vues améliorées et
complétées au fil des années et des versions. Adobe Photoshop
constitue maintenant l'outil de base dans la plupart des secteurs
de l'industrie graphique.
SolidWorks : est également connu sous le nom de « DSS SolidWorks ». DSS
désigne Dassault Systems, qui est le développeur de ce logiciel de
CAO. Il s'agit d'un logiciel de CAO qui permet de créer des
modèles solides 2D ou 3D sans aucune complexité, plus
rapidement et de manière rentable.
Adobe After Effects : est un logiciel, à l'origine, de montage vidéo qui est
devenu par la suite un outil de composition (compositing en
anglais) et d'effets visuels, pionnier de l'animation graphique sur
ordinateur personnel, édité par la société Adobe Systems.
3) Impression Numérique & Offset
BestCreative une agence de communication issue du print et capable
d’accompagner ses clients dans leurs projets d’impression.
Le papier reste un support intemporel. Il devient un objet de prestige,
choisi pour créer, par le toucher, la matière, la forme, des sensations que le
numérique n’offre pas. C’est dans cet esprit BESTCREATIVE conçoit et réalise
ses projets print. Pour guider ses clients au mieux dans leurs communication
Figure 23: Adobe InDesign.
Figure 24: Adobe Photoshop.
Figure 25: SolidWorks.
Figure 26: Adobe After Effects.

Print, elle pense aussi aux déclinaisons sur le Web et sur le Digital. Même si le
papier est un support fixe, l’entité imagine que chaque projet en mouvement.
a) Les services d’impressions
Impressions professionnelles : confier BestCreative aux travaux d’imprimerie,
c’est pour l’assurance de nombreux avantages. A savoir :
⇒ Un suivi confié à des professionnels de l’impression qui veillent à la
qualité du travail livré.
⇒ Un seul interlocuteur depuis la maquette jusqu’à la livraison finale.
⇒ Possibilité d’impression en petite ou
grande quantité et tous formats.
⇒ Une information sur les nouveautés
technologiques et la diversité des
techniques d’impression.
Produits de qualité au juste prix : l’entreprise adopte une stratégie qualité /prix
qui recherche pour ses clients la plus grande qualité au meilleur prix quels que
soient les travaux d’impression : affiches, flyers, tabloïds, brochures,
plaquettes commerciales, cartes de visite, enveloppes, chemises à rabat, menus
de restaurant… pour BestCreative ‘’Il n’y a pas de petit projet ! tout projet est
important, et ils font en sorte de le rendre unique !’’.
Des délais respectés : l’entreprise cherche toujours à donner l’entière
satisfaction pour ces clients ; et aux délais sont aussi parmi les priorités. Selon
les plannings de production et de fabrication ainsi que la complexité du projet,
elle établit le délai le plus précis possible et ils s’y tiennent.
Figure 27: Impressions professionnelles.

b) Méthodologie et processus d’impression
4) Design 3D
Depuis est plus de 3 ans maintenant, que BestCreative réalise pour le
compte de ses clients des images de synthèse à partir d’idées, de croquis, de plans
techniques, de photos et même de modèles 3D de conception (CAO). Les
créations 3D de l’entité sont orientées vers des supports visuels d’aide à la vente
ainsi que des outils interactifs et pédagogiques.
Toutes les créations 3D sont sur-mesure et s’adaptent à tous supports :
communication papier, stands, supports web ou tablettes
tactiles. Ainsi que les compétences d’ingénierie permettent à
l’entité de travailler dans une logique d’industrialisation et
Cycle de
préparation
•Suite à différents briefs et rencontres, une proposition de
charte graphique est soumise au client. En parallèle, les flux
de données (visuels, produits à shooter, textes, etc.) sont
réceptionnés.
Production
•Bestcreative se distingue, dans le processus d’impression,
pour son souci au détail, une grande flexibilité et le respect
des normes de qualité de l’excellence.
Contrôle/e
nvoi BAT
client
•Si le client est satisfait du travail, que les corrections ont été
parfaitement exécutées, les images bien retouchées et les
couleurs bien étalonnées, il remet alors le bon à tirer (le
BAT) dûment daté et signé. C’est ce document qui donnera
le feu vert pour l’impression.
Livraison
•Près un contrôle de qualité minutieux, le produit final est
conditionné en paquets puis distribué ou livrer au client
par tout autre moyen convenu.
Figure 28: processus d’impression.

d’optimisation des coûts tout en garantissant un très haut niveau de qualité grâce
à une équipe d’infographistes 3D et de développeurs informatiques tous
diplômés. Ce positionnement spécifique pour un studio 3D nous permet de
proposer aux clients un rapport qualité coût incomparable.
a) Les outils de traitement
AutoCAD : est un logiciel de dessin assisté par ordinateur utilisé pour créer
des plans en architecture, dessin industriel, construction des
ponts ou les circuits d'ordinateur, entre autres.
5) Développementde logiciel et création d’application
Grâce à l'équipe d'ingénieurs expérimentés, BestCreative est devenu un
partenaire sûr à long terme pour plusieurs entreprises. À BestCreative on est sûr
que dans la plupart des cas un produit logiciel prédéveloppé ou sa
personnalisation professionnelle peuvent suffisamment répondre aux besoins
d'un business. Cependant, il y a des
situations quand ce n'est pas possible -
dans ce cas, le développement des
logiciels personnalisés est la meilleure
solution.
a) Les outils de développement
Microsoft .NET : est le nom donnéd’un ensemble de produits et
de technologies informatiques de l'entreprise Microsoft pour
rendre des applications facilement portables.
Microsoft SQL Server : est un système de gestion de base de données (SGBD)
en langage SQL incorporant entre autres un SGBDR (SGBD
relationnel) développé et commercialisé par la société Microsoft.
Figure 29: AutoCAD.
Figure 30: Création d’application.
Figure 31: Microsoft .NET.
Figure 32: Microsoft SQL Server.Figure 33: MySQL
Figure 34: PHP.

CH – 3 : Présentation du projet réaliser
Dans ce chapitre, nous allons essayer de projeter la lumière sur les grandes
étapes de la réalisation de notre application web, commençant par l’étude de
besoin jusqu'à la réalisation des différentes fonctionnalités de l’application web
CallaFood.com.
1) Etude de besoin
J’étais chargé de réaliser un Projet réel, sous forme d’une application web
pour l’entreprise Calla Food ; La Société Industrielle de Conserves d’Olives et
des catégories Agricoles à Fès.
L’application Calla Food se compose de deux espaces, une pour
l’administrateur et une autre pour les internautes.
L’espace des internautes doit contenir des interfaces qui présente
l’entreprise Calla Food et ses activités ainsi qu’elle doit contenir des catégories
qui représentent l’ensemble des produits de la société afin de les mettre à la
disposition du client. Ce dernier peut choisir des produits et les mettre au
panier dans le but d’élaborer une commande et l’envoyée à la société.
L’espace de l’administrateur doit assurer la gestion du contenu du site
ainsi que les demandes envoyées par les clients et les messages remplient par
les internautes.
Les couleurs utilisées dans l’application doivent être compatible au logo de la
société Calla Food.
Figure 35: Logo de société Calla Food.

2) Analyse etConception
a)Diagramme de case
Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés
pour donner une vision globale du comportement fonctionnel d'un système
logiciel.
Figure 36: internaute et Client - user case.
Figure 37: Admin - user case.

b) Modèle Logique de Données
Le Modèle Logique de Données (MLD) est la modélisation logique des
données qui tient compte du niveau organisationnel des données. Il s'agit
d'une vue logique en termes d'organisation de données nécessaires à un
traitement.
3)Conception desmenus
➢ L’application doit avoir les menus suivants :
• Accueil
• À-propos
• Catégories
• Recettes
• Contacte
Figure 38: MLD - conception.

• Panier
• La langue du site
➢ La section du contact doit contenir une carte qui indique la localisation de
la société.
➢ La section des catégories doit lister les produits de la catégorie choisi.
➢ Le produit choisi doit s’ajouter au panier avec la quantité.

4) Les interfacesde l’application web Calla Food
a) Accueil
L’interface d’accueil contient un logo de la société et sept menus ainsi que
le combo box de la langue choisi.
b) A-propos
Cette interface contient la partie présentatrice de la société Calla Food.
Figure 39: Accueil.
Figure 40: A-propos.

c) Catégories
La partie contient les catégories illustrées par l’administrateur dans le site
web. Chaque catégorie contient des produits de l’entreprise.
Figure 41: Catégories.

d) Recettes
Cette partie représente les recettes préparées par les produits Calla Food.
e)Contact
La partie suivante consiste à envoyer un message à la société nécessaire.
Figure 42: Recettes.
Figure 43: Contact.

f) Footer
Le Footer de site web contient une carte de localisation et les droits
réservés à la société.
g) Page desProduits
La présente page Permet à l’internaute de choisir les produits.
Figure 44: Footer.
Figure 45 : Page des Produits.

h) Page ajoutau panier
Cette page consiste à ajouter le produit au panier avec la quantité définie
par l’utilisateur.
i) Page de panier
la suivante page consiste à lister tous les produits choisis par l’utilisateur
avec la quantité défini et générer un formulaire pour élaborer une demande à
la société.
Figure 46: Page ajout au panier.
Figure 47: Page de panier.

Le formulaire d’élaboration de la commande.
j) Emailenvoyerà l’entreprise
Au moment de l’envoi de la commande à la société, on génère une page
qui contient les produits commander avec leurs quantités.
Figure 48: formulaire de la demande
Figure 49: Email envoyer à l’entreprise.

5) Les interfacesde l’application web Calla Food Admin
Avant d’entrer à l’espace Admin, il est obligatoire d’authentifier pour
accéder.
a) Login
Calla Food authentification.
b) Tableau de bord
La barre de navigation contient et la barre
notification , de messages et de commandes.
.
Figure 50:Login.
Figure 51:Tableau de bord

L’interface suivante contient les statistiques des commandes, des
messages, des catégories et des produits.
c) Catégorie
Cette interface permette de manipuler les catégories et d’ajouter les
produits par rapport à la catégorie sélectionner.
Figure 52: les statistiques IHM.
Figure 53 : Catégorie.

Lorsqu'on clique sur ‘’Ajouter Catégorie’’ l’application se dirige
automatiquement vert un formulaire d’ajout.
Sur la même IHM on peut modifier une catégorie afin mettre à
jour les données.
Aussi on a un modèle Bootstrap qui permet de supprimer le nécessaire.
Figure 54 : Ajouter Catégorie.
Figure 55: supprimer IHM

On a une zone de recherche qui permet de chercher par le libellé.
d) Page produit
Cette page ressemble à la page catégorie mais avec une simple différence,
celle du tri et l’ajout des produits par catégorie.
e) Page Commande
Cette page permet de lister les informations sur les commandes et d’offrir
la possibilité de voir la commande envoyée par le client.
Figure 56; recherche IHM.
Figure 57: Page produit.
Figure 58: Page Commande.

f) Page Message
Elle sert à récupérer les messages remplient par l’internaute au contact et
l’afficher à l’administrateur.
Aperçu de message
Figure 59: Page Message.
Figure 60: Aperçu de message.

g)Page d’utilisateur
La page suivante Permet d’ajouter un utilisateur pour déléguer l’accès à
un autre admin pour but de gérer le contenu du site à travers l’espace de
l’admin.
L’interface d’ajout d’un utilisateur
Figure 61: Page d’utilisateur.
Figure 62: Ajout d’un utilisateur.

CONCLUSION
À la fin de ce rapport, la période du stage est une
phase d’application nécessaire et essentielle pour bien
réaliser une liaison entre les connaissances théoriques et
la pratique professionnelle.
Ce stage est très intéressant pour moi puisqu’il m’a
permis d’apprendre le concept de travail de l’entreprise,
de mettre en œuvre mes connaissances déjà acquises au
cours de mes études.
Enfin, je tiens à renouveler mes sincères
reconnaissances, à toutes personnes ayant participées de
près ou de loin à la bonne réalisation de ce fruit.

TABLE DE FIGURES
Figure 1 Localisation Google Maps du site BestCreative ...............................................7
Figure 2 Logo de la société Best Creative. ..........................................................................8
Figure 3 Fiche signalétique de société. ...............................................................................8
Figure 4 Structure hiérarchique de l’organisation..........................................................10
Figure 5: Développent web.................................................................................................11
Figure 6: architecture d'un site web dynamique.............................................................12
Figure 7: Site web E-commerce. .........................................................................................13
Figure 8: HTML.....................................................................................................................13
Figure 9: css. ...........................................................................................................................14
Figure 10: java script.............................................................................................................14
Figure 11: jQuery...................................................................................................................14
Figure 12: Node Js. ................................................................................................................14
Figure 13: Bootstrap..............................................................................................................14
Figure 14: PHP. ......................................................................................................................14
Figure 15: MySQL.................................................................................................................14
Figure 16: Design graphique...............................................................................................15
Figure 17: Création logo.......................................................................................................15
Figure 18: Création des charts graphique.........................................................................16
Figure 19: Création d'outils de communication print. ...................................................16
Figure 20: Adobe Flash.........................................................................................................16
Figure 21: Adobe Illustrator. ...............................................................................................16
Figure 22: 3D Studio Max....................................................................................................16
Figure 23: Adobe InDesign. ................................................................................................17
Figure 24: Adobe Photoshop...............................................................................................17
Figure 25: SolidWorks..........................................................................................................17
Figure 26: Adobe After Effects. ..........................................................................................17
Figure 27: Impressions professionnelles. .........................................................................18
Figure 28: processus d’impression.....................................................................................19
Figure 29: AutoCAD. ............................................................................................................20
Figure 30: Création d’application.......................................................................................20
Figure 31: Microsoft .NET. ..................................................................................................20
Figure 32: Microsoft SQL Server........................................................................................20

Figure 33: MySQL.................................................................................................................20
Figure 34: PHP. ......................................................................................................................20
Figure 35: Logo de société Calla Food...............................................................................21
Figure 36: internaute et Client - user case. .......................................................................22
Figure 37: Admin - user case. ..............................................................................................22
Figure 38: MLD - conception. .............................................................................................23
Figure 39: Accueil..................................................................................................................25
Figure 40: A-propos. .............................................................................................................25
Figure 41: Catégories. ...........................................................................................................26
Figure 42: Recettes. ...............................................................................................................27
Figure 43: Contact..................................................................................................................27
Figure 44: Footer....................................................................................................................28
Figure 45 : Page des Produits. .............................................................................................28
Figure 46: Page ajout au panier. .........................................................................................29
Figure 47: Page de panier.....................................................................................................29
Figure 48: formulaire de la demande ................................................................................30
Figure 49: Email envoyer à l’entreprise. ...........................................................................30
Figure 50:Login......................................................................................................................31
Figure 51:Tableau de bord...................................................................................................31
Figure 52: les statistiques IHM...........................................................................................32
Figure 53 : Catégorie.............................................................................................................32
Figure 54 : Ajouter Catégorie. .............................................................................................33
Figure 55: supprimer IHM...................................................................................................33
Figure 56; recherche IHM. ...................................................................................................34
Figure 57: Page produit........................................................................................................34
Figure 58: Page Commande.................................................................................................34
Figure 59: Page Message......................................................................................................35
Figure 60: Aperçu de message. ...........................................................................................35
Figure 61: Page d’utilisateur. ..............................................................................................36
Figure 62: Ajout d’un utilisateur. .......................................................................................36
Figure 63: QR code référer au Rapport présent, le projet Calla Food, La
présentation PPT...................................................................................................................41

WEBOGRAPHIE / BIBLIOGRAPHIE
https://bestcreative.ma 10/08/2019
https://www.directinfo.ma/fiche-detail/2357563/BEST-CREATIVE 13/05/2019
https://fr.wikipedia.org 14/05/2019
https://www.w3schools.com/ 15/05/2019
https://php.net/ 18/05/2019
https://stackoverflow.com/ 20/05/2019
https://colorlib.com/wp/ 22/05/2019
https://www.youtube.com/watch?v=PE8FQ6zihhw&list=PLjwdMg
w5TTLVjTZQocrMwKicV5wsZlRpj
22/05/2019
https://www.youtube.com/watch?v=cWoq5znh0vw&list=PLjwdMg
w5TTLVDv-ceONHM_C19dPW1MAMD
23/05/2019
https://www.youtube.com/watch?v=DbUjq8J6RK8&list=PLDoPjvo
NmBAy0dU3C3_lNRTSTtqePEsI2
23/05/2019
https://www.youtube.com/watch?v=52s6c4kYx-
Y&list=PLDoPjvoNmBAwccMO4JiLP_vJHxJ_NWeqL
24/05/2019
https://www.pexels.com/search/programing%20languege/ 26/05/2019
https://getbootstrap.com/ 26/05/2019
https://api.jquery.com/ 27/05/2019
https://www.developpez.net 27/05/2019

NB. Ce rapport est joignable d’un CD qui contient le projet de
l’application web Calla Food avec un QR code qui fait référence à le
projet.rar, rapportde stage.docx, presentation.ppt.
Figure 63: QR code référer au Rapport présent, le projet Calla Food, La présentation PPT.

MISE EN PLACE D’UNE application web E-commerce

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à MISE EN PLACE D’UNE application web E-commerce

Similaire à MISE EN PLACE D’UNE application web E-commerce (20)

MISE EN PLACE D’UNE application web E-commerce