Créer une page

L’installation étant terminée, il est temps de créer une nouvelle page. Pour l’instant, nous allons faire une page comment faire une page simple qui n’a pas besoin de la base de données.

Les pages Symfony suivent l’architecture MVC. Nous allons donc commencer par créer un nouveau contrôleur et la vue qui lui sera associée. Pour cela, on utilise la commande :

symfony console make:controller

Dans Symfony, la plupart du temps, quand on veut créer un nouvel élément, on utilise une commande.

Un assistant s’exécute pour vous aider à créer le contrôleur. Vous aurez à répondre à deux questions :

• Choose a name for your controller class (e.g. AgreeablePuppyController) : Donner un nom à votre controller en suivant la syntaxe de l’exemple, i.e. en commençant par une majuscule et en terminant par Controller.
• Do you want to generate PHPUnit tests ? [no] : pour l’instant, nous n’en avons pas besoin, donc vous pouvez laisser la valeur par défaut.

Il est possible de saisir directement le nom de la classe en le passant en argument de la commande :

symfony console make:controller NomClasseController

L’assistant vous annonce ensuite qu’il a créé deux nouveaux fichiers en vous indiquant leur chemin. Le premier fichier contient le contrôleur et se trouve dans le dossiersrc/controller/. Le second fichier contient la vue dans le fichier templates/.

Analysons un exemple de chacun de ces fichiers.

Le contrôleur

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

final class ExampleController extends AbstractController
{
    #[Route('/example', name: 'app_example')]
    public function index(): Response
    {
        return $this->render('example/index.html.twig', [
            'controller_name' => 'ExampleController',
        ]);
    }
}

Chaque contrôleur correspond à une fonction. La fonction créée par défaut s’appelle index, mais vous pouvez la renommer.

Comme on a tendance à mettre tous les contrôleurs liés à une même fonctionnalité dans la même classe, on conserve souvent la fonction index() qui correspond alors à la page d’accueil de cette fonctionnalité.

Ce contrôleur ne fait pas grand chose pour l’instant, il rend la vue comme réponse à la requête (ligne 14) en passant la donnée controller_name à la vue. Il est bien sûr possible de passer n’importe quelles données à la vue en ajoutant des éléments aux tableaux associatifs.

Reste à voir la ligne 11 qui permet de décrire la route pour demander ce contrôleur. Il est possible de configurer toutes les routes aux mêmes endroits dans le fichiers de configuration config/routes.yaml, mais il est plus simple et rapide d’utiliser un attribut comme dans le code proposé par Symfony.

Il est possible de configurer une route avec tout un tas de paramètres, pour l’instant nous allons nous concentrer sur les deux principaux.

• le chemin relative de l’url : ici '/example'. Cela signifie que pour appeler ce contrôleur, il faudra utiliser l’url urldusite/example. Vous pouvez modifier ce chemin. Par exemple, en utilisant '/' vous désignez la page d’accueil de votre site et pourrez ainsi remplacer la page d’accueil par défaut de Symfony.
• Le nom de la route (option name) : il est important de donner un nom à la route. C’est ce nom qui servira pour faire les liens entre les pages. Nous serons alors libre de changer l’url sans devoir refaire tous les liens impactés.

La vue

Les fichiers de la vue utilisent un moteur de template qui s’appelle Twig. Toute la documentation se trouve sur le site https://twig.symfony.com/doc/3.x/.

Regardons le code du fichier généré par Symfony :

{% extends 'base.html.twig' %}

{% block title %}Hello ExampleController!{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>

<div class="example-wrapper">
    <h1>Hello {{ controller_name }}! ✅</h1>

    This friendly message is coming from:
    <ul>
        <li>Your controller at <code>C:/Users/amely/Documents/Dossier_cours/ludotheque/src/Controller/ExampleController.php</code></li>
        <li>Your template at <code>C:/Users/amely/Documents/Dossier_cours/ludotheque/templates/example/index.html.twig</code></li>
    </ul>
</div>
{% endblock %}

La première ligne fait appel à un autre fichier twig qui se trouve à la racine du dossier templates/. Ce fichier contient la structure HTML de toutes les pages qui l’étendront. À l’intérieur du code HTML, on peut y positionner des blocks qui pourront être modifiés dans le fichier de vue. Dans le cas qui nous préoccupent, on modifie les blocks title et body (ligne 3 et ligne 5).

On peut afficher les données transmises par le contrôleur en les plaçant entre double accolade {{ item }} (ligne 12).

La page

En utilisant l’url défini au niveau du contrôleur, on obtient la page suivante :

On ne peut pas dire que ce design fasse rêver, mais nous verrons par la suite comment le modifier.