Université Cadi Ayyad

Ecole Supérieure de Technologie Essaouira

RAPPORT PROJET DE FIN D’ETUDES

PRESENTEE POUR OBTENIR LE TITRE :

DIPLÔME UNIVERSITAIRE DE TECHNOLOGIE

En Génie Informatique (GI)
Département Informatique

Sous le sujet :

Conception et réalisation d’une application

web pour la gestion d’un club Universitaire

Réalisé par : Mariam FAHIM - Oualid HMOUDOU

Encadré par : Mr. GOUNANE Said

Année Universitaire : 2022/2023

 Dédicaces
Nous dédions ce travail, comme preuve de respect, de gratitude, et de reconnaissance à :

Nos familles, pour leur soutien, leur affection, et leur amour inconditionnel.

Notre encadrant Monsieur Said GOUNANE pour son encadrement et son assistance et son
aide précieux.

Les personnes du département génie informatique qui nous ont aidé à améliorer nos
connaissances.

A tous ceux qui ont attribué de près ou de loin à la réalisation de ce projet.

 Remerciements
Premièrement Tout d'abord, nous tenons à exprimer notre gratitude envers Dieu, la source de
toute connaissance.

Nous tenons à remercier toute l’équipe Pédagogique de l’école supérieure de technologie

d’Essaouira et les Intervenants professionnels responsables de la formation génie Informatique.

Avant d'entamer ce projet, nous profitons de l’occasion pour remercier tout d'abord notre
professeur Mr. Said GOUNANE qui n’a pas cessé de nous encourager pendant la durée du
projet, ainsi pour sa générosité en matière de formation et d’encadrement. Nous le remercions
également pour l’aide et les conseils concernant les missions évoquées dans ce projet, qu’il
nous a apporté lors des différents suivis, et la confiance qu’il nous a témoigné.

Merci à tous et toutes.

 Table des matières
Dédicaces ................................................................................................................................................ 2
Remerciements ....................................................................................................................................... 3
Table des matières .................................................................................................................................. 4
Listes Des Figures .................................................................................................................................... 6
Liste Des Tableaux ................................................................................................................................... 7
Introduction Générale ............................................................................................................................. 8
I. Introduction :................................................................................................................................. 10
II. Présentation du club : ................................................................................................................... 10
III. Etude de l’existant :................................................................................................................... 11
A. Description de l’existant :.......................................................................................................... 11
B. Solution proposée : ................................................................................................................... 11
IV. Spécification des besoins : ........................................................................................................ 12
A. Besoins fonctionnels : ............................................................................................................... 12
1. Pour les utilisateurs : ............................................................................................................. 12
2. Pour les administrateurs : ..................................................................................................... 12
B. Besoins non fonctionnels : ........................................................................................................ 12
V. Conclusion : ................................................................................................................................... 13
I. Introduction :................................................................................................................................. 15
II. Acteurs du projet :......................................................................................................................... 15
III. Modélisation UML : ................................................................................................................... 15
A. Diagramme de cas d’utilisation : ............................................................................................... 15
B. Diagramme de séquence pour l’authentification : ................................................................... 17
C. Diagramme de class : ................................................................................................................ 17
IV. Conclusion : ............................................................................................................................... 19
I. Environnement de travail : ............................................................................................................ 21
A. Environnement matériel : ......................................................................................................... 21
B. Environnement logiciel :............................................................................................................ 22
1. Langages de programmations : ............................................................................................. 22
2. Framework : .......................................................................................................................... 23
3. Outils : ................................................................................................................................... 23
II. Présentation des interfaces de l’application : ............................................................................... 25
A. Home page : .............................................................................................................................. 25
B. About Us page : ......................................................................................................................... 26
C. Store : ........................................................................................................................................ 27
D. Contact Us page : ...................................................................................................................... 28
E. Events page : ............................................................................................................................. 29
F. Blog page : ................................................................................................................................. 30
G. Dashboard page : ...................................................................................................................... 30
H. Authentification page : .............................................................................................................. 31
Conclusion ............................................................................................................................................. 34
Webographie ......................................................................................................................................... 35
 Listes Des Figures

FIGURE 1:LOGO ALMR ............................................................................................................................................... 10

FIGURE 2:DIAGRAMME DE CAS D'UTILISATION.................................................................................................................. 16
FIGURE 3:DIAGRAMME DE SEQUENCE D'AUTHENTIFICATION ............................................................................................... 17
FIGURE 4:DIAGRAMME DE CLASS .................................................................................................................................. 18
FIGURE 5:DIAGRAMME DE CAS D'UTILISATION.................................................................................................................. 24
FIGURE 6:HOME PQGE ................................................................................................................................................ 25
FIGURE 7:ABOUT PAGE................................................................................................................................................ 26
FIGURE 8:TEAM SECTION ............................................................................................................................................. 26
FIGURE 9:STORE PAGE ................................................................................................................................................ 27
FIGURE 10:PRODUCT DETAILS...................................................................................................................................... 28
FIGURE 11:CONTACT PAGE ........................................................................................................................................... 28
FIGURE 12:EVENTS PAGE............................................................................................................................................. 29
FIGURE 13:BLOG PAGEFIGURE 14:EVENTS PAGE ............................................................................................................. 29
FIGURE 15:BLOG ........................................................................................................................................................ 30
FIGURE 16:ADMIN DASHBOARD .................................................................................................................................... 30
FIGURE 17:TEAM DASHBOARD ...................................................................................................................................... 31
FIGURE 18:AUTHENTIFICATION ..................................................................................................................................... 31
FIGURE 19:PANIER ..................................................................................................................................................... 32
FIGURE 20:PAIMENT ................................................................................................................................................... 33
 Liste Des Tableaux
TABLEAU 1:ACTEURS DU PROJET .............................................................. 15
TABLEAU 2:MATERIEL 1 ......................................................................... 21
TABLEAU 3:MATERIEL 2 ......................................................................... 21
 Introduction Générale
La création de sites web pour des clubs universitaires peut être une initiative bénéfique offrant
de nombreux avantages pour les membres et l'organisation en général. Les sites web peuvent
aider à augmenter la visibilité du club et à attirer de nouveaux membres, en particulier ceux
intéressés par ces activités mais qui ne sont pas encore impliqués. Cependant, la création des
sites web pour les clubs universitaires peut être un moyen efficace pour faciliter la
communication et la promotion des événements tout en attirant de nouveaux membres, mais
cela doit être géré avec soin pour garantir le succès et la sécurité à long terme.

Le projet est une application web pour le club universitaire AMR (Ambition To Make
Revolution). Ce choix a été motivé par les besoins identifiés au sein de ce club, qui est très actif
et qui organise régulièrement des événements. Nous avons constaté que la gestion de ces
événements pouvait être améliorée, notamment en ce qui concerne la communication avec les
membres du club et la coordination des tâches.

L'objectif principal de cette application est de faciliter la gestion des activités du club et de
permettre aux membres de communiquer et de collaborer plus efficacement. Pour cela, nous
avons identifié les besoins des membres du club et avons conçu une application web avec des
fonctionnalités adaptées à ces besoins.

Ce rapport décrit les différentes étapes que nous avons suivies pour créer un projet fiable et
satisfaisant du club universitaire AMR. Pour ce faire, le rapport est divisé en trois grandes
parties. Le premier chapitre présente le club et décrit l'analyse et la spécification de ses besoins.
Le deuxième chapitre est consacré à la conception de l'application, tandis que le dernier chapitre
détaille les étapes de la réalisation de notre solution.
Chapitre 1 : Analyses
et spécification des
besoins
I. Introduction :

Dans ce chapitre, nous allons également présenter le club AMR et ses objectifs pour mieux
comprendre les besoins spécifiques des membres. Nous allons ensuite examiner l'existant et les
solutions déjà mises en place pour identifier les meilleures pratiques dans ce domaine. Cette
analyse nous permettra d'identifier les fonctionnalités nécessaires pour répondre aux besoins
spécifiques de notre club.

II. Présentation du club :

Le Club AMR (Ambition To Make Revolution) a été créé en 2013 par

Mr. Soulaimane KALOUNE, pour l’ambition de rassembler les
membres de la communauté et de les aider à se développer
personnellement.
Les principes du club sont basés sur les concepts de ‘ONE HAND’,
‘LET'S LEARN’ et ‘FIRST STEP’.
Figure 1:logo ALMR

ONE HAND représente l'idée que nous sommes tous unis en tant qu'êtres humains et que nous
avons la responsabilité de travailler ensemble pour améliorer notre monde. LET'S LEARN
encourage les membres du club à continuer à apprendre tout au long de leur vie et à s'ouvrir à
de nouvelles idées et perspectives. FIRST STEP incite les membres à agir et à faire le premier
pas vers leurs objectifs, en surmontant les obstacles et en poursuivant leurs rêves.

Le Club AMR propose une variété d'activités pour aider les membres à se connecter les uns aux
autres, à apprendre de nouvelles compétences et à s'engager dans des projets communautaires.
En offrant un environnement convivial et accueillant, le club encourage les membres à travailler
ensemble pour atteindre des objectifs communs et à s'engager dans des initiatives positives pour
la communauté.

En résumé, le Club AMR est une organisation qui valorise la collaboration, l'apprentissage
continu et l'action positive. Avec ses principes fondateurs de ‘ONE HAND’, ‘LET'S LEARN’
et ‘FIRST STEP’, le club encourage ses membres à se développer personnellement tout en
contribuant à l'amélioration de leur communauté.
III. Etude de l’existant :

A. Description de l’existant :

Le Club AMR est principalement basé sur des rencontres et des événements physiques pour
rassembler les membres et leur permettre de se connecter les uns aux autres. À l'heure actuelle,
le club n'a pas de plateforme en ligne pour faciliter la communication entre ses membres et la
gestion des activités du club. Les informations concernant les événements et les projets sont
transmis en personne, ce qui peut être difficile à suivre pour certains membres. Cependant, avec
l'avènement des technologies numériques, il est possible de développer une application web
pour améliorer l'expérience des membres du club.

B. Solution proposée :

La solution proposée pour le Club AMR est de développer une application web qui permettra
aux membres de rester connectés, de trouver des événements, des articles, de partager des idées
et de communiquer entre eux. L'application pourrait inclure des fonctionnalités telles que des
forums de discussion, des calendriers d'événements, faire des achats en ligne pour acheter des
produits du club etc.

Cela permettrait aux membres de se connecter facilement, même s'ils ne peuvent pas se
rencontrer physiquement, et de continuer à apprendre et à se développer personnellement. En
outre, l'application pourrait également aider le club à mieux gérer ses événements et à
communiquer avec les membres de manière plus efficace.

Cependant, la création d'une application web pour le club nécessiterait une analyse approfondie
des besoins des membres. Il faudrait identifier les fonctionnalités clés nécessaires pour répondre
aux besoins des membres, ainsi que les ressources financières et techniques nécessaires pour
développer et maintenir l'application. Il faudrait également s'assurer que l'application est
facilement accessible et conviviale pour les membres, en utilisant une interface utilisateur
intuitive.

En résumé, la création d'une application web pour le Club AMR pourrait offrir de nombreux
avantages pour les membres du club en améliorant la communication et la planification
d'activités. Cependant, cela nécessiterait une analyse approfondie des besoins des membres et
des ressources nécessaires pour développer et maintenir l'application.
IV. Spécification des besoins :

Les spécifications des besoins décrivent les fonctionnalités et les exigences non fonctionnelles
qui doivent être satisfaites pour répondre aux besoins des utilisateurs et aux objectifs de
l'application. Dans le cas du Club AMR, nous pouvons identifier des besoins fonctionnels pour
les parties utilisateur et administrateur de l'application, ainsi que des besoins non fonctionnels
pour assurer la qualité et la performance de l'application.

A. Besoins fonctionnels :

1. Pour les utilisateurs :

✓ La possibilité de créer un profil d'utilisateur.

✓ Se connecter et de participer à des événements organisés par le club

✓ Savoir plus d’information sur le club

✓ Effectuer des achats en ligne.

✓ Accéder à un espace des articles sur les nouveautés de club.

✓ Un formulaire pour faciliter la communication entre les utilisateurs et les membres du

club.

2. Pour les administrateurs :

Pour les besoins fonctionnels des administrateurs, nous pourrions inclure des fonctionnalités
telles que la gestion des utilisateurs et des événements, des articles, gestion des membres du
bureau du club et la communication avec les utilisateurs via une messagerie intégrée.

B. Besoins non fonctionnels :

Les besoins non fonctionnels sont importants car ils agissent de façon indirecte sur le résultat
et sur le rendement de l’utilisateur, ce qui fait qu’ils ne doivent pas être négligés, pour cela il
faut répondre aux exigences suivantes :

✓ Sécurité : L'application doit être sécurisée pour protéger les données des membres et
empêcher les accès non autorisés.
 ✓ Accessibilité : L'application doit être accessible à tous les membres, notamment ceux
ayant des besoins spécifiques en matière d'accessibilité.

✓ Fiabilité : L'application doit être fiable et ne pas tomber en panne fréquemment.

✓ Compatibilité et portabilité : Un site web quel que soit son domaine, son éditeur et son
langage de programmation ne peut être fiable qu’avec une compatibilité avec tous les
navigateurs web et tous les moyens que ce soit PC, IPAD ou Mobiles.

V. Conclusion :

En somme, les spécifications fonctionnelles et non fonctionnelles pour l'application web du

club AMR sont essentielles pour soutenir la mission du club et offrir une expérience utilisateur
exceptionnelle aux membres. En respectant ces spécifications, l'application web du club AMR
peut devenir une ressource inestimable pour aider les membres de la communauté à se
connecter, à s'engager et à se développer personnellement.
Chapitre 2 :Conception
 I. Introduction :

La conception d'une application web est une étape clé du processus de développement d'un
produit numérique Ce chapitre se concentrera sur la phase de conception de l'application web,
en détaillant les différents aspects à prendre en compte pour concevoir une application web
performante et intuitive qui répondra aux besoins des utilisateurs tout en respectant les
contraintes techniques. Pour documenter les choix de conception on a utiliser un langage de
modélisation unifié (UML) avec ses différentes vues qui sont utilisées pour décrire les différents
aspects de l'application.

II. Acteurs du projet :

Notre principal acteur qui aura à utiliser l’application web sont les suivants :

Tableau 1:Acteurs du Projet

Auteurs Description
Désigne une personne qui utilise notre projet, qui peut être soit identifié soit
Utilization un invite.

Cet utilisateur cela peut être un administrateur qui a le droit de faire toutes les
Admin
actions affectées aux autres acteurs, plus la gestion de site web.

III. Modélisation UML :

La modélisation UML, acronyme de "Unified Modeling Language", est un langage de

modélisation graphique utilisé pour visualiser, spécifier, concevoir et documenter des systèmes
logiciels complexes. UML est largement utilisé dans l'industrie du développement logiciel pour
représenter des concepts abstraits tels que des classes, des objets, des relations entre eux et des
processus de flux de travail.

A. Diagramme de cas d’utilisation :

Ce type de diagramme permet d’identifier l’interaction entre le système et les acteurs, c’est-
à diretoutes les fonctionnalités que doit fournir le système.
Figure 2:Diagramme de cas d'utilisation

Le diagramme de cas d'utilisation pour cette application web comprend plusieurs acteurs, tels
que les membres du club, les administrateurs et les visiteurs. Les membres peuvent se connecter
à l'application, faire des commandes, consulter les événements à venir, réserver des places à
des événements, publier des commentaires sur les événements passés et présenter des
suggestions pour de nouveaux événements par la boite de messagerie.

Les administrateurs peuvent gérer les comptes des membres, ajouter ou supprimer des
événements, des commandes, gérer les commentaires et les suggestions des membres et envoyer
des notifications aux membres. Les visiteurs peuvent accéder à certaines parties de l'application,
telles que la page d'accueil et la page de connexion, mais ils ne peuvent pas participer aux
événements ou interagir avec les membres.

En utilisant ce diagramme de cas d'utilisation, les développeurs peuvent mieux comprendre les
fonctionnalités de l'application et les différentes interactions entre les utilisateurs et le système.
Cela peut aider à concevoir une application web conviviale et facile à utiliser pour les membres
du club universitaire.
 B. Diagramme de séquence pour l’authentification :

Figure 3:Diagramme de séquence d'authentification

Il permet de cacher les interactions d’objet dans le cadre d’un scénario d’un diagramme
des cas d’utilisation. Pour mieux simplifier, on représente l’acteur principal à gauche, et
les acteurs secondaires éventuels à droite du système. Le but principal est tout simplement
de décrire le déroulement entre les acteurs ou les objets.

Lorsque l'utilisateur demande à s'inscrire sur notre plateforme en cliquant sur le bouton
pour s'enregistrer après que le système l'envoie à la fenêtre authentification. L’utilisateur
remplit les informations nécessaires, si toutes les informations sont correctement
renseignées le système valide l'enregistrement, sinon il refuse la demande
d'enregistrement.

C. Diagramme de class :

C’est une collection d’éléments de modélisation statiques qui montre la structure d’un
modèle, ilfait l’abstraction des aspects dynamiques et temporels.
Figure 4:Diagramme de Class

Ce diagramme de classes représente les différentes classes utilisées pour l’application web. La
classe User représente les utilisateurs du site, qui peuvent être des membres ou des visiteurs. La
classe membre étend la classe User et ajoute des propriétés spécifiques aux membres du club,
telles que le statut d'adhésion, les points, les événements auxquels ils ont assisté et les paiements
effectués.

La classe panier représente le panier d'achats des utilisateurs, qui contient une liste d'éléments
sélectionnés par l'utilisateur. La classe commande représente une commande passée par un
utilisateur, avec des informations telles que les articles commandés, le prix total, l'adresse de
livraison.

La classe Event représente les événements organisés par le club universitaire, avec des
informations telles que le nom, la description, la date, l'emplacement et les frais d'inscription.
La classe panier représente les paiements effectués par les membres pour les événements, avec
des informations telles que le montant, la date, le statut et le membre associé.

En utilisant ce diagramme de classes, les développeurs peuvent mieux comprendre les entités
impliquées dans la gestion du club universitaire. Cela peut aider à concevoir une application
web avec une architecture claire et facile à maintenir.
IV. Conclusion :

En conclusion, la phase de conception d'une application web est cruciale pour garantir le
succès de tout projet de développement web. Après avoir identifié et compris les besoins des
utilisateurs, les concepteurs doivent élaborer une architecture solide et une interface
utilisateur conviviale pour offrir une expérience utilisateur satisfaisante. Utiliser un langage
de modélisation unifié (UML) peut aider à structurer la conception de l'application, faciliter la
communication entre les membres de l'équipe et fournir une documentation claire pour le
développement ultérieur. Tout au long du processus de conception, il est important de garder
à l'esprit que l'objectif principal est de répondre aux besoins des utilisateurs et de fournir une
expérience utilisateur conviviale, sécurisée et performante.
Chapitre 3 : Réalisation
de projet
I. Environnement de travail :

Pour développer notre application, nous avons utilisé nos propres ordinateurs portables afin de
travailler individuellement sur le code et les fonctionnalités. Nous avons également utilisé un
serveur, un navigateur internet (Mozilla Firefox developer, Google Chrome …) pour tester
l'application à mesure que nous la développions. Cette méthode nous a permis de travailler de
manière autonome tout en gardant un œil sur le résultat final en temps réel.

A. Environnement matériel :

➢ Oualid HMOUDOU :
Tableau 2:Materiel 1

Marque Lenovo ideaPad 5

Processeur AMD64 Family 23 Model 96 Stepping 1
AuthenticAMD ~2000 MHz
Mémoire RAM: 16Go
Carte graphique AMD REDEON
Système Windows 11 Famille Unilingue
d’exploitation

➢ Mariam FAHIM :
Tableau 3:Matériel 2

Marque HP EliteBook x360 1030 G2

Processeur Intel® Core™ i5-7300U CPU @
2.60GHz
Mémoire RAM: 16Go
Carte graphique Intel® HD Graphics 620
Système Windows 10 Professionnel (64 bits)
d’exploitation
B. Environnement logiciel :

1. Langages de programmations :

HTML signifie « HyperText Markup Language » qu'on peut

traduire par « langage de balises pour l'hypertexte ». Il est utilisé
afin de créer et de représenter le contenu d'une page web et sa
structure. D'autres technologies sont utilisées avec HTML pour
décrire la présentation d'une page (CSS) et/ou ses fonctionnalités
interactives (JavaScript).

CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie

« feuille de style en cascade ». Le CSS correspond à un langage
informatique permettant de mettre en forme des pages web
(HTML ou XML). Ce langage est donc composé des fameuses «
feuilles de style en cascade » également appelées fichiers CSS
(.css) et contient des éléments de codage.

JavaScript désigne un langage de développement informatique,

et plus précisément un langage de script orienté objet.
On le retrouve principalement dans les pages Internet. Il permet,
entre autres, d'introduire sur une page web ou HTML des petites
animations ou des effets.

PHP : HyperText Preprocessor, plus connu sous PHP, est un

langage de programmation libre, principalement utilisé pour
produire des pages Web dynamiques via un serveur HTTP, mais
pouvant également fonctionner comme n'importe quel langage
interprété de façon locale. PHP est un langage impératif orienté
objet.
2. Framework :

Laravel est un Framework gratuit, open source et orienté objet

qui utilise le langage de programmation PHP. Il a été pensé pour
rendre le développement d'applications web rapide et facile.
Tout comme son grand frère Symfony dont il utilise certaines
briques, il applique le pattern MVC (pour "Model View
Controller") et offre nativement un ensemble de composants et
fonctionnalités qui permettent de développer une application
PHP moderne et robuste.

Bootstrap est une collection d'outils utiles à la création du design

(graphisme, animation et interactions avec la page dans le
navigateur, etc.) de sites et d'applications web. C'est un ensemble
qui contient des codes HTML et CSS, des formulaires, boutons,
outils de navigation et autres éléments interactifs, ainsi que des
extensions JavaScript en option. C'est l'un des projets les plus
populaires sur la plate-forme de gestion de développement
GitHub.

3. Outils :

WampServer (anciennement WAMP5) est une plateforme de

développement Web de type WAMP, permettant de faire
fonctionner localement (sans avoir à se connecter à un serveur
externe) des scripts PHP. WampServer n'est pas en soi un
logiciel, mais un environnement comprenant trois serveurs
(Apache, MySQL et Maria DB), un interpréteur de script (PHP),
ainsi que phpMyAdmin pour l'administration Web des bases
MySQL.
Visual Studio Code est un éditeur de code open-source
développé par Microsoft supportant un très grand nombre de
langages grâce à des extensions. Il supporte l’autocomplétions, la
coloration syntaxique, le débogage, et les commandes git, et
surtout disponible sur les systèmes d’exploitation Windows,
Linux et Mac. Vs code est développé avec le Framework
Electron et conçu principalement pour développer des projets
avec Javascript, Node.js ou encore Type Script.

StarUML un logiciel de modélisation UML, qui a été « cédé

comme open source » par son éditeur, à la fin de son exploitation
commerciale.

GitHub Une plate-forme d’hébergement de code pour le contrôle

des versions et la collaboration. Il nous permet travailler ensemble
sur des projets de n’importe où. Ce tutoriel vous apprend les bases
de GitHub comme les dépôts, les branches, les commits et les
requêtes de tirage.
 II. Présentation des interfaces de l’application :

A. Home page :

Figure 6:Home pqge

➢ La page d'accueil est la première page que les visiteurs voient lorsqu'ils accèdent à notre site
web. Elle doit être conçue de manière à susciter leur intérêt et à leur donner envie d'en
savoir plus sur notre club.

➢ En somme, la page d'accueil est un élément clé de notre site web et doit être conçue avec
soin pour répondre aux attentes des visiteurs et promouvoir notre club.
 B. About Us page :

Figure 7:About page

➢ La page "À propos" doit fournir une présentation claire et concise du club , y compris son
histoire, sa mission et sa vision. Les visiteurs doivent comprendre rapidement ce que le club
représente et ce qu'il offre.

➢ a page "À propos" d'un site web pour un club doit présenter l'équipe dirigeante, fournir des
témoignages et des informations sur les activités et projets du club, ainsi que des moyens de
contact pour les visiteurs souhaitant en savoir plus ou s'engager.

Figure 8:Team Section

 C. Store :

Figure 9:Store Page

➢ La page "Store" est l'endroit où les membres et les sympathisants peuvent acheter des
produits exclusifs liés au club, comme des vêtements, des accessoires ou des articles de
collection. Ces produits peuvent aider à renforcer le sentiment d'appartenance des membres
au club et à promouvoir son image auprès de la communauté universitaire et au-delà .

➢ La page "Store" doit fournir une liste claire des produits disponibles à l'achat, avec des
photos et des descriptions détaillées de chaque produit. Les visiteurs doivent pouvoir
facilement naviguer dans les produits proposés et trouver ce qu'ils cherchent.
 ➢ En somme, la page "Store" d'un site web pour un club universitaire doit proposer une liste
claire des produits disponibles à l'achat, fournir des informations sur les prix et les méthodes
d'expédition et de paiement, offrir des promotions et des offres spéciales, et inclure des
moyens de contact pour les visiteurs souhaitant en savoir plus ou poser des questions.

Figure 10:Product Details

D. Contact Us page :

Figure 11:contact page

➢ La page "Contact Us" est un élément important pour un site web d'un club universitaire,
car elle permet aux membres du club, aux étudiants, au personnel et aux visiteurs de
communiquer avec les responsables du club de manière facile et rapide.

E. Events page :

Figure 12:Events Page

Figure 13:Blog PageFigure 14:Events Page

➢ La page des événements sur le site d'un club universitaire est une section importante
pour informer les membres et la communauté universitaire des activités à venir. Cette
page devrait être facilement accessible à partir de la page d'accueil du site et être mise
à jour régulièrement pour refléter les événements les plus récents et réserver des places.
 F. Blog page :

Figure 15:blog

➢ Cette page blog sur le site est un endroit idéal pour partager des informations, des idées,
des opinions et des actualités liées à notre club et à la communauté universitaire en
général

G. Dashboard page :

Figure 16:admin dashboard

 ➢ Cette page c’est seulement pour l’administrateur pour gerer le differents fonctionqlite
de notre site.

Figure 17:team dashboard

H. Authentification page :

Figure 18:authentification

➢ Cette page permet aux utilisateurs de se connecter ou s’inscrire ainsi que de réinitialiser le mot
de passe au cas d’oubli via un lien dans son adresse mail.
 I. Cart page :

Figure 19:panier

Le panier sur la page web d'u club est un outil important pour les membres qui souhaitent
acheter des produits liés au club et ils peuvent modifier leurs commandes, les supprimer ou
les modifier.
Figure 20:paiment
 Conclusion
En guise de conclusion, ce projet nous a permis de mettre en pratique nos connaissances
acquises pendant notre formation au sein de l’école, apprendre l’esprit de travail en groupe et
également de développer nos compétences techniques en informatique, en réalisant ce projet en
utilisant différents langages de programmation et logiciels pour le réussir, malgré tous les
obstacles et les entraves qu’on a vécues.

Durant la période de réalisation de notre projet, nous étions attentifs pour assurer la qualité et
la lisibilité du code source afin de créer une application web performante tout en essayant de la
rendre le plus agréable possible.

Finalement, ce projet ce n’est qu’un début pour notre carrière, une nouvelle expérience pour
nous et une initiation pour réaliser d’autres projets dans différents domaines, afin de maîtriser
les outils informatiques et les langages de programmation nécessaires.
 Webographie
www.google.com

www.stackoverflow.com

https://getbootstrap.com/

https://www.youtube.com/