Laboration 01

Introduktion

I denna första laboration är det tanken att du ska komma igång med grundläggande PHP-programmering. Vi kommer koncentrera oss mycket vid formulärhantering för att kunna skriva en enkel dynamisk webbapplikation. Målet med laborationen är att du ska få en första introduktion till PHP-programmering, hur en dynamisk webbapplikation fungerar och en grund för att senare kunna förstå hur man arbetar med WordPress.

Laborationerna är individuella men diskutera gärna lösningar med klasskompisar. När du redovisar ska du kunna svara på frågor kring din kod och lösning för att bevisa att du förstår din kod.

Observera att du är själv ansvarig för att ta backup på din egen kod. I Cloud9 kan du välja “File” -> “Download project”.

Förberedelse – Komma igång med din utvecklingsmiljö

Börja med att se till att du har en fungerande utvecklingsmiljö där du kan köra PHP-script. Se utvecklingsverktyg. Denna handledning kommer förespråka att du använder cloud9 och utgår från den utvecklingsmiljön.

Innan du börjar med laborationen bör du dessutom ha förståelse för följande:

  • Hur du använder PHP för att skriva ut korrekt HTML
  • Hur HTML-formulär fungerar tillsammans med PHP
  • $_POST- och $_GET-variabeln
  • if-satser i PHP
  • for-loopar i PHP
  • Logiska uttryck och operatorer
1. Skapa ett PHP-projekt på cloud9
2. Börja med att logga in på cloud9 – Om du inte redan har ett konto så får du registrera dig där.
3. Välj att skapa ett nytt “Workspace” så som visades på föreläsningen
Välj att skapa ett projekt av typen “PHP”. (Senare när vi ska köra igång med WordPress skapar vi ett projekt av den typen). Namnge ditt workspace på ett lämpligt sätt.
När din “workspace” är klar (kan ta några minuter – bland får man ladda om sidan om den fastnat) bör du se följande:
Öppna filen “hello-world.php” och följ de kommentarer som står skrivna där för hur man startar en php-applikation.

Ge möjlighet att se felmeddelande

Som standardinställning har cloud9 en inställning så att man inte får någon hjälp ifall man kodat fel i sin php-kod. För att få denna hjälp behöver man överst i sin php-fil skriva

error_reporting(E_ALL & ~E_WARNING);
ini_set(‘display_errors’, 1);
Lägg nu till php-raden:
echo date(“Y-m-d H:i:s”); 
Testa nu sidan igen. Du bör då se en tidsstämpel. Uppdatera gärna sidan flera gånger för att se att klockan uppdateras.
Observera vad tiden är. Stämmer det med vad klockan är just nu?
Fundera på varför inte!?

Uppgift 01 – Första PHP-sidan

Vi börjar enkelt. Skapa nu en php-sida där du skriver in ett korrekt validerat HTML-dokument (med html, head, title, body o.s.v.)

1.1 Se till att skriva ut tidsstämpeln (se ovan) så att den skrivs ut i en h2-tagg.

1.2 Använd en for-loop för att skriva ut raden “Hallå världen!” 10 gånger i en osorterad lista. Observera att resultatet av din PHP-sida ska alltså vara korrekt validerad HTML

1.3 Bygg ut HTML-koden i php-sidan med ett enkelt formulär enligt följande bild:

1.4 Din uppgift blir nu att skriva PHP-kod som gör att det användaren skriver i textrutan skrivs ut 10 gånger. T.ex:

Bör ge följande när du tryckt på knappen:

1.5 Du ska nu bygga ut ditt formulär och också kunna ange hur många gånger meddelandet ska skriva ut:

Bör ge:

1.6  Du har fram till nu använt en for-loop för att lösa uppgiften. Kommentera bort denna och lös utskriften av texten med en while-loop istället.

Uppgift 02 – Spara i en databas

I denna andra uppgift är tanken att Du ska skriva en väldigt enkel bokmärkesspararapplikation som med hjälp av PHP-kod kan spara det användaren skriver i en databas. Koden som sköter databashanteringen kommer du dock få färdig då det faller utanför denna kurs.

I denna uppgift ska din PHP-kod också validera formulärdata. Att validera ett HTML-formulär innebär att du utifrån ett antal regler ser till att användaren bara kan spara det vi vill i databasen. Via din PHP-kod kontrollerar du alltså vad användaren skriver in i HTML-formuläret och ger användaren information vad som är fel om så skulle vara fallet.

Här är en liten film som visar lite på funktionaliteten i denna applikation.

Här följer instruktioner för hur du går till väga för att lösa uppgiften.

Skapa HTML

1. Se till att du gått igenom förberedelsen och har koll på utvecklingsmiljön och att du vet hur du gör för att köra dina PHP-filer.

2. Börja med att skapa en php-fil (förslagsvis laboration01_02.php) och skriv den HTML-kod som behövs för att visa upp formuläret. Strukturera upp HTML-koden och tillämpa någon snygg CSS på formuläret så sidan ser bra ut innan du börjar koda.

Skriva PHP-kod

3.  Då är det dags för PHP-koden. Fundera ut vart du ska placera din kod så att utskriften hamnar rätt i förhållande till HTML-koden. Börja med att infoga: <?php echo “Testar”; ?>
och testkör sidan via webbläsaren för att se att den skriver ut texten och att PHP-koden körs över huvudtaget. Kontrollera också hur HTML-koden som renderas ser ut genom att använda “view source” eller liknande.

4. Det första du bör göra i din kod är att kontrollera om om användaren har tryckt på knappen för att posta sitt formulär. Använd en if-sats för att kolla detta. Skulle detta inte vara fallet ska inget göras utan att ett tomt formulär ska visas (så som det ser ut när man kommer till sidan första gången).

5.  Har användaren tryckt på knappen ska du skriva PHP-kod som kontrollerar om användaren verkligen skrivit något i ALLA textfälten. Du kontrollerar att namn och meddelande inte är en tom sträng. Skulle det visa sig att användaren glömt bort att fylla i något av fältet ska ett lämpligt felmeddelande skrivas ut. DU gör kollen genom att använda endast en if-sats som kollar flera logiska uttryck på samma gång, dvs undersöker om variablerna i $_POST är satta.

6.  Kontrollera vad användaren har skrivit i textfälten genom att spara dessa i var sin variabel t.ex. name, url och description. Exempelvis:

$name = $_POST["name"];

7. Du kan sedan använda dessa tre variabler när du använder koden som sparar ner informationen i databasen.

Om databasen och den kod du får

I en dynamisk webbapplikation finns det oftast en databas i grunden. En databas är en applikation där information kan sparas och sedan, med hjälp av PHP, hämtas upp nästa gång man besöker sidan. Till skillnad från HTML-CSS och JavaScript har man alltså möjlighet att spara det användaren skriver under längre tid. I denna kurs kommer vi inte gå in på hur man modellerar upp databaser och hur man skriver kod mot dessa (för er som är intresserade finns detta i boken). Därför kommer du få en PHP-fil som sköter detta (database.php). Databasen vi kommer använda i denna laboration är en så kallad fildatabas av typen SQLITE3 som förenklar det hela för oss. PHP-scriptet kommer skapa den databasen och ge den namnet db.sql. När vi kommer arbeta med WordPress kommer vi dock använda en annan databashanterare som heter mySQL.

Ladda ner kodfilen här!

För att kunna använda filen database.php måste du inkludera den i din egen fil. Detta gör du genom att lägga in filen i samma mapp som din egen php-fil och högst upp skriva:
require_once “databas.php”;
Detta kommer lägga till all kod som finns i denna fil så att den kan användas från din fil.

För er som kör cloud9 så ska koden fungera som den är. Det är möjligt du får installera stöd för SQLITE3 om du kör en egen server.

Nu kan du börja testa den kod du fått.

Testa nu att skriva
<?php echo save(“LNU”, “http://lnu.se”, “Detta är LNUs startsida”); ?>

Denna raden sparar det namn, url och meddelande som skickas in som parametrar till funktionen save. Du bör alltså byta ut de hårdkodade textsträngarna mot de textsträngar som användaren har skrivit in i sitt formulär.

Skriv nu på något lämpligt ställe i din PHP-fil:
<?php echo read(); ?>

Kör du nu din PHP-fil kommer  alla meddelanden som finns sparade i databasen (i alla fall de 10 senaste) läsas ut. Från början kommer databasen vara tom så du måste köra save-funktionen någon gång först. Studera dock hur HTML:en som spottas ut ser ut. Du kommer behöva komplettera den med lite egen HTML-kod för att få det snyggt.

Försök använda dessa två kodrader för att bygga applikationen så den ser ut som på filmen. Observera att du får fixa till med CSS den HTML som PHP-koden genererar. Kontrollera att din applikation ska bete sig som applikationen i instruktionsvideon samt att din HTML valideras korrekt.

Du är nu klar med uppgifterna för godkänd nivå. Uppgifterna nedan är för er som vill utmana er extra.

Extra plus på uppgiften

Extra 1) Lista ut genom att studera den kod du fått (som hanterar databasen) hur du kan implementera en lösning där det också går att ta bort meddelanden. Du får studera kodfilen du fått och lista ut hur du ska göra detta. Kolla upp variabeln $_GET och hur den används samt hur du använder funktionen delete($id) som finns i databas.php.

Extra 2) Gör en lösning som behåller textfältens värden över varje postback. När man fyller i formulär på webben brukar man ju i allmänhet ha fler textfält. Skulle man då fylla i något felaktigt står de uppgifter man fyllt i kvar så man slipper skriva om dessa . Din uppgift blir att hitta något sätt att implementera detta på formulärets fält. Exempelvis, säg att du inte fyller i alla fält så att valideringen inte går igenom. Då ska användaren slippa fylla i de fält som var ifyllda på nytt utan du fixar i din kod att det användaren skrev är ifyllt från början. Denna uppgift kräver dock att du söker upp viss information själv!

Uppgift 03 – Tabell-loopen (extrauppgift – ej obligatorisk)

I denna uppgift ska du ha två olika inputs-fält där ena anger antal rader och andra antal kolumner i en tabell. Din applikation ska alltså ta två värden från användaren och generera upp en HTML-tabell beroende på vad användaren skriver in.

Tabellen ska kunna ha mellan 1-20 rader och kolumner.

För en mer komplett bild av applikationen studerar du denna FILM.

Krav

Applikationen ska skapa en komplett och valid HTML-tabell hur många rader respektive kolumner användaren anger. Applikationen ska via PHP-kod ge felmeddelanden om användaren inte anger ett heltal mellan 1-20 annars ska ett lämpligt felmeddelande ges.

Tips

För att kontroller om det användaren skrivit verkligen är ett heltal och inte en textsträng eller ett decimaltal används is_numeric

Ett kodexempel ser ut som följer:

if(is_numeric($tal)) {
// $tal innehåller ett tal
}
else {
// $tal innehåller INTE ett tal
}

För att skriva ut HTML-tabellen behöver du nästla två for-loopar. Det vill säga placera en for-loop innanför en annan i pseudokod skulle detta kunna beskrivas som:

- Skriv ut table-taggen
- För varje rad som ska skapas (for-loop)
- -Skriv ut tr-taggen
- -För varje kolumn som ska skapas (for-loop)
- —Skriv ut hela td-taggen med dess innehåll
- -Slut för varje kolumn
- -Avsluta tr-taggen
- Slut för varje rad
- Avsluta tabletaggen

Försök implementera rad för rad enligt ovan i din kod.

Uppgift 04 – Miniräknaren (extrauppgift – ej obligatorisk)

Denna uppgift är frivillig att göra men vi tar noteringar om att du gjort den vilket kan påverka betygsättningen slutbetyget i kursen.

I denna uppgift ska du skriva en webbapplikation i PHP som beter sig som en väldigt enkel miniräknare. Se filmen för hur applikationen ska fungera

Krav

Koden ska delas upp i mindre funktioner (kodblock), en för varje räknesätt exempelvis en funktion för addition, en för subtraktion och så vidare.

Välkommen till CoursePress

en utav Linnéuniversitets lärplattformar. Som inloggad student kan du kommunicera, hålla koll på dina kurser och mycket mer. Du som är gäst kan nå de flesta kurser och dess innehåll utan att logga in.

Läs mer lärplattformar vid Linnéuniversitetet

Studentkonto

För att logga in behöver du ett studentkonto vid Linnéuniversitet.

Läs mer om att hämta ut studentkonto

Inloggning LNU