Göm menyn

729G28 Webbprogrammering och databaser

Projekt del C


Innehåll

Del C

Syfte

Syftet med denna övning är att hämta ut innehåll från databasen och visa på en websajt. Sajtens 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.

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

Redovisning

Del C redovisas muntligt och skriftligt. Muntlig demonstration görs för labbassistent på labbtid och skriftlig inlämning görs samtidigt som del D, på Lisam som en zip-fil. Det är okej att redovisa både del C och del D muntligt samtidigt.

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 er med hur de olika filerna i programskelettet hänger ihop (titta speciellt efter de taggar som tillhör klasserna customHeader och person, samt på filen connectdb.php).

Uppgifter

Notera att så mycket bearbetning av data som möjligt ska göras med databashanteraren (t.ex. urval och sortering). Det är heller inte tillåtet att använda javascript för att manipulera data, t.ex. sortera eller presentera det, det ska göras i SQL, php och HTML.
  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 och de data vi har om lagen. Här ska användaren kunna klicka på lagnamnet för att få mer information om det laget (se nedan). Man ska också kunna sortera tabellen på lag, startdatum och ägare genom att klicka i kolumnrubriken. Tips: använd länkar och tänk på att den nya sidan behöver veta vilket lag användaren klickade på.
  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 visst lag så att informationen om laget (ägare och startdatum) visas under lagets namn och under det en lista över lagets coacher och en lista av lagets nuvarande 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). Om laget inte har några spelare eller coacher ska listan inte bara vara tom utan någon text visas. Tips: Du behöver hålla koll på både laget och personen som användaren klickade på!
  5. Redigera sedan sidan som visar information om den specifika spelaren/coachen. Personens namn och personens roll (spelare/coach) 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 finns om personen som en prydlig lista i valfri ordning. Om något datafält är tomt ska motsvarnde rubrik inte visas. Notera att för debutlag, tidigare lag och nuvarande lag ska laget namn visas och om det finns flera ska alla visas.
  6. Gör så att brödsmulorna (breadcrumbs) på alla sidor visar korrekt sekvens av sidor och länkar. Ge dem en bättre färg på sin bakgrund och se till att de 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).


Sidansvarig: Eva Ragnemalm
Senast uppdaterad: 2025-09-17