Ajout d'une nouvelle route
Nous pourrions faire un nouveau contrôleur pour gérer la page du produit en détail, mais nous allons plutôt ajouter une route dans le fichier /src/Controller/HomeController.php comme dans cet exemple.
Le nombre de contrôleurs ne dépend que de votre façon de travailler. Vous pouvez en créer autant que vous voulez. Tout comme vous pouvez n'en utiliser qu'un seul et unique. Une fois encore, c'est à vous de décider.
Nous allons donc ajouter une nouvelle route à l'intérieur de notre contrôleur dans le but d'afficher les détails d'un produit.
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use App\Repository\ProduitRepository;
class HomeController extends AbstractController
{
// ------------------------------------------------- Liste des produits
#[Route('/home', name: 'route_home')]
public function index(ProduitRepository $repo): Response
{
$liste = $repo->findAll();
return $this->render('home/index.html.twig', [
'liste_twig' => $liste, // 'Passage de la variable Php ($liste) à la variable Twig ({{ liste_twig }} utilisée dans le fichier index.html.twig).
]);
}
// ------------------------------------------------- Détail du produit
#[Route('/produit/{id}', name: 'route_produit')]
public function produit(int $id, ProduitRepository $repo): Response // Nous Injectons dans cette fonction l'identifiant de notre produit
{
$produit = $repo->find($id);
return $this->render('home/produit.html.twig', [
'produit' => $produit, // Par convention, nous utiliserons ce modèle avec les mêmes noms de variables contrairement à l'affichage de la liste des produits
]);
}
}
Nous devons à présent créer le fichier Twig qui nous donnera tous les détails du produit pour lequel nous venons de configurer la route.
Pour cela, cliquez avec le bouton droit de votre souris sur le dossier /templates/home et faites un nouveau fichier que vous nommerez produit.html.twig dont voici son contenu.
{% extends 'base.html.twig' %}
{% block body %}
Titre = {{ produit.titre }} <br>
Description = {{ produit.description }} <br>
Prix = {{ produit.prix }} <br>
Catégorie = {{ produit.categorie.titre }} <br>
{% endblock %}
A présent, vous allez pouvoir vérifier si la nouvelle route fonctionne bien. Pour cela, rendez-vous à cette adresse dans votre navigateur internet :
127.0.0.1:8000/produit/1
Vous devriez voir apparaître les détails du premier produit. Essayez avec d'autres des cinq produits qui sont dans la base de données en modifiant le dernier chiffre dans la barre d'adresse. N'hésitez pas non plus à changer le nom des routes pour tester le comportement de votre application.
Il ne nous reste plus qu'à faire un lien dans notre page qui affiche la liste les produits, à savoir le fichier /templates/home/index.html.twig
Vous comprenez qu'il ne s'agit pas forcément de la page d'accueil. Il ne s'agit pas non plus forcément d'une boutique en ligne. Vous pourriez très largement adapté notre modèle pour celui d'un blog par exemple.
Restez vigilant lors du codage d'un lien, il est source de petites erreurs. Vous pouvez vous rendre compte en effet que la méthode est un peu plus compliquée que dans un site classique. Ne confondez pas le nom de la route avec la route elle-même, c'est une erreur récurrente au début. Une fois de plus, n'hésitez pas à vous entraîner à reproduire cette façon de procéder, car cela risque d'être un peu laborieux et déconcertant dans un premier temps.
Modifiez le fichier /templates/home/index.html.twig comme ci-dessous.
{% extends 'base.html.twig' %}
{% block body %}
{% for produit in liste_twig %}
Produit = {{ produit.titre }} - <a href="{{ path ('route_produit', {'id': produit.id}) }}">lien</a> <br>
{% endfor %}
{% endblock %}
Retournez sur cette adresse afin de vérifier que vos liens fonctionnent : 127.0.0.1:8000/home
Vous avez à présent terminé notre formation express dans les règles de l'art.
Nous verrons dans d'autres sections comment réaliser des tâches plus avancées comme par exemple l'envoi d'images ou la gestion d'un espace d'administration à l'aide de formulaires.
Liens utiles
Nous vous recommandons d'aller faire un tour sur le site officiel de Symfony. Il vous est mis à disposition une documentation précise et détaillée de tous les composants disponibles mais vous y trouverez également de nombreux exemples pour vous faire progresser. Vous ne trouverez pas beaucoup d'informations rédigées en français, mais cela en vaut la peine. Vous pourrez vous rendre compte du grande nombre de fonctionnalités. Faites un tour d'horizon de cette documentation de manière à pouvoir bénéficier de toute la puissance et l'efficacité de cet outil.
Si vous rencontrez des difficultés lors de cette phase de découverte, n'hésitez surtout pas à nous faire parvenir vos impressions sur le parcours de cette formation rapide. Nous nous ferons un plaisir de vous renseigner et nous modifierons le cas échéant notre contenu afin de le rendre accessible au plus grand nombre d'entre vous.
Une version de notre site sera bientôt disponible pour les systèmes d'exploitation Linux.