par

Bienvenu sur l’article portant sur l’un de mes projets de groupe.

Nous verrons dans un premier temps quels outils et plateformes nous avons utilisé, comment nous les avons configurés et comment notre équipe a su pallier le manque d’effectif suite au départ d’un collègue.

Ce projet a débuté mi-janvier 2026. Nous avons eu le droit de travailler un minimum de 2 heures en cours au lycée Saint-Exupéry à Saint-Raphaël en BTS SIO, mêlant le groupe de SISR avec le groupe de SLAM, et a pris fin mi-avril 2026.

Notre groupe était composé à la base de 4 personnes, la quatrième personne n’étant plus présente nous avons pris la décision de pallier ce manque en se répartissant équitablement le travail.

Je vous présenterai en premier mon travail et je vous présenterais le travail de mes colègues pour arriver sur l’état final projet Marc Colvert.

Par ailleur, vous pourrez trouver certaines ressources du projets sur ce liens : https://aquamarine.dynssl.com/à-propos/projets/salle-de-sport-marc-colvert

Nous avons donc repris le projet avec les 3 personnes restantes dans le groupe étant :

WilliamEvanAxel
SISRSLAMSLAM

– Chef d’équipe
– Codeur
– Direction Artistique
– Présentation


– Codeur
– Debuggeur
– Documentation		– Codeur
– Debuggeur
– Aide le groupe au développement
– Documentation

Organisation

Nous avons utilisé pour la construction de la salle de sport les logiciels suivants :

  • Trello
  • WampServer (Windows) / Xampp (MacOS) – Apache + MariaDB + PHP
  • phpMyAdmin (v5.2.3) – Administration de la base de données
  • MariaDB (v12.2.2) – Moteur de base de données
  • PowerPoint
  • Éditeurs de fichiers tiers (VS-Code/VS-Codium ; Xcode ; etc.)
  • NextCloud (Partage de fichiers)

Certains postes de travail n’étant pas disponibles sous Windows, nous avons donc cherché des alternatives. Par exemple, WampServer n’étant disponible que sur Windows, nous avons pris Xampp sur Linux et MacOS, une alternative avec une compatibilité plus large et plus personnalisable mais au dépend de la facilité de configuration.

Trello

Notre plateforme principale pour organiser, manager et lister les tâches à commencer, en cours ou terminées, ainsi que notre zone de partage de liens et documents.

Le tableau Trello était organisé en plusieurs colonnes de workflow : Documents, À faire, En cours, Terminé – À réviser avant production finale, À modifier, Fait – Prêt pour la production finale, et System (pour les notes internes comme les tags automatiques).

Chaque membre avait une étiquette de couleur dédiée (Commun, Evan, William, Axel) pour identifier rapidement l’assignation des tâches.

WampServer et Xampp

Ce sont les couteaux suisses du développement du site. Ils nous ont permis de tester, débugger et documenter le projet en entier. WampServer (v3.3.7) était utilisé sur les postes Windows, et Xampp (Apache + MariaDB + PHP + Perl) sur les postes MacOS et Linux.

Base de données

La base de données salle_sport_colvert a été conçue sous MariaDB et administrée via phpMyAdmin. Elle comporte 7 tables reliées entre elles par des clés étrangères :

  • Adherent – Les membres de la salle (nom, prénom, email, téléphone, statut actif/inactif)
  • Coach – Les entraîneurs (nom, prénom, spécialité, téléphone)
  • Activite – Les activités proposées (Zumba, Musculation Libre, Body Sculpt, Yoga Doux, Circuit Training, RPM, Pilates, Boxe Fitness, Aquagym, Stretching) avec un niveau de difficulté
  • Seance – Les séances programmées (activité, coach, date/heure, durée, capacité max)
  • Reservation – Les réservations des adhérents aux séances
  • Abonnement – Les abonnements souscrits (adhérent, type, dates, prix payé, état)
  • TypeAbonnement – Les formules disponibles (Mensuel Standard 49,99€, Trimestriel Gold 129,99€, Annuel Premium 399,99€, Mensuel Étudiant 39,99€, etc.)
  • Utilisateur – Les comptes administrateurs pour l’accès au back-office

Plan d’étude

Le projet s’est déroulé en 4 grandes phases :

  1. Compréhension du code d’origine – Analyser le code fourni et comprendre l’architecture existante
  2. Création des nouvelles pages – Développer les pages manquantes du site intranet
  3. Vérifications du bon fonctionnement et des règles RGPD – Tests, corrections de bugs, conformité
  4. Passage en production pour envoi final – Mise en ligne de la version finale

Travaux réalisés

William (SISR) – Chef d’équipe / DA / Code

En tant que chef d’équipe et responsable de la direction artistique, William a travaillé sur plusieurs pages et sur l’ensemble du theming du site.

Rôle(s) : Chef de remplacement ; DA (Direction Artistique) ; Code

Pages assignées sur Trello :

  • Faire la page PHP « Réservations »
  • Finir la page PHP « Planning »
  • Faire la page Activités
  • CSS custom pour une page plus propre

Reservation.php

Page de gestion des réservations permettant de créer, modifier et supprimer des réservations. Le code utilise PDO avec des requêtes préparées pour les opérations CRUD (INSERT, UPDATE, DELETE) sur la table Reservation. Chaque réservation lie un adhérent à une séance avec un statut (Confirmée/Annulée) et une date.

Planning.php

Page de planning utilisant la librairie FullCalendar (v6.1.11) pour afficher un calendrier interactif des séances. Le code PHP effectue une requête SQL avec des jointures sur les tables Seance, Activite et Coach pour récupérer toutes les informations nécessaires (id, nom d’activité, coach, date/heure, durée, capacité).

Les événements sont encodés en JSON et passés à FullCalendar côté JavaScript. Un clic sur une séance ouvre une modale Bootstrap affichant le coach, la durée et la capacité maximale, avec un bouton pour se connecter et réserver.

Activite.php

Page de gestion des activités de la salle (CRUD complet). Les activités sont définies par un nom, une description et un niveau de difficulté (Facile, Moyen, Difficile). On retrouve 10 activités : Zumba, Musculation Libre, Body Sculpt, Yoga Doux, Circuit Training, RPM, Pilates, Boxe Fitness, Aquagym et Stretching.

Theming avec custom.css

William a entièrement créé le fichier custom.css qui donne son identité visuelle au site. Le thème s’inspire de la palette Catppuccin avec un dégradé de fond allant du sombre (#1E1E2E) vers des tons rosés (#F38BA8) et orangés (#FAB387).

Les imports CSS regroupent Bootstrap, FullCalendar et la police Google Poppins dans un seul fichier. Le CSS personnalise :

  • Éléments globaux – Titres (h1-h6) avec fond arrondi, couleur #CDD6F4
  • Formulaires et tables – Inputs stylisés avec fond sombre (#313244AF), bordures (#6C7086AA)
  • Calendrier – Fond sombre (#181825A0), bordures vertes (#6C7086), texte clair
  • Sidebar / Navbar – Panneau fixe de 200px, fond #181825AA, liens avec couleur #B8C2DE
  • Popup / Modales – Fond #181825AA avec border-radius 12px
  • Page de connexion – Formulaire centré avec overlay sombre sur image de fond, carte avec ombre portée
  • Boutons – Style cohérent vert (#A6E3A1AA), bordure #6C7086AA, hover plus clair

Evan (SLAM) – Codeur / Analyseur

Evan a travaillé sur les pages de gestion des données principales du site.

Rôle(s) : Codeur ; Analyseur

Pages assignées sur Trello :

  • Faire la page PHP « Abonnements »
  • Faire la page PHP « Types Abonnement »
  • Faire la page PHP « Coachs »
  • Commenter le code adherent.php

Adherent.php

Page de gestion des adhérents de la salle. Opérations CRUD complètes avec PDO : ajout d’un nouvel adhérent (nom, prénom, email, statut Actif/Inactif), modification et suppression. La table affiche les informations de chaque membre avec des boutons d’édition et de suppression par ligne.

Abonnement.php

Page de gestion des abonnements. Chaque abonnement est lié à un adhérent et à un type d’abonnement, avec les dates de début et de fin, le prix payé et l’état (Valide/Expiré/Annulé). Le formulaire permet de créer, modifier et supprimer des abonnements.

Type_Abonnement.php

Page de gestion des formules d’abonnement. Chaque type est défini par un libellé, une durée en jours et un prix initial. On retrouve 11 formules allant de l’Hebdomadaire Découverte (7 jours, 19,99€) à l’Annuel Famille (365 jours, 599,99€).

Coach.php

Page de gestion des coachs. Chaque coach possède un nom, prénom, spécialité et téléphone. Le site compte 10 coachs couvrant des spécialités variées : Yoga & Pilates, Musculation & HIIT, Cardio & Zumba, Crossfit, Natation, Bodybuilding, Boxe, Nutrition & Coaching Perso, Fitness Danse, et Stretching & Rééducation.

Axel (SLAM) – Codeur / Analyseur / Documentation

Axel a travaillé sur les pages restantes et sur la documentation du code source.

Rôle(s) : Codeur ; Analyseur ; Documentation du code source

Pages assignées sur Trello :

  • Faire la page PHP « Séances »
  • Faire la page Planning-Public
  • Finir la page dashboard.php

Seance.php

Page de gestion des séances. Permet de créer, modifier et supprimer des séances en liant une activité, un coach, une date/heure de début, une durée en minutes et une capacité maximale.

Planning_public.php

Version publique du planning, accessible sans connexion. Utilise également FullCalendar avec la même requête SQL (jointures Seance/Activite/Coach). L’interface affiche le calendrier avec les séances. Un clic sur une séance ouvre une modale avec les détails (coach, durée, capacité) et un bouton « Se connecter pour réserver » redirigeant vers la page de connexion.

Axel a fait évoluer cette page d’une version initiale simple (calendrier vide) à une version complète avec des événements colorés et le gradient de fond du thème, montrant la progression du développement.

Dashboard.php

Page tableau de bord accessible après connexion. Affiche 4 cartes statistiques en temps réel : nombre d’adhérents, nombre de séances, nombre de réservations, et nombre d’abonnements actifs. Le tout avec un hero banner reprenant l’image de la salle et un message de bienvenue personnalisé avec le login de l’utilisateur connecté.

Documentation du code

Axel a aussi commenté le code source, notamment le fichier adherent.php, en ajoutant des commentaires détaillés ligne par ligne expliquant le fonctionnement de chaque bloc : inclusion des fichiers d’authentification et de configuration, vérification des données POST, requêtes d’insertion/modification/suppression avec PDO, et logique de récupération des données pour l’affichage.

Architecture technique

Le site est construit en PHP natif avec une architecture modulaire :

  • config/db.php – Connexion PDO à la base MariaDB
  • includes/auth.php – Vérification de session pour les pages protégées
  • includes/header.php – En-tête HTML avec imports CSS (custom.css regroupe Bootstrap + FullCalendar + Google Fonts)
  • includes/menu.php – Sidebar de navigation avec liens vers toutes les pages d’administration
  • includes/hero_banner.php – Bannière héro réutilisable avec titre et sous-titre dynamiques
  • includes/footer.php – Pied de page
  • auth/login.php – Page de connexion avec password_verify() (bcrypt) et redirection vers le dashboard
  • auth/logout.php – Déconnexion et destruction de session

Le front-end est construit sur Bootstrap 5.3 avec la police Poppins (Google Fonts) et un thème sombre personnalisé inspiré de la palette Catppuccin. La page de connexion utilise l’image colvert_sport.jpg en arrière-plan avec un overlay sombre et un formulaire centré.

Conclusion

Ce projet d’intranet pour la Salle de Sport Marc Colvert nous a permis de mettre en pratique nos compétences en développement web (PHP, SQL, HTML/CSS/JS), en gestion de projet (Trello), et en travail d’équipe malgré la perte d’un membre. Chaque personne du groupe a contribué à la réalisation de pages fonctionnelles avec des opérations CRUD complètes, un planning interactif, un système d’authentification sécurisé, et un design soigné.

Le résultat final est un intranet complet permettant la gestion des adhérents, coachs, activités, séances, réservations et abonnements d’une salle de sport, le tout avec une interface moderne et cohérente.

Laisser un commentaire