fbpx

TWIG – zmienne, ify, pętle

18 Cze TWIG – zmienne, ify, pętle

Posted at 10:00h in Programowanie by

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!

Zgarnij darmowy ebook i cotygodniową dawkę wiedzy

.
Tags:
Magdalena Limanówka-Kuciel
magdalena@panizkomputerem.pl

Jestem programistką, która lubi mieć ręce pełne roboty. Do życia potrzebuje komputera z internetem i kubka gorącej kawy. Więcej na stronie o mnie.