Tutorial - En liten bankapplikation

1. Introduktion

Detta är en tutorial för att lösa projekt01 i kursen Webbserverprogrammering01. Genom att följa tutorial och genomföra uppgiften innebär att du löst uppgiften på lägsta nivå för ett godkänt betyg. Jag kommer under denna tutorial fokusera på det mest grundläggande delarna men ibland också göra lite mer avancerade delar vilket ligger på en något högre nivå än E men eftersom jag/vi gör det på detta sättet så kan du inte tillgodoräkna dig detta denna gång. Däremot så lär du dig saker på en något högre nivå som du sedan kan återanvända och visa att du kan jobba med på egen hand senare vilket ger dig möjlighet att kunna räkna in denna kunskap när betyg skall sättas.

1.1 Uppgiften

Uppgiften är att skapa en bankapplikation till Sveriges enklaste, och minst säkra, internetbank. Uppgiften kommer vara tvådelad, först en grundläggande del som alla skall göra för att visa på kunskaper i nivå med betyget E. Sedan kommer det en lista med tilläggsfunktioner som gör applikationen lite mer avancerad och förbereder dig på högre betyg.

Innan du börjar hacka kod, gör en grovplanering av hur du skall lägga upp arbetet. Det är oftast mer effektivt att sedan lösa en deluppgift i taget. Koden för grundkraven är inga nyheter, det är saker du har gjort tidgare, det gäller bara att pussla ihop det på rätt sätt.

1.1.1 Grundkrav

Följande grundkrav finns för att ha löst uppgiften.

  • När ett konto skapas så får användaren 1000kr insatta på kontot.
  • Bygg applikationen i en eller flera php-filer.
  • Användaren skall kunna göra ett uttag eller insättning till sitt konto i applikationen, detta sköts genom ett eller flera formulär med lämpliga formulärelement.
  • Kontots saldo får aldrig vara negativt.
  • Insättning och uttag får vara vilket belopp som helst, fast vi jobbar bara med hela kronor.
  • Saldot på kontot skall beräknas utifrån kontots händelser, det skall inte lagras någonstans i en fil.

1.1.2 Genomförande

Även om du känner dig mogen att bygga banken efter eget huvud så vill jag att du bygger den tillsammans med mig steg för steg. Anledningen till detta är att jag under utvecklingens gång går igenom en del principer som kommer underlätta för dig senare i kursen.

Varje del kommer göras i olika etapper där du själv väljer hur mycket hjälp du vill ha av mig.

När grundkraven är genomförda så finns det möjlighet att byga vidare på banken och använda dina nyvunna kunskaper för att bygga en bra applikation.

2. Planering

När vi nu skall lösa en något större uppgift än vad vi tidigare har gjort så är det viktigt att vi börjar med att fundera på hur vi kan dela upp uppgiften i mindre delar och försöka lösa del för del. Senare, när vi är mer vana vi att lösa denna typ av uppgifter så kräver det mindre planering men om uppgiften är komplex och lösningen är komplicerad så kommer det krävas mer planering. Vi börjar med att punkta upp de saker som vi redan nu vet att vi skall lösa och försöker också sätta dem i rätt ordning, det gör det enklare senare. Denna planering kommer vi behöva gå tillbaka till med jämna mellanrum och bocka av färdiga delar men också lägga till och justera de punkter som då finns kvar. Se det som ett recept på hur vår lösning skall genomföras.

2.1 Grovplanering

Vi börjar med en grovplanering med de saker som vi redan nu vet. I samband med att jag lägger till punkter så lägger jag dem i rätt ordning utifrån i vilken ordning jag just nu tror att de skall skapas/lösas.

  1. Rita en skiss över hur applikationen skall se ut. Det som skall finnas med är;
    • Kontots saldo
    • Ett formulär för insättning och uttag
    • En lista över alla transaktioner.
  2. Skapa GUI för den skiss som jag ritat.

Vi börjar där, vi vet också att vi skall få in grundkraven men vi vet just nu inte hur.

2.2 Skissa applikationen

Eftersom detta är en uppgift som görs i kursen webbserverprogrammering01 så ligger inte fokus på html/css men eftersom vi bygger applikationen i webbmiljö så är det viktigt att kunna skapa ett bra gränssnitt så att användaren förstår vad hen skall göra med din applikation. Jag börjar rita upp mitt gränssnitt och det gör jag med tjänsten draw.io. Testa att skapa ditt eget gränssnitt innan du kikar på mitt. Risken är ju att du bara kopierar när du på egen hand kan skapa ett mycket bättre gränssnitt än det jag skapar.

Jag använder mig av figurer som ligger i mappen Mockup under More shapes... i den vänstra rutan inne i draw.io.

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

2.3 Bygg upp gränssnittet

Nu har vi valt att bygga banken i webbmiljö med programmeringsspråket PHP men vi kunde lika gärna ha byggt applikationen som en fönster- eller konsollapplikation i något annat programmeringsspråk. Oavsett hur jag vill skapa min applikation så kommer det krävas en tanke och en skiss på hur applikationen skall se ut. Men som sagt, nu bygger vi upp vårt GUI med hjälp av html och css. Detta ingår inte i kursen webbserverprogrammering01 men om du dessutom läser webbutveckling01 så ingår detta och då bör du skapa din egen kod för detta, en kod som dessutom bör vara mobilanpassad vilket inte mitt GUI kommer vara i grundutförande.

Tänk på att mitt fokus ligger i applikationens funktionalitet och inte på det GUI vi skapar, därför är jag säker på att de flesta av er kan bygga ett bättre GUI på egen hand.

Jag börjar med att skapa en mapp som jag döper till bank som jag lägger någonstans så att jag kan köra filer i denna mappen via min webbserver (MAMP/WAMP/XAMPP). I mappen skapar jag två filer, bank.php och bank.css. Bygg sedan upp html-strukturen i bank.php och all css-kod i bank.css.

Varning för utseendet

Uppgiften i denna tutorial har några år på nacken och är byggd på en gemensam programmeringsövning. Därför skiljer sig utseendet en del ifrån det som används i andra tutorials.

I applikationen så används namnet Lilla TIS-banken, döp gärna om det till något annat.

Kodexempel: bank.php

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <title>Bankapplikationen</title>
  <link rel="stylesheet" href="bank.css" type="text/css" />
</head>
<body>
  <main>
    <header>Bankapplikationen</header>
    <article>
      <h1>Lilla TIS-banken</h1>
      <p>Sveriges minsta och mest osäkra internetbank.</p>
      <section>
        <h2>Saldo</h2>
        <p>1000 kr</p>
        <h2>Insättning/uttag</h2>
        <form method="" action="">
          <p>Belopp: <br>
          <input type="text"></p>
          <p><input type="radio"> Insättning
          <br><input type="radio"> Uttag </p>
          <p><input type="submit" value="utför"></p>
        </form>
      </section>
      <section>
        <h2>Transaktioner</h2>
        <p>1000 kr</p>
        <p>-500 kr</p>
        <p>900 kr</p>
        <p>-400kr</p>
      </section>
    </article>
    <footer>Sidfot</footer>
  </main>
</body>
</html>

Kodexempel: bank.css

body{
  background-color: rgb(112, 176, 218);
  padding: 0;
  margin: 0;
}

main{
  background-color: rgb(212, 223, 231);
  width: 75%;
  min-width: 500px;
  margin: 0 auto;
  border: 1px rgb(120, 120, 120) solid;
  padding: 0px;
}

header, footer{
  background: rgb(156, 192, 144);
  height: 50px;
  font-size: 24px;
  color: #333;
  padding: 20px;
}

h1, h2, p{
  color: #333;
}

article{
  margin: 0 auto;
  text-align: center;
}

section{
  padding: 15px;
  border: 1px rgb(120, 120, 120) solid;
  display: inline-block;
  text-align: left;
  vertical-align: top;
  width: 40%;
  margin: 20px;
}

Jag gjorde det enkelt för mig och slumpade fram ett färgschema till banken från coolors.co.

Skärmdump

Skärmdump på applikationen

Som du ser så valde jag att lägga till elementen <header> och <footer>. Dessa element är så vanliga och med stor sannolikhet så vill vi ha dem med lite senare. Om vi inte vill det så är det enkelt att ta bort dessa.

Då känner vi oss klara så här långt. Än så länge har vi inte programmerat någonting men det kommer vi börja med i nästa del.

3. Kodens struktur

PHP är ett språk som är ganska tillåtande vilket gör att det kommer finnas flera olika lösningar på våra problem. Det som är viktigt är att tidigt sätta upp lite regler för hur vi skall göra som vi sedan kan förhålla oss till. En enkel regel är att jag bara använder mig av variabel- och filnamn på engelska och det är för att jag skall slippa problemet med svenska tecken som kan uppstå när jag flyttar till en annan webbserver. Bara för att min applikation fungerar lokalt på min dator så innebär inte det automatiskt att den fungerar när jag lägger över den på Bineros server. Detta måste testas och vi kan underlätta detta genom att följa några enkla regler, att undvika svenska tecken är den första regeln. Att använda oss av camelCase (börja namnet med gemen och sedan skrivs första bokstaven i varje nytt ord med versal) för alla variabel- och filnamn gör också att vår kod blir konsekvent och snygg.

Filens strukturJag kommer bygga hela applikationen i en enda fil, vilket ger både fördelar och nackdelar, men jag tycker att denna applikationen kommer inte innehålla speciellt mycket kod och jag tror att det är lättare att hålla ihop koden i en enda fil. Strukturen på denna enda kodfil ser du på bilden.

Det jag försöker beskriva med bilden är att jag längst upp i filen lägger alla funktioner som jag skall använda. Om dessa blir för många så kan/bör jag lägga dessa i en egen fil som jag läser in på samma sätt som jag separerar css från html i en egen fil.
Sedan kommer ett avsnitt där jag skapar de variabler som jag vet kommer behövas i applikationen. Inom flera andra programmeringsspråk så behöver variabler deklareras innan de används, det behöver vi inte göra i PHP men det underlättar att skapa alla viktiga variabler på ett ställe för då är de lätt att se var de kommer ifrån. Vi kommer behöva skapa flera olika typer av variabler.
Sedan har jag den delen som jag kallar bankManager och tanken är att här skall all logik finnas samtidigt som det fortfarande finns möjlighet att ladda om sidan beroende på vad logiken säger.
Slutligen så sker själva utskriften och då är tanken att alla html-element som har skapats i bankManagern finns tillgängliga men endast skall skrivas ut. Alla beräkningar och sådan logik skall redan vara gjord.

3.1 Skapa konto (fil)

Information om kodexempel i tutorial

Nu skall du börja skriva koder. Det är viktigt att läsa instruktionerna nogrannt och sedan följa dessa. Du kommer vid flera tillfällen skriva kod som bygger ut redan befintlig kod och ibland kommer du skriva kod som skriver över något som du har skrivit tidigare.

Ha inte för bråttom! Följer du min tutorial så kan du alltid kika på radnummer för den kod som jag har klippt in. Tycker du att du har kod som liknar den nya koden på ungefär samma ställe så kan du utgå ifrån att denna kod skall förändras och inte skrivas till direkt under så att delar av koden blir dubletter. Fundera på vad koden gör och vad den redan skrivna koden gör.

Dags att börja med första delen av programmet. Alla transaktioner kommer lagras i en fil som vi skall skapa. Instruktionerna är glasklara, när ett konto skapas så skall saldot bli 1000kr, vi kan likställa det med att en fil skapas och en insättning på 1000kr görs.

Att skapa en fil har vi gjort i tidigare övningar, det är inte så svårt. Men vi kan inte skapa en fil om det redan finns en fil, vi behöver alltså kolla om filen finns innan vi gör något annat. Det finns en inbyggd funktion för detta, file_exists(). Testa själv att automatisk skapa en fil, om den inte finns, och sätt in 1000kr.

Hjälp [klicka för att visa]

Här kommer den lilla kodhjälpen, du som bara vill ha lite hjälp men själv försöka lösa problemet kan använda dig av följande punkter.

  • Skapa en variabel som lagrar filnamnet.
  • Om filen inte redan finns
    • Skapa filen med insättning av 1000 på första raden.

Hjälp [klicka för att visa]

Skärmdump på applikationen

När du är klar, testa så att det fungerar. Följande saker bör du testa.

  • Att en fil skapas om den inte finns.
  • Att en fil inte skapas om det redan finns en fil (ändra belopp i filen för att se att den inte skrivs över).

3.2 Lägg till en transaktion

Då är det dags att jobba med formuläret och se till att vi kan göra insättningar och uttag till vår transaktionsfil. En insättning är ett tal på en egen rad, ett uttag är ett negativt tal på egen rad i transaktionsfilen. Det formulär som redan är skapat innehåller ingen information för method eller action. Vi behöver också bygga upp en logik i vår bank-manager för att läsa av ifall formuläret är skickat.

Hjälp [klicka för att visa]

Här kommer den lilla kodhjälpen, du som bara vill ha lite hjälp men själv försöka lösa problemet kan använda dig av följande punkter.

  • I formulärhuvudet så skall samma sida anropas som action och lämplig method skall anges så att den data som skickas är dold.
  • I vår bank-manager så behöver vi först kolla om formuläret är skickat. Vi behöver sedan kolla om det är en insättning ett uttag som är gjort och slutligen spara ner detta i vår transaktionsfil.
    • En viktig grej att hålla koll på är vad som händer om vi refreshar sidan när vi har skickat ett formulär? Är det ett problem? Hur löser du det?
  • Sista grejen som behöver göras är att se till att formuläret uppfyller de krav som finns;
    • Endast tal skall kunna anges som belopp.
    • Insättning eller uttag måste anges för att formuläret skall kunna skickas. Felaktiga formuläranrop vill vi inte ha med oss till mottagarsidan då detta kräver extrajobb för att ta hand om.

Hjälp [klicka för att visa]

Om vi följer instruktionerna från den lilla kodhjälpen så behöver vi göra detta i tre steg.

3.2.1 Formuläret

När vi klickar på knappen för utför så vill vi att formuläret skickar oss till samma sida, som vi redan är på, och då kan vi välja att låta action vara tom för tillfället. I method däremot måste vi välja vilken metod som skall användas. Vi vill att formulärets innehåll skall vara dolt och därför väljer vi värdet POST.

kod

Nu vill vi se att vårt formulär fungerar och då behöver vi se vilka variabler som är tillgängliga på vår sida. Detta får vi reda på genom att ange följande kod. Jag lägger denna under <footer>-elementet för att det skall störa applikationen så lite som möjligt. Denna utskrift kommer vi ha stor användning av under utvecklingens gång men den skall naturligtvis inte vara med i den slutliga produkten.

kod

Skriv in någonting i formuläret och klicka på knappen utför. Kika sedan på vilka variabler som finns tillgängliga.

Sidan

Du kan se att det har skapats en variabel, av typen array, som heter _POST, denna är dock tom och det beror på att vi inte har givit våra formulärelement några namn, då måste vi göra detta.

kod

Saker som kanske behöver förklaras här är att våra radiobuttons måste ha samma name, annars kommer de inte hänga ihop och vi kan välja bägge alternativen, och att vi här också sätter ett value som ve senare skall läsa av för att veta om vi skall skapa en insättning eller ett uttag. Fyll i formuläret och klicka på knappen för att se att det fungerar.

Sidan

Bra, nu kan vi skicka värden med vårt formulär till mottagarsidan, nu skall vi jobba vidare med att utföra transaktioner med denna information.

3.2.2 Skriv transaktion till filen

Vi behöver kolla av om formuläret har skickats, om så är fallet så behöver vi kolla om det är en insättning eller ett uttag som har gjorts och sedan skriva detta till transaktionsfilen. Allt detta bygger vi i vår bank-manager.

kod

Först kollar vi om det är ett formulär skickat, sedan kollar vi om det är en insättning eller ett uttag som är gjort. Vi skriver sedan till filen och stänger filen.

En viktig sak är det som händer på rad 32 där sidan laddas om för att bli av med formulärdatat. Hade vi inte gjort detta så är det möjligt att reloada sidan direkt när vi har gjort en insättning/uttag och då utföra denna händelse en gång till. Med rad 32 så gör vi ett tomt anrop till sidan.

3.2.3 Säkra formuläret

Formuläret vi har skapat är inte speciellt användarvänligt för tillfället. Om vi väljer att inte fylla i någonting och klicka på knappen utför så kommer vi få en krasch då bank-manager förväntar sig att någon av våra radiobuttons är ifyllda. Då behöver vi göra det omöjligt att skicka formuläret om någon sådan inte är ifylld. Det går också att skicka ett tomt värde i beloppsrutan eller tom en text. Detta behöver vi också ta hand om.

Det finns några olika sätt att lösa dessa problem, min lösning ser du i koden nedan.

kod

Jag har ställt om amount till number så att jag vet att det är ett numeriskt värde som kommer, jag har satt den till required och att den inte får vara mindre än 1. Att ta emot 0 är ointressant och att få ett negativt tal ställer bara till det. Vad innebär ett negativt uttag?

För radiobutton så har jag satt required på den första, då tvingas användaren att välja den ena.

3.3 Avrundning

Testa nu applikationen så att den fungerar, håll hela tiden koll i din transaktionsfil så att det du förväntar dig händer. När du vet att det fungerar så ta några minuter att gå igenom och snygga till koden om det behövs. Skapa sedan en kopia av denna fil, döp den gärna till bank_3.php så vet du att du har en fungerande version efter avsnitt 3 i min tutorial.

Sedan går du vidare till avsnitt 4.

4. Läsa in alla transaktioner

Vi har sett i filen att vi kan lägga till transaktioner och att en fil skapas om det inte finns någon. Det har blivit dags att läsa in dessa transaktioner till vår applikation och visa upp dem samt att beräkna saldot.

Hjälp [klicka för att visa]

Här kommer den lilla kodhjälpen, du som bara vill ha lite hjälp men själv försöka lösa problemet kan använda dig av följande punkter.

Koden bör du ha arbetat med tidigare och den borde inte vålla oss några större problem. Vi lägger den direkt efter skapandet av filen om den inte finns.

Glöm inte att skapa variabeln $transactions som en array.

Hjälp [klicka för att visa]

kod kod

Kolla nu att filens transaktioner läses in till arrayen.

Webbsidan

4.2 Skriv ut alla transaktioner

Skriv nu ut alla transaktioner på ett snyggt sätt.

Hjälp [klicka för att visa]

Här kommer den lilla kodhjälpen, du som bara vill ha lite hjälp men själv försöka lösa problemet kan använda dig av följande punkter.

Eftersom jag har byggt kodstrukturen så att allt skall vara gjort innan det är dags för utskrift så vill jag loopa igenom arrayen och bygga upp utskriften i en variabel. Denna variabel kan jag sedan enkelt skriva ut.

Hjälp [klicka för att visa]

kod kod kod Webbsidan

4.2.1 Ta bort tom transaktion

Om du kikar noga på utskriften av transaktioner, antingen i webbläsaren eller i källkoden så ser du att det skrivs ut en sista tom transaktion. Tittar du på innehållet i arrayen $transactions så är det extra tydligt att det har skapats en tom komponent i slutet av arrayen. Den behöver vi ta bort!

Anledningen att det skapas en tom transaktion är att filens sista transaktion avslutas med en radbrytning. Den har vi skapat men det finns också andra möjligheter att en fil avslutas med radbrytning. Vissa IDE:er gör det automatiskt så denna koll kan vara bra att göra ändå.

Hjälp [klicka för att visa]

Det absolut enklaste är att se till att en tom rad från filen inte hamnar i arrayen. Detta kan du kolla genom att se hur lång en sträng är eller med funktionen empty() som kollar om en variabel är tom (eller innehåller 0, 0.0, NULL bl.a.).

Hjälp [klicka för att visa]

Vi behöver läsa av nästa rad från filen, lagra denna rad i en variabel som vi sedan testar om den är tom. Om variabeln inte är tom så skall vi lägga till en ny komponent i vår array.

kod

Vi kikar att det fungerar.

webbsidan webbsidan

Nu ser det bra ut!

4.3 Beräkna saldot

Nu har det blivit dags att beräkna saldot på vårt konto. Utskriften skall sedan läggas på rätt plats på webbsidan.

Hjälp [klicka för att visa]

En variabel måste skapas som håller saldot och sedan behöver vi loopa igenom arrayen med alla transaktioner för att summera dem.
Tips: Bäst är att inte loopa igenom arrayen för många gånger utan istället göra fler saker samtidigt när vi ändå loopar igenom arrayen.

Det finns en hel mängd hjälpfunktioner för PHP och array_sum() är ytterligare en sådan som går att använda. Jag förbjuder er inte att använda inbyggda funktioner men eftersom vi skall lära oss att programmera så kan det vara bra att jobba med egna algoritmer.

Hjälp [klicka för att visa]

Först måste vi skapa en variabel så att vi kan beräkna saldot.

kod

Sedan behöver vi beräkna saldot genom att loopa igenom hela vår array med transaktioner. Vi har redan en sådan loop så här lägger vi beräkningen. Det är viktigt att vi redan har satt värdet på $balance till 0 annars kommer vi få fel vid beräkningen.

kod

Skriv sedan ut värdet på $balance.

kod

Nu får vi troligtvis ett error.

kod

Detta error beror på att PHP-tolken inte är nöjd med innehållet i arrayen. Vi vet ju att det är tal men PHP-tolken anser att det är strängar/text och därför flaggas ett meddelande om att det numeriska värdet inte är formaterat som det borde vara. Detta behöver vi ta hand om och det gör vi genom att tvinga det värdet som vi läser in från filen att bli/vara ett heltal. Det gör vi med funktionen intval().

kod

Nu kan vi kolla att webbsidan laddas med rätt saldo och utan error.

kod

Det ser bra ut!

4.4 Ta bort konto

Det sista vi skall göra i detta avsnitt är att göra det möjligt att ta bort ett konto. Kontot tas bort genom att filen tas bort, sedan kommer en ny fil återskapas (det har vi fixat tidigare). För att ta bort en fil används den inbyggda funktionen unlink().

Hjälp [klicka för att visa]

Skapa en knapp eller en länk som gör ett anrop till den sidan du redan är på. Se sedan till att filen tas bort. Tänk på var du vill placera denna kod.
Glöm inte att skriva ett meddelande till användaren att kontot har tagits bort.

Hjälp [klicka för att visa]

Vi börjar med att skapa en formulärknapp som vi skall klicka på för att ta bort ett konto. Lägg inte denna knappen för nära den knappen som lagrar en transaktion. Vi vill inte av misstag klicka på knappen "ta bort".

kod

Skriv nu kod som tar bort filen. Jag lägger också med kod som gör att sidan laddas om utan formulärdata så att vi inte får problem senare. Jag skickar också med ett meddelande som jag kan skriva ut till användaren.

kod

Nu behöver vi ta hand om detta meddelande och skriva ut det på webbsidan. Vi börjar med att ta hand om själva meddelandet som skickas, för det kräver viss förklaring.

kod

Egentligen är detta en vanlig if-sats men den skrivs enligt tekniken shorthanded-if vilket gör den mycket mer kompakt. Det som händer är att något skall lagras i variabeln $mess. Vad som skall lagras beror på uttrycket som kollar om $_GET['mess'] finns och att det inte är tomt. Om det finns så skapas en html-tagg med meddelandet som lagras i $mess, annars lagras ingenting i $mess.

Sedan ser vi till att skriva ut det på webbsidan...

kod

... och formaterar utskriften.

kod

Då ser sidan ut på följande sätt.

webbsidan

Kolla nu att kontot är nollställt. Hos mig verkar det fungera.

webbsidan

4.5 Avrundning

När du vet att det fungerar så ta några minuter att gå igenom och snygga till koden om det behövs. Skapa sedan en kopia av denna fil, döp den gärna till bank_4.php så vet du att du har en fungerande version efter avsnitt 4 i min tutorial.

Sedan går du vidare till avsnitt 5.

5. Funktionalitet kring transaktioner

Det är dags att jobba lite med våra transaktioner. Just nu går det att ta ut ett större belopp än vad som finns på kontot. Så kan vi naturligtvis inte ha det. Vi kommer också bygga på lite mer info kring transaktionerna för att träna lite extra och även ge de elever som vill nå högre betyg en lite tips på hur man kan tänka och bygga detta.

5.1 Förhindra negativt saldo

Som applikationens er ut just nu så kan du göra hur stora uttag som helst. Detta måste vi justera då vi inte vi ha skuld på våra konton.

Hjälp [klicka för att visa]

Eftersom denna tutorial har används i kursen programmering01 så kommer här ett kort avsnitt om aktivitetsdiagram och pseudokod. Detta ingår inte ifall du läser kursen webbserverprogrammering01 men vem kan motstå lite repetiton?

Här skall du skapa pseudokod och aktivitetsdiagram för att kontrollera att uttaget inte är större än saldot.

Hjälp [klicka för att visa]

Logiken här är ganska enkel, om uttaget är större än saldot så får inget uttag göras, däremot bör ett meddelande skickas till användaren att uttaget inte kan göras.

Hjälp [klicka för att visa]

5.1.1 Pseudokod

Även om vi kan tycka att logiken är enkel så behöver vi tydliggöra exakt vad som händer för oss själva för att vi skall kunna tala om detta för datorn. Den första tekniken vi skall använda är pseudokod, vilket innebär att vi i punktform berättar exakt vad som skall hända.

  • beräkna saldot
  • fråga efter uttagets storlek
  • om uttaget är mindre än eller lika stort som saldot
    • godkänn uttaget, skriv till fil
  • annars
    • meddela användaren att uttag ej medges

5.1.2 Aktivitetsdiagram

Aktivitetsdiagram är en annan teknik för att tydliggöra lösningen på den givna uppgiften.

aktivitetsdiagram

5.1.3 Koden

Att skapa koden utifrån pseudokod och/eller aktivitetsdiagram blir nu ganska enkelt.

kod

Här görs en koll ifall uttaget är större än saldot, om så inte är fallet så registreras inget uttag utan sidan laddas om med ett meddelande om att uttaget inte kan göras.

5.2 Lägga till tid för transaktion

Listan över transaktioner ser inte så snygg ut. Jag skulle vilja lägga upp denna som en tabell och dessutom lagra information om vilken tid som en transaktion är gjord.

Hjälp [klicka för att visa]

  • Tabellen byggs upp med html-kod.
  • Det finns en funktion som heter date() i php som används för att jobba med datum och tid.
  • För att lagra både transaktion och datum i filen så rekommenderar jag att vi använder oss av en delimiter, detta har vi tidigare kikat på i moment04.

Hjälp [klicka för att visa]

Vi börjar med att lägga till tid och datum till de transaktioner som lagras till filen.

kod

Nu behöver vi göra samma ändring när vi skapar den fil som skapas om inte fil finns. Vi kommer i nästa avsnitt skapa en funktion för detta men just nu så gör vi bara en mindre ändring.

kod

Ta nu bort kontot och kolla att filen transactions.txt ser ut som du vill. Om själva applikationen ger några felmeddelanden så kan du strunta i detta, det löser sig när vi jobbar vidare.

Nu när vi har lagrat tiden för våra transaktioner i filen så behöver vi hämta dem därifrån och förbereda dem för utskrift. Detta gör vi samtidigt som vi bygger upp vår tabell. I tabellen vill jag ha fyra kolumner, först en med en siffra som räknar antalet rader, sedan transaktionen, datumet och slutligen saldot efter varje transaktion. Tabellen skapar vi där vi idag beräknar saldot då vi redan har en loop som går igenom alla transaktioner.

kod

Error: Notice: Undefined offset beror på att när vi läser in raden från filen använder oss av funktionen intval() vilken gör om den inlästa raden till ett heltal. PHP-tolken borde ha flaggat att den nya raden inte kan omvandlas till ett heltal men istället försöker PHP-tolken göra det och anser sig ha lyckats när 1000|2018-04-17 14:16:59 görs om till talet 1000 när allt efter | tas bort.

Vi löser detta genom att ta bort funktionen intval() från inläsningen från filen. OBS: Ta bort funktionen men inte innehållet i funktionen, alltså skall koden $temp = intval(fgets($file)); istället se ut så här: $temp = fgets($file);.

Vi formaterar tabellen när vi ändå håller på så att den blir lite snyggare.

kod

CSS-instruktionerna tror jag inte är så svåra, det är kanske tr:nth-child(odd) som behöver en förklaring och det är en så kallad pseudoklass som i detta fallet formaterar alla udda rader i tabellen.

Nu när vi är klara så ser tabellen ut på följande sätt.

kod

5.4 Avrundning

Som du märker så krävs det att hålla koll på koden, nu är vi inne och petar på flera olika ställen och då underlättar det att koden är välkommenterad och välstrukturerad. Det är också viktigt att hela tiden testa applikationen så att den koden som du skriver av gör det som du förväntar dig. Eventuella error du dyker upp behöver fixas till innan du går vidare, det är så sällan att fel i programmeringskoden självläker.

När du vet att det fungerar så ta några minuter att gå igenom och snygga till koden om det behövs. Skapa sedan en kopia av denna fil, döp den gärna till bank_5.php så vet du att du har en fungerande version efter avsnitt 5 i min tutorial.

Sedan går du vidare till avsnitt 6.

6. Använda funktioner

I stort sett så har vi löst uppgiften och vi har för tillfället inga buggar som vi vet om (vi har iof inte testat applikationen stenhårt). Det är dock viktigt att förstå och kunna använda funktioner i denna kursen så jag tänker att vi skall skapa tre funktioner som hjälper oss att få ordning på koden. En anledning att skapa funktioner märkte vi i tidigare avsnitt då vi ville ändra innehållet i vår transaktionsfil och behövde göra detta på två ställen. Risken är stor att vi inte ändrar saker på samma sätt på bägge ställen vilket kommer skapa problem. Vi har flera saker som görs vid flera tillfällen, ladda om sidan, skriva till fil och formatera våra belopp på samma sätt.

6.1 reload()

Vi börjar med den funktionen som laddar om sidan, här behöver vi skicka med ett meddelande som kan skrivas ut på sidan.

Hjälp [klicka för att visa]

  • Funktionen skall ha en inparameter och sedan anropa header('location:') med meddelandet. Just nu så anropar vi bank.php eller ?
  • Fundera på hur du löser meddelande som inte alltid skall skickas.
  • Byt sedan ut alla anrop till header('location') i koden så att de går via funktionen istället.

Hjälp [klicka för att visa]

Funktionen ser ut på följande sätt

kod

Tre anrop finns som behöver ställas om så att de går via funktionen reload().

kod kod

Testa och se att det fungerar innan du går vidare.

6.2 formatAmount()

Alla belopp kan visas upp på ett bättre sätt, jag kanske vill ha med decimaler, kr efter beloppet eller så vill jag rödmarkera negativa tal för att göra det ännu tydligare. Det finns för tillfället tre ställen där belopp visas upp, saldo, belopp och saldo i tabellen. För att inte behöva göra samma formatering på tre olika ställen så skapar jag en funktion för detta.

Hjälp [klicka för att visa]

Skapa en funktion som tar ett tal som inparameter och sedan formaterar det enligt reglerna ovan och sedan skriver ut det på rätt sätt.

Hjälp [klicka för att visa]

Vi börjar med att skapa funktionen, som jag hade svårt att hitta ett bra namn på så den fick heta formatAmount, där vi använder oss av en inbyggd funktion som heter number_format().

kod

För att det skall fungera så behöver vi lägga till klassen negative i vår css. Vi formaterar den på samma sätt som vårt meddelande.

kod

Ändra sedan utskriften av alla tal så att de går via funktionen.

kod kod

Testar du så kommer några tal visas snyggt men om du gör flera insättningar och uttag så kommer du se att de skapas flera tomma rader i transaktionsfilen och att vi får ett error i koden.

kod

Det är PHP-tolken som stökar då den gissar att -700 är en sträng när den behöver vara ett tal. Detta löser vi i nästa avsnitt.

6.3 transaction()

Vi skriver till filen vid två olika tillfällen, dels när filen skapas och även när vi gör en insättning eller ett uttag. Eftersom det är något vi gör flera gånger så kan det finnas anledning att göra detta i en funktion. Vi väljer att göra det för då kan vi också kika på en global array som heter $GLOBALS och som kan vara användbar.

Hjälp [klicka för att visa]

Flytta funktionaliteten för att skriva till transaktionsfilen till en egen funktion. Här kan det vara värt att kika på den stora hjälpen för jag visar hur $GLOBALS används, vilket är en smidig lösning i just detta fallet.

OBS: Bara för att $GLOBALS finns och går att använda så är det inte att rekommendera att skapa globala variabler i onödan. Dessa skall bara användas när de uppenbart är smidigare att använda.

Hjälp [klicka för att visa]

Vi skapar funktionen transaction() och här behöver vi ta ett beslut och det rör filnamnet. Vi kan göra på flera sätt;

  • Skriva filnamnet inne i funktionen (hårdkodat) med risken att samma filnamn finns två gånger (både vid läsning och skrivning)
  • Att skicka med filnamnet till funktionen, enkelt gjort då det bara är att skapa en parameter till.
  • Skapa en global variabel som nås i hela programmet och i alla funktioner.

Vi väljer det sista alternativet och behöver då ändra variabelnamnet som innehåller filens namn.

kod

Byt $filename till $GLOBALS['filename'] genom hela koden.

Dags att skriva funktionen och den ser ut så här;

kod

Kika på rad 31, den koden är skriven med en teknik som kallas shorthanded if och är smidig att skriva men kanske lite svårare att förstå. Förklaringen är;

  • $br = - variabeln $br skall få ett nytt värde.
  • $br ? - $br är uttrycket, det kunde stått $br == true, men det blir ju sant om $br redan är true. Alla uttryck skall ju resultatet true eller false, alltså kan vi använda innehållet $br som redan är true eller false
  • Om $br nu är true så får $br värdet " " annars får det värdet "" (alltså tomt).

Tycker du att detta är väldigt förvirrande så byt rad 31 mot följande fem kodrader.

kod

Nu är det dags att byta ut koden för alla ställen där vi skriver till fil mot ett anrop till funktionen.

kod kod

Helt plötsligt försvinner samtidigt vårt error om att siffror inte fungerar. Antingen så låter vi det vara löst eftersom det inte finns något problem eller så gör vi en extra ändring i koden för att skydda oss mot att det blir problem igen.

Vid inläsningen så lägger vi tillbaka intval() så att vi extra tydligt markerar för PHP-tolken att detta är ett tal.

kod

6.4 Avrundning

Dags att avrunda denna del, som vanligt är det dags att kika genom koden, ta bort eventuellt skräp, snygga till indentering och kommentarer, se till att koden är lagom luftig och inte ger några error.

När du är klar med det så ta en kopia på filen och tydliggör att den fungerar efter del 6.

7. Avslutning av tutorial

Dags att avrunda denna tutorial och det gör vi på samma sätt som du bör avrunda och genomföra en enklare kvalitetskontroll av alla projekt.

7.1 Testa applikationen

Först så måste du genomföra testerna i applikationen. Ju duktigare du är att koda desto säkrare kan du vara på att analysera vad du har ändrat och vad du behöver testa. Är du osäker så behöver testa all funktionalitet. I en mindre applikation är det snabbt gjort att testa allt. När du testar en applikation för sista gången testa då igenom all funktionalitet, du vill ju inte leverera en buggig produkt.

Att skapa ett testschema innan du testar applikationen innebär att sannolikheten att missa något test är mindre. I denna applikation är det viktigt att testa följande händelser;

  • Ta bort transaction.txt och kör applikationen.
  • Gör en insättning.
  • Gör ett uttag som är mindre än saldot.
  • Gör en ny insättning.
  • Gör ett uttag som är större än saldot.
  • Gör ett uttag som är exakt lika stort som saldot.
  • Ta bort kontot.
  • Testa att klicka på knappen utför utan några värde.
  • Testa att klicka på knappen utför med belopp men utan att insättning/uttag är valt.
  • Testa att skriva något annat än siffror, ,, . eller e i beloppsrutan. (I safari går det att skriva andra saker men det går inte att skicka formuläret)

Där är ett bra testschema och om allt går enligt plan så har du ett testprotokoll som du bör använda vid utvärdering av arbetet.

7.2 Gå igenom koden

Snygga till och ta bort alla gamla kodsnuttar som vi har kommenterat bort och alla testutskrifter vi har gjort.

Kolla sedan igenom koden så att den är kommenterad på det sätt som du vill kommentera, se till att strukturen är bra och att det är lagom luftigt. Se till att koden är snyggt indenterad främst vid funktioner, selektioner och iterationer. Utgå från grundregeln öppen måsvinge ökar djupet i koden och stängd måsvinge minskar djupet..

Glöm inte att lägga in CSource som du sedan skall länka redovisningen till.

7.3 Validera html/css

Om du läser webbutveckling01 så ingår det att säkerställa att all html- och css-kod är godkänd, validerad och fungerar. Att göra applikationen responsiv är ju inte negativt. Validering av dessa koder gör du genom att kopiera källkoden som du ser i webbläsaren, alltså slutresultatet. Kopiera inte från din php-fil och gör ändringar.

7.4 Flytt till publik server

När du har en buggfri applikation som du kör på din egen webbserver så behöver du lägga upp applikationen på Bineros server. När du har gjort detta så behöver du testa om hela applikationen i den miljö där uppgiften skall redovisas. Vad extra noggrann med att filen transactions.txt kan skapas. Gör inte det så behöver du kika på rättigheterna i mappen så att PHP får skapa denna fil.

7.5 Inför redovisning

Inför redovisningen så behöver du kika igenom de krav som finns på uppgiften. Genomför dessa och skriv sedan en utvärdering av uppgiften och ditt arbete.

8. Koden för bank.php

Hjälp [klicka för att visa]

kod kod kod kod