Rapport De

Stage

Développement WEB FULL

STACK

Préparé par :
AMINE LAOURAIDI

Encadré par :
Yassine Nadire
 2

Remerciement

Nous tenons à exprimer notre profonde gratitude à toutes les personnes qui ont

contribué, de près ou de loin, à la réalisation de ce travail et à l'élaboration de ce

document. À tous ceux qui, directement ou indirectement, nous soutiennent et nous

encouragent à avancer, nous adressons nos sincères remerciements.

Nous souhaitons témoigner une reconnaissance particulière à Monsieur Yassine

Nadire, qui a eu la gentillesse d’encadrer notre stage chez Lam & HIGH INFO. Sa

précieuse aide et son soutien remarquable ont été inestimables tout au long de notre

parcours.

2
 3

Sommaire

Sommaire

1. Remerciements …………………………………………………………………… 2
2. Introduction………………………………………………………………………… 4
4. Présentation du projet …………………………………… 5
5. Les outils de modélisation utilisés …………………………………… 6-7

5. Les outils de développement utilisés …………………………………… 7-8-9

6. Interfaces de l’application ……………………………………………………9-17
7 Conclusion………………………………………………………………………… 18

3
 4

Introduction

Introduction

Le stage a pour objectif de nous préparer aux défis et aux obstacles que
nous pourrions rencontrer en tant que futurs employés dans une
organisation. Il s'agit d'une période d'immersion active visant à nous
familiariser avec le milieu professionnel. Cette expérience permet de
mettre en pratique les connaissances théoriques acquises au cours de
notre formation et de les enrichir.
Le stage offre un aperçu de la vie professionnelle et de ses multiples
aspects, tels que les relations entre collègues, les rapports
hiérarchiques, la communication interne, et l'ambiance de travail. Le
présent rapport résulte d'un stage effectué au sein de la société Lam &
HighInfo.
Nous souhaitons souligner que la période de stage, du 01/05/2024 au
31/05/2024, a été extrêmement riche et bénéfique. Elle nous a permis
d'observer, de consulter, et d'expérimenter des pratiques qui nous
seront précieuses tant dans notre vie professionnelle que quotidienne.

4
 5

Présentation du projet :
Le projet est une application web d'e-commerce spécialisée dans la

vente de matériel informatique, notamment des ordinateurs portables

et des composants de PC. Cette application comporte plusieurs

fonctionnalités, notamment la visualisation des produits, l'ajout au

panier, l'affichage du panier, les interfaces de connexion et d'inscription

pour les utilisateurs, ainsi que des pages pour les produits favoris et la

recherche de produits. Les utilisateurs peuvent parcourir les différents

produits, ajouter ceux qu'ils souhaitent acheter à leur panier, consulter

leur panier avant de procéder au paiement, et gérer leur compte via les

interfaces de connexion et d'inscription. Les fonctionnalités de

recherche et de favoris permettent une navigation et une gestion de

produits plus personnalisées et efficaces.

5
 6

Les outils de modélisation utilisés :

MERISE est une méthode systématique pour la conception, le développement et

l'implémentation de projets informatiques. Son objectif principal est de concevoir

des systèmes d'information en suivant une séparation claire entre les données et les

traitements, divisés en plusieurs modèles conceptuels et physiques.

Niveau conceptuel :

Modèle Conceptuel des Données (MCD) : Le MCD représente la structure du

système d'information du point de vue des données. Il identifie et spécifie les

dépendances et relations entre les différentes entités du système (par exemple :

clients, commandes, produits). Cela permet de comprendre comment les données

interagissent entre elles.

Niveau logique ou d'organisation :

Modèle Conceptuel des Données (MCD) : Le MCD à ce niveau reprend les

informations du modèle conceptuel, tout en précisant la volumétrie, la structure

détaillée et l'organisation des données telles qu'elles seront implémentées. À ce

stade, on peut obtenir une liste exhaustive des tables qui seront créées dans une

base de données relationnelle, en précisant les attributs et les relations entre elles.

6
 7

La méthode MERISE offre donc une approche méthodique et structurée pour

concevoir et déployer des systèmes d'information robustes, en garantissant une

gestion efficace des données et des processus associés.

Les outils de développement utilisés :

Voici les outils de développement utilisés pour la réalisation du projet

:

1. Visual Studio Code (VS Code)

- Définition : Visual Studio Code est un éditeur de code source

développé par Microsoft, qui prend en charge de nombreux
langages de programmation et est connu pour son efficacité et ses
nombreuses extensions. Il offre des fonctionnalités telles que la
coloration syntaxique, l'autocomplétion, la gestion de version
intégrée, et bien plus encore, facilitant ainsi le développement
d'applications.

2. MySQL

- Définition : MySQL est un système de gestion de base de données

relationnelle open source largement utilisé. Il permet de stocker,
organiser et gérer les données de manière structurée à l'aide du

7
 8

langage SQL (Structured Query Language). MySQL est réputé pour

sa performance, sa fiabilité et sa facilité d'utilisation.

3. Laravel

Définition : Laravel est un framework PHP open source qui facilite le

développement d'applications web en suivant le modèle MVC
(Model-View-Controller). Il offre une structure prête à l'emploi, des
fonctionnalités avancées telles que l'authentification, la gestion des
bases de données, et la gestion des sessions, permettant ainsi de
créer des applications web robustes et sécurisées rapidement.

4. React

- Définition :React est une bibliothèque JavaScript open source

développée par Facebook, utilisée pour construire des interfaces
utilisateur interactives et dynamiques. Basée sur le concept de
composants réutilisables, React permet de créer des interfaces
utilisateur modulaires et performantes, en utilisant un DOM virtuel
pour améliorer l'efficacité des mises à jour de l'interface.

5. XAMPP

- Définition : XAMPP est une distribution Apache facile à installer et

contenant MySQL, PHP et Perl. XAMPP est utilisé pour simplifier le

8
 9

processus de développement et de test d'applications web locales

sur un système d'exploitation Windows, Linux ou macOS. Il comprend
également phpMyAdmin, un outil de gestion des bases de données
MySQL via une interface web.

Ces outils sont largement utilisés dans le développement web

moderne pour leur efficacité, leur fiabilité et leur capacité à
accélérer le processus de développement d'applications web et de
bases de données.

9
 10

Les interfaces de l’application

➢ Interface d’authentification :

l’accès à l’application une page d’authentification s’affiche. Apres

l’authentification autant qu’un administrateur ou un utilisateur
chacun peux accéder aux différentes fonctionnalités de
l’application.

10
 11

➢ Page d’acceuil :

Cette image représente la page d'accueil de l'application, où les

utilisateurs peuvent parcourir différents produits disponibles à
l'achat. Les produits sont organisés en catégories, et chaque produit
est affiché avec son nom, son prix et une image.

11
 12

➢ Page de panier :

Cette image montre la page du panier où les utilisateurs peuvent voir

les produits qu'ils ont ajoutés à leur panier. Elle affiche les détails des
produits, y compris le nom, la description, le prix, et la quantité. Les
utilisateurs ont également la possibilité de supprimer des articles de
leur panier et de procéder au paiement.

12
 13

➢ Page details produit

Cette image montre une page de détails d'un produit spécifique. Elle

fournit une vue plus détaillée d'un produit sélectionné, y compris une

description complète, le prix, et les options pour ajouter le produit au

panier ou le sauvegarder pour plus tard.

➢ Page favoris produit :

13
 14

Une page où les utilisateurs peuvent voir et gérer les produits qu'ils ont
ajoutés à leur liste de favoris. Les utilisateurs peuvent ajouter ou
supprimer des produits de cette liste..

14
 15

➢ Page afficher produit pour admin

La page d'affichage des produits pour l'administrateur dans un site de

commerce électronique est une interface principale permettant à

l'administrateur de gérer efficacement tous les produits disponibles. Elle

offre une vue d'ensemble des produits, où chaque produit est répertorié

avec son nom, sa catégorie, son prix et d'autres détails pertinents.

L'administrateur peut effectuer des actions CRUD (Create, Read,

Update, Delete) sur chaque produit, y compris l'ajout de nouveaux

produits, la modification des détails existants et la suppression des

produits non nécessaires. Cette page est essentielle pour maintenir une

15
 16

base de données de produits précise et à jour, facilitant ainsi une gestion

efficace du stock et des commandes.

➢ page de checkout :

16
 17

Cette page a pour but de permettre aux utilisateurs de vérifier leur

commande, de saisir leurs informations de livraison et de paiement, et
de procéder au paiement final de leur commande.

17
 18

Conclusion

La période de stage chez Lam && HIGH INFO a été

extrêmement enrichissante. Elle nous a permis d'approfondir
les notions théoriques acquises durant notre formation à
l'ISTANTIC de Tanger, tout en élargissant nos connaissances
pratiques et théoriques. Nous avons constaté que les
aspects théoriques et pratiques sont indissociables et se
complètent mutuellement. En outre, nous avons appris que
dans le monde du travail, il ne suffit pas de posséder des
connaissances théoriques ; il est également crucial d'être
sociable, coopératif et de savoir travailler en équipe pour
réussir dans ses tâches. En somme, ce stage a été une
opportunité très précieuse pour nous, malgré sa durée
limitée.

18