TWIG - niezłe widoki dla PHP
piotrgabryjeluk1
5,558 views
25 slides
May 24, 2012
Slide 1 of 25
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
About This Presentation
Prezentacja przedstawi pokrótce zalety używania szablonów, język szablonów Twig i jego zalety względem alternatywnych rozwiązań dla PHP.
Slide Content
TWIG
Niezłe widoki dla PHP
Piotr Gabryjeluk{meet}.php #5, Poznań 2012
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
●Ż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 do
z 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
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
●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
●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')
);
→
<?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);
→
<?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>
→
<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 %}
●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”
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
{{ 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
●{% 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
{% 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)!
{% 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 na
przenośność)
●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>
→
<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 %}
→
{% 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ć
●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
●Python: DTL (Django), Jinja
●JavaScript: JinJS, Swig, Node-T, Templ8
●Ruby: Djerb, Liquid
Źródło
●http://twig.sensiolabs.org/
●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')),
));
<?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?
<? 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
{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)
{% 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)
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 5,558
- Slides 25
- Favorites 1
- Age 4940 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
45 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
45 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
36 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
33 views
21
Know for Certain
DaveSinNM
19 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
23 views