isset($_get['id'])) { $id = $mysqli->real_escape_string($_get['id']); $sql = "SELECT * FROM `opskriftreg` WHERE `id` =? LIMIT 1;"; $stmt = $mysqli->prepare($sql); $stmt->bind_param('s', $id); $stmt->execute(); $res = $stmt->get_result(); SESSION_START(); $_SESSION[ PROJEKT 3 - INTERAKTIONSUDVIKLING ]; if (mysqli_num_rows($res) > 0) { while ($result = $res->fetch_array(mysqli_assoc)) { echo "<div class=\"article\">". "<div class=\"title\">".$result['title']."</div>". "<div class=\"body\">".$result['description']."</div>" Af Peter Rothmann Rasmussen, Steffen Marshall, Martin Ungermann Stæhr, Patrick Bomann Tofteng & Erik Andreas Münter Undervisere Thomas Hartmann Merete Gelderman Lützen
Indholdsfortegnelse 2 Indholdsfortegnelse 3 Faktaark Indledning 4 Indledning & problemformulering Problemformulering 5 Processen 6 Use case model 7 Use cases Oversigt 8 Koden (oversigt & Bruger registrering) Bruger registrering brugerreg.php 9 Koden (brugerreg) 10 Koden (brugerreg & brugerreg_validate) brugerreg_validate.js 11 Koden (brugerreg_validate & brugerregsave) brugerregsave.php 12 Koden (brugerregsave) login.php 13 Koden (login.php & post_login) post_login.php 15 Koden (profile.php) 16 Koden (profile.php) profile_edit.php 17 Koden (profile & profile_edit) profile_update.php profile_image_upload.php 18 Koden (profile_update profile_image_upload & opskriftreg) opskriftreg.php 19 Koden (opskriftreg, opskriftregsave & opskrift_page) opskriftregsave.php opskrift_page.php 20 Koden (opskrift_page, opskrift_delete & opskrift_list) opskrift_delete.php opskrift_list.php 21 Testscenarie del 1 af 2 22 Testscenarie del 2 af 2 23 Designvalg og det tekniske 24 Konklusion 25 Kilder 14 Koden (post_login & logout) logout.php Profile.php 2
Faktaark Titel: Projekt 3 - Interaktionsudvikling Gruppe: 11 URL: http://patricktofteng.dk/cph/2.semester/simplycupcakes Hold: CLmul-b13e 2. semester Vejledere: Thomas Hartmann tha@cphbusiness.dk Merete Geldermann Lüzten mli@cphbusiness.dk Peter Rothmann Rasmussen Mail: prasmussen93@gmail.com www.mul133.itkn.dk/portfolio Steffen Marshall Mail: steffen-marschall@outlook.com www.steffenmarschall.com/ Martin Ungermann Stæhr Mail: martinstaaehr@gmail.com www.martinstaehr.dk/ Patrick Bomann Tofteng Mail: kontakt@patricktofteng.dk www.patricktofteng.dk/cph/1.semester/portfolio/ Erik Andreas Münter Mail: kontakt@designduck.dk www.designduck.dk/portfolio 3
Indledning & problemformulering Indledning Problemformulering I dette projekt fik vi til opgave at arbejde med mysql og php. Vi har derfor i dette projekt udarbejdet en database, med tabeller, i mysql. Vores site var allerede udarbejdet i php, hvilket gjorde det nemt at tilføje mysql. Vi vil udvikle en ny version af vores tidligere projekt, Simply Cupcakes, som skal kunne oprette nye brugere og opskrifter, via en database. Dette skal have til formål at gøre siden mere attraktiv for brugere og potentielle nye kunder. Hvordan kan folk nemt registrere sig som bruger på Simply Cupcakes? Hvordan kan Simply Cupcakes give brugerne præg på hjemmesiden? Ved at tilføje databaser har det gjort det muligt for besøgende af Simply Cupcakes at oprette sig som bruger, se andres cupcake opskrifter og selv tilføje sine egne. Hvordan kan Simply Cupcakes forbedre deres responsive website og dermed påvirke brugerne til at benytte sitet mere på farten? 4
Processen Vi startede med at sætte os sammen og forventningsafstemme med hinanden. Vi blev hurtigt enige om at opgaven virkede meget simpel for os, da vi allerede havde en fuld responsive hjemmeside som var opbygget i php. Der er blevet arbejdet hårdt og ud over det forventede, og vi er kommet ud med et produkt som går ud over rammerne for den stillede opgave. Herefter udarbejdede vi et ganttkort (se figur 1) for projektet så vi havde en klar plan for hvornår hvilke arbejdsopgaver skulle opføres. Google Presentation Projekt 3, Interaktionsudvikling I sidste projekt udarbejdede vi også et Google presentations dokument 1 som et fælles projektdokument som alle kunne redigere i, og det samme har vi gjort for dette projekt. Det giver et utroligt overblik over projektet at alle kan se hvor langt medlemmer fra gruppen er nået hele tiden. Det har medvirket at vi konstant har kunnet holde fokus på hvad der nu en gang var det vigtigste for projektet på et givent tidspunkt. 1) Google Presentation http://goo.gl/wkobj1 Figur 1 5
Use case model LOGGE IND LÆSE OPSKRIFTER REDIGERE SIN BRUGER Gæstebruger SØGE I OPSKRIFTER OPRETTE OPSKRIFTER Registreretbruger SE BRUGERPROFILER LÆSE OPSKRIFTER OPRETTE BRUGER (LOGGE IND) SØGEFUNKTION TIL OPSKRIFTER SE BRUGERPROFILER 6
Use cases Navn: Se opskrifter/brugerprofiler Beskrivelse: Både som gæst og som registreret bruger, vil det altid være muligt at kunne se opskrifter og brugerprofiler, som er oprettet af allerede registrerede brugere. Der vil altså ikke være nogle begrænsninger på dette område, da websitet skal være så tilgængeligt som muligt - også hvis man ikke opretter sig som bruger. Ønsker man en videre oplevelse, er brugeroprettelse et krav. Navn: Søgefunktion til opskrifter Beskrivelse: Søgefeltet ligger på siden med opskriftslisten men er dog ikke funktionel, idéen var at en bruger skulle være i stand til at søge i systemet efter lige præcis den opskrift de leder efter. Navn: Brugeroprettelse/logge ind Beskrivelse: Ved oprettelse af bruger, vil man via login, få adgang til hele sitets muligheder. Man kan redigere sin profil som man har lyst til så den bliver mere personlig. Navn: Oprette/redigere/slette opskrifter Beskrivelse: Når man er oprettet som bruger, vil man få mulighed for at oprette nye opskrifter til hjemmesidens database. Ligeledes vil det være muligt at redigere dem og slette dem hvis der er behov for det. 7
Koden (oversigt & Bruger registrering) Oversigt Følgende kode er blevet tilføjet ved dette projekt og vil blive gennemgået i grove træk Bruger registrering brugerreg.php brugerreg_validate.js brugerregsave.php Profil profile.php profile_edit.php profile_image_upload.php profile_update.php Login login.php logout.php post_login.php Opskrift registrering opskrift_delete.php opskrift_list.php opskriftreg.php opskriftregsave.php opskriftreg_validate.js På de følgende sider vil der blive forklaret de essentielle dele af koden. For at kunne holde står på hvad der er udklippet kode og tekst vil koden blive præsenteret i grå bokse med linje tal i siden og filnavn i toppen af hver boks. Her ses et eksempel på et udsnit af en kode. brugerreg.php <h3>*fornavn:</h3> <p>indtast dit fornavn og eventuelle mellemnavn her.</p> <input id= firstname type= text name= firstname ><br> Her vises et eksempel på et udklip fra koden. Et input field med type= text og name= firstname Bruger registrering Bruger registrerings delen er opdelt i 3 filer: brugerreg.php - Der indeholder en html from hvor i enhver kan gå ind og oprette sig som bruger. brugerreg_validate.js - Der validere om brugerens input fra brugerreg. php er rigtigt ifølge vores regler. brugerregsave.php - Der modtager dataen fra brugerreg.php og gemmer det i databasen. 8
Koden (brugerreg.php) Vi vil gå igennem de vigtigste ting fra filerne, starter med den først listede. brugerreg.php brugerreg.php indeholder en form den besøgene kan udfylde for at oprette sig som bruger på sitet. formen indeholder 7 områder: Fornavn - Tekst felt Efternavn - Tekst felt Brugernavn - Tekst felt Password - Tekst felt Email - Tekst felt Køn - Radio buttons Fødselsdag - Select (Dropdown) Grunden til at vi har valgt disse er at fornavn og efternavn er essentielt for vores hjemmeside og det nærvær vi ønsker at den skal opnå. Brugernavn og password giver muligheden for login featuren, plus ved at have eget brugernavn som ikke bliver vist kan det være sværre at hacke en konto. Email og fødselsdag er til promotion af sitets med features. Så når det er din fødselsdag var tanken at man får en mail med et tillykke og en rabatkode, og køn er blot for at eventuelt holde en orden på fordeling af mand/kvinde på sitet. Vi har indlejret et script her med en for som muliggør at man kan vælge årgang fra 1930 til 2014, uden at vi skulle skrive det hele ned. brugerreg.php - Linje 89-96 <?php print Årgang: ; print <select name= year ><option value= ></option> ; for($i=2014; $i>1930; $i--) { print <option value= $i >$i</option> ; } print </select> ;?> Linje 92 Her siger vi at $i = 2014 altså bliver 2014 gemt i $i. $i>1930; hvis $i er større end 1930. og $i-- gør at for hver gang den køre koden igennem bliver der trykket 1 fra $i. $i bliver derfor hele tiden mindre indtil at $i ikke er større end 1930. Og for hver gang den køre koden i for koden igennem printer den en select option ud hvor value og teksten i feltet er i lig med $i. Og når $i bliver 1 mindre for hver gang den køre igennem laver koden derfor 89 select options en fra hvert år 1931 til 2014. 9
Koden (brugerreg.php & brugerreg_validate.js) Når den besøgende er færdig med indtastningen af oplysningerne trykke brugeren på Submit brugerreg.php - Linje 6 <form id= brugerreg name= brugerreg onsubmit= return validateform(); action= brugerregsave.php method= post > Linje 6 Grunden til at vi viser linje 6 er at denne kode beskriver hvad der skal ske når man trykker på Submit. onsubmit= return validateform(); fortæller at når man trykker på Submit skal den køre den funktion der hedder validateform som kan findes i brugerreg_validate.js. (brugerreg_validate.js er langt ind som <script> på linje 4 i brugerreg.php) Scriptet tjekker om den besøgenes input er korrekt eller forkert, og hvis noget er forkert modtager den besøgene en besked om fejlen. Læs mere om dette under punktet der hedder brugerreg_validate.js Såfremt at den besøgene ikke har lavet nogen fejl, bliver brugeren oprettet i databasen. action= brugerregsave.php fortæller at man bliver sendt til brugerregsave.php når man er færdig med at udfylde html formen med korrekt data. brugerregsave.php gemmer dataen i databasen så den besøgende er klar til at bruge deres brugernavn og password til at logge ind på siden. Læs mere om hvordan den gemmer brugeren i databasen under punktet brugerregsave.php. brugerreg_validate.js brugerreg_validate.js tjekker om de forskellige input felter er udfyldt korekt. Hvis de ikke har udfyldt det rigtigt modtager de en fejl besked der forklare dem hvad de har gjort forkert. brugerreg_validate.php - Linje 1-9 function validateform() { //TEXT CHECK var x=document.forms[ brugerreg ][ firstname, lastname ].value; if (x.length < 2) { document.getelementbyid( error ).innerhtml= Indtast venligst minimum 2 bogstaver i fornavn og efternavn ; return false; } Linje 1 Kalder en funktion validateform() {, som er kaldet frem ved tryk på brugerreg.php Submit knap. 10
Koden (brugerreg_validate.php & brugerregsave.php) Linje 4 til 9 Laver en variable kaldet x ud fra brugerreg formens name inputs firstname og lastname. Herpå følger et if statement der kræver at x er over to tegn. Hvis dette ikke er sandt returnerer den med en linje ved div id error, som infomerer brugeren om at indtaste mindst 2 bogstaver i fornavn og efternavn. brugerreg_validate.php - Linje 34-42 var radios = document.getelementsbyname( gender ); var formvalid = false; var i = 0; while (!formvalid && i < radios.length) { if (radios[i].checked) formvalid = true; i++; } if (!formvalid) document.getelementbyid( error ).innerhtm- L= Vælg venligst dit køn :-) ; return formvalid; Linie 34-36 3 variabler bliver lavet. Første radios henter elementet gender ned. Anden laver en variable for outcome false;. Tredje i = 0; Linie 37-39 Her laves et while loop som kort beskrevet gør at hvis en radio button bliver klikket kommer den ud som true og forsætter videre til return. Linje 40-41 Tjekker om formvalid forsat er false; og hvis den er det skriver den i div id error at man skal vælge sit køn. brugerregsave.php Når den besøgende har trykket på submit og koden går igennem valideringen bliver man sendt til denne side. Den trækker data fra brugerreg.php og indsætter det i databasen. brugerregsave.php - Linje 3-5 require_once( thekey.php ); $firstname = $_POST[ firstname ]; require_once( thekey.php ); det der står i thekey.php bliver trykket ind på denne side. require går at den skal bruge thekey.php før siden kan fungere. _once gør at den kun bliver brugt en gang. I større filer, kan man mindste overblikket og få brugt denne linje flere gange. _once gør så den kun bliver hentet ind en gang. $firstname = $_POST[ firstname ]; $_POST[ firstname ] henter dataen fra brugerreg.php i det felt der har name= firstname. Fornavnet bliver derefter gemt i $firstname. 11
Koden (brugerregsave.php) Der er en linje, for hver input i brugerreg.php, der gemmer dataen i en!!! variabel!!!?? Så altså en for fornavn, efternavn, brugernavn, password, email, køn, dag, måned og årgang. Denne data skal derefter indsættes i databasen. brugerregsave.php - Linje 16 $sql = INSERT INTO `patricktofteng_`.`brugerregistration` (`firstname`, `lastname`, `username`, `password`, `email`, `gender`, `day`, `month`, `year`) VALUES (.$firstname.,.$lastname.,.$username.,.$password.,.$email.,.$gender.,.$day.,.$month.,.$year. ) ; Her gemmer vi en sætning i $sql som siger følgende: Indsæt i databasen patricktofteng_ og i tabel brugerregistration hvor følgende felter skal udfyldes fristname, lastname, username, password, email, gender, day, month og year. Hvilket er hvad felterne hedder i databasen. Hvorefter vi fortæller hvad der skal ind i de forskellige felter. Den siger altså at den data fra brugerreg.php skal gemmes i en database der hedder patricktofteng_ i en tabel der hedder brugerregistration. brugerregsave.php - Linje 18-22 $stmt = $mysqli->prepare($sql); $stmt->execute(); // echo $firstname..$lastname..$username..$password..$email..$gender..$day..$month..$year; header( location:login.php?created=1 ); $mysqli->prepare($sql) forbereder det der er gemt i $sql sammen med database forbindelsen. Hvilket bliver gemt i $stmt. $stmt->execute(); Udføre den statement vi har gemt i $stmt. header( location:login.php?created=1 ); Efter brugeren bliver oprettet i databasen, går den til login.php siden og viser en besked om at brugeren er blevet oprettet. Følger rækkefølgen fra før. $firstname, $lastname, $username, $password, $email, $gender, $dat, $month, $year. 12
Koden (login.php & post_login.php) login.php login.php er siden hvor man kan logge ind hvis ens bruger er oprettet i databasen. Siden består af to felter et med brugernavn og et med password. Der udover er der nogen gemte beskeder der siger om man har skrevet sit brugernavn eller password forkert eller hvis man lige har oprettet en bruger. Disse beskeder bliver vist hvis det i url en bliver tildelt. login.php - Linje 33-38 <?php if(isset($_get[ created ]) && $_GET[ created ] == 1 ) {?> <br> <p class= created >Din bruger blev oprettet - Login herover</p> <?php }?> Linje 33 Hvis der i url en står login.php?created og at created=1 (login.php?created=1) Skal den efterfølgende kode printes. I dette tilfælde giver den en besked til en ny oprettet bruger om at brugeren blev oprettet. Når man trykker på login bliver man sendt til post_login.php. post_login.php Her tjekker vi om dataen fra login.php (username og password) om det passer overens med noget i databasen. post_login.php - Linje 9-10 $username=$_post[ username ]; $password=$_post[ password ]; Gemmer henholdsvis username og password fra html formen på login. php i henholdsvis $username og $password. post_login.php - Linje 16-18 $query = SELECT * FROM brugerregistration WHERE username= $username and password= $password ; $result = $mysqli->query($query); $count=mysqli_num_rows($result); Vælger alt fra tabellen hvor username = det som brugeren skrev som brugernavn og at password = det som brugeren skrev som password i html formen. Dette bliver gemt i $query. $result = database forbildelse og select statementet. $count = antalet af rækker fra $result, altså hvis brugernavn og password passer med det i databasen vil $count være = 1. 13
Koden (post_login.php & logout.php) post_login.php - Linje 33-34 $_SESSION[ user_id ] = $result[ id ]; header( location:profile.php ); $result[ id ] er id et fra den bruger der er logget ind. Hvilket bliver gemt i $_SESSION[ user_id ]. $_SESSION[ user_id ] bruges senere til at hente data ud fra den bruger der er logget ind på det givende tidspunkt. Efter $_SESSION[ user_id ] er blevet gemt, kommer brugeren ind på profile.php hvor den bruger man er logget ind som s profil vil blive vist. logout.php Logger brugeren ud og sender dem tilbage til Simply Cupcakes forside. logout.php - Linje 1-6 <?php session_start(); session_destroy(); header( location:index.php );?> Hvis brugeren har skrevet et forkert brugernavn eller password bliver de sendt tilbage til login siden med en besked om at brugernavnet eller passwordet er forkert. Linje 2-5 session_destroy(); logger brugeren af, og header sender herefter brugeren videre til frontsiden af Simply cupcakes. 14
Koden (profile.php) Profile.php En visning af brugerens side, med billede navn og 3 seneste opskrifter. Hvis man er logget ind som den bruger profil man ser på, vil man få muligheden for at oprette en ny opskrift, redigere sin profil og logge af. profile.php - Linje 9-11 if (!isset($_get[ id ])) { $_GET[ id ] = $_SESSION[ user_id ]; } Hvis der i url en ikke står profile.php?id=x hvor X er id et, så vil $_ GET[ id ] være det samme som $_SESSION[ user_id ]; Hvilket gør at hvis man går på profile.php vil den vise profilen på den bruger som er logget ind. profile.php - Linje 26-31 $userimage = images/profile/.$result[ id ]..jpg ; $defaultimage = images/profile/default.jpg ; $result[ id ] er id et på den bruger hvor profile.php?id=x. Hvis der er blevet uploadet et billede hvor navnet er id.jpg så er det = $image. Hvis id.jpg ikke eksisterer så er $defaultimage = $image. Echo er billedet ud hvor $image er stien til hvilket billede den skal vise. profile.php - Linje 50-55 if(($_session[ user_id ]) == $id) { echo <li><a href= opskriftreg.php >Opret ny opskrift</a></li> ; echo <li><a href= profile_edit.php >Rediger profil</a></li> ; echo <li><a href= logout.php >Log af</a></li> ; } Hvis brugeren som du er logget ind med har samme id som i url en profile.php?id=x, så får brugeren en menu frem. profile.php - Linje 80 $image = (file_exists($userimage))? $userimage : $defaultimage; echo <img src=.$image. alt= Billede af.$result[ firstname ]..$result[ lastname ]. > ; $sql = SELECT * FROM `opskriftreg` WHERE `madeby` =? OR- DER by ID DESC LIMIT 3; ; 15
Koden (profile.php) Når brugeren har oprettet en opskrift bliver det vist på profil siden. madeby er et felt i opskriftreg som indeholder hvad svare til brugerens id for den bruger der laver opskriften. Læs mere om dette under opskriftreg.php. Her vælger vi data fra opskriftreg hvor madeby er det samme som profile.php?id=x, vi fortæller den også at den skal liste dem op efter nyeste opskrifter via opskriftreg id, til sidst siger vi at den ikke skal tage mere end 3 opskrifter. profile.php - Linje 94-95 $madebyid = $result[ madeby ]; $madebysql = SELECT * FROM `brugerregistration` WHERE `id` = $madebyid ; profile.php - Linje 118-123 $madebyid = $result[ madeby ]; $user_id = $_SESSION[ user_id ]; if ($madebyid == $user_id) { echo <a href= opskrift_delete.php?id=.$result[ id ]. class= delete_opskrift >Delete</a> ; } Hvis bruger id et på brugeren der er logget ind er det samme som madeby id et har man mulighed for at slette sin opskrift. madeby fra opskriftreg bliver gemt som $madebyi. Vi vælger data fra brugerregistration hvor id er det samme som $madebyi. 16
Koden (profile.php & profile_edit.php) Hvis brugeren ikke har lavet nogen opskrifter: profile.php - Linje 132-139 if(($_session[ user_id ]) == $id) { echo <p>du har ikke oprettet nogen opskrifter endnu.</p> ; echo <a href= opskriftreg.php >Opret din første opskrift</a> ; } else { echo <p>brugeren har ikke oprettet nogen opskrifter endnu.</p> ; } Hvis brugeren som er logget ind ser sin egen profil får han en besked om at han ikke har oprettet nogen opskrifter endnu. Hvis en anden bruger ser hans profil står der en anden besked. profile_edit.php Brugerne har mulighed for at redigere deres profil oplysninger samt uploade et profil billede og skrive en profil tekst. Vi vælger data fra brugerregistration hvor id et svare til id et på brugeren der er logget ind. profile_edit.php - Linje 98 $userimage = images/profile/.$_session[ user_id ]..jpg ; Vi har tideligere fremvist billeder af brugeren på deres profil. Her bruger vi $_SESSION[ user_id ] til at vise billedet på den bruger der er logget ind istedet for at vise billedet for brugeren hvor url?id=x. profile_edit.php - Linje 149-151 echo Køn: <input type= radio name= gender value= M ; if($result[ gender ]== M ) { echo checked ; } echo > ; Her bruges en if statement til at sætte en radio button som checked hvis dens value stemmer overens med det det i databasen. profile_edit.php - Linje 81 $sql = SELECT * FROM `brugerregistration` WHERE `id` =.$_ SESSION[ user_id ]. LIMIT 1; ; 17
Koden (profile_update.php, profile_image_upload.php & opskriftreg.php) profile_update.php Efter brugeren har trykket på gem i profile_edit.php bliver oplysninger updateret i databasen. profile_update.php - Linje 28 $sql = UPDATE brugerregistration SET firstname = $firstname, lastname = $lastname, username = $username, password = $password, email = $email, gender = $gender, day = $day, month = $month, year = $year, description = $description WHERE id =.$_SESSION[ user_id ]. ; Vi updatere oplysningerne hvor id er det samme som id et på brugeren der er logget ind. profile_image_upload.php Gemmer brugerens uploadet billede og tildeler det et nyt navn der tilsvare til brugerens id i.jpg format. profile_update.php - Linje 28 $new_image_name = $_SESSION[ user_id ]..jpg ; $new_image_name = brugeren der er logget ind s id.jpg Hvis billedet fra profile_edit.php blev uploadet får brugeren en besked om at det blev uploadet. Hvis det ikke blev uploadet får en brugeren en anden besked. opskriftreg.php Her kan brugeren indtaste en titel, beskrivelse, tilføje ingredienser, vejledning bagetid, laktosefri eller økologisk samt uploade et billede til opskriften. Det er med et script muligt at tilføje flere ingrediens. opskriftreg.php - Linje 120-122 var MaxInputs = 20; var InputsWrapper = $( #InputsWrapper ); var AddButton = $( #AddMoreFileBox ); Sætter max antal af ingredienser til 20. opskriftreg.php - Linje 124-125 //profile_image = name på input i html formen if(move_uploaded_file($_files[ profile_image ][ tmp_name ], images/profile/.$new_image_name)) var x = InputsWrapper.length; var FieldCount=1; 18
Koden (opskriftreg.php, opskriftregsave.php & opskrift_page.php) x = antal af start felter FieldCount = antalet af felter man tilføjer. opskriftreg.php - Linje 120-122 $(AddButton).click(function (e) { if(x <= MaxInputs) { FieldCount++; $(InputsWrapper).append( <div class= opskriftingbox- >Ingrediens: <input class= opskrifting type= text name= ingredients[] > Mængde: <input class= opskriftamount type= text name= amount[] ><a href= # class= removeclass > </a></ div> ); x++; } return false; }); Når man klikker på #AddMoreFileBox og hvis antalet af felter er mindre end 20 bliver der tilføjet et nyt felt hvor man kan skrive endnu en ingrediens ind. For hver gang der bliver tilføjet bliver x 1 højere. Hvilket bruges til at stoppe antalet af felter ved 20. opskriftregsave.php brugerens opskrifts data bliver gemt i databasen og billedet bliver uploadet med id et på den nye opskrifts id. opskriftregsave.php - Linje 26-27 $new_opskrift_id = $mysqli->insert_id; $new_image_name = $new_opskrift_id..jpg ; id et på den opskrift der bliver oprettet bliver gemt i $new_opskrift_id $new_image_name indenholder opskriftens id.jpg opskrift_page.php Viser en bestemt opskrift efter hvad url en er, f.x opskrift_page. php?id=1 viser opskriften med id 1. opskrift_page.php - Linje 26-27 $madebyid = $result[ madeby ]; $sql = SELECT * FROM `brugerregistration` WHERE `id` = $madebyid ; $madebyid = id et på brugeren der har lavet opskriften, gemt i opskrifreg under feltet madeby. Vi vælger data fra brugerregistration hvor id er det samme som $madebyid. Vi vælger altså data fra brugeren hvor brugerens id er det samme som madeby i opskriftreg. Dette skal bruges til at printe brugerens navn ud for at vise hvem der har skrevet opskriften. 19
Koden (opskrift_page.php, opskrift_delete.php & opskrift_list.php) opskrift_page.php - Linje 56 echo <p>skrevet af - <a href= profile.php?id=.$idresult[ id ]. >.$idresult[ firstname ]..$idresult[ lastname ]. </a></p> ; Linje 56 echo er skrevet af - fornavn efternavn ud svarene til brugeren der har oprettet opskriften. Klikker man på brugerens navn kommer man ind på deres profil side. opskrift_page.php - Linje 94-97 if ($madebyid == $user_id) { echo <a href= opskrift_delete.php?id=.$result[ id ]. class= delete_opskrift >Delete</a> ; } Hvis brugeren der har lavet opskriften også er brugeren der er logget ind, kan brugeren slette opskriften. opskrift_delete.php Sletter en opskrift hvor url en har?id=opskrift id opskrift_delete.php - Linje 7-8 $id = $mysqli->real_escape_string($_get[ id ]); $sql = DELETE FROM `patricktofteng_`.`opskriftreg` WHERE `id` = $id LIMIT 1; ; Efter opskriften er blevet slettet kommer brugeren tilbage til profil siden. opskrift_list.php Lister alle opskrifter fra databasen. opskrift_list.php - Linje 21 if (!($result = $mysqli->query( SELECT * FROM opskriftreg OR- DER by ID DESC ))) { Vælger alt data fra opskriftreg efter seneste id nummer. 20
Testscenarie del 1 af 2 Testen lyder på at man som bruger skal ind på hjemmesiden og derefter oprette sig som bruger, logge ind på hjemmesiden og oprette en opskrift til hjemmesiden med sin brugerprofil. Fra forsiden af hjemmesiden begiver man sig ind på enten brugerhjørnet eller blot Log ind for at finde muligheden for at oprette sig som burger. En standard brugeroprettelses form bliver præsenteret for brugeren, alle felterne der skal udfyldes har korte instruktioner stående ved sig, så brugerne ved lige præcis hvor mange tegn der må benyttes og hvilke tegn det må indeholde, og det virker et indtastet brugernavn på mindre end 7 tegn bliver ikke godkendt, og en fejlbesked bliver returneret til brugeren i bunden af oprettelsesformen: Benyt venligst et brugernavn på over 7 tegn. Efter man har skrevet sine konto-detaljer og trykket submit bliver man viderestillet til log ind siden, her er en fin lille login form hvor du indtaster dit brugernavn og kodeord, brugeren bliver mindet om at din bruger blev oprettet Login herover i midten af loginformen, blot så brugeren kan blive forvisset om at deres bruger er i oprettet i systemet. LÆS VIDERE PÅ NÆSTE SIDE 21
Testscenarie del 2 af 2 Opskrift registreringsformen er en del mere kompleks i forhold til bruger registreringsformen og loginformen men alle felter der skal udfyldes har en kort vejledning til beskrivelse af det påkrævede indhold. Konklusion af testscenarie Hermed konkluderes vejen fra anonym besøgende til oprettet bruger hos Simply Cupcakes med et aktivt opslag, det tog lidt under 5 minutter og uden tekniske problemer eller fejl-beskeder af anden art. Når man har indtastet de korrekte oplysninger og er logget ind starter brugerens session og man lander på sin profilside, her er det meste af pladsen på siden dedikeret til en fremtidig samling af alle de seneste opskrifter du som bruger har oprettet. På profilsiden er der også mulighed for at redigere profilen i form af at lave om på dine konto-detaljer samt uploade et profilbillede, alle disse ting virker som de burde. For at komme videre til registrering af opskrifter er der mulighed for at klikke på sidepanelet eller under seneste opskrifter på knappen Opret din første opskrift. Der er ikke rigtig nogen tekniske begrænsninger hvad angår registrering af opskrift udover at, som der også står beskrevet i vejledningen til det pågældende felt, at ingrediens feltet helst ikke må indeholde kommaer da det ødelægger database strings. Udover dette er der er også krav til at vejledningsfeltet, beskrivelsesfeltet osv. ikke er for kort, udover at værende et teknisk krav er det også for at brugerne giver en ordentlig detaljeret beskrivelse og vejledning til deres opskrifter på sitet. 22
Designvalg og det tekniske Hvilke beslutninger tog vi mht. designvalg og det tekniske (test) og hvordan påvirkede det slutresultatet? Eftersom at mange at de tekniske krav til opgaven allerede var implementeret på hjemmesiden, eller allerede kommet på tegnebrættet, følte vi at det var på sin plads at sætte nye krav til funktionaliteten af de enheder der skulle implementeres på hjemmesiden til dette projekt. Vi besluttede derfor at vi ville have alle formerne til at være fuldt funktionelle, dertil ville vi også skabe en brugerprofilside til hver bruger oprettet i vores system, hvor de havde adgang til deres egne opskrifter, samt muligheden for at redigere deres kontodetaljer, inklusiv muligheden for at uploade et eventuelt profilbillede. Responsive design var allerede implementeret på hjemmesiden, det eneste der også skulle gøres responsive i denne omgang var de nye sider da de så anderledes ud og havde deres egne indstillinger der skulle tweakes. Hvad angår designvalg holdt vi os mere eller mindre inden for de samme rammer designmæssigt, som vi allerede havde skabt i opgavens første omgang. Vi sørgede for at benytte de samme farver som vi hidtil havde benyttet til at style og designe de nye sider på hjemmesiden hvorpå man skulle have mulighed for at oprette sig som bruger, logge ind osv. Diverse registreringsmoduler blev mere konservative mht. design eftersom at de skulle opretholde deres funktionalitet, samt at de skulle bestå af nogle meget klare guidelines brugeren helst ikke skulle kunne misforstå. Hjemmesiden endte ud med at blive (næsten) fuld funktionel med sit allerede eksisterende konsistente design over hele linjen. Hjemmesiden føles mere ubetinget eftersom at der er mange tekniske barrierer der er blevet nedlagt i arbejdsprocessen, brugeren har de muligheder der bliver lovet og forventet på en hjemmeside som denne. Hvilke alternativer var der mht. designvalg og det tekniske, hvordan ville det passe ind i slutresultatet? På den tid som vi fik tildelt i projektet mener vi ikke der var en alternativ måde at få tingene gjort på, designmæssigt vil der altid være muligheder for at gøre tingene på en anden måde, men det følte vi ikke der var behov for. Med den tekniske del i fokus kunne vi, hvis vi havde haft tiden til det, godt have lavet en masse andre ting til det eksisterende i form af sikkerhed til vores brugere som det fungere nu er der en del loop holes i systemet, der tillader at man let kan slette andres opskrifter osv. og lige netop dette har vi ikke haft tiden til at undersøge ordentligt, for at være i stand til at implementere det i denne omgang. 23
Konklusion Vi lavede en let overskuelig brugeroprettelsesform. Vi havde taget udgangspunkt i andre lignende hjemmesiders oprettelsesmodul og kommet frem til en simpel funktionel løsning, der ud fra diverse felter og kriterier gav brugeren vejledning til hvordan det skulle udfyldes. For at brugeren nemt havde adgang til oprettelsen på hjemmesiden. Udover dette gav vi hver oprettet bruger på hjemmesiden sin helt egen brugerprofilside hvorpå det er muligt at oprette/dele opskrifter med de andre brugere på hjemmesiden. Her har brugeren adgang til al sin personlig information og indlæg på hjemmesiden, brugeren kan hermed redigere og ændre på deres brugerprofil efter ønske. Det var et mål med opgaven at brugeren skulle opleve fuldt responsive design på hele websitet på de forskellige platforme uden begrænsninger hos den grafiske del af hjemmesiden, såvel som den tekniske og funktionelle del af siden. Slutresultatet skulle bestå i at brugeren ville være i stand til at navigere rundt på hjemmesiden, samt oprette opskrifter på hjemmesiden uden besvær. 24
Kilder Links http://www.w3schools.com/sql/ http://www.w3schools.com/sql/sql_orderby.asp http://www.w3schools.com/sql/sql_where.asp http://www.w3schools.com/sql/sql_update.asp http://www.w3schools.com/sql/sql_datatypes.asp http://www.w3schools.com/php/php_intro.asp http://www.w3schools.com/php/php_includes.asp http://codular.com/php-mysqli http://www.mediacollege.com/internet/javascript/form/limit-characters.html http://www.w3schools.com/js/js_form_validation.asp http://jsfiddle.net/fhgqs/ - Radio button javascript validation http://stackoverflow.com/questions/10041196/userid-when-logged-in-php http://stackoverflow.com/questions/12701422/deny-access-to-multiple-files-in-htaccess http://www.webassist.com/forums/posts.php?id=16036 http://stackoverflow.com/questions/9767521/count-and-display-number-ofcharacters-in-a-textbox-using-javascript http://www.yourinspirationweb.com/en/jquery-tips-tricks-how-to-limit-characters-inside-a-textarea/ http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=javascript_43 http://stackoverflow.com/questions/19738283/mysqli-last-insert-id http://www.php.net/manual/en/function.ob-start.php http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery/comment-page-1 Bøger Forbes, Allan : The Joy of Programming PHP, Udgave 1, Forbes, 2013 Forbes, Allan : The Joy of Programming PHP : Sessions, Udgave 1, Forbes, 2013 Forbes, Allan : The Joy of jquery : Udgave 1, Forbes, 2013 25
isset($_get['id'])) { $id = $mysqli->real_escape_string($_get['id']); $sql = "SELECT * FROM `opskriftreg` WHERE `id` =? LIMIT 1;"; $stmt = $mysqli->prepare($sql); $stmt->bind_param('s', $id); $stmt->execute(); $res = $stmt->get_result(); SESSION_DESTROY(); if (mysqli_num_rows($res) > 0) { while ($result = $res->fetch_array(mysqli_assoc)) { echo "<div class=\"article\">". "<div class=\"title\">".$result['title']."</div>". "<div class=\"body\">".$result['description']."</div>"