Projet de Plateforme E-commerce Y2 GAMING (2023/2024)

Université Moulay Ismail Faculté des Sciences et Techniques Errachidia Filière : Cycle d’Ingénieur en Génie Informatique Module : Développement d’applications Web projet Thème : Conception et Développement d'une Plateforme E-commerce Encadr...

Université Moulay Ismail Faculté des Sciences et Techniques Errachidia Filière : Cycle d’Ingénieur en Génie Informatique Module : Développement d’applications Web projet Thème : Conception et Développement d'une Plateforme E-commerce Encadrée par : Prof. FARHAOUI YOUSSEF Réalisé par : Youness ait ben yssa Youness Arroubi Année Universitaire : 2023/2024 Remerciements : En tout premier lieu, nous souhaitons exprimer notre profonde reconnaissance envers le bon Dieu, Tout-Puissant, pour nous avoir accordé la force nécessaire pour surmonter les épreuves et la détermination pour progresser malgré les difficultés rencontrées. Au nom de Dieu, le Clément et le Miséricordieux, louange à Allah. Nous tenons également à adresser nos plus sincères remerciements au Professeur YOUSSEF FARHAOUI. Sa disponibilité constante, ses conseils éclairés et son soutien infaillible ont joué un rôle crucial dans notre parcours académique. Grâce à sa patience et à son dévouement, il nous a encouragés à poser des questions pertinentes et à approfondir nos connaissances. Son expertise et son expérience ont été une source d'inspiration et ont enrichi notre compréhension des sujets étudiés. Nous sommes particulièrement reconnaissants d'avoir pu bénéficier de sa passion pour l'enseignement, qui transparaît à travers son engagement envers notre réussite. Ses conseils avisés et son suivi attentif ont non seulement renforcé nos compétences académiques, mais ont également contribué à notre développement personnel et professionnel. En conclusion, nous tenons à exprimer notre gratitude infinie envers le Professeur pour son soutien indéfectible et pour avoir partagé avec générosité ses connaissances et son expertise. Merci pour tout ce que vous avez fait pour nous. Table des matières : 1. Introduction------------------------------------------------------------ 2. Présentation du Projet---------------------------------------------- 2.1. Fonctionnalités principales ------------------------------------------------------ 2.2. Technologies utilisées------------------------------------------------------------- 2.3. Autres technologies et outils---------------------------------------------------- 3. Conception du Projet------------------------------------------------ 3.1. Diagramme de cas d’utilisation------------------------------------------------- 3.2. Diagramme de classe------------------------------------------------------------- 4. Guide d’utilisation--------------------------------------------------- 5. Conclusion-------------------------------------------------------------- 1-Introduction : Pour acquérir une bonne et parfaite qualité, la formation théorique seule ne suffit pas. Il est donc xperience de suivre une démarche pratique permettant d’adapter les notions théoriques que nous avons vues au cours de notre formation. À cet effet, afin de valider nos connaissances acquises au fil de notre formation dans le Cycle d’ingénieur en Génie informatique, nous sommes amenés à effectuer un projet de développement d’un e- commerce store. L’objectif de ce projet est de réaliser une application de plateforme e-commerce nommée « Y2 GAMING ». Cette application permettra aux utilisateurs de parcourir, de sélectionner et d’acheter des produits en ligne. Pour ce faire, nous devrons nous appuyer sur les connaissances acquises en matière de développement web, de gestion des bases de données. 2-Présentation du Projet : Y2 GAMING xperie plateforme e-commerce en ligne qui permet aux utilisateurs de parcourir, de sélectionner, et d’acheter des produits via une interface utilisateur intuitive et xperien. Le site a été conçu pour offrir une xperience utilisateur fluide, en mettant l’accent sur la simplicité et l’efficacité des interactions. Voici une description détaillée de son fonctionnement et des technologies utilisées : 2.1 Fonctionnalités principals: 1. Page d'accueil : o Présente les produits phares et les promotions. o Fournit des liens vers les différentes catégories de produits. 2. Catalogue de produits : o Les utilisateurs peuvent parcourir les produits par catégories. o Chaque produit est affiché avec des détails tels que le nom, le prix, une description, et une image. o Possibilité de rechercher des produits par mots-clés. 3. Gestion du panier : o Les utilisateurs peuvent ajouter des produits à leur panier depuis le catalogue ou la page de détails du produit. o Ils peuvent voir les produits dans leur panier, avec des options pour modifier les quantités ou supprimer des articles. o Le total du panier est mis à jour automatiquement. 4. Passation de commandes : o Les utilisateurs peuvent finaliser leur achat en passant une commande. o Le système enregistre les détails de la commande et les informations de l'utilisateur pour le traitement. 5. Compte utilisateur : o Les utilisateurs peuvent créer un compte, se connecter et gérer leurs informations personnelles. o Historique des commandes accessible pour chaque utilisateur connecté. 2.2 Technologies utilisées: Front-end : HTML : Utilisé pour la structure de base des pages web. Tailwind CSS : Utilisé pour la mise en forme et le design des pages. Tailwind permet de créer rapidement des interfaces élégantes et responsive grâce à ses classes utilitaires. JavaScript : Utilisé pour l'interactivité et la manipulation dynamique des éléments du DOM. JavaScript permet de gérer les actions utilisateur comme l'ajout au panier et la modification des quantités de produits. Back-end : PHP : Utilisé pour gérer les requêtes serveur, les sessions utilisateur, et l'interaction avec la base de données. PHP est un langage de script côté serveur qui permet de créer des applications web dynamiques.  MySQL : Utilisé comme système de gestion de base de données. MySQL stocke toutes les informations relatives aux utilisateurs, produits, commandes, et autres données nécessaires au fonctionnement de l'application. 2.3.Autres technologies et outils : Git : Utilisé pour le contrôle de version, permettant une gestion efficace du code source et une collaboration fluide entre les membres de l'équipe. 3-Conception du Projet : 3.1. Diagramme de cas d’utilisation : Un diagramme de cas d'utilisation est une représentation graphique qui illustre les interactions entre les utilisateurs (acteurs) et le système. Il décrit les différentes fonctionnalités que le système doit offrir et les acteurs qui les utilisent. Voici une description des cas d'utilisation principaux pour notre application e-commerce « Y2 GAMING » : Client : Utilisateur du site qui parcourt, sélectionne et achète des produits. Admin : Utilisateur ayant des privilèges pour gérer les produits, les commandes, et les utilisateurs. 3.2.Diagramme de classes: Un diagramme de classes est une représentation statique des classes du système et des relations entre elles. Pour notre application e-commerce « WebStore », voici un diagramme de classes illustrant les principales entités et leurs relations : 4-Guide d’utilisation : Lorsque vous ouvrez l’application web pour la première fois, la Fenêtre Log in s’ouvre: Cas des données correctes: Lorsqu'un utilisateur tente de se connecter à « Y2 STORE», le système vérifie d'abord si les informations d'identification (nom d'utilisateur et mot de passe) sont correctes. Si le mot de passe est correct et que l'utilisateur n'a pas le rôle d'administrateur, il sera redirigé vers la page d'accueil (home page). Si l'utilisateur a le rôle d'administrateur, il sera redirigé vers la page de choix entre la page d’administration et home page. Cas des données incorrectes: Si les informations d'identification sont incorrectes, l'utilisateur sera redirigé vers la page de connexion (log in page). Creation de compte: Si tu n'as pas de compte et que tu veux en créer un, tu peux aller à la page d'inscription. Tu es obligé d'entrer tous les champs. Si l'email existe déjà dans la base de données, un message d'erreur apparaît. On utilise JavaScript asynchrone pour envoyer les données en temps réel à la base de données et vérifier si elles y existent ou non. Aussi, un message d'erreur apparaît si les deux mots de passe ne correspondent pas. Vérification par email : Après la vérification et la validation des données, on redirige vers la page de vérification pour entrer le code envoyé à l'email que vous avez saisi, en utilisant PHP Mailer. Si le code est correct, les données sont ajoutées à la base de donnes avec le mot de passe haché. Page accueil : Si le code est correct, vous êtes redirigé vers la page d'accueil Sur la page d'accueil, vous pouvez voir les promotions, les produits disponibles, ainsi que les options pour ajouter au panier ou supprimer des articles. Filter : Et vous pouvez également filtrer les produits par marque et par prix. Page Paiement: Après avoir sélectionné les produits dans le panier, vous pouvez aller à la page de paiement en cliquant sur le bouton "Commander". Après avoir cliqué sur "order now", la commande sera enregistrée dans la base de données, sera livrée, et les produits seront supprimés du panier. Table commande : Conclusion : En conclusion, ce projet de plateforme de commerce électronique met en œuvre une gamme complète de fonctionnalités pour offrir aux utilisateurs une expérience fluide et sécurisée. De la création de compte à la gestion du panier, en passant par le filtrage des produits et le processus de commande avec paiement intégré, chaque étape est conçue pour être intuitive et efficace.