10 - Live Coding : Les vues avec Symfony 4 (Twig)

Par Nouvelle-Techno.fr le 13 décembre 2019 - Catégories : MVC Tutoriel Symfony Live-Coding

Dans les articles précédents, nous avons vu l'utilisation de base de Twig pour générer les vues de notre blog (revues au début de la vidéo)

Il est bien sur possible d'aller plus loin dans l'utilisation de filtres divers pour personnaliser nos vues.

Gérer les fichiers CSS et les scripts

Il est souvent nécessaire d'utiliser des fichiers externes (CSS et JS) qui seront utilisés dans toutes les pages, ou dans certaines pages particulières.

Dans toutes les pages

Pour utiliser un fichier CSS dans toutes les pages, on l'insérera dans le template de base (base.html.twig par exemple) comme ci-dessous.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
	<link rel="stylesheet" href="{{ asset('assets/css/styles.css') }}">
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

La fonction "asset" permet de générer une url basée sur le dossier "public" de façon automatique.

Le bloc "stylesheets" au dessus permettra d'ajouter des fichiers spécifiques aux différentes pages.

On procédera de la même façon pour les fichiers javascript.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
	<link rel="stylesheet" href="{{ asset('assets/css/styles.css') }}">
    </head>
    <body>
        {% block body %}{% endblock %}
        <script src="{{ asset('assets/js/scripts.js') }}"></script>
        {% block javascripts %}{% endblock %}
    </body>
</html>

Dans une page spécifique

Pour insérer un fichier CSS ou JS spécifique à une page, nous utiliserons les blocs "stylesheets" ou "javascripts" depuis le fichier twig de la page (article.html.twig par exemple, sur le modèle suivant

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

{% block title %}Titre{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('assets/css/fichier.css') }}">
{% endblock %}

{% block body %}
   {# Ici le contenu de la page #}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/js/fichier.js') }}"></script>
{% endblock %}

Créer des fichiers partiels

Il est courant également de répéter le même contenu sur plusieurs pages ou sur plusieurs templates de pages (comme une barre de navigation par exemple.

Dans ce cas, nous avons la possibilité de séparer le contenu dans un fichier partiel qui sera inclus dans les autres.

L'usage veut que ces fichiers soient stockés dans un dossier appelé "partials" et situé dans "templates".

Si nous créons un fichier pour notre navbar par exemple, nous l'appellerons "navbar.html.twig", ou tout autre nom au choix, nous intégrons le contenu html dedans et nous l'appelons depuis la page de notre choix en écrivant le code suivant

{% include("partials/navbar.html.twig") %}

Utiliser des variables

Il arrive aussi d'avoir besoin ponctuellement de stocker des valeurs dans des variables et d'effectuer des calculs, des manipulations diverses, comme en javascript ou en php.

Les variables simples

Déclarer une variable s'effectue par l'intermédiaire de la fonction "set" de la façon suivante

{% set variable = "Valeur" %}

Nous pourrons ensuite afficher notre variable comme ceci

{{ variable }}

Les tableaux

Lors de l'utilisation de bases de données, il est fréquent d'utiliser des tableaux de données.

Imaginons que notre variable contient un nom et un prénom.

Pour afficher son contenu, nous utiliserons la syntaxe suivante

<p>Bonjour {{ variable.prenom }} {{ variable.nom }}</p>

Les boucles

En complément des tableaux, parfois nous utiliserons des tableaux multidimensionnels. Dans ce cas, il sera nécessaire de boucler sur ce tableau pour afficher chacune de ses lignes.

Par exemple, si notre liste s'appelle "articles" et contient le titre et le contenu de nos articles, nous afficherons cette liste de la façon suivante

{% for article in articles %}
    <h2>{{ article.titre }}</h2>
    <div>{{ article.contenu }}</div>
{% endfor %}

Avec Twig, nous aurons également la possibilité de gérer le cas des tableaux vides, au moyen d'un "else" qui sera utilisé si nous n'avons pas d'articles

{% for article in articles %}
    <h2>{{ article.titre }}</h2>
    <div>{{ article.contenu }}</div>
{% else %}
    <p>Il n'y a aucun article</p>
{% endfor %}

Les conditions

Nous pourrons également utiliser des conditions afficher certains éléments en fonction du contexte.

La syntaxe de la condition est la suivante

{% if variable >= 100 %}
    <p>La variable est plus grande ou égale à 100</p>
{% else %}
    <p>La variable est plus petite que 100</p>
{% endif %}

Les collections de Symfony

Dans le cas des collections de Symfony, nous allons pouvoir les explorer efficacement dans nos templates.

Ainsi, dans le cas de nos articles, nous allons pouvoir accéder aux informations de catégories et de commentaires sans avoir à faire d'autres sélections.

L'affichage des catégories de notre article s'effectuera au moyen de la boucle suivante

<p>Catégories : 
    {% for categorie in article.categories %}
        {{ categorie.nom }} 
    {% endfor %}
</p>

Quelques filtres twig

Si vous souhaitez afficher des contenus non textuels ou du contenu qui doit être interprété par le navigateur comme le HTML par exemple, vous aurez besoin d'utiliser des "filtres".

Le HTML interprété (raw)

Pour afficher du HTML en l'interprétant, il sera nécessaire d'utiliser le filtre "raw" comme ceci

<div>{{ article.contenu|raw }}</div>

Les dates

Si vous affichez une date, vous devrez utiliser le filtre "date" auquel vous pouvez passer un format.

<p>Publié le {{ article.createdAt|date('d/m/Y à h:i') }} </p>

Compter les éléments

Vous pourrez également afficher le nombre d'éléments dans un tableau au moyen du filtre "length"

<p>Il y a {{ article.commentaires|length }} commentaires</h2>

Et voilà, bon codage.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

#Tutoriel #MVC #Views #Symfony #Live-Coding #twig #livecoding