Templates – the View layer symfony 2

Each MVC framework offers the View layer, and Symfony2 is no different. In Symfony1, we were using plain PHP code. Symfony has introduced a new templating engine named Twig. The Symfony syntax is more elegant — it’s shorter and designed to be cleaner than regular PHP code in templates.

Note

We can still use it now. However, it’s not the recommended approach, as in most cases, you will not find examples of a working bundle code in pure PHP.

Let’s take a look at the template code within our bundle, src/AppBundle/Resources/views/Default/index.html.twig:

Hello {{ name }}!

Yes, this is it. As you can figure out, {{ name }} outputs the variable name. It is an equivalent of <?php echo $name; ?>. The code actually doesn’t do much, and it is not a valid HTML code (it just outputs some text). Let’s modify it a little:

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

{% block body %}
Hello {{ name }}!
{% endblock body %}

Now try to fire in the browser.

The change is subtle, but now the code renders a correct HTML code with all proper tags, and as a bonus, in the development mode, you get a Debug toolbar at the bottom.

So let’s explain what we’ve done so far. In the first line, we used extends, which means that our template, just like class, extends after another one. The syntax to call the template is the same as within the controller, with one exception. If we want to call for the template within app/Resources/view, we need to use the :: double colon prefix. Note that it’s enclosed within {% … %}. These characters indicate control structure. A control structure does not output code directly, it is used to control the flow. For example, the if statement, loops, setting new variables, and so on.

When we extend the syntax, we can’t place the new code anywhere. We need to let the parent template know which fragment we want to override. We do this by using blocks.

Let’s take a look at the base template in app/Resources/views/base.html.twig:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{%20asset('favicon.ico')%20}}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

This is pretty much a standard HTML code, but with a few Twig blocks defined: title, stylesheets, body, and javascript. Most of these are empty now, and we will fill these over time.

As you may have noticed, within our index.html.twig file, we have replaced the body block with the new content.

Note

You may wonder how the Debug toolbar gets injected. This is done through adding the Debug toolbar’s code just before the </body> tag. If you remove the body tag from the template, you will not get the debug toolbar. It means the Debug toolbar will not be rendered on non-HTML pages.

We will deal with Twig and templates more deeply in the next chapter, focusing just on the View layer. It is worth remembering that views should not be complicated and should not contain complicated logic. It’s not their job.

Note

Note that if you alter the Twig template, to see your changes you need to either work in development mode or clear the cache. In the production mode, templates are compiled in to PHP files, so changes are not reflected until you refresh the cache. If you want to clear the cache, refer to the list of common command-line commands in this article

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares