Forløb: it-system med database

I denne øvelse skal i skabe et it-system, som gør det muligt at oprette og tilmelde sig LAN parties på skolen. I skal altså lave det HTML og PHP der er nødvendigt for at tilmelde sig og gemme tilmeldinger i en database. Men i skal også lave det interaktionsdesign, som skal gøre det til en god og brugervenlig oplevelse.

Forberedelse:

Brackets

FTP klient – her Cyberduck

Server med adgang til database – her bruger vi phpmyadmin. Slå op på jeres server efterfulgt af /phpmyadmin

Læs: Kapitel om modellering af databaser

Se også database øvelse med kageopskrifter her

Lektion 1 + 2 Database: Analyse og modellering

Lektion 3: Interaktionsdesign 1

Som i kan fornemme, er vi langsomt i gang med at forestille os et system, som ikke findes endnu. Jo mere præcise vi kan være omkring vores idéer og modeller, desto større chance er der for at skabe et inspirerende, brugbart og brugervenligt produkt. I systemets interaktionsdesign beskæftiger vi os helt konkret med hvordan systemet skal opbygges og se ud.

  • Det første i skal gøre, er at lave et strukturdiagram. En lille hierarkisk oversigt over systemets sider eller menupunkter. Brug et valgfrit værktøj, eller skriv direkte i logbogen. Læs mere her:
    Strukturdiagram
  • Dernæst skal i lave nogle flowdiagrammer for nogle af de centrale brugsmønstre i systemet. Læs mere om Flowcharts nedenfor, og find linket til skabelonen eller brug et program efter eget valg. Vælg efterfølgende mindst to scenarier fra listen:
    Flowcharts
    • Login/opret bruger
    • Opret LAN med turneringer
    • Tilmeld hold til turneringer (enten som deltager funktion før LAN partiet afholdes, eller som admin funktion under LAN partiet)
    • Tilmeld til LAN (inklusive evt mails og info)

Lektion 4: PHPmyadmin

Vi skal nu til at implementere vores it-systems database. Vi ved at it-processer foregår iterativt og behøver derfor ikke implementere hele systemet på en gang. I første omgang opretter vi derfor en database, som kan håndtere følgende kravspecifikation:

  1. Man kan oprette en bruger og logge sig ind
    • Vi laver foreløbig to roller: deltager og administrator
    • Som udgangspunkt får man rollen deltager
    • Man kan se hvilke roller man har
    • Vi sætter os selv som administratorer direkte i databasen
  2. Alle kan tilmelde sig et LAN
    • Man kan vælge LAN i en liste med kommende begivenheder
    • Man kan derefter trykke tilmeld
    • Når man har tilmeldt sig, kan man afmelde sig igen
  3. Administratorer kan tilføje nye LAN begivenheder
    • Brugere med rollen deltager kan ikke tilføje nye begivenheder
  4. Lad os lave følgende tabeller:
    • Person (id, fornavn, efternavn, adresse, email, telefon, brugernavn, password, salt)
    • Rolle (id, rolle)
    • Person_Rolle (id, person_id, rolle_id)
    • Begivenhed (id, titel, dato, pladser, adresse (null), starttidspunkt (null), sluttidspunkt (null), beskrivelse (null))
    • Person_Begivenhed (id, person_id, begivenhed_id)
  5. PHPMYadmin – oprette tabeller ud fra E/R diagram og E/A skitser
  6. Relationer og Fremmednøgler

Lektion 5+6+7: Implementering 1

Hent filerne til grundskabelonen her

  • Gennemgang af filerne(!)
  • Oprette forbindelse i skabelonen
  • Løse opgaver med at få de forskellige forms til at snakke med databasen. Se nedenfor

Opgaver

På de sider i har downloadet, har i et lille system der fungerer – sådan næsten da. Det er jeres opgave at få alle siderne til at spille sammen, og dermed færdiggøre en fuldt funktionel tilmeldingsformular til LAN parties.

Opgaverne kan angå alle de teknologier der er i spil: html, styles, php eller javascript. Nogengange skal i selv finde ud af hvordan, andre gange er det specificeret i opgaven. Men opgaverne skal allesammen kunne løses indenfor disse rammer.

I Plenum…

Forudsætningen for at vi kan arbejde med databasens tabeller er, at tabellerne eksisterer.Så.. Gå ind på denne URL: http://ditbugernavn.it.slotshaven.dk/phpmyadmin/. PHPMyadmin er et interface til den database der ligger på din server. Opret de tabeller vi i første omgang tager med. Med disse tabeller kan vi foreløbig oprette nye LAN parties og vise dem i en liste etc.

Download og udpak skabelonen og læg den op på jeres egen server, med den titel på mappen i synes er passende.

Det næste i skal gøre, er at få oprettet forbindelse til den rigtige database i PHP. Alt det som har med selve forbindelsen at gøre, sker i filen connect.php. Gå ind i filen med FTP og sæt de rigtige parametre op til jeres egen database. Når der er forbindelse til Databasen vil det stå i statusmeddelelsen øverst på siden.

Nu er der en række problemer som gør at vi ikke kan logge ind. Det skyldes at der er en masse felter i databasen, som skabelonen ikke tager højde for. Og de må IKKE være null.

Vi løser dem i fællesskab ét for ét…

Huskeliste:

  • Opret et par rollenavne i databasen.
  • Tjek at felterne fornavn efternavn adresse email telefon brugernavn password salt alder køn, er implementeret og bliver tjekket, strippet, og skrevet til databasen.
  • Når du kan logge ind – så se om du kan lave dig selv om til en admin bruger ved at skrive rolle/person id’et direkte i Person_Rolle tabellen.

Individuelle opgaver

  • Opret så nogle LAN parties på siden “Tilføj” – og tjek at de også dukker op på listen. Prøv at oprette begivenheder med datoer både før og efter i dag. Der er et par problemer her, som i måske selv kan finde ud af at løse
    • For det første viser listen både kommende og tidligere LAN parties. Se om i kan lave noget PHP som sørger for at dele listen op i afholdte og kommende LAN parties.
    • For det andet gemmes beskrivelser ikke lige nu. Der skal altså oprettes et felt til i tabellen (PHPMyadmin) og skrives noget PHP som sørger for at beskrivelser gemmes – og eventuelt vises på siden der oplister LAN parties. Se hvor langt i kan nå.

Tilmeldinger

Sværere/frie opgaver

  • Implementér en mailfunktion som bekræfter tilmelding
  • Lav en skitse i p5.js så man kan reservere hele borde ved at klikke på dem og skrive 8 navne

Lektion X: Sikkerhed og GDPR

Nu har i en database og en tilmeldingsformular. Og det vil faktisk sige, at i er begyndt at hælde persondata i en database. Sådan nogle kan være følsomme – for eksempel e-mail adresser og navn koblet med interesser, alder, demografi osv. Derfor skal i lære noget om sikkerhed.

Se bl.a indlæg om GDPR her

Lektion XX: Udseende

 

 

Og måske…

            $rolleQuery = 
                "select rolle from Rolle ".
                    "left join Person_Rolle on Person_Rolle.rolle_id = Rolle.id ".
                    "left join Person on Person.id = Person_Rolle.person_id ".
                    "where Person.id = " . $row['id']. 
                     " GROUP BY Rolle.id";

 

Leave a comment

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *