Learn

Bouw Phlo Poll: een echte realtime applicatie in acht stappen. Elke stap eindigt met iets dat draait. Geen voorkennis nodig behalve een terminal met Docker. Liever het eindproduct? Download Phlo Poll als demo.

1InstellenIn deze tutorial bouw je Phlo Poll: een kleine poll-app die vraagt "Welke stack wint?". Je begint met een lege map en eindigt met een gestylede, meertalige, realtime poll. Elk hoofdstuk voegt een laag toe: een route, een view, CSS, data, stemmen, async updates, vertalingen en live resultaten. In dit eerste hoofdstuk installeer je Phlo, schrijf je je eerste route en zie je deze in de browser. 2ViewsViews live directly in your .phlo files and transpile to PHP methods that return HTML. In this chapter you replace the hello route with the first real poll page: a question and a row of answer buttons. You learn the view block, the dot shorthand, variables, and the one rule that bites everyone once: a blank line closes the view. 3CSSPhlo has its own compact CSS syntax: no semicolons, no braces required for single rules, and $variables that transpile to CSS custom properties. In this chapter you give the poll a dark card layout and a small theme, in a dedicated style file. 4GegevensDe peiling heeft opslag nodig. Phlo's ORM definieert een tabel als een klasse, en voor een tutorial-app is de JSON-bestuurder perfect: geen database-server, geen inloggegevens, één JSON-bestand per tabel. In dit hoofdstuk definieer je het model, vul je het met opties en render je echte records. 5StemmenEen peiling zonder stemmen is een lijst. In dit hoofdstuk wordt elke optie een formulier, ontvangt een POST route de stem, gaat de telling omhoog, en een omleiding her-render de pagina. Gewone HTTP, nog geen JavaScript: deze versie werkt in elke browser, met alles uit. 6AsyncMaak stemmen nu direct. Phlo's frontend runtime onderschept formulieren en links die gemarkeerd zijn met async, plaatst ze op de achtergrond en past de DOM-opdrachten van de server toe op de pagina. Geen herlaadbeurt, geen client-side status, geen API-laag: dezelfde route beantwoordt beide werelden. 7VertalingenPhlo behandelt vertaling als een renderingskwestie: je schrijft view-tekst in je brontaal, markeert het, en de lang resource levert de juiste taal op het moment van aanvraag, waarbij ontbrekende invoer op de achtergrond wordt vertaald. In dit hoofdstuk leert de poll Nederlands onder een /nl prefix. 8RealtimeOne gap remains: when someone else votes, your tab does not move. In this final chapter the server pushes results to every open browser through the Phlo Daemon, and then you ship the whole thing. The realtime part is optional: it requires one small Node service that lives outside the framework, and the poll is complete without it. The shipping part is not optional.