Projekt 3: Interaktionsudvikling 11/04.14 Gruppe 5 http://kostecki.dk/cph/cupcakes/v2/opskrifter.php Christina Juulmann www.chrissycreations.dk Jacob Kostecki www.kostecki.dk Jayne Alice www.jaynealice.com Miia Ebbesen www. mebb.dk/portfolio Sunna Natasia www.sunnanatasia.dk
Målbeskrivelse Dette projekt tager udgangspunkt i projekt 2, hvor vi har udviklet en blog om cupcakes. Formålet med dette projekt er at optimere bloggen, så diverse blog funktioner får integreret funktionelle moduler til registrering af brugere, registrering af opskrifter, samt et modul til visning af opskrifter. Der ønskes at bloggen laves responsive, så visningen fungerer optimalt på både desktop, tablet og smartphone. Overordnet er projektets formål at optimere siden således, at brugerinteraktions niveauet og brugervenligheden øges. Der kan derudfra opstilles følgende problemformulering: Hvordan kan vi optimere bloggen således, at brugerinteraktion samt bruger venligheden øges? Metodebeskrivelse For at give brugeren mulighed for at læse, uploade og finde opskrifter på bloggen, vil vi gøre brug af HTML form tags, MySQL og PHP. Der skal oprettes en database til disse moduler. Databasen skal bestå af to tabeller. Før brugeren kan uploade sine egne opskrifter kræves et registreringsmodul - hertil laves en users tabel i databasen. Derefter en tabel til opskrifter med obligatorisk brugernavn udfyldningsbox, således kan brugere søge på opskrifter ved hjælp af brugernavn. Vi har valgt at afgrænse piktogrammerne i den forstand, at vi ikke har valgt at integrere dem i navigationen. Dog har vi valgt at illustrere, hvordan de eventuelt kunne se ud. Vi har nemlig i stedet valgt at holde fokus på MySQL og PHP delen. Problemstillinger: Hvordan kan vi skabe et system, der giver brugeren mulighed for at læse og finde opskrifter samt uploade egne opskrifter? Hvilke tekniske udfordringer kan der opstå ved implementering af disse moduler? 1
Projektets tidsplan Før vi går i gang med at besvare vores problemformulering, vil vi først vise, hvordan vi har struktureret vores tidsplan. Dette vil vi illustrere med et Gantt-skema som ses til højre. Vi har valgt at lave projektets tidsplan med et Gantt-skema, idet den giver et godt visuel overblik. Under skemaet ses nogle kasser, der er en supplering for Gantt-skemaet. Gantt-skema Fase 1 Fase 2 Fase 3 Fase 4 Dokumentere udviklingsprocessen i form af en projektplan og et Gantt-skema (rapportskrivning) Oprette brugerregistrerings modul Oprette opskriftregistrerings modul Udvikle modul til visning af opskrifter Dokumentere fremgangsmåde af registreringsmoduler (rapportskrivning) Optimering af layout til responsive design: -Smartphone -Tablet -Desktop Integrere piktogrammer i navigationen Validere Javascript Udføre testscenarier Dokumentere testscenarier og testresultater (rapportskrivning) Style moduler Dokumentere opsamling på resultatet af det endelige produkt Færdiggøre rapporten. 2
Produktet MySQL-delen består af en database, projekt3, der indeholder 2 tabeller. En til brugeroplysninger kaldet users og en til opskriftinfo kaldet recipes. Disse tabeller består af en række kolonner. Databasen er opsat på følgende måde: Uden brugerens viden registreres datoen i yderligere to kolonner userid og regtime. Disse giver henholdsvis et brugerid og et registreringstidspunkt. userid tildeler brugeren et tal ud fra en talrække startende fra 0. Denne kolonne auto-inkrementerer og giver derfor brugeren det næste ledige tal i rækken, så ingen brugere ender med samme nummer. RegTime er af typen TIMESTAMP og registrer derfor automatisk tidspunktet for registreringen. PHP-delen består af en række filer, der fungerer som bindeled mellem brugeren og MySQL databasen. Ved brugerregistrering samles brugerens input og dette indsættes i databasen. Det samme sker ved bruger-upload af opskrifter. Ved visning af opskrifter hentes data fra databasen, og disse præsenteres for brugeren. Til dette benyttes fire forskellige PHP-filer med hver deres funktion: Brugerne registrerer en række oplysninger, som gemmes i databasen. Disse oplysninger er fornavn, efternavn, brugernavn, email, ønske om nyhedsbrev og køn. Fornavn, efternavn, brugernavn og email gemmes som en VARCHAR, da indholdet vil være både tegn og symboler, men af en forholdsvis kort længde. Ønske om nyhedsbrev samt køn gemmes som en ENUM, der gør det muligt kun at acceptere specifikke tegn; Y eller N samt M eller F. db_con.php Konfiguration af forbindelse til database. register.php Registrering af brugere på bloggen. add_recipe.php Bruger-upload af opskrifter til senere visning på siden. get_recipes.php Visning af alle opskrifter indsendt af brugere. user_select.php Vælg bruger til visning af dennes indsendte opskrifter user_recipes.php Vis opskrifter baseret på vælg fra user_select.php read.php Læs en specifik opskrift i sin fulde længde. 3
Den første PHP-fil som brugeren indirekte har kontakt med, er register.php der står for registrering af brugeren. Her opsamles brugerens indtastede data fra HTML-formen på registreringssiden for derefter, at blive indsat i users tabellen i databasen. Dette sker ved hjælp af følgende kode: $firstname = $_GET[ firstname ]; $lastname = $_GET[ lastname ]; $username = $_GET[ username ]; $email = $_GET[ email ]; $newsletter = $_GET[ newsletter ]; $sql = INSERT INTO users (firstname, lastname, username, email, newsletter) VALUES (.$firstname.,.$lastname.,.$username.,.$email.,.$newsletter. ) ; Næste skridt er, at vise de uploadede opskrifter. Dette gøres med get_recipes.php, der ved hjælp af følgende kode viser alle indsendte opskrifterne som hver sit link: echo <html><head></head><body> ; $sql = SELECT recipename, recipeid FROM recipes ; if($result = $mysqli->query($sql)) { while($row = $result->fetch_assoc()) { echo <div id= wrapper ><a href= read. php?recipeid=.$row[ recipeid ]. >.$row[ recipename ]. <br> </div> ; echo </body></html> ; Data fra formen hentes og gemmes som en variabel. Dernæst køres et standard SQL-statement med infoen fra variablerne, som indsættes i databasen. Når brugeren skal dele en opskrift med resten af verdenen ved hjælp af hjemmesiden, sker det ved hjælp af add_recipe.php, som gør det samme som ved brugerregistreringen. Her er der bare en anden tabel i databasen og noget andet data. På helt lav-teknisk vis bliver brugeren bedt om at indtaste sit brugertid, der skal fungere som en identifikation for hvem der har lagt opskriften op. Til en eventuelt videreudvikling ville det være oplagt, at brugeren i stedet skal logge ind og dermed ikke skal huske et nummer for at kunne have navn på opskriften. Dette eliminerer også muligheden for, at andre brugere deler opskrifter i andres navn. Dette gør at opskrifternes navne og ID bliver hentet fra databasen og derefter bliver inkluderet i et standard HTML a-tag for hver opskrift. Ved hjælp af recipeid linker tagget til den fulde opskrift, som vises ved hjælp af read.php: (se næste side) 4
echo <html><head></head><body> ; $sql = SELECT recipeid, recipename, tagline, season, ingredients, directions FROM recipes WHERE recipeid =.$recipeid; if ($result = $mysqli->query($sql)) { while ($row = $result->fetch_assoc()) { echo <div id= headline >.$row[ recipename ]. </div><br> ; echo <div id= caption >.$row[ tagline ]. </div><br> ; echo <div id= season >.$row[ season ]. </div><br> ; echo nl2br($row[ ingredients ]); echo <br><br> ; echo nl2br($row[ directions ]); echo </body></html> ; Data fra databasen hentes, og den rigtige opskrift vises ved hjælp af recipeid, som hentes fra forrige side med GET-funktionen i PHP. Derefter skrives den hentede data ud sammen med noget HTML for at få det til at se rigtig ud. Nl2br funktionen bruges, for at få linjeskift rigtig med fra tekstboksen hvori opskriften blev skrevet. Yderligere findes også user_recipes.php og user_select.php. Disse filer står henholdsvis for, at lade en given bruger vælge et specifikt brugernavn og få vist dennes indsendte opskrifter. user_select.php indeholder en HTML form med en dropdown liste over de forskellige brugere i databasen. Ved submit sender siden brugernavnets tilknyttede userid videre til user_recipes.php, som henter de opskrifter denne bruger har uploadet. Valg af bruger sker på følgende måde: $sql_dropdown = ( SELECT username, userid FROM users ); if ($result = $mysqli->query($sql_dropdown)) { while ($row = $result->fetch_assoc()) { echo <option value=.$row[ userid ]. >.$row[ username ]. </option> ; Opsamling af userid og visning af opskrifter, i HTML, baseret på dette: echo <html><head></head><body> ; $sql = SELECT recipename, tagline, recipeid FROM recipes WHERE userid =.$userid; if($result = $mysqli->query($sql)) { while($row = $result->fetch_assoc()) { echo <div id= wrapper ><a href= read.php?recipe- ID=.$row[ recipeid ]. >.$row[ recipename ]. <br></div> ; echo <div id= wrapper ><a href= read.php?recipe- ID=.$row[ recipeid ]. >.$row[ tagline ]. <br></div> ; echo </body></html> ; Igennem hele projektet har PHP og MySQL delen været den største udfordning, og derfor også lavet på et meget lavt niveau, da det stadig er forholdsvis nyt for gruppen. Der er endnu ingen der føler sig rigtig hjemme med det og som bare har styr på det. Der er derfor også plads til en hel del forbedringer og eventuelle omskrivninger af koden, som kunne give flere funktioner, bedre brugervenlighed og større sikkerhed. Antallet af disse fejl og mangler må forventes at falde i takt med, at erfaringerne stiger. 5
Responsive Design Siden er blevet bygget op sådan, at indholdet er placeret logisk uanset om du er på en stor eller en lille skærm. Det er nemt at bruge - uanset på hvilken slags enhed det er på. Den røde tråd er, at sidens brand/logo og navigation er altid øverst på siden, efter hvilket kommer selve indholdet derefter links, social media og annoncer. Selve indholdet er på midten af siden eller kommer som det næste under navigationen, mens annoncer og andet ekstra er på den højre side af skærmen, eller under indholdet. Wireframes: Siden er bygget op med HTML5 og CSS3, med supplerende funktioner som Javascript og PHP. Responsiviteten udføres gennem brugen af CSS3 Media Queries, hvor bestemte CSS-regelsæt bliver associeret med bestemte skærmstørrelser efter de ovennævnte breakpoints. For eksempel ændrer det følgende stykke kode, hvor meget logoet øverst på hjemmesiden fylder på skærme som er 480px eller mindre i bredden: @media screen and (max-width: 480px) { #header_middle { margin-right: auto; margin-left: auto; width: 95%; padding: 5px 0 15px 0 Til sammenligning ser koden ud som følgende på skærme større end 768 px i bredden: Breakpoints i designet er de følgende størrelser i bredden: 1024px, 768px, 640px. Den største ændring sker ved 768px, hvor layoutet ændrer sig som vist i billedet ovenpå - den grønne sidebar, der oprindeligt står på den højre side, bliver skubbet ned under indholdet. Det næste breakpoint er ved 640px, hvor navigationsmenuen bliver ændret fra inline til en dropdown-menu. #header_middle { margin-right: auto; margin-left: auto; width: 50%; padding: 5px 0 15px 0; 6
Javascript-validering af forms Til oprettelse af brugere og indsending af opskrifter bruges HTML formularer til indsamling af data. Input i disse formularer bliver valideret gennem Javascript, både imens brugeren navigerer i formularens felter (inline), og efter de indsender formularen (onsubmit). Onsubmit-validering forhindrer formularen i at sende informationer til databasen, hvis ikke de er indtastet korrekt. I tilfældet af brugeren har overset inline-fejlmeddelser indeni selve formular felter, som fjerner det uønsket data. Som inline-validering kommer der korte fejlmeddelser under de specifikke felter, hvor brugeren prøver at indtaste ugyldig data. Dette vejleder brugeren, hvordan inputs skal indtastes. Eksempler på vores inline-validering: firstname.onblur = function() { if(userregistration.firstname.value.length<2) { document.getelementbyid( error-fname ).innerhtml= For kort fornavn, min. 2 tegn ; document.userregistration.firstname.value= ; document.userregistration.firstname.focus(); else { document.getelementbyid( error-fname ).innerhtml= ; ; ; firstname.onfocus = function () { firstname.value = ; firstname.style.color = black ; 7
Piktogrammer Piktogrammer er ikoner, der bliver anvendt mange forskellige steder. Alt fra henvisning til toilettet i lufthavnen til vaskeinstruktionerne i din yndlings skjorte og til navigationen på et website. Piktogrammer er en simpel og intuitiv form for kommunikation. Vi har fået den opgave, at lave en serie piktogrammer, som skal understøtte navigationen. Dette er især nyttigt, når man kigger på navigationen på en mindre skærm, da et piktogram er mere kompakt, og det kan indeholde samme information som tekst. Piktogrammer kan både understøtte tekster, men de kan også erstatte ord og korte forklaringer. Vi har herunder lavet en serie piktogrammer og illustreret, hvordan det eventuelt kunne se ud på en smartphone 1 skærm. 1 http://www.lacostadigital.com/img-2-2.0-iphone.png 8
Test Scenarier Bruger registrering: Godkendt Fejl 9
Test Scenarier Opskriftregistrering: Godkendt Fejl 10
Test Scenarier Opskrift søgning: 11
Konklusion Vi har i opgavens første del vist, hvordan vi vil optimere bloggens brugerinterkationen og brugervenligheden. Ved at læseren har mulighed for at søge og uploade egne opskrifter, bliver bloggens funktionalitet øget og hermed også brugerinteraktionen samt brugervenligheden. For at optimere brugervenligheden yderligere har vi kreeret en serie piktogrammer, der kan understøtte navigationen. I forlængelse af dette har vi gjort siden responsive. Dernæst har vi udviklet et system der således gør det ovennævnte. Her har vi skabt en database der indeholder to tabeller. Ved brug af PHP, MySQL, Javascript og HTML forms har vi skabt fire moduler. Et til brugerregistrering, et til opskriftsregistrering, et modul til visning af bestemte brugeres opskrifter og et hvor de er samlet. Vi kan konkludere, at ved implementering af moduler, kan der i dette opstå nogle tekniske udfordringer, i forhold til sikkerheden. Dette skal forstås på den måde, at vores kompetencer ikke rækker langt nok til at kunne opsætte de rette sikkerhedsforanstaltninger i forhold til når en bruger opretter et ID, således at brugerens oplysninger er sikre og forbliver private. 12