Centre de formation professionnel multiservice

Rapport de Projet de Fin d’Etudes

Développement digital

Développement d'un Site web de

Commande pizza en ligne

 RAADI Smail
Réaliser par :

Encadrer par :  Mr Ibn Batota Zouhair

1
 Remerciements

• Nous voulons exprimer par ces quelques lignes de

remerciements nos gratitudes envers tout d’abord à
notre encadreur, Monsieur Ibn batota zouhair pour
ses conseils et son encadrement. Après à tous ceux en
qui par leur présence, leur soutien, leur disponibilité
et leurs conseils nous avons trouvé courage afin
d’accomplir ce projet.
• En fin, nous ne peuvent achever ce projet sans
exprimer mes gratitudes à tous les enseignants de
CFPMS, pour leur dévouement et leur assistance
tout au long de cette formation.

2
 Résumé :

 Ce travail s’inscrit dans le cadre du projet de fin d’études à Centre de formation

professionnel multiservice pour
 L’obtention du Diplôme technicien spécialisée en développement digital.
 Dans ce cadre, nous avons conçu à concevoir et développer une application web
 D’une site web de commande de pizza en ligne au sein de l’école.
 Mots clés : PHP/ MySQL/ UML/ Bootstrap/ JavaScript/ HTML/ CSS

3
 Sommaire :

Introduction générale
Chapitre 1 : Contexte du travail et cahier de charge
1. Introduction
2. Contexte du projet
3. Cahier de charge
1. Présentation d’ensemble du projet
2. Description graphique
3. Description fonctionnelle et technique
4. Prestations attendues
4. Conclusion
Chapitre 2 : Conception et technologies développées
1. Introduction
2. Obtenir un Planning
3. Analyse de l’application
4. Technologies développées
Chapitre 3 : Implémentation du projet
1. Interface client
2. Admin Panel

Conclusion générale

4
Objectif du Projet :

• L’objectif du projet consiste à développer un site web dynamique d’un

restaurant professionnel en pizza. Ce site permettra de réaliser les
opérations suivantes

• Gérer les relations avec les clients

• Gérer les commandes

• Mettre en place des promotions

• Gérer les produits (ajouter, modifier ou supprimer des produits)

• En effet, ce site donne aux internautes la possibilité de s’inscrire, effectuer

Leurs demandes en ligne, et de recevoir une confirmation immédiate.

5
 Introduction Général :

• Dans le cadre de notre seconde année Développement digital OFPPT

CFPMS, il nous est proposé un projet nous permettant de mettre en
pratique nos connaissances et nos compétences professionnelles au
travers d’un cahier des charges ayant pour finalité la conception et le
développement d’un Site WEB en accords avec nos intérêts professionnels
• Ce projet a pour but l’exploitation et la mise en œuvre des connaissances et
compétences acquises durant notre formation, ainsi l’auto-formation, de
coordination et de gestion primordiaux pour s’introduire dans le monde
professionnel.
• Le premier chapitre sera consacré au Contexte du travail et cahier de
charge Avec une description détaillée de ce qu’on va faire, divisé en une
description graphique et un autre fonctionnelle et technique.
• Le deuxième chapitre qui consiste à donner une analyse et une conception
de notre site web avec le langage UML de conception, on va utiliser les deux
très importants diagrammes, le diagramme de classe et le diagramme des
cas d’utilisation.
• Le troisième chapitre, où on va présenter les outils utilisés pour la
réalisation ainsi que des captures d’écrans de l’application avec une
description.
• Le dernier chapitre, on va donner une conclusion générale de notre projet et
des perspectives.

6
Chapitre 1 : Contexte du travail et cahier de charge

Introduction :
Ce chapitre Présente le projet. Il s’agit tout simplement d’une
description graphique et une description fonctionnelle et technique
de site web, autrement dit les prestations prévues.
Simplifie dans le contexte du travail et le cahier de charge.

Contexte du projet :
Dans l’objectif de maitriser et approfondir nos connaissances déjà
acquises, On a choisi comme projet de fin d’étude de faire la
conception et le développement d’un site e-commerce et
approfondir les connaissances dans le développement web avec
un auto- formation sur les technologies qui nous allons utiliser
en cours de développement.

7
3. Cahier de charge :
3.1. Présentation d’ensemble du projet :
Notre projet est un site e-commerce destiné à vendre des
produits, il est compatible avec des entreprises de vendre mixte,
le site est ciblé au tout le monde.
Notre site est adapté pour les supports mobiles,
tablette et les ordinateurs autrement dit il est
responsif.
On a utilisé la langue Anglais pour être mondiale.

3.2. Description Graphique :

Le code couleur de site est le suivant :

Pour la page des Admin , on a choisi les coulers suivants :

8
Le logo de l’application :
Comme un nom on a pensé à RAADI

Et pour le logo

Alors le résultat est le suivant :

9
Une Approximation de la maquette :
Pour le Desktop :

10
3.3.Description Fonctionnelle et technique :

Le site est composé de plusieurs pages et la visibilité de ces pages

dépend de la personne connectée

On a traité deux cas, le premier cas si le client n’est pas connecté

(anonyme), il peut naviguer et commander pourtant il ne peut pas
effectuer des paiements vus qu’il n’est pas inscrit.

Le deuxième cas si le client est déjà connecté alors il peut commander

et effectuer des achats comme il veut.

Voilà une arborescence du site en vue de Client :

11
 Mode de paiements :

Concernant le mode de paiement on a choisi paiement à l’aide de Visa Carte comme de suite :

12
3.4.Prestations attendues

Voici la liste de toutes les prestations que nous souhaitons pose en offre :

o Développement

o Design

o Migration de base de données

o Achat du nom de domaine et gestion de l’hébergement

o Maintenance et mises à jour

o Formation à la gestion de site

4. Conclusion

A travers ce chapitre, nous avons présenté le cadre du projet,

identifié à atteindre et le travail à faire. Compte tenu de cela, nous
proposons les détails du travail dans le chapitre suivant.

13
Chapitre 2 : Analyse et conception et technologies développées

1. Introdction :

On expose, dans ce chapitre, la solution conceptuelle que nous avons proposée et

cette conception du système à réaliser qui a pour but de rendre flexible la tâche de
la gestion. En d’autres termes, ce chapitre devrait répondre à la question :
comment faire ? La structure de ce chapitre dépend de la nature de ce projet.
Nous avons conçu la phase de conception d’un système d’information qui
nécessite des méthodes permettant de mettre en place un modèle. Il existe
plusieurs langages d’analyse, le plus Utilisé étant le langages UML.

14
2. Obtenir un Planning :

15
3. Analyse et Conception de l’application Web :

 Diagramme de Cas d’utilisation :

Les rôles des diagrammes de cas d’utilisation sont de recueillir, d'analyser

et d'organiser les besoins, ainsi que de recenser les grandes fonctionnalités
d'un systeme.il s'agit donc de la première étape UML pour la conception
d'un système.

Différents acteurs du projet et leurs rôles :

Le visiteur : c’est un individu qui est en train de

faire des recherches sur le net, cherchant un produit
pour l’acheter ou pour avoir une idée sur les
caractéristiques et les prix. Jusqu’à ce stade c’est un
utilisateur inconnu donc il n’est pas encore un
client.

Le Client : cet acteur est un visiteur ayant déjà

créé un compte sur notre site, il peut donc passer
des commandes et gérer son panier en toute
sécurité sachant que notre système prend en
compte et assure la confidentialité des données
personnelles de ses clients.

L’administrateur : pour les sites web on l’appelle

généralement « le webmaster ». C’est celui qui
assure le dynamisme du site et veille à la mise à jour
des produits, de leurs prix, de leurs disponibilités

16
Diagramme de Cas d’utilisation de notre Site Web :

Figure : diagramme de cas d’utilisation

17
 Diagramme de Classe :
Le diagramme de classes est un schéma utilisé en génie
logiciel pour présenter les classes et les interfaces des
systèmes ainsi que les différentes relations entre celles-
ci. Ce diagramme fait partie de la partie statique d'UML
car il fait abstraction des aspects temporels et dynamiques.

Une classe décrit les responsabilités, le comportement et le

type d'un ensemble d'objets. Les éléments de cet ensemble
sont les instances de la classe.

Figure : diagramme de classe

18
 4. Technologies développées :

PHP /Définition :

Le PHP, pour HyperText Préprocesseur, désigne un

langage informatique, ou un langage de script, utilisé principalement pour la
conception de sites web dynamiques.
 Il s'agit d'un langage de programmation sous licence libre qui peut
donc être utilisé par n'importe qui de façon totalement gratuite.

 Créé au début des années 1990 par le Canadien et Groenlandais

Rasmus Lerdorf, le langage PHP est souvent associé au serveur de
base de données MySQL et au serveur Apache. Avec le système
d'exploitation Linux, il fait partie intégrante de la suite de logiciels
libres LAMP.

 Sur un plan technique, le PHP s'utilise la plupart du temps côté

serveur. Il génère du code HTML, CSS ou encore XHTML, des données
(en PNG, JPG, etc.) ou encore des fichiers PDF. Il fait, depuis de
nombreuses années, l'objet d'un développement spécifique et jouit
aujourd'hui une bonne réputation en matière de fiabilité et de
performances.

19
 Fonctionnement :
PHP appartient à la grande famille des descendants du C, dont la syntaxe est très
proche. En particulier, sa syntaxe et sa construction ressemblent à celles des
langages Java et Perl, à ceci près que du code PHP peut facilement être mélangé
avec du code HTML au sein d'un fichier PHP.

 Ce schéma explique ce fonctionnement :

20
 Javascript :

JavaScript est un langage de

programmation de scripts principalement employé dans les pages web
interactives et à ce titre est une partie essentielle des applications web.
Avec les technologies HTML et CSS, JavaScript est parfois considéré
comme l'une des technologies cœur du World Wide Web2. Une grande
majorité des sites web l'utilisent3, et la majorité des navigateurs web
disposent d'un moteur JavaScript4 dédié pour l'interpréter,
indépendamment des considérations de sécurité qui peuvent se poser le cas
échéant.

C'est un langage orienté objet à prototype : les bases du langage et ses

principales interfaces sont fournies par des objets.

Cependant, à la différence d'un langage orienté objets, les objets de base ne

sont pas des instances de classes.

21
 Jquery :

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 web3. La première version est lancée en
janvier 2006 par John Resig.
Le but de la bibliothèque étant le parcours et la modification du DOM (y
compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath),
elle contient de nombreuses fonctionnalités ; notamment des animations, la
manipulation des feuilles de style en cascade (accessibilité des classes et
attributs), la gestion des évènements, etc. L'utilisation d'Ajax est facilitée et
de nombreux plugins sont présents.

22
 Base de donnnée utilisée :

 Pour gérer les données de notre application doucement nous avons choisi
la base de données MySQL à cause de notre connaissance déjà acquise
autour ce système.

 Qui est un Système de Gestion de Bases de Données Relationnelles

(abrégé SGBDR), c'est-à -dire un logiciel qui permet de gérer des bases
de données, et donc de gérer de grosses quantités d'informations. Il
utilise pour cela le langage SQL. Il s'agit d'un des SGBDR les plus connus
et les plus utilisés (YouTube et Wordpress utilisent MySQL, par
exemple).

 MySQL peut donc s'utiliser seul, mais est la plupart du temps combiné à
un autre langage de programmation : PHP, par exemple, pour de
nombreux sites web, mais aussi Java, Python, C++, et beaucoup, beaucoup
d'autres.

23
 Résumé :
• PHP est un langage script HTML embarqué et open-source
utilisé pour créer des pages web dynamiques
• JavaScript est un langage de programmation qui permet de
créer du contenu mis à jour de façon dynamique, de contrôler le
contenu multimédia, d'animer des images, et tout ce à quoi on
peut penser.
• il est plus facile pour un concepteur d'apprendre jQuery car il
utilise la syntaxe CSS familière

24
 Chapitre 3 : Implémentation du projet :

Cette partie dénombre la présentation des scenarios applicatifs de l'application.

Nous allons présenter dans ce qui suit, les imprimes-écran des principales
interfaces réalisées dans nôtres site web.

Notre application a deux parties :

1- INTERFACE CLIENT : partie qui s'affiche dès l'accès a notre

site web (Page home, contact, produit...)

2-ADMIN PANEL : partie accessible aux utilisateurs ayant le privilège admin :

d'ici ils peuvent modifier différentes informations et aussi ajouter des nouveaux
articles sur le site web

25
 1-Interface Client :
 Entête :

Cette partie comprend :

1. Le Lien Qui ramène le client à la page de connexion pour profiter

pleinement de la foire virtuelle
2. Le Lien Qui ramène le visiteur à la page d’inscription
3. Et les liens de tous les autres pages pour naviguer dans le site

26
  Pied de la page :

Cette partie comprend :

1. L’adresse électronique de l’entreprise

2. Les informations sur l’entreprises
3. Et un champ pour plus d’information sur notre site.

27
  Corps de la page Home :

 Cette division affiche les meilleurs produits.

28
 Cette division affiche les nouveaux produits arrivés.

 Ici une petite description su les créateurs du site Web.

29
  Le Corps du page Produits :

Ici les différents Produits à commander.

30
  Création de Compte : << Page Registre >>

Comme dans tous les sites web commercial, le visiteur ne peut

devenir client qu'après la phase d'inscription, notre site web met à la
disposition de ses visiteurs un formulaire d’inscription accessible dans
l’entête, pour devenir client le visiteur doit le remplir.

31
  Connexion : << page de connexion >>

Après la phase d'inscription présentée au-dessus le client doit

s'authentifier pour bien profiter des privilèges qu'un visiteur normal
ne possède pas comme par exemple il ne peut pas effectuer des achats
qu’après l'authentification

32
  Après authentification du client :

Une fois de plus nous trouvons devant une page qui ressemble à une autre (la
corps du page home : nouvelles arrivées) dans une grande partie, même si elle est
en réalité, toute différente.

Par exemple le nom de client arrivée et les produit qu'il a commandé autant
que visiteur

33
  Le Contenu de Panier :

Cette figure représente le contenu du panier virtuel qui permet de

conserver la trace des achats du client tout au long de son parcours et

De modifier les quantités pour chaque produit.

34
  Paiements :

Ici la figure de paiement pour valider vous achats.

35
 Page Services :

Ci-dessus la figure du page services pour se familiariser avec notre

site web et les commentaires des gens qui ont déjà expérimenter
notre service et leurs réactions.

36
 2.Panel Admin :
 Page login :

Sur cette figure nous représentons l'espace d'authentification réserve

aux utilisateurs accrédite du privilège de webmaster pour apporter des
différentes modifications dans nôtre Site Web

37
 Dashboard Admin :

On voit ici SIDE Bar qui représente le nom et le logo du site Web
ainsi que les administrateurs et les Champs des différentes
fonctionnalités
L’administrateurs aussi à la possibilité d’avoir les produits qui
ont été acheté le jour même par les clients ainsi que le gain
d’aujourd’hui

38
 Ajouter des Produits :<< Avec une Fonctionnalité >>

=> L’ajout de nouveaux articles est l'une de nombreuses

taches affectées aux webmasters de notre site web, cette tache
englobe la saisie des caractéristiques du produit comme par
exemple nom, prix, catégorie et d'autres caractéristiques.

39
  Liste de Catégories :

Cette figure représente la liste d'articles ajoutes par le webmaster,

nous voulons par cette figure donner un exemple de plusieurs listes

qui s'affichant de la même manière que la présente.

40
  Infos Administrateurs :

Dans cette figure toutes les informations sur les admins ainsi on peut
les modifier et ajouter des autres admins

41
  Listes de Produits :

Cette figure représente les listes des commandes effectuer par nos

Différents clients. Cette figure englobe la saisie des caractéristiques

des clients par exemple :

 Le nom client, nom produit, prix....

42
Conclusion Générale :
Nous tenons avant tout à remercier nos amis qui nous avons
vraiment accueilli très bien durant la période de projet de fin
d’étude. Ils été toujours présente lorsque nous rencontrions des
problèmes, et toujours prête à répondre à nos questions.

Le travail mené dans le cadre de notre projet de fin d’étude a pour

but de concevoir et développer un site web et de savoir le
fonctionnement de site sans oublier le pouvoir de faire une auto-
formation pour avoir une nouvelle expérience et acquises des
nouvelles compétences dans le domaine de développement.

Je pense que les cours de programmation web et base de données

qui nous ont été enseignés ces deux années par nos professeurs
de département génie informatique ont eu une grande
importance au bon déroulement du projet. En effet, sans ces
notions de base nous aurions sûrement été déboussolés et nous
n’aurions pas pu découvrir des nombreuses choses.

Cette période été vraiment très courtes car nous avons travaillé sur
le sujet pendant tous les jours et nous avons aimé ce que nous avons
fait et nous espérons de s’engager autre fois pour découvrir d’autres
choses pleines de défis et surprises.

43