Module Enseignant : Gestion du Trombinoscope des Classes

Retour à l'organigramme
Node.js / backend/server.js

Récupération globale des étudiants

  • Principe : Pour éviter de solliciter la base de données à chaque fois que le professeur clique sur une classe différente, le backend envoie la liste globale des étudiants une seule fois au chargement.
  • Sécurité d'accès : L'accès est strictement réservé aux rôles enseignant ou admin. Les étudiants ne peuvent pas télécharger la liste des inscrits de l'école.
  • Minimisation : Seuls les champs nécessaires (id, nom, prenom, mail, classe) sont renvoyés, excluant les mots de passe hachés.
app.get('/api/enseignant/etudiants', verifierToken, async (req, res) => {
    // Vérification du rôle
    if (req.user.role !== 'enseignant' && req.user.role !== 'admin') {
        return res.status(403).json({ message: "Accès interdit" });
    }
    
    try {
        // Extraction ciblée (uniquement les comptes étudiants)
        const etudiants = await db.all(`
            SELECT id, nom, prenom, mail, classe 
            FROM Comptes 
            WHERE role = 'etudiant' 
            ORDER BY nom ASC
        `);
        
        res.json(etudiants);
    } catch (error) {
        res.status(500).json({ message: "Erreur serveur" });
    }
});
React / frontend/src/App.jsx

Filtrage Local (Côté Navigateur)

  • Stockage : La liste entière est stockée dans le tableau d'état etudiants.
  • Menu Interactif : Quand l'enseignant clique sur "MMI-A1" dans la barre latérale, la variable d'état classeGeree se met à jour.
  • Rendu Réactif : La fonction .filter() de JavaScript ne conserve à l'écran que les étudiants dont la classe correspond à classeGeree. La transition est instantanée.
{/* Rendu de la vue "Gestion" dans App.jsx */}


Liste des élèves inscrits en {classeGeree}




  {/* Filtrage dynamique avant le mapping */}
  {etudiants
    .filter(e => e.classe === classeGeree)
    .map(e => (
      

        {e.nom} {e.prenom}
        {e.mail}
      

  ))}
  
  {/* Message préventif si la classe est vide */}
  {etudiants.filter(e => e.classe === classeGeree).length === 0 && (
      
Aucun étudiant n'est inscrit dans cette classe pour le moment.

  )}
React / frontend/src/services/saeServices.js

Action : Transférer un étudiant

  • Cas d'usage : Un étudiant s'est trompé de classe à l'inscription ou a changé de groupe. Le professeur peut le réassigner.
  • Appel API (PUT) : Le service envoie la nouvelle classe via la méthode HTTP PUT (utilisée pour les mises à jour partielles).
  • Rafraîchissement : Une fois le succès validé, React recharge la liste globale, et l'étudiant "disparaît" de l'écran pour réapparaître dans sa nouvelle classe.
/* Service de mise à jour (saeServices.js) */
updateEtudiantClasse: async (etudiantId, nouvelleClasse, token) => {
    const response = await fetch(`${API_BASE_URL}/enseignant/etudiants/${etudiantId}/classe`, {
        method: 'PUT',
        headers: { 
            'Content-Type': 'application/json', 
            'Authorization': `Bearer ${token}` 
        },
        // On ne met à jour que ce champ précis
        body: JSON.stringify({ nouvelleClasse })
    });
    
    if (!response.ok) throw new Error("Échec de l'assignation");
    return await response.json();
}