Webbserverprogrammering01 [wesweb01]

Projekt01 - Inloggningsapplikation

Introduktion

Nu är det dags att gå från de mindre testuppgifterna till en riktig applikation. Även om applikationen är något mindre så är det processen att skapa applikationen som är det viktiga. Vilka filer gör vad och hur hänger allt ihop.

Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

Centralt innehåll

  • Utvecklingsprocessen för ett webbtekniskt projekt. Målsättningar, planering, systemering, kodning, dokumentation och uppföljning.
  • Dokumentation av utvecklingsprocess och färdig produkt, inklusive kod och mjukvarugränssnitt.
  • Grundfunktionen i ett programmeringsspråk för dynamiska webbplatser.
  • Datalagring, i relationsdatabas eller med annan teknik.
  • Teckenkodning. Begrepp, standarder och handhavande.
  • Kodning och dokumentation enligt vedertagen praxis för den teknik som används i sammanhanget.
  • Kvalitetssäkring av dynamiska webbapplikationers funktionalitet, säkerhet och kodkvalitet.

Uppgift

Du skall bygga en enkel inloggningsapplikation utan koppling till databas. I den enklaste lösningen behöver du jobba med följande filer;

  • index.php, detta är startsidan som du kommer till och som har ett formulär som du använder för att ange ett användarnamn och ett lösenord.
  • login.php, denna sida kollar om du har angivit rätt användarnamn och lösenord, du hårdkodar bägge. Om det är rätt kombination så skapas någon sessionsvariabel, sedan skickas du vidare till admin.php. Om inloggningen inte lyckas skickas du tillbaka till index.php med ett meddelande om att användarnamn och/eller lösenord inte var korrekt.
  • check_login.php, detta är en liten sida som kollar att du har behörighet att vara på den sidan du har blivit länkad till. Har du inte rätt att vara på en specifik sida så skickas du tillbaka till index.php med info om att du inte fick vara på den sidan du ville vara på.
  • admin.php, detta är en låst sida som du bara har behörighet om du är korrekt inloggad. Denna sidan läser in check_login.php.
  • logout.php, dödar din session så att du inte längre är inloggad i systemet.

Detta enkla inloggningssystem kan göras oändligt mycket mer avancerat och både bättre och säkrare, men för denna kursen så räcker detta för att lösa grunduppgiften.

Inloggningsformulär


Håll mig inloggad

Mockup

Detta är ett exempel på hur man skulle kunna lösa uppgiften.

Fördjupande uppgift med array/cookies

Om vi fortsätter utveckla applikationen vidare så finns det följande saker somdu kan tänka på;

  • Göra det möjligt att flera användare skall kunna använda systemet.
    Tips: Skapa en array med flera användare och låt varje användare ha ett eget lösenord. Lösenordsarrayen bör du skapa separat, se bara till att en användare har samma index på bägge arrayerna.
  • Utöka så att användarna kan ha olika typer av rättigheter, kanske en vanlig user och en admin.
  • I mitt exempel ovan så finns det en kryssruta, hur skulle man kunna använda den och med en koppling till en cookie se till att du är inloggad en lägre tid?

Filhantering

Ett annat sätt att lagra data på är att lagra det i filer. I denna kursen så ligger vårt huvudsakliga fokus på att lagra data i databaser men det är alltid intressant att kunna lagra data i filer också.

Läs från filer

Här visar jag i flera exempel hur du kan läsa data från en fil. Filen jag kommer använda heter test.txt och finns också för nedladdning.

<?php
// lagra filnamnet i en variabel
$filename = "test.txt";

// Nu gäller det att bestämma sig för vad du vill göra.
// 1. Läs in hela filen och skriv ut den direkt
// readfile tar som argument filnamnet
readfile($filename);
echo "<hr>";

// 2. Skriv ut den rad för rad
// Skapa ett filhandtag
// första argumentet är filnamnet
// andra argumentet är hur filen skall öppnas, "r" innebär bara läsning
$file = fopen($filename, "r");
// Loopa igenom filen, så länge det finns fler rader
// feof -  end of file in a file pointer
while(!feof($file)){
	// Skriv ut varje rad för sig.
	echo fgets($file)."<br />";
	// Om du vill jobba med
}
echo "<hr>";

// 3. Läs in varje rad till en array.
// Läser in filen igen eftersom den lästes till slutet i förra loopen
$file = fopen($filename, "r");
while(!feof($file)){
	$arr[] = fgets($file);
}

// Loopar igenom hela arrayen
foreach ($arr as $line) {
	// Skriv ut varje rad för sig.
	echo "$line<br />";
}
echo "<hr>";

// 4. Läser in filen till två arrayer, course och desc
$course = array(); $desc = array();
// Läser in filen igen eftersom den lästes till slutet i förra loopen
$file = fopen($filename, "r");
while(!feof($file)){
	$data = fgets($file);		// Läs rad till $data
	if(strlen($data)>0){		// Om $data har innehåll
		// Använd explode för att dela upp innehåll i olika arrayer
		list($course[], $desc[]) = explode("|", $data);
	}
}

// Skriv ut innehållet från våra två arrayer.
for($i=0; $i<count($course); $i++){
	echo "<p>Kurs: $course[$i]<br>Beskrivning: $desc[$i]</p>";
}
?>

test.txt

Programmering01 | Vi lär oss grunderna i programmering
Webbutveckling01 | Vi lär oss skapa webbsidor
Webbserverprogrammering01 | Vi lär oss programmera dynamiska webbsidor

Utskrift

Programmering01 | Vi lär oss grunderna i programmering Webbutveckling01 | Vi lär oss skapa webbsidor Webbserverprogrammering01 | Vi lär oss programmera dynamiska webbsidor
Programmering01 | Vi lär oss grunderna i programmering
Webbutveckling01 | Vi lär oss skapa webbsidor
Webbserverprogrammering01 | Vi lär oss programmera dynamiska webbsidor


Programmering01 | Vi lär oss grunderna i programmering
Webbutveckling01 | Vi lär oss skapa webbsidor
Webbserverprogrammering01 | Vi lär oss programmera dynamiska webbsidor


Kurs: Programmering01
Beskrivning: Vi lär oss grunderna i programmering

Kurs: Webbutveckling01
Beskrivning: Vi lär oss skapa webbsidor

Kurs: Webbserverprogrammering01
Beskrivning: Vi lär oss programmera dynamiska webbsidor

Om vi provar att öppna en fil som inte automatiskt skapas om den inte finns så kommer vi få ett fel, därför kan det vara bra att kolla att filen finns innan vi försöker öppna den.

<?php
// lagra filnamnet i en variabel
$filename = "test.txt";

// Kolla om filen finns
if(!file_exists($filename)) {
	// Om filen ej hittas avbryts körningen
  exit("Filen kunde inte hittas");
} else {
	// skriv ut filens innehåll
	readfile($filename);
}
?>

Här använder jag bara fgets() och readfile() för att läsa från filen och fopen() för att öppna filen, det går naturligtvis att göra mycket mer med filer. Alla tillgängliga funktioner för filhantering hittar du här.

Parametrar

När vi använder funktioner som öppnar filer som tex fopen() så anger vi med en parameter hur vi vill att den filen skall öppnas. Här kommer en lista på vad de olika parametrarna betyder.

Attribut Öppnar för... Filpekarens placering Hantering av filen
r läsning
först i filen
r+ läsning och skrivning först i filen
w skrivning först i filen Om filen inte finns skapas den och om den finns så blir den överskriven.
w+ läsning och skrivning först i filen Om filen inte finns skapas den och om den finns så blir den överskriven.
a skrivning slutet av filen Skapar filen om den inte finns.
a+ läsning och skrivning slutet av filen Skapar filen om den inte finns.
x skrivning början av filen Om filen redan existerar returnerar funktionen FALSE och ett varnings meddelande kan komma att skrivas ut.
x+ läsning och skrivning början av filen Om filen redan existerar returnerar funktionen FALSE och ett varnings meddelande kan komma att skrivas ut.
c skrivning början av filen Om filen inte finns så skapas den, om den finns så öppnas den men skrivs inte över.
c+ skrivning och läsning början av filen Om filen inte finns så skapas den, om den finns så öppnas den men skrivs inte över.

Tänk på att den snabbaste regeln är alltid exakt den som du behöver, öppna inte för läsning om du inte behöver det.

Skriv till filer

Nu kan vi läsa från fil så då är det dags att skriva till fil. Det finns några saker som du behöver fundera på, hur skall filen se ut, hur skall du skriva till den och skall den skrivas över varje gång eller skall en ny text skrivas efter den redan skrivna texten?
Beroende på svaren ovan så vet du vilket attribut du skall öppna filen med och du vet också vilken delimiter du skall använda.

A delimiter is one or more characters that separates text strings. Common delimiters are commas (,), semicolon (;), quotes ( ", ' ), braces ({}), pipes (|), or slashes ( / \ ).
http://www.computerhope.com/jargon/d/delimite.htm [2016-10-03]

<?php
// lagra filnamnet i en variabel
$filename = "test.txt";

// Vi väljer att öppna filen med attributet a som skapar filen om den
// inte finns och sätter filpekaren sist i en befintlig fil
$file = fopen($filename, "a");

// fwrite används för att skriva en rad till filen
// Notera \n för att skapa en radbrytning
fwrite($file, "Webbutveckling02 | Vi lär oss mer om webbutveckling\n");

// Vi stänger filen med fclose, det måste inte göras men frigör resurser
fclose($file);
?>

Funktionen fwrite() kan ge ett felmeddande om det av någon anledning inte går att skriva till filen. I vårt exempel ovanför så utgår vi från att allt har gått bra. Det kan dock vara bra att kolla så att vi inte får något felmedelande.

<?php
// lagra filnamnet i en variabel
$filename = "test.txt";

// Här skapar vi texten som en variabel
$text = "Programmering02 | Vi börjar programmera spel";

// Vi väljer att öppna filen med attributet a som skapar filen om den
// inte finns och sätter filpekaren sist i en befintlig fil
$file = fopen($filename, "a");

// om fwrite inte lyckas så returneras värdet FALSE
if(!fwrite($file, $text)){											// Om "FALSE" körs if-satsen 
	echo "Det gick inte att skriva till filen";		// Skriver ut ett felmeddande
	exit;																					// Avbryter körningen
}

// Vi stänger filen med fclose
fclose($file);
?>

Fördjupande uppgift med filer

Vidareutveckla applikationen ovan så att du som inloggad användare kan skriva nyheter som publiceras på startsidan. Dessa nyheter skall lagras i filer.
Du avgör själv vad som skall presenteras som en nyhet, men en rubrik, en text, ett datum och kanske namnet på den som har skrivit nyheten kan vara användbart.

Redovisning

Redovisa detta moment på följande sätt;

  1. Lägg upp projektet på din hemsida. Se till att applikationen "håller ihop".
  2. Länka till applikationen från din samlingssida.
  3. Länka också till CSource och se till att jag den vägen kan se all din kod.
  4. I wordpress så reflekterar du över ditt arbete, berätta vad du gjort i projektet, bara grunduppgiften eller någon/några av de fördjupande delarna. Beskriv vad som varit enkelt, svårt, utmanande eller näst intill helt omöjligt.
    Om du har byggt sidan efter min mockup så behöver du inte skapa någon egen, men har du löst uppgiften på annat sätt så rita gärna en egen mockup och visa den i utvärderingen. Draw.io fungerar bra för att skapa egna mockups.