🌿 Twig Templates

⏱ Geschatte leestijd: 30 minuten · 6 stappen

Twig is de template-taal van Symfony. Je schrijft gewone HTML, maar met speciale tags voor variabelen, loops en if-statements. Zo maak je je pagina's dynamisch — de inhoud verandert op basis van data uit de controller.

1 De drie syntaxen van Twig

Twig heeft drie soorten speciale tags. Zodra je die herkent, begrijp je elk template:

{{ }} Waarde afdrukken

Alles tussen {{ }} wordt op de pagina geprint.

{{ product.naam }} → Laptop Pro

{% %} Logica uitvoeren

Voor if-statements, for-loops, extends, block, etc.

{% if voorraad > 0 %} … {% endif %}

{# #} Commentaar

Commentaar dat niet in de HTML terechtkomt.

{# Dit is een opmerking, niet zichtbaar in HTML #}

2 Variabelen gebruiken

Vanuit de controller stuur je variabelen mee met render(). In Twig gebruik je ze met {{ }}.

Controller (PHP)

return $this->render('product/detail.html.twig', [
  'naam' => 'Laptop Pro',
  'prijs' => 999.99,
  'op_voorraad' => true,
]);

Twig template

<h1>{{ naam }}</h1>
<p>€ {{ prijs }}</p>
{% if op_voorraad %}
<span>Op voorraad</span>
{% endif %}

🧪 Probeer het: pas de naam aan

Naam variabele: Prijs variabele:

HTML uitvoer:

Laptop Pro

€ 999.99

3 If-statements

Met {% if %} toon je content op basis van een voorwaarde. Let op: elk blok sluit je af met {% endif %}.

templates/product/detail.html.twig

{# Eenvoudige if #}
{% if product.voorraad > 0 %}
    <span class="badge-groen">Op voorraad</span>
{% else %}
    <span class="badge-rood">Uitverkocht</span>
{% endif %}

{# If met meerdere opties #}
{% if product.prijs < 100 %}
    <span>Goedkoop</span>
{% elseif product.prijs < 500 %}
    <span>Middenprijsklasse</span>
{% else %}
    <span>Premium</span>
{% endif %}

{# Is ingelogd? #}
{% if app.user %}
    Welkom, {{ app.user.username }}!
{% endif %}

4 For-loops: lijsten tonen

Met {% for %} loop je door een lijst (array of collectie). Sluit altijd af met {% endfor %}.

templates/product/index.html.twig

<table>
  <thead>
    <tr><th>Naam</th><th>Prijs</th></tr>
  </thead>
  <tbody>
    {% for product in producten %}
      <tr>
        <td>{{ product.naam }}</td>
        <td>€ {{ product.prijs }}</td>
        <td>
          <a href="{{ path('product_detail', {id: product.id}) }}">
            Bekijken
          </a>
        </td>
      </tr>
    {% else %}
      {# Wordt getoond als de lijst leeg is #}
      <tr><td colspan="3">Geen producten gevonden.</td></tr>
    {% endfor %}
  </tbody>
</table>

💡 Tip: Het {% else %} blok binnen een for-loop werkt anders dan bij een if! Bij een for-loop betekent else: "als de lijst leeg is".

5 Template overerving: extends en block

Elke pagina heeft dezelfde header, navbar en footer. Met template overerving hoef je die maar één keer te schrijven. Je maakt een basistemplate en vult de lege blokken in per pagina.

templates/base.html.twig

<!DOCTYPE html>
<html>
<head>
  <title>
    {% block titel %}
      Mijn Website
    {% endblock %}
  </title>
</head>
<body>
  <nav>...navigatie...</nav>

  {# Hier komt de pagina-inhoud #}
  {% block inhoud %}{% endblock %}

  <footer>...footer...</footer>
</body>
</html>

templates/product/index.html.twig

{# Overerven van het basistemplate #}
{% extends 'base.html.twig' %}

{# Eigen titel invullen #}
{% block titel %}
  Producten | Mijn Website
{% endblock %}

{# Eigen inhoud invullen #}
{% block inhoud %}
  <h1>Alle producten</h1>
  {% for product in producten %}
    <p>{{ product.naam }}</p>
  {% endfor %}
{% endblock %}

📌 Regel: Als je extends gebruikt, mag je template alleen block-tags bevatten — geen losse HTML daarbuiten.

6 Live Twig editor: zie de uitvoer direct

Pas het Twig-template aan en klik op Render om de HTML-uitvoer te zien. De variabelen zijn al ingesteld.

Twig template (bewerkbaar) Variabelen: naam="iPhone 15", prijs=999, op_voorraad=true

HTML uitvoer (code)

Browser weergave

📋 Samenvatting

✓ {{ variabele }} — waarde op de pagina printen
✓ {% if … %} … {% endif %} — conditioneel tonen
✓ {% for item in lijst %} … {% endfor %} — loop door een lijst
✓ extends 'base.html.twig' — overerven van een basistemplate
✓ {% block naam %} … {% endblock %} — invulbare blokken

🧠

Kennischeck

Test of je de stof begrepen hebt

Klaar met deze les? Markeer hem als voltooid!

← Vorige: Controllers Volgende: Database →