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.
-
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 kommandotcd /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. -
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.) -
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."
test2.html
. När du sparat ner filerna (på din www-area) laddar du omtest1.html
webbläsaren. Klicka på länken i listan och beundra din andra sida. -
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 egenskapenbackground-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 filertest1.html
ochtest2.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. - 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
tilltest2.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å? - 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.
-
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ändametod=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 filentest2.html
, vars action användertestAction.php
och vars metod ärPOST
. Spara ner allt på din www-area och ladda omtest1.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.
-
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 somfilter_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 itestAction
. 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!". -
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 namnettestFormHandler.php
där du placerar funktionensanitizeInput
(ta alltså bort den fråntestAction
). Ändra också itestAction
så atsanitizeInput
går att använda fastän den ligger i en annan fil. Lägg gärna till, sist itestAction
, "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. -
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 itest1.php
för att starta en session och skapa en sessions-variabelUser
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. -
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 sessionsvariabelnUser
till det inmatade namnet. Fundera över vad som händer omtest2.php
är den första sidan man kommer till. Spara, testa. Gå fram och tillbaka mellantest1.php
ochtest2
. 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 itest1.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 itest1.php
att du klarat uppgift 10, sessions-hanteringen. -
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. SessionsvariabelnUser
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. - 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