�ݺ�ߣ

TWIG

Niezłe widoki dla PHP

{meet}.php #5, Poznań 2012 Piotr Gabryjeluk

Po co widoki

● Żeby odseparować wygląd od logiki

● Dla innych osób niż programiści

● Dla bezpieczeństwa

Twig jako język szablonów

● Twig jest językiem szablonów,
a nie językiem programowania

● Twig pozwala na dostęp do
z góry określonych metod

● Twig pozwala na tworzenie
struktur w ramach szablonów
Fabien Potencier
● Twig jest szybki i bezpieczny

Instalacja

● git clone lub git submodule add

git://github.com/fabpot/Twig.git

● PEAR
$ pear channel-discover pear.twig-project.org
$ pear install twig/Twig

Bootstrap → twig.php
<?php

require_once 'lib/Twig/Autoloader.php';
Twig_Autoloader::register();

$twig = new Twig_Environment(

/* loader */
new Twig_Loader_Filesystem('/app/templates'),

/* opts */
array('cache' => '/tmp/twig-cache')

);

Użycie → meeting.php

<?php

require_once 'lib/twig.php';

$context = array(
'imie' => 'Gabryś',
'miasto' => 'Poznań',
'miejsce' => 'Coworking ZOO',
'spotkanie' => '{meet}.php',
'numer' => 5,
);

$twig->render('meeting.html', $context);

Użycie → meeting.html

<html>
<head><title>Spotkanie</title></head>
<body>
<h1>{{ spotkanie }} #{{ numer }}</h1>
<p>Miejsce: {{ miejsce }}, {{ miasto }}</p>
<p>Uczestnik: {{ imie }}</p>
</body>
</html>

Język szablonów Twiga

● Wyświetlenie zmiennej
{{ zmienna }}

● Filtr raw
{{ zmienna | raw }}

● Spaceless
{% spaceless %}
kod HTML
{% endspaceless %}

Mały wielki operator

.

Mały wielki operator

Multioperator „kropka”: {{ a.bar }}
● $a['bar']

● $a->bar

● $a->bar()

● $a->getBar()

● $a->isBar()
Kot pod wrażeniem operatora „kropki”

Filtry

{{ zmienna | filtr }}
● title, capitalize, upper, lower, striptags, nl2br

● format, replace

● join(', '), length

● number_format(2, ','), url_encode, json_encode

Warunki

● {% if warunek %} … {% endif %}
● operatory logiczne: or, and, not, ()

● testy: is odd, is even, is empty, is constant

Pętle

{% for u in uczestnicy %}

<p>{{ loop.index }}</p>
<p>{{ u.imie }} {{ u.nazwisko }}</p>
<p>{{ u.miasto }}</p>

{% if u.organizator %}
<p class=”role”>organizator</p>
{% endif %}

{% endfor %} Przykładowa pętla

Range

{% for i in range(1, gwiazdki) %}
<img src=/slideshow/twig-nieze-widoki-dla-php/13055695/”/img/star.png” alt=”*”>
{% endfor %}

Uwaga na range(1, 0)!

Budowanie klocków

● Makra

● Include'y

● Własne tagi
(uwaga na
przenośność)

Szablony → layout.html

<head>
<title>{% block tytul %}{% endblock %}</title>
</head>
<body>
{% block tresc %}{% endblock %}
<div class=”footer”>
{% block stopka %}
<p>© 2012, Poznań</p>
{% endblock %}
</div>
</body>

Szablony → meeting.html

{% extend 'layout.html' %}

{% block tytul %}
{{ spotkanie }} #{{ numer }}
{% endblock %}

{% block tresc %}
<p>Miejsce: {{ miejsce }}, {{ miasto }}</p>
<p>Uczestnik: {{ imie }}</p>
{% endblock %}

Integracja

● Zend Framework: zwig

● Zend Framework 2: ZFTwig

● Symfony: out of the box

● Code Igniter: tak

● Twój framework: już wiesz jak to zrobić

Dla innych środowisk

● Python: DTL (Django), Jinja

● JavaScript: JinJS, Swig, Node-T, Templ8

● Ruby: Djerb, Liquid

Źródło

● http://twig.sensiolabs.org/

Bonus – PHP vs Twig vs Smarty
<?php

// Przykładowa klasa użytkownika

class User {

public function __construct($firstName, $lastName, $location) ...
public function getFirstName() …
public function getLastName() …
public function getLocation() … // zwraca array

}

// Kontekst przekazywany do szablonu

$context->add('users', array(
new User('Piotr', 'Gabryjeluk', array('city' => 'Poznań', 'street' => 'Św. Marcin')),
new User('Jan', 'Kowalski', array('city' => 'Tomyśl', 'street' => 'Towarowa')),
new User('Mariusz', 'Kolonko', array('city' => 'Nowy Jork', 'street' => 'Wall Street')),
));

Bonus – PHP (Zend View style)

<? foreach ($this->users as $u): ?>
<div class=”name”>
<?= $u->getFirstName() ?>
<?= $u->getLastName() ?>
</div>
<div class=”location”>
<?= $u->getLocation()['city'] ?>
<?= $u->getLocation()['street'] ?>
</div>
<? endforeach; ?>
Tylko w PHP 5.4!

A htmlspecialchars?

Bonus – Smarty

{foreach $users as $u}
{u->getFirstName} → dla obiektów
. dla tablic asocjacyjnych
{u->getLastName}
</div>
<div class=”location”>
{u->getLocation.city}
{u->getLocation.street}
</div>
{/foreach}

Bonus – Twig

{% for u in users %} {{…..}} wyświetlanie
{%..%} logika, tagi
Do przejścia od ogółu do szczegółu
{{ u.firstName }} zawsze używamy kropki, a zatem bez
zmiany w szablonach, możemy
{{ u.lastName }} zmienić implementację zmiennych
</div> przekazywanych do szablonu
(np. dodać lazy-metody zamiast
<div class=”location”> prepopulowanych arrayów)

{{ u.location.city }} Ułatwia to też prototypowanie:
można stworzyć szablony i wypełnić je
{{ u.location.street }} przykładowymi danymi (jako arraye),
a potem wymienić kod na taki, który
</div> pobiera prawdziwe dane z bazy
{% endfor %} (jako metody)

�ݺ�ߣ

TWIG - niezłe widoki dla PHP

More Related Content

TWIG - niezłe widoki dla PHP