729G28 Webbprogrammering och databaser

Projekt del C

Innehåll

• Syfte
• Redovisning
• Förberedelser
• Uppgifter
• Tips till uppgifterna

Del C

Syfte

Projektet bygger nu vidare på den databas ni skapat i del B.

Syftet med denna övning är att hämta ut innehåll från databasen och visa i en enkel hemsida. Hemsidans statiska innehåll skapas med hjälp av HTML och CSS. Det dynamiska innehållet (det som hämtas ur databasen) skapas med hjälp av PHP. PHP används även för att skicka information mellan olika sidor. I övningen ingår också att skydda databasen mot attacker utifrån.

Redovisning

Del C (och D samt den valbara del E) redovisas muntligt och skriftligt, gärna samtidigt. Muntlig demonstration görs för labbassistent på labbtid och skriftlig inlämning görs på Lisam som en zip-fil med namnet projekt_gN.zip där N är ert gruppnummer i Webreg. Ange, i inlämningstexten, adressen till er webbsajt (eller bara vems konto den ligger på). Koden ska hålla god kodstandard (HTML- och CSS-kod ska validera och php-koden ska vara strukturerad, kommenterad och inte innehålla bortkommenterad kod).

Förberedelser

1. Gå igenom W3Schools PHP-tutorial, under rubriken MySQL Database, avsnitten MySQL Connect, MySQL Insert Data, MySQL Prepared samt MySQL Select Data.
2. För denna del av projektet finns programkod att utgå från, ett s.k. programskelett. I detta kommer ni framförallt lägga till PHP-kod, men även en viss del HTML och CSS. Ladda ner programskelettet.
3. Bekanta dig med hur de olika filerna i programskelettet hänger ihop (titta speciellt efter de taggar som tillhör klasserna customHeader och person).

Uppgifter

1. Ändra CSS-koden i "main.css" så att de element som använder klassen customHeader centreras och får bättre färg och de som använder klassen person får bättre utseende eller placering på minst tre olika sätt.
2. Redigera koden som skapar första sidan så att det visas en tabell över alla lag där användaren ska kunna klicka på lagnamnet för att få mer information om det laget (se nedan). Tabellen ska också visa när laget bildades och vem som är lagets ägare. Man ska kunna sortera tabellen på lag, startdatum och ägare genom att klicka i kolumnrubriken. Tips: använd länkar.
3. Skydda din databas från SQL injection. Prepared Statements ska användas varje gång ett SQL-kommando till serversidan innehåller data från klientsidan. Detta gäller även för data som vi själva lagt ut, om det hämtas in via URL-en. (Vad kan annars hända om någon redigerar länken?). Notera dock att Prepared statements bara kan användas för variabler i Where-delen av en SELECT-sats (samt t.ex. INSERT). Order by måste hanteras på annat sätt.
4. Redigera sedan sidan som visar ett specifikt lag så att informationen om laget (ägare och startdatum) visas under lagets namn och sedan en lista över lagets coacher och en lista av spelare. Lagets namn ska här se likadant ut som rubriken på förstasidan genom att använda en passande css-klass. Listan av coacher och listan av spelare ska visa personens namn och länka till en sida med information om den spelaren/coachen (se nedan).
5. Redigera sedan sidan som visar information om den specifika spelaren/coachen. Tips: Du behöver hålla koll på vilken spelare/coach användaren klickade på för att komma till teammember.php, och vilket lag man kom från. Personens namn och personens roll ska visas i övre delen av sidan (jumbotronen), resterande data om personen ska visas nedanför, med textfältet Information först och övrig data som en prydlig lista i valfri ordning.
6. Gör så att brödsmulorna (breadcrumbs) på alla sidor visar korrekt sekvens av sidor och länkar. Ändra i main.css så att de får en bättre färg på sin bakgrund och hamnar direkt under jumbotronen utan marginal.
7. Validera din HTML-kod (i webbläsaren: visa källkoden på de genererade webbsidorna, klipp ut koden och klistra in i validatorn på denna sida) .
8. Validera också din CSS-kod här.

Tips till uppgifterna i Del C:

Hämta från databasen med hjälp av PHP:

<?php
/* öppnar en anslutning till databasen och sparar till variabeln "$con" */ 
$con = new mysqli("url_to_host", "my_username", "my_password",
"database_name");

/* Testar att anslutningen fungerar */  
if (mysqli_connect_errno()) { 
    echo "Anslutning misslyckades: " . mysqli_connect_error();  
}
/* Lagrar ett query i variabeln "$query".
   Använder sedan anslutningen "$con" för att köra "$query"
   och sparar resultatet i variabeln "$result" */
$query = "SELECT * FROM `Team`";
$result = $con->query($query); 

/* Testar först om resultatet är större än 0 (om det finns ett resultat),
   går sedan igenom resultatet rad för rad och skriver ut värdet
   från kolumnen "Teamname" för varje rad som hittas */ 
if ($result->num_rows > 0) { 
    while ($row = $result->fetch_assoc()) {
        echo $row['Teamname'];
    }  
} else { 
    echo 'Hittade inga resultat';
} 
/* Stäng anslutningen så den kan användas igen till nästa query */ 
$con->close(); 
?>

Exempel på breadcrumbs

Tas upp på föreläsning 2 om webprogrammering, se föreläsningsbilderna (schemasidan).

Felsökning php

Ett annat sätt att felsöka sin php-kod när man bara inte ser vad som är fel, är att validera den med PHPCodeChecker.

Sidansvarig: Eva Ragnemalm
Senast uppdaterad: 2023-10-25