MediaStock
Application web de gestion de matériel
Le projet MédiaStock a été réalisé dans le cadre du BTS SIO, option SLAM, au cours de
la deuxième année de formation.
Il s'agit d'une application web mobile-first destinée à gérer l'inventaire et les prêts
de matériel informatique et audiovisuel dans un établissement scolaire.
Avant la mise en place de l'application, les prêts étaient suivis via des fiches papier, ce qui entraînait un manque de traçabilité, des erreurs de saisie et une perte de temps. MediaStock digitalise le processus en centralisant les données (matériel, emprunteurs, prêts/retours) et en intégrant l'identification des équipements via QR codes.
-
Authentification administrateur
-
Authentification administrateur
Message d'erreur en cas d'identification incorrecte
-
Gestion de l'inventaire du matériel (CRUD)
Liste du matériel
-
Gestion de l'inventaire du matériel (CRUD)
Formulaire d'ajout de matériel
-
Fiche détaillée d'un matériel
Modification des informations
-
Enregistrement d'un prêt
-
Gestion des prêts
-
Historique d'un prêt
-
Gestion des retours
L'objectif est de simplifier et automatiser la gestion des prêts et retours de matériel au sein de l'école.
L'application devait permettre à l'équipe administrative de :
- ◈ gérer l'inventaire complet du matériel (ajout, suppression, modification, archivage),
- ◈ enregistrer un prêt et une restitution rapidement (sur mobile),
- ◈ identifier chaque matériel par QR code unique,
- ◈ visualiser les prêts en cours et repérer les retards.
Le besoin exprimé portait aussi sur la traçabilité (historique des prêts, retard, état du matériel)
et la sécurisation des accès via une authentification administrateur.
Le système devait être rapide à déployer, léger, et fonctionner aussi bien en
local qu'à distance pour les tests sur le réseau de l'école.
Le projet s'appuie sur une architecture trois-tiers (présentation, logique métier, données) et sur des technologies modernes respectant les standards du web :
Backend
- ◈ PHP 8.2 (procédural) - logique métier et gestion des sessions.
- ◈ MySQL 8.0 - base de données relationnelle (tables : item, prêt, emprunteur, administrateur…).
- ◈ PDO (PHP Data Objects) - requêtes SQL préparées et sécurisées.
- ◈ Docker / Docker Compose - conteneurisation de l'environnement (Apache, MySQL, phpMyAdmin).
Frontend
- ◈ HTML5 / CSS3 / Bootstrap 5 - structure et mise en forme responsive (mobil-first).
- ◈ JavaScript (ES6) - interactions dynamiques et scan des QR codes.
- ◈ Flatpickr - gestion intuitive des dates de prêt et de retour.
- ◈ Font Awesome - icônes d'interface.
Outils et environnement
- ◈ Visual Studio Code - environnement de développement.
- ◈ Git / GitHub - gestion de versions et hébergement du code.
- ◈ Figma - conception des maquettes UI/UX.
- ◈ Smartphone Android - tests des fonctionnalités de scan via caméra.
L'ensemble a été conçu pour fonctionner en local (Docker) et sur un serveur SISR distant, garantissant la portabilité et la cohérence de l'environnement.
Le développement de MédiaStock s'est déroulé sur plusieurs semaines, selon une approche itérative et incrémentale, en suivant un planning hebdomadaire structuré comprenant les phases de définition, développement, tests et déploiement.
Structure de l'application
L'application repose sur une architecture PHP procédurale, organisée en dossiers distincts :
- ◈ /public/api/ : endpoints pour la gestion du matériel et des prêts (additem.php, updateitem.php, cloturepret.php).
- ◈ /config/ : fichiers de configuration et de connexion à la base de données (database.php).
- ◈ /src/ : organisation logique des entités métiers (Item, Pret, Emprunteur, Administrateur, Categorie, Formation).
- ◈ /sql/ : scripts d'initialisation et de test de la base de données (init.sql).
Fonctionnalités principales
- ◈ CRUD complet du matériel (ajout, modification, suppression, archivage).
- ◈ Génération automatique de QR codes lors de l'ajout d'un nouvel item.
- ◈ Scan via smartphone redirigeant vers la fiche détaillée du matériel.
- ◈ Gestion des prêts et retours avec mise à jour en temps réel de la disponibilité.
- ◈ Authentification administrateur sécurisée (mot de passe haché, session PHP).
- ◈ Interface responsive utilisable sur ordinateur et smartphone.
Déploiement
Le projet a été déployé en environnement local via Docker, puis transféré sur un serveur
SISR mutualisé pour la phase finale de tests.
Une documentation complète (technique et utilisateur) a accompagné la livraison,
incluant les scripts SQL, le schéma MCD/MLD et des captures d'écran illustrant
les principales fonctionnalités de l'application.
Le projet MediaStock a permis de concevoir une application web mobile-first dédiée à la gestion des
prêts de matériel dans un établissement scolaire.
Partant d'un système entièrement manuel basé sur des fiches papier, le projet a introduit une solution numérique complète, sécurisée et ergonomique,
capable de gérer l'inventaire, les prêts, les restitutions, tout en facilitant l'identification des retards.
Grâce à une architecture trois-tiers (présentation, logique métier, données), conteneurisée avec Docker,
et à une approche itérative du développement, chaque fonctionnalité a été pensée pour répondre
aux besoins réels de l'équipe administrative.
Le système de QR codes intégré a considérablement
simplifié les opérations terrain, tout en garantissant une traçabilité fiable du matériel.
Ce projet m'a permis de mobiliser mes compétences en conception d'architecture, développement PHP/MySQL, sécurité web, gestion de projet agile et prototypage d'interface avec Figma. Il représente une solution robuste, évolutive et directement exploitable en contexte réel.
Les livrables du projet comprennent plusieurs ensembles cohérents :
Documentation technique et fonctionnelle
- ◈ Cahier des charges complet décrivant les objectifs ainsi que les besoins fonctionnels et techniques.
- ◈ Maquettes Figma des interfaces mobile.
- ◈ Schémas MCD et MLD de la base de données (présentés dans les annexes du cahier des charges, page 18).
Code source et environnement
- ◈ Application développée en PHP/ MySQL/ HTML/ CSS/ JavaScript/ Bootstrap 5.
- ◈ Déploiement conteneurisé avec Docker Compose (fichiers docker-compose.yml, Dockerfile, .env).
- ◈ Système d'authentification et gestion des QR codes via bibliothèques PHP et JS.
- ◈ Le code source de l'application disponible sur GitHub en cliquant sur ce lien.
Outils de gestion et tests
- ◈ Diagrammes de Gantt et Kanban (page 20 - 21 du cahier des charges) pour le suivi du développement.
- ◈ Plan de tests détaillant les scénarios d'authentification, de prêt/restitution et de sécurité (page 12 - 13 du cahier des charges).
- ◈ Documentation utilisateur illustrée par des captures d'écran des principales fonctionnalités.
Plusieurs pistes d'amélioration ont été identifiées pour une version ultérieure de l'application :
Évolutions fonctionnelles
- ◈ Ajout d'un module statistique pour visualiser le taux d'utilisation du matériel et la durée moyenne des prêts.
- ◈ Intégration d'une gestion multi-comptes avec journal d'audit pour tracer les actions des administrateurs.
- ◈ Création d'un mode inventaire permettant de comparer le stock physique et théorique par scan successif des QR codes.
Améliorations techniques
- ◈ Migration progressive vers un framework PHP moderne (Laravel) ou JavaScript (React/Node.js) pour une meilleure extensibilité.
- ◈ Mise en place d'un hébergement cloud sécurisé (AWS, Azure ou GCP).
- ◈ Intégration d'API externes pour la synchronisation avec la base de données de l'établissement.
Pérennisation du projet
- ◈ Documentation continue et formation des utilisateurs internes.
- ◈ Automatisation de la sauvegarde et de la supervision (monitoring système, alertes de panne).
- ◈ Ouverture potentielle du projet en open-source éducatif pour favoriser la collaboration entre établissements.
1. Gérer le patrimoine informatique
- 1.1. Recenser et identifier les ressources numériques Dans le cadre du projet MédiaStock, j'ai recensé et configuré l'ensemble des ressources nécessaires au fonctionnement de l'application (serveur Apache/PHP, base MySQL, conteneurs Docker).
- 1.5. Gérer des sauvegardes Dans le cadre du projet, j'ai mis en place et testé des scripts de sauvegarde et de restauration de la base de données MySQL, réalisés lors du cours de cybersécurité. Ces scripts permettent d'exporter les données et de les restaurer en cas de perte ou de redéploiement de l'environnement.
2. Répondre aux incidents et aux demandes d'assistance et d'évolution
- 2.2. Traiter des demandes concernant les services réseau et système, applicat
- 2.3. Traiter des demandes concernant les applications J'ai assuré la maintenance corrective et évolutive de l'application en corrigeant des anomalies et en améliorant certaines fonctionnalités, comme la gestion des QR codes et l'affichage responsive.
3. Développer la présence en ligne de l'organisation
- 3.3. Participer à l'évolution d'un site Web exploitant les données de l'organisation J'ai participé au développement et à l'évolution d'une application web connectée à une base de données MySQL, permettant la gestion et l'exploitation des données de l'organisation (matériels, prêts et utilisateurs).
4. Travailler en mode projet
- 4.1. Analyser les objectifs et les modalités d'organisation d'un projet J'ai analysé le cahier des charges afin d'identifier les objectifs du projet, les fonctionnalités attendues ainsi que les contraintes techniques (choix des technologies, architecture, environnement de déploiement), dans le but de définir une organisation adaptée à sa réalisation.
- 4.2. Planifier les activités J'ai planifié les différentes étapes du projet (conception, développement, tests, déploiement) à l'aide d'un diagramme de Gantt et d'un suivi hebdomadaire.
- 4.3. Évaluer les indicateurs de suivi d'un projet et analyser les écarts J'ai assuré un suivi régulier de l'avancement du projet en comparant l'état réel des réalisations avec la planification initiale, afin d'identifier les écarts et d'ajuster les priorités lorsque cela était nécessaire.
5. Mettre à disposition des utilisateurs un service informatique
- 5.1. Réaliser les tests d'intégration et d'acceptation d'un service J'ai réalisé des tests d'intégration pour vérifier la cohérence entre les modules de l'application (interface, base de données et génération de QR codes) et validé le bon fonctionnement global du service avant son déploiement.
- 5.3. Accompagner les utilisateurs dans la mise en place d'un service J'ai participé à une démonstration de l'application auprès des utilisateurs finaux et contribué à la réalisation d'une documentation détaillée afin de faciliter la prise en main du service et son utilisation quotidienne.
6. Organiser son développement professionnel
- 6.1. Mettre en place son environnement d'apprentissage personnel J'ai configuré un environnement d'apprentissage complet (Visual Studio Code, Docker, GitHub, MySQL) me permettant de travailler de manière autonome et efficace sur le projet.
- 6.4. Développer son projet professionnel Ce projet m'a permis d'enrichir concrètement mes compétences en développement backend et frontend, en cohérence avec mon orientation SLAM et mon projet professionnel dans le développement applicatif.