2: Views

Views leven direct in je .phlo-bestanden en compileren naar PHP-methoden die HTML retourneren. In dit hoofdstuk vervang je de hello route door de eerste echte pollpagina: een vraag en een rij antwoordknoppen. Je leert de view block, de dot shorthand, variabelen en de ene regel die iedereen eenmaal bijt: een lege regel sluit de view.

2.1: Van route naar view

Vervang de inhoud van poll.phlo:

prop question = 'Welke stack wint?'

route GET poll => $this->home

method home => view($this, 'Phlo Poll')

view:
<main#app.poll>
    <h1>$this->question</h1>
</main>

Van boven naar beneden: prop question is een statische eigenschap van de poll klasse. De route koppelt GET /poll aan de home methode. home roept view($this, 'Phlo Poll') aan: het tweede argument wordt de paginatitel, en door $this als de body door te geven, wordt de anonieme view van het bestand gerenderd, het blok dat begint bij view: zonder een naam.

Herlaad http://localhost/poll. Je ziet de vraag als een kop op een ongestylede pagina.

2.2: Punt shorthand

Kijk nog eens naar de openingstag:

<main#app.poll>

Phlo breidt #id en .class direct uit op de tagnaam:

<main id="app" class="poll">

Je kunt klassen stapelen (<div.card.wide>) en een afsluitende schuine streep sluit een tag zelf af in de bron: <div.spacer/> wordt <div class="spacer"></div>. Een waarschuwing die later belangrijk zal zijn: attribuutwaarden die variabelen of schuine strepen bevatten, hebben aanhalingstekens nodig, dus schrijf <a href="/poll"> en <form action="/poll/vote/$id">.

Verander <main#app.poll> in <main#app.poll.wide>, herlaad en inspecteer het element: de klassenlijst leest nu poll wide. Zet het terug.

2.3: Een lege regel sluit de view.

Een view-blok eindigt bij de eerste lege regel. Alles na die lege regel is weer controllercode. Dit is opzettelijk: het is hoe je meerdere views in één bestand plaatst. Het betekent ook dat je nooit een lege regel binnen een view mag invoegen voor visuele ruimte; de HTML eronder zou in de controllercode lekken en de build stopt met HTML outside a view.

view:
<h1>One view</h1>
<p>Still the same view, no blank lines.</p>

view footer:
<p>A second, named view. The blank line above ended the first one.</p>

Probeer het: zet een lege regel tussen <h1> en </main> in je view, herlaad en lees de foutpagina. Het geeft het exacte bestand, de regel en de view die gesloten was. Verwijder de lege regel en de pagina is weer terug.

2.4: Variabelen, expressies en compositie

Binnen een view heb je drie niveaus van expressie:

• $var en $this->prop voor gewone waarden
• {{ expr }} voor methode-aanroepen en alles met argumenten
• <foreach> en <if> tags, altijd op hun eigen regel

Breid poll.phlo uit met een statische lijst van opties en een tweede view:

prop question = 'Welke stack wint?'
prop options = ['Phlo', 'Next.js', 'Laravel', 'Rails']

route GET poll => $this->home

method home => view($this, 'Phlo Poll')

view:
<main#app.poll>
    <h1>$this->question</h1>
    {{ $this->choices }}
</main>

view choices:
<section.card>
<foreach $this->options AS $option>
    <button>$option</button>
</foreach>
</section>

{{ $this->choices }} rendert de genoemde view choices inline; dit is hoe je pagina's samenstelt, omdat view(...) zelf slechts één keer per verzoek mag worden aangeroepen. De <foreach> tag loopt over de prop; let op dat deze op zichzelf staat, nooit inline binnen andere HTML.

Herlaad http://localhost/poll: de vraag plus vier gewone knoppen. Lelijk, maar levend. Volgende hoofdstuk: CSS.