Symfony - View Engine

A View Layer is the presentation layer of the MVC application. It separates the application logic from the presentation logic.
When a controller needs to generate HTML, CSS, or any other content then, it forwards the task to the templating engine.
Templates are basically text files used to generate any text-based documents such as HTML, XML, etc. It is used to save time and reduce errors.
By default, templates can reside in two different locations −
app/Resources/views/ − The application's views directory can contain your application's layouts and templates of the application bundle. It also overrides third party bundle templates.
vendor/path/to/Bundle/Resources/views/ − Each third party bundle contains its templates in it's “Resources/views/” directory.
Symfony uses a powerful templating language called Twig. Twig allows you to write concise and readable templates in a very easy manner. Twig templates are simple and won't process PHP tags. Twig performs whitespace control, sandboxing, and automatic HTML escaping.
Twig contains three types of special syntax −
{{ ... }} − Prints a variable or the result of an expression to the template.
{{ ... }} − Prints a variable or the result of an expression to the template.
{% ... %}  − A tag that controls the logic of the template. It is mainly used to execute a function.
{% ... %}  − A tag that controls the logic of the template. It is mainly used to execute a function.
{# ... #} − Comment syntax. It is used to add a single or multi-line comments.
{# ... #} − Comment syntax. It is used to add a single or multi-line comments.
The twig base template is located at “app/Resources/views/base.html.twig”.
Let’s go through a simple example using twig engine. 
<?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'); 
   } 
}
Here, the render() method renders a template and puts that content into a Response object.
Now move to the “views” directory and create a folder “student” and inside that folder create a file “home.html.twig”. Add the following changes in the file.
//app/Resources/views/student/home.html.twig  
<h3>Student application!</h3> 

You can obtain the result by requesting the url “http://localhost:8000/student/home”.
By default, Twig comes with a long list of tags, filters, and functions. Let’s go through one by one in detail.
Twig supports the following important tags −
The do tag performs similar functions as regular expression with the exception that it doesn't print anything. Its syntax is as follows −
{% do 5 + 6 %} 

The include statement includes a template and returns the rendered content of that file into the current namespace. Its syntax is as follows −
{% include 'template.html' %}

The extends tag can be used to extend a template from another one. Its syntax is as follows −
{% extends "template.html" %}

Block acts as a placeholder and replaces the contents. Block names consists of alphanumeric characters and underscores. For example,
<title>{% block title %}{% endblock %}</title>

The embed tag performs a combination of both include and extends. It allows you to include another template's contents. It also allows you to override any block defined inside the included template, such as when extending a template. Its syntax is as follows −
{% embed “new_template.twig” %} 
   {# These blocks are defined in “new_template.twig" #} 
   {% block center %} 
      Block content 
   {% endblock %} 
{% endembed %} 

Filter sections allow you to apply regular Twig filters on a block of template data. For example,
{% filter upper %} 
   symfony framework 
{% endfilter %} 
Here, the text will be changed to upper case.
For loop fetches each item in a sequence. For example,
{% for x in 0..10 %} 
   {{ x }} 
{% endfor %}
The if statement in Twig is similar to PHP. The expression evaluates to true or false. For example,
{% if value == true %} 
   <p>Simple If statement</p> 
{% endif %}
Twig contains filters. It is used to modify content before being rendered. Following are some of the notable filters.
The length filter returns the length of a string. Its syntax is as follows −
{% if name|length > 5 %} 
   ... 
{% endif %} 

The lower filter converts a value to lowercase. For example,
{{ 'SYMFONY'|lower }}
It would produce the following result −
symfony

Similarly, you can try for upper case.
The replace filter formats a given string by replacing the placeholders. For example,
{{ "tutorials point site %si% and %te%."|replace({'%si%': web, '%te%': "site"}) }} 
It will produce the following result −
tutorials point website 

The title filter returns a titlecase version of the value. For example,
{{ 'symfony framework '|title }}
It will produce the following result −
 Symfony Framework

The sort filter sorts an array. Its syntax is as follows −
{% for user in names|sort %} 
   ... 
{% endfor %}

The trim filter trims whitespace (or other characters) from the beginning and the end of a string. For example,
{{ '  Symfony!  '|trim }} 
It will produce the following result −
Symfony!

Twig supports functions. It is used to obtain a particular result. Following are some of the important Twig functions.
The attribute function can be used to access a “dynamic” attribute of a variable. Its syntax is as follows −
{{ attribute(object, method) }} 
{{ attribute(object, method, arguments) }} 
{{ attribute(array, item) }} 

For example,
{{ attribute(object, method) is defined ? 'Method exists' : 'Method does not exist' }}
Constant function returns the constant value for a specified string. For example,
{{ constant('Namespace\\Classname::CONSTANT_NAME') }}
The cycle function cycles on an array of values. For example,
{% set months = [‘Jan’, ‘Feb’, ‘Mar’] %}  
{% for x in 0..12 %} 
   { cycle(months, x) }} 
{% endfor %}
Converts an argument to a date to allow date comparison. For example,
<p>Choose your location before {{ 'next Monday'|date('M j, Y') }}</p> 
It will produce the following result −
Choose your location before May 15, 2017

The argument must be in one of PHP’s supported date and time formats.
You can pass a timezone as the second argument.
The dump function dumps information about a template variable. For example,
{{ dump(user) }}
The max function returns the largest value of a sequence. For example,
{{ max(1, 5, 9, 11, 15) }}
The min function returns the smallest value of a sequence. For example,
{{ min(1, 3, 2) }}
The include function returns the rendered content of a template. For example,
{{ include('template.html') }}
The random function generates a random value. For example,
{{ random([‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’]) }} 
{# example output: Jan #} 
Range function returns a list containing an arithmetic progression of integers. For example,
{% for x in range(1, 5) %} 
   {{ x }}, 
{% endfor %} 
It will produce the following result −
1,2,3,4,5

A Layout represents the common parts of multiple views, i.e. for example, page header, and footer.
A template can be used by another one. We can achieve this using template inheritance concept. Template inheritance allows you to build a base “layout” template that contains all the common elements of web site defined as blocks.
Let’s take a simple example to understand more about template inheritance.
Consider the base template located at “app/Resources/views/base.html.twig”. Add the following changes in the file.
base.html.twig
<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "UTF-8"> 
      <title>{% block title %}Parent template Layout{% endblock %}</title> 
   </head> 
</html>
Now move to the index template file located at “app/Resources/views/default/index.html.twig“. Add the following changes in it.
index.html.twig
{% extends 'base.html.twig' %}  
{% block title %}Child template Layout{% endblock %}
Here, the {% extends %} tag informs the templating engine to first evaluate the base template, which sets up the layout and defines the block. The child template is then rendered. A child template can extend the base layout and override the title block. Now, request the url “http://localhost:8000” and you can obtain its result.
The Asset manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript files, and image files.
To include JavaScript files, use the javascripts tag in any template.
{# Include javascript #} 
{% block javascripts %} 
   {% javascripts '@AppBundle/Resources/public/js/*' %} 
      <script src="{{ asset_url }}"></script> 
   {% endjavascripts %} 
{% endblock %} 
To include stylesheet files, use the stylesheets tag in any template
{# include style sheet #} 
{% block stylesheets %} 
   {% stylesheets 'bundles/app/css/*' filter = 'cssrewrite' %} 
      <link rel = "stylesheet" href="{{ asset_url }}" />
   {% endstylesheets %} 
{% endblock %}
To include an image, you can use the image tag. It is defined as follows.
{% image '@AppBundle/Resources/public/images/example.jpg' %} 
   <img src = "{{ asset_url }}" alt = "Example" /> 
{% endimage %} 

You can combine many files into one. This helps to reduce the number of HTTP requests, and produces greater front-end performance.
{% javascripts 
   '@AppBundle/Resources/public/js/*' 
   '@AcmeBarBundle/Resources/public/js/form.js' 
   '@AcmeBarBundle/Resources/public/js/calendar.js' %} 
   <script src = "{{ asset_url }}"></script> 
{% endjavascripts %}
 Print
 Add Notes
 Bookmark this page