CanisPro Education
Présentation du projet
CanisPro Éducation est une application web destinée à un centre d’éducation canine. Le projet a pour objectif de faciliter la gestion des propriétaires, des chiens et des séances d’éducation tout en offrant une meilleure organisation des informations au sein de la structure.
Cette application permet de centraliser les données relatives aux adhérents et à leurs animaux, de simplifier le suivi des inscriptions aux cours et d’améliorer la gestion quotidienne du centre.
Contexte
CanisPro Éducation est un centre spécialisé dans l’éducation canine.
Il propose différents types de cours adaptés aux chiens et à leurs propriétaires, comme des cours d’obéissance, de sociabilisation ou encore d’agility.
Actuellement, la gestion du centre (chiens, propriétaires, cours et inscriptions) est réalisée à l’aide de supports peu adaptés, tels que des documents papier ou des tableurs.
Ce mode de fonctionnement présente plusieurs limites, notamment un manque de visibilité sur les activités, des risques d’erreurs ainsi que des difficultés d’organisation.
Afin de répondre à ces problématiques, le centre souhaite mettre en place une application web moderne. Cette solution permettra de centraliser les informations, de simplifier la gestion des activités et d’améliorer l’accès aux services pour les utilisateurs.
L’application CanisPro Education est donc un site web dédié à l’éducation canine.
Elle permet aux propriétaires de chiens de consulter les différents cours proposés, de visualiser les séances disponibles et de s’y inscrire facilement.
Le site propose également un espace membre sécurisé dans lequel les utilisateurs peuvent gérer leurs informations personnelles ainsi que les profils de leurs chiens.
Réalisations effectuées
Mes tâches réalisées
Durant le projet, j’ai été responsable des tâches suivantes :
- Réalisation de la maquette du site (sur canva)
- Développement des templates (interfaces visuelles)
- Mise en place du VisiteurController (accueil + navigation)
- Création de la page liste des cours et détail des cours
- Développement de certaines parties du MemberController (gestion des chiens)
- Affichage dynamique des séances depuis la base de données
- Participation au développement d’une fonctionnalité de modification des informations personnelles
- Travail sur le design CSS et le responsive
- Rédaction de la documentation utilisateur
Ces tâches m’ont permis de travailler principalement sur l’expérience utilisateur et la présentation des données.
Captures d'écran
(Maquette)
Capture du Modèle Conceptuel de Données
Afin de structurer les données de l’application, un Modèle Conceptuel de Données (MCD) a été réalisé.
Ce modèle permet de représenter les différentes entités du système, telles que les utilisateurs, les propriétaires, les chiens, les cours et les séances, ainsi que les relations entre elles.
Le MCD a servi de base pour la création de la base de données et des entités dans Symfony.
Architecture de l’application
Le projet a été développé à l’aide du framework Symfony.
Symfony permet de structurer l’application de manière claire et organisée, en séparant les différentes responsabilités (logique, affichage, données). Il facilite également la gestion des formulaires, des routes et des interactions avec la base de données.
L’application repose sur une architecture MVC (Modèle – Vue – Contrôleur).
- Le Modèle correspond aux entités et à la base de données.
- La Vue correspond aux templates Twig qui gèrent l’affichage.
- Le Contrôleur gère la logique de l’application et fait le lien entre le modèle et la vue.
- Cette organisation permet de rendre le code plus lisible et plus facile à maintenir.
Le projet est structuré autour de plusieurs éléments principaux :
- Les contrôleurs (VisitorController, MemberController, AdminController) qui gèrent les actions de l’utilisateur.
- Les templates Twig qui permettent l’affichage des pages du site.
- Les entités qui représentent les données (Utilisateur, Propriétaire, Chien, Séance, Cours).
Cette organisation permet de séparer clairement les différentes parties de l’application.
- - - - Affichage dynamique des séances - - - -
Interface utilisateur
permettant la modification des informations personnelles :
La création d’un affichage dynamique des séances permet aux consultants du site de pouvoir visionner les séances disponibles au différents types de cours. Cela illustre le fonctionnement d’une application Symfony en architecture MVC.
Contrôleur Symfony permettant de traiter les données du formulaire et de les enregistrer en base :
Le contrôleur permet de récupérer les données des séances, de gérer la soumission du formulaire et d’enregistrer les modifications en base de données grâce à Doctrine.
Controller
Formulaire
Contenu du formulaire servant à fournir les informations des séances disponibles (selon le type qui peut être collectif ou individuel) :
Le formulaire Symfony définit les champs à afficher, tandis que le template Twig permet de gérer l’affichage côté interface.
Cette fonctionnalité permet ainsi à l’utilisateur de voir les informations des séances disponibles, mis à jour directement lors d’une modification dans la base de données.
Twig
Template Twig utilisé pour afficher les séances des cours disponible côté interface (exemple avec le cours de sociabilisation, collectif et individuel) :
Tandis que le template Twig permet de gérer l’affichage côté interface.
Cette fonctionnalité permet ainsi à l’utilisateur de voir les informations des séances disponibles, mis à jour directement lors d’une modification dans la base de données.
- - - - Fonctionnalité modifier un propriétaire - - - -
Interface utilisateur
Interface utilisateur permettant la modification des informations personnelles :
La fonctionnalité de modification des informations personnelles illustre le fonctionnement d’une application Symfony en architecture MVC.
Contrôleur Symfony permettant de traiter les données du formulaire et de les enregistrer en base :
Le contrôleur permet de récupérer les données de l’utilisateur connecté, de gérer la soumission du formulaire et d’enregistrer les modifications en base de données grâce à Doctrine.
Controller
Formulaire
Contenu du formulaire servant à fournir les informations concernant le propriétaire :
Le formulaire Symfony définit les champs à afficher.
Twig
Template Twig utilisé pour afficher le formulaire côté interface :
Tandis que le template Twig permet de gérer l’affichage côté interface.
Cette fonctionnalité permet ainsi à l’utilisateur de mettre à jour ses informations de manière simple et sécurisée.
Lors de la mise en place du formulaire de modification des informations personnelles, un problème s’est posé : le formulaire affichait automatiquement tous les champs de l’entité, y compris le champ « user », qui correspond à l’utilisateur lié.
Or, ce champ ne doit pas être visible ni modifiable par l’utilisateur, car il s’agit d’une donnée interne utilisée pour faire le lien entre le propriétaire et son compte.
Pour corriger cela, j’ai personnalisé l’affichage du formulaire dans le template Twig. Au lieu d’afficher le formulaire automatiquement, j’ai choisi d’afficher chaque champ individuellement afin de contrôler précisément ce qui est visible.
Le champ « user » a été conservé dans le formulaire pour le bon fonctionnement de l’application, mais il a été masqué à l’aide d’un style display: none, ce qui permet de ne pas l’afficher à l’utilisateur tout en conservant sa valeur lors de la soumission du formulaire.
Organisation du travail
Le projet a été organisé en plusieurs phases :
- Analyse du besoin
- Conception (diagrammes, maquette)
- Développement (backend + frontend)
- Tests et corrections
- Rédaction des documentations
Chaque membre du groupe avait des responsabilités spécifiques, ce qui a permis une répartition efficace du travail.
Nous avons également réalisé une revue intermédiaire afin de vérifier l’avancement du projet.
Afin de mieux organiser le travail du groupe, nous avons utilisé des outils de gestion de projet tels qu’un diagramme de Gantt et un tableau Kanban.
Le diagramme de Gantt nous a permis de planifier les différentes tâches dans le temps, de visualiser les grandes étapes du projet et de répartir les responsabilités entre les membres du groupe.
Le tableau Kanban, quant à lui, a été utilisé pour suivre l’avancement des tâches de manière plus dynamique. Il était organisé en plusieurs colonnes (à faire, en cours, terminé), ce qui permettait de visualiser rapidement l’état d’avancement du projet et de mieux gérer les priorités.