DEPARTEMENT : TECHNOLOGIE DE L’INFORMATIQUE

SPECIALITE : DEVELOPPEMENT SYSTEME D’INFORMATION

Année Universitaire : 2021-2022

 Remerciements

Au terme de ce stage je tiens à exprimer mes respects et mes sincère remerciement aux
personnels de la société Digital Bundle.

Je voulais exprimer par ces quelques lignes de remerciements nos gratitudes envers
tout d’abord à notre encadrant, Monsieur Ghassen Amri pour ses conseils et son encadrement.
Après tous ceux en qui par leur présence, leur soutien, leur disponibilité et leur conseil nous
avons trouvé courage afin d’accomplir ce projet

Je tiens à remercier toutes les personnes qui m'ont conseillé et relu lors de la rédaction de
ce rapport de stage.

En fin, je ne peux achever ce projet sans exprimer mes gratitudes à tous les enseignants de
l’Institut Supérieur des Etudes Technologiques de Charguia, pour leur soutient tout au long de ces
deux années et spécialement au membre du jury.
 Sommaire

Introduction Générale ............................................................................................................. 1

Chapitre 1 : Présentation du cadre du stage

1. Introduction ....................................................................................................................... 2

2. Présentation de la société.................................................................................................. 2

3. Historique .......................................................................................................................... 2

4. Organigramme de la Société ............................................................................................. 3

5. Conclusion ......................................................................................................................... 3

Chapitre 2 : La Fibre Optique

1. Introduction ....................................................................................................................... 4

2. Description ........................................................................................................................ 4

3. Les types de fibres optiques .............................................................................................. 5

4. Les fibres optiques monomodes ....................................................................................... 6

5. Les fibres optiques multimodes ........................................................................................ 6

6. Types et code couleur fibre optique ................................................................................. 7

7. Les avantages de l’utilisation de la fibre optique.............................................................. 8

8. Les inconvénients de l’utilisation de la fibre optique ....................................................... 8

9. Conclusion ......................................................................................................................... 8

Chapitre 3 : Les tâches réalisées

1. Introduction ....................................................................................................................... 9

2. Le raccordement de la fibre optique ................................................................................. 9

3. Développement Web ...................................................................................................... 10

Conclusion générale ............................................................................................................... 13

Bibliographie et Webographie .............................................................................................. 14

 Liste des figures

Figure 1 Logo Digital Bundle .......................................................................................................................... 3

Figure 2 Diagramme de cas d'utilisation ......................................................................................................... 8
Figure 3 Diagramme de classe ......................................................................................................................... 9
Figure 4 Table Admins .................................................................................................................................. 14
Figure 5 Table Clients ................................................................................................................................. 140
Figure 6 Table Commande ............................................................................................................................ 14
Figure 7 Table Produits ............................................................................................................................... 140
Figure 8 Diagramme de séquence.................................................................................................................. 15
Figure 9 Diagramme d'activité .................................................................................................................... 173
Figure 10 Diagramme d'état transition d'un panier ...................................................................................... 184
Figure 11 Logo VS Code ............................................................................................................................... 15
Figure 12 Logo Angular .............................................................................................................................. 106
Figure 13 Logo MySQL .............................................................................................................................. 106
Figure 14 Page D'accueil ............................................................................................................................... 11
Figure 15 Page d’inscription........................................................................................................................ 128
Figure 16 page de connexion ....................................................................................................................... 128
Figure 17 Panier Vide .................................................................................................................................. 139
Figure 18 Panier Plein ................................................................................................................................. 139
Figure 19 Panier Details Produit ................................................................................................................... 20
Figure 20 Page d’accueil d’administration .................................................................................................... 20
Figure 21 Page Ajout Produit ...................................................................................................................... 213
Figure 22 Page Modifier Produit ................................................................................................................... 21
 Introduction Générale

Après l’effectuation de ma première et mon deuxième semestre dans la spécialité de

développement des systèmes d’information à l’Institut Supérieur des études technologiques de
Charguia, je suis tenu à faire un stage au sein d’une entreprise afin de développer mes
compétences et d’appliquer mes connaissances théoriques étudiées dans la résolution d’une
problématique en milieu professionnel.

Des ventes de mains en mains, vers des ventes virtuelles, passent les priorités des opérations de
ventes des biens et des services, ce qui nous rend obligés de donner plus d’importance à la vente
électronique.

Les sites de vente en ligne permettent aux clients de profiter d’un service qui facilite leurs vies,
pas besoin de déplacement, disponible à tous moments, il suffit de naviguer et de consulter et
de commander des produits d’une manière fiable et nous gagne du temps.

Dans le cadre d’un stage de perfectionnement, je dois réaliser un site web de e-commerce afin
de faciliter la vie de la clientèle.

1
 Chapitre 1
Présentation du cadre du stage

I. Introduction

Dans ce chapitre, il y aura une présentation du cadre général du stage.

Commençant tout d’abord par la présentation de l’organisme d’accueil au sein duquel le stage a été
effectué.

Puis je cite l’étude de la manière de vente actuelle, suivie d’une critique pour pouvoir concentrer sur
les problèmes à résoudre pendant la réalisation de notre projet.

Après la passation du 3ème et la 4ème, je suis demandé à passer un stage de perfectionnement qui dure un
mois d’où ce rapport le fruit de ce stage.

Mon projet portera sur la conception et la réalisation d’un site web e-commerce au sein de la société
Digital Bundle.

Je vais présenter les besoins fonctionnels et les besoins non fonctionnels de mon projet.

II. Présentation de la société

Digital Bundle est une agence digitale, née par l'alliance de deux sociétés "Ultimate Services" et
"Vision 360" dans le but de proposer aux entreprises particuliers un service complet dans le Web
Marketing, Multimédia et le développement des systèmes informatique.

Le fondateur de la société : Amine Abdennour.

Fondée en : 2018

2
Digital Bundle est spécialisé en :

• Graphisme
• Photographie
• Production Audio Visuelle
• Développement Web
• Référencements
• E-Commerce
• Développement des applications d'entreprises
• Développement mobile
• Data Analitics

Figure 1 Logo Digital Bundle

III. Etudes de l’existant

1. Description de l’existant

Pour acheter un matériel informatique tel qu’un ordinateur, un téléphone ou d’autre, le client est
obligé de se transporter vers le local du magasin ou le boutique de vente pour avoir l’offre qui
satisfait ses demandes.

Le déplacement peut être inutile et non nécessaire car le client peut passer des dizaines de minutes
en vagabondant entre les rayons qui fait un gaspillage de temps.

D’ailleurs, même le vendeur n’a pas le temps de vous montrer tous les articles et on est obligé de
choisir le produit qui nous le cherche.

Ainsi, un moyen fiable et automatisé permettant d’informer un grand nombre de clients des offres de
vente et des services nécessaires. Vu l'accroissement de la technologie Internet, l'achat en ligne est
devenu une nécessité incontournable pour les commerçants.
3
 2.Critique de l’existant
La plupart du temps quand on veut acheter un produit informatique, on gaspille beaucoup de temps
en se déplaçant entre les boutiques et entre les rayons pour voir les produits exposés et pour savoir
la disponibilité de tel produit ainsi que leur prix et quelques caractéristiques de ce produit.

Quel est la solution qui évite le gaspillage du temps et qui rend le client confortable.

3. Solutions Proposées
De nos jours, les consommateurs et les magasins s’orientent vers la mise en place des boutiques en
ligne qui permettent le savoir de la disponibilité des produits, découvrir les nouveaux produits, et voir
les articles qui sorts en promotion de solde …
Donc je propose d’informatiser la technique de vente des produits par la création d’une boutique de
vente virtuelle pour éviter la technique classique qui nous faire perdre du temps.

IV. Cahiers Des Charges

1. Les Besoins Fonctionnels
a. Pour l’utilisateur

• La Consultation des produits :

Ce site contient une vitrine virtuelle à travers laquelle le client peut voir les différents produits, la
vitrine présente une image du produit, le libelle de produit, et une vue qui présente les détails du
produit, il peut faire une recherche sur un produit, il peut voir les produits d’une telle marque ou les
produits de telle catégorie.
• L’inscription et l’authentification :
Dès sa visite au site web, le client reste inconnu, chaque client peut s’inscrire et s’authentifier pour
réussir à passer sa première commande, mais dorénavant il suffit de faire son authentification pour
la passation de la commande.
• La gestion du panier :
Le client commence par le choix des produits, puis il change les quantités de chaque produit
demandé, il peut supprimer un produit du panier ou il peut même vider le panier.
• La passation d’une commande :
La passation d’une commande nécessite l’authentification, si le client est déjà authentifié il peut
passer sa commande si non le site offre au client de s’authentifier après le remplissage du panier.

4
 b. Pour l’admin

• L’authentification :
Les admins qui existent dans la base des données peuvent s’authentifier.

• Gestion des utilisateurs :

L’admin dès qu’il s’authentifie il peut gérer les clients, il peut voir la liste des clients actifs
(un client actif est un client qu’il a passé une commande au minimum) et les client non actifs
(un client non actif est un client qui n’a pas passer aucune commande) d’où l’admin peut
supprimer les clients qui n’est pas actif.

• Gestion des commandes :

L’admin peut voir la liste des commandes et il peut lire les informations qui concerne chaque
commande.

• Gestion des produits :

L’admin a la possibilité d’ajouter, lire, supprimer ou mettre à jour un produit.

2. Les besoins non fonctionnels

a. La compatibilité
• Le site web peu importe son langage de programmation ou son éditeur doit être compatible avec
tous les navigateurs web et tous les moyens matériels que ce soit un pc, mobiles ou tablettes…

b. La fiabilité
• L’application web doit fonctionner d’une manière cohérente.

c. L’ergonomies
• Interface facile a utiliser
• Gradation des couleurs claire qui ne fait pas mal aux yeux
• Utilisation des icones de référencement pour faciliter l’interaction avec l’utilisateur

5
 V. Conclusion

Dans ce stade j’ai cité l’étude du système, et les lacunes qui demandent des solutions.
Aussi, j’ai présenté les différents besoins fonctionnels et non fonctionnels qui sont nécessaire
pour mieux faciliter la réalisation du travail.
Dans le chapitre suivant je vais aborder l’étude conceptuelle de notre site, en présentant les
scénarios possibles, les acteurs et les diagrammes…

6
 Chapitre 2
Conception de projet

I. Introduction

Ce chapitre a pour objectif de citer la conception de solution proposée, il répond à la

question ‘Comment faire ?’.

La conception est décrite par un ensemble de diagrammes relevant du langage de modélisation

UML.

II. Diagramme de cas d’utilisation

1. Définition

Un diagramme de cas d'utilisation présente le comportement d'un système, d'un sous-système,

d'une classe ou d'un composant tel qu'un utilisateur extérieur le voit.

C’est la première étape UML pour la conception d’un système.

2. Présentation des acteurs

L’utilisateur :

C’est une personne qui est entrain de fouiller dans le site, qui peut effectuer des recherches,
voir les détails de diffèrent produit pour le découvert ou pour l’acheter.

Le client :

Cet acteur est un utilisateur qui a déjà créer un compte sur le site, qui peut fouiller dans le site
et qui peut passer une commande.

7
L’administrateur :

Pour chaque site web on a une personne qui gère le dynamisme du site, qui effectue la mise à
jour, l’ajout et la suppression des produits, on l’appelle administrateur ou le ‘webmaster’.

3. Le Diagramme de cas d’utilisation du site

Figure 2 Diagramme de cas d'utilisation

8
 III. Le Diagramme de classe du site
1. Définition
Un diagramme de classes fournit une vue globale d'un système en présentant ses classes,
interfaces et collaborations, et les relations entre elles. Les diagrammes de classes sont
statiques : ils affichent ce qui interagit mais pas ce qui se passe pendant l'interaction.

2. Le Diagramme de classe du site

Figure 3 Diagramme de classe

9
 3. Les tables de la base sur Mysql

Figure 4 Table Admins

• La table Admins contient la liste des Admins qui peuvent se connecter sur le site (en tant
qu’admin) qui peut gérer les produits, les commandes et les clients.

Figure 5 Table Clients

• La table Clients contient la liste des clients qui sont inscrits et capables de passer des
commandes.

Figure 6 Table Commande

• La table Commande présente la liste des commandes qui sont passées par les clients.

Figure 7 Table Produits

• La table Produits contient la liste des produits posés au clients.

10
 IV. Diagramme de séquence
1. Définition
Un diagramme de séquence est un diagramme d’interaction qui décrit en détail la manière dont les
opérations sont effectuées et organisés en fonction du temps qui s’écoule au fur et à mesure que
nous parcourons la page.

2. Diagramme de séquence du site

Figure 8 Diagramme de séquence

V. Diagramme d’activité
1. Définition
C’est un Diagramme associé à un objet particulier ou à un ensemble d'objets, qui illustre les
flux entre les activités et les actions. Il permet de représenter graphiquement le déroulement
d'un cas d'utilisation.

11
 2. Les Activités de mon site
• La consultation :
Un catalogue est une image virtuelle d’un produit. D’où, on peut consulter ce dernier à tout
moment et il est à la disposition de tous les utilisateurs du site sans exception.

• L’inscription :
Après la consultation, et pour passer à la phase d’achat des produits exposés, un visiteur doit
devenir client et cela ne se fait qu’après l’inscription.

• L’authentification :
C’est une activité principale dans tous les sites de e-commerce. C’est par cette étape que nous
allons identifier le client qui est en train de charger son panier, payer sa facture et attendre sa
livraison.

• La gestion du panier :
Suite d’une authentification notre visiteur est maintenant un client qui peut librement ajouter ou
supprimer des produits à son panier, tout en pouvant mettre à jour la quantité de l’article
commandé.

• La gestion des produits :

Cette activité n’est disponible qu’à l’administrateur du site web. Elle consiste à gérer toutes les
informations qui concernent les produits, et il peut modifier, ajouter et supprimer des produits.

• La gestion des clients et des commandes :

Cette activité n’est disponible qu’à l’administrateur du site web. L’administrateur peut voir
l’historique des commandes, peut voir aussi ses clients actifs qu’ont passés au moins une
commande, et aussi il peut consulter et supprimer les clients non actifs ce sont celle qui n’ont
pas passé une commande au minimum.

12
 3. Diagramme d’activité d’inscription

Figure 9 Diagramme d'activité

VI. Diagramme d’état transition

1. Définition

Les diagrammes d'états-transitions représentent principalement des états et des transitions.

13
 2. Diagramme d’état transition d’un panier

Figure 10 Diagramme d'état transition d'un panier

VII. Conclusion
Nous venons de terminer cette partie de conception, qui consiste à déterminer et savoir les
différents types de diagrammes réalisés pour notre site. Dans le chapitre suivant nous allons
aborder la dernière partie qui représente la partie réalisation de notre site web.

14
 Chapitre3
Réalisation

I. Introduction
Ce chapitre se porte principalement sur l’énumération des outils systèmes et matériels que je l’ai
utilisés pour réaliser le site.

II. Environnement de développement

1. Environnement matériel
J’ai réalisé ce projet sur un poste d’où ses caractéristiques sont :

• Hôte : DELL
• Modèle : Latitude E7470
• Processeur : Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz 2.80 GHz
• Mémoire RAM : 16 Go
• Type du système : Système d’exploitation 64 bits, Processeur x64 – Windows 10

2. Environnement logiciel
• Visual Studio Code

Visual Studio Code est un éditeur de code open-source développé par Microsoft supportant un
très grand nombre de langages grâce à des extensions. Il supporte l’auto-complétions, la
coloration syntaxique, le débogage, et les commandes git.

Figure 11 Logo VS Code

15
 • Le Framework Angular

Angular est un framework JavaScript développé par Google et reconnu pour être l'un des frameworks
les plus complets. Il embarque un nombre de fonctionnalités le qualifiant pour le développement
d'applications web tels que le routage, la gestion des formulaires, la communication client-serveur…

Il nous permet de développer et construire le code.

Figure 12 Logo Angular

• MySQL
MySQL est un serveur de bases de données relationnelles Open Source.
Un serveur de bases de données stocke les données dans des tables séparées plutôt que de tout
rassembler dans une seule table. Cela améliore la rapidité et la souplesse de l'ensemble. Les tables sont
reliées par des relations définies, qui rendent possible la combinaison de données entre plusieurs tables
durant une requête. Le SQL dans "MySQL" signifie "Structured Query Language" : le langage standard
pour les traitements de bases de données.

Figure 13 Logo MySQL

16
 III. Les Principales Interfaces Graphiques
1. Page d’accueil

Figure 14 Page D'accueil

• Cette page est la page d’accueil, s’affiche dès l’accès à notre site web.
17
 2. Page d’inscription

Figure 15 Page d’inscription

• C’est la page d’inscription, chaque utilisateur devient un client lorsqu’il fait une inscription.

3. Page de connexion

Figure 16 page de connexion

• Lorsque l’utilisateur fait son inscription il doit se connecter pour passer ses commandes.
18
4. Page de panier
a. Panier Vide

Figure 17 Panier Vide

• Au début, le panier est vide, on fait des recherches, et on choisit nos produits et on les
ajoute au panier.

b. Panier plein

Figure 18 Panier Plein

• Le panier est plein, on peut le vider, ou le modifier avant le commander.

19
5. Page détail de produit

Figure 19 Page Détails Produit

• Chaque produit on peut le voir en détails, on peut voir le prix, la disponibilité, la

description et on peut voir le coût du produit si on paie en plusieurs fois.

6. Page d’accueil d’administration

Figure 20 Page D'accueil d'administration

• Lorsque l’administrateur se connecte, la page ci-dessus s’affiche, d’après cette page il peut
gérer les clients, les produits et les commandes.
20
 7. Page d’ajout d’un nouveau produit

Figure 21 Page Ajout de produit

• Le bon remplissage de ce formulaire, assure le l’ajout d’un nouveau produit, toute en respectant les
conditions des remplissages par exemple la marque du produit doit être en majuscule et sans avoir des
caractères spéciaux.

8. Page de modification d’un produit

Figure 22 Page de modification d'un produit

• Cette page se charge dès quand on sélectionne un produit pour le modifier.

21
 IV. Conclusion

Dans ce chapitre de réalisation j’ai présenté les interfaces de notre site web pour améliorer et clarifier les
démarches utilisées pour effectuer ce site.

22
 Conclusion générale

Je suis heureux que ce stage m’ait offert l’occasion d’élargir mes compétences pratiques et de
renforcer mes connaissances pour mieux me préparer à mon projet de fin d’études.

Ce travail est le fruit de mon stage de perfectionnement qui à durée un mois au sein de la société Digital
Bundle.

En réalisant ce projet on a fait l’étude de l’existant puis on fait le cahier des charges, on a aussi parlé de la
partie réalisation et conception de ce travail.

Je veux exprimer ma grande reconnaissance à Amri Ghassen qui a veillé au bon déroulement de mon stage.

Aussi un grand merci à la commission du jury et à mes professeurs.

Sincèrement, cette expérience était très constructive et très bénéfice.

23
 Bibliographie et Webographie
• Webographie

✓ https://digitalbundle.tn/
✓ https://angular.io/
✓ https://www.mysql.com/fr/
✓ https://www.php.net/manual/en/function.header
✓ https://www.mytek.tn/
✓ https://www.tunisianet.com.tn/

24
.