Publié le : 27/07/2021

Symfony Vue Contrôleur

Symfony utilise le DesignPattern MVC qui signifie Modèle, Vue et Contrôleur. C’est le contrôleur qui contrôle tous, c’est à dire que c’est lui qui va donner tous les directive. Ensuite il y a le modèle, c’est lui qui va dialoguer avec les sources de données comme la base de données, les web services, les fichiers texte ou JSON, etc… Pour terminer, il y a la vue, c’est elle qui va afficher les différentes informations.

Si c’est la première fois que vous entendez parler de l’architecture MVC, il y a un cours qui parle longuement sur ce concept MVC.

Configuration de la route pour spécifier le contrôleur à utiliser

Avant de commencer à spécifier la route, nous tenons à souligner ici que cet article est la suite de l’article qui parle de la création d’un projet sous Symfony. Ainsi, notre écran d’accueil est représenté par l’image ci-dessous après la création du projet.

Ecran après la création projet sous Symfony

Par la suite, nous allons modifier cet écran par un écran où il y a « HELLO WORLD » avec la date du jour. Pour ce faire, nous allons définir une route.

Pour la configuration d’une route, on peut le faire soit :

via un fichier Yaml ;
par des annotations dans le code PHP ;
via des fichier XML.

Pour cet article, nous allons définir la route par le fichier Yaml routes.yml. Ce fichier se trouve dans le dossier config de votre projet.

Dans ce fichier, nous allons ajouter le code suivant :

home:
  path: /
  controller: App\Controller\DefaultController::index

Dans ce fichier de configuration, nous avons :

home qui est le nom du « route » ;
Ensuite, il y a path: /. C’est la requête à qui va être accéder via la barre d’adresse du navigateur ;
Enfin le controller: App\Controller\DefaultController::index qui définit le contrôleur que qui va gérer la route.

Autoloading PSR-4

Au niveau du fichier composer.json, il est défini que l’autoloading est géré par PSR-4. Et ensuite, le namespace pour les fichiers qui se trouve dans le répertoire src est App. De ce fait, physiquement, le fichier qui va contenir notre contrôleur va se trouver dans src/Controller/. C’est à l’intérieur de ce répertoire qu’on va créer le fichier DefaultController.php.

Ainsi, dans le fichier DefaultController.php, nous aurons :

<?php
namespace App\Controller;
class DefaultController{
  public function index(){
    return new Response("<h1>Hello World</h1>");
  }
}

Appeler une Vue dans un Contrôleur avec Symfony

Dans l’exemple ci-dessus, nous avons simplement retourner du HTML qui va être affichée dans le navigateur.

Maintenant, le code ci-dessous va appeler le fichier qui contient le template twig.

<?php
namespace App\Controller;
class DefaultController extends AbstractController{
  public function index(){
    return $this->render("default.html.twig");
  }
}

Maintenant, il faut installer le Bundle Twig pour que ce code fonctionne. Pour ce faire, nous allons exécuter la commande ci-dessous :

$ composer require symfony/twig-bundle

Après l’installation de twig, nous avons plusieurs configuration, répertoire et fichier créé.

Maintenant, nous allons créer dans le dossier templates le fichier default.html.twig. Ce fichier contiendra :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        Hello World !!!
    </body>
</html>

Voilà comment relier une Vue à un Contrôleur dans Symfony.

Les mots clés rattachés à cet article : Symfony

Symfony Vue Contrôleur

Configuration de la route pour spécifier le contrôleur à utiliser

Autoloading PSR-4

Appeler une Vue dans un Contrôleur avec Symfony

Nos clients