Zum Inhalt

Logik#

Das Hinzufügen von neuen Dateien funktioniert genau gleich wie ohne Twig. Dieser Vorgang wurde bereits in einem vorherigen Kapitel erläutert. Die Dateien werden in den entsprechenden Ordnern abgelegt und können über den Controller geladen werden. Im Gegensatz zum Framework muss Twig über eine render Methode geladen werden. Der Aufruf davon sieht wie folgt aus:

<?php
// Die Variable $twig ist vom Typ Twig_Environment (1)
echo $this->twig->render('pfad/zu/view.twig.html', ['variablen' => 'werte']);
  1. Die Variable $twig wurde in der Base Klasse definiert und ist vom Typ Twig_Environment. Der genaue Vorgang wurde in der Installation beschrieben.
<?php
require_once '../app/models/FlugiTypen.php';

class Flugzeug extends Controller
{
    public function index($name = '')
    {
        // Flugzeug Model laden und befüllen
        $flugzeug = $this->model('Flugi');
        $flugzeug->id = 1;
        $flugzeug->name = "Boing 747";
        $flugzeug->speed = 1000;
        $flugzeug->typ = FlugiTypen::Ballon;

        // Typen laden (1)
        $typen = array_map(
            fn ($enumItem) => "{$enumItem->value}",
            FlugiTypen::cases()
        );

        // View laden
        echo $this->twig->render('flugzeug/index.twig.html', ['title' => "Flugzeug / Index", 'flugzeug' => $flugzeug, 'typen' => $typen]);
    }
}
  1. Die Typen sind ein Enum vom Typ string. Sie werden in ein assoziatives Array umgewandelt, damit der Text und die Nummer getrennt sind.
<?php
class Flugi
{
    public int $id;
    public string $name;
    public FlugiTypen $typ;
    public float $speed;
}
Flugzeug Typen Enum
<?php
enum FlugiTypen: string
{
    case Ballon = 'Ballon 🎈';
    case Flugzeug = 'Flugzeug 🛩';
    case Hubschrauber = 'Hubschrauber 🚁';
    case Rakete = 'Rakete 🚀';
    case Ufo = 'Ufo 🛸';
}

Formular#

Ein Formular verhält sich exakt gleich wie im HTML. Der einzige Unterschied ist, dass die Werte der Felder über Twig eingefügt werden. So enthält die Datei kein PHP und nur gültiges HTML. Hier wird das Basislayout überschrieben, welches den Block content enthält. So konnten alle Imports in einer einzigen Datei gesammelt werden.

{% extends "base/layout.twig.html" %}

<!-- Wir überschreiben den Content-Block -->
{% block content %}
<h1 class="mt-5">{{ title }}</h1>
<form>
    <div class="form-group">
        <label for="id">Flugzeug ID</label>
        <input type="text" class="form-control" id="id" name="id" value="{{ flugzeug.id }}">
    </div>
    <div class="form-group">
        <label for="name">Flugzeug Name</label>
        <input type="text" class="form-control" id="name" name="name" value="{{ flugzeug.name }}">
    </div>
    <div class="form-group">
        <label for="speed">Geschwindigkeit</label>
        <input type="number" class="form-control" id="speed" name="speed" value="{{ flugzeug.speed }}">
    </div>
</form>
{% endblock %}

Resultat des Formulars

Ein Dropdown mit dynamischem Inhalt ist über HTML nicht möglich. Mithilfe von Twig kann dies jedoch mit Leichtigkeit ermöglicht werden. Dazu wird am besten ein Macro erstellt, damit das Dropdown wiederverwendbar ist. Hier wird der Name des Dropdowns und die Optionen übergeben. Die Optionen werden in einer Schleife durchlaufen und die aktuelle Option wird mit dem Wert verglichen. Ist dies der Fall, wird das Attribut selected gesetzt. Dieses Attribut ist für das Dropdown notwendig, damit die Option bereits ausgewählt ist.

{% macro dropdown(name, values, selected) %}
<select name="{{ name }}">
    {% for key, value in values %}
    <option value="{{ key }}" {% if(key==selected) %} selected {% endif %}>{{ value }}</option>
    {% endfor %}
</select>
{% endmacro %}

Damit das Makro verfügbar ist muss es auch in der View geladen werden. Dies geschieht mit dem import Befehl. Nun kann das Makro wie eine normale Funktion aufgerufen werden. Das daraus generierte HTML wird dann in die View eingefügt.

Dropdown verwenden
{% import "helpers/dropdown.twig.html" as dHelper %}
{{ dHelper.dropdown('typ', typen, flugzeug.typ) }}