Hostinger

Exercice : contrôleur et Twig

Il est maintenant grand temps de pratiquer ! Vous allez commencer un exercice. L'objectif est de créer une application simple selon les instructions que je vais vous donner.

Vous avez toutes les clés pour réussir. Tout ce que nous avons appris vous permettra d’atteindre votre objectif.

Énoncé de l'exercice

Objectif

  • Créer une application avec trois pages
    • Première page : accueil avec une liste sous forme d'un tableau transféré à travers le contrôleur
    • Des pages (dynamiques) : une page par article
    • Dernière page : formulaire de contact (simulation, le message n'est pas réellement envoyé car nous n'avons pas encore appris à le faire)

L'application

Voici l'application en action :

À vous !

À vous de jouer maintenant ! Il existe plusieurs façon de faire pour atteindre cet objectif.

Correction

Créer le projet

Commencez par créer un nouveau projet Symfony.

symfony new pratiquer --webapp --version "7.3.*"

J'ai appelé ce projet pratiquer !

Ensuite, on ouvre le projet avec un éditeur de code.

Créer le contrôleur

Nous allons maintenant créer un contrôleur qui utilisera plusieurs routes connectées à une méthode du contrôleur.

symfony console make:controller Pratiquer

<?php

// Dans le contrôleur src/Controller/PratiquerController.php

namespace App\Controller;

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

final class PratiquerController extends AbstractController
{
    #[Route('/', name: 'app_accueil')]
    public function index(): Response
    {
        $liste = ['Apprendre Symfony', 'Maîtriser Twig', 'Découvrir Doctrine'];

        return $this->render('pratiquer/index.html.twig', [
            'liste' => $liste
        ]);
    }

    #[Route('/page/{numero}', name: 'app_page')]
    public function page(int $numero): Response
    {
        return $this->render('pratiquer/page.html.twig', [
            'numero' => $numero
        ]);
    }

    #[Route('/formulaire', name: 'app_formulaire')]
    public function formulaire(): Response
    {
        return $this->render('pratiquer/formulaire.html.twig', [
        ]);
    }

}

Modifier et créer des vues avec Twig

Nous allons maintenant utiliser le moteur de template Twig.

templates/partial/header.html.twig

<header>
    <nav>
        <ul>
            <li><a href="{{ path('app_accueil') }}">Accueil</a></li>
            <li><a href="{{ path('app_page', { numero: 1 }) }}">Page 1</a></li>
            <li><a href="{{ path('app_page', { numero: 2 }) }}">Page 2</a></li>
            <li><a href="{{ path('app_page', { numero: 3 }) }}">Page 3</a></li>
            <li><a href="{{ path('app_formulaire') }}">Formulaire</a></li>

        </ul>
    </nav>
</header>

templates/base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Patiquez !{% endblock %}</title>
    </head>
    <body>
        {% include 'partial/header.html.twig' %}
        {% block body %}{% endblock %}
    </body>
</html>

templates/pratiquer/index.html.twig

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

{% block body %}
<h1>Bienvenue sur la page d'accueil de Pratiquez !</h1>
<p>Ceci est la page principale de l'application.</p>
<p>Voici quelques sujets que vous pouvez explorer :</p>
<ul>
    {% for item in liste %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>
{% endblock %}

templates/pratiquer/page.html.twig

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

{% block body %}
<h1>Page {{ numero }} !</h1>
<p>Ceci est la page {{ numero }} de l'application.</p>
{% endblock %}

templates/pratiquer/formulaire.html.twig

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

{% block body %}
<h1>Bienvenue sur la page de formulaire de Pratiquez !</h1>
<p>Ceci est la page de formulaire de l'application.</p>
<form method="post" action="{{ path('app_formulaire') }}">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom" required>

    <label for="email">Email :</label>
    <input type="email" id="email" name="email" required>

    <button type="submit">Envoyer</button>
</form>

{% if nom %}
  <p>Bonjour {{ nom }} ! Ravi de vous voir.</p>
  <p>Nous avons également envoyé votre adresse email : {{ email }}.</p>
{% endif %}

{% endblock %}

Ajouter le code pour gérer le formulaire dans le contrôleur

Pour le dernier template (templates/pratiquer/formulaire.html.twig), il faut modifier le contrôleur.

<?php

// Dans le contrôleur src/Controller/PratiquerController.php

namespace App\Controller;

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

final class PratiquerController extends AbstractController
{
    #[Route('/', name: 'app_accueil')]
    public function index(): Response
    {

        $liste = ['Apprendre Symfony', 'Maîtriser Twig', 'Découvrir Doctrine'];

        return $this->render('pratiquer/index.html.twig', [
            'liste' => $liste
        ]);
    }

    #[Route('/page/{numero}', name: 'app_page')]
    public function page(int $numero): Response
    {
        return $this->render('pratiquer/page.html.twig', [
            'numero' => $numero
        ]);
    }

    #[Route('/formulaire', name: 'app_formulaire')]
    public function formulaire(Request $request): Response
    {

        $tous = $request->request->all();

        return $this->render('pratiquer/formulaire.html.twig', [
            'nom' => $tous['nom'] ?? null,
            'email' => $tous['email'] ?? null
        ]);
    }

}