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 IT GATE 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...............................................................................2

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

I. Titre du projet...............................................................................................................3

II. Lieu du Projet............................................................................................................3

III. Besoins
fonctionnels …………………………………………………………………..5

IV. Besoins non fonctionnels………………………………………………………………3

V. Méthodologie de conception…………………………………………………………..3

VI. Les logiciels utilisés....................................................................................................4

Chapitre III : Analyse & Conception.........................................................................................5

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

Chapitre IV:Réalisation..............................................................................................................7

I. Environnement de travail................................................................................................7

1. Environnement matériel..............................................................................................7

2. Environnement logiciel et langage :............................................................................7

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

Conclusion générale...............................................................................................................19
 Liste des figures

Figure 1:Diagramme de cas d’un visiteur..................................................................................5

Figure 2:Diagramme de cas d’un client.....................................................................................5
Figure 3:Diagramme de cas du webmaster du site web.............................................................6
Figure 4:Interface Home pour visiteur.......................................................................................9
Figure 5: interface Shop pour just le vision...............................................................................9
Figure 6:page cart pour inspecter le panier..............................................................................10
Figure 7:page Search pour rechercher un produit....................................................................10
Figure 8:page register pour linscription de client.....................................................................11
Figure 9:page login pour connecter sur le platforme...............................................................11
Figure 10: page home pour viser le produit.............................................................................12
Figure 11: Interface shop pour ladmin.....................................................................................12
Figure 12:Interface User pour gerer les client..........................................................................13
Figure 13:interface orders pour gerer les orders......................................................................13
Figure 14: interface product pour gerer les produit..................................................................14
Figure 15:Interface categories pour gerer les categories de produit........................................14
Figure 16:Interfaces cart pour gerer le panier (admin).............................................................15
Figure 17:Interface Search pour chercher un produit...............................................................15
Figure 18:Interface home pour naviguer les produits..............................................................16
Figure 19:Interface shop pour naviguer et ajouter des produit aux panier...............................16
Figure 20:Interface orders pour previsioné la commande........................................................17
Figure 21:Interface cart pour la panier du client......................................................................17
Figure 22:Interface Search pour rechercher un produit............................................................18
 Introduction Générale

Personne ne peut nier l'importance de l'informatique dans notre société, L’informatique

est considérée comme un moyen indispensable au quotidien des sociétés modernes, présent
dans tous les secteurs de l’activité : politique, économique, administrative et culturelle... En
plus, grâce à l'émergence des technologies mobiles, les développements embarqués, le
développement des applications mobiles et la création des plateformes web sont de plus en
plus demandés sur le marché.

La détention d'un « smartphone » est désormais indispensable à la majorité des

nouvelles générations et surtout les jeunes. D'ailleurs le téléphone n'occupe plus uniquement
la position d’un simple outil de communication, mais plus encore, il participe à l'amélioration
du quotidien des gens à travers diverses applications.

De nos jours il a une mal coordination entre les artisans et les clients dans notre société d’une
part, il n’est pas évident de trouver des personnes qualifiées dans un temps limité afin de
rendre service ou bien de donner l’aide en cas d’urgence. D’autre part, il est difficile pour les
artisans de faire connaitre leurs travaux dans la vie professionnelle à fin d’être demandé
partout.

Alors via le smartphone, la tablette, les réseaux sociaux, nous utilisons en permanence
les différentes applications Web pour faciliter notre vie. D’où nait l’idée de développer une
application utile et l’installer sur les smartphones permettant tout d’abord de satisfaire les
besoins de clients en leurs offrant les services désirés par l’intermédiaire des artisans
correspondants à des missions bien déterminées. Ensuite, nous avons affecté à chaque artisan
inscrit sur la plateforme des missions à fin d’augmenter leurs revenues et bien gérer leurs
temps du travail, et nous n’oublions pas la facilité du contact entre les artisans et les clients.

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

Cadre du stage

I. Présentation de la société
1. Présentation générale sur la société :
• Nom de l’entreprise : IT Gate

• A propos : 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 : Sousse

• Taille de l’entreprise : 11-50 employés

• Domaines : Développement Web et Mobile, Référencement, Infogérance et Réseaux,

Formation, Systèmes Embarqués, Design Graphique, Infography, Web Marketing,
Web Development et Mobile Development

2. Les départements et les services 

A. Les Départements
 Départements graphiques.
 Départements vidéo et montage.
 Départements développements.
B. Les 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

2
Rapport du stage de perfection ISET KR 2020/2021
 Chapitre II

Spécification des besoins

I. Titre du projet

Conception et développement d’un site web de e-commerce.

I. Lieu du Projet

Ce travail va être réalisé au sein de la boite de production IT Gate , dans le cadre d’un
projet de perfectionnement.

II. 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.

III. 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.

3
Rapport du stage de perfection ISET KR 2020/2021
IV. 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.

V. Les logiciels utilisés

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

• J’ai choisi « Mongodb » comme base de donnée nosql.

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

4
Rapport du stage de perfection ISET KR 2020/2021
Chapitre III

Analyse & Conception

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

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 1:Diagramme de cas d’un visiteur

Diagramme de cas d’utilisation d’un client

5
Rapport du stage de perfection ISET KR 2020/2021
 Figure 2: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.

Diagramme de cas d’utilisation du webmaster du site web

Figure 3: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.

6
Rapport du stage de perfection ISET KR 2020/2021
Chapitre VI

Réalisation

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

7
Rapport du stage de perfection ISET KR 2020/2021
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, la mise en évidence de la syntaxe, la
complétion intelligente du code, les snippets, la refactorisation du code et
Git intégrer.
Node.js 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 Compass est un client graphique pour MongoDB. Compass se

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

B. Environnement language

L’HyperText Markup Language, 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

8
Rapport du stage de perfection ISET KR 2020/2021
 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 et React.js.

Express.js est un framework pour construire des applications web basées sur
Node.js. C'est de fait le framework standard pour le développement de
serveur en Node.js

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 4:Interface Home pour visiteur

9
Rapport du stage de perfection ISET KR 2020/2021
 Figure 5: interface Shop pour just le vision

Figure 6:page cart pour inspecter le panier

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

Figure 8:page register pour linscription de client

11
Rapport du stage de perfection ISET KR 2020/2021
 Figure 9:page login pour connecter sur le platforme

Interface Pour Admin

Figure 10: page home pour viser le produit

12
Rapport du stage de perfection ISET KR 2020/2021
 Figure 11: Interface shop pour ladmin

Figure 12:Interface User pour gerer les client

13
Rapport du stage de perfection ISET KR 2020/2021
 Figure 13:interface orders pour gerer les orders

Figure 14: interface product pour gerer les produit

14
Rapport du stage de perfection ISET KR 2020/2021
 Figure 15:Interface categories pour gerer les categories de produit

Figure 16:Interfaces cart pour gerer le panier (admin)

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

Interface Pour Utilisateur

Figure 18:Interface home pour naviguer les produits

16
Rapport du stage de perfection ISET KR 2020/2021
 Figure 19:Interface shop pour naviguer et ajouter des produit aux panier

Figure 20:Interface orders pour previsioné la commande

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

Figure 22:Interface Search pour rechercher un produit

18
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.

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

www.w3schools.com tutoriel ( JS , Bootstrap ) .

www.bootstrap.net documentation Bootstrap
www.stackoverflow.net forum des cours
www.github.com

20
Rapport du stage de perfection ISET KR 2020/2021