This chapter is about 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
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.
Twig Engine
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.
Syntax
Twig contains three types of special syntax −
- {{ … }} − 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.
- {# … #} − 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”.
Example
Let’s go through a simple example using twig engine.
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');
}
}
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.
home.html.twig
//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.
Tags
Twig supports the following important tags −
Do
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 %}
Include
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' %}
Extends
The extends tag can be used to extend a template from another one. Its syntax is as follows −
{% extends "template.html" %}
Block
Block acts as a placeholder and replaces the contents. Block names consists of alphanumeric characters and underscores. For example,
<title>{% block title %}{% endblock %}</title>
Embed
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
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
For loop fetches each item in a sequence. For example,
{% for x in 0..10 %}
{{ x }}
{% endfor %}
If
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 %}
Filters
Twig contains filters. It is used to modify content before being rendered. Following are some of the notable filters.
Length
The length filter returns the length of a string. Its syntax is as follows −
{% if name|length > 5 %}
...
{% endif %}
Lower
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.
Replace
The replace filter formats a given string by replacing the placeholders. For example,
{{ "Adglob site %si% and %te%."|replace({'%si%': web, '%te%': "site"}) }}
It will produce the following result −
Adglob website
Title
The title filter returns a titlecase version of the value. For example,
{{ 'symfony framework '|title }}
It will produce the following result −
Symfony Framework
Sort
The sort filter sorts an array. Its syntax is as follows −
{% for user in names|sort %}
...
{% endfor %}
Trim
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!
Functions
Twig supports functions. It is used to obtain a particular result. Following are some of the important Twig functions.
Attribute
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
Constant function returns the constant value for a specified string. For example,
{{ constant('Namespace\\Classname::CONSTANT_NAME') }}
Cycle
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 %}
Date
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.
Dump
The dump function dumps information about a template variable. For example,
{{ dump(user) }}
Max
The max function returns the largest value of a sequence. For example,
{{ max(1, 5, 9, 11, 15) }}
Min
The min function returns the smallest value of a sequence. For example,
{{ min(1, 3, 2) }}
Include
The include function returns the rendered content of a template. For example,
{{ include('template.html') }}
Random
The random function generates a random value. For example,
{{ random([‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’]) }}
{# example output: Jan #}
Range
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
Layouts
A Layout represents the common parts of multiple views, i.e. for example, page header, and footer.
Template Inheritance
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.
Example
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.
Assets
The Asset manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript files, and image files.
JavaScript
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 %}
Stylesheets
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 %}
Images
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 %}
Compound Assets
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 %}
In this chapter we learned about Symfony – View Engine. To Know more, Click Here.