SlideShare une entreprise Scribd logo
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 :
3| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
4| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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
6| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
7| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
8| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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
9| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
10| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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
11| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
12| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
13| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
14| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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
15| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
16| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
17| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
18| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
19| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
20| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
21| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
22| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
23| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
24| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
• 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é.
25| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
26| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
27| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
28| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
29| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
30| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
31| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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
32| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
33| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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
34| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
35| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
36| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
37| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.
38| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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
39| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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
40| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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
41| OussamaZERRYI ANDALOUSSI2018/2019
ClassesPréparatoiresdu BTS - Fès
Développementdes Systèmesd'Information
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.

Contenu connexe

Tendances

Active directory Intégration machine
Active directory Intégration machine Active directory Intégration machine
Active directory Intégration machine
Yaya N'Tyeni Sanogo
 
Mise en place de la solution d’authentification Radius sous réseau LAN câblé
Mise en place de la solution d’authentification Radius sous réseau LAN câbléMise en place de la solution d’authentification Radius sous réseau LAN câblé
Mise en place de la solution d’authentification Radius sous réseau LAN câblé
Charif Khrichfa
 
Étude et mise en place d'un serveur FTP au sufop
Étude et mise en place d'un serveur FTP au sufopÉtude et mise en place d'un serveur FTP au sufop
Étude et mise en place d'un serveur FTP au sufop
iferis
 
Etude et mise en place d’une solution open source de gestion de la sécurité d...
Etude et mise en place d’une solution open source de gestion de la sécurité d...Etude et mise en place d’une solution open source de gestion de la sécurité d...
Etude et mise en place d’une solution open source de gestion de la sécurité d...
Mohammed LAAZIZLI
 
Mise en place d'une infrastructure basée sur OpenStack
Mise en place d'une infrastructure basée sur OpenStack Mise en place d'une infrastructure basée sur OpenStack
Mise en place d'une infrastructure basée sur OpenStack
Ahmed Slim
 
Contribution a la_realisation_dune_plate_forme_de_suivi_de_colis (1)
Contribution a la_realisation_dune_plate_forme_de_suivi_de_colis (1)Contribution a la_realisation_dune_plate_forme_de_suivi_de_colis (1)
Contribution a la_realisation_dune_plate_forme_de_suivi_de_colis (1)
zakia saadaoui
 
MISE EN PLACE D’ UN VPN (SITE-TO-SITE) AU SEIN D’ UNE ENTREPRISE : CAS DE LA ...
MISE EN PLACE D’ UN VPN (SITE-TO-SITE) AU SEIN D’ UNE ENTREPRISE : CAS DE LA ...MISE EN PLACE D’ UN VPN (SITE-TO-SITE) AU SEIN D’ UNE ENTREPRISE : CAS DE LA ...
MISE EN PLACE D’ UN VPN (SITE-TO-SITE) AU SEIN D’ UNE ENTREPRISE : CAS DE LA ...
DENAGNON FRANCK ✔
 
Mise en place d'une solution VOIP sécurisée
Mise en place d'une solution VOIP sécuriséeMise en place d'une solution VOIP sécurisée
Mise en place d'une solution VOIP sécurisée
OlivierMawourkagosse
 
Stage Informatique Jedida ZOUMAROU
Stage Informatique Jedida ZOUMAROUStage Informatique Jedida ZOUMAROU
Stage Informatique Jedida ZOUMAROU
Faïzath Jedida ZOUMAROU WALIS
 
rapport MobiResto
rapport MobiResto rapport MobiResto
rapport MobiResto
Slim Hammami
 
Rapport de stage bts
Rapport de stage btsRapport de stage bts
Rapport de stage bts
LOUKOU JOEL ANGA
 
mémoire de projet de fin d'études
mémoire de projet de fin d'études mémoire de projet de fin d'études
mémoire de projet de fin d'études
MortadhaBouallagui
 
ETUDE ET MISE EN PLACE D'UNE SOLUTION DE CLOUD COMPUTING PRIVÉ BASÉE SUR UN ...
ETUDE ET MISE EN PLACE D'UNE SOLUTION DE CLOUD COMPUTING  PRIVÉ BASÉE SUR UN ...ETUDE ET MISE EN PLACE D'UNE SOLUTION DE CLOUD COMPUTING  PRIVÉ BASÉE SUR UN ...
ETUDE ET MISE EN PLACE D'UNE SOLUTION DE CLOUD COMPUTING PRIVÉ BASÉE SUR UN ...
Borel NZOGANG
 
Système de supervision des réseaux de capteurs sans fil
Système de supervision des réseaux de capteurs sans filSystème de supervision des réseaux de capteurs sans fil
Système de supervision des réseaux de capteurs sans fil
Samia HJ
 
Projet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileProjet Fin D'étude Application Mobile
Projet Fin D'étude Application Mobile
Rim ENNOUR
 
Conception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTSConception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTS
FaissoilMkavavo
 
Rapport de stage exchange
Rapport de stage exchangeRapport de stage exchange
Rapport de stage exchange
hindif
 
Rapport de PFE du Diplôme de Mastère pro en Modélisation, Bases de Données et...
Rapport de PFE du Diplôme de Mastère pro en Modélisation, Bases de Données et...Rapport de PFE du Diplôme de Mastère pro en Modélisation, Bases de Données et...
Rapport de PFE du Diplôme de Mastère pro en Modélisation, Bases de Données et...
Sarra LAOUINI
 
Rapport de PFE - Houssem SAKLI (ISIMM)
Rapport de PFE - Houssem SAKLI (ISIMM)Rapport de PFE - Houssem SAKLI (ISIMM)
Rapport de PFE - Houssem SAKLI (ISIMM)
Houssem Sakli
 

Tendances (20)

Active directory Intégration machine
Active directory Intégration machine Active directory Intégration machine
Active directory Intégration machine
 
Mise en place de la solution d’authentification Radius sous réseau LAN câblé
Mise en place de la solution d’authentification Radius sous réseau LAN câbléMise en place de la solution d’authentification Radius sous réseau LAN câblé
Mise en place de la solution d’authentification Radius sous réseau LAN câblé
 
Étude et mise en place d'un serveur FTP au sufop
Étude et mise en place d'un serveur FTP au sufopÉtude et mise en place d'un serveur FTP au sufop
Étude et mise en place d'un serveur FTP au sufop
 
Etude et mise en place d’une solution open source de gestion de la sécurité d...
Etude et mise en place d’une solution open source de gestion de la sécurité d...Etude et mise en place d’une solution open source de gestion de la sécurité d...
Etude et mise en place d’une solution open source de gestion de la sécurité d...
 
Mise en place d'une infrastructure basée sur OpenStack
Mise en place d'une infrastructure basée sur OpenStack Mise en place d'une infrastructure basée sur OpenStack
Mise en place d'une infrastructure basée sur OpenStack
 
Contribution a la_realisation_dune_plate_forme_de_suivi_de_colis (1)
Contribution a la_realisation_dune_plate_forme_de_suivi_de_colis (1)Contribution a la_realisation_dune_plate_forme_de_suivi_de_colis (1)
Contribution a la_realisation_dune_plate_forme_de_suivi_de_colis (1)
 
MISE EN PLACE D’ UN VPN (SITE-TO-SITE) AU SEIN D’ UNE ENTREPRISE : CAS DE LA ...
MISE EN PLACE D’ UN VPN (SITE-TO-SITE) AU SEIN D’ UNE ENTREPRISE : CAS DE LA ...MISE EN PLACE D’ UN VPN (SITE-TO-SITE) AU SEIN D’ UNE ENTREPRISE : CAS DE LA ...
MISE EN PLACE D’ UN VPN (SITE-TO-SITE) AU SEIN D’ UNE ENTREPRISE : CAS DE LA ...
 
Mise en place d'une solution VOIP sécurisée
Mise en place d'une solution VOIP sécuriséeMise en place d'une solution VOIP sécurisée
Mise en place d'une solution VOIP sécurisée
 
Stage Informatique Jedida ZOUMAROU
Stage Informatique Jedida ZOUMAROUStage Informatique Jedida ZOUMAROU
Stage Informatique Jedida ZOUMAROU
 
rapport MobiResto
rapport MobiResto rapport MobiResto
rapport MobiResto
 
Rapport de stage bts
Rapport de stage btsRapport de stage bts
Rapport de stage bts
 
mémoire de projet de fin d'études
mémoire de projet de fin d'études mémoire de projet de fin d'études
mémoire de projet de fin d'études
 
ETUDE ET MISE EN PLACE D'UNE SOLUTION DE CLOUD COMPUTING PRIVÉ BASÉE SUR UN ...
ETUDE ET MISE EN PLACE D'UNE SOLUTION DE CLOUD COMPUTING  PRIVÉ BASÉE SUR UN ...ETUDE ET MISE EN PLACE D'UNE SOLUTION DE CLOUD COMPUTING  PRIVÉ BASÉE SUR UN ...
ETUDE ET MISE EN PLACE D'UNE SOLUTION DE CLOUD COMPUTING PRIVÉ BASÉE SUR UN ...
 
Système de supervision des réseaux de capteurs sans fil
Système de supervision des réseaux de capteurs sans filSystème de supervision des réseaux de capteurs sans fil
Système de supervision des réseaux de capteurs sans fil
 
Projet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileProjet Fin D'étude Application Mobile
Projet Fin D'étude Application Mobile
 
Conception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTSConception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTS
 
Rapport de stage exchange
Rapport de stage exchangeRapport de stage exchange
Rapport de stage exchange
 
Rapport de stage PFE
Rapport de stage PFERapport de stage PFE
Rapport de stage PFE
 
Rapport de PFE du Diplôme de Mastère pro en Modélisation, Bases de Données et...
Rapport de PFE du Diplôme de Mastère pro en Modélisation, Bases de Données et...Rapport de PFE du Diplôme de Mastère pro en Modélisation, Bases de Données et...
Rapport de PFE du Diplôme de Mastère pro en Modélisation, Bases de Données et...
 
Rapport de PFE - Houssem SAKLI (ISIMM)
Rapport de PFE - Houssem SAKLI (ISIMM)Rapport de PFE - Houssem SAKLI (ISIMM)
Rapport de PFE - Houssem SAKLI (ISIMM)
 

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

MEMOIRE DE STAGE
MEMOIRE DE STAGEMEMOIRE DE STAGE
MEMOIRE DE STAGE
jemmeli nejmeddine
 
Étude et mise en place d'un serveur messengerie
Étude et mise en place d'un serveur messengerie Étude et mise en place d'un serveur messengerie
Étude et mise en place d'un serveur messengerie
iferis
 
ERP médical pour la TRANSTU : module de gestion pharmaceutiques
ERP médical pour la TRANSTU : module de gestion pharmaceutiquesERP médical pour la TRANSTU : module de gestion pharmaceutiques
ERP médical pour la TRANSTU : module de gestion pharmaceutiques
Mohamed Aziz Chetoui
 
GEmploi : Smart school timetable management software using RFID technology
GEmploi : Smart school timetable management software using RFID technologyGEmploi : Smart school timetable management software using RFID technology
GEmploi : Smart school timetable management software using RFID technology
Slimane Akaliâ , سليمان أقليع
 
Rapport_Memoire_Mastère_SRT_LARAFA_Mohamed_Akram.pdf
Rapport_Memoire_Mastère_SRT_LARAFA_Mohamed_Akram.pdfRapport_Memoire_Mastère_SRT_LARAFA_Mohamed_Akram.pdf
Rapport_Memoire_Mastère_SRT_LARAFA_Mohamed_Akram.pdf
LARAFA Mohamed Akram
 
Rapport stage pfe
Rapport stage  pfe Rapport stage  pfe
Rapport stage pfe
rimeh moussi
 
Rapport de projet de fin d’étude
Rapport  de projet de fin d’étudeRapport  de projet de fin d’étude
Rapport de projet de fin d’étude
OumaimaOuedherfi
 
RAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDESRAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDES
TombariAhmed
 
Optimisation d'une stratégie web éditoriale
Optimisation d'une stratégie web éditorialeOptimisation d'une stratégie web éditoriale
Optimisation d'une stratégie web éditoriale
Damien Mady
 
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Abdelmadjid Djebbari
 
Rapport PFE 2011 Zimbra
Rapport PFE 2011 ZimbraRapport PFE 2011 Zimbra
Rapport PFE 2011 ZimbraAyoub Kochbati
 
Rapport de Stage PFE 2016 ELAAMRANI OMAR
Rapport de Stage PFE 2016 ELAAMRANI OMARRapport de Stage PFE 2016 ELAAMRANI OMAR
Rapport de Stage PFE 2016 ELAAMRANI OMAROmar EL Aamrani
 
Amélioration de la zone de fabrication des joints d’étanchéité - ELAAMRANI OM...
Amélioration de la zone de fabrication des joints d’étanchéité - ELAAMRANI OM...Amélioration de la zone de fabrication des joints d’étanchéité - ELAAMRANI OM...
Amélioration de la zone de fabrication des joints d’étanchéité - ELAAMRANI OM...
nassimatorby
 
Comment conduire un projet web entre planification ?
Comment conduire un projet web entre planification ?Comment conduire un projet web entre planification ?
Comment conduire un projet web entre planification ?
MarineS6
 
Stage de Perfectonnement Génie Electrique (1) mm 24
Stage de Perfectonnement Génie Electrique (1) mm 24Stage de Perfectonnement Génie Electrique (1) mm 24
Stage de Perfectonnement Génie Electrique (1) mm 24
DhaouiMastour
 
projet fin d'étude IWAN
projet fin d'étude IWANprojet fin d'étude IWAN
projet fin d'étude IWAN
Med Amine El Abed
 
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_webRapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Salma Gouia
 
Mise en place de ftp au sufop
Mise en place de ftp au sufopMise en place de ftp au sufop
Mise en place de ftp au sufop
ImnaTech
 
Administrer samba par webmin
Administrer samba par webminAdministrer samba par webmin
Administrer samba par webmin
ImnaTech
 
Étude et Mise en place d'un serveur samba par webmin
Étude et Mise en place d'un serveur samba par webmin Étude et Mise en place d'un serveur samba par webmin
Étude et Mise en place d'un serveur samba par webmin
iferis
 

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

MEMOIRE DE STAGE
MEMOIRE DE STAGEMEMOIRE DE STAGE
MEMOIRE DE STAGE
 
Étude et mise en place d'un serveur messengerie
Étude et mise en place d'un serveur messengerie Étude et mise en place d'un serveur messengerie
Étude et mise en place d'un serveur messengerie
 
ERP médical pour la TRANSTU : module de gestion pharmaceutiques
ERP médical pour la TRANSTU : module de gestion pharmaceutiquesERP médical pour la TRANSTU : module de gestion pharmaceutiques
ERP médical pour la TRANSTU : module de gestion pharmaceutiques
 
GEmploi : Smart school timetable management software using RFID technology
GEmploi : Smart school timetable management software using RFID technologyGEmploi : Smart school timetable management software using RFID technology
GEmploi : Smart school timetable management software using RFID technology
 
Rapport_Memoire_Mastère_SRT_LARAFA_Mohamed_Akram.pdf
Rapport_Memoire_Mastère_SRT_LARAFA_Mohamed_Akram.pdfRapport_Memoire_Mastère_SRT_LARAFA_Mohamed_Akram.pdf
Rapport_Memoire_Mastère_SRT_LARAFA_Mohamed_Akram.pdf
 
Rapport stage pfe
Rapport stage  pfe Rapport stage  pfe
Rapport stage pfe
 
Rapport de projet de fin d’étude
Rapport  de projet de fin d’étudeRapport  de projet de fin d’étude
Rapport de projet de fin d’étude
 
RAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDESRAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDES
 
Optimisation d'une stratégie web éditoriale
Optimisation d'une stratégie web éditorialeOptimisation d'une stratégie web éditoriale
Optimisation d'une stratégie web éditoriale
 
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
 
Rapport PFE 2011 Zimbra
Rapport PFE 2011 ZimbraRapport PFE 2011 Zimbra
Rapport PFE 2011 Zimbra
 
Rapport de Stage PFE 2016 ELAAMRANI OMAR
Rapport de Stage PFE 2016 ELAAMRANI OMARRapport de Stage PFE 2016 ELAAMRANI OMAR
Rapport de Stage PFE 2016 ELAAMRANI OMAR
 
Amélioration de la zone de fabrication des joints d’étanchéité - ELAAMRANI OM...
Amélioration de la zone de fabrication des joints d’étanchéité - ELAAMRANI OM...Amélioration de la zone de fabrication des joints d’étanchéité - ELAAMRANI OM...
Amélioration de la zone de fabrication des joints d’étanchéité - ELAAMRANI OM...
 
Comment conduire un projet web entre planification ?
Comment conduire un projet web entre planification ?Comment conduire un projet web entre planification ?
Comment conduire un projet web entre planification ?
 
Stage de Perfectonnement Génie Electrique (1) mm 24
Stage de Perfectonnement Génie Electrique (1) mm 24Stage de Perfectonnement Génie Electrique (1) mm 24
Stage de Perfectonnement Génie Electrique (1) mm 24
 
projet fin d'étude IWAN
projet fin d'étude IWANprojet fin d'étude IWAN
projet fin d'étude IWAN
 
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_webRapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
 
Mise en place de ftp au sufop
Mise en place de ftp au sufopMise en place de ftp au sufop
Mise en place de ftp au sufop
 
Administrer samba par webmin
Administrer samba par webminAdministrer samba par webmin
Administrer samba par webmin
 
Étude et Mise en place d'un serveur samba par webmin
Étude et Mise en place d'un serveur samba par webmin Étude et Mise en place d'un serveur samba par webmin
Étude et Mise en place d'un serveur samba par webmin
 

MISE EN PLACE D’UNE application web E-commerce

  • 1. 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. 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 :
  • 3. 3| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 4. 4| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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. 5| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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
  • 6. 6| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 7. 7| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 8. 8| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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
  • 9. 9| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 10. 10| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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
  • 11. 11| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 12. 12| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 13. 13| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 14. 14| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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
  • 15. 15| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 16. 16| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 17. 17| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 18. 18| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 19. 19| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 20. 20| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 21. 21| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 22. 22| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 23. 23| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 24. 24| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information • 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é.
  • 25. 25| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 26. 26| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 27. 27| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 28. 28| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 29. 29| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 30. 30| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 31. 31| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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
  • 32. 32| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 33. 33| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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
  • 34. 34| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 35. 35| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 36. 36| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 37. 37| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.
  • 38. 38| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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
  • 39. 39| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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
  • 40. 40| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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
  • 41. 41| OussamaZERRYI ANDALOUSSI2018/2019 ClassesPréparatoiresdu BTS - Fès Développementdes Systèmesd'Information 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.