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.

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 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. 3CSSPhlo heeft zijn eigen compacte CSS-syntaxis: geen puntkomma's, geen accolades vereist voor enkele regels, en $variables die compileren naar CSS aangepaste eigenschappen. In dit hoofdstuk geef je de poll een donkere kaartlay-out en een klein thema, in een speciale stijlbestand. 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. 8RealtimeEr blijft één gat over: wanneer iemand anders stemt, beweegt jouw tabblad niet. In dit laatste hoofdstuk duwt de server resultaten naar elke open browser via phloWS, en dan verzend je het geheel. Het realtime-gedeelte is optioneel: het vereist de aparte phlo-websocket Node-service, en de peiling is compleet zonder dit. Het verzendgedeelte is niet optioneel.