Gruppe prosjekt del 3 INFO134 Klientprogrammering Vår 2017 Kandidatnummer: 304, 298
Del 1 Forholdet mellom HTML, JavaScript og MongoDB HTML, er et markeringsspråk for hypertekst. HTML benyttes for å strukturere informasjon og vektlegger det semantiske i et dokument. Javascript et programmeringsspråk som ofte er brukt for å legge til et interaktivitet og dynamikk på nettstedet. Javascript kjører både på klientmaskinen hos en bruker men kan også kjøres fra en server eller begge samtidig. Ved bruk av Javascript kan en lage, hente ut og manipulere elementer i HTML. Javascript benyttes for å koble til MongoDB serveren og hente ut, endre og legge til informasjon. JSON kan benyttes som en struktur i MongoDB, istedenfor å hente ut eller iterere igjennom databasen hver gang kan man aksessere direkte til objektet man er ute etter. Objektsamlingen blir lagret som en collection og separert hver for seg som ulike documents i kolleksjonen. REST API (REpresentational State Transfer Application Interface) er en måte å distribuere hypermedia systemer og gi interoperabilitet mellom datasystemer på internett. Det er altså et applikasjonsprogramgrensesnitt som bruker HTTP forespørsler for å GET, PUT, POST og DELETE data. Hvordan koden finner film id en bruker har lånt I index.html kjøres det en onload funksjon som ber javascript om å utføre setup_frontpage() metoden i det siden lastes. Denne metoden kjører først en XMLHttpRequest til MongoDB databasen for å hente ut ( GET ) data fra en gitt brukerprofil som befinner seg i profiles kolleksjonen. Den filtrerer på brukernavn og legger til hvilken bruker det er snakk om i URL en, som er en lokal variabel (current_user = bruker1 ) i dette tilfellet. Javascript spesifiserer at datane skal hentes ut i JSON format ved xhr.responsetype = "json";. Dataene blir så lagret i en array profile som blir jobbet med videre. Index.html har en ul (unsorted list) tag med id mine_lån. Denne listen blir hentet og addressert til en loans_list variabel. Videre vil det sjekkes om det finnes en loans_list og en for løkke kjører gjennom alle movie_id_index som finnes i profile.loans arrayet til bruker1. For hver eneste film id som finnes i bruker1 s lån blir det generert HTML liste elementer og textnoder med ID en til disse filmene. Hvordan informasjon om en gitt film blir hentet I show_movie.js kjøres det en window.onload funksjon som betyr at koden utføres i det siden show_movie.html lastes i browseren. Først blir det sjekket etter om det finnes en ID i det hele tatt og hvis det gjør det, kjøres en GET funksjon i collection objects med ID en til filmen fra query_params.id. Data formatet blir returnert som JSON og lagret i en array movie_object som det jobbes videre med.
Show_movie.html har en table med id movie_stat_table som består av en table row med to kolonner Key og Value. Javascript adresserer movie_stat_table til en variabel stats_table og en for løkke itererer igjennom alle keys i movie_object. Key blir plassert i en left variabel og tilhørende values blir plassert i en right variabel. Til slutt blir en funksjon add_row() kalt og denne metoden genererer elementer og data til HTML tabellen movie_stat_table. Enkelt beskrevet blir HashMap dataene fra databasen hentet av javascript i JSON format, lagret i en array for så at javascript genererer HTML elementer og fyller disse med dataene som er hentet. HTML som er blitt generert blir lest av en nettleser og presenterer det visuelle og semantiske resultatet. Del 2 Vi ville ikke endret så mye på HTML da vi føler den er ryddig og semantisk nok til at vi kan hente og opprette nye HTML elementer med JavaScript uten problemer. Det som er rotete og uvoersiktelig i koden vår er koblingen i <head> mot script filene, det burde vært gjort enklere og visse <script> koblinger er overflødige. I JavaScript ville vi kjørt query_params.js, script.js, search_results og show_movie på klient-maskin og hentet ut data fra wildboy hvor det fantes en collection med filmer representert som documents og det samme for reviews.js. Genres.js, object.js, reviews.js ville derfor ikke vært med i neste programmeringsfase. Tidligere har vi jobbet mot en lokal JSON fil, men dette er tungvindt da den itererer gjennom alle filmer for å finne treff. Vi vil derfor koble oss opp mot wildboy serveren ved hjelp av javascript, REST API og HTTP requests. Da kan vi gå direkte til filmobjektet uten å hente ut alle. Vi ville gjort oppkobling på onload og hentet ut datane å lagret de i array variabler. Deretter ville vi brukt de metodene vi har fra før til å iterere over disse variablene og sortere dataene. Til slutt brukt JavaScript til å finne og generere nye HTML elementer med dataene vi har lagret og sortert.
Del 3 index.html Dette er hovedsiden/index ( home ) som brukeren får ved første øyekast. Denne siden innholder en liste over nye filmer som har kommet ut, sist leid av den fiktive brukeren og anbefalinger. Klikker man på en film blir man videreført til show_movie.html. Filmene blir hentet fra object.js som filtreres via query_params.js. Oppe i navigasjonsfeltet er det linker for å navigere rundt på nettsiden. Via home kommer man tilbake til index, log ut er en fiktiv utloggingsmulighet for brukeren, my movies innholder en liste over filmer som brukeren låner, advance search gir muligheter for å søke etter skuespeiller, sjanger, regissør m.m. Trykker man på brukerikonet så blir man ført til my_movies.html, som er en liste over brukerens lånte filmer og en liste over ønskede lån. Det er viktig å poingtere at navigasjonen er lik hos alle html filene. Man kan søke etter tittelen på en film, da blir man videreført til search_restults.html. Her får man et eller flere valg av film cover, avhengig av søket. search_results.html Man kommer til search_results ved å klikke på en film i index.html, eller ved å klikke på en film etter å ha søkt. På siden kan brukeren får man en del informasjon om filmen, som tittel, cover, beskrivelse av filmen, informasjon om regissør, år, skuespillere, språk, tid og land. Det er muligheter for å kommentere og gi vurdering av film, men disse egenskapene er ikke koblet opp mot en database så informasjonen blir ikke lagret, men er til for å videreutvikling. Search_results.html bruker query_params.js, search_results.js, objects.js og, script.js og genres.js. advanced_search.html Her kan man gjøre et mer avansert søk på filmer hvis man ønsker å spesifisere søket litt mer. Her kan man gjøre søket på tittel, skuespiller, regissør, sjanger og land. Man blir videreført til search_results.html. show_movie.html I show_movie.html er det forskjellige elementer med id som show_movie.js filen skal hente informasjonen, og plassere for eksempel tittelen fra object.js, som er lagt inn som en otitle i filen. Fordi object.js er en query fil som innhold en ikke hierakisk databse, så ordner query_params.js slik at dataene blir leselige komponenter når koden kjøres og det blir mulig å
hente ut de nødvendige dataene. Brukeren blir presentert med et cover og en Add to list knapp som gjør det mulig for brukeren å legge filmer i my_movies.html hvis dette er en film brukeren ønsker å se i senere etterkant. Brukeren informasjon om filmen, regissøren(e), år, skuespillerne, orginal tittel, spilletid og land. Man får også mulighet til å kommentere filmen og gi en rating fra 1 til 5 stjerner. my_movies.html Her får man en oversikt over filmer som brukeren ønsker å leie og filmer som allerede blir leid. Script-mappe show_movie.js Alle elemente på siden blir generert kontinuerlig, med document.createelement(), og appender/legger inn som datterelement av description (show_movie.js, linje 41). Nesten alle elementene blir generert på lik linje med strukturen vi hadde fra oblig 1, dette gjør det også enklere å style. Ikke alle filmene har trailere, så skripten ser om id en er blank, hvis den er en id så vil elementer genereres for å vise brukeren en YouTube trailer. genres.js genres.js holder holder på en liste av objekter er alle film id ene som har en sjanger i seg og som blant annet brukes for å vise brukeren hvilke sjanger den angitte filmen innholder. Ikke alle filmer har sjanger reigstrert. object.js objects.js har innholder objekter av filmer med ulik informasjon om hver film. Denne filen blir brukt i nesten alle html filene fordi den innholder informasjon som blir hentet om hver enkelt film. Hver enkelt film har en egen id, året, tittelen, beskrivelse, lengde, regissør(er), skuespillere, språk og land. query_params.js Fra denne filen så hentes det ut objekter som baserer seg på URL en. Den tar utgangspunkt i hvilke felter som man legger inn i søket og henter ut søkeparameter. Denne filen brukes i blant annet i search_results.html og search_results.js.
script.js Når index.html åpnes så kjøres script.js ved å hente id en til de ulike elementene som recommendation, last_rentals og test. Får de ulike id ene så kjøres en for-each løkke som filtrerer filmene og snevrer det ned til et par filmer og legger dem i de angitte variablene. Videre så hentes coverne fra http://nelson.uib.no/o/. JavaScripten skaper et nytt element til de ulike bildene med angitt url og kobler sammen film id/movie.id med bildet for å vise brukeren. Hvilke film det gjelder. JavaScript koden blir blant annet brukt i sammenheng med å kunne søke på filmer via search_results.js, dette er ved hjelp av createmovie funksjonen som generer bilder. search_results.js Denne filen benyttes når en bruker gjennomfører et vanlig søk eller et avansert søk. Ved å gjennomføre et vanlig søk kan brukeren kun søke etter filmtittel og ved avansert søk kan flere parameter søkes på samtidig. Dette gjelder skuespiller, tittel, regissør, sjanger eller land. Filen henter ut informasjonen og presenterer den i search_results.html. Fonts-mappe Awesome.ttf En font som benyttes til å style tekst. Raleway.ttf Font som brukes for å style tekst Images-mappe Images mappen innholder to.png filer, profile.png og search.png. Profile.png blir brukt for å refere til my_movies.html og skal illustrere at brukeren er pålogget. Search.png brukes til for å vise brukeren hvor det er mulig å søke på filmer. Man er godt kjent med at en lupe står for søk, og vi ønsker å appellere til den forkunnskapen brukeren har.
CSS-mappe style.css CSS filen innholder all kode som hjelper til for å style Movie Mundo. Den tar utgangspunkt i full display, men er også responsiv opp mot mobiltelefoner. Selv om nettsiden blir presentert dynamisk så vil style.css likevel style elementene som blir generert.