Symfony 4 - Créer un blog pas à pas - Les vues

Par Nouvelle-Techno.fr le 9 août 2019 - Catégories : MVC Tutoriel Symfony

Lire l'article sur le site d'origine

Nous avons parlé de tout sauf des vues du modèle MVC.

C'est pourtant grâce à ces vues que l'utilisateur du site aura du contenu qui va s'afficher à lui.

Avec Symfony, les vues sont générées grâce à un moteur de templates appelé Twig.

L'avantage de Twig est que vous allez pouvoir majoritairement écrire vos vues en html, et y intégrer des contenus dynamiques par l'intermédiaire de la syntaxe spécifique à Twig et de variables.

Structure des "templates"

Les vues vont être stockées dans le dossier "templates" et structurées, généralement, dans différents dossiers correspondant au contrôleur auquel elles sont liées.

Par exemple, nous avons créé précédement le contrôleur "MainController", ceci a créé un dossier "main" dans "templates".

Le fichier "base"

Mais dans ce dossier "templates" vous pouvez voir également un fichier appelé "base.html.twig"

Ce fichier est celui qui contiendra la "maquette" de vos pages, c'est à dire tout ce qui est commun à toutes vos pages, ou à un groupe de pages si vous avez plusieurs "maquettes"

Voici ce qu'il contient actuellement

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

Vous reconnaissez le code html mais il y a également des ensembles entre accolades et pourcents, c'est de la syntaxe Twig.

Il s'agit de blocs, ils sont, par défaut, au nombre de 4. Il faut les voir comme des "cases" ou des espaces réservés dans lesquels nous viendrons injecter le contenu qui nous intéresse.

Les 4 blocs par défaut sont :

Les vues

Les vues dans lesquelles nous allons écrire notre code html spécifique à la page se trouvent donc dans les dossiers.

Nous avons vu dans l'article sur les contrôleurs que la page d'accueil appelle la vue "main/index/html/twig"

return $this->render('main/index.html.twig');

Nous allons donc regarder le fichier correspondant, qui contient ceci

{% extends 'base.html.twig' %}

{% block title %}Hello MainController!{% 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="{{ 'chemin/monblog/src/Controller/MainController.php'|file_link(0) }}">src/Controller/MainController.php</a></code></li>
        <li>Your template at <code><a href="{{ 'chemin/monblog/templates/main/index.html.twig'|file_link(0) }}">templates/main/index.html.twig</a></code></li>
    </ul>
</div>
{% endblock %}

C'est le contenu par défaut. Nous allons le simplifier et garder ceci

{% extends 'base.html.twig' %}

{% block title %}Mon Blog{% endblock %}

{% block body %}
    <h1>Mon Blog</h1>
    <p>Ceci est la page d'accueil</p>
{% endblock %}

Comment ça fonctionne ?

{% extends 'base.html.twig' %}

Cette ligne indique dans quelle "maquette" nous allons insérer notre contenu. Ici il s'agit du fichier "base.html.twig"

{% block title %}Mon Blog{% endblock %}

Le contenu de ce bloc appelé "title" ira remplacer le contenu du bloc "title" du fichier "base.html.twig" et donc permettra de préciser le contenu de la balise "title"

{% block body %}
    <h1>Mon Blog</h1>
    <p>Ceci est la page d'accueil</p>
{% endblock %}

Ce dernier bloc correspond au bloc "body" qui viendra remplir le bloc correspondant du fichier "base.html.twig".

Vous remarquerez que nous n'utilisons pas les blocs "stylesheets" et "javascripts" qui resteront donc inchangés.

Dans un prochain article nous traiterons de l'envoi de données d'un contrôleur vers une vue.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder aux forums de Nouvelle-Techno.fr ou au serveur Discord pour une entraide par chat

#Tutoriel #Framework #MVC #Views #Symfony