Web DB project - http://www.hma-design.dk/crowdfunding/index.html 3. semester - 3. projekt - Gruppenr. 23 MULA - September 2015

Web DB project - http://www.hma-design.dk/crowdfunding/index.html 3. semester - 3. projekt - Gruppenr. 23 MULA - September 2015

FAKTAARK PROJEKTTITEL... Web DB project URL... CFunding.IT.dk Mette Line Tarp Jørgensen Email cph-mj420@cphbusiness.dk Portfolio metteline.nu SKOLE... Cphbusiness HOLD... CLmul-a14e ÅRGANG... 2014 Rie Larsen Email cph-rl71@cphbusiness.dk Portfolio rie-larsen.com HOVEDOMRÅDER... Interaktionsudvikling Kommunikation Simone Fie Truelsen Email cph-st88@cphbusiness.dk Portfolio simonetruelsen.dk Helena Maria Abel Email cph-ha105@cphbusiness.dk Portfolio hma-design.dk

INDHOLDFORTEGNELSE INDLEDNING 4 SCRUM 4 PBS 5 Planning sheet 6 Sprint Backlog Burndown 7 Burn Down Chart 8 IDEUDVIKLING 9 Kaffemaskinen 10 DESIGNVALG 11 Farver 11 Typografi 12 One-line design 12 WEBSITE 13 Mock-up1 14 Mock-up2 14 Mock-up3 15 Mock-up4 15 Mock-up 5 16 Mock-up 6 16 Mock-up 7 17 Navigations diagram 18 ER-DIAGRAM 19 ATTRIBUTTABEL 20 USE CASE 21 Use case 1 22 Use case 2 22 DATABASE, SQL, PHP 23 Login & sign-up 24 3

INDLEDNING Crowdfunding er en ny form for fundraising. Dette giver ideudviklerne og iværksætterne mulighed for at få hjælp til finansieringen af nye projekter i form af donationer fra andree. Konceptet går altså kort sagt ud på, at hvis man har en idé, som man ønsker at føre ud i verden, så kan man gå ind på et crowdfunding-website og bede om donationer fra eksempelvis personer som er interesserede i projektet eller investorer. Hertil findes der forskellige former fra crowdfunding, blandt andet rewardbaseret crowdfunding, som vi har valgt at lægge vægt på i vores projekt. Ved rewardbaseret crowdfunding forståes, at når personen der har doneret et bestemt beløb til projektet/ideen, så modtager denne en form for ydelse til gengæld (eksempelvis en kaffemaskine, som er den idé vi har udviklet). I dette projekt er vi blevet stillet til opgave at lave et website-template for crowdfunding med en dertilhørende database. På dette website skulle iværksættere, ideudviklere, investorer og andre interessenter have mulighed for at donere penge og registrere nye projekter i databasen samt bagefter kunne søge i databasen efter projekterne. SCRUM I dette forløb er vores projekt planlagt og udarbejdet efter den agile udviklingsmetode scrum. Da vi har fået stillet til opgave at udarbejde en database, er scrum den oplagte udviklingsmetode at bruge. Scrum tager nemlig hensyn til, at udviklingen af en database kan være en uforudsigelig og kompliceret opgave. Derfor er der både fleksible tidsplaner, fleksible deadlines og krav kan ændre sig i løbet af processen. Først og fremmest har vi lavet en PBS, som indeholder de forskellige ting, som vi har skulle lave. Derudfra har vi lavet et planning sheet. Her har vi struktureret hvad vi har skulle lave, og hvor lang tid og hvor mange ressourser, vi skulle bruge på det. Næste skridt i planlægningen er Sprint Backlog Burndown. Her er planlægningen delt op, hvor man kan se hvor meget tid, man skal bruge på de forskellige ting per dag. Til sidst beregnes der et BurnDownChart, som giver et overblik over, hvad der skal laves. 4

PBS WEB DB Front-end Back-end Rapport Visuel identitet PHP & SQL Planlægning Responsivt design Database Layout & opsætning HTML, CSS & JS ER-Model & Attribut tabel Analyse & Dokumenation Navigationsdiagram Use case/user story Mock-ups Crowdfundings MySQLWorkbench 5

Planning sheet Daily working hours: 8 No. of Sprint Days: 10 Max. hours of work (resources): 240 6

Sprint Backlog Burndown No of days in the sprint: 10 Linear count down based on the resources available: 22,3 7

Burn Down Chart 8

IDEUDVIKLING App-baseret Til at starte med satte vi os i gruppen for at få en samlet forståelse af hvad crowdfunding egentligt er for noget. Herudfra skulle vi finde et emne, som vores portal skulle omhandle. Herfra gik vi i gang med at brainstorme. Dansk Lys i hjemmet Gør din hverdag lettere Kaffemaskine One-line figurer Skulle det handle om velgørenhed, investering eller lidt af det hele. Vi var afklaret om at vi skulle specificere det. Næste spørgsmål var, hvordan at man får folk motiveret til at ville støtte de her projekter. Hvad ville vi selv støtte? Innovativt Iværksætteri Web DB Simpelt design Derfor har vi valgt at det skal være dansk iværksætteri, som kan gøre hverdagen nemmere. Derudover skal det være rewardbaseret. Så hvis folk donerer produktets beløb modtager de også produktet. På den måde støtter de både projektet, og får noget igen. I den forstand bliver det også en win-win-situation. Kategorier Crowdfunding Velgørenhed Lynhurtigt fik vi også ideen til et par eksempler på, hvad der ville gøre vores hverdag lettere. Rewardbaseret Donering 9

Kaffemaskinen 70% af danskerne er B-mennesker. Det betyder at de snoozer det meste af morgenen, og at kaffen er et must. Lyder det genkendeligt? Wake-up-coffee er et koncept, som vi har udviklet for at gøre hverdagen endnu nemmere. Kaffemaskinen er forbundet med dit netværk, og på den måde kan den få forbindelse til den tilhørende app, som du har på din smartphone. På app en stiller du dit vækkeur, og første gang at det ringer starter din kaffemaskine. Anden gang er din kaffe færdig. Derudover har app en mange andre funktioner. Du kan være i kontakt med kaffemaskinen uanset hvor i landet at du er. Alt du skal gøre at fortælle app en hvad du vil have og hvornår at du vil have det? Kaffen er lavet på tilhørende fairtrade bønner, og app en fortæller dig, hvornår at der skal fyldes bønner og mælk på maskinen. 10

DESIGNVALG Farver PRIMÆRE FARVER SEKUNDÆR FARVER BLÅ CMYK: 28/8/8/0 RGB: 182/206/ 217 HEX: B6CED9 MØRKEGRÅ CMYK: 59/44/48/58 RGB: 40/47/47 HEX: 282F2F HVID CMYK: 1/1/1/0 RGB: 249/249/249 HEX: F9F9F9 Vi har valgt en blå og mørkegrå farve som vores gennemgående farver, og hertil en hvid farve for at skabe noget kontrast. Den blå farve har vi valgt for at give vores visuelle identitet et troværdigt design. Farven er behagelige, men stadig iøjenfaldende og farven fremhæver vores visuelle identitet. For at skabe noget kontrast til den blå og mørkegrå, har vi gjort brug af en hvid farve. Den hvide farve bruger vi blandt andet som baggrund på websitet. For ikke at blænde brugeren med en helt hvid farve, har vi knækket den lidt og brugt farvekoden #F9F9F9. Til teksten på websitet har vi brugt den samme hvide farve, da den går godt sammen med både den blå og mørkegrå farve. Samlet set går vores farver godt med hinanden og skaber en god harmoni. Dette er vigtigt, da det vil give brugeren en god oplevelse, og på den måde få lyst til at enten starte et projekt eller donére penge til et projekt. 11

Typografi På vores website gør vi brug af Helvetica Neue Light. Helvetica Neue er en sans-serif typografi og vi har brugt light som font. For at adskille overskrifter og brødtekst har vi gjort overskrifterne tydeligere ved at gøre dem en del større. På den måde adskiller de sig fra hinanden samtidig med at de egentligt har et ens udseende. Generelt har vi brugt Helvetica Neue Light, da den er letlæselig og har et moderne udtryk. På denne måde fanger vi både målgruppen og gør brug af en typografi og font, som ikke ses alle steder. Single-line design I vores logo, har vi valgt at gå efter et single-line design. Dette betyder, at vores logo-mark er lavet af en streg. Dette er tegnet i fri hånd, og derefter har vi tegnet det op i illustrator. Denne streg forestiller en pære, og skal illustrere at corwdfunding og iværksætteri er nytænkende. HELVETICA NEUE LIGHT Helvetica Neue Light: ABCDEFGHIJKLMNOPQRSTUVWXZYÆØÅ Abcdefghijklmnopqrstuvwxyzæøå 0123456789(!? #&/;,:.) Derudover har vi lavet en tilhørende logo-type, hvor at firmaets navn står. Her har vi også tegnet bogstaver i fri hånd. Her har vi lavet et bogstav ad gange i single-line design. 12

WEBSITEBSITE På vores website er vi gået efter de farver og den typografi, som er nævnt i det tidligere afstand. Websitets design er simpelt. 13

Mock-up 1 Mock-up 2 14

Mock-up 3 Mock-up 4 15

Mock-up 5 Mock-up 6 16

Mock-up 7 17

Navigationsdiagram CFunding.IT Forside Om os Projekter Start projekt Søg projekter Opret projekt Donér 18

ER-DIAGRAM 19

ATTRIBUTTABEL Entiteter user project owner donation Attributter Værdi Datatype user_id 1 - X INT first_name a - Å VARCHAR(40) last_name a - Å VARCHAR(40) address All character VARCHAR(65) phone 1-9 INT(10) email All character VARCHAR(55) password All character VARCHAR(55) zip_code 1000-9999 INT(4) city a - Å VARCHAR(30) p_id 1 - X INT p_title All character VARCHAR(100) p_description All character TEXT p_goal 1 - X INT start_date YYYY-MM-DD DATE end_date YYYY-MM-DD DATE category_id 1 - X INT category_name a - Å VARCHAR(30) user_user_id 1 - X INT project_project_id 1 - X INT user_user_id 1 - X INT project_project_id 1 - X INT amount 1 - X INT date YYYY-MM-DD DATE Noter Primary, NOT NULL Unique Primary, NOT NULL Unique Foreign, NOT NULL Foreign, NOT NULL Foreign, NOT NULL Foreign, NOT NULL Unique 20

USE CASE Til vores website har vi lavet en use case. Denne use case viser hvad brugeren har mulighed for, at foretage sig, og hvad at adminstratoren kan redigere i. Opret projekt Read, update, delete På næste side har vi detaljeret beskrevet i detajler hvad der foregår, når brugeren henholdsvis opretter et projekt, og når brugeren donerer penge til et projekt. Bruger Donér til projekt Admin Det står beskrevet hvad at brugeren skal gøre, for at have mulighed, for at foretage sig disse handlinger. Dernæst står der beskrevet hvordan handlingerne foregår, og hvad der sker, når de har foretaget handlingen. Kundeservice Søge i projekter Søge efter kategori Redigere kundeoplysninger 21

Use case 1 NAME: Oprettelse af projekt. PRECONDITIONS: Inden brugeren kan oprette et projekt, skal de være oprettet som bruger. BASIC COURSE: Brugeren finder sign-up siden og indtaster sine oplysninger og trykker på en submit-knap. Er brugeren ikke allerede oprettet og logget ind, når vedkomne prøver at trykke på knappen Start nyt projekt, vil brugeren få mulighed for at oprette sig som bruger her. Brugerens oplysninger, samt oplysninger om det nystartede projekt bliver sendt til databasen, og der bliver oprettet en side med det nye projekt, som man herefter kan søge efter under kategorier. CONDITION: Brugeren indtaster sine oplysninger i en formular. Oplysningerne ryger ind i de forskellige tabeller i databasen, så de er struktureret på en ordentlig måde, der er tilpasset vores system. (create, read) POST-CONDITION: Informationerne er gemt i databasen, og kan nu bruges til at vise et nyt projekt på hjemmesiden. Use case 2 NAME: Donér pengebeløb. PRECONDITIONS: Man skal være oprettet som bruger og være logget ind, for at kunne donere penge til et projekt. BASIC COURSE: Brugeren finder et interessant projekt, og trykker på knappen støt projekt, og bliver her sendt videre til en non-functional paypal side. CONDITION: Brugeren indtaster et penge beløb og de bliver indsendt til databasen, sammen med brugerens oplysninger. POST-CONDITION: Beløbet og brugeren bliver gemt i databasen, så man nede under hvert projekt kan se, hvem der har doneret til hvert projekt. (read) 22

DATABASE, SQL, PHP Da vi begyndte dette projekt, havde vi i tankerne at vi skulle have et website med en fungerende sign-up og login funktion, samt at man skulle have mulighed for at oprette et nyt projekt. Man skulle senere have lov til at søge mellem de oprettede projekter via en kategori liste. Vi gik derfor i gang med at lave vores ER-diagram og vores tabeller som skulle bruges til at indsætte data i databasen. Vores tabeller virker i MySQL Workbench og vi kan her fra godt oprette projekter, brugere og donationer (se SQL filen: kode.sql.sql eller uddraget fra filen til højre). Vi forsøgte at indsætte data ind i vores tabeller via PHP, sådan så dette kunne virke på vores website, men vi stødte ind i en masse problemer, da vi ville bruge to forskellige tabeller i en formular. Efter en masse mislykkede forsøg og hjælp fra klassekammerrater samt vejledning, har vi besluttet os for at aflevere websitet hvor det ikke taler sammen med databasen, men i stedet for dokumentere vores arbejde med tabeller mm. Igennem de bilag vi har vedlagt. 23

Login & sign-up Vi har på 2. semester fået undervisning af Marc, hvor vi lærte at lave et login system. Dette bruge vi til at oprette en bruger, og vores værdier blev lagret i databasen. Da vi senere skulle bruge det til at logge in, kunne vi ikke få det til at fungere med SESSION_ START. (billede 1 og 2) billede 1 billede 1 24

Kategori Under projekter har vi gjort således, at man kan trykke på en kategori og se de projekter under den valgte kategorier og gå ind på projekterne og se detaljerne hertil, men dette har vi ikke kunne få til at fungere trods vi har brugt koderne fra undervisningen. Vi har fået den til at vise efter p_id, men ikke category_id. 25