Tutorial: Bankapplikationen

Bankapplikationen, projekt01

1. Introduktion

Detta är en tutorial för att lösa projekt01 i kursen Programmering01. 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 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.

Jag kommer lösa den uppgift som finns här och jag kommer lösa den på det sätt och i den ordning som jag själv hade löst uppgiften. Den kod som jag skriver är fri för dig att använda, ibland visar jag koden helt öppet och ibland så får du klicka på den blåa rubriken för att kika på koden. Försök gärna på egen hand att lösa den lilla biten som vi just nu jobbar med innan du kikar. Det är inte fel att kika men du lär dig mer genom att först testa själv. Vill du lösa vissa delar på egen hand så gör det, får du problem senare så går det att rätta till.

Innan vi kör så se till att du har läst igenom uppgiften som vi skall arbeta med.

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. Vi kommer senare kika på två tekniker för att bryta ner programmeringsproblem och lösa dessa men nu fokuserar vi på den större bilden och hur vi skall attackera hela applikationen.

2.1 Grundkrav på applikationen

Följande grundkrav finns på applikationen, dessa är hämtade från 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. Du skall visa med pseudokod och/eller aktivitetsdiagram hur du har löst detta.
    Rita detta i draw.io.
  • 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.

2.2 Planering

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.3 Skissa applikationen

Eftersom detta är en uppgift som görs i kursen programmering01 så ligger inte fokus på html/css men det finns ett kunskapskrav där du väljer ett uttryckssätt som interagerar med användaren och därför ä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.

[Klicka här för att visa min skiss]

Skiss på applikationen

Detta är en enkel skiss och jag tror egentligen att den behöver förklaras så noggrant. Jag tänker skapa två rutor där den ena innehåller saldo och formuläret, medan den andra innehåller transaktionerna. Troligtvis kommer transaktionslistan sedan bli en tabell och det är inte säkert att formuläret kommer använda sig av radio buttons men detta är en startpunkt som vi kan utgå ifrån.

2.4 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 programmering01 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.

[Klicka här för att visa mina färdiga filer]

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

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

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

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.

[Klicka här för att få kodhjälp]

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.

[Klicka här för att få mer kodhjälp]

Skiss på applikationen

När du är klara, 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.

[Klicka här för att få kodhjälp]

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.

[Klicka här för att få mer kodhjälp]

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.

4.1 Lagra transaktionerna i en array

Vi har i tidigare övningar lärt oss att läsa in en fils innehåll till en array. Detta är ett lämpligt sätt att göra nu för då kommer vi kunna ha vår array tillgänglig för användning i hela applikationen. Vi skall inte bara lista alla transaktioner utan vi kommer också behöva beräkna saldo och kanske något annat också.

[Klicka här för att få kodhjälp]

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.

[Klicka här för att få mer kodhjälp]

Kodhjälp Kodhjälp

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.

[Klicka här för att få kodhjälp]

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.

[Klicka här för att få mer kodhjälp]

Kodhjälp Kodhjälp Kodhjälp 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. Atom gör det t.ex. automatiskt så denna koll kan vara bra att göra ändå.

[Klicka här för att få kodhjälp]

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

[Klicka här för att få mer kodhjälp]

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.

Kodexempel

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.

[Klicka här för att få kodhjälp]

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.

[Klicka här för att få mer kodhjälp]

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().

[Klicka här för att få kodhjälp]

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.

[Klicka här för att få mer kodhjälp]

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

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

[Klicka här för att få kodhjälp]

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.

[Klicka här för att få mer kodhjälp]

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.

[Klicka här för att få kodhjälp]

  • 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 moment05.

[Klicka här för att få mer kodhjälp]

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

Utskrift i applikationen

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.

[Klicka här för att få kodhjälp]

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

[Klicka här för att få mer kodhjälp]

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.

[Klicka här för att få kodhjälp]

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.

[Klicka här för att få mer kodhjälp]

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.

Bild på sidan

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.

[Klicka här för att få kodhjälp]

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ända, 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.

[Klicka här för att få mer kodhjälp]

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.