Lektion 6 - Nisses rör

Steg 1

Fixa en html-fil med enkel tabbad-vy. Kom igång direkt med JQuery och JQueryUI.

Steg 2

Lägg till en CSS-fil och en JavaScript-fil som länkas till, kom ihåg att lägga JavaScript-filen sist. Lägg till lite fancy CSS för stylingen, och lägg till ett badrum med några knappar för inredningen. Bind knapparna till en del JavaScript-kod som lägger till HTML-element, ett element för varje inredningsdetalj.

Steg 3

Lägg till lite JavaScript-kod som skickar data till servern asynkront, vilket innebär att sidan inte laddas om.

Steg 4

Fortsätt med JavaScript-koden som skickar all data. Lägg till en loop som hämtar alla badkar som användaren vill ha. Storleken av badkaren samt deras position i badrummet ska skickas i beställningen.

Steg 5

Det räcker givetvis inte att bara hämta alla badkar, utan vi vill hämta alla inredningsdetaljer. Helst gör vi inte många loopar efter varandra, så vi kan istället göra loopen från steg 4 lite smartare genom att använda en lista på vilka typer av detaljer som finns, och sedan loopa över den. Då kan man för varje detaljtyp (badkar, tvättmaskin osv) hämta alla faktiska saker (5 badkar, 3 tvättmaskiner osv) och lägga till dem alla på en gång.

Steg 6

Färdigt! Ta JavaScript-filen från steg 5 och använd den tillsammans med allt annat! Vi behöver nu bara ta hand om själva beställningen med PHP, och detta kan enkelt göras med följande rader:

<?php
  $_POST['time'] = strftime("%F %H:%M:%S", time());
  file_put_contents("order.log", json_encode($_POST)."\n", FILE_APPEND);
?>

Vi lägger alltså till en variabel i $_POST som innehåller tiden för beställningen, och sen dumpar vi hela $_POST till en text-fil, och kodar variabeln med JSON. Det är också detta som vi gör i exemplet, och alla beställningar kan du se här:

order.log

Uppgift

Få Nisses Rör att fungera på din dator, helst med PHP och allt. Lägg till fina bilder på alla inredningsdetaljer, så att det faktiskt är badkar, toaletter och sånt som man drar runt.