Tutorial - Inloggningsapplikationen

1. Introduktion

I denna tutorial kommer jag att skapa en inloggningsapplikation från grunden. Jag kommer förklara hur jag tänker och planerar arbetet med denna typen av applikationer. Det jag gör i denna applikation är ju självklart applicerbart även i andra och/eller större applikationer.

1.1 Uppgiften

2. Bygga upp strukturen

Utifrån uppgiften så gäller det nu att bryta ner hela uppgiften i mindre delar. Det vi direkt vet från uppgiftens presentation är att det skall finnas fem stycken php-filer för att vi skall få denna applikation att fungera. Vi kan också läsa oss till att filerna index.php och admin.php är sidor där information skall presenteras. Vi börjar med att få koll på hur allt hänger ihop i applikationen.

2.1 Funktionalitet, mockup och sitemap

Utifrån uppgiften så kan vi göra oss en bild över hur applikationen skall se ut.

Bilden som visas kallas för en sitemap och den är väldigt användbar för att visa hur alla filer hänger ihop. För sidorna admin och index har jag också skissat på ett utseende och detta kallas en mockup. Mellan sidorna finns det ett antal streck och de flesta strecken har en hjälptext vilken förklarar vad som händer när applikationen hoppar från en sida till en annan. På det sättet så visas funktionaliteten upp.

Med denna bild, som är gjord i draw.io, är det enkelt att få koll på vad som kommer ingå i applikationen, däremot så är alla lösningar inte med i skissen. Är vi flera som delar på utvecklingen så går det nu att visa upp hela lösningens struktur och sedan fördela arbetet. Vill kunden se hur applikationen kommer se ut så finns det enkla skisser för detta i admin och index. Däremot hade detta troligtvis inte varit tillräckligt för en godkänd mockup till ett projekt i webbutvecklingskurserna.

Nu när vi har en bättre bild så är det dags att börja jobba.

1. Skapa en ny katalog för detta projekt, döp den till något lämpligt, jag väljer inlogg.
2. Skapa fem filer i mappen, eftersom vi redan har fått hjälp med vad de skall heta så är det bara att följa.
• index.php
• login.php
• check_login.php
• admin.php
• logout.php
3. Sidorna index och admin kommer innehålla html-kod och det är lika bra att göra dessa sidor snygga med css-kod. Eftersom denna kursen inte primärt handlar om att göra snygga sidor så väljer jag ett css-ramverk som enkelt inkluderas i våra filer. Jag har valt spectre. Hur det används visar jag när jag bygger upp filerna.

2.2 index.php

Som jag skrev ovan så använder jag CSS-ramverket spectre, jag tror inte att du kommer tycka att det är allt för svårt att följa detta, men för säkerhets skull så kommer jag också visa ett enkelt exempel helt utan css-kod. Det ger dock en trevligare upplevelse att bygga en designad applikation. Fokus i denna kurs ligger dock på php och funktionalitet som inte direkt syns i webbläsaren.

2.3 admin.php

admin.php är den sidan som en korrekt inloggad användare kommer hamna på. Vi bygger upp den enkelt med en endast en utskrift att Du är inloggad. När vi har gjort det så har vi satt grunden för bägge de två sidor som skall visas upp i webbläsaren.

På samma sätt som tidigare, en fil som är stylad enligt spectre och en som är helt ostylad.

Detta är också sista gången jag visar bägge alternativen, i fortsättningen kommer jag bara jobba med den som är stylad enligt spectre.

3. Börja koda

När vi nu skall börja så finns det flera olika sätt att ta sig an detta. Jag kommer att steg för steg bygga upp applikationen så som vi skall använda den.

3.1 Inloggningen

Vi börjar med själva inloggningen. Det innebär att vi skall ange ett användarnamn och lösenord i formuläret på index-sidan och sedan skicka oss till login-sidan där det vi har matat in skall jämföras med det användarnamn och lösenord som vi har bestämt för vår applikation. Om kombinationen av användarnamn/lösenord är korrekt så skall vi skickas till admin-sidan, annars skall vi skickas tillbaka till index-sidan och skriva ut ett meddelande till användaren.

3.1.1 index.php

Vi kikar på formuläret först att det har rätt inställningar, vi vill att action skall vara login.php eftersom det är dit vi skall skickas och sedan vill vi att method skall vara POST eftersom vi vill dölja användarnamn och lösenord från att skrivas ut i vår url.

Bra, testa nu formuläret med valfri inmatning och se till att du kommer till sidan login.php. Sidan är helt tom så inget skall ritas ut men du kan se i rutan där du anger en url att du har kommit till rätt ställe.

Vad händer om du klickar på logga in-knappen utan att ha fyllt i någonting i ditt formulär?

Knappen kommer skicka dig till login.php trots att bägge rutorna är helt tomma. Så vill vi inte ha det, se till att du tvingar användaren att mata in någonting i rutorna genom att sätta attributet required i de formulärelement som måste innehålla någonting.

Jag som kör spectre får nu dessutom en färgformatering på rutorna, de är röda så länge jag inte har matat in någonting i dem. Allt som hjälper användaren är tacksamt. Trycker jag ändå på knappen och inte har fyllt i något så kommer jag få ett meddelande om att jag måste fylla in någonting i rutan.

3.1.2 login.php

Dags att kika på login.php, denna sidan har tidigare varit helt tom men nu skall vi lägga lite logik till denna sidan. Vi börjar att sätta upp php-taggar och skriver ut de variabler som vi har tillgängliga när vi kommer till denna sidan från formuläret.

Utskriften blir då..

Att skriva ut alla variabler är smidigt för då får vi se vad som finns tillgängligt på den sidan som vi jobbar på för tillfället. Det kommer hända att vi är övertygade om att variabler heter på ett visst sätt eller har ett innehåll som inte stämmer överens med verkligheten.

Nu ser vi ju också att det är våra två variabler i från formuläret [_POST]-arrayen som är det vi skall jämföra med. Då gör vi det.

Jag tror inte att så mycket behöver förklaras, jag skapar två variabler som innehåller det korrekta användarnamnet och lösenordet innan jag hämtar samma uppgifter från formuläret. Slutligen så jämför jag dessa variabler och avgör om inloggningen har lyckats eller ej. De två första variablerna har jag skapat för att senare kunna jämföra med olika användarnamn och lösenord, troligtvis vill jag att flera användare skall kunna använda min applikation.

Testa nu med en godkänd inloggning [admin|admin] men också med en inloggning som är felaktig. Inloggningen till admin-sidan fungerar och det gör också den felaktiga inloggningen då vi skickas tillbaka till index-sidan. Dock skulle jag vilja få ett meddelande om att inloggningen har misslyckats så jag inte bara tror att sidan har laddats om och tömts på sitt innehåll.

För att kunna skriva ut ett meddelande så måste jag också skicka det. Vi gör det från login-sidan där vi lägger till en GET-variabel som vi döper till mess.

Nu behöver vi ta emot detta meddelande och skriva ut på index-sidan. Eftersom vi inte alltid kommer få ett meddelande att skriva ut så behöver vi först kolla om det finns något meddelande att skriva ut. Som ni vet så kommer det bli ett error om vi frågar efter en variabel som inte finns. Vi gör denna test i början av index-sidan.

Utskriften av $mess vill jag göra innan formuläret.

Det finns ett kortare sätt att tilldela den lokala variabeln $mess ett värde och tekniken kallas shorthanded if. Använd vilken du vill, men jag kommer använda shorthanded if när det är möjligt och lämpligt.

Kika på den och försök förstå den; direkt efter tilldelningstecknet (=) kommer uttrycket som skall testas. Efter frågetecknet (?) kommer det värde $mess tilldelas om uttrycket är sant, annars tilldelas $mess värdet efter kolon (:).

Testa nu att det ser ut som du vill på din index-sida.

Så ser det ut på min sida, som du kanske märker så har jag tvingats göra formulärets element lite bredare och det berodde på att texten jag skrev ut radbröts vilket jag inte var nöjd med.

3.2 Session

Testa nu att logga in felaktigt. När du kommer tillbaka till index-sidan så går du upp i urlen och skriver admin.php så att du kommer till den sidan. Vad händer då?

Det som händer är att du alltid når admin-sidan oavsett om du är inloggad eller inte. Så kan vi inte ha det utan vi behöver lösa detta genom att använda oss av en session. Sessioner har vi gått igenom tidigare och det vi vill göra är att när vi sett att det finns en godkänd inloggning så vill vi sätta en session. Denna sessionen vill vi sedan kolla av inne på adminsidan för att avgöra om användaren får vara där eller inte.

3.2.1 login.php

Vi börjar att längst upp på sidan, innan något annat är gjort öppna sessionen. Sedan sätter vi användarnamnet, det du loggar in med, till username i sessionen innan vi skickar användaren till admin-sidan.

3.2.2 admin.php

Börja med att skriva session_start längst upp på sidan och skriv sedan ut vilka variabler som finns tillgängliga.

Där ser vi att det finns en sessionsvariabel som vi kan kolla ifall den finns. Om det skulle vara så att vi inte är inloggade så bör denna inte finnas. På det sättet så kan vi kolla ifall denna inte finns så bör användaren skickas till index-sidan med ett meddelande om att användaren inte är inloggad. Detta är viktigt ifall användaren försöker nå admin-sidan genom att skriva url till denna sida.

Innan vi skriver koden för detta så bör vi fundera på om admin-sidan är den enda sida som behöver skyddas mot ej inloggade användare. Troligtvis är det inte så utan vi behöver hitta en lösning som är enkel att återanvända. Redan i uppgiften så stod det om en sida som heter check_login-sidan och som skall göra precis detta. Vi skriver då den koden vi har planerat i denna filen och inkluderar sedan denna koden i admin-sidan.

3.2.3 check_login.php

Skriv följande kod i filen check_login.php. Förhoppningsvis är koden och kommentarerna tillräckligt tydliga för att du skall förstå vad som händer.

3.2.4 admin.php

I admin-sidan skrivs denna koden högst upp. Den kommer då läsa in check_login.php för att kolla om du har rätt att vara kvar på denna sidan. Denna kodsnutt skall sedan läggas högst upp på varje sida där du behöver vara inloggad. Det är viktigt att den ligger högst upp av två anledningar. Dels innehåller den anropet som öppna sessionen men den måste också skicka dig till index-sidan innan någonting börjar skrivas ut på sidan. Koden header('location') kan inte skicka dig vidare om sidan har börjat ritas ut i webbläsaren. Det räcker att ha ett mellanslag innan första <?php-taggen på sidan för att det inte skall kunna fungera.

Här väljer jag att inkludera en annan fil med funktionen require_once() istället för include() och jag skall förklara varför. Det finns fyra alternativa funktioner, include(), include_once(), require() och require_once(). Once innebär att den endast kan läsas in en gång på varje sida, vilket innebär att om jag lyckas få med något anrop som inkluderar någon fil flera gånger så kan jag se till att bara det första anropet fungerar. Detta är viktigt om jag skall inkludera en fil som innehåller en mängd egenskapade funktioner som inte kan läsas in flera gånger. Skillnaden mellan include och require är vad som händer om filen inte finns, anropar vi med include och filen inte finns så kommer php-koden att fortsätta processas ändå. Med require så avbryts php-processen och det är vad jag vill skall ske denna gången. Om någon lyckas ta bort check_login.php så skulle det annars vara fritt fram att leka admin på mina sidor utan en godkänd inloggning. Nu kommer iaf processen avbrytas och användaren kommer ingen stans och kan inte göra någon skada.

Nu hade det varit kul att testa detta men det är inte möjligt med mindre än att vi stänger av webbläsaren och startar upp igen. Anledningen till detta är att vi har just nu ingen funktionalitet för att döda sessionen. Eftersom vi måste ha en sådan funktion är det lika bra att göra den.

Lägg en länk i admin-sidan som går till logout-sidan där det står logga ut eller något liknande.

3.2.5 logout.php

I logout-sidan behöver vi nu göra tre saker med sessionen;

• Öppna sessionen
• Ta bort alla sessionsvariabler
• Ta bort sessionen

När vi har gjort det så behöver vi skicka användaren till index-sidan med ett meddelande att hen är utloggad.

Nu går det också att logga ut från vårt system. Nu är det dags att testa alla funktioner och se ifall vi är klara.

3.3 Testa applikationen

Det är alltid bra att sätta ihop ett testschema så att vi vet vad som skall testas, för att inte missa något viktigt. Det som vi behöver testa är;

1. Inloggning, godkänd
2. Inloggning, misslyckad
3. Logga ut
4. Testa att utloggad nå admin-sidan genom att skriva in url.

Leta hela tiden efter utskrifter av typen Notice: och Warning: som kommer från PHP-tolken när något inte stämmer fullt ut.

Kolla att felmeddelande som vi har implementerat på index-sidan visas med korrekt information.

När jag testar så verkar allt fungera som det skall. Det enda som inte riktigt stämmer överens med den bild jag ritade tidigare är att det inte står utskrivet vem du är inloggad som på admin-sidan. Det är enkelt åtgärdat då vi skriver ut sessionsvariabeln för att visa upp detta.

Vi testar utskriften och det blir som vi vill.

3.3.1 Slutföra projektet

Nu är vi nöjda med funktionaliteten för tillfället och det är dags att göra oss redo för leverans, vilket i vårt fall innebär att koden skall snyggas till, bortkommenterade delar och testkoder skall tas bort. Kommentarer skall läggas till om det behövs.

Vi skall också lägga till CSource i vår applikation. innan du lägger upp hela katalogen på din domän hos Binero. Sedan ser du till att länka applikationen från samlingssidan och även i ett inlägg på sin WordPress där du också gör en utvärdering av arbetet med applikationen.

Hade denna leveransen gått till kund så borde vi också validera den färdiga html-koden och den css vi använder. Men det ligger mer på kursen inom Webbutveckling.

Nu anser vi oss klara med denna version av inloggningsapplikationen.

3.4 Vidareutveckling av denna applikation

Nu finns det en relativt enkel applikation som vi kommer återkomma till och återanvända senare i kursen. Den är på inget sätt perfekt men en bra grund att stå på.

Funktionalitet som går att lägga till;

• Skapa flera användare, dessa kan lagras i
• en eller flera arrayer som är skapade i login-sidan.
• en fil som läses in i login-sidan.
• en databas som kopplas till
• Det finns en kryssruta vid inloggningen. Den är förberedd för att skapa en cookie som göra att användaren automatiskt blir inloggad när hen återkommer.

4. Hela applikationens kod