Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
Symfony

Créer une vue sous Symfony

Un cours complet pour maîtriser Créer une vue sous Symfony.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
Histoire et présentation de Symfony
Installation de Symfony
Structure de Symfony
Le modèle MVC de Symfony
Créer une page dans Symfony
Routage sous Symfony
Créer une vue sous Symfony
Utiliser des variables sous Symfony
Utilisation des structures de contrôle dans les vues Twig de Symfony
Créer et utiliser un contrôleur Symfony
Créer une méthode de contrôleur Symfony
Le moteur de template Twig
Modèles, Entités et Gestion des Données avec l'ORM dans Symfony
Relations entre entités Symfony
Doctrine : Librairie PHP pour la manipulation et le mapping des données
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectifs

    • Connaitre le système de routage Symfony

  2. 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.

  3. Créer une première vue

    • Vous pouvez créer une vue en plaçant un fichier avec l'extension .twig dans le répertoire templates de votre application Symfony.
    • L'extension .twig informe 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.
      • 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).
    • É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 :
        • apprenants_index:
  path: /apprenants/index
  controller: ApprenantsController::index
      • Visitez l'URL suivante pour voir la sortie de la vue :
        • http://127.0.0.1:8000/apprenants/index
      • La sortie apparaîtra comme indiqué dans l'image suivante :

          Créer une vue sous Symfony

    • É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 :
        • {# 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
    4. <li>Apprenant 3 <!-- Vous pouvez remplir cette liste dynamiquement à partir des données de votre application --> </ul> </body> </html>
  4. 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 :
    5. apprenants_index:
  path: /apprenants/index
  controller: ApprenantsController::index
  5. 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 :
    6. // 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');
    }
}
  6. 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.

  7. 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 :
        symfony new mon_projet
      • Cette commande crée un nouveau projet Symfony nommé mon_projet.
    • Créer le contrôleur ApprenantsController :
        php bin/console make:controller ApprenantsController
      • Cette commande va créer un nouveau contrôleur ApprenantsController.
    • Créer le dossier apprenants et la vue index.html.twig :
        mkdir templates/apprenants
touch templates/apprenants/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 :
        • apprenants_index:
  path: /apprenants/index
  controller: ApprenantsController::index
    • 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 :
        • // 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');
    }
}
    • Lancer le serveur Symfony :
        symfony server:start
      • 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.