Construire une première page Website

1. Créez une page Website avec votre addon

Vous avez vu que l’éditeur Website permet de créer une page sans code. Nous allons maintenant faire autre chose : ajouter une page contrôlée par elearning_portal. Elle restera simple et n’affichera encore aucune formation. Son rôle est de montrer où le code intervient lorsque le site doit utiliser votre addon.

Ajoutez website aux dépendances de l’addon et déclarez le fichier qui contient la page.

{
    "name": "Portail de formations",
    "summary": "Relier des formations aux notes du module de formation",
    "version": "19.0.1.0.0",
    "category": "Training",
    "author": "Formation Odoo",
    "license": "LGPL-3",
    "depends": ["training_hello", "website"],
    "data": [
        "security/ir.model.access.csv",
        "data/elearning_module_data.xml",
        "views/elearning_module_views.xml",
        "views/templates.xml",
    ],
    "application": True,
    "installable": True,
}

Créez ensuite une route. Elle répondra à l’adresse /formations et affichera le template nommé elearning_portal.formations_page. Pour le moment, cette page ne lit aucun record.

from odoo import http
from odoo.http import request


class ElearningPortalController(http.Controller):
    @http.route("/formations", type="http", auth="user", website=True)
    def formations_page(self):
        return request.render("elearning_portal.formations_page")

from . import main

from . import controllers
from . import models

Ces imports rendent le contrôleur actif lorsque l’addon est chargé. Sans eux, le fichier main.py existe, mais Odoo ne connaît pas la route.

Créez enfin le template de départ. L’ID formations_page est la partie finale du nom utilisé dans request.render(). Le bloc website.layout ajoute l’en-tête et le pied de page du site.

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
  <template id="formations_page" name="Page locale des formations">
    <t t-call="website.layout">
      <div id="wrap" class="oe_structure">
        <main class="container py-5">
          <h1>Formations à découvrir</h1>
        </main>
      </div>
    </t>
  </template>
</odoo>

<t t-call="website.layout"> place votre contenu dans l’enveloppe du site : l’en-tête, le pied de page, le thème et ses fichiers de style et de script. La dépendance website rend ce layout disponible ; sans cet appel, votre template ne récupérerait pas l’apparence du site. La propriété website=True de la route active, elle, le contexte Website pour cette page.

Redémarrez Odoo puis mettez elearning_portal à niveau depuis Apps. Ouvrez ensuite /formations. Vous devez voir le titre dans la mise en page Website. Cette page demande une session avec auth="user", mais elle ne lit encore aucune donnée.

2. Ajoutez cette page au menu Website

La route fonctionne, mais elle n’apparaît pas encore dans le site. Ajoutez-la maintenant au menu avec l’interface Website, sans modifier le XML.

1. Dans l’application Website, ouvrez Configuration → Menus.
2. Créez un menu nommé Formations.
3. Dans le champ d’URL, saisissez /formations.
4. Choisissez votre site si Odoo vous demande de le préciser, puis enregistrez.
5. Retournez sur la page d’accueil du site et rechargez-la : le lien Formations apparaît dans le menu. Cliquez dessus avec votre session interne.

À observer : votre page créée par l’addon fait maintenant partie de la navigation Website. Un visiteur non connecté qui ouvre ce lien doit se connecter, car la route utilise auth="user".

3. Enrichissez la page

Remplacez le fichier entier par la version suivante. Elle ajoute un texte d’introduction, une section et deux cartes de démonstration. À l’étape suivante, ces exemples seront remplacés par les formations de la base.

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
  <template id="formations_page" name="Page locale des formations">
    <t t-call="website.layout">
      <div id="wrap" class="oe_structure">
        <main class="container py-5">
          <header class="mb-4">
            <p class="text-muted">Prototype local</p>
            <h1>Formations à découvrir</h1>
          </header>
          <section aria-labelledby="selection-title" class="mb-5">
            <h2 id="selection-title">Une sélection pour pratiquer</h2>
            <p>Ces intitulés sont fictifs et servent seulement à tester la structure.</p>
            <div class="row g-3">
              <div class="col-12 col-md-6">
                <article class="h-100 p-3 border rounded">
                  <h3 class="h5">Premiers pas avec Odoo</h3>
                  <p>Comprendre le trajet d'un module à un écran.</p>
                </article>
              </div>
              <div class="col-12 col-md-6">
                <article class="h-100 p-3 border rounded">
                  <h3 class="h5">Construire une page Website</h3>
                  <p>Assembler une page locale et lisible.</p>
                </article>
              </div>
            </div>
          </section>
          <p>
            <a class="btn btn-outline-primary" href="/odoo/action-elearning_portal.elearning_module_action">
              Ouvrir la liste interne
            </a>
          </p>
        </main>
      </div>
    </t>
  </template>
</odoo>

Le h1 identifie la page ; chaque section a ensuite son propre h2. Le bouton ouvre la liste interne du module et demande donc une session avec les droits nécessaires. Les deux cartes sont encore des exemples ; l’étape suivante les remplacera par les formations réelles.

4. Petite activité d'observation

1. Ouvrez la page avec le navigateur à sa largeur normale et repérez l'en-tête, le titre, la navigation et la sélection.
2. Avec la touche Tab, parcourez les liens sans toucher la souris. Le focus doit rester visible.
3. Réduisez la fenêtre ou utilisez le mode appareil mobile des outils du navigateur. Vérifiez que le contenu ne déborde pas horizontalement.
4. Notez un élément qui reste lisible et un élément à améliorer pour l'étape suivante.

Résultat attendu : la page conserve un ordre de lecture logique et vous pouvez atteindre chaque lien au clavier. Sur téléphone, les colonnes passent l'une sous l'autre grâce à col-12.