3. Moment03 - Formulär och datapersistens

I detta moment skall vi börja kommunicera med användaren så att vi även får input att jobba med. Vi kommer lära oss att skapa formulär och ta emot det data som kommer den vägen, sedan skall vi titta på olika tekniker när det gäller datapersistens, alltså hur vi kan spara data på olika sätt så att vi kan använda data på flera sidor.

3.1 Formulär

Formulär är grunden till att kunna hämta in information från användaren. Du har stött på formulär så fort du matar in någon form av data till en webbsida, allt från det att du skapade ditt konto på facebook och fick ange information om dig, till att du gör en statusuppdatering eller loggar in som användare. Formulär är inte unikt för webben utan det krävs för input till alla typer av applikationer.

I detta avsnitt kommer jag gå igenom grunderna, det finns ett antal formulärelement som du kan använda men om du lär dig de vanligaste så är det inga problem att sedan implementera ett speciallelement då de i grunden fungerar på samma sätt.

3.1.1 Formulärets grundelement

Grunden för ett formulär är <form>-elementet som kan ha flera attribut, de två som behöver finnas är method som talar om enligt vilken metod som innehållet i formuläret skall skickas. action talar om till vilken sida formuläret skall skicka användaren. Denna sidan kommer jag senare referera till som mottagarsidan.

Kodexempel

<form method='post' action='output.php'>
</form>

Rad 1: här skrivs form-taggen med två attribut, method och action. Action anger den sida som vi vill skickas till när formulärets knapp trycks ner. Method är det sättet som information skall skickas på.
Rad 2: här stänger vi formulärtaggen, alla element som finns mellan formulärtaggarna ingår i formuläret.

Webbsidan

Ett formulär utan några formulärelement blir ett helt tomt formulär så det finns inget att rita ut.

3.1.2 input

Input en vanligt element när vi jobbar med formulär, vi skall titta på flera olika sätt som det kan användas.

3.1.2.1 type="text"

I exemplet finns en <input>-tagg med attributet type='text' vilket innebär att det skapas ett element som tar emot en textrad. Det finns ett attribut som heter name='namn' och det är detta namn som sedan skapar en variabel med samma namn som vi kan anropa för att hämta informationen som skickas med formuläret. Mer om detta senare.

Kodexempel

<form method='post' action='output.php'>
Ange ditt namn<br>
<input type='text' name='namn'><br>
</form>

Webbsidan

Ange ditt namn

3.1.2.2 type="submit"

Det finns ett input-element med attributet type='submit' och det är den som skapar knappen som skickar formuläret till den sidan dit vi vill skicka formulärets innehåll. Om du klickar på knappen så kommer du till filen output.php i samma mapp som vi redan befinner oss i.

Kodexempel

<form method='post' action='output.php'>
  <input type='submit' value='Skicka' />
</form>

Webbsidan

3.1.2.3 type="password"

När vi skriver in lösenord är det bra att detta inte syns i formuläret, det kommer dock att synas i klartext på den sidan dit vi skickar formuläret.

Kodexempel

<form method='post' action='output.php'>
  Ange ditt lösenord:<br />
  <input type='password' name='password' />
</form>

Webbsidan

Ange ditt lösenord:

3.1.2.4 type="radiobutton"

Radiobuttons är bra om vi förväntas göra ett val.

Kodexempel

<form method='post' action='output.php'>
Ange ditt kön:<br />
  <input type='radio' name='gender' value='female' checked /> Kvinna <br/>
  <input type='radio' name='gender' value='male' /> Man
</form>

Webbsidan

Ange ditt kön:
Kvinna
Man

Här finns några viktiga saker att tänka på

  1. name måste vara samma på alla radioknappar som finns i samma grupp. Här grupperar vi på kön.
  2. attributet checked innebär att det finns ett förvalt alternativ.

3.1.2.5 type="checkbox"

Checkboxen är vanlig när du förväntas godkänna någonting eller som ett element där det bara finns två alternativ, sant/falskt eller ja/nej.

Kodexempel

<form method='post' action='output.php'>
  <input type='checkbox' name='accept' /> Jag godkänner ......
</form>

Webbsidan

Jag godkänner ......

3.1.2.6 type="hidden"

Hidden är bra att använda om vi behöver skicka med gömda värden som vi behöver använda i koden men som användaren inte skall kunna ändra eller behöver se.
OBS: Tänk dock på att det går att se i källkoden så lagra ingen känslig info här såsom lösenord eller liknande.

Kodexempel

<form method='post' action='output.php'>
  <input type='hidden' name='hiddenVar' value='12' />
</form>

Webbsidan

Eftersom elementet inte syns så finns det ingen anledning att visa den som en webbsida, det finns ett exempel på hidden i det stora exemplet nedan.

3.1.3 select

Finns det många val så kan en select-box vara bra att använda, då den innehåller flera alternativ men bara visar den del som är vald.

Kodexempel

<form method='post' action='output.php'>
<select name='car'>
  <option value='volvo'>Volvo</option>
  <option value='saab'>Saab</option>
  <option value='opel' selected>Opel</option>
  <option value='audi'>Audi</option>
</select>
</form>

selected innebär att det är förvalt.

Webbsidan

3.1.4 textarea

Att kunna skriva in mer text är ofta intressant, då använder vi istället elementet <textarea>.

Kodexempel

<form method='post' action='output.php'>
  Text:<br />
  <textarea name='content' cols='45' rows='5'></textarea> <br />
</form>

Webbsidan

Text:

3.1.5 Method attribut

Det finns två metoder att skicka information från ett formulär och det är GET och POST.

3.1.5.1 GET

GET används formulärets innehåll vill visas i sidans url. Google använder detta när man gör en sökning. Den stora fördelen med detta är att man kan låta någon annan ta del av samma sökresultat som någon annan fick.
GET används också utan formulär för att skicka information till en sida via url. Det kan tex. vara information om id för ett speciellt inlägg eller en tråd i ett forum.
Exempel: svar.php?firstname=Anna&familyname=Andersson

3.1.5.2 POST

POST skickar informationen dolt för användaren, jämför med att skicka ett kuvert med posten.

3.1.6 Läsa av informationen

Beroende på metod som används för att skicka informationen så lagras innehållet i någon av de superglobala variablerna, $_POST[] eller $_GET[], och dessa fungerar på samma sätt som en array. Indexet i arrayen skapas av det "name" du gav formulärkomponenten. I exemplet ovan så fick textrutan namnet "skickat" vilket ger oss följande kod för att kunna skriva ut innehållet i formuläret;

Kodexempel

<?php
 echo($_POST['skickat']);
?>

Hade vi skickat informationen med GET-metoden så hade vi istället fått skriva $_GET['skickat']. Det finns ytterligare en superglobal variabel vi kan använda, $_REQUEST[]. Denna fungerar på samma sätt som $_POST[] och $_GET[] och den innehåller all information som lagras i $_POST[] och $_GET[]. Skickar du information via formulär och url så kan denna vara smidig att använda. Senare kommer vi se att även superglobalen $_COOKIES[] används i $_REQUEST[].

Ibland är det lite svårt att hålla koll på alla index i de superglobala variablerna, speciellt om man använder både $_GET[] och $_POST[] och då kan det vara smidigt att skriva ut innehållet i alla variabler som finns på en sida. Prova gärna bägge för att se skillnaden på resultatet. Det finns tillfälle då du vill använda den ena eller den andra.

Kodexempel

<?php
echo "<pre>";
print_r($_POST);
echo "<hr>";
var_dump($_POST);
echo "<hr>";
var_dump(get_defined_vars());
echo "</pre>";
?>

get_defined_vars() skriver ut alla variabler som finns definierade i din kod.

<pre>-taggen är en html-tagg som gör att utskriften av funktionerna ser ut som de skapas, html låter ju annars bli att skriva ut radbrytningar, mellanslag och tabbar.

När du kan bygga enklare formulär så gäller det att kunna ta emot informationen på en mottagarsida och sedan göra någonting med formulärets innehåll.

output.php

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Title of the document</title>
   </head>
   <body>
      <h1>Resultat</h1>
      <p>Följande har skickats från formuläret!</p>
      <pre>
        <?php
         // var_dump är en bra funktion som skriver
         // ut allt innehåll i en variabel, i detta
         // fallet en array var_dump($_POST);
         // print_r skriver ut samma sak, fast med
         // lite mindre information. Använd den du vill.
         print_r($_POST);
         ?>
        </pre>
      <a href="javascript:history.back()">Back</a>
   </body>
</html>

output.php är en enkel fil som du kan använda för att själv testa vad som skickas från ditt formulär. Kopiera koden och lägg filen i samma mapp som din formulärsida och se till att du sätter action-attributet till output.php och sedan att du sätter method-attributet till "POST".

3.1.7 Stora exemplet

Dags för ett stort exempel, här samlar jag de element som jag visat ovan samt några till som kan vara bra att känna till eller bara rolia att kunna använda. Du får se både koden och det färdiga formuläret, detta formulär kan du också fylla i och sedan få se vad som kommer till mottagarsidan.

form.html

I denna kod kommer det finnas några saker som behöver förklaras, det gör jag under koden.

<form action="output.php" method="POST">
   <p><label for="name">Namn</label>
   <input type="text" name="name" required placeholder="Ange ditt namn">

   <input type="hidden" name="userId" value="12">

   <p><label for="password">Lösenord</label>
   <input type="password" name="password" required></p>

   <p><label for="email">Epost</label>
   <input type="email" name="email" required label="email"></p>

   <p><label for="birthday">Födelsedag</label>
   <input type="date" name="birthday"></p>

   <p><label for="color">Favoritfärg</label>
   <input type="color" name="color"></p>

   <p><label for="happy">Lycklighetskalan</label>
   <input type="number" name ="happy" min="1" max="6" step="1" value="1"></p>

   <p><label for="effort">Egen insats</label>
   <input type="range" name ="effort" min="1" max="6" step="1" value="1"></p>

   <p><label><input type="checkbox" name="subscribe">Medlemsbrev</label></p>

   <p>
      <fieldset>
         <legend>Kön</legend>
         <br /><label for="gender">Kvinna</label><input name="gender" value="kvinna" type="radio">
         <br /><label for="gender">Man</label><input name="gender" value="man" type="radio">
      </fieldset>
   </p>

   <p><label for="contact">Kontakt</label>
   <select name="contact" required>
    <option value="">Välj kontakttyp</option>
    <option value="mail">Epost</option>
    <option value="phone">Telefon</option>
    <option value="letter">Brev</option>
    <option value="sms">SMS</option>
   </select></p>

   <textarea name="content" cols="60" rows="6" placeholder="Ange en text"></textarea>

   <p><input type="submit" name="submit" value="send">
   <input type="reset" name="reset" value="reset"></p>

</form>

label - label är en text som kopplas till det formulärelement som har samma namn som labelns for-attribut.

required - tvingar användaren att ange ett värde innan formuläret får postas.

autofocus - sätts på det element som du vill göra aktivt när du kommer till sidan med formuläret. När du väl har börjat fylla i formuläret så kan du använda tab för att flytta dig till nästa element.

placeholder - definierar en text som finns i ett element där du kan skriva text. Denna text försvinner när användaren skriver någonting.

fieldset/legend - Skapar en ram, och en text, runt ett element och är effektivt när vi vill gruppera någonting.

type = "email" - hanterar email med validering.

type = "date" - hanterar datum.

type = "number" - ett element som hanterar heltal, du kan antingen skriva eller klicka på pilarna upp och ned, attributen min och max begränsar intervallet på de tal du kan ange, step hanterar vilka steg du kan ta i intervallet och value är det förvalda värdet.

type = "range" - ritar ut en slider men fungerar annars på samma sätt som number.

type = "reset" - denna knappen rensar hela formuläret. Knappen används mer och mer sällan eftesom den inte används så mycket. Det är sällan att du behöver rensa ett helt formulär, antingen ändrar du något värde eller så låter du bli att skicka ett felaktigt formulär.

Webbsidan

Kön

Testa nu formuläret. Du kommer få info om vad du förväntas göra ifall du gör fel. När alla inmatningar stämmer så kommer du skickas till output.php.

3.1.8 Problem med formulär

Det finns några problem med formulärmottagningen som du behöver känna till och kunna ta hänsyn till. Funktionerna var_dump() och print_r() är bra när vi testar formulär men de är ju direkt olämpliga när vi skall skapa färdiga applikationer.

Vi har kikat på hur vi läser av ett formulärelements värde på mottagarsidan och det fungerar utan problem i de flesta fallen. Om vi inte har satt elementet för email till required så kommer arrayen/indexet $_POST['email'] vara tomt. Alla element skapar ett index i arrayen $_POST[] med samma namn som name-attributet, förutom en checkbox eller grupp av radiobuttons som ej är ikryssade.

Hur löser vi då det? Radiobutton kan vi komma runt då vi kan sätta ett val från början. Finns det redan ett val så kan vi aldrig bli helt utan val. Checkboxen kräver en annan lösning, här måste vi först kolla om variabeln/arrayen-indexet finns, om den finns så vet vi att den har varit ikryssad, om indexet inte finns så vet vi att rutan inte varit ikryssad. Om vi inte först kollar om indexet finns och anropar det så kommer vi få ett undefined index-error.
På samma sätt kan vi lösa radiobuttons om vi inte vill ha ett förvalt alternativ.
Hur du sedan på mottagarsidan vill lösa problemet med att en användare har valt att inte ange kön är en annan fråga.

Koden för kolla om en kryssruta är ikryssad eller inte;

Kodexempel

<?php
if(isset($_POST['subscribe']){
  echo 'Du vill få medlemsbrev!';
}
?>

isset() är en funktion som kollar om en variabel finns. Innehållet kan vara valfritt värde eller tom sträng, kallas ofta null, men variabeln måste finnas. Detta är intressant när användaren kommer in på en sida där det förväntas följa med ett värde, tex en sida som skall hämta en artikel från ett id via en url. Om detta id inte finns så skapas det fatalt error, sidan kan inte skapas och användaren får ett felmeddelande. Med isset kan det först kontrolleras att en viktig variabel har ett värde och ta hand om det fel som annars skulle uppstått.

isset() är med andra ord användbart för kryssrutor, radiobuttons men också för GET-variabler.

Uppgift

  1. Du har fått ett uppdrag att skapa ett anmälningsformulär med följande önskemål;
    • Förnamn och efternamn skall anges i var sin textruta.
    • Födelsedatum skall anges med lämpligt formulärelement.
    • Lösenord skall anges i en ruta med lämpligt formulärelement.
    • Kön skall anges med radiobuttons.
    • En kyssruta skall kryssas i att du har godkänt användarvillkoren (inget sådant dokument behöver skrivas).
    • En knapp för att slutföra registreringen skall finnas.
    • Sedan skapar du en mottagarsida som på ett snyggt sätt presenterar formulärets innehåll.
      OBS: var_dump() eller print_r() skall inte användas.

3.2 Datapersistens

När HTTP (HyperTextTransfer Protocol) används så lagras ingen information om dig som användare. Detta innebär att det som hände på förra sidan inte finns kvar när du kommer till nästa sida. Om vi ändå vill att info skall följa med måste vi själva skapa detta. Detta kan vi göra med;

  • Sessions, en session lagrar information under en kortare tid, den tiden du är aktiv på en sida. När du stänger ner webbläsaren dör sessionen.
  • Cookies, en cookie lagrar information på din hårddisk vilket innebär att det kan finnas kvar information om dig nästa gång du kommer till sidan.

Vi kommer senare i kursen även kika på hur vi lagrar och läser information från filer samt databaser. Alla dessa sätt att lagra data kallas för datapersistens.

3.2.1 Sessioner

Session är en array(/vektor) som fungerar som vilken array som helst med några få undantag. Eftersom den skall ”leva” längre än på en specifik sida måste vi starta sessionen, vilket vi gör genom att starta sessionen längst upp på varje sida där vi vill använda sessionsvariabler. Detta skall skrivas inne i en php-tagg, före all html-kod. Det skall också vara den första kod som du skriver på en sida. Det enda undantag till detta är om det skall koppla objekt till sessionen, då måste deklarationen av objekten göras först. (Detta ingår inte i denna kursen)

Kodexempel

<?php
session_start();
?>

3.2.1.1 Hantering av sessioner

Sessionsvariablerna används som vilken array som helst, när vi har satt ett värde på en sessionsvariabel så kan vi anropa denna sessionsvariabel från alla sidor där vi har startat sessionen.

Kodexempel

<?php
session_start();

if($_POST['user'] == "admin" && $_POST['password'] == "qwerty"){
  $_SESSION['userLevel'] = "admin";
}
?>

Glöm inte bort att starta sessionen och att kolla om sessionen finns. Har du varit inaktiv en längre tid så faller sessionen och då försvinner även variablerna. Därför är isset() väldigt bra att använda tillsammans med sessioner. Hur länge en session lever går att ställa in, en bankapplikationen och ett forum har inte samma krav på hur länge du får vara inaktiv, för att ändra hur länge en session skall leva anger du värdet i minuter som argument till funktionen sesseion_cache_expire(15), i detta fall ställer du in så att sessionen skall leva i 15 minuter. Via phpinfo, som du når från din webbserver, kan du se hur din installation ser ut. Hos mig var standardinställningen 1440 sekunder vilket innebär 24 minuter. Min inställning på Binero var 3600 vilket är en timme. Kolla själv genom attt skriva phpinfo(); inom php-taggar och kör den filen.

Ett kortare sidospår. Dags att kolla om användaren är inloggad eller inte.

Kodexempel

<?php
session_start();

if(isset($_SESSION['userLevel'])
        && $_SESSION['userLevel'] == "admin"){
  echo "Du är admin";
} else {
  echo "Du är inte admin";
}
?>

3.2.1.2 Stänga en session

För att stänga en session och ta bort alla variabler så måste föjande kommandon skrivas;

  • Först måste sessionen öppnas som vanligt längst upp på sidan.
  • Sedan måste alla sessionsvariabler tömmas.
  • Slutligen förstörs sessionen.

Kodexempel

<?php
session_start();    // Starta sessionen
session_unset();    // Ta bort alla sessionsvariabler
session_destroy();  // Förstör sessionen
?>

Det kan kännas lite omständigt att först öppna en session för att sedan kunna ta bort och förstöra, men tänk dig att sessionen är som ett skåp, med dörrar, som först måste öppnas innan man kan tömma hyllorna och stänga/förstöra skåpet.

Uppgift

  1. Skapa ett enkelt formulär där du kan mata in ett namn, lagra sedan detta namnet i en session och skriv ut användarens namn varje gång sidan uppdateras. Skapa sedan en länk där användaren kan döda sessionen och då skall det skrivas ut att det inte finns någon användare!

3.2.2 Cookies

En kaka (cookie) är en liten textfil som webbplatsen du besöker begär att spara på din dator.
Kakor används på många webbplatser för att ge en besökare tillgång till olika funktioner. Det går att använda informationen i kakan för att följa hur användare surfar.
Enligt lagen om elektronisk kommunikation ska alla som besöker en webbplats med kakor få tillgång till information om att webbplatsen innehåller kakor och ändamålet med användningen av kakor. Besökaren ska också lämna sitt samtycke till att kakor används.
(Källa: Post & telestyrelsen, http://www.pts.se/cookies, besökt 2015-03-01)

Om din avsikt är att bygga skarpa projekt på webben så kan det vara klokt att kika på Kaklagen i praktiken som presenteras av webbriktlinjer.se.

Det finns två olika cookies, den ena är en cookie som lagrar en fil lokalt på din dator under en längre tid, hur lång tid den skall lagras går att ställa in. Den andra varianten är en sessionscookie, denna cookie lagras lokalt i din dators minne så länge sessionen lever. En cookie kan innehålla en mängd värden t.ex;

  • när du senast var på en webbplats, för att visa nya inlägg i ett forum
  • en cookie kan innehålla inloggningsinformation så att du är fortsatt inloggad, t.ex. Facebook
  • en varukorg när du handlar i en webbshop

Du som utvecklare måste vara medveten om att det går att stänga av lagringen av cookies, antingen permanent eller temporärt via olika former av inkognito/hemliga lägen. Det viktiga är att vi som utvecklare inte får förlita oss på att cookies alltid fungerar, vi måste även se till att de som stänger av sina cookies får ett trevligt besök på vår webbplats.

Kolla hur många cookies du har via din webbläsare, leta själv reda på hur du hittar cookies i just din webbläsare, det är fler än du tror. Några av dem kan du läsa ut vad de innehåller men de flesta har naturligtvis krypterad information lagrad. När jag kollade på min dator så hade jag 14 cookies från Facebook och 41 cookies från Aftonbladet. Hur påverkar det min vidare surfning om jag tar bort dessa?

3.2.2.1 Tredjepartskaka

Har du någon gång gjort en sökning på en viss produkt för att sedan i Facebook få reklam för just en sådan produkt? Detta kallas för tredjepartskakor och vållar extra stora diskussioner kring användarens integritet. Vad som händer är att ditt sökmönster eller intresse för specifika produkter lagras i cookies som sedan används av någon annan applikation.

3.2.2.2 Använda egna cookies

För att skapa en egen cookie så används funktionen setcookie() och denna funktion tar sex argument;

  1. Namn (obligatoriskt)
  2. Värde (obligatoriskt)
  3. Utgångsdatum/tid (valfri)
  4. Sökväg (valfri)
  5. Domän (valfri)
  6. Kryptering (valfri)

Ett exempel för att lagra en egen cookie.

Kodexempel

<?php
// skapa en mailadress
$mailadress = "johan@tis.se";

// lagra mailadressen i en cookie, ge cookien namnet email
setcookie('email', $mailadress);

// skriv ut det lagrade värdet på cookien
echo $_COOKIE['email'];
?>

Exemplet ovanför kan resultera i ett problem, det tar lite längre tid för datorn att skapa en cookie än vad det tar att generera koden, så om du istället lagrar cookien på en sida och sedan läser av den på en annan php-sida så brukar det fungera bättre. Det är ju ganska ologiskt att ha tillgång till värdet på mailadressen, lagra det i en cookie och sedan direkt läsa av cookien. Kodar man så har man nog lite dålig koll på vad man gör.

Prova ovanstående kod, sök sedan efter en cookie som lagras från domänen "localhost", om du kör via din lokala webbserver. Prova sedan nedanstående kod och se om den försvinner.

Kodexempel

<?php
setcookie('email', $mailadress, time()-3600);
?>

Cookiens expirytime är satt till en timme före nu och därför kommer den att tas bort automatiskt av din webbläsare.

Uppgift

  1. Fortsätt med uppgiften ovan och se nu till att du lagrar namnet som du anger som användarnamn i en cookie. Vad du sedan gör med denna cookie avgör du själv, du kan skriva ut värdet, du kan förifylla formuläret med innehållet i cookien när du har valt att döda sessionen.

3.3 Kodexempel

Här finns ett exempel på möjligheter och lite om problem med SESSIONS och COOKIES, ta gärna ner koden och testa den själv. Att jobba med kod i en färdig applikation och verkligen försöka förstå hur den fungerar är ett bra sätt att lära sig koda på.

Kodexempel

<?php
// startar sessionen
session_start();

// läser av get-variabeln $_SESSION
if(isset($_GET['action'])){
  switch($_GET['action']){
    case 'killSession':                   // Döda sessionen
      session_unset();
      session_destroy();
      header("location: ?");
      break;
    case 'killCookie':                    // Ta bort cookie
      setcookie('mail',"", time()-3600);
      header("location: ?");
      break;
    case 'reset':                         // Dödar session & tar bort cookie
      session_unset();
      session_destroy();
      setcookie('mail',"", time()-3600);
      header("location: ?");
      break;
  }
}

// Läser av formuläret, om det finns något så lagras detta i session & cookie
if(isset($_POST['mail'])){
  $mail = strtolower(trim($_POST['mail']));
  setcookie('mail', $mail);
  $_SESSION['mail'] = $mail;
}
?>

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <title>Exempel på session & cookie</title>
</head>
<body>
  <form action="" method="post">
    <p>Ange en mailadress:<br />
    <input type="email" name="mail" required> <input type="submit"></p>
  </form>
  <hr>
  <?php

  // Om $_SESSION finns, skriv ut mailadressen
  if(isset($_SESSION['mail'])){
    echo "<p>Mailadressen som är lagrad i session är: ". $_SESSION['mail'];
    echo "<br />[<a href='?action=killSession'>döda sessionen</a>]</p>";
  } else {
    echo "<p>Det finns ingen mail lagrad i SESSION.</p>";
  }

  // Om $_COOKIE finns, skriv ut mailadressen
  if(isset($_COOKIE['mail'])){
    echo "<p>Mailadressen som är lagrad i COOKIE är: ".$_COOKIE['mail'];
    echo "<br />[<a href='?action=killCookie'>döda cookien</a>]</p>";
  } else {
    echo "<p>Det finns ingen mail lagrad i COOKIE.</p>";
  }
?>

<form action="" mehod="get">
  <button type="button" onClick="window.location.reload();">reload</button>
  <input type="submit" name="action" value="reset">
</form>
<p>När du skriver en mailadress så uppdateras den både i SESSION och COOKIE, problemet är att när detta skall skrivas ut första gången så hinner inte COOKIEN lagras innan den skall hämtas vilket gör att det blir en förskjutning på avläsningen av denna variabeln. Klicka på <q>reload</q>-knappen för att se hur jag menar. Detta kommer hände varje gång COOKIEN skall uppdateras.</p>
<hr>
<section style="border:1px dashed black;background:lightgrey;width:800px;">
<h3>Alla definierade variabler på sidan</h3>
<div>
<pre>
  <?php
  print_r(get_defined_vars());
 ?>
</pre>
</div>
</section>
</body>
</html>

Applikationen är uppbyggd på ett sätt som kanske kräver lite tid att vänja sig vid men som du troligtvis kommer uppleva som smidigt efter ett tag. Vi kan dela upp sidan i två delar, den första delen som bara innehåller php-kod, rad 1-32. Här sker den mesta av logiken och bearbetning av data. Eftersom jag ännu inte har skrivit ut någon html-kod i browsern så går det fortfarande att använda header("location: ?"); för att ladda om sidan. ? betyder att jag skickar om till samma sida som jag redan är på. Hela applikationen finns i en sida, det hade varit möjligt att dela upp kod och anropa olika sidor som gör olika saker, men det blir mer överskådligt att lägga allt i samma fil. Däremot finns det ju en gräns för hur mycket kod man vill ha på en enda sida, även om det inte finns någon gräns för hur stor en php-fil kan vara.

När vi har bearbetat all kod så är det dags att skriva ut det och det är då jag börjar med html-blocket. Just i detta exempel så finns det lite php-script insprängt även i html-blocket, men oftast så vill jag ha ren html och endast skriva ut variablers värde, se $title som exempel. Vi kommer kika mer på olika sätt att bygga upp sina filer och applikationer senare i kursen.

3.4 Blandade småsaker

För att på ett smidigt sätt kunna jobba med detta moment och lösa uppgiften så kan det underlätta att kunna använda include och header('location').

include används för att inkludera olika filer. Vi tänker oss exempelvis en fil som vi döper till check_login.php och som vi väljer att inkludera till varje sida där du måste vara inloggad.

header('location') använder vi för att skicka vidare användaren till en annan sida, detta måste göras innan någonting har skrivits ut på sidan. Har det skapats <html>-kod på sidan kommer det bli error av typen "Cannot modify header information - headers already sent by...."

Jag visar via två exempel, "check_login.php" och "very_important_page_where_you_have_to_be_logged_in.php"

check_login.php

<?php
session_start();
if(!isset($_SESSION['user'])){
    header('location: index.php?mess=Du har inte rätt att vara här!');
}
?>

very_important_page_where_you_have_to_be_logged_in.php

<?php
include('check_login.php');

// Rest of code......
?>

Svårare behöver det inte vara att skapa en enkel koll att användaren är inloggad eller inte. Att dela upp innehållet i flera olika filer gör det enklare att hantera större webbplatser. För denna sidan som exempel så skapas inte menyn på varje sida utan detta görs en gång och sedan ropar jag på samma menyfil till varje ny sida. Hur du bygger upp din filstruktur avgör hur mycket tid det kommer ta att göra större förändringar på en webbplats.

Redovisning

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

  1. Lägg upp dina övningar på din hemsida. Lägg dem på en sida med tydliga förklaringar eller skapa flera sidor med olika uppgifter. Viktigt att jag, och andra, kan gå mellan sidorna så vi inte missar något.
  2. Länka sidan/sidorna 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 vilka uppgifter du gjort och varför. Resonera kring de olika teknikerna och hur du har upplevt dem. Är det rörigt med sessions och cookies eller tycker du att det är någorlunda tydligt hur du skall använda dem och vad du skall använda dem till? Länka också till den sidan, se sidorna, där dina exempeluppgifter finns.
    Frågestöd
    • Hur har arbetet med detta moment gått?
    • Är det någon teknik som är enklare eller svårare att förstå?
    • Vilka resurser har du använt dig av för att lära dig PHP? Någon av de som jag har länkat eller någon annan bra resurs? Har du tips på någon bra resurs så länka gärna denna.