Twig

Met Twig kan je met content scheiden van je code. Je hoeft dan dus nooit meer op zoek naar je content 'tussen' je code, en dat maakt grote websiteprojecten stukken overzichtelijker natuurlijk. Want het is natuurlijk vragen om problemen als meerdere programmeurs in HTML/PHP gaan zitten rommelen.

Wat is er nu zo leuk aan Twig?

In het kort: Twig voorkomt dubbele code door het werken met blokken die je kan gebruiken of vervangen of aanpassen in elke pagina. Twig zoekt ook het pad naar je css en afbeeldingen zelf uit en past dit aan als je bijvoorbeeld besluit om dit in een andere directory neer te zetten. Twig heeft makkelijkere leesbare code dan PHP.

In Symfony bevinden zich de Twig-bestanden in templates. Hieronder is de stand van zaken na het aanmaken van de StartController (beschreven in Controllers).

mijnwebsite
  • templates
    • base.html.twig
    • start
      • index.html.twig

Variabelen doorgeven via de Controller aan Twig

Hieronder een voorbeeld van hoe je variabelen kan doorgeven via Twig.

public function index()
    {
        $Uitvoeringen = [
            'T-Shirt',
            'Vest',
            'Jas',
        ];
        return $this->render('start/index.html.twig', [
            //Voorbeeld van wat variabelen
            'PaginaTitel' => 'Product',
            'Titel' => 'Kleding',
            'Kleur'=> 'Rood',
            //Nummer
            'Maat' => 42,
            //Array (zie hierboven)
            'Uitvoeringen' => $Uitvoeringen,
        ]);
    }
}

Zoals je ziet gaat het hier om tekstvariabelen, een numerieke variabele en een array. Hieronder worden ze weer opgepikt door het Twig-bestand.

{% extends 'base.html.twig' %}

{# Alle variabelen uit de Controller tussen deze tags: {{ }} #}

{% block title %}{{ PaginaTitel }}{% endblock %}

{% block body %}

    <h1>{{ Titel }}</h1>
    <ul>
        <li>Kleur {{ Kleur }} </li>
        {# En hier voor de grap vermeerder ik Maat met 1.43. #}
        <li> Maat {{ Maat +1.43}}</li>
    </ul>
    <h3>Uitvoeringen</h3>
    <ol>
    {% for Uitvoering in Uitvoeringen %}
        <li>{{ Uitvoering }}</li>
    {% endfor %}
    </ol>
{% endblock %}

Een object doorgeven via je Controller aan Twig

Als je netjes je objecten hebt gemaakt is het reuze makkelijk om deze door te geven aan je Twig template. Bekijk onderstaand voorbeeld maar eens even.

//CONTROLLER
class StartController extends AbstractController
{
    /**
     * @Route("/", name="start")
     */
    public function index(Request $request)
    {
        $dog= new Dog();
        $dog -> setName("Poepie");
        $dog -> setWeight(42);

        return $this->render('start/index.html.twig', [
            'dog' => $dog,
        ]);
    }
}
//TWIG BESTAND index.html.twig
{% extends 'base.html.twig' %}

{% block title %}Hond{% endblock %}

{% block body %}
<h1>Gegevens van hond {{ dog.name }}</h1>
<p>
    Gewicht {{ dog.weight }}
</p>
{% endblock %}

Twig bouwstenen

Als je bovenstaande hebt bestudeerd zal het je opgevallen zijn dat er steeds extends 'base.html.twig' staat. Dit is niet zomaar een stukje code wat wordt toegevoegd aan het Twig-bestand. Twig zal namelijk index.html.twig inbouwen in base.html.twig. Hoe werkt dit nu? Hieronder een uitleg hoe Twig werkt, Twig kijkt namelijk naar block en vervangt deze waar nodig.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        
        Hieronder zal Twig {% block title %} 'Welkom!' vervangen door 'Hond'
        <title>{% block title %}Welkom!{% endblock %}</title>
        
        Hier gebeurt niks mee
        {% block stylesheets %}{% endblock %}
        
    </head>
    <body>
    
        En deze wordt ook vervangen door de {% block body %} uit index.html.twig
        {% block body %}{% endblock %}
        
        Hier gebeurt niks mee
        {% block javascripts %}{% endblock %}
        
    </body>
    
</html>

Kort samengevat: Twig vervangt dus blokken waar nodig. Je kan echter ook het blok toevoegen in plaats van compleet vervangen. Gebruik daarvoor parent().

<title>{% block title %}Welkom! | {{ parent() }}{% endblock %}</title>

Zal resulteren in Welkom! Hond op je scherm.

... en hier binnenkort meer!