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.

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

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.

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

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.

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

<form method='post' action='output.php'>
  <button type='submit' name='knapp' value='val_1' />Val 1</button>
  <button type='submit' name='knapp' value='val_2' />Val 2</button>
</form>

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.

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

3.1.2.4 type="radiobutton"

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

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

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.

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

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.

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

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.

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

3.1.4 textarea

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

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

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;

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

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

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

<?php
// Laddar om sidan med $_GET['mess'] om sådant inte finns
if(!isset($_GET['mess'])){
  header('Location: ?mess=Felmeddelande......');
  exit();
}
?>
<!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">
  <title>Testar olika sätt att skriva ut.</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css">
  <style>
  .error{ color: red;}
  </style>
</head>
<body>
<h1>Utskrifter av strängar och variabler</h1>
<p>Här visar jag olika sätt att skriva ut strängar som innehåller variabler, som du kan se så är det inte så tydligt vad som funkar, när och hur. <br>
 <a href="?mess=Felmeddelande......">Länken med GET-variabel....</a></p>

<?php
echo "<h2>Använda GET-variabeln direkt....</h2>";
// Använda $_GET-variabeln
echo "<p class='error'>".$_GET['mess']."</p>";
echo "<p class='error'>{$_GET['mess']}</p>";
// echo "<p class='error'>$_GET['mess']</p>"; // Detta sättet fungerar inte....

echo "<h2>Göra om GET-variabeln till \$mess</h2>";
// Använda $mess som variabel
$mess = isset($_GET['mess']) ? $_GET['mess'] : "";
echo "<p class='error'>".$mess."</p>";
echo "<p class='error'>{$mess}</p>";
echo "<p class='error'>${mess}</p>";

echo "<h2>Använda funktionen <a href='https://www.w3schools.com/php/func_string_sprintf.asp' target='_blank'>sprintf()</a></h2>";

// Alternativa sätt att skriva ut
echo sprintf("<p class='error'>%s</p>", $_GET['mess']);
echo sprintf("<p class='error'>%s</p>", $mess);
?>
</body>
</html>

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 action="output.php" method="POST">
  <p><label for="name">Namn</label>
  <input id="name" type="text" name="name" required placeholder="Ange ditt namn">

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

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

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

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

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

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

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

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

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

  <p><label for="contact">Kontakt</label>
  <select id="contact" 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>

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;

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

Att behärska formulär är en viktig del när vi bygger våra applikationer. Ju mer kontroller vi kan göra front end desto enklare blir det när vi sedan jobbar vidare med vårt data på back end-sidan. Här nedan kommer några exempel på typiska saker som kan vara bra att hantera i ett formulär.

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)

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

<?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 session_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 180 minuter. Min inställning på Miss Hosting var också 180 minuter. Kolla själv genom att skriva phpinfo(); inom php-taggar och kör den filen.

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

<?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å behöver det göras i följande ordning;

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

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

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)

Tidigare hade webbriktlinjer.se lagt upp en skrift som hette kaklagen i praktiken men den är tyvärr nedplockad. Enhetschefen på PTS har skrivit ett blogginlägg, besökt 2021-01-11, om detta och kanske kommer en liknande skrift upp igen under PTS flagg.

Det finns två olika typer av 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.

<?php
// skapa en mailadress
$mailadress = "johan@minmail.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.

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

3.3 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"

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

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