RAPPORT Stage Final
RAPPORT Stage Final
RAPPORT Stage Final
1
Liste des abréviations
Abréviation Désignation
JS JavaScript
HTML HyperText Markup Language
SARL Société à Responsabilité Limitée
GSM Système global pour les communications
mobiles
CSS Cascading Style Sheet
SSD Solid-State Drive
IDE Integrated Development Environment
2
Dédicaces
À nos parents pour leur affection, leurs prières et pour lesquelles aucune dédicace ne saurait
exprimer nos sentiments de reconnaissance de gratitude et de dévouement.
À nos professeurs pour leurs conseils et leurs efforts afin de nous assurer une formation solide.
À toutes les personnes qui ont contribué à la réussite de notre stage et qui nous ont aidés lors de la
rédaction de ce rapport.
SALTANI AMINE.
3
Remerciements
Avant d’entamer toute démarche relative à ce rapport, nous souhaitons exprimer notre gratitude envers
Dieu le tout puissant qui par sa bienveillance et son amour a été avec nous depuis le début jusqu’à la
concrétisation de ce projet.
Présenter ce travail au travers de ce rapport est avant tout une occasion pour nous d’exprimer notre
reconnaissance envers toutes les personnes qui ont été là pour nous soutenir de manière inconditionnelle.
Nous tenons avec une très grande rigueur, exprimer avec sincérité et bienveillance notre gratitude envers
notre encadrant, Mr A.ELOUARDI, pour son soutien indéfectible, ses conseils avisés, et son influence
positive sur chacun des membres de notre groupe, dont le progrès est clairement perceptible.
Nous remercions vivement l’ESTD, son corps administratif, ses enseignants et surtout son directeur Mr
MAHANI ZOUHIR pour l’opportunité qu’ils nous ont donnée de mettre en pratique tout ce que nous
avons appris dans ce stage.
Ainsi, nous adressons nos extrêmes gratitudes aux jurys de notre soutenance de projet de stage PROF M.
HOUMER et PROF F.HASSINE qui ont accepté d'évaluer notre travaille
Nous voulons remercier nos camarades de deuxième année pour tout le soutien moral et physique qu’ils
nous ont apporté dans ce stage. Enfin, nous disons merci à chaque membre de ce groupe pour le travail
accompli. Certes ce n’était pas facile mais chacun de nous a donnés son maximum pour l’aboutissement de
ce projet durant le stage.
4
SOMMAIRES
Introduction ......................................................................................................................................6
Conclusion ..........................................................................................................................................27
Webographie ......................................................................................................................................32
5
Introduction
Nous avons eu le privilège d'effectuer notre stage de fin d'études au sein de l'entreprise B2B2C ABDO, une
SARL spécialisée dans le transport par conduite, basée à Dakhla, au Maroc. Fondée en 2021, cette
entreprise se distingue par son engagement envers la qualité et la satisfaction de sa clientèle.
Au cours de notre stage, nous avons contribué au développement d’un web application de gestion de stock
pour B2B2C ABDO.
Notre web application propose un Dashboard statique spécialement conçu pour les administrateurs. Il offre
une vue détaillée et visuellement attrayante des données clés, telles que le nombre de clients, le total des
colis, le graphique des bénéfices par client et le pourcentage des états des colis.
Les administrateurs peuvent également accéder à des fonctionnalités telles que la liste des clients, l'ajout de
clients et la facturation. Cela leur permet de suivre facilement les performances de l'entreprise et de prendre
des décisions éclairées.
6
Chapitre 1
Présentation de l’organisme et
la conception
7
Présentation de l’organisme
Notre stage de fin d'études s'est déroulé au sein de l'entreprise B2B2C ABDO. Cette société,
créée en 2021, opère en tant que SARL dans le secteur du transport par conduite. Elle est
enregistrée sous le numéro de registre de commerce 19791 et est située dans la ville de Dakhla.
B2B2C ABDO se distingue par son engagement envers la qualité et la satisfaction de sa
clientèle. La société est entièrement détenue par la partie marocaine, avec un capital de
100.000,00DHS. Son siège social, situé à l'adresse suivante : Imm Rouge, Rue Elatf, Nr 546,
Dakhla, est le centre névralgique de ses opérations.
Sous la direction de M. Abdelghafour Elouardi, B2B2C ABDO s'est forgé une réputation
solide dans l'industrie du transport par conduite. L'entreprise vise à fournir des services de qualité et
à répondre aux besoins spécifiques de ses clients.
Pour toute demande d'information ou de contact, B2B2C ABDO met à disposition les
coordonnées suivantes : GSM : 0761816135, Email : [email protected]. Vous pouvez
également consulter leur site web www.alloabdo.com pour en savoir plus sur leurs services et leur
philosophie d'entreprise.
Ce rapport de stage a pour objectif de présenter nos observations et nos expériences au sein de
cette entreprise dynamique et de mettre en lumière les activités, les processus et les défis auxquels
nous avons été confrontés pendant cette période passionnante de notre parcours d'études.
1. Description de l'organisme
ALLOABDO
NOM DE LA SOCIETE ALLOABDO
ACTIVITE PRINCIPALE TRANSPORT PAR
CONDUITE
Abdelghafour ELOUARDI
NOM DU DIRIGEANT
8
a) Organigramme
Figure 1:organigramme
b) Cas étudié
Cet organigramme représente les différents rôles au sein de l'entreprise. Le gérant occupe un rôle de
supervision et de direction générale. Ensuite, il y a un social seller qui se charge de la vente sur les réseaux
sociaux. Un responsable commercial est divisé en deux branches, l'une spécifiquement pour la vente dans
le secteur alimentaire, et l'autre pour la vente express. Il y a également un service de confirmation qui traite
les demandes et les confirmations des clients. Un social media manager est en charge de la gestion des
médias sociaux de l'entreprise. Enfin, il y a un poste de réception et suivi pour gérer les communications
entrantes et le suivi des clients.
9
2. Le cadre général
Dans le cadre de ma formation en génie informatique, il est primordial d'effectuer un stage dans
un cadre professionnel. Ce projet sera le fruit de ma formation.
Dans le cadre de notre stage chez B2B2C ABDO, nous avons développé un site web visant à améliorer la gestion
du stock de l'entreprise. Notre objectif était d'optimiser les opérations logistiques en permettant le suivi en temps
réel des niveaux de stock, des mouvements de produits et des commandes.
a) Critique de l'existant
Dans le cadre de notre stage chez B2B2C ABDO, notre projet principal était de développer un
système de gestion du stock pour l'entreprise Allo Abdo. L'objectif était de mettre en place une
plateforme en ligne permettant de suivre et de gérer efficacement les niveaux de stock, les
mouvements de produits, ainsi que les commandes et les livraisons.
Ce projet visait à améliorer la traçabilité des produits, à optimiser les opérations logistiques et à
faciliter la prise de décision au sein de l'entreprise
b) Présentation du sujet
Notre travail consistait à concevoir et développer une plateforme en ligne qui permettrait à Allo
Abdo de gérer en temps réel les niveaux de stock, les mouvements de produits, ainsi que les
commandes et les livraisons.
Nous avons intégré des fonctionnalités telles que la génération de rapports, la gestion des
fournisseurs et la traçabilité des produits.
Le projet de gestion des stocks pour l'entreprise Allo Abdo doit offrir les fonctionnalités suivantes :
- . Performance optimale :
11
5. Analyse et conception
La phase de la conception est la phase initiale de la création de la mise en œuvre de notre projet. En effet,
il représente une étape importante de réflexion dans le cycle du développement du logiciel. Dans ce
chapitre nous allons présenter en détails la conception à travers des diagrammes de Cas d’utilisation,
diagramme de séquence
a) Le diagramme de cas d’utilisation :
Les diagrammes de cas d’utilisation sont des outils visuels utilisés dans l’analyse et la conception des
systèmes logiciels. Ils permettent de représenter les interactions entre les acteurs externes et le système en
identifiant les fonctionnalités et les actions spécifiques que le système doit fournir. Les acteurs représentent
les entités externes, tandis que les cas d’utilisation décrivent les différentes actions et fonctionnalités du
système. Ces diagrammes sont utiles pour comprendre et communiquer les exigences du système de
manière claire et concise.
12
b) Diagramme de séquence :
Le diagramme de séquence est un outil de modélisation utilisé pour représenter la séquence des
interactions entre les objets ou acteurs d’un système. Il montre comment ces entités interagissent au fil du
temps pour accomplir une fonctionnalité spécifique. Les objets ou acteurs sont représentés par des boîtes
ou des lifelines, et les messages échangés entre eux sont représentés par des flèches. Le diagramme de
séquence permet de visualiser clairement l’ordre chronologique des actions et des communications entre
les entités, ce qui facilite la compréhension et la conception du système.
Dans le diagramme de séquence, l’administrateur commence par choisir une entreprise en sélectionnant
une période spécifique. Ensuite, l’application web reçoit cette sélection et affiche les résultats
correspondants, tels que les données liées à cette entreprise et à la période spécifiée.
Ensuite, l’administrateur peut choisir un modèle de facture parmi ceux disponibles dans L’application web.
Une fois le modèle sélectionné, l’application web génère la facture en utilisant les données de l’entreprise
et de la période sélectionnée, puis affiche la facture à l’administrateur.
Enfin, l’administrateur a la possibilité de télécharger la facture générée sur son appareil, lui permettant
ainsi de l’enregistrer ou de la partager selon ses besoins.
13
Figure 5:diagramme de séquence 2/2
Dans le diagramme de séquence, l'administrateur saisit des informations dans l'interface connexion.
Ensuite, les données sont transmises au contrôleur d’authentification pour vérification. Après vérification
de la conformité des informations, la base de données est alors interrogée au niveau du système et une
réponse est retournée sous forme de structure de données que nous avons appelée message.
Si les champs sont ne sont pas conformes ou si la réponse retourner par le système est vide alors le
message d’erreur correspondant est transmis à l‘interface d’authentification via la création d’un objet
appelé erreur d’authentification. Ce message d’erreur est affiché au niveau de l’interface de connexion
Si les informations fournies sont correctes c’est-à-dire si elles existent dans la base de données, des
variables de session sont alors créées à travers la fonction compte Utilisateur () qui retourne le résultat de
l’interrogation de la base de données. Ceci déclenche la création d’un objet appelé tableau de bord
(Dashboard). Dans la pratique l’administrateur est redirigé vers la page Dashboard
14
c) Diagramme de Gantt
Le diagramme de Gantt est un outil de gestion de projet utilisé pour planifier, organiser et suivre les
différentes tâches d'un projet sur une période donnée. Il permet de visualiser les dépendances entre les
tâches, les échéances et la durée de chaque activité.
Le diagramme de Gantt est un outil de gestion de projet utilisé pour planifier, organiser et suivre les
différentes tâches d'un projet sur une période donnée. Il permet de visualiser les dépendances entre les
tâches, les échéances et la durée de chaque activité.
Le diagramme de Gantt est un outil utile pour planifier et suivre l'avancement d'un projet. Il permet de
visualiser les jalons, les délais et les dépendances entre les tâches, ce qui facilite la coordination et la
gestion des ressources. De nombreux logiciels de gestion de projet proposent des fonctionnalités pour créer
et mettre à jour des diagrammes de Gantt de manière dynamique.
15
Chapitre 2
Environnement de développement et
présentation de l’application
16
Environnement de développement et présentation de l’application
1. Environnement matériel
Pour développer le site web, j’ai utilisé comme environnement matériel, un ordinateur HP qui
possède comme caractéristiques :
Mémoire Vive : 8 Go.
Disque Dur : 250 Go SSD.
Processeur : Core i5 7th génération.
Type de système : Windows 10
2. Environnement logiciel :
Figure 7:staruml
17
XAMPP : Est un logiciel qui fournit un environnement de
développement web complet, regroupant Apache, MySQL, PHP et
Perl. Il est souvent utilisé pour créer et tester des applications web
localement avant de les déployer sur un serveur en ligne. XAMPP est
disponible en téléchargement gratuit et est compatible avec les
Figure 8:xampp systèmes d'exploitation Windows, MacOs et Linux
PhpMyAdmin : Est une application web utilisée pour gérer les bases de
données MySQL. Elle offre une interface graphique conviviale permettant aux
utilisateurs de créer, modifier et gérer leurs bases de données, tables et
données. PhpMyAdmin simplifie les tâches d'administration en fournissant
une vue d'ensemble de la structure de la base de données et des fonctionnalités
Pour effectuer des opérations courantes sans nécessiter de connaissances
approfondies en SQL.
Figure 9:phpMyAdmin
L'HTML : Est un langage informatique utilisé sur l'internet. Ce langage est utilisé
pour créer des pages web. L'acronyme signifie HyperText Markup Language, ce qui
signifie en français "langage de balisage d'hypertexte". Cette signification porte bien
son nom puisqu'effectivement ce langage permet de réaliser de l'hypertexte à base
Figure 10:html d'une structure de balisage, sa dernière version est HTML5
Figure 11:ccs
Figure 14;JavaScript cette même page, de fournir des informations plus précises ou différentes pour
présenter certains éléments plus distinctement personnalisés.
Ajax : Est une technique de développement web qui permet de mettre à jour
dynamiquement une partie d'une page web sans recharger la page entière. Elle
utilise JavaScript et des requêtes HTTP asynchrones pour échanger des données
avec le serveur. Cela améliore l'expérience utilisateur en permettant des mises à
jour instantanées sans perturber le reste du contenu de la page.
Figure 16:Ajax
4. L’implantation du logiciel
a) Connexion
Ce chapitre présente les captures d’écran illustrant le résultat final de l’application accompagnées des
commentaires explicatifs démontrant en détails l’utilité de chacune des interfaces. L'interface de connexion
de l'administration présente un formulaire où les administrateurs peuvent entré leurs informations
d'identification. Elle se compose généralement des éléments suivants :
Un champ "Nom d'utilisateur" : C'est un champ de texte où les administrateurs peuvent saisir leur nom
d'utilisateur ou leur identifiant unique associé à leur compte d'administration.
Un champ "Mot de passe" : C'est un champ de texte masqué où les administrateurs peuvent entrer leur mot
de passe confidentiel. Le contenu du champ est généralement masqué par des astérisques ou des points
pour des raisons de sécurité.
Un bouton "Se connecter" : C'est un bouton permettant aux administrateurs de soumettre leurs
informations d'identification pour accéder à leur compte d'administration. Lorsque les administrateurs
cliquent sur ce bouton, les informations sont envoyées au serveur pour vérification.
19
Figure 17:formulaire d’authentification
b) Le Dashboard statique
Le Dashboard statique de notre application est spécifiquement conçu pour les administrateurs afin de leur
fournir une vue détaillée et visuellement attrayante des données clés. Il offre une interface conviviale et
intuitive qui permet aux administrateurs de surveiller les performances et les tendances de leur activité.
Vous trouverez différentes informations et graphiques pour les administrateurs. Voici les éléments que
vous avez mentionnés :
20
Figure 19:Dashboard. 2/2
1-Nombre de clients : Le Dashboard affiche le nombre total de clients enregistrés dans l'application. Cela
donne aux administrateurs une indication de l'ampleur de la base de clients.
2-Bénéfices en dirhams : Le Dashboard présente les bénéfices totaux générés jusqu'à présent, exprimés en
dirhams.
3-Colis total : Le Dashboard indique le nombre total de colis enregistrés dans le système. Cela permet de
suivre le volume de travail et d'avoir une vue d'ensemble du nombre total de colis traités.
4-Total colis livrés : Le Dashboard fournit le nombre total de colis qui ont été livrés avec succès. Cette
information est essentielle pour suivre les performances de livraison et mesurer l'efficacité du processus.
5-Graphique des bénéfices par mois de l'année en cours : Le Dashboard présente un graphique qui
représente les bénéfices mensuels de l'année en cours. Cela permet aux administrateurs de visualiser les
tendances de revenus mensuelles et d'identifier les mois les plus performants.
6-Graphique du pourcentage des états des colis : Le Dashboard comprend un graphique qui illustre le
pourcentage des différents états des colis. Par exemple, il peut y avoir des couleurs différentes pour chaque
état, où le vert représente le nombre total de colis annulés, le jaune pour les colis refusés, le bleu pour les
colis livrés, etc. Cela permet aux administrateurs de comprendre rapidement la répartition des états des
colis.
7-Graphique des Bénéfices par Client : Ce graphique présente les bénéfices générés par chaque client. Il
permet aux administrateurs d'identifier les clients les plus rentables et de surveiller l'évolution des
bénéfices au fil du temps.
8-Evolution des colis du jour : Ce graphique affiche l'évolution du nombre de colis traités au cours de la
journée. Il offre une vue dynamique de l'activité des colis et permet aux administrateurs de détecter des
tendances ou des variations importantes.
9-Statistique des colis par mois de l'année en cours : Ce graphique présente les statistiques des colis par
mois de l'année en cours. Cela permet aux administrateurs de suivre les performances mensuelles et de
repérer les variations saisonnières.
Dans notre interface de liste des partenaires de l'entreprise, nous avons créé une section dédiée où les
administrateurs peuvent gérer les partenaires en effectuant différentes actions. Voici les détails et
fonctionnalités de cette interface :
21
Figure 20 : liste des clients.
Recherche par nom : Nous avons inclus un champ de recherche où l'administrateur peut saisir le nom d'un
partenaire spécifique. Cela permet de filtrer rapidement la liste des partenaires en fonction de leur nom.
Suppression de partenaires : Chaque partenaire est représenté par une entrée dans la liste, qui affiche des
informations essentielles telles que le nom, l'e-mail, le téléphone, l'adresse et une image. À côté de chaque
entrée, nous avons ajouté un bouton ou une option permettant à l'administrateur de supprimer le partenaire
correspondant de la liste, nous avons également inclus une autre option ou un autre bouton pour permettre
à l'administrateur de modifier les informations du partenaire.
Informations sur les partenaires : Chaque partenaire affiche les détails pertinents tels que le nom, l'e-mail,
le téléphone et l'adresse. Ces informations permettent à l'administrateur d'identifier facilement les
partenaires et de prendre contact avec eux si nécessaire.
Image du partenaire : Nous avons inclus la possibilité d'ajouter une image représentative pour chaque
partenaire. Cela ajoute une dimension visuelle à l'interface et permet aux administrateurs de mieux
reconnaître les partenaires.
Grâce à cette interface de liste des partenaires, les administrateurs peuvent gérer efficacement les
partenaires de l'entreprise. Ils peuvent effectuer des recherches rapides, supprimer des partenaires
indésirables et accéder facilement aux informations clés de chaque partenaire. Cela facilite la gestion et la
communication avec les partenaires de l'entreprise.
22
d) Ajouter un Client
L'administrateur utilise un formulaire ou une interface de saisie pour fournir ces informations et ajouter le
partenaire à la liste des partenaires de l'entreprise. Une fois les informations saisies et validées, le
partenaire est enregistré dans la base de données de l'application et peut être affiché dans la liste des
partenaires.
e) Les Commandes
23
Figure 23:Commande 2/2
Dans cette interface, l'administrateur dispose de deux options pour afficher les colis :
Afficher la liste des colis reçus : Cette fonctionnalité permet à l'administrateur de consulter uniquement les
colis qui ont été reçus jusqu'à présent. Avec des détails tels que le numéro de colis, nom de l'entreprise, la
date de livraison, nom de destinateur etc. L'administrateur peut utiliser des filtres ou des options de tri pour
faciliter la recherche et l'affichage des colis reçus spécifiques.
Afficher tous les colis : Cette fonctionnalité permet à l'administrateur d'afficher tous les colis enregistrés
dans le système, qu'ils aient été reçus, livrés, refusés ou annulés. Cela fournit une vue complète de tous les
colis traités par l'entreprise. L'administrateur peut également appliquer des filtres ou des options de tri pour
personnaliser l'affichage en fonction des besoins spécifiques.
Ces deux options offrent à l'administrateur la flexibilité de consulter les colis selon différents critères, que
ce soit pour se concentrer uniquement sur les colis reçus ou pour avoir une vue d'ensemble de tous les colis
enregistrés.
24
Figure 25:Ajouter un colis. 2/2
Pour enregistrer un colis, vous devez sélectionner l'entreprise, saisir la référence du colis et indiquer sa
valeur. De plus, vous aurez besoin des informations du client, notamment son nom, prénom, adresse et
numéro de téléphone. Ces détails permettent d'associer le colis au client spécifique et de faciliter la gestion
de la livraison.
g) Facturation
Figure 26:Facturation
Dans l'interface de facturation, l'administrateur doit saisir le nom de l'entreprise pour laquelle la facture est
générée. La facture est ensuite composée des éléments suivants :
Référence : Un identifiant unique attribué au colis ou à la transaction liée à la facture.
Valeur du Colis : Le montant en termes monétaires correspondant à la valeur du colis ou de la transaction.
25
Nom du Récepteur : Le nom de la personne ou de l'entreprise qui a réceptionné le colis ou bénéficié de la
transaction.
Date de réception : La date à laquelle le colis a été reçu ou la transaction a été effectuée.
En utilisant ces informations, l'interface permet à l'administrateur de générer la facture en remplissant les
champs appropriés avec les détails spécifiques.
De plus, l'administrateur a la possibilité de rechercher des colis par période.
h) paramètre
26
Conclusion
Pour conclure, ce stage en tant que développeur au sein de l'entreprise AlloAbdo a été une
expérience extrêmement enrichissante pour notre équipe. Nous avons eu l'opportunité de contribuer
activement au développement de l'application de gestion de stock, ce qui nous a permis de nous
impliquer pleinement dans les activités de l'entreprise et de comprendre les enjeux du secteur de la
logistique et de la gestion des stocks. Nous avons également pu développer nos compétences
techniques et acquérir une expérience précieuse dans le domaine de l'informatique.
27
Table des matières
Introduction ......................................................................................................................................6
Chapitre 1...............................................................................................................................................7
Présentation de l’organisme..................................................................................................................8
1. Description de l'organisme.....................................................................................................8
a) Organigramme .......................................................................................................................9
b) Cas étudié...............................................................................................................................9
Chapitre 2 ............................................................................................................................................16
a) Connexion ............................................................................................................................19
28
b) Le Dashboard statique .........................................................................................................20
e) Les Commandes...................................................................................................................23
g) Facturation ...........................................................................................................................25
h) paramètre .............................................................................................................................26
Conclusion ..........................................................................................................................................27
Webographie ......................................................................................................................................32
29
Liste des figures
30
Liste des Tableaux
Tableau 1:liste des abréviations .......................................................................................................................2
Tableau 2:Description de l'organisation ..........................................................................................................8
Tableau 3:les tache .........................................................................................................................................10
31
Webographie
- https://www.fontawesome.com
- https://www.uigradients.com
- https://www.videvo.net
- https://getcssscan.com/css-box-shadow-examples
- https://www.unsplash.com
- https://css-tricks.com
- https://www.youtube.com/c/SabCode
- https://www.w3schools.com
https://www.pinterest.com
32
33
34
35