SQLite / backend/server.js
Sous-requêtes Mathématiques (Subqueries)
- Problème : Récupérer les SAEs, puis faire une requête API distincte pour compter les rendus de chaque SAE ralentirait considérablement le serveur.
- Solution : Déléguer le calcul mathématique directement au moteur de la base de données SQLite grâce aux sous-requêtes imbriquées (
SELECT COUNT(*)).
- Métriques : La requête calcule simultanément le nombre de travaux déposés ET le nombre total d'étudiants ciblés par la classe de la SAE.
/* Route GET /api/sae (Mode Enseignant) */
SELECT SAE.*,
-- 1. Compte le nombre de travaux déjà rendus pour cette SAE précise
(SELECT COUNT(*) FROM Rendus WHERE Rendus.sae_id = SAE.id) AS nb_rendus,
-- 2. Compte combien d'élèves sont concernés par cette SAE
(SELECT COUNT(*) FROM Comptes
WHERE role = 'etudiant'
AND (Comptes.classe = SAE.classe_cible OR SAE.classe_cible = 'Toutes')
) AS nb_etudiants_cibles
FROM SAE
WHERE auteur_id = ?
React / frontend/src/App.jsx
Logique de ratio (Frontend)
- Réception : Le frontend reçoit deux nouvelles propriétés dans l'objet SAE :
nb_rendus et nb_etudiants_cibles.
- Protection Mathématique : Avant de calculer le ratio, le code vérifie que le diviseur (
nb_etudiants_cibles) est strictement supérieur à 0 pour éviter une erreur de division par zéro (Infinity/NaN).
- Arrondi : L'utilisation de
Math.round() permet d'obtenir un pourcentage propre sans décimales.
{/* Algorithme exécuté pour chaque carte SAE du Dashboard Enseignant */}
{saes.map(sae => {
// Calcul sécurisé du pourcentage de complétion
const pourcentage = sae.nb_etudiants_cibles > 0
? Math.round((sae.nb_rendus / sae.nb_etudiants_cibles) * 100)
: 0;
return (
{/* ... Titre et infos ... */}
);
})}
React / frontend/src/App.jsx
Barre de Progression Dynamique
- CSS Inline (Style React) : Contrairement à une feuille de style classique, la largeur de la jauge doit être modifiée dynamiquement en JavaScript.
- Template Literal : Le pourcentage calculé précédemment est injecté directement dans l'attribut CSS
width: `${pourcentage}%`.
- Feedback : Un compteur textuel (ex: "75% rendus") accompagne la barre pour une lecture plus précise.
{/* Structure JSX de la barre d'avancement */}
{/* Conteneur gris (100% de largeur) */}
{/* Jauge colorée dynamique */}
{/* Indication textuelle */}
{pourcentage}% rendus