Nettside med database

(Nettsiden er optimert for bruk i Google Chrome, derfor er det best om dere ser på siden i Google Chrome).

Jeg valgte å gå videre med konseptet SkiBillett, som jeg brukte når jeg designet en applikasjon med Adobe Illustrator og viste den frem i Marvel.

Nettsiden min består av en index og tre undersider. Alle undersidene, med unntak av “Skisentere og åpningstider” bruker en del javascript til animasjoner og lignende. To av undersidene, “Kjøp billetter” og “Mine billetter” har navigasjon inne i siden, får å endre på hva som vises på siden. Knappene i menylinjen i header fungerer som navigasjon mellom undersidene, og trykker man på logoen min, i venstre hjørne, kommer man tilbake til index av nettsiden.

Hvordan jeg brukte Firebase og JSON-filen i nettsiden

Jeg startet med å lage en JSON-fil, la inn filen i Firebase, og refererte til Firebase med javascript. På denne måten ble data som jeg skrev i JSON-brukt i undersiden “Kjøp billetter”. Jeg brukte også Firebase til å lagre “kjøp” som er gjort på nettsiden, med en unik ID, antall, og navn på vare definert automatisk.

I starten av idémyldringsprosessen planla jeg at billetten man valgte, ble lagret i Firebase, før man så ble sendt videre til “Mine billetter” undersiden. I tillegg ville jeg at “Mine Billetter” undersiden skulle være unik; at den skulle vise den billetten du hadde “kjøpt”, på den forrige undersiden. Problemet er at for at denne prosessen skal fungere må kjøpet knyttes til brukeren; den må lagres i Firebase med en brukerID, eller en annen form for tilknytning og lagring opp mot brukeren. Dette har vi ikke lært og etter litt research fant jeg ut at det var litt for avansert.

På grunn av dette lagde jeg “Mine billetter” undersiden enklere; bare med et bilde som skifter basert på trykking på enten knappen: “Gyldige” eller “Utgåtte”, samt en knapp nederst som viser QR-kode, når man trykker på den. (dette gjorde jeg ved bruk av bootstrap sin “module”.

Den siste undersiden, “Skisenter og åpningstider”, er en enkel informasjons-side, lagd med HTML og litt styling.

For at nettsiden skal være kompatibel med enheter i alle størrelser, måtte jeg bruke responsivt design. Dette har jeg lagt inn i alle undersidene, og jeg har følgende brakpoints på de forskjellige undersidene:

“Kjøp billetter”: 736px og 480px

“Mine billetter”: 480px

“Skisentere og åpningstider”: 480px

Header, på alle undersidene, og index: 789px

Det er verdt å merke seg at gjennom hele nettsiden, spesielt på knappene, har jeg brukt mye Bootstrap for å gjøre stylingen av knappene enklere. I tillegg har jeg forsøkt å beholde de samme fargene på hele nettsiden for å skape et mer helhetlig prosjekt.

18789163_874062842732573_2014454678_o

UML for attributtene til en billett, samt relasjonene mellom nettsiden, kundene, billettene og skisenterne. (hvis det er noe dere lurer på eller jeg har skrevet feil på relasjonskartet eller UML-modellen for JSON-objektene, så si ifra så skal jeg forklare/rette opp feilen.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s