Symfony - Moteur de visualisation

Une couche de vue est la couche de présentation de l'application MVC. Il sépare la logique d'application de la logique de présentation.

Lorsqu'un contrôleur doit générer du HTML, du CSS ou tout autre contenu, il transmet la tâche au moteur de création de modèles.

Modèles

Les modèles sont essentiellement des fichiers texte utilisés pour générer des documents textuels tels que HTML, XML, etc. Ils sont utilisés pour gagner du temps et réduire les erreurs.

Par défaut, les modèles peuvent résider dans deux emplacements différents -

app/Resources/views/- Le répertoire de vues de l'application peut contenir les mises en page de votre application et les modèles de l'ensemble d'applications. Il remplace également les modèles de bundle tiers.

vendor/path/to/Bundle/Resources/views/ - Chaque bundle tiers contient ses modèles dans son répertoire «Resources / views /».

Moteur Twig

Symfony utilise un puissant langage de création de modèles appelé Twig. Twig vous permet d'écrire des modèles concis et lisibles d'une manière très simple. Les modèles Twig sont simples et ne traitent pas les balises PHP. Twig effectue le contrôle des espaces, le sandboxing et l'échappement HTML automatique.

Syntaxe

Twig contient trois types de syntaxe spéciale -

• {{ ... }} - Imprime une variable ou le résultat d'une expression dans le modèle.

• {% ... %} - Une balise qui contrôle la logique du modèle. Il est principalement utilisé pour exécuter une fonction.

• {# ... #}- Syntaxe des commentaires. Il est utilisé pour ajouter un commentaire sur une ou plusieurs lignes.

Le gabarit de base de brindille se trouve à “app/Resources/views/base.html.twig”.

Exemple

Passons en revue un exemple simple utilisant le moteur Twig.

StudentController.php

<?php  
namespace AppBundle\Controller;  

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; 
use Symfony\Component\HttpFoundation\Response; 
use Symfony\Bundle\FrameworkBundle\Controller\Controller;  

class StudentController extends Controller { 
   /** 
      * @Route("/student/home") 
   */ 
   public function homeAction() { 
      return $this->render('student/home.html.twig'); 
   } 
}

Ici le render() La méthode rend un modèle et place ce contenu dans un objet Response.

Maintenant, allez dans le répertoire «vues» et créez un dossier «étudiant» et à l'intérieur de ce dossier, créez un fichier «home.html.twig». Ajoutez les modifications suivantes dans le fichier.

home.html.twig

//app/Resources/views/student/home.html.twig  
<h3>Student application!</h3>

Vous pouvez obtenir le résultat en demandant l'url «http: // localhost: 8000 / student / home».

Par défaut, Twig est livré avec une longue liste de balises, de filtres et de fonctions. Passons en revue un par un en détail.

Mots clés

Twig prend en charge les balises importantes suivantes -

Faire

le doLa balise exécute des fonctions similaires à celles d'une expression régulière à l'exception qu'elle n'imprime rien. Sa syntaxe est la suivante -

{% do 5 + 6 %}

Comprendre

L'instruction include inclut un modèle et renvoie le contenu rendu de ce fichier dans l'espace de noms actuel. Sa syntaxe est la suivante -

{% include 'template.html' %}

Prolonge

La balise extend peut être utilisée pour étendre un modèle à partir d'un autre. Sa syntaxe est la suivante -

{% extends "template.html" %}

Bloquer

Le bloc agit comme un espace réservé et remplace le contenu. Les noms de bloc se composent de caractères alphanumériques et de traits de soulignement. Par exemple,

<title>{% block title %}{% endblock %}</title>

Incorporer

le embedLa balise effectue une combinaison des éléments include et extend. Il vous permet d'inclure le contenu d'un autre modèle. Il vous permet également de remplacer tout bloc défini dans le modèle inclus, comme lors de l'extension d'un modèle. Sa syntaxe est la suivante -

{% embed “new_template.twig” %} 
   {# These blocks are defined in “new_template.twig" #} 
   {% block center %} 
      Block content 
   {% endblock %} 
{% endembed %}

Filtre

Les sections de filtre vous permettent d'appliquer des filtres Twig réguliers sur un bloc de données de modèle. Par exemple,

{% filter upper %} 
   symfony framework 
{% endfilter %}

Ici, le texte sera changé en majuscules.

Pour

Forloop récupère chaque élément dans une séquence. Par exemple,

{% for x in 0..10 %} 
   {{ x }} 
{% endfor %}

Si

le ifLa déclaration dans Twig est similaire à PHP. L'expression prend la valeur true ou false. Par exemple,

{% if value == true %} 
   <p>Simple If statement</p> 
{% endif %}

Filtres

Twig contient des filtres. Il est utilisé pour modifier le contenu avant d'être rendu. Voici quelques-uns des filtres notables.

Longueur

Le filtre de longueur renvoie la longueur d'une chaîne. Sa syntaxe est la suivante -

{% if name|length > 5 %} 
   ... 
{% endif %}

Inférieur

Le filtre inférieur convertit une valeur en minuscules. Par exemple,

{{ 'SYMFONY'|lower }}

Cela produirait le résultat suivant -

symfony

De même, vous pouvez essayer les majuscules.

Remplacer

Le filtre de remplacement met en forme une chaîne donnée en remplaçant les espaces réservés. Par exemple,

{{ "tutorials point site %si% and %te%."|replace({'%si%': web, '%te%': "site"}) }}

Il produira le résultat suivant -

tutorials point website

Titre

Le filtre de titre renvoie une version titrée de la valeur. Par exemple,

{{ 'symfony framework '|title }}

Il produira le résultat suivant -

Symfony Framework

Trier

Le filtre de tri trie un tableau. Sa syntaxe est la suivante -

{% for user in names|sort %} 
   ... 
{% endfor %}

Réduire

Le filtre de découpage supprime les espaces (ou d'autres caractères) du début et de la fin d'une chaîne. Par exemple,

{{ '  Symfony!  '|trim }}

Il produira le résultat suivant -

Symfony!

Les fonctions

Twig prend en charge les fonctions. Il est utilisé pour obtenir un résultat particulier. Voici quelques-unes des fonctions importantes de Twig.

Attribut

le attributeLa fonction peut être utilisée pour accéder à un attribut «dynamique» d'une variable. Sa syntaxe est la suivante -

{{ attribute(object, method) }} 
{{ attribute(object, method, arguments) }} 
{{ attribute(array, item) }}

Par exemple,

{{ attribute(object, method) is defined ? 'Method exists' : 'Method does not exist' }}

Constant

La fonction constante renvoie la valeur constante d'une chaîne spécifiée. Par exemple,

{{ constant('Namespace\\Classname::CONSTANT_NAME') }}

Cycle

La fonction de cycle effectue un cycle sur un tableau de valeurs. Par exemple,

{% set months = [‘Jan’, ‘Feb’, ‘Mar’] %}  
{% for x in 0..12 %} 
   { cycle(months, x) }} 
{% endfor %}

Date

Convertit un argument en date pour permettre la comparaison de dates. Par exemple,

<p>Choose your location before {{ 'next Monday'|date('M j, Y') }}</p>

Il produira le résultat suivant -

Choose your location before May 15, 2017

L'argument doit être dans l'un des formats de date et d'heure pris en charge par PHP.

Vous pouvez passer un fuseau horaire comme deuxième argument.

Déverser

La fonction de vidage vide les informations sur une variable de modèle. Par exemple,

{{ dump(user) }}

Max

La fonction max renvoie la plus grande valeur d'une séquence. Par exemple,

{{ max(1, 5, 9, 11, 15) }}

Min

La fonction min renvoie la plus petite valeur d'une séquence. Par exemple,

{{ min(1, 3, 2) }}

Comprendre

La fonction include renvoie le contenu rendu d'un modèle. Par exemple,

{{ include('template.html') }}

Aléatoire

La fonction aléatoire génère une valeur aléatoire. Par exemple,

{{ random([‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’]) }} 
{# example output: Jan #}

Intervalle

La fonction Range renvoie une liste contenant une progression arithmétique d'entiers. Par exemple,

{% for x in range(1, 5) %} 
   {{ x }}, 
{% endfor %}

Il produira le résultat suivant -

1,2,3,4,5

Mises en page

Une mise en page représente les parties communes de plusieurs vues, par exemple, l'en-tête et le pied de page.

Héritage de modèle

Un modèle peut être utilisé par un autre. Nous pouvons y parvenir en utilisant le concept d'héritage de modèle. L'héritage de modèle vous permet de créer un modèle de «mise en page» de base qui contient tous les éléments communs du site Web définis comme des blocs.

Prenons un exemple simple pour en savoir plus sur l'héritage des modèles.

Exemple

Considérez le modèle de base situé dans «app / Resources / views / base.html.twig». Ajoutez les modifications suivantes dans le fichier.

base.html.twig

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "UTF-8"> 
      <title>{% block title %}Parent template Layout{% endblock %}</title> 
   </head> 
</html>

Passez maintenant au fichier de modèle d'index situé dans «app / Resources / views / default / index.html.twig» . Ajoutez-y les modifications suivantes.

index.html.twig

{% extends 'base.html.twig' %}  
{% block title %}Child template Layout{% endblock %}

Ici le {% extends %}La balise informe le moteur de création de modèles d'évaluer d'abord le modèle de base, qui configure la mise en page et définit le bloc. Le modèle enfant est ensuite rendu. Un modèle enfant peut étendre la mise en page de base et remplacer le cartouche. Maintenant, demandez l'url «http: // localhost: 8000» et vous pouvez obtenir son résultat.

Les atouts

L'actif gère la génération d'URL et la gestion des versions des actifs Web tels que les feuilles de style CSS, les fichiers JavaScript et les fichiers image.

JavaScript

Pour inclure des fichiers JavaScript, utilisez le javascripts tag dans n'importe quel modèle.

{# Include javascript #} 
{% block javascripts %} 
   {% javascripts '@AppBundle/Resources/public/js/*' %} 
      <script src="{{ asset_url }}"></script> 
   {% endjavascripts %} 
{% endblock %}

Feuilles de style

Pour inclure des fichiers de feuille de style, utilisez le stylesheets tag dans n'importe quel modèle

{# include style sheet #} 
{% block stylesheets %} 
   {% stylesheets 'bundles/app/css/*' filter = 'cssrewrite' %} 
      <link rel = "stylesheet" href="{{ asset_url }}" />
   {% endstylesheets %} 
{% endblock %}

Images

Pour inclure une image, vous pouvez utiliser la balise image. Il est défini comme suit.

{% image '@AppBundle/Resources/public/images/example.jpg' %} 
   <img src = "{{ asset_url }}" alt = "Example" /> 
{% endimage %}

Actifs composés

Vous pouvez combiner plusieurs fichiers en un seul. Cela permet de réduire le nombre de requêtes HTTP et de produire de meilleures performances frontales.

{% javascripts 
   '@AppBundle/Resources/public/js/*' 
   '@AcmeBarBundle/Resources/public/js/form.js' 
   '@AcmeBarBundle/Resources/public/js/calendar.js' %} 
   <script src = "{{ asset_url }}"></script> 
{% endjavascripts %}