twig - niezłe widoki dla php
TRANSCRIPT
TWIG
Niezłe widoki dla PHP
Piotr Gabryjeluk{meet}.php #5, Poznań 2012
Po co widoki
● Żeby odseparować wygląd od logiki
● Dla innych osób niż programiści
● Dla bezpieczeństwa
● Twig jest językiem szablonów,a nie językiem programowania
● Twig pozwala na dostęp doz góry określonych metod
● Twig pozwala na tworzenie struktur w ramach szablonów
● Twig jest szybki i bezpieczny Fabien Potencier
Twig jako język szablonów
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=”/img/star.png” alt=”*”>{% endfor %}
Uwaga na range(1, 0)!
Budowanie klocków
● Makra
● Include'y
● Własne tagi(uwaga naprzenoś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/
Dziękuję za uwagę
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}<div class=”name”>
{u->getFirstName}{u->getLastName}
</div><div class=”location”>
{u->getLocation.city}{u->getLocation.street}
</div>{/foreach}
→ dla obiektów. dla tablic asocjacyjnych
Bonus – Twig
{% for u in users %}<div class=”name”>
{{ u.firstName }}{{ u.lastName }}
</div><div class=”location”>
{{ u.location.city }}{{ u.location.street }}
</div>{% endfor %}
{{…..}} wyświetlanie{%..%} logika, tagi
Do przejścia od ogółu do szczegółu zawsze używamy kropki, a zatem bez zmiany w szablonach, możemy zmienić implementację zmiennych przekazywanych do szablonu(np. dodać lazy-metody zamiast prepopulowanych arrayów)
Ułatwia to też prototypowanie:można stworzyć szablony i wypełnić je przykładowymi danymi (jako arraye), a potem wymienić kod na taki, który pobiera prawdziwe dane z bazy(jako metody)