Zeit, dass unsere Seiten wie ECHTE Webseiten aussehen. Twig ist Symfonys Template-Engine – sichere, kompakte Syntax statt rohes PHP in HTML-Dateien zu mischen.

Warum überhaupt eine Template-Engine?

PHP selbst KÖNNTE direkt in HTML eingebettet werden (<?= $variable ?>) – Twig bringt gegenüber rohem PHP zwei entscheidende Vorteile: AUTOMATISCHES HTML-Escaping (schützt standardmäßig vor XSS, Kapitel 18 vertieft das) und eine bewusst EINGESCHRÄNKTE Syntax, die Designer/Frontend-Entwickler nicht versehentlich komplexe Geschäftslogik in Templates schreiben lässt.

Ein Template aus dem Controller rendern

#[Route('/projects', name: 'project_index', methods: ['GET'])]
public function index(): Response
{
    $projekte = [
        ['id' => 1, 'name' => 'Website-Relaunch'],
        ['id' => 2, 'name' => 'Mobile App'],
    ];

    return $this->render('project/index.html.twig', [
        'projekte' => $projekte,
    ]);
}

render() (aus AbstractController) nimmt den Template-Pfad RELATIV zu templates/ entgegen, plus ein Array – jeder Schlüssel wird zu einer im Template verfügbaren Variable.

Variablen ausgeben: {{ }}

<h1>Projekte</h1>

<ul>
    {% for projekt in projekte %}
        <li>{{ projekt.name }}</li>
    {% endfor %}
</ul>

{{ ... }} gibt einen Wert AUS (und escaped ihn automatisch), {% ... %} steuert LOGIK (Schleifen, Bedingungen) ohne selbst etwas auszugeben. projekt.name funktioniert GLEICHERMASSEN für Array-Schlüssel ($projekt['name']) und Objekt-Eigenschaften/Getter ($projekt->getName()) – Twig probiert automatisch beide Zugriffsarten.

Bedingungen: {% if %}

{% if projekte is empty %}
    <p>Noch keine Projekte vorhanden.</p>
{% else %}
    <ul>
        {% for projekt in projekte %}
            <li>{{ projekt.name }}</li>
        {% endfor %}
    </ul>
{% endif %}

Wichtige Filter: Werte transformieren

{{ projekt.name|upper }}                {# GROSSBUCHSTABEN #}
{{ projekt.beschreibung|slice(0, 100) }}  {# erste 100 Zeichen #}
{{ projekt.erstelltAm|date('d.m.Y') }}    {# Datum formatieren #}
{{ projekt.beschreibung|default('Keine Beschreibung') }}  {# Fallback bei null/leer #}
{{ projekt.tags|join(', ') }}             {# Array zu String #}

Filter werden mit | angehängt und lassen sich VERKETTEN: {{ projekt.name|lower|trim }} wendet lower und danach trim nacheinander an.

Kommentare in Twig

{# Dieser Kommentar landet NICHT im ausgegebenen HTML #}

Die globale app-Variable

In JEDEM Template automatisch verfügbar, ohne sie explizit aus dem Controller zu übergeben:

• app.user – der eingeloggte Nutzer, oder null (Block 5).
• app.request – das aktuelle Request-Objekt.
• app.flashes – Flash Messages, bereits in Kapitel 12 gesehen.
• app.environment – die aktuelle Umgebung (dev/prod/test).

Twig-Syntax vorab prüfen

php bin/console lint:twig templates/