kursolle.se

4. Moment04 - En första applikation & filhantering

Info

Till detta moment finns en sida med lösningsförslag.

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.

4.1 En inloggningsapplikation

Uppgift inloggningsapplikationen, grund

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.

Webbsidan

Inloggningsformulär


Håll mig inloggad

Hjälp skiss [klicka för att visa]

Här visar jag en grafisk lösning i form av en mockup.

Hjälp tutorial [klicka för att visa]

Denna applikation har jag byggt som en tutorial där du kan ta hjälp för att lösa uppgiften.

Tutorial hittar du här.

Inlämningsinstruktioner

Innan inlämning bör du se till att följande saker är gjorda.

  • Testa applikationen grundligt så att den fungerar som det är tänkt.
  • Kika över koden så att den ser bra ut, ta bort det som skall tas bort och snygga till.
  • Lägg upp applikationen i en egen katalog på din domän, se till att CSource finns tillgängligt och att den är länkad på lämpligt sätt.
  • Länka till applikationen från din landing page.
  • Skapa ett inlägg på din WordPress där du utvärderar arbetet, gör en reflektion kring svårigheter och hur du har tänkt när du löst dessa. Länka här också till applikationen samt till CSource.

Uppgift inloggningsapplikationen, fördjupande uppgift med array/cookies

Om vi fortsätter utveckla applikationen vidare så finns det följande saker som du 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?

4.2 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å.

4.2.1 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.

Kodexempel PHP-filen som läser från fil

<?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

Webbsidan

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.

Kodexempel

<?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.

4.2.2 Öppningsparametrar till filhandtaget

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 varningsmeddelande kan komma att skrivas ut.
x+ läsning och skrivning början av filen Om filen redan existerar returnerar funktionen FALSE och ett varningsmeddelande 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. Ibland är det enklare att först öppna för läsning, läsa in det som behöver läsas in, stänga filen och öppna upp den igen för skrivning.

4.2.3 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.

Delimiter

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]

Kodexempel

<?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 felmeddelande 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 felmeddelande.

Kodexempel

<?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 möjliggör för flera användare att logga in i ditt system. Lagra användarnamn och lösenord i en textfil som sedan jämförs vid inloggning. Bygg också in möjlighet att skapa nya konton.

Svårare: Kan du bygga in möjlighet att ta bort ett konto och/eller att uppdatera lösenord på ett befintligt konto?

Om du vill vidareutveckla denna applikation ytterligare så finns naturligtvis denna möjligheten. Vad skulle man kunna göra i inloggat läge? Lägga till nyheter eller skapa en infovägg som syns när du inte är inloggad. Skapa en gästbok eller ett enklare forum?

Lägg upp denna uppgift som ett projekt på din domän om du vill. Vi kommer senare jobba med andra projekt som lagrar data på olika sätt så om du inte hinner/vill göra denna uppgift så kommer du kunna visa på motsvarande kunskaper senare.

4.2.4 Läsa och lagra data med hjälp av JSON

Här kommer ett litet bonusavsnitt för den som är intresserad.

Att lagra en mindre mängd data i en enkel fil har vi nu sett fungerar bra. Men vad händer om vi vill lagra lite mer information, som vi dessutom vill strukturera, på ett bra sätt? Vi kommer i ett senare moment kika på lagring i databaser men det finns också möjlighet att lagra i ett format som heter JSON, JavaScript Object Notation, som är en textbaserad lagringsstruktur som är lätt för både datorer och människor att läsa.

Fil: courses.json

{
  "courses": [
    {
      "name" : "Programmering01",
      "description": "Vi lär oss grunderna i programmering"
    },
    {
      "name" : "Webbutveckling01",
      "description": "Vi lär oss skapa webbsidor"
    },
    {
      "name" : "Webbserverprogrammering01",
      "description": "Vi lär oss programmera dynamiska webbsidor"
    }
  ]
}

Exemplet är samma som användes ovan med textfiler. Här finns det ett attribut, courses som innehåller information om tre kurser, där varje kurs har ett namn och en beskrivning.

Kodexempel PHP-filen som läser och skriver JSON

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
  <title>Ett jsonexempel</title>
</head>
<body>
<h1>Ett jsonexempel</h1>
<?php
// Läs in JSON-fil och gör om innehållet till en array
$file_in = "courses.json";
$json = json_decode(file_get_contents($file_in), true);

// Skriver ut innehållet i json-filen på webbsidan
echo "<p>Innehållet i filen $file_in</p>";
echo "<pre>";
readfile($file_in);
echo "</pre>";

// Visar innehållet i variabeln $json
echo "<p>Innehållet i variabeln \$json</p>";
echo "<pre>";
print_r($json);
echo "</pre>";

// Loopar igenom alla kurser
echo "<p>Lista på kurser (loopar igenom jsonobjektet)</p><ul>";
foreach ($json['courses'] as $c){
  echo "<li>{$c['name']} - {$c['description']}</li>";
}
echo '</ul><hr /><div class="card warning large">Nu har jag lagt till kursen Programmering02 i arrayen!</div><hr />';

// Lägger till en kurs. Lägg till element till befintlig json-array
$json['courses'][] = ['name'=> 'Programmering02', 'description' => 'Vi lär oss mer om programmering'];

// Visar innehållet i variabeln $json
echo "<p>Innehållet i variabeln \$json</p>";
echo "<pre>";
print_r($json);
echo "</pre>";

// Olika former av teckenkodning ger oss ofta problem inom programmering och det är inget undantag, snarare tvärt om, inom webbserverprogrammering.
// JSON_UNESCAPED_UNICODE - ser till att alla tecken fungerar som de skall.
// JSON_PRETTY_PRINT - ser till att utskriften i fil blir snyggt json-formaterad.

// Sparar json-objektet till en ny fil
$file_out2 = "courses_output2.json";
$file = fopen($file_out2, "w");
fwrite($file, json_encode($json, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT));
fclose($file);

echo '<hr /><div class="card warning large">Nu har jag sparat den uppdaterade arrayen i en ny json-fil.</div><hr />';

echo "<p>Innehållet i filen $file_out2</p>";
echo "<pre>";
readfile($file_out2);
echo "</pre>";
?>
</body>
</html>

Filen genererar en mängd utskrifter och skapar även en ny fil som sparar det uppdaterade JSON-objektet så rekommendationen är att ladda ner de två filerna i samma mapp och provköra applikationen.

Frivillig uppgift

För den som vill så borde det nu vara möjligt att bygga om inloggningsuppgiften och lagra listan med användare i jsonformat.