Gruppe 44: Håkon Andre Sylte Garnes Tobias Hallén

Presentasjon om: "Gruppe 44: Håkon Andre Sylte Garnes Tobias Hallén"— Utskrift av presentasjonen:

1 Gruppe 44: Håkon Andre Sylte Garnes Tobias Hallén

2 Om Samfunnet Bislet Studentforening Studentpub
Kjelleren til Pilestredet 52 Tilbyr studenter et godt sosialt tilbud

3 Problemstilling Tidligere nettside: Utdatert og kjedelig
Bygd opp som en bloggside Oppdragsgiver måtte selv oppdatere nettsiden ofte Begrenset tilknytning til sosiale medier Ingen informasjon om fremtidige arrangementer Høsten 2016 fortalte Samfunnet Bislet at de over lang tid hadde slitt med en svært utdatert og kjedelig nettside. Vi fikk høre at nettsiden var i svært lite bruk og ikke hadde vært oppdatert på lang tid. Nettsiden var bygd opp som en blogg, som vil si at det krever regelmessige oppdateringer fra oppdragsgiver. Men på nettsiden hadde det faktisk ikke vært skrevet nye poster siden 2014. Overfor blogg-delen kunne man i tillegg finne en bildekarusell med gamle oversikter over månedsprogram. Man ble derfor umiddelbart bombardert med svært mye unødvendig og utdatert informasjon, mens det fantes null informasjon om fremtidige arrangementer og hendelser. Nettsiden hadde også svært begrenset tilknytning til sosiale medier, der det bare var et par bildeikon som videreførte deg til den ønskede siden. Under disse bildeikonene fant man en oversikt over “Samfunnet Bislet Events”, hvor det var ingen informasjon oppgitt og man fikk beskjed om at det er “Ingen arrangement å vise”.

4

5 Generelle mål for prosjektet
Utvikle en ny nettside: Oversiktlig Brukervennlig Selvstendig Sterkere tilknytning til sosiale medier Informasjon om arrangementer skal oppdateres automatisk Grafisk tiltalende Responsiv design Universelt utformet Målet med prosjektet var derfor å utvikle en ny nettside, som blant annet var brukervennlig, oversiktlig, og selvstendig, ved at den alltid ville presentere brukeren for relevant og oppdatert informasjon. Nettsiden skulle også ha sterkere tilknytning til sosiale medier, slik at bilder, arrangementer, og annen informasjon holder seg oppdatert uten at oppdragsgiver selv må gå inn på nettsiden og ta hånd om dette. Det skulle holde å legge ut informasjon om et arrangement på Facebook én gang, i stedet for at man igjen må gjøre det samme på nettsiden. Videre skulle nettsiden være grafisk tiltalende og tilfredsstillende å bruke, i tillegg til å være utformet med fokus på responsivt design, slik at nettsiden fungerer på flere forskjellige skjermstørrelser.

6 Teknologier HTML CSS JavaScript PHP JSON Bootstrap jQuery
Jeg har først og fremst brukt HTML og CSS, som er svært standard for webutvikling. Videre har jeg brukt JavaScript sammen JavaScript biblioteket jQuery, som forenkler klientskripting av HTML, for å gjøre nettsiden mer dynamisk og interaktiv. I prosjektet ble PHP brukt for å kunne gjøre nettsiden mer dynamisk, ved at man automatisk kan hente inn bilder, arrangementer, og annen informasjon fra sosiale medier. PHP støtter nemlig datautvekslingsformatet JavaScript Object Notation (JSON), som var svært nyttig for å hente ut den tidligere nevnte informasjonen fra Facebook og Instagram. Til slutt har jeg brukt Bootstrap, som er et front-end web-rammeverk for utforming av nettsider og webapplikasjoner. I prosjektet har jeg brukt Bootstrap for å kunne gi nettsiden et størst mulig profesjonelt preg, i tillegg å enklere kunne utforme nettsiden med fokus på responsivt design.

7 Kommende arrangementer - kode
Jeg tenkte nå å ha en kode-demonstrasjon av denne komponenten, ettersom at det er en av de viktigste delene av nettsiden. For å utvikle denne oversikten måtte jeg først og fremst finne Facebook-page IDen til Samfunnet Bislets Facebook-side, som man enkelt finner ved å bruke f.eks. findmyfbid.com. Videre måtte jeg registrere meg som Facebook-developer og opprette en applikasjon, for å få en Facebook-developer app ID og en secret app ID. Disse to IDene bruker man så for å finne sin access token. Deretter spesifiserte jeg fra og til - datoene slik at man får alle de kommende Facebook-arrangementene ett år etter det inneværende året, noe som kan tilpasses ved å endre “year_range”. Det er viktig at den står på 1, slik at man fortsatt vil kunne hente arrangementer i Januar når man befinner seg i Desember. Så brukte jeg «strToTime» for å konvertere datoene til unix-timestamps, som vil si totalt antall sekunder siden 1. januar 1970, også kjent som Unix Epoch. Ved bruk av JSON-linken sammen med de bestemte feltene i variabelen «fields», i tillegg til access token og dato-begrensning, så henter jeg JSON-strengen jeg behøver. Man får da JSON-innholdet via PHP-funksjonen “file_get_contents()”. Neste steg var å dekode JSON-strengen ved hjelp av funksjonen “json_decode()” og så konvertere den til en assosiativ array, noe som skjer ved at man setter den andre parameteren til true. Man må også bruke “JSON_BIGINT_AS_STRING” - parameteren, ettersom Facebook bruker large integers (eid), og jeg ønsker ikke at PHP skal forenkle verdien. Videre oppretter man en tabell hvor man skal plassere Facebook-arrangementene, i tillegg til en variabel som teller antall arrangementer.

8 Innenfor tabellen ligger en for-løkke som skriver ut arrangementene, i tillegg til en if-setning som begrenser antall arrangementer til maks tre. Innenfor for-løkken setter jeg så arrangement-verdiene, som er representert av variabelen «obj», i egne variabler, samtidig som jeg tar med variabelen «X», som er en del av for-løkka. Man har da variabler for dato, tid, bilde, arrangement-ID, arrangement-navn, beskrivelse, i tillegg til stedsnavn, by, land, og postnummer, som alle blir en del av «location» - variabelen. I tillegg bruker jeg «isset» med en «ternatory operator», der man f.eks. sjekker at variabelen «description» er satt, og hvis den ikke er det, så blir «description»-variabelen satt til en tom streng i stedet.

9 Til slutt legger jeg variablene i tabell, som også ligger innenfor for-løkken. I tillegg legger jeg til ikoner som representerer dato, klokkeslett, sted, informasjon, og Facebook-lenke. Den tomme raden i bunn er for å få litt ekstra plass mellom de forskjellige arrangementene, mens «td rowspan=8» er for å plassere bildet ved siden av arrangement-informasjon.

10 https://samfunnettest.000webhostapp.com/

11 Oppsummering Læringsutbytte
Utvikling av nettside Tilknytning mellom sosiale medier og nettside Prosjektarbeid med flere parter Nettsiden kan gi økt vekst hos Samfunnet Bislet Gjennom dette prosjektet vil jeg først og fremst si at jeg har hatt stort læringsutbytte i forhold til prosessen å utvikle en nettside. Jeg påstår at jeg sitter igjen med en betydelig dypere kompetanse innenfor blant annet HTML, CSS, PHP, og JavaScript, i forhold til da jeg begynte prosjektet. Jeg har også fått muligheten til å lære mye om tilknytning mellom sosiale medier og nettsider. Spesielt bruk av Facebooks og Instagram API har vært både spennende og lærerikt. Gjennom prosjektet har det også vært viktig å ha en åpen dialog med forskjellige parter, det vil si oppdragsgiver og prosjektveileder, som jeg er svært sikker på at jeg vil dra nytte av i arbeidslivet. Jeg vil si meg svært stolt av sluttproduktet jeg har utviklet, og med denne nettsiden vil jeg tørre å påstå at Samfunnet Bislet vil kunne nå frem til et enda større publikum, og oppnå ytterligere vekst i studentforeningen deres.