Jeśli przeczytałeś choć pare artykułów na moim blogu, to na pewno masz już pewną wiedzę z Symfony. Do tej pory pisałam o części backendowej aplikacji. Tym razem coś bardziej od frontu. Twig to narzędzie sprawiające, że nawet backendowiec z krwi i kości jak ja, lubi pogrzebać trochę w szablonach. Zapraszam Cię na pierwszy post z tej serii, twig – zmienne, ify, pętle – to wyzwanie na dziś.
TWIG – co to takiego?
Twig to system szablonów, którego największą zaletą jest oddzielenie logiki i budowy aplikacji od jej wyglądu. Jest niesamowicie łatwo rozszerzalny i logiczny w swojej semantyce. Pomyśl, że budujesz szablon używając htmla, a gdy potrzebujesz piszesz sobie zwykły if czy pętle for bez używania do tego PHPa – to właśnie daje nam Twig. Coś cudownego! Uważam, że warto zainstalować tą paczkę w swoim projekcie. A jak to zrobić znajdziesz w poście o tym czym jest Composer. Paczkę możesz pobrać z oficialnego repo na githubie. Wystarczy dodać go do swojego pliku composer.json i zainstalować.
composer require "twig/twig:^2.0"
Twig – Zmienne
Składnia tak jak wspomniałam jest bardzo prosta.
<!DOCTYPE html>
<html>
<head>
<title>Mój pierwszy szablon</title>
</head>
<body>
<ul id="nav">
</ul>
<h1>Witaj {{ name }}!</h1>
</body>
</html>Jak widzisz to zwykły html z jedną różnicą, w tym przykładzie pojawiła się już zmienna. Możesz zauważyć, że jest w podwójnych nawiasach {{ }}. Takie zmienne są rzutowane do stringa. Oczywiście musisz ją wcześniej przekazać to szablonu w taki sposób:
$loader = new \Twig\Loader\FilesystemLoader('/path/to/templates');
$twig = new \Twig\Environment($loader, [
'cache' => '/path/to/compilation_cache',
]);
echo $twig->render('index.html', ['name' => 'Magdalena']);Jeśli używasz w swoim projekcie DI możesz przekazać $twig przez konstruktor.
Zmienna może być również obiektem. Wtedy dostajemy się do poszczególnych wartości podobnie jak w JSie np. {{ user.name }}.
Funkcje warunkowe
Zmienne to nie jedyna zaleta Twiga. Kolejna to instrukcje warunkowe i pętle. Są praktycznie analogiczne do PHPa.
<!DOCTYPE html>
<html>
<head>
<title>Mój pierwszy szablon</title>
</head>
<body>
{% if app.user %}
<ul id="nav">
</ul>
{% endif %}
<h1>Witaj {{ name }}!</h1>
</body>
</html>Różnią się one od zmiennych typem nawiasów, tym razem są to znaki {% %}. Wszystkie elementy funkcyjne w Twigu używają właśnie takich nawiasów.
Pewnie zastanawiasz się co oznacza ten If. Tak właśnie wygląda w Twigu sprawdzenie czy użytkownik jest zalogowany czy nie. Czyż nie piękne w swojej prostocie?
Pętle
Kolejny element to pętle. Poniżej jest pętla for, jedyna dostępna w Twigu. Przypomina bardziej pętle foreach niż for. Zawiera jednak w sobie mały haczyk. UWAGA dla wszystkich PHPowców, kolejność parametrów jest odwrócona. Zauważ, że tutaj zapis wygląda następująco:
<!DOCTYPE html>
<html>
<head>
<title>Mój pierwszy szablon</title>
</head>
<body>
{% if app.user %}
<ul id="nav">
{% for element in nav %}
<li>
<a href="{{ element.href }}">{{ element.label }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
<h1>Witaj {{ name }}!</h1>
</body>
</html>W PHP napisałbyś foreach($nav as $element) lub for ($i = 0; $i < count($nav); $i++)
Na dzisiaj to tyle. Już niedługo następny post z tej serii, a w nim funkcje, filtry a potem formularze. Jeśli nie chcesz niczego przegapić zapisz się do newslettera poniżej!
