Projekt 2 Web DB 3. sem Url www.tobiaschristiansen.dk/gypsyland Gruppemedlemmer Christian Skat Kærager Kaspe Bek Rasmussen Tobias Christiansen Sarina Trein Bødker Indholdsfortegnelse Scrum sprint planning 3 Burn Down Chart 5 Design Brief 6 Design Manual 7 Mock Ups 17 Navigationsdiagram 19 User Stories 20 Database Documentation 23 ER-Model 26 Test Cases 27 Fakta Sheet 35 2 SCRUM - Planning sheet 3 SCRUM - SPRINT BACKLOG 4 SCRUM - Burndown chart 5 Design BRIEF Nøgleord som er relevant for jeres brand Hvad skal siden indeholde? underholdning, bohemian, gypsy, roma, musik, stemning, rejsende, varme, livligt • Siden skal indeholde tre forskellige meide kategorier; videoer, musik og billeder • Brugeren skal kunne rate alle medier på siden • På forsiden skal fremgå de mest populære medier fra hver kategori op til 4. • Brugeren skal tydeligt kunne se snittet af bedømmelser for hvert medie • Som bruger skal man kunne sortere medierne efter følgende: nyeste og top ratede • Siden skal være af et DIV-baseret layout • Man skal kunne gå videre til en detalje side for hvert medie, hvor man kan læse en beksrivelse af mediet og have mulighed for at bedømme det. (Det skal være muligt at kommentere på medierne) • Logoet skal fremgå tydeligt Er der noget eksisterende visuelt materiale som skal inkluderes? Logo (følg designmanual mht. designregler for dette). Er der noget visuelt som I holder meget af? Varme farver, mønstrer, billeder, mange farver Siden skal associeres med sigøjner stilen , Er der noget visuelt som I ikke holder af? Kolde farver, 90’er look, kedelige hvide sider, Specifikke krav til navigationen på siden? Flydende overgange. Det skal være visuelt behageligt/afslappende for øjnene at kigge på. Hver kategori sKal have sin egen underside man skal kunne komme tilbage til forsiden man skal kunne se hvilken side man er på 6 DesignMANUAL 7 GYPSY LAND - VOTE FOR YOUR FAVOURITE DESIGN MANUAL 8 LOGO Logoet er en sammensætning af to fonde; Algerian er brugt til den primære tekst “GYPSY LAND” Aparajite er brugt til den sekundære tekst “Vote your Favourite”. Respektafstanden er etableret med udgangspunkt i G’et i “GYPSYLAND”. Fonde Algerian Aparajita Respektafstand Farvenuancer Farvenuancerne i logoet kan variere. Dette afhænger af hvilken baggrundsfarve logoet skal bruges på. Gør brug af farverne så logoet og baggrunden skaber kontrast. 9 MISBRUG AF LOGOS FORM OG OPSÆTNING Logoet må ikke roteres Dimensionerne må ikke ændres i asymetrisk med Xog Y aksen Placeringen af sloganet, må ikke ændres Logoet må ikke gøres gennemsigtigt 10 TYPOGRAFI Algerian er en dekorativ Serif font. Algerian er en font fra 1988 og minder meget om en skrift fra den victorianske tid. Algerian er brugt da den er dekorativ samtidig med at stilen minder om gypsy stilen. (Bruges til overskrifter) Algerian abcdefghijklmnopQRSTUVWXYZÆØÅ 1234567890 Aparajite er en Serif true type hindi font fra 2006. Valget af fonden går på at sigøjnere som vi kender dem idag, i sin tid udvandrede fra Indien. Derfor minder stilen i fonden også om gypsy stilen. (Bruges til underoverskrift) Aparajita Calibri er en simpel sans serif font fra 2004. Vi gør brug af Calibri da den ikke er en serif skrift og derfor er let læselig. Den er ren og tager ikke for meget opmærksomhed. (Bruges til brødtekst) Calibri (regular) AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvW wXxYyZzÆæØøÅå 1234567890 AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvW wXxYyZzÆæØøÅå 1234567890 11 knap IKONER Alle knapper på siden har samme design. Designet er minimalistisk, og let forståeligt. Vi har gjort brug af simple ikoner til alle knapper, da brugeren dermed nemmere kan forstå knappernes funktioner, og sidens brugervenlighed er forøget. Vi har brugt en varm bordeaux farve, da denne ofte optræder i roma danseres mønstret tørklæder og flotte kjoler. I menuen benytter vi os også af ikoner. Det er vigtigt for Gypsy Land at alle ikoner er let forståelige og i samme “familie”. Samtidig vil ikonerne i fremtiden kunne blive brugt til smartphone- og tabletversionerne af hjemmesiden. 12 fARVER #ffffff CMYK 0,0,0,0 RGB 255. 255, 255 Opacity 40% #3ba6ff CMYK 77,20,0,0 RGB 59. 166, 255 Opacity 20% #1f3100 CMYK 60,45,60,54 RGB 31. 49, 0 Opacity 80% #792c28 CMYK 27,82,79,26 RGB 121. 44, 40 Opacity 70% #000000 CMYK 56,45,48,71 RGB 0. 0, 0 Opacity 60% 13 lAYOUT - Grid Et grid er et antal lodrette og vandrette linjer, man kan vælge at benytte på en hjemmeside, for at opsætte og overskueliggøre indhold. Vi bruger et gridsystem (gitter) på hjemmesiden, der gør designet mere struktureret, tilføjer balance og hjælper med at organiserer sidens forskellige elementer, såsom tekstbokse og billeder. 14 lAYOUT - Grid 15 BILLEDstil Billedeksempler Varme farver spiller en stor rolle i Gypsy Land ‘s stil, derfor er billedstilen også varm. Der tages billeder med forskellige aparater og i forskellig farvetone og format. Dog er det, af denne grund, vigtigt at gøre brug af det samme varme filter over billederne så alle billeder har en konsistent stil. Billedstilen strækker sig fra de halvkolde mørke farver, til de varme farver i vores farveskema. De kolde farver gør, at de varme farver (i form af instrumenternes træfarver, og personerene på billedernes ansigter) træder mere frem. Farvetoning Billedemotiverne skal være varme og personlige, med massere af følelse. 16 Hjemmeside mockups 17 Endelige hjemmeside 18 navigationsdiagram 19 Use Case - LOGIN Brugeren har på hjemmesiden mulighed for at logge in. Dette skal gøres hvis brugeren har lyst til at rate et eller flere medier på siden. Brugeren indtaster først Brugernavn og herefter sit password og trykker login. Hvis brugeren eksisterer, vil han nu være logget ind, hvorimod han ikke vil være logget ind hvis han ikke eksisterer og han behøver derfor at oprette sig som bruger først. Use Case 1 – Log ind Name LogIn Identifier UseCase1 Preconditions Brugeren skal allerede være oprettet i systemet. Basic Course 1. Brugeren indtaster sit brugernavn 2. Brugeren indtaster sit password 3. Brugeren trykker på knappen ”Login” 4. Systemet tjekker at han eksisterer i databasen 5. Brugeren er logget ind, og en meddelelse vises og brugeren bliver tildelt en Session Alternate course Step 1 – Brugeren efterlader Brugernavn feltet tomt 1. Brugeren har undladt at udfylde brugernavn feltet inden han trykker ”Login” 2. Systemet vil udskrive en fejlmeddelelse, om at brugeren skal indtaste et brugernavn for at blive logget ind. 3. Systemet går til punkt 1. Step 2 – Brugeren efterlader Password feltet tomt 1. Brugeren har undladt at udfylde password feltet inden han trykker ”Login” 2. Systemet udskriver en fejlmeddelelse, om at brugeren skal indtaste et password for at blive logget ind. 3. Systemet går til punkt 2. Step 4 – Brugeren findes ikke i systemet 1. Systemet kan ikke finde brugeren i databasen 2. Systemet udskriver en fejlmeddelelse, om at brugeren ikke eksisterer, og beder brugeren prøve at logge ind igen, hvis dette fejler anden gang, skal brugeren i stedet oprette sig som bruger. 3. Systemet går til punkt 1. Step 4 – Brugeren findes ikke i systemet 1. Det indtastede brugernavn og password matcher ikke 2. Systemet udskriver en fejlmeddelelse, om at det indtastede brugernavn og password ikke matcher, og beder brugeren prøve igen. 3. Systemet går til punkt 1. Post Conditions En bruger er logget ind, og har nu mulighed for at rate et eller flere medier, og sætte valgte medier som favorit. 20 Use Case - SORTER MEDIER Brugeren skal kunne sortere via forskellige grupperinger inden for hver mediekategori. Grupperingerne kommer til at være: nyeste, højest ratede. Name Sorter medier Identifier Use Case 3 Preconditions Der er medier i databasen Tidspunktet for mediernes oprettelse bliver gemt i databasen Ratings af medierne gemmes i databasen Basic Cours 1. Brugeren er inde i en bestemt mediekategori 2. Brugeren får valget at klikke på nyeste eller højest ratet 3. Når Brugeren har valgt, vil medierne skifte plads på siden, så de matcher med valget efter rækkefølge. 4. Brugeren kan vælge at sortere efter en ny gruppering, hvorefter indholdet vil rykke rundt på siden så det matcher det nye valg. 21 Use Case - bedøm medie Brugeren ser et medie og ønsker at bedømme det, ved at give mellem 1-5 points. Bruger afgiver sin stemme, ved at klikke på det antal points, som han synes mediet fortjener, i en dropdown. Derefter trykker brugeren ”Rate”, og den afgivne karakter af mediet bliver regnet med i gennemsnittet af mediets tidligere bedømmelser, og vil blive vist som et gennemsnit. Use Case 2 – Bedøm et medie Name Bedøm et medie Identifier UseCase2 Preconditions Der skal eksistere et eller flere medier på siden, som brugeren kan tildele points. Alternate course Step 1 – Brugeren har ikke valgt et antal points. 1. Brugeren har ikke valgt et antal points, inden han trykker ”Rate”. 2. Systemet vil udskrive en fejlmeddelelse, om at brugeren skal vælge et ønsket antal points. 3. Systemet går til punkt 2. Step 2 - Der kan ikke oprettes forbindelse til databasen 1. Systemet meddeler at der ikke kan oprettes forbindelse til databasen. 2. Systemet udskriver besked om at brugeren skal prøve igen senere. Post Conditions Brugeren har afgivet points til det valgte medie, og pointgennemsnittet er blevet opdateret. Basic Course 1. Brugeren finder et medie som han/hun har lyst til at bedømme. 2. Brugeren vælger det antal points han/hun synes at mediet fortjener. 3. Brugeren trykker ”Rate”. 4. Det afgivne antal points vil blive føjet til det valgte medies gennemsnit. 5. Brugerens bedømmelse er nu regnet med i gennemsnittet, og vil vise sig ved siden af mediet. 22 Database eksempel 1 Her under ses en del af vores PhP kode der arbejder med databasen. Dette stykke PhP bruger vi på forsiden til at hente de 4 nyeste billeder ind fra databasen. Vi starter med at oprette forbindelse til databasen via en db_con.php fil. Herefter opretter vi en variablen kaldet $sql som bliver sat til vores SQL statement. Vores SQL statement henter medieId og path op fra databasen. Vi siger også at det kun skal være medier med typen 1, således at vi kun får billeder op. Vi sorterer efter uploadDate og vi laver en LIMIT 4, da der kun er plads til 4 medier på vores forside. Herefter prepare vi vores $sql, som vi så får et statement ud af. Dette statement gemmer vi i en ny variabel kaldet $stmt. Vi binder resultaterne vi får op fra databasen i 2 variabler som vi kan bruge senere i vores fetch løkke. Efter dette executer vi $stmt så det hele kører. I vores while løkke fetcher vi hvert resultat ud, som vi får fra databasen. Vi echo’er noget html ud, hvor de 2 variabler også bliver smidt med ud, således at vores medier fra databasen, kommer ind i de rigtige div kasser på forsiden. <div class=”medier”> <?PHP require_once ‘db_con.php’; $sql = “SELECT medieId, path FROM medie, type WHERE medie.typeID_fkey = type.typeID AND type.typeID =1 ORDER BY uploadDate DESC LIMIT 4”; $stmt = $link->prepare($sql); $stmt->bind_result($id, $path); $stmt->execute(); while($stmt->fetch()){ echo “<div class=’medie’>”; echo “<a href=’images.php’><img src=”.$path.”></a>”; echo “</div>”; } ?> <div class=”clear”></div> </div> 23 Database eksempel 2 Først starter vi med at starte en session, hvis der ikke er startet en i forvejen. (hvis den er tom) Dernæst laver vi en $cmd variabel, som vi forbinder login knappen til. Til den laver vi så et if statement der siger, hvis den ikke er tom, og lig med ”.” som er vores navn på logins value. Skal den putte det indtastede username og password ned i variablerne $un og $pw. Så opretter vi forbindelse til databsen, og selecter det userID fra vores users tabel, som der stemmer overens med det indtastede username og password. Det fundne userID bindes til et resultat inden vi executer. gout knappen. Skal sessionen stoppes og man skal blive logget ud. Til sidst har vi koden for at oprette en bruger. Her sker det samme, med at vi laver en $opret variabel, som vi forbinder opret knappen til. Hvis $usern og $userpw ikke er tomme skal der oprettes forbindelse til databasen, og det indtastede skal indsættes i tabellen users under username og password. Til dette laver vi placeholder, og binder det indtastede til et param, for at have bedre sikkerhed, når vi har med passwords at køre. Dernæst laves en if sætning der binder $uid og $un til det generede sessions ID og logger vedkommende ind, på den måde kan vedkommende forblive logget ind, når siden refresher eller der skiftes side. Ellers skal login fejle og stmt skal ikke køres mere. I else if skriver vi at, hvis $cmd variabel er lig med ”,” som er lo- 24 Database eksempel 2 <?php if (session_id()==””) { session_start(); } $cmd = filter_input(INPUT_POST, ‘cmd’); if(!empty($cmd)) { if($cmd == “.”) { $un = filter_input(INPUT_POST, ‘username’) or die(‘illegal username parameter’); $pw = filter_input(INPUT_POST, ‘password’) or die(‘illegal username parameter’); require_once ‘db_con.php’; $sql = ‘SELECT userID FROM users WHERE username=? AND password=?’; $stmt = $link->prepare($sql); $stmt->bind_param(‘ss’,$un, $pw); $stmt->bind_result($uid); $stmt->execute(); if($stmt->fetch()) {//login ok $_SESSION[‘uid’] = $uid; $_SESSION[‘uname’] = $un; } else { //login failed $stmt->free_result(); } else if ($cmd == “,”) { session_unset(); //remove all session variables session_destroy(); // destroy the session } } $opret =filter_input(INPUT_POST, “opret”); if(!empty($opret)) { if($opret == “-”) { $usern = filter_input(INPUT_POST, ‘username’); $userpw = filter_input(INPUT_POST, ‘password’); if(!empty($usern) && !empty($userpw)) { require_once ‘db_con.php’; $sql = ‘INSERT INTO users (username, password) VALUES (?,?)’; $stmt = $link->prepare($sql); $stmt->bind_param(‘ss’,$usern, $userpw); $stmt->execute(); } } } ?> 25 er-model 26 Test case 1 Test Case #1 Test Case Navn: Opret Bruger. System: PHP Subsystem: SQL, HTML Designed af: Gruppe 6. Dato: Executed af: Execution Dato: Kort beskrivelse: Teste oprettelse af bruger. Pre-‐conditions En HTML form man kan indtaste informationer i. Forbindelse til databsen Start på forsiden (Index.php) Step Action Expected System Response Pass/ Comment 27 Pre-‐conditions En HTML form man kan indtaste informationer i. Forbindelse til databsen Start på forsiden (Index.php) Step Action Expected System Response Test case 1 1 Før musen op til Login / register boksen. Indtast et brugernavn og adgangskode efter eget valg. (noget man kan huske.) og tryk på Opret bruger. 3 Indtast dit nye oprettede brugernavn og adgangskode i felterne, og tryk på Log-‐in. 4 Check Post-‐condition 1 Post-‐Conditions. 1. Logged in as ……….. Systemet gemmer de indtastede felter i user tabellen, og man kan nu bruge dem til at log in. Brugernavn skrives med synlige tegn og password skrives med hemmelige tegn. Pass/ Comment Fail 28 Test case 2 Test Case #2 Test Case Navn: Login. System: PHP Subsystem: SQL, HTML Designed af: Gruppe 6. Kort beskrivelse: Teste Login Pre-‐conditions En HTML form man kan log-‐in med. Forbindelse til databsen Start på forsiden (Index.php) Dato: Executed af: Execution Dato: 29 Forbindelse til databsen Start på forsiden (Index.php) Step Action Test case 2 1 Før musen op til Login boksen. Indtast brugernavn og adgangskode i boksene, men med fejl i brugernavn og tryk log-‐ in knappen. 3 Gentag step 1, men tast det rigtige brugernavn i input felterne. 4 Check Post-‐condition 1 5 Klik rundt på de forskellige sider, og tjek om man er logged in på alle siderne. 6 Klik på refresh browser og tjekke om man stadig er logged in. . Post-‐Conditions. 1. Logged in as ……….. Expected System Response Systemet går ikke videre til post-‐ condition 1. Og man er derved ikke logged in. Pass/ Comment Fail Brugernavn skrives med synlige tegn og password skrives med hemmelige tegn. Post-‐condition 1 vil være vist på alle siderne. Siden refreshes og post-‐condition vil stadig være vist. 30 Test case 3 Test Case #3 Test Case Navn: Bedøm Medie System: PHP Subsystem: SQL, HTML Designed af: Gruppe 6. Dato: Executed af: Execution Dato: Kort beskrivelse: Teste rating af medier Pre-‐conditions Et medie man kan bedømme. Forbindelse til databsen Start på forsiden (Index.php) Være logget ud Step Action Expected System Response Pass/ Comment Fail 31 Et medie man kan bedømme. Forbindelse til databsen Start på forsiden (Index.php) Være logget ud Step Action Test case 3 1 Klik på enten Images, Videos, Music (Genvej eller fra menu) Kig efter et sted at stemme gentag step 1-‐2, men hvor man er logget ind. Expected System Response Siden om enten Images / Videos / Music. Samt detaljer om hver enkelt billede. 2 Man vil opdage at man skal være logged in for at vote et medie 3 Image / video / music siderne viser nu et system, hvor du kan stemme og vælge favoritter. 4 Giv et medie en Stemmen gemmes og mediets bedømmelse mellem 1-‐5. average point opdateres. 5 Klik på refresh browser Siden refreshes og det valgte medie og tjek om dit medie har gemt brugerens karakter i stadig har samme sum. databasen. (Karakteren kan dog være ændret, hvis andre brugere har stemt.) Post-‐Conditions. Pass/ Comment Fail 32 Test case 4 Test Case #4 Test Case Navn: Sorter medier. System: PHP Subsystem: SQL, HTML Designed af: Gruppe 6. Dato: Executed af: Execution Dato: Kort beskrivelse: Teste sortering af medier Pre-‐conditions Et medie man kan bedømme Forbindelse til databsen En menu til sortering. Være Logged in. Start på Images.php / videos.php / sound.php Step Action Expected System Response 1 Klik på Newest De nyest uploadede medier vises. Pass/ Comment Fail 33 Et medie man kan bedømme Forbindelse til databsen En menu til sortering. Være Logged in. Start på Images.php / videos.php / sound.php Step Action Expected System Response Test case 4 1 2 3 4 5 Klik på Newest Klik på Low-‐High. Klik på High-‐Low Klik på Favorites. Gentag step 1-‐4 på alle siderne (images/videos/sound) De nyest uploadede medier vises. De dårligst ratede medier vises. De bedst ratede medier vises. Brugerens favoritter vises efter nyest tilføjet. Alle siderne virker som de skal. Pass/ Fail Comment 34 FACT SHEET Website with Database - Gypsy Land MulB 6 Christian Skat Kærager, Tobias Christiansen, Kasper Bek Rasmussen og Sarina Trein Bødker Christian Skat Kærager Tobias Christiansen Kasper Bek Rasmussen Christian Skat Kærager ckaerager@gmail.com tobiaschr@gmail.com kasperbek@gmail.com sarinabodker@hotmail.com 35