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, Syntax till och med Superglobals, 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 ett tag efter att du skrivit in adressen 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 kortare texter, där ett av listelementen är en länk (eng. Link) 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.
  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. 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 4 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.
  6. 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 gör något med den. När knappen trycks anropas den php-filen och webbwervern går igenom den och kollar efter php-taggar, dvs <?php följt av php-kod, avslutas med ?>. När den hittar sådana, körs php-koden och resultatet läggs in på den platsen i det dokument som filen skapar. Php-filer innehåller oftast även HTML-kod för att skapa sidans grundstruktur och oföränderliga delar. Denna gång gör vi en ny fil för det (det går också att hoppa tillbaka till samma fil som man startade från, sidan laddas då om, men det kräver att man kontrollerar om knappen tryckts på). 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). 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 5 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? Hur ska du göra för att få samma bakgrundsfärg och rubrik som på de andra två sidorna?
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, 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, genom att använda funktionen echo. Oftast skriver man ut text och värden på variabler. Nackdelen med att bara göra echo är att det är odefinierat vara utskriften hamnar, oftast är det ovanför all annan utmatning på sidan, och det gör att den kan skrivas ut bakom bilder eller på ytor 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 en omväg via Javascript-consolen. Vi behöver en funktion ur JavaScript, nämligen console.log, som tar en sträng som argument, evaluerar den och skriver ut dess värde. 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å: vit 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. Dels kan vi behöva kontrollera att en rimlig epostadress matats in. 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).
    Dels 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 kolla att det bara är bokstäver och whitespace i namnet, men ta bort \ och inledande tomma tecken samt < och >. Lägg till utskriften "Uppgift 6 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 istället 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 7 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. Byt namnet på test1.html till test1.php så att du kan skriva php-kod i den (notera att om du har filan öppen i en textredigerare kan det vara bökigt att byta namn, beroende på vilken textredigerare du använder). Starta en session och skapa en sessions-variabel User och ge den värdet "Okänd användare" (om den inte redan finns med ett värde). Skriv ut värdet på sessionsvariabeln på sidan, med texten "Session startad, uppgift 8 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 9, 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 10 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: 2023-12-05