
18 Cze TWIG – zmienne, ify, pętle
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!