Tout d'abord, un petit rappel. Symfony est construit pour appliquer le pattern mvc.
Nous allons donc avoir à créer un contrôleur et des vues. Pour le modèle nous verrons ça plus tard.
En réalité Symfony ne respecte pas exactement le patten MVC à cause de sa relation étroite avec Doctrine (détail)
Il est tout à fait possible de créer un contrôleur à la main mais autant utiliser les automatismes de symfony:
symfony console make:controllerCette commande lance la création d'un contrôleur et vous interroge sur le nom de celui-ci. Par convention nous mettrons toujours <nom>Controller.
Créons donc un premier HomeController.php
Symfony viens de créer pour nous le contrôleur et sa vue. En premier lieu allons voir le fichier src/controller/HomeController.php
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class HomeController extends AbstractController
{
#[Route('/home', name: 'app_home')]
public function index(): Response
{
return $this->render('home/index.html.twig', [
'controller_name' => 'HomeController',
]);
}
}
#[Route('/home', name: 'app_home')] défini la route (le chemin) pour atteindre la méthode (fonction) index(). Ici /home .
return $this->render('home/index.html.twig', [ 'controller_name' => 'HomeController', ]); renvoie la vue home/index.html.twig avec un tableau de paramètres.
Pour ce qui concerne les vues, Symfony utilise le moteur de template Twig. C'est pourquoi, nous allons trouver cette vue dans le dossier src/template avec une extension .html.twig.
Ouvrons le fichier home/index.html.twig
{% extends 'base.html.twig' %}
{% block title %}Hello HomeController!{% 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><a href="{{ '/Users/germain/developpement/pourCours/monProjet/src/Controller/HomeController.php'|file_link(0) }}">src/Controller/HomeController.php</a></code></li>
<li>Your template at <code><a href="{{ '/Users/germain/developpement/pourCours/monProjet/templates/home/index.html.twig'|file_link(0) }}">templates/home/index.html.twig</a></code></li>
</ul>
</div>
{% endblock %}
Nous reviendrons sur le twig plus tard, mais nous pouvons déjà remarquer la première ligne qui fait hériter notre index de base.
Ouvrez base.html.twig et commentez les lignes {{ encore_entry_link_tags('app') }} et {{ encore_entry_script_tags('app') }}
pour obtenir:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% block stylesheets %}
{# {{ encore_entry_link_tags('app') }} #}
{% endblock %}
{% block javascripts %}
{# {{ encore_entry_script_tags('app') }} #}
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>Si vous ne le faites pas symfony va chercher webpack-encore et va nous renvoyer une erreur.
Si ne n'est pas fait, lancez le serveur. Puis rendez vous à localhost:8000/home
