Utilizare sabloane - Tutorial Symfony

Postat la Tue 30 June 2015 in tutoriale, symfony 2

Un sablon (template) este un fisier text care genereaza un raspuns in orice format text (HTML, XML, CSV ..) si care include un mix de text si cod PHP:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Symfony!</title>
    </head>
    <body>
        <h1><?php echo $page_title ?></h1>

        <ul id="navigation">
            <?php foreach ($navigation as $item): ?>
                <li>
                    <a href="<?php echo $item->getHref() ?>">
                        <?php echo $item->getCaption() ?>
                    </a>
                </li>
            <?php endforeach ?>
        </ul>
    </body>
</html>

Symfony include insa un limbaj de templating puternic numit Twig ce ne permite sa scriem sabloane usor si mai puternice decat unn sablon clasic PHP:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Symfony!</title>
    </head>
    <body>
        <h1>{{ page_title }}</h1>

        <ul id="navigation">
            {% for item in navigation %}
                <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
            {% endfor %}
        </ul>
    </body>
</html>

Acest limbaj permite afisari rapide de variabile, putem introduce conditii sau parcurge diverse cicluri. De asemenea putem introduce filtre la textul afisat, de ex sa facem traduceri in diverse limbi.

De asemenea Twig este si foarte rapid pentru ca acse sabloane sunt compilate in format nativ PHP si stocate in cache situat in app/cache/{environment}/twig.

De obicei aceste sabloane din proiect includ parti comune ca header, footer, bare laterale (sidebar) - definite sub firma de block-uri - ce pot fi reunite intr-un sablon de baza care ulterior va fi extins/ suprascris de catre sablonul copil. Un exemplu de astfel de sablon poate fi:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}{% endblock %} - Symfony demo</title>
        {% stylesheets '@bootstrap_css' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
        {% endstylesheets %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-2 col-xs-3">
                    <div class="page-header" style="margin-top: 66px;">
                        <h3>{{ 'Side Menu'|trans }}</h3>
                    </div>
                    <ul>
                        <li><a href="/ro">RO</a></li>
                        <li><a href="/en">EN</a></li>
                        <li><a href="/de">DE</a></li>
                    </ul>
                </div>
                <div class="col-md-10 col-xs-9">
                    {% include "::messages.html.twig" %}
                    {% block body %}{% endblock %}
                </div>
            </div>
        </div>
        {% javascripts '@jquery' '@bootstrap_js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}
    </body>
</html>

Aici regasim doua {% block-uri %} ce pot fi suprascrise de sablonul parinte:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{% extends '::base.html.twig' %}

{% block title %}{{ 'Category edit'|trans }}{% endblock %}

{% block body -%}
    <div class="row page-header">
        <h2>Category edit
            <a href="{{ path('admin_category') }}" class="btn btn-default pull-right">{{ 'List'|trans }}</a>
        </h2>
    </div>
    <div class="row">
        {{ form(edit_form) }}
    </div>
{% endblock %}

Uzual aceste pagini se regasesc in folderul app/Resources/views/ pentru sabloanele parinte, cat si in fiecare bundle in folderul Tutorial/TestBundle/Resources/views/ (si subdirectoare).

Mai multe gasiti aici.

Anterior - Creare controller Urmator - Integrare Bootstrap

tutoriale symfony symfony 2