RAPPORT DE STAGE

Développement informatique

Création d’un site web de E-Commerce

Réalisé par : Wijdane MEDIANI

Professeur Responsable : BENKIRANE Mouhssine

Encadré par : BAHA Khadija

Période de stage : Du 1/04/2021 Au 30/04/2021

 REMERCIEMENT

Tout d'abord, Je veux rendre un hommage particulier à mes

parents qui m’ont donné le monde et continué de le faire.

J’adresse mes remerciements au corps professoral et

administratif de l’institut supérieur de gestion et d’informatique,
pour la qualité de l’enseignement offert et le soutien de l’équipe
administrative.

Je souhaite ensuite remercier le directeur général de BPS MAROC,

M. Abdelaziz ATAIS mon encadrant BAHA Khadija et Hakima
ELOUADI. Ils ont su me faire confiance lors de cette aventure dans
le monde professionnel et ont partagé leurs connaissances de
manière très pédagogique. Je les remercie aussi pour leur
disponibilité et la qualité de leur encadrement en entreprise. Je
tiens également à remercier le personnel pour l'environnement
chaleureux qu'ils ont fourni.

Je voudrais enfin exprimer ma reconnaissance envers les amis qui

m’ont apporté leur soutien moral et intellectuel tout au long de
ma formation.

1
 PLAN

REMERCIEMENT 1

AVANT-PROPOS 3

INTRODUCTION 4

CADRE DE STAGE 5
1. L’entreprise BPSMAROC
2. Les principaux services
PRESENTATION DU PROJET 6
Présentation 6

Outils du travail 7

1. PHP _9
2. HTML _ 10
3. CSS _ 11
4. BOOTSTRAP _ 12
5. JAVASCRIPT _13
6. AJAX _14
7. SQL 15

Déroulement du stage 16

Environnement de travail _17

VISUAL STUDIO CODE 18

SQL SERVER MANAGEMENT STUDIO 19

REALISATION DU PROJET 20
Développement 20

Diagramme de cas d’utilisation 20

Tâches réalisées 21

Modèle conceptuel des données (MCD) 28

Modèle logique des données (MLD) 29

Conclusion 30
 AVANT-PROPOS

Les stages sont un élément très important pour les jeunes diplômés.

Ils constituent de fait leur première vraie expérience professionnelle et

peuvent se révéler utiles à de nombreux niveaux.

Bien choisis, ils apportent compétence et connaissance du monde de

l’entreprise.

Ils aident à développer l’esprit d’équipe et apprendre comment affronter

et surmonter les divers problèmes relationnels qui surgissent souvent
entre les membres de la même équipe.

Bien menés, ils permettent de se constituer un réseau et pourquoi pas de

décrocher un premier emploi au sein de l’entreprise.

Mieux, ils peuvent aider à se faire une vision de son métier et à guider ses
choix de carrière.

Le stage conditionne l’entrée dans la vie active et peut apporter beaucoup

aux étudiants.
 INTRODUCTION

Afin de découvrir le monde du travail au sein des entreprises et dans le

but de mettre en pratique les connaissances théoriques que j’ai étudié

durant ma formation à l’institut supérieur de gestion et d’informatique

(ISGI), ainsi que pour m’intégrer à la vie active, et m’informer sur les

exigences de la vie professionnelle qui m’attend une fois insérée dans le

monde du travail. J’ai effectué mon stage de fin d’études de technicien

spécialisé en tant que stagiaire en développement informatique au sein de

l’entreprise BPSMAROC.

Dans une période d’un mois, mon objectif principal était de concevoir un

site web permettant aux utilisateurs de profiter des services de vente de

la société, et puis le rendre une réalité.

Grâce à cette tâche, j'ai eu l'opportunité de mettre un peu de moi dans

mon projet, et aussi l'occasion d'en tirer des leçons.

J'ai acquis de nouvelles connaissances, compétences de vie et une

expérience mémorable.
 Cadre de Stage

 L’entreprise BPSMAROC

BPS Maroc est une société de service informatique lancée en 2006. Pendant
son existence BPS Maroc à réussie à gagner la confiance des clients et à bâtir
une bonne réputation au marché grâce à la qualité de ses services et de ses
produits.

 Les principaux services

 Intégrateur de solutions informatiques : BPS MAROC ne vend

pas seulement la solution, mais vous guide également tout
au long de l'installation et vous forme afin de l'utiliser et vous
fournit une assistance en cas de problème.

 Distributeur de matériels informatique : BPS MAROC ne fait

pas que vendre le matériel, mais aussi vous fournit une
assistance en cas de problème.
 Présentation du Projet

PROBLEMATIQUE

Introduction

BPSMAROC propose ses services par téléphone, ce qui peut créer de la confusion
ou des inconvénients pour les employés qui travaillent sur différentes tâches en
même temps.

C’est pourquoi l'entreprise a décidé d'informatiser leur service commercial de

matériels informatiques afin de réduire le bourrage sur les appels téléphoniques,
minimiser les dépenses pour les clients et offrir plus de temps et confort aux
clients et aux employés.

Objectifs

Conception et création d’un site web de E-Commerce qui présente les différents
articles disponibles à la vente, les ajouter dans votre panier puis passer des
commandes.

Détail

Le site web doit permettre à l’utilisateur de :

 Consulter la page d’accueil et d’articles sans authentification.

 Se connecter ou créer un nouveau compte.
 Gérer le mot de passe.
 Pouvoir ajouter des articles souhaités dans le panier du compte.
 Supprimer les articles du panier.
 Afficher des messages indicatifs à l’utilisateur au cours de son
expérience.
 Enregistrer une commande avec les détails validés du panier.
 Se déconnecter.
1ERE PARTIE

LES OUTILS DU TRAVAIL

Qu'est-ce qu'un site web ?
Un site web est l’ensemble des pages web et des ressources inter reliées entre elles par des
liens hypertextes, auxquelles l’internaute peut accéder par une adresse web appelée Url, le
tout enregistré sous le même nom de domaine. Un site web ou site internet englobe des
textes et multimédia, il est hébergé sur un serveur web, auquel on peut accéder à travers le
réseau internet ou intranet.

Une page web peut être défini comme étant l’ensemble des documents html structurés,
stockés sur un serveur connecté au réseau mondial qu’est internet, cette dernière contient
pour son essentiel du texte, que l’on enrichit et accompagne d'images, de vidéos animation,
de son parfois et de liens reliant la présente page à d'autres pages web.

Quelle est l’utilité d’un site web ?

Durant ces dernières années, internet est devenu l’outil le plus utilisé au monde qui relie
plusieurs internautes à travers le monde dépassant de loin les médias classiques tels que la
télévision. Lorsqu’un internaute atterrit sur un site web, c'est par ce qu’il cherche à assouvir
un désir de partage, communication, s'amusement ou à répondre à des questions dans
différents domaines.

Une page web contient des informations qui permettent de communiquer et de partager
des ressources avec les gens qui sont connectés sur internet et ce partout dans le monde.
Les professionnels créent des sites web pour se faire connaitre du grand public et l’intégrer
comme étape primordiale dans la mise en place de sa stratégie commerciale, une manière
très efficace qui a pour objectif de développer leur réputation et notoriété sur le web, à
travers l’utilisation du site web comme support de diffusion d'information et de publicité.

Pour un professionnel, le site web est support de communication avantagé qui possède en
lui-même un double intérêt, se faire connaitre auprès des clients potentiels et faire du
marketing visé à moindre coût à travers la mise en place d’une stratégie de promotion de
marque pour affirmer sa présence sur le réseau internet.
PHP

PHP est un langage de programmation coté serveur. PHP s’exécute entièrement

sur le serveur qui héberge le site Web. Bien que son exécution soit moins rapide
que celle du Javascript en raison du temps que prend la requête pour parvenir au
serveur et la réponse pour arriver jusqu'au navigateur, PHP dispose de plusieurs
atouts que je vais résumer dans les points suivants :

Code source confidentiel : Puisque PHP est un langage CGI qui s'exécute sur le
serveur, alors son code source n'est jamais visible par le client, ce qui permet de
manipuler des données confidentielles.

Open source : PHP est un langage de programmation libre de droit.

Multi-plateforme : PHP s’exécute sur des serveurs d'applications que l'on

peut installer sur de nombreux systèmes d'exploitation (Unix/Linux,
Windows, Mac OS, BSD...)

Syntaxe simple et intuitive : Les personnes ayant déjà programmé en C ou en

Javascript trouvent PHP facile à manipuler.

Interfaçage simple avec les bases de données : Bien que PHP soit souvent
associé au SGBD MySQL, il peut cependant interagir avec presque tous les SGDB
connus, d'autant plus à l'aide de l'interface PDO.

Richesse fonctionnelle : PHP prend en charge de nombreuses bibliothèques qui

permettent de réussir des traitements de nature différente comme la
manipulation du DOM, la programmation réseau ou le traitement d'images...

Supports disponibles : La documentation de PHP est très abondante et diversifiée

surtout grâce aux posts de la très large communauté qui s'est formée autour de
lui.
HTML

L'HyperText Markup Language, HTML, désigne un type de langage

informatique descriptif. Il s'agit plus précisément d'un format de données
utilisé dans l'univers d'Internet pour la mise en forme des pages Web. Il
permet, entre autres, d'écrire de l'hypertexte, mais aussi d'introduire des
ressources multimédias dans un contenu.

Développé par le W3C (World Wide Web Consortium) et le WHATWG (Web

Hypertext Application Technology Working Group), le format ou langage
HTML est apparu dans les années 1990. Il a progressivement subi des
modifications et propose depuis 2014 une version HTML5 plus aboutie.

L'HTML est ce qui permet à un créateur de sites Web de gérer la manière

dont le contenu de ses pages Web va s'afficher sur un écran, via le
navigateur. Il repose sur un système de balises permettant de titrer, sous-
titrer, mettre en gras, etc., du texte et d'introduire des éléments
interactifs comme des images, des liens, des vidéos...
CSS

Le CSS pour Cascading Style Sheets, est un langage

informatique utilisé sur Internet pour la mise en forme de
fichiers et de pages HTML. On le traduit en français par
feuilles de style en cascade.

Apparu dans les années 1990, le CSS se présente comme

une alternative à la mise en forme via des balises,
notamment HTML. Un peu plus complexe à maîtriser, il
permet un gain de temps considérable dans la mise en
forme d'une page web par rapport à ces balises. Grâce au
CSS, vous pouvez en effet appliquer des règles de mise en
forme (titrage, alignement, polices, couleurs, bordures,
etc.) à plusieurs documents simultanément.

Sur le plan de la conception d'une page Web, le CSS

permet par ailleurs de séparer la présentation d'une page
HTML et sa structure. Ses standards sont définis par le
World Wide Web Consortium (W3C).
BOOTSTRAP

Bootstrap est un Framework développé par l'équipe du

réseau social Twitter. Proposé en open source (sous
licence MIT), ce Framework utilisant les langages HTML,
CSS et JavaScript fournit aux développeurs des outils pour
créer un site facilement. Ce Framework est pensé pour
développer des sites avec un design responsive, qui
s'adapte à tout type d'écran, et en priorité pour les
smartphones. Il fournit des outils avec des styles déjà en
place pour des typographies, des boutons, des interfaces
de navigation et bien d'autres encore. On appelle ce type
de Framework un "Front-End Framework".
JAVASCRIPT

JavaScript désigne un langage de développement

informatique, et plus précisément un langage de script
orienté objet. On le retrouve principalement dans les pages
Internet. Il permet, entre autres, d'introduire sur une page
web ou HTML des petites animations ou des effets.

Le langage JavaScript est principalement employé pour

améliorer l'ergonomie d'un site Internet et/ou d'une
interface applicative utilisateur. Il sert également à intégrer
des effets esthétiques, toutefois rarement indispensables.
Son principal intérêt réside dans son mode de
fonctionnement : le langage JavaScript offre en effet la
possibilité d'exécuter un code sans être contraint de
recharger une page web. En cela, il joue un rôle dans
l'amélioration de la rapidité de chargement des pages, un
critère d'ergonomie et de référencement de plus en plus
important.
 AJAX

Le terme AJAX désigne une technologie qui s'est

popularisée dans le domaine de la création de sites
internet. Elle est principalement utilisée pour apporter de
l'interactivité au sein des pages d'un site web tout en
économisant les ressources serveur.

En effet, AJAX permet de communiquer avec le serveur à

l'aide de code Javascript en arrière-plan pendant que la
page est affichée à l'écran. Ainsi le contenu de la page peut
être modifié sans qu'il soit nécessaire de faire transiter et
afficher la page en entier. Elle est particulièrement utilisée
pour la mise à jour des formulaires et des paniers sur la
plupart des sites web. C'est une technologie asynchrone :
le code de la page continue de s'exécuter pendant que
l'appel vers le serveur est effectué. Il faut garder à l'esprit
cette information quand on utilise AJAX.
SQL

Le langage SQL (Structured Query Language) est un langage

informatique utilisé pour exploiter des bases de données. Il
permet de façon générale la définition, la manipulation et le
contrôle de sécurité de données.

Dans la pratique, le langage SQL est utilisé pour créer des

tables, ajouter des enregistrements sous forme de lignes,
interroger une base de données, la mettre à jour, ou encore
gérer les droits d'utilisateurs de cette base de données. Il est
bien supporté par la très grande majorité des systèmes de
gestion de base de données (SGBD). Créé au début des années
1970 par Donald D. Chamberlin et Raymond F. Boyce, tous
deux chez IBM, le langage SQL est aujourd'hui reconnu comme
une norme internationale.

De nombreuses bases de données s'appuient sur le langage

SQL. C'est le cas de MySQL qui fait partie de la suite de logiciels
libres LAMP, mais aussi des serveurs de base de données
Oracle, D2B, Microsoft SQL Server, etc.
2EME PARTIE

Le Déroulement du Stage
 Environnement du travail

Afin de réaliser le projet décidé, j’ai utilisé un éditeur de code source

VISUAL STUDIO CODE qui m’a aidé à écrire la partie client serveur
en utilisant HTML, CSS, BOOTSTRAP, JS, AJAX. Et encore la
partie Web serveur en PHP.

Et j’ai utilisé également SQL SERVER MANAGEMENT STUDIO

pour créer la base de données nécessaire.

Pour concevoir mon site web j’ai créé un diagramme de cas

d’utilisation au but de visualiser l’interaction entre l’utilisateur et le
site web.
VISUAL STUDIO CODE

Visual Studio Code est un éditeur de code source qui peut être utilisé avec une
variété de langages de programmation, notamment Java, JavaScript, Go, Node.js
et C++. Il est basé sur le cadre Electron, qui est utilisé pour développer des
applications Web Node.js qui s'exécutent sur le moteur de présentation Blink.
Visual Studio Code utilise le même composant d'éditeur (nom de code Monaco)
utilisé dans Azure DevOps (anciennement appelé Visual Studio Online et Visual
Studio Team Services). Le logiciel prend en charge le Windows Subsystem for
Linux et, permet ainsi par exemple, de programmer facilement en C/C++ depuis
un ordinateur Windows 10.

Le code source est fourni sous la licence libre MIT sur le site du projet sur
Github. En revanche, l'exécutable est proposé sur le site officiel de Microsoft sous
une licence propriétaire.

Support des langages

Visual Studio Code prend immédiatement en charge presque tous les principaux
langages de programmation. Plusieurs d'entre eux sont inclus par défaut, par
exemple JavaScript, TypeScript, CSS et HTML, mais d'autres extensions de
langage peuvent être trouvées et téléchargées gratuitement à partir de VS Code
Marketplace.
SQL SERVER MANAGEMENT STUDIO

Le SQL server désigne couramment un serveur de base de données. La définition

du SQL server est étroitement liée à celle du langage SQL (Structured Query
Language), un langage informatique permettant d'exploiter des bases de
données.

Concrètement, un SQL server est un outil qui possède toutes les caractéristiques
pour pouvoir accompagner l'utilisateur dans la manipulation, le contrôle, le tri, la
mise à jour, et bien d'autres actions encore, de bases de données grâce au
langage SQL.

Le terme désigne également le nom donné au système de gestion de base de

données (SGBD) commercialisé par Microsoft, ou plus précisément le nom du
moteur de bases de données de ce SGDB produit par le fabricant de produits
informatiques américain. Comme ses concurrents Access, Oracle ou encore D2B,
SQL server offre de multiples fonctionnalités.
 Diagrammes de Cas d'Utilisation

En langage UML, les diagrammes de cas d'utilisation modélisent le comportement

d'un système et permettent de capturer les exigences du système.

Ces diagrammes identifient également les interactions entre le système et ses

acteurs.
 Taches Réalisées

Page d’Accueil
 Menu

 Informations sur les services de l’entreprise

 Les catégories d’articles disponible

 À propos de l’entreprise
 Information pour contacter l’entreprise

 Formulaire de login
 Formulaire de création de compte

 Modal de catégorie
 Page de collection d’article

 Page du panier
 Formulaire de modification de mot de passe

 Panier /Section articles

 Message de confirmation de commande
MCD

Le modèle conceptuel des données (MCD) a pour but d'écrire de façon formelle les
données qui seront utilisées par le système d'information.

Il s'agit donc d'une représentation des données, facilement compréhensible,

permettant de décrire le système d'information à l'aide d'entités.
MLD

Un modèle logique de données (MLD) est la représentation des données d'un

système d'information.

Les données sont représentées en prenant en compte le modèle technologique

qui sera utilisée pour leur gestion.
 Conclusion

Pour conclure, j’ai effectué mon stage de fin d’études de technicien

spécialisé en tant que stagiaire en développement informatique au sein de
l’entreprise BPSMAROC.

Lors de ce stage d’un mois, J'ai fait face aux difficultés du monde du
travail et de la gestion du temps et j'ai pu mettre en pratique mes
connaissances théoriques acquises lors de ma formation sur le
développement informatique.

Je me suis lancé un défi en essayant d'améliorer mon autodiscipline, de

perfectionner mes compétences d'auto-apprentissage en apprenant de
nouveaux langages de programmation et en m'engageant dans une tâche
qui demande à la fois passion et patience, et enfin je suis reconnaissante
du chemin parcouru.