Jour 25 – Routes, vues et contrôleurs des pages du projet

Aujourd’hui, dans notre aventure #100JoursPourCoder, nous allons poser les fondations essentielles pour organiser notre site Créa-code. Notre objectif est simple mais important : créer toutes les routes, contrôleurs et vues pour chaque page du site déjà reliée par un lien.

Nous n’allons pas encore remplir ces pages avec leur contenu définitif, mais nous allons les rendre accessibles, structurellement correctes, et prêtes à être enrichies. C’est un gain de temps énorme pour la suite. Avant de commencer à coder, prenons un moment pour revenir sur le principe MVC que nous utilisons.

Rappel de notre architecture MVC
Création des routes
Création des contrôleurs
Où placer les vues ?
Tester les pages
Pourquoi faire ça maintenant ?

Rappel de notre architecture MVC

Nous utilisons un modèle très répandu en développement web : MVC, pour Modèle – Vue – Contrôleur. Ce modèle permet de bien organiser notre code en séparant les responsabilités.

Imaginons une page comme « Mon compte ». Quand un utilisateur clique sur ce lien, plusieurs choses se passent :

Une route va dire : « ah, tu veux afficher /mon-compte ? Je sais quel contrôleur s’en charge ! »
Le contrôleur reçoit la demande, vérifie si besoin des données, puis décide de quelle vue afficher.
La vue contient le code HTML à afficher dans le navigateur.

Cela permet à chaque morceau du site d’être simple, clair, et facile à maintenir.

Nous avons plusieurs liens dans notre interface utilisateur (parcours, challenge…). Chacun de ces liens doit pointer vers une vraie page. Aujourd’hui, certaines d’entre elles ne sont pas encore créées, ce qui entraîne des erreurs ou des pages 404.

Notre objectif du jour est donc de créer les routes dans le fichier app/Route/Routes.php, de créer un contrôleur pour chaque page et de créer une vue avec un contenu temporaire pour chaque page

Création des routes

Les routes sont comme des panneaux de signalisation pour notre site. Quand un visiteur tape /classement, la route va dire : « Cette URL est gérée par ClassementController, méthode index() ».

Dans notre projet, nous avons un fichier spécialement prévu pour ça :
app/Route/Routes.php. Voici un exemple simple de route que nous allons utiliser :

$router->get('/classement', 'ClassementController@index');

Décomposons cette ligne ensemble :

$router est l’objet qui contient toutes les routes de notre site.
get() signifie que cette route répond aux requêtes HTTP GET, c’est-à-dire les visites classiques de pages (par opposition à POST, utilisé pour envoyer des formulaires).
/classement est le chemin dans l’URL. Si l’utilisateur va sur https://code.crea-troyes.fr/classement, cette route sera activée.
'ClassementController@index' signifie que cette URL appelle la méthode index() du contrôleur ClassementController.

C’est une façon de dire :

« Quand quelqu’un va sur cette page, appelle cette méthode pour lui répondre. »

Nous allons maintenant créer toutes les routes pour les pages suivantes :

Parcours
Challenges
Classement
Mes récompenses
Mon compte
Mes statistiques
CGU

Voici donc ce que nous allons ajouter dans notre fichier app/Route/Routes.php :

// Pages PUBLIQUES de l'application
$router->get('/classement', 'ClassementController@index');
$router->get('/cgu', 'CguController@index');

// Pages PRIVÉES de l'application
$router->get('/parcours', 'ParcoursController@index')->middleware('auth');
$router->get('/challenges', 'ChallengesController@index')->middleware('auth');
$router->get('/recompenses', 'RecompensesController@index')->middleware('auth');
$router->get('/mon-compte', 'CompteController@index')->middleware('auth');
$router->get('/statistiques', 'StatistiquesController@index')->middleware('auth');

On peut choisir l’URL qu’on veut, mais il est recommandé d’utiliser des URLs claires, lisibles, et sans accents ni majuscules. Par exemple, /mon-compte plutôt que /MonCompte.

L’accès à certaines pages est restreint : sans authentification via le formulaire dédié, certaines pages restent inaccessibles aux simples visiteurs grâce aux middlewares.

Pour rappel, la méthode middleware fonctionne ainsi :

$router->registerMiddleware('auth', function () {
    if (!isset($_SESSION['user'])) {
        header('Location: /login');
        return false;
    }
    return true;
});

Création des contrôleurs

Maintenant que les routes sont définies, nous allons coder les contrôleurs associés. Un contrôleur est un fichier PHP qui va gérer la logique liée à une page. Tous les contrôleurs sont situés dans le dossier :

app/Controllers/

Chaque contrôleur doit être une classe PHP qui étend notre BaseController. Chaque contrôleur doit au minimum avoir une méthode index() comme indiqué dans chacune des routes. Prenons un exemple de contrôleur pour la page Classement :

<?php
namespace App\Controllers;

use App\Core\Controller;
use App\Core\View;

class ClassementController extends Controller
{
    public function index(): void
    {
        $title = "Classement - Créa-code";
        $desc = "Contenu de la balise meta description pour la page classement";

        View::render('classement', compact('title', 'desc'));

    }
}

Explication ligne par ligne :

namespace App\Controllers; : Cela indique à PHP que ce fichier appartient à l’espace de nom App\Controllers.
use App\Core\Controller; et use App\Core\View; permet de charger les classes Controller et View.
class ClassementController extends Controller : Nous créons une nouvelle classe ClassementController qui hérite de notre classe Controller. Cela nous donne accès à des fonctions utiles par l’héritage.
public function index() : C’est la méthode appelée quand un utilisateur visite l’url /classement.
View::render : Cela signifie que nous allons afficher la vue située dans app/Views/classement.php en lui transmettant différentes variables.

Nous allons donc créer des contrôleurs similaires pour chaque page.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Exemple pour le contrôleur « Parcours »

<?php
namespace App\Controllers;

use App\Core\Controller;
use App\Core\View;

class ParcoursController extends Controller
{
    public function index(): void
    {
        $title = "Parcours - Créa-code";
        $desc = "Contenu de la balise meta description pour la page parcours";

        View::render('parcours', compact('title', 'desc'));

    }
}

Et ainsi de suite pour les autres pages :

ChallengesController
RecompensesController
CompteController
StatistiquesController
CguController

Chaque fichier aura ce même squelette de base, en changeant uniquement le nom du contrôleur, le nom de la vue et le contenu des datas.

Où placer les vues ?

Dans l’architecture MVC que nous avons choisie, les vues sont placées dans le dossier :

app/Views/

Chaque fichier de ce dossier représente une page HTML (ou presque) qui sera affichée à l’utilisateur. Nous allons donc créer les fichiers suivants :

app/Views/parcours.php
app/Views/challenges.php
app/Views/classement.php
app/Views/recompenses.php
app/Views/mon-compte.php
app/Views/statistiques.php
app/Views/cgu.php

Vous remarquerez que dans les contrôleurs, nous avons utilisé :

View::render('classement', ...);

Ce qui signifie que le fichier attendu est app/Views/classement.php.

Structure minimale d’une vue

Pour l’instant, notre objectif n’est pas de créer le design ou le contenu final, mais de nous assurer que chaque page existe, qu’elle fonctionne, et qu’on puisse la différencier des autres.

Voici le contenu temporaire que l’on va mettre dans chaque fichier :

Exemple : `app/Views/classement.php`

<div class="container">
    <h1>Classement</h1>
    <p>Page est en cours de construction.</p>
</div>

Ce code HTML nous permet simplement de confirmer que la vue est bien liée à la route et au contrôleur. Elle affiche un titre clair pour nous repérer.

Il va falloir ajouter ce code HTML à toutes les vues juste en modifiant le contenu de la balise h1.

Tester les pages

Maintenant que tout est en place, nous devons tester chaque lien du site pour vérifier que :

L’URL fonctionne sans erreur.
Le bon titre s’affiche.
Aucun message d’erreur PHP n’apparaît.

Si chaque page s’affiche avec son titre et son message « en construction », c’est que nous avons réussi !

Pour ajouter un lien, on utilise la structure suivante :

<a href="<?= BASE_URL ?>classement">Classement</a>

Pourquoi faire ça maintenant ?

On pourrait se dire : « Pourquoi créer des pages vides maintenant ? »

Cela permet d’éviter les erreurs 404 sur les liens déjà présents. On peut également travailler le design plus tard, sans se soucier de la structure technique. Et, chose non négligeable, on assure une navigation fluide même dans un site encore en développement.

C’est une étape souvent négligée, mais essentielle pour poser une base solide.

Nous avons maintenant :

Déclaré toutes les routes nécessaires.
Créé les contrôleurs pour chaque page.
Généré les vues associées, même vides.

Le squelette de notre site est prêt, chaque lien fonctionne, et nous pouvons construire le contenu petit à petit sans avoir à y penser plus tard. C’est comme poser toutes les fondations d’un immeuble avant de monter les étages.

Dans les prochains jours de notre aventure, nous allons remplir ces pages, y ajouter du contenu, des statistiques, des récompenses, des challenges, et bien plus.

La suite demain …

Live on Twitch

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr