Chapitre 3 — Visite guidée de l’interface 5.2

Partie 1 : Découvrir Moodle — Chapitre 3/5 Public : développeur web débutant sur Moodle. Toujours zéro code — ici on regarde l’interface et on met des images sur le vocabulaire du chapitre 2. Version de référence : Moodle 5.2 (Bootstrap 5.3, navigation refondue depuis la 4.0, tableau de bord modernisé).

⏱️ TL;DR

• L’interface de Moodle 5.2 repose sur quatre zones stables partout : la barre de navigation primaire (en haut), le fil d’Ariane (breadcrumb), la colonne de contenu central, et des tiroirs latéraux (drawers) rétractables — gauche pour la navigation du cours, droite pour les blocs.
• Après connexion, l’utilisateur arrive sur le tableau de bord (Dashboard), page personnelle et personnalisable ; le site home est une page distincte, vitrine du site.
• Une page de cours s’organise en sections contenant des activités et ressources ; un cours a un index de cours (tiroir gauche) qui sert de table des matières navigable.
• Le mode édition (interrupteur en haut à droite) est le grand basculement : hors édition on consomme, en édition on construit (glisser-déposer, menus « ⋮ » d’actions).
• La navigation secondaire est un menu d’onglets contextuel : dans un cours il donne accès à Cours / Paramètres / Participants / Notes / Rapports / Plus.
• Le menu utilisateur (avatar, en haut à droite) regroupe profil, notes, préférences, langue et déconnexion ; la cloche 🔔 et la bulle 💬 gèrent notifications et messagerie.
• L’administration du site (Site administration) est un arbre géant d’onglets et de réglages, réservé à l’admin ; c’est là que « tout se règle », et on y reviendra sans cesse en Partie 2.
• Ce que voit un utilisateur dépend entièrement de son rôle et du contexte : étudiant, enseignant et admin ne voient pas les mêmes menus sur la même page.

🎯 Objectifs

À la fin de ce chapitre, vous saurez :

• Nommer les zones structurelles de l’interface 5.2 et dire à quoi sert chacune.
• Distinguer tableau de bord, page d’accueil du site et page de cours.
• Comprendre le rôle central du mode édition et ce qu’il change.
• Lire la navigation primaire / secondaire / fil d’Ariane et toujours savoir « où vous êtes ».
• Anticiper ce que voit chaque rôle (étudiant / enseignant / admin) sur un même écran.
• Repérer l’entrée de l’administration du site et comprendre son organisation d’ensemble.

1. Pourquoi visiter l’interface avant de coder

Vous allez passer des centaines d’heures dans cette interface : pour tester vos plugins, vérifier qu’un thème s’applique, reproduire le bug d’un client, ou simplement comprendre ce qu’un utilisateur décrit. Si vous ne savez pas nommer précisément « le tiroir de gauche », « la navigation secondaire » ou « le menu ⋮ de l’activité », chaque échange avec un collègue Moodle sera flou et chaque ticket ambigu.

Il y a une raison plus profonde, spécifique au développeur. Dans Moodle, l’interface est le reflet direct de l’architecture. Le fil d’Ariane, c’est la hiérarchie des contextes (chapitre 2). Les onglets de la navigation secondaire sont générés par une API de navigation que vous manipulerez en Partie 5. Le mode édition déclenche des capabilities précises. Les blocs de la colonne de droite sont des plugins (block_*). Apprendre à lire l’interface, c’est déjà lire l’architecture par transparence — et l’inverse est vrai : quand vous comprendrez le code, l’interface vous paraîtra évidente.

💡 Pour un dev React : pensez à l’interface Moodle comme à une application server-rendered avec un layout stable (à la manière d’un layout.tsx racine dans Next.js) et un contenu qui change par route. Les drawers, la barre de navigation et le footer sont le layout ; la colonne centrale est le children. Le « mode édition » est un état global (un booléen en session) qui fait basculer l’ensemble du rendu, un peu comme un ?edit=1 qui rechargerait tout l’arbre avec des composants d’édition à la place des composants de lecture.

2. Le squelette : les quatre zones de tout écran Moodle 5.2

Quel que soit l’écran, Moodle 5.2 (thème Boost, celui par défaut) pose la même ossature. Visualisons-la :

┌──────────────────────────────────────────────────────────────────────┐
│  [≡] Logo   Accueil  Tableau de bord  Mes cours  ▾        🔔  💬  (Avatar▾) │  ← Navigation primaire (fixe, en haut)
├──────────────────────────────────────────────────────────────────────┤
│  Accueil / Ma catégorie / Programmation Web 101                        │  ← Fil d'Ariane (breadcrumb)
│                                                                        │
│  Cours   Paramètres   Participants   Notes   Rapports   Plus ▾          │  ← Navigation secondaire (onglets contextuels)
├────────────┬─────────────────────────────────────────┬─────────────────┤
│            │                                         │                 │
│  Index du  │        CONTENU CENTRAL                  │   Blocs         │
│  cours     │        (sections, activités,            │   (colonne de   │
│  (drawer   │         formulaire, rapport…)           │    droite,      │
│   gauche)  │                                         │    drawer)      │
│            │                                         │                 │
├────────────┴─────────────────────────────────────────┴─────────────────┤
│  Pied de page : mentions, contact, « Résumé de conservation des données » │  ← Footer
└──────────────────────────────────────────────────────────────────────┘

Détaillons chaque zone.

1. La navigation primaire (en haut, toujours présente). À gauche, un bouton hamburger [≡] ouvre/ferme le tiroir gauche, puis le logo du site et une série de liens de premier niveau : Accueil du site, Tableau de bord, Mes cours, et éventuellement des liens custom ajoutés par l’admin (Partie 2). À droite : l’icône de notifications (🔔), la messagerie (💬), et le menu utilisateur (votre avatar).

2. Le fil d’Ariane (breadcrumb). Juste sous la barre primaire, il indique votre position dans la hiérarchie : Accueil / Catégorie / Cours / Activité. Ce n’est pas décoratif : cette hiérarchie est la hiérarchie des contextes de Moodle (système → catégorie → cours → module). Cliquer sur un maillon remonte d’un niveau.

3. La navigation secondaire (onglets contextuels). Une rangée d’onglets qui dépend de l’endroit où vous êtes. Dans un cours (et si vous êtes enseignant) : Cours, Paramètres, Participants, Notes, Rapports, Plus ▾. Sur votre profil : Profil, Préférences, etc. C’est le menu qui « colle » au contexte courant.

4. Le contenu central + les tiroirs. Le cœur variable de la page, encadré par deux tiroirs rétractables :

• Tiroir gauche : dans un cours, c’est l’index du cours (Course index), une table des matières cliquable de toutes les sections et activités. Hors cours, il contient la navigation générale.
• Tiroir droit : les blocs (Blocks), ces petites boîtes latérales (calendrier, derniers badges, progression…). Chaque bloc est un plugin.

⚠️ Piège : sur mobile ou fenêtre étroite, les deux tiroirs se referment automatiquement et deviennent des boutons. Un débutant croit souvent qu’« il manque des choses » sur petit écran : non, tout est là, replié. Le responsive de Boost (Bootstrap 5) masque les drawers sous un certain point de rupture.

3. La page de connexion

Avant tout, on se connecte. La page de login (/login/index.php) présente, par défaut, un formulaire identifiant / mot de passe, un lien « Mot de passe oublié ? », éventuellement un bouton « Créer un compte » (si l’auto-inscription par e-mail est activée), et des boutons de connexion externe si l’admin a configuré Google, Microsoft, SAML, CAS, LDAP, etc. (ce sont des plugins d’authentification, Partie 2).

Trois choses à retenir pour un développeur :

• La page de connexion est hautement personnalisable par le thème (Partie 8) : image de fond, logo, texte d’accueil, disposition. Beaucoup de projets commencent par la « rebrander ».
• La méthode d’authentification est découplée de l’interface : le même formulaire peut valider un mot de passe local, interroger un annuaire LDAP ou déléguer à un fournisseur OAuth 2.
• Il existe un compte administrateur créé à l’installation (souvent nommé admin), au sommet de la hiérarchie des permissions. On y reviendra : c’est un utilisateur à part, quasi tout-puissant.

4. Le tableau de bord (Dashboard) vs la page d’accueil du site

Deux pages que les débutants confondent systématiquement. Elles sont distinctes et servent des buts opposés.

4.1 Le tableau de bord (Dashboard)

C’est votre page, personnelle, affichée juste après la connexion (par défaut). En 5.2, elle est modernisée et met en avant :

• un bloc Chronologie (Timeline) listant vos échéances à venir (devoirs, quiz…) — la fonctionnalité la plus utile pour un étudiant ;
• un bloc Calendrier ;
• l’accès rapide à Mes cours (avec vignettes, filtres « en cours / à venir / passés », tri) ;
• éventuellement d’autres blocs que l’utilisateur (ou l’admin, via une page par défaut) a ajoutés.

Le tableau de bord est personnalisable par l’utilisateur en mode édition : chacun peut ajouter/retirer/déplacer ses blocs. L’admin peut définir un tableau de bord par défaut imposé à tous, puis, au choix, autoriser ou non sa personnalisation.

4.2 La page d’accueil du site (Site home / Front page)

C’est la vitrine publique du site, accessible via « Accueil du site ». Souvent visible même sans être connecté (selon les réglages). On y trouve typiquement la liste ou l’arbre des catégories de cours, un message d’accueil, des blocs de présentation. Techniquement, la page d’accueil est un cours particulier (le cours de id = 1, le site course) : ses blocs et ses activités se gèrent presque comme ceux d’un vrai cours. Cette bizarrerie — « la page d’accueil est un cours » — surprend, mais elle est cohérente avec le modèle de données (chapitre 2).

⚠️ Piège : un réglage d’administration décide de la page d’atterrissage post-login (tableau de bord ou page d’accueil ou « mes cours »). Si un client dit « après connexion je tombe sur la mauvaise page », c’est ce réglage (Administration du site → Apparence → Navigation), pas un bug.

5. Anatomie d’une page de cours

C’est l’écran où vous passerez le plus de temps. Prenons un cours « Programmation Web 101 ».

5.1 Les sections

Le contenu central d’un cours est découpé en sections. Selon le format de cours choisi (chapitre 2, détaillé en Partie 3) :

• Format thématique (Topics) : sections nommées librement (« Introduction », « HTML/CSS », « JavaScript »…). Le plus courant.
• Format hebdomadaire (Weekly) : une section par semaine, datée automatiquement.
• Format une-section-par-page, format social (centré sur un forum), etc.

En 5.2, chaque section peut être repliée/dépliée, mise en avant (highlight), et — nouveauté récente consolidée — la navigation entre sections peut se faire « une page à la fois ».

5.2 Activités et ressources

Dans chaque section, on trouve des activités (interactives, notables : Devoir, Quiz, Forum, H5P…) et des ressources (contenus statiques : Fichier, Page, URL, Dossier, Étiquette). Chaque élément affiche une icône typée par couleur (les activity icons redessinés depuis la 4.0), son nom, parfois une description, un badge d’achèvement (« À faire » / « Terminé »), et des infos de restriction (« Disponible à partir du… »).

💡 Pour un dev React : une activité placée dans un cours n’est pas « le plugin » lui-même, c’est une instance de ce plugin dans ce cours — un course module (cm). Le même plugin mod_quiz peut avoir dix instances dans dix cours. Mentalement : le plugin est le composant, le course module est le composant monté avec ses props (<Quiz courseId=… config=… />).

5.3 L’index du cours (Course index, tiroir gauche)

Le tiroir de gauche affiche l’arborescence complète du cours : sections → activités. C’est une table des matières navigable : cliquer y fait défiler la page jusqu’à l’élément, et en mode édition on peut glisser-déposer activités et sections directement dans cet index pour les réordonner. Un point vert/gris y indique aussi l’achèvement. C’est l’un des apports d’ergonomie majeurs des versions modernes.

5.4 Les blocs (tiroir droit)

La colonne de droite empile des blocs : Calendrier, Événements à venir, Progression, Derniers badges, Recherche dans les forums, HTML libre… Chaque bloc est un plugin (block_*) qu’un enseignant (avec la capability voulue) peut ajouter en mode édition. Beaucoup de sites en production réduisent volontairement les blocs pour épurer l’interface.

6. Le mode édition : le grand basculement

En haut à droite de la plupart des pages se trouve un interrupteur « Mode édition » (Edit mode). C’est le geste fondamental de Moodle.

Mode édition désactivé (par défaut) — vous consommez : vous lisez les ressources, rendez les devoirs, passez les quiz. C’est la vue de l’étudiant, et celle de l’enseignant quand il « vérifie ».

Mode édition activé — vous construisez. Apparaissent alors partout :

• des poignées de glisser-déposer (⠿) pour réordonner sections, activités et blocs ;
• un bouton « + Ajouter une activité ou ressource » dans chaque section (ouvre le sélecteur d’activités, une modale) ;
• un menu « ⋮ » (trois points, Edit menu) sur chaque élément : Paramètres, Déplacer, Cacher/Afficher, Dupliquer, Assigner des rôles, Supprimer ;
• la possibilité de renommer en place, d’ajouter des sections, d’ajouter des blocs (via « Ajouter un bloc » dans le tiroir droit).

Qui voit l’interrupteur ? Uniquement ceux qui ont la capability d’éditer ce contexte — typiquement l’enseignant du cours et l’admin. Un étudiant n’a jamais de mode édition sur un cours. C’est le premier exemple concret du principe du chapitre 2 : l’interface est fonction du rôle et du contexte.

⚠️ Piège : le mode édition existe aussi sur le tableau de bord, sur la page d’accueil, et dans les préférences de blocs — mais ce sont des interrupteurs indépendants, chacun sur sa page. Activer l’édition d’un cours n’active pas celle du tableau de bord.

💡 Pour un dev React : le sélecteur « Ajouter une activité ou ressource » est une modale chargée en AJAX (module core_course/activitychooser). Les menus « ⋮ » et le drag-and-drop sont pilotés par la bibliothèque interne core/reactive (un mini state-manager maison, cousin conceptuel de Redux/Zustand) que vous découvrirez en Partie 7. Autrement dit, l’éditeur de cours est déjà, aujourd’hui, une petite SPA réactive greffée sur du rendu serveur.

7. Navigation primaire, secondaire, fil d’Ariane : ne jamais être perdu

La refonte de la navigation (amorcée en 4.0, stabilisée en 5.x) répartit les liens sur trois niveaux, et comprendre cette répartition suffit à toujours savoir où l’on est.

Un exemple concret. Vous êtes enseignant et vous regardez les remises d’un devoir :

• Primaire : « Mes cours » est actif (vous êtes dans l’espace cours).
• Secondaire : dans le cours, l’onglet actif dépend de ce que vous faites ; sur l’activité elle-même, la secondaire propose Paramètres, Remises, Notes, etc. propres à cette activité.
• Fil d’Ariane : Accueil / Sciences / Programmation Web 101 / Devoir : maquette / Remises.

Le menu « Plus ▾ » de la navigation secondaire est un débordement : il regroupe les entrées qui ne tiennent pas dans la barre (banque de questions, badges, filtres, réutilisation de cours, etc.). Quand vous « ne trouvez pas » une fonction d’un cours, regardez d’abord sous « Plus ».

8. Le menu utilisateur, les notifications et la messagerie

En haut à droite, trois points d’accès personnels :

• 🔔 Notifications : un badge chiffré ouvre un panneau listant les notifications (devoir noté, message de forum, échéance…). Chaque type de notification peut être réglé (web, e-mail, mobile) dans les préférences de notification.
• 💬 Messagerie : la messagerie interne (personne à personne et de groupe), avec un panneau latéral. C’est un vrai sous-système (contacts, groupes, préférences), pas un gadget.
• Avatar ▾ (menu utilisateur) : Profil, Notes (vos notes dans tous vos cours), Calendrier, Fichiers personnels, Préférences (le hub de tous vos réglages perso : compte, notifications, badges, langue…), Changer de langue, et Déconnexion. C’est aussi ici qu’un admin trouve le « Prendre le rôle de… » et le retour après une usurpation d’identité (login as).

💡 Pour un dev React : la page Préférences (/user/preferences.php) est le tableau de bord des réglages utilisateur — un hub de liens généré dynamiquement selon les plugins installés et les capabilities de la personne. Beaucoup de plugins y ajoutent leur propre lien de préférences via un callback. Retenez l’adresse : vous y reviendrez pour tester tout ce qui touche aux préférences par utilisateur.

9. L’administration du site : l’arbre géant

Réservée à l’administrateur (et aux rôles à qui on a délégué des morceaux), l’Administration du site (Site administration) est accessible depuis la navigation (souvent un lien « Administration du site » dans la primaire ou via l’engrenage selon le thème). C’est un immense arbre d’onglets et de pages de réglages — plusieurs milliers de paramètres. Ses grandes branches (que vous explorerez en Partie 2) :

• Utilisateurs : comptes, permissions (rôles et capabilities !), inscription, authentification.
• Cours : gestion des catégories/cours, réglages par défaut, sauvegardes.
• Notes (Grades) : réglages globaux du carnet de notes.
• Plugins : la liste de tous les plugins installés, activables/désactivables, avec leurs réglages. Le point d’entrée du développeur : c’est ici qu’apparaît votre plugin après installation.
• Apparence : thèmes, navigation, réglages de la page d’accueil, logos.
• Serveur : chemins système, e-mail, tâches planifiées (cron), sessions, statistiques d’environnement.
• Rapports : logs, rapports en direct, performance, sécurité.
• Développement (Development) : mode débogage, purge des caches, éditeur de thème, générateur de données de test. À connaître par cœur : c’est là qu’on active DEBUG_DEVELOPER et qu’on purge les caches (le geste que vous ferez le plus souvent en développant).

Deux aides indispensables dans cet océan :

• Une barre de recherche en tête de l’administration : tapez un mot-clé (« proxy », « behat », « lti »…) et Moodle liste les réglages correspondants. Utilisez-la plutôt que de chercher à la main.
• Chaque réglage porte un libellé, une description, et souvent la valeur par défaut recommandée.

⚠️ Piège : ne confondez pas les réglages du site (globaux, dans l’Administration du site) et les paramètres d’un cours (locaux, onglet Paramètres du cours). Beaucoup de réglages existent aux deux niveaux : le site fixe une valeur par défaut, le cours peut la surcharger (quand c’est autorisé). Cette logique « défaut global → surcharge locale » est omniprésente dans Moodle et calque la hiérarchie des contextes.

10. Le même écran vu par trois rôles

Insistons, car c’est la clé mentale de tout le reste. Ouvrez la même page de cours avec trois comptes différents et vous verrez trois interfaces :

Ce n’est pas un « thème par rôle » : c’est le même rendu conditionné par les capabilities. Quand vous développerez, vous écrirez sans cesse if ($canedit) { … } (via has_capability()), et l’interface se pliera d’elle-même à qui regarde. D’où un réflexe de test essentiel : toujours vérifier une fonctionnalité avec un compte étudiant, pas seulement en admin — c’est le meilleur moyen de repérer une fuite de permission.

💡 Pour un dev React : c’est exactement le pattern « rendu conditionnel par autorisation » que vous connaissez ({user.canEdit && <EditButton/>}), sauf que la source de vérité n’est pas un objet user.role binaire mais un système de capabilities × contextes très fin (Partie 2). L’interface n’a pas trois versions codées à la main : elle a une version qui interroge les permissions à chaque bloc.

11. Synthèse et points à retenir

• L’interface 5.2 = navigation primaire (globale) + secondaire (contextuelle) + fil d’Ariane (position) + contenu central entre deux tiroirs (index du cours à gauche, blocs à droite).
• Tableau de bord = ma page perso post-login ; page d’accueil = vitrine du site (techniquement le cours id = 1). Ne pas confondre.
• Une page de cours = des sections contenant activités (interactives) et ressources (statiques), avec un index de cours navigable.
• Le mode édition est le basculement consommer ↔ construire ; il n’apparaît qu’à qui a la capability d’éditer.
• L’administration du site est l’arbre géant des réglages ; retenez surtout Plugins (vos plugins) et Développement (débogage + purge des caches).
• Sur un même écran, étudiant, enseignant et admin voient des interfaces différentes — pilotées par les capabilities, pas par des versions séparées. Testez toujours en étudiant.

✏️ Exercices

Ces exercices supposent que vous avez accès à une instance Moodle (par exemple le site de démo public school.moodledemo.net , qui fournit des comptes étudiant, enseignant et admin). Aucun code : on observe et on décrit.

Exercice 1 — Cartographier un écran. Connectez-vous, ouvrez n’importe quelle page de cours et, sur une capture d’écran (ou un schéma à main levée), annotez les quatre zones structurelles : navigation primaire, fil d’Ariane, tiroir gauche, tiroir droit. Ajoutez la navigation secondaire.

Exercice 2 — Dashboard ou Site home ? Pour chacune de ces phrases, dites s’il s’agit du tableau de bord ou de la page d’accueil du site : (a) « Je vois la liste de mes échéances de la semaine. » (b) « Un visiteur non connecté voit le catalogue des cours. » (c) « Chaque utilisateur peut y organiser ses propres blocs. » (d) « Techniquement, c’est le cours d’id = 1. »

Exercice 3 — Chasse au mode édition. Connecté comme enseignant, activez le mode édition dans un cours. Listez cinq actions devenues possibles qui ne l’étaient pas hors édition. Puis reconnectez-vous en étudiant : l’interrupteur est-il là ? Pourquoi ?

Exercice 4 — Sous quel menu ? Un enseignant veut : (a) accéder à la banque de questions du cours ; (b) voir les logs d’activité du cours ; (c) changer le format du cours (thématique → hebdomadaire) ; (d) inscrire un étudiant. Où cliquer dans la navigation secondaire ?

Exercice 5 — Où purge-t-on les caches ? Sans utiliser la barre de recherche, naviguez dans l’Administration du site jusqu’à la purge des caches. Notez le chemin d’onglets. Puis refaites-le avec la barre de recherche (tapez « cache »). Comparez.

Exercice 6 — Trois rôles, un écran. Sur le même cours, ouvrez l’onglet Notes successivement en étudiant puis en enseignant. Décrivez la différence. Que vous apprend-elle sur le lien interface ↔ permissions ?

🧠 Quiz de révision

Q1. Quelles sont les quatre zones structurelles d’un écran Moodle 5.2 ?

Q2. Quelle est la différence fondamentale entre le tableau de bord et la page d’accueil du site ?

Q3. Qui voit l’interrupteur « Mode édition » sur un cours, et pourquoi un étudiant ne le voit-il pas ?

Q4. Dans un cours, où cherchez-vous d’abord une fonction que vous ne trouvez pas dans la navigation secondaire ?

Q5. Citez les deux branches de l’Administration du site qu’un développeur consulte le plus, et pourquoi.

Chapitre suivant : 04 — L’écosystème Moodle, où l’on sort du logiciel pour explorer ce qui gravite autour : plugin directory, communauté, tracker, Moodle Academy, partenaires, app mobile — tout ce que vous croiserez en cherchant de l’aide ou un plugin.