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

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

10 - Live Coding : Les vues avec Symfony 4 (Twig)
Article publié le - Modifié le

Catégories : MVC Tutoriel Symfony Live-Coding

Mots-clés : Tutoriel MVC Views Symfony Live-Coding twig livecoding

Partager : Partager sur Facebook Partager sur Twitter Partager sur LinkedIn