Göm menyn

729G28 Webbprogrammering och databaser

Laboration 2. Webb


Innehåll

Syfte (översikt)

Med Webbprogrammering menas i denna kurs att skapa webbsidor med hjälp av HTML, ge dem enhetlig utformning med CSS, att dessutom skapa dynamik i webbsidorna med hjälp av Php. Php är ett språk som körs på webbservern medan HTML och CSS tolkas av användarens webbläsare.

Redovisning

Denna labb redovisas genom att muntligt diskutera koden som löser uppgifterna med assistent. Båda laboranterna ska vara närvarande.

Förberedelser

Gå igenom åtminstone följande W3Schools tutorials:

  • HTML Tutorial: avsnitten Basic till och med Links, Tables (första delen räcker) till och med ID samt HTML Forms (hela).
  • CSS Tutorial: avsnitten Introduction till Colors samt Text
  • PHP Tutorial: avsnitten Intro, hela Syntax till och med Constants, hela Oberators till Arrays samt i Superglobals avsnitten om $_Get och $_Post. Dessutom PHP Forms (hela) samt under PHP Advanced: PHP include, cookeis och sessions.

Uppgifter

Tips: VScode, som finns installerat i SU-pularna, fungerar bra att programmera HTML, CSS och PHP. I följande instruktioner, ersätt liuid123 med ditt eget liuid.

  1. Börja med att hitta rätt ställe att lägga dina filer! Vi jobbar med en webbserver speciellt uppsatt för att användas i kurser vid LiU. Den har adress php-web.edu.liu.se. Varje student som går kursen har ett eget utrymme (en mapp) som vi kallar "vår egen www-area", där filer ska ligga för att kunna hanteras av webbservern. Www-arean ligger inte under det vanliga kontot på linux-systemen (dvs /home/liuid123) utan på /wwwpub/liuid123. Du når det genom att öppna filutforskaren och gå direkt till /wwwpub/liuid123 (eller i ett terminalfönster med kommandot cd /wwwpub/liuid123). Notera att det kan ta flera minuter efter att du skrivit in adressen (oavsett om du går via filutforskaren eller med cd) tills att innehållet visas, eftersom det faktiskt är en annan server som systemet kopplar upp sig mot.
    Hitta din www-area.
  2. Skapa ett html-dokument med en rubrik (h1-tagg) och en paragraf (paragraf-tagg) med text, t.ex "Uppgift 1 avklarad, här är ett HTML-dokument!". Ge dokumentet namnet test1.html och spara det på din www-area. För att sedan titta på den webbsidan du just skapat går du (med ett webbläsarprogram, t.ex. firefox) till url-en: https://php-web.edu.liu.se/~liuid123/test1.html. Beundra din nya sida.
    (Tips: Ser svenska tecken konstiga ut? Testa att lägga till taggen <meta charset="utf-8"> i head för att tala om för webbläsaren vilken teckenkodning som används.)
  3. Skapa ett till html-dokument som heter test2.html och lägg in en ny rubrik (med h1) och paragraf, t.ex. "Uppgift 2 avklarad, länk till ny sida fixad!". Spara den också på din www-area. I filen test1.html ska du nu lägga till en lista av följande texter:
    • "Jag är glad!"
    • "Jag är arg!"
    • "Jag är ledsen."
    där första raden också innehåller en länk till test2.html. När du sparat ner filerna (på din www-area) laddar du om test1.html webbläsaren. Klicka på länken i listan och beundra din andra sida.
  4. Använd CSS för att göra sidorna lite snyggare: skapa en fil testDesign.css på din www-area. Ge dokumentet en trevlig bakgrundsfärg (html-taggen är body och egenskapen background-color). Ge rubriken en färg som kontrasterar bra och se till att den blir centerjusterad. Notera hur css-kod skrivs i en egen fil, utan html-kod, så att den kan användas på alla dokument på en sajt. Lägg till kod som gör att dina gamla filer test1.html och test2.html använder denna css-fil. Lägg också till en ny rad sist i test1, t.ex. med texten "Uppgift 3 fixad, nu har vi CSSkod som gör sidan fin?". Spara ner filerna och testkör.
  5. Ett enkelt sätt att skicka data mellan webbsidor är att skicka en variabel och dess värde i länkens URL. I listan i test1.html, gör så att variabeln "humor" skickas med värdet "glad", "arg", respektive "ledsen" på länken för respektive rad.
    Byt namnet på test2.html till test2.php så att du kan skriva php-kod i den (notera att om du har filen öppen i en textredigerare kan det vara bökigt att byta namn, beroende på vilken textredigerare du använder). Ändra rubriken på test2-sidan till något passande för respektive humör och skriv under den "Uppgift 4 fixad, variabler i URLen hanterade!". Klicka runt och se att det blir rätt. Prova också att redigera variabelvärdet i URLen till något helt annat och ladda om sidan. Vad händer då?
  6. Lägg till ett formulär (form) i filen test2 som ber användaren skriva in namn och epost (använd labels och inmatningsfält av typen text - ja, det finns en typ email, men nästa uppgift bygger på att ni använder text här - i projektet kan ni använda email om ni vill). Ge det första fältet namnet "Uname", och det andra namnet "Uemail" och hoppa över subnmit-knapp så länge. Lägg in texten "Uppgift 5 avklarad, formulär skapat" efter formuläret. Spara och titta på resultatet. Testa att skriva i textfälten. Ladda om sidan. Vad händer? Gå mellan sidorna med browserns pilar.
  7. Använd php för att göra något med det användaren matade in. En submit-knapp (i ett formulär) behöver en php-fil, som kommer att laddas när knappen tryckts. Man kan välja att skapa en ny sida för det som ska hända när knappen tryckts eller att återvända till samma sida. Om man återvänder till samma sida måste man i koden skilja på om sidan laddas för att knappen är tryckt eller laddas av annan anledning. Denna gång gör vi en ny fil för enkelhetens skull. Skapa en fil med namnet testAction.php på din www-area och lägg in html-kod för att skapa en enkel sida (du behöver bara en body, ev en h1 om du vill). Hämta och lagra namn och epost i en associativ array (jfr pythons dictinary) med nycklarna (key) "namn", "epost".
    Gör så att dokumentet visar texten "Hej" följt av namnet från formuläret och på en rad nedanför "Din epostadress är" följt av epostadressen användaren matade in. Antag att submit-knappen kommer att använda metod=POST. Du ska också lägga till en paragraf under dessa texter, med texten "Uppgift 6 avklarad, formuläret avläst!". Lägg sedan till en submit-knapp i formuläret i filen test2.html, vars action använder testAction.php och vars metod är POST. Spara ner allt på din www-area och ladda om test1.html. Klicka dig in på test2. Vad står det på knappen i formuläret? Angav du något namn? Mata in något i formuläret och tryck på knappen. Vilken bakgrundsfärg har den nya sidan? Centrerad rubrik? Varför? Fixa den nya sidan så att den är lika fin som de tidigare.
Felsökning

Om man skulle stava fel på en variabel eller göra andra missar i sin phpkod, är php-servern normalt inställd på att bara tyst generera en tom sida. Det finns goda säkerhetsskäl för detta: ju mer information man exponerar om applikationens inre kod, t.ex. variabelnamn, desto mer information kan utnyttjas av en hypotetisk attackerare för att hitta applikationens svaga punkter. För att få lite hjälp med felsökningen kan man slå på felmeddelanden från servern med följande kommando (det måste finnas i början på varje php-fil):
<?php ini_set('display_errors', TRUE); ?>

Man kan också "print-debugga" (dvs följa programflödet genom att skriva ut vad som händer), med funktionen echo. Nackdelen med att bara göra echo är att det är odefinierat var på sidan utskriften hamnar, oftast är det ovanför all annan utmatning på sidan, men om man inte ser den kan det bero på att den skrivs ut bakom någon bild eller på en yta där textens färg blir densamma som bakgrundsfärgen. Ett sätt att alltid få ut sina variabelvärden läsligt är att använda Javascript-consolen. Vi behöver då en funktion ur JavaScript, nämligen console.log, som tar en sträng som argument, evaluerar den och skriver ut dess värde på consolen. Det ser ut så här:
echo "<script>console.log('<?php en variabel som du vill se värdet på ?>')</script>";
Notera att en sträng inuti en sträng behöver en annan typ av strängmarkering (man kan lika gärna ha ' ytterst och " inuti). Om du läser sidan med Safari på en mac verkar php-taggarna inte behövas (dvs <?php respektive ?> kan strykas i ovanstående.

Tyvärr får man ibland ändå tomma sidor bara för att man missat ett semikolon eller slutparentes..., men då ger consolen åtminstone ett felmeddelande ("Failed to load..."). Det beror på att det liksom inte blir någon fungerande kod att visa eftersom phpkoden inte går att tolka. Alltså: tom sida betyder nästan alltid att ett semikolon saknas eller att parenteser är felbalanserade.

  1. Kontrollera inmatade data. När man hanterar data som användare matat in behöver man kontrollera vad det är som matats in. Till exempel kan vi vilja kontrollera att en rimlig epostadress matats in i formuläret. En epostadress måste följa formatet abc123@abc123.abc123 där abc123 är någon kombination av bokstäver och siffror (ja, det är det formatet som filter_var testar).
    Dessutom kan användare medvetet försöka förstöra för oss. Mata in följande sträng i formuläret: <script>alert("HACKED")</script> och tryck på skicka. Det ser lite läskigt ut, men just nu kan man bara skada sig själv. Om man däremot lagrar texten och visar det för en annan användare blir det tråkigt. Med denna mekanism kan man också styra användaren till andra sajter och sedan drabba användaren med trojaner och annat fult.
    Detta kallas XSS, cross site scripting och ett sätt att skydda sig är att kontrollera om indata innehåller konstiga tecken, t.ex. < och >, som kan bli taggar i html som kör javaScript eller annat oönskat. Kontrollera (eng. Validate) fälten i formuläret innan de skrivs ut i testAction. Notera att ni inte behöver begränsa texten till bara bokstäver och whitespace, men oskadliggör sånt som är styrtecken i HTML, dvs < , >, \ och inledande tomma tecken. Lägg till utskriften "Uppgift 7 avklarad, inmatningskontroll och skydd mot XSS implementerat!".
  2. Gör koden mer lättläst genom att skapa en funktion i php. Gör om koden som kontrollerar indata till en funktion med namnet sanitizeInput. Lägg också till att om indata är tomt (funktionen "empty" är användbar) ska funktionen returnera en tom sträng (""). Anropa den funktionen i testAction. Testa.
    Skapa sedan en separat fil med namnet testFormHandler.php där du placerar funktionen sanitizeInput (ta alltså bort den från testAction). Ändra också i testAction så at sanitizeInput går att använda fastän den ligger i en annan fil. Lägg gärna till, sist i testAction, "Uppgift 8 avklarad, funktionen fungerar!".
    Att strukturera sin kod så att saker som görs på flera ställen blir funktioner och funktioner som hör ihop samlas i en fil är ett sätt att öka läsbarheten i sin kod.
  3. Håll reda på användarens namn mellan sidorna. Man kan använda både cookies och sessions, men här ska du skapa en session. Sessionen behöver skapas på första sidan man kommer till, alltså test1, men det kräver php-kod, så test1.html måste bli en php-fil. Skriv kod i test1.php för att starta en session och skapa en sessions-variabel User och ge den värdet "Okänd användare", men om den redan finns och har ett värde ska det värdet vara kvar. Skriv ut värdet på sessionsvariabeln på sidan, med texten "Session startad, uppgift 9 avklarad!". Här kan du tänka på att strukturera din kod genom att göra funktioner som hanterar sessionen och dess variabel, och lägga dem i en separat fil. Testa genom att ladda sidan, ladda om sidan.
  4. Lagra nu det namn användaren matar in i formuläret i denna sessionsvariabel. Ändra i testFormHandler så att om ett namn faktiskt matats in så sätt sessionsvariabeln User till det inmatade namnet. Fundera över vad som händer om test2.php är den första sidan man kommer till. Spara, testa. Gå fram och tillbaka mellan test1.php och test2. Notera att när man backar i en webbläsare laddas inte sidan om. Se också upp så att du inte backar för långt och hamnar på test1.html, den har inga fina finesser! Om du bara får "Okänd användare", tänk på hur koden i test1.php ska se ut för att det inte ska skapas en session med "Okänd användare" ifall det redan finns en session. När du fått det att fungera, lägg in i test1.php att du klarat uppgift 10, sessions-hanteringen.
  5. Nu ska du döda sessionen så att du kan testa din kod både med och utan aktiv session. När man väl startat sessionen ligger den kvar tills användaren stänger webbläsaren eller att man dödar den. Gör ett miniformulär under listan på test1.php som bara har en knapp (inga andra fält behövs) som anropar en funktion som tar bort sessionsvariablerna och dödar sessionen. Ladda om sidan. Sessionsvariabeln User borde nu återigen visa "Okänd användare". Skriv ut "Uppgift 11 avklarad" om session-variablerna tagits bort. Notera att när man har samma fil som action måste man kolla ifall knappen verkligen är tryckt så att koden inte körs första gången sidan visas.
  6. Gratulera dig själv, nu kan du nästan all webbprogrammering som behövs för att genomföra projektet (det som saknas finns i Php-tutorialens avsnitt "Mysql Database"). Räck upp handen och redovisa koden för en labbassistent.


Sidansvarig: Eva Ragnemalm
Senast uppdaterad: 2024-11-05