Créer une vue sous Symfony
Créer une vue sous Symfony
-
Objectifs
- Connaitre le système de routage Symfony
-
Présentation
- Les vues dans Symfony contiennent une logique qui détermine comment présenter le résultat final de l’application Web aux utilisateurs. La sortie est souvent la sortie HTML qui est renvoyée aux utilisateurs après chaque réponse. Le répertoire templates contient ces vues par défaut dans Symfony.
- Le mot « vue » qui sera utilisé tout au long de ce cours est une traduction du mot anglais « view ». Il s’agit donc des vues telles qu’elles sont définies dans le patron de conception modèle-vue-contrôleur.
- Sous Symfony, pour afficher correctement une page Web dans le navigateur, il faut utiliser une vue. C’est la vue qui est en charge de générer le code HTML. Elle utilisera pour cela, en plus des balises HTML, des directives et instructions spécifiques à Symfony.
- Les vues contiennent le code HTML du site. Créer une vue signifie donc créer un fichier contenant du HTML qui sera retourné par une route.
-
Créer une première vue
- Vous pouvez créer une vue en plaçant un fichier avec l’extension
.twigdans le répertoire templates de votre application Symfony. - L’extension
.twiginforme le framework que le fichier contient un modèle Twig. - Dans le cadre MVC, la lettre «V» signifie Vues. Elle sépare la logique d’application de la logique de présentation. Les vues sont stockées dans le répertoire templates. Généralement, la vue contient le HTML qui sera servi par l’application.
- Étapes de création (1)
- Créez un dossier nommé apprenants sous templates.
- Dans ce dossier, créez le fichier index.twig et copiez-y le code suivant :CRÉER UNE VUE SOUS SYMFONY
- Ajoutez la ligne suivante dans le fichier config/routes.yaml pour définir l’itinéraire pour la vue ci-dessus :
- Visitez l’URL suivante pour voir la sortie de la vue :
- La sortie apparaîtra comme indiqué dans l’image suivante :
- Étapes de création (2)
- Créez un dossier pour vos vues dans le répertoire templates. Par exemple, vous pouvez nommer ce dossier apprenants si vous travaillez sur des vues liées aux apprenants.
- À l’intérieur de ce dossier, créez un fichier pour votre vue. Par exemple, nommez ce fichier index.html.twig. C’est dans ce fichier que vous allez écrire votre code HTML.
- Vous pouvez maintenant écrire votre code HTML dans ce fichier index.html.twig. Par exemple :
- Pour afficher cette vue dans votre application Symfony, vous devez définir une route qui pointe vers cette vue. Vous pouvez le faire dans le fichier config/routes.yaml. Par exemple :
- Enfin, vous devez implémenter la logique de contrôleur pour gérer cette route et retourner la vue correspondante. Par exemple, dans le contrôleur ApprenantsController :
- Maintenant, lorsque vous accédez à l’URL http://127.0.0.1:8000/apprenants/index dans votre navigateur, vous devriez voir la vue que vous avez créée.
-
Exemple
- Pour afficher la vue index.html.twig associée à la route /apprenants/index, voici les étapes à suivre avec les commandes correspondantes dans Symfony :
- Créer un nouveau projet Symfony :
- Cette commande crée un nouveau projet Symfony nommé mon_projet.
- Créer le contrôleur ApprenantsController :
- Cette commande va créer un nouveau contrôleur ApprenantsController.
- Créer le dossier apprenants et la vue index.html.twig :
- Ces commandes vont créer le dossier apprenants dans le répertoire templates et créer le fichier index.html.twig à l’intérieur de ce dossier.
- Éditer la vue index.html.twig :
- Ouvrez templates/apprenants/index.html.twig dans un éditeur de texte et ajoutez le contenu HTML souhaité pour votre vue.
- Définir la route :
- Ouvrez le fichier config/routes.yaml et ajoutez la définition de la route :
- Implémenter la méthode index() du contrôleur :
- Ouvrez src/Controller/ApprenantsController.php et modifiez la méthode index() pour qu’elle ressemble à ceci :
- Lancer le serveur Symfony :
- Cette commande lance le serveur de développement Symfony.
- Accéder à l’URL dans le navigateur :
- Ouvrez un navigateur et allez à l’URL suivante :
http://127.0.0.1:8000/apprenants/index - Vous devriez voir votre vue index.html.twig affichée dans le navigateur.
Les bonnes pratiques veulent qu’on crée un sous-dossier pour les vues de chacun des contrôleurs. Le nom du sous-dossier correspondra à la première partie du nom du contrôleur, tout en minuscules (ex : pour les vues utilisées par ApprenantsController : templates\apprenants).
apprenants_index:
path: /apprenants/index
controller: ApprenantsController::index
http://127.0.0.1:8000/apprenants/index
{# templates/apprenants/index.html.twig #}
<!DOCTYPE html>
<!html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des apprenants </title>
</head>
<body>
<h1>Liste des apprenants</h1>
<ul>
<li>Apprenant 1
<li>Apprenant 2
<li>Apprenant 3
<!-- Vous pouvez remplir cette liste dynamiquement à partir des données de votre application -->
</ul>
</body>
</html>
apprenants_index:
path: /apprenants/index
controller: ApprenantsController::index
// src/Controller/ApprenantsController.php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class ApprenantsController extends AbstractController
{
/**
* @Route("/apprenants/index", name="apprenants_index")
*/
public function index(): Response
{
return $this->render('apprenants/index.html.twig');
}
}symfony new mon_projetphp bin/console make:controller ApprenantsControllermkdir templates/apprenants
touch templates/apprenants/index.html.twig
apprenants_index:
path: /apprenants/index
controller: ApprenantsController::index
// src/Controller/ApprenantsController.php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class ApprenantsController extends AbstractController
{
/**
* @Route("/apprenants/index", name="apprenants_index")
*/
public function index(): Response
{
return $this->render('apprenants/index.html.twig');
}
}
symfony server:start