Laboration 1 Översikt 1. Att komma igång med laborationsmiljön a. installera Aptana Studio 3 b. Installera EasyPHP 2. Testa lite programmering a. Testa enkla uppgifter b. Testa automatiskt 3. Skapa inloggningsformulär a. En vy-klass b. Flera filer c. En modell-klass Moment 1. Att komma igång. Målet med moment 1 är att komma igång med laborationsmiljön. Vi skall börja med att installera verktygen (för er som läser på Campus skall detta vara gjort i laborationssalen). Verktyg för utveckling i PHP: Aptana Studio Aptana är en editor som både färgkodar och hjälper oss att hitta fel i vår kod. Installera Aptana Studio 3 Skapa projekt i Aptana Studio 1. När du startar Aptana ber den dig välja ett katalog för att använda som "workspace", välj tex p:\php 2. Skapa ett php-projekt i Aptana kalla det för lab1 Verktyg för utveckling i PHP: EasyPHP Webbserver med PHP och databasserver som är till för att användas lokalt. Det vill säga vi skriver koden och debuggar och testar på samma dator. Installation av EasyPHP 1. Ladda ner från http://www.easyphp.org/ Jag använder Release 5.3.4.0 2. Installera EasyPHP Test av EasyPHP 1. Kör igång EasyPHP, en (e) ikon ska dyka upp i nedre högra hörnet. dubbelklicka på den och avläs att webbservern (Apache) och Databasservern MySQL har startat. 2. Högerklicka på ikonen (e) i nedre högra hörnet och välj administration du kommer nu starta en webbläsare och komma till http://127.0.0.1:8888/home/ eller liknande Här kan man administrera sin lokala webbserver och MySQL. Vi ska börja med att skapa en katalog som vi knyter till ett webbalias. 3. Skapa ett nytt webbalias för din katalog 1. Under Alias klicka på "+[add]" 2. Skriv in som alias: lab1 3. Ange sökvägen till din Aptana php projekt katalog P:\php\lab1 (eller annan plats) 4. Skapa ett nytt textdokument (index.php) i katalogen P:\php\lab1 och klistra in följande <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/ xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>my first php document</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" /> </head> <body class=""> <p>current date. : <?php print (Date("l F d, Y"));?></p> </body> </html>
5. Använd en webbläsare för att gå till adressen http://localhost:8888/lab1/ eller http:/ /127.0.0.1:8888/lab1/ märk väl att adressen kan skilja sig mellan olika versioner av easyphp... 6. Om allt fungerar skall du se dagens datum. Moment 2. Programmeringsuppgifter Målet med dagens laboration är att komma igång med programmeringen och komma igenom lite av grundläggande php syntax. PHP är ett enkelt språk som liknar de flesta programmeringsspråk med if, else for, while och variabler. Jag rekommenderar att ni tar en titt på http://www.w3schools.com/php/ där det finns enkel beskrivning av de grundläggande funktionerna. Testdriven programmering Det som kan vara lite krångligt med PHP är att hitta fel, i Aptana finns ingen debugger som vi kanske är vana vid från Visual Studio. I stort sätt måste man förlita sig på felutskrifterna i webbläsaren. Därför ska vi använda en programmeringsstil som gör det möjligt för oss att hitta fel och förstå hur vi skall rätta till dem. Testdriven utveckling betyder att man innan man skriver kod skapar ett test för koden. Testet hjälper oss att avgöra ifall koden fungerar eller inte. Oftast skriver man ett test per klass eller funktion som tas fram, dessa kallas för enhetstester. Det finns ett antal ramverk(exempelvis phpunit) som kör tester men för att göra det enkelt så skapar vi bara en funktion som testar vår kod. Första uppgiften handlar om att skriva test och kod som uppfyller test. Vi börjar med ett enkelt XHTML + PHP dokument som skall visa ifall våra test lyckas eller inte. 1. Ladda ner labb1.zip och lägg filerna i foldern P:\php\lab1 Börja med att köra testet genom att gå med en webbläsare till http:// 127.0.0.1:8888/lab1/index.php, endast matematikbiblioteket skall lyckas Undersök de olika filerna Läs math.php och försök förstå hur jag skapat olika test för funktionerna. 2. Du skall nu själv implementera en funktion (ReverseArray) i array.php som vänder en array baklänges. Din funktion skall fungera för alla arrayer. Läs på http://www.w3schools.com/php/php_arrays.asp om arrayer För att öva er på att skriva kod använder vi inte den färdiga funktionen för att vända arrayer som finns i php utan stega igenom den gamla arrayen baklänges och skapa en ny array från denna. Testa. 3. Du skall även implementera ReturnLastItem i array.php som skall ta en array och returnera sista elementet. Din funktion skall fungera på alla arrayer. Testa. Moment 3. Inloggningsformulär Under ett par laborationer kommer vi arbeta med en modul för inloggning. Den skall kunna generera ett formulär för inloggning, hämta indata(användarnamn och lösenord) från
användaren, kontrollera indata mot databasen och hålla reda på vem som är inloggad. I detta moment av laborationen kommer vi arbeta med den visuella aspekten av inloggningen, det vill säga formuläret och meddelanden som visas för användaren. Så något som nedan har jag tänkt mig: Bild. - Inloggningsruta med felutskrift och en text som visar att vi inte är inloggade ännu Mål och avgränsningar Första uppgiften kommer involvera ett formulär för inloggning som skall innehålla: Inmatning av användarnamn Inmatning av lösenord Kom ihåg mig checkbox ( Håll mig inloggad ) Fält för meddelande av typen "fel användarnamn eller lösenord" Submit knapp Vi skriver objektorienterad kod! Vi kommer bygga vidare på detta senare så kommentera koden! Vår första fil index.php Skapa en ny katalog till vår inloggningsmodul (lab1/login) Skapa sedan en ny fil i ditt projekt vid namn index.php Börja skriv en ren XHTML sida som följer XHTML-strict. I början av index.php (alltså inga tecken innan) sätter du en php starttagg (<? php ) initierar de två variablerna $title och $body till något och sätter sedan en sluttag?>. Ändra sedan i XHTML koden så att värdena i $title och $body skrivs ut på rätt ställen. Om du är osäker så titta på Examples/3_variables.php där något liknande finns... Testa genom att gå in på index.php. Vår första klass Klassen LoginView skall användas för att generera XHTML för ett inloggningsformulär och sedan även för att hantera indata från användaren. Skapa en ny fil LoginView.php Titta på klassen i \Examples\8.3_ColorView.php för exempel på på hur man skriver en klass som har funktioner som returnerar HTML i strängar... busenkelt! Skapa en klass som heter LoginView som har en funktion "DoLoginBox". DoLoginBox skall returnerna en sträng med XHTML. Så returnera bara en ren XHTML-strict sträng för ett inloggningsformulär.
I index.php kan du sedan skapa en instans av LoginView och anropa DoLoginBox på den. Ta emot det DoLoginBox returnerar och lägg det i $body. Testa genom att titta på index.php (du bör nu se ett inloggningsformulär). Skapa sedan en ny funktion i LoginView.php som heter DoLogoutBox som bara returnernar XHTML för en knapp ( "Logga ut" ). I index.php kan du testa din kod genom att anropa även DoLogoutBox och lägga till resultatet på $body strängen med hjälp utav punkt-operatorn. Testa genom att titta på index.php (du bör nu se ett inloggningsformulär OCH en utloggningsknapp). Att hantera indata Vi behöver nu hantera indata som knapptryckningar och användarnamn och lösenord som användaren skickar till oss. Titta på klassen i \Examples\8.2_FormColorView.php för exempel på på hur man skriver en klass som har funktioner som tar emot indata i $_GET Lägg till tre funktioner till klassen LoginView för att ta emot indata från formuläret. Kan vara bra att använda den superglobala arrayen $_GET från början för att lättare hitta fel. GetUserName() returnerar en sträng med det som användaren skrivit i användarnamnsfältet eller NULL ifall användaren inte fyllt i något där. GetPassword() returnerar en sträng med det som användaren skrivit i lösenordsfältet eller NULL ifall användaren inte fyllt i något där. TriedToLogIn() returnerar true om användaren har klickat på Login-knappen eller false ifall han inte gjort det. Testa de tre funktionerna genom att lägga till följande i index.php $lw är vår instans av LoginView if ($lw->triedtologin() ) { $body.= "Användaren har klickat på Login med användarnamn "; $body.= $lw->getusername(). " och lösenord ". $lw->getpassword(); } else { $body.= "Användaren har inte klickat på Loginknappen"; } Skapa en liknande funktion TriedToLogOut som kontrollerar ifall knappen Logout har klickats. Testa även detta i index.php med liknande test, klicka och fyll i uppgifterna Vad har vi gjort och hur ska vi gå vidare? Vi har nu en ganska komplett implementation av den delen av applikationen som vi kallar vy(view) som vars uppgift är att kommunicera med användaren. All kommunikation i vår variant av MVC går igenom en vy. Vi har även testat den delen genom manuellt test i index.php Det vi saknar är något sätt att hålla reda på om användarnamn och lösenord stämmer överens med existerande användare samt hålla koll på om någon är inloggad och vem. Vi saknar även en kontroll över hur användningsfallet "inloggning" går till. I nästa laboration kommer vi skapa en kontroller för inloggning. Denna kontroller har hand om användningsfallet inloggning. Vi kommer dock behöva skapa en modell -klass först, för att stödja kontrollern och som kan innehålla de regler vi vill ha. (Exempelvis: man blir bara inloggad om man ger rätt lösenord till rätt användarnamn).
Men för att förstå hur vår modell-klass bör fungera ska vi fundera lite kring hur användningsfallet fungerar. Klassen LoginController OBS Läs igenom hela stycket innan du börjar arbeta!!!! Klassen LoginController skall implementera följande flöde. Detta kommer du dock implementera i labb 2 men för att förstå hur det är tänkt att fungera så går vi igenom flödet redan nu. Märk väl att du SKALL implementera LoginHandler som kommer nedan i den här labben... Inloggning/Utloggning av användare Om användaren redan är inloggad? Har användaren klickat på Logoutknappen? 1. Logga ut användaren 2. Ge meddelande ex. "Du är utloggad" Om användaren inte är inloggad? Har användaren klickat på Login? Stämmer uppgifterna? 1. Logga in 2. Ge meddelande ex. "Du är inloggad" Stämmer inte uppgifterna? Ge meddelande ex. "Fel användarnamn eller lösenord" Är användaren nu inloggad? Visa Utloggningsruta Visa meddelanden Är användaren inte inloggad Visa Inloggningsruta Visa meddelanden Klassen LoginController implementeras i Laboration 2. Som du ser behöver vi tre funktioner för att bygga vår kontroller som vi inte redan har: 1. Funktion för att veta om någon är inloggad 2. Funktion för att logga in 3. Funktion för att logga ut Dessa tre funktioner placerar vi lämpligen i en egen klass LoginHandler Klassen LoginHandler OBS Läs igenom hela stycket innan du börjar arbeta!!!! Vi skall nu skriva kod för att hjälpa till att logga in en användare. Vi kommer inte använda oss av en databas utan istället använda hårdkodade användare, dvs jämföra indata mot en lista av användare och lösenord. Lägg märke till att du inte behöver implementera LoginController för inloggning utan vi nöjer oss med att skapa tre funktioner som kommer hjälpa oss nästa laboration. Vi kommer testa dessa med hjälp utav ett automatiskt enhetstest. OBS Märk väl att testet SKALL skrivas först! Skapa en ny fil LoginHandler.php och skapa en klass LoginHandler i den 1. Skapa funktionsprototyper för de tre funktionerna. En funktionsprototyp ser ut så här: //Funktion för hantering av någonting //returnerar true om det lyckas annars false.
public function DoSomething($parameter) { return false; } Det vill säga den: är en tom funktion med parametrar och kommentarer som berättar hur funktionen skall fungera har ett returvärde som sätts till ett testvärde (oftast negativt värde exempelvis false, NULL, "not implemented". Ibland kör jag bara raden throw new Exception( not implemented ); är bra för att man kan då implementera och köra kod som använder funktionen innan man implementerar själva funktionen. I vårt fall vill vi skriva ett test först. Nu är det dags att skriva de tre funktionsprototyperna En funktion IsLoggedIn() som kollar att en användare är inloggad, denna kan sedan användas för att avgöra ifall en användare får se information eller inte. IsLoggedIn Returnerar true ifall vi är inloggade annars false. En funktion DoLogin för att logga in som tar två parametrar namn och lösenord. Returnerar true ifall inloggningen lyckas annars false Funktionen DoLogout för att logga ut. Inga parametrar och inget returvärde (utloggning kan inte misslyckas) 2. Skriv ett test för de tre funktionerna. Testet skall returnera true eller false beroende på om implementationen är riktig. Från början måste testet returnera false eftersom vi inte har en implementation utan bara funktionsprototyper. 1. Vi testar precis som i moment 1. Så skapa en funktion Test() i klassen LoginHandler. 2. Börja med att försätta oss i ett utloggat tillstånd genom att anropa DoLogout. Det är viktigt att veta vilket tillstånd vi är i under hela testet. 3. Vi kan då testa IsLoggedIn som borde returnera false annars är implementationen av DoLogout eller IsLoggedIn false. Returnerar IsLoggedIn true skriver vi ut ett felmeddelande och avslutar testfunktionen med return false; 4. Anropa sedan DoLogin med felaktiga uppgifter. Returnerar DoLogin true skriver vi ut ett felmeddelande och avslutar testfunktionen med return false; 5. Anropa sedan DoLogin med rätta uppgifter. Returnerar DoLogin false skriver vi ut ett felmeddelande och avslutar testfunktionen med return false; 6. Vi bör nu vara inloggade det kontrollerar vi genom att anropa IsLoggedIn igen Returnerar IsLoggedIn false skriver vi ut ett felmeddelande och avslutar testfunktionen med return false; 7. Testa DoLogout igen för att logga ut... 8. Testa även DoLogin med rätt användarnamn och fel lösenord 9. Kör testerna nu bör nu testerna misslyckas eftersom vi inte har fyllt i funktionerna som testet använder. 3. Skriv innehållet i funktionerna Senare skall vi validera användarnamn och lösenord mot en databas men just nu räcker det med att jämföra med en switch sats och 2-3 olika hårdkodade användare. För att bedöma om en användare är inloggad eller inte skall sessioner användas. Läs om sessioner här: http://www.w3schools.com/php/php_sessions.asp Testa funktionaliteten genom att köra testet.
Nu är det dags att förbereda för redovisning av koden för laborationshandledaren. Rensa upp i koden, plocka bort bortkommenterad kod och lägg till kommentarer Tänk på indentering! Se till att all kod kan köras och visas helt utan manuella ändringar i koden. Byt namn på dåligt valda variabler till "talande" variabelnamn. Distansstudenter mailar in kod och eventuella svar på frågor innan kontakt via connect. Märk väl att ni inte är godkända utan ett fungerande automatiskt test för LoginHandler och ett manuellt test för LoginView. I nästa laboration skall vi skriva vår Controller...