Stap 5: Maken van de interface
We kunnen nu controleren onze Raspberry Pi met eenvoudige PHP scripts maar er is geen interactie met de gebruiker en waardoor wij niet voor kiezen de LED aan/uit te schakelen. Laten we de interface!
Het samengesteld uit foto's die ik heb gevonden op Google afbeeldingen (zoek naar "on/off button"). Een was groen en de andere een rood, ik heb net toegevoegd het nummer met behulp van de Gimp. Elke afbeelding/knop is overeenkomt met de LED, dus als u op een van deze klikt, de bijbehorende LED zal worden omgezet in- / uitschakelen en de afbeelding wordt gewijzigd in de versie die van groen/rood. Skelet van de pagina zal worden gemaakt met HTML, de server interacties en pagina's generatie met PHP en laatste JavaScript voor het beheren van interactie met de gebruiker en pagina's animatie. Als u niet weet, JavaScript is een taal van de client-kant en in tegenstelling tot PHP, het niet een keer, maar voortdurend wordt uitgevoerd door uw browser. Dat is waarom u kunt de pagina's uiterlijk wijzigen zonder het herladen of toegang tot een andere. Als u waarom ik sprak over CSS vóór afvraagt zich, het is gewoon omdat we nodig is voor sommige stijl en de pagina-indeling als de de zwarte achtergrond. Ik heb niet een volledige CSS-bestand maken, omdat het niet nodig hier.
Moeten we eerst een "index.php"-bestand (extensie .php en niet .html oorzaak is zullen we gebruiken PHP-code, het helpt de server willen weten of er PHP uit te voeren voordat u de gegenereerde pagina). Deze pagina wordt de hoofdpagina met de 8 buttons. Deze knoppen zijn eerst gegenereerd met een "exec ("gpio Lees". $i, $output);" in een for-lus. Dan moeten we detecteren wanneer de gebruiker is op één van deze knoppen te klikken. Dat is waar de JavaScript is nuttig, ik zet het in een apart bestand met de naam "script.js" maar het nog steeds opgenomen in index.php. Het script is gewoon het toevoegen van een gebeurtenislistener aan alle acht knoppen en telkens wanneer een van deze wordt ingedrukt, maakt gebruik van een functie die vragen om gpio.php, ontvangst van het antwoord dan terug te zenden. Ten slotte, in functie van dit, de JavaScript verandert de knop rood (voor OFF) of groen (voor ON). Nu, de laatste pagina: gpio.php. Het bevat de code van de PHP om te schakelen aan/uit de LEDs in functie van wat de JavaScript-functie verzonden. De gebruiker moet niet normaal vragen voor deze exacte pagina maar er is één gouden regel bij het maken van websites en je moet altijd onthouden deze: "Nooit vertrouwen de gebruiker". Met andere woorden, nooit denken dat de gebruiker gaat altijd doen wat je denkt dat hij gaat om te doen. Dus, ik heb toegevoegd sommige effecten bij het begin van de PHP-code zoals ervoor te zorgen dat de gebruiker heeft een juiste waarde en niet een brief als voorbeeld. Ik maakte een klein diagram samengevat alle deze tekst.
U kunt het volledige project rechtstreeks op deze website hieronder downloaden.
