Ministère De L’enseignement Supérieur Et De La Recherche Scientifique

Direction Générale Des Études Technologiques

Institut Supérieur des Études Technologiques de Kairouan

Rapport de stage
perfectionnement

Département : Technologie de
l’informatique

Réalisé par Organisme d’accueil Encadré par

Guezmil Ahmed ITGATE Hatem Diwani

 Remerciements

Je tiens à remercier toutes les personnes qui ont contribué au succès de mon stage et
qui m'ont aidé lors de la rédaction de ce rapport.

Tout d'abord, j'adresse mes remerciements à mon maitre de stage, Mr Hatem Diwani,
pour son accueil, le temps passé ensemble et le partage de son expertise au quotidien. Grâce
aussi à sa confiance j'ai pu m'accomplir totalement dans mes missions. Il fut d'une aide
précieuse dans les moments les plus délicats.

Enfin, je tiens à remercier toutes les personnes qui m'ont conseillé et relu lors de la
rédaction de ce rapport de stage : ma famille, mes amis SAIF BA et MONGI
MANGUELISA camarade de promotion.
 Sommaire

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

Chapitre I : Cadre du stage....................................................................................................2

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

1. Présentation générale sur la société :.......................................................................2

2. Les départements et les services...............................................................................3

II. Contexte de stage.......................................................................................................3

Chapitre II : Spécification des besoins.......................................................................................4

I. Besoins fonctionnels......................................................................................................4

II. Besoins non fonctionnels...........................................................................................4

III. Méthodologie de conception :...................................................................................4

IV. Les logiciels utilisés....................................................................................................5

Chapitre III: Conception.........................................................................................................6

I. Diagrammes de cas d’utilisation de notre site web.......................................................6

1. Diagramme de cas d’utilisation d’un visiteur.............................................................6

2. Diagramme de cas d’utilisation d’un client................................................................7

3. Diagramme de cas d’utilisation du webmaster du site web......................................7

I. Environnement de travail.............................................................................................9

1. Environnement matériel...........................................................................................9

2. Environnement logiciel et langage :.........................................................................9

II. Enchaînement des écrans..............................................................................................11

Conclusion générale...............................................................................................................22

Netographie.............................................................................................................................23
 Liste des figures

Figure 1:Emplacement géographique de la société ITGAT.......................................................2

Figure 2:Diagramme de cas d’un visiteur..................................................................................6
Figure 3:Diagramme de cas d’un client.....................................................................................7
Figure 4:Diagramme de cas du webmaster du site web.............................................................7
Figure 5:Interface Home pour visiteur.....................................................................................11
Figure 6: interface Shop pour veste le vision...........................................................................12
Figure 7:page carte pour inspecter le panier............................................................................12
Figure 8:page Search pour rechercher un produit....................................................................13
Figure 9:page registre pour l’inscription de client...................................................................13
Figure 10:page login pour connecter sur le plateforme............................................................14
Figure 11: page home pour viser le produit.............................................................................14
Figure 12: Interface shop pour l’admin....................................................................................15
Figure 13:Interface User pour gérer les client..........................................................................16
Figure 14:interface ordres pour gérer les ordres......................................................................16
Figure 15: interface Product pour gérer le produit...................................................................17
Figure 16:Interface catégories pour gérer les catégories de produit........................................17
Figure 17:Interfaces cart pour gérer le panier (admin).............................................................18
Figure 18:Interface Search pour chercher un produit...............................................................18
Figure 19:Interface home pour naviguer les produits..............................................................19
Figure 20:Interface shop pour naviguer et ajouter des produits aux paniers............................19
Figure 21:Interface ordres pour prévision la commande..........................................................20
Figure 22:Interface cart pour la panier du client......................................................................20
Figure 23:Interface Search pour rechercher un produit............................................................21
 Introduction Générale

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 boutiques en ligne sont depuis des années,
largement conseillés pour les sociétés qui se basent sur la vente des produits et même des
services Ces types de sites web représentent un dispositif global fournissant aux clients un
pont de passage à l’ensemble des informations, des produits, et des services à partir d’un
portail unique en rapport avec son activité. Les sites de vente en ligne permettent aux clients
de profiter d’une foire virtuelle disponible est quotidiennement mise à jours sans la moindre
contrainte, ce qui leur permettrai de ne jamais rater les coups de cœur, ainsi Une foire sans
problèmes de distance géographique, ni d’horaire de travail ni de disponibilité de transport.
D’une autre part ces sites offrent à la société de profiter de cette espace pour exposer ses
produits à une plus large base de clientèle. Le présent rapport, qui expose ce projet, est
composé de quatre chapitres structurés comme suit :

Dans le premier chapitre, je vais présenter l’entreprise dans laquelle j’ai effectué
mon stage ensuite je vais présenter le contexte de ce dernier. Le deuxième chapitre sera
consacré à l’analyse des besoins fonctionnels de projet. Dans le troisième chapitre, une étude
de la conception est réalisée. Finalement, au quatrième chapitre je vais étudier
l’implémentation de l’application, en décrivant l’environnement matériel et logiciel, et
donner un aperçu sur les interfaces réalisées.

1
Rapport du stage de perfection ISET KR 2020/2021
 Chapitre I : Cadre du stage

Introduction

Dans ce chapitre nous allons aborder la présentation générale de notre projet Amado,
tout d’abord une présentation de l’organisme d’accueil, et par la suite, une présentation du
cadre du stage avec la problématique dégagée, l’étude de l’existant, la solution proposée et
la planification du projet

I. Présentation de la société
1. Présentation générale sur la société :
 Présentation de la société :

IT Gate est un groupe de Développement de Logiciels et de Services

Informatiques créé en 2015. Il est spécialisé dans la Création de Site Internet Vitrine,
la Création d'Applications Web et Mobile, le Graphisme, le Community Management,
le Référencement Web, avec une forte composante créative et technologique.

 Mission
Fournir des services informatiques personnalisés pour aider ses clients quelle que soit leur
taille, améliorer leurs capacités en termes d'agilité et de réactivité et faire face aux défis de la
transformation numérique.

 Localisation

Figure 1:Emplacement géographique de la société ITGAT

2
Rapport du stage de perfection ISET KR 2020/2021
  Domaines :

Développement Web et Mobile

Référencement, Infogérance et Réseaux.

Formation, Systèmes Embarqués.

Design Graphique.

Web Développement et Mobile Développement

2. Les départements et les services 

 Les Départements
 Départements graphiques.
 Départements vidéo et montage.
 Départements développements.

 Le service
 Développement web et applications mobile
 Community management
 Référencement naturel et payant
 Design multimédia et chartes graphiques
 Stratégie marketing digital
 Enregistrement du son et mixage

II. Contexte de stage

L'objectif au cours de ce stage est de concevoir et développer un projet défini par un site
web commercial de vente en ligne Amado avec le langage [Link] et [Link].

3
Rapport du stage de perfection ISET KR 2020/2021
 Chapitre II: Specification des besoins

Introduction

La spécification et l’analyse des besoins constituent une étape essentielle et

importante dans le développement d’un système informatique. En effet, elle permet de
mieux comprendre le travail demandé en dégageant les besoins des différents
utilisateurs que le système doit accomplir.

I. Besoins fonctionnels 
Les besoins fonctionnels se présentent en grandes parties
- Exposition des produits ainsi que leurs prix et caractéristiques.
- Inscription des clients.
- Ajout des produits choisis au panier.
- Confirmation de la commande.

II. Besoins non fonctionnels 

 Ergonomie : notre application répondre à des normes ergonomiques : Interfaces
graphique conviviale, une application instructive pour la facilité d’utilisation.
 Sécurité
 Extensibilité : Le système doit être extensible afin que nous puissions ajouter à
tout moment autres fonctions.
 Sécurité l’application doit respecter la confidentialité des données, une
authentification est donc requise.

4
Rapport du stage de perfection ISET KR 2020/2021
III. Méthodologie de conception :

Pour faciliter notre tâche nous avons recours au langage de modélisation unifié
(UML : Unified Modelling Language) c’est une notation qui permet de modéliser un
problème de façon standard. Ce langage est né de la fusion de plusieurs méthodes
existantes auparavant, et il est devenu une référence en termes de modélisation objet, à
un tel point que sa connaissance devienne indispensable pour un développeur.

IV. Les logiciels utilisés

• J’ai utilisé « Postman » pour teste le backend.

• J’ai choisi « Mongodb » comme base de données Mysql.

• Pour le développement de l’application web j’ai utilisé « Visual Studio Code»

Conclusion

Dans ce chapitre j’avais présenté les besoins fonctionnels et non fonctionnels de

l’application.

5
Rapport du stage de perfection ISET KR 2020/2021
 Chapitre III: Conception

Introduction

Après la spécification détaillée des principaux besoins, nous passons à l’étape de

conception qui permet de bien mener la phase d’implémentation.

I. Diagrammes de cas d’utilisation de notre site web

1. Diagramme de cas d’utilisation d’un visiteur

Avant de devenir client, un internaute ne possède que la possibilité de consulter le

catalogue des produits disponibles dans le stock du fournisseur et la possibilité de
s’inscrire pour devenir client sur notre site web.

Figure 2:Diagramme de cas d’un visiteur

6
Rapport du stage de perfection ISET KR 2020/2021
 2. Diagramme de cas d’utilisation d’un client

Figure 3:Diagramme de cas d’un client

Après l’inscription, le visiteur devient client. Il est donc apte de continuer toute une
procédure d’achat en ligne sur notre site.

3. Diagramme de cas d’utilisation du webmaster du site web

Figure 4:Diagramme de cas du webmaster du site web

Le terme webmaster de site web désigne communément celui qui est chargé
d'un site web. Il gère toute la mise en place technique et Parfois la mission éditoriale,
il doit gérer au jour le jour la technique et mettre à jour le contenu du site web.

7
Rapport du stage de perfection ISET KR 2020/2021
 Conclusion

Dans ce chapitre, j’avais essayé de bien présenter les différents diagrammes

conceptuels du projet. Ces diagrammes vont être la base sur laquelle j’avais réalisé mon
projet .Le chapitre suivant intitulé réalisation, nous permettrai de présenter l’environnement
matériel et logiciel de développement ainsi que des imprimes écrans détaillées de notre
application.

8
Rapport du stage de perfection ISET KR 2020/2021
 Chapitre VI : Réalisation

Introduction

Dans ce dernier chapitre de ce rapport à la partie réalisation, je vais présenter dans un

premier lieu l’environnement matériel et logiciel de développement et les outils de travail.
Par la suite, je vais décrivais la phase d’implémentation en se basant sur quelques interfaces.

I. Environnement de travail
1. Environnement matériel
Pour la réalisation du projet, j’ai utilisé un pc portable :

• Processor: AMD Ryzen 5 5600H with Radeon Graphics 3.30 GHz

• RAM : 12.0 GB
• System type : 64-bit operating system, x64-based processor
• Graphic Card : Nvidia Rtx 3050

2. Environnement logiciel et langage :

A. Environnement logiciel

Postman est une application permettant de tester des API, créée en 2012 par
Abhinav Asthana, Ankit Sobti et Abhijit Kane à Bangalore pour répondre à
une problématique de test d'API partageable.

Visual Studio Code est un éditeur de code extensible

développé par Microsoft pour Windows, Linux et macOS.
Les fonctionnalités incluent la prise en charge du débogage,

9
Rapport du stage de perfection ISET KR 2020/2021
 la mise en évidence de la syntaxe, la complétion intelligente du code, les
snippets, la refactorisation du code et Git intégrer.
[Link] est une plateforme logicielle libre en JavaScript, orientée vers
les applications réseau évènementielles hautement concurrentes qui
doivent pouvoir monter en charge.

MongoDB Compas est un client graphique pour MongoDB. Compas

se connecte à votre cluster MongoDB et présente deux onglets
Databases  et Performance. 

B. Environnement langage

L’HyperText Markup Langage, généralement abrégé HTML, est

le langage de balisage conçu pour représenter les pages web.

Les feuilles de style en cascade, généralement appelées CSS, forment

un langage informatique qui décrit la présentation des
documents HTML et XML

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 [Link] et [Link].

[Link] est un framework pour construire des applications web basées sur
[Link]. C'est de fait le framework standard pour le développement de
serveur en [Link]

10
Rapport du stage de perfection ISET KR 2020/2021
Mongoose est l'un des orms qui nous offre la possibilité d'accéder aux données Mongo avec
des requêtes faciles à comprendre. Mongoose joue un rôle d'abstraction sur votre modèle de
base de données.

II. Enchaînement des écrans

Interface Pour Visiteur

Figure 5:Interface Home pour visiteur

11
Rapport du stage de perfection ISET KR 2020/2021
 Figure 6: interface Shop pour veste le vision

Figure 7:page carte pour inspecter le panier

12
Rapport du stage de perfection ISET KR 2020/2021
 Figure 8:page Search pour rechercher un produit

Figure 9:page registre pour l’inscription de client

13
Rapport du stage de perfection ISET KR 2020/2021
 Figure 10:page login pour connecter sur le plateforme

Interface Pour Admin

Figure 11: page home pour viser le produit

14
Rapport du stage de perfection ISET KR 2020/2021
 Figure 12: Interface shop pour l’admin

Figure 13:Interface User pour gérer les client

15
Rapport du stage de perfection ISET KR 2020/2021
 Figure 14:interface ordres pour gérer les ordres

Figure 15: interface Product pour gérer le produit

16
Rapport du stage de perfection ISET KR 2020/2021
 Figure 16:Interface catégories pour gérer les catégories de produit

Figure 17:Interfaces cart pour gérer le panier (admin)

17
Rapport du stage de perfection ISET KR 2020/2021
 Figure 18:Interface Search pour chercher un produit

Interface Pour Utilisateur

Figure 19:Interface home pour naviguer les produits

18
Rapport du stage de perfection ISET KR 2020/2021
 Figure 20:Interface shop pour naviguer et ajouter des produits aux paniers

Figure 21:Interface ordres pour prévision la commande

19
Rapport du stage de perfection ISET KR 2020/2021
 Figure 22:Interface cart pour la panier du client

Figure 23:Interface Search pour rechercher un produit

Conclusion

Chapitre est consacré à la présentation de résultat du projet. J’avais décrit en premier

lieu les plates-formes matérielles et logicielles qui m'aide à construire l'application.
Finalement j’avais donné une vue d'ensemble sur le travail réalisé en donnant des captures
écrans et des explications concernant chaque interface.

20
Rapport du stage de perfection ISET KR 2020/2021
 Conclusion générale
Notre travail consiste à concevoir et à réaliser une application web permettant
essentiellement la gestion des artisans dans les différents domaines afin de satisfaire les désirs
des clients.

Ce projet nous a donné l’opportunité de travailler sur un sujet complet depuis la phase
de conception jusqu’à la phase de réalisation de l’application.

En effet, tout au long de cette période réservée au projet nous avons pu concevoir et
réaliser les différents modules pour répondre correctement aux exigences du sujet.

On peut conclure que le travail effectué, dans le cadre de ce projet de perfectionnement.

Nous avons développé des interfaces qui nécessitent une étude des différentes
techniques d’interfaçage en HTML, CSS java script.

A la fin de ce projet nous devons signaler que notre application n’était qu’un simple
essai afin de résoudre les problèmes qu’on a rencontré dans la gestion des tâches. Sa
réalisation est très intéressante car elle nous a permis de mettre en pratique des nouvelles
notions (Conception UML) et de nous familiariser avec le monde professionnel en touchant
de plus près la vie professionnelle.

21
Rapport du stage de perfection ISET KR 2020/2021
 Netographie

[Link] tutoriel ( JS , Bootstrap ) .

[Link] documentation Bootstrap
[Link] forum des cours
[Link]

22
Rapport du stage de perfection ISET KR 2020/2021