SUKKERGRIS Anita og Silje DAT100
I NNHOLD 1. Innledning... 2 2. Beskrivelse av Sukkergris... 3 2.1 Struktur og grafisk design... 3 2.1.1 Sidens oppbygning... 3 2.1.2 CSS og Grafisk design... 4 2.2 Oversikt over konfektbitene... 5 2.2.1 Opprette konfektbitdivene i konfektoversikt... 5 2.2.2 Vise informasjon fra sjoko.js i hver enkelt div... 5 2.3 Gjøre konfektbitene «klikkbare»... 6 2.3.1 Klikkbare konfektbiter... 6 2.3.2 Rabatt... 7 2.4 Handlekurven... 7 2.4.1 Legg i handlekurven... 7 2.4.2 Totalsum i handlekurven... 7 3. Konklusjon... 8 3.1 Prosjektet... 8 3.2 Kommentarer til arbeidsprosessen... 8 4. Referanser... 8
1. I N N L E D N I N G Den siste innleveringsoppgaven i faget DAT100 går ut på å lage en nettside for et tenkt firma Sukkergris. Sukkergris lager eksklusiv konfekt og ønsker å selge konfektbiter i en nettbutikk. Denne nettbutikken skal settes sammen av HTML, CSS og JavaScriptkode og dekker store deler av pensum i faget. Som utgangspunkt for prosjektoppgaven fikk studentene utlevert en mappe som inneholdt bilder, en CSSmal, en nettsidemal, en JavaScript-fil og flere html-filer vi skulle bruke kode fra. Denne rapporten beskriver hvordan vi har valgt å løse oppgaven. Utviklere er Anita Væting og Silje Madalena Unander.
2. B ESK R I V E L S E A V SUKKERGRI S 2.1 Struktur og grafisk design For selve nettsiden tok vi utgangspunkt i index.html som inneholdt hele strukturen på siden. Index.html består av et header-område kalt "Butikkinfo" øverst, et hovedområde "Oversikt over konfektbiter" under og to avdelinger, "Info om valgt konfektbit" og "Handlekurv", i høyre side.g Siden er utformet for en skjermstørrelse på 1920x1080 og er testet i Google Chrome og Opera 26. 2.1.1 Sidens oppbygning Tabell 1 - Nettsidens inndeling i div-elementer header tittel butikkinfo konfektoversikt konfektinfo konfektdiv konfektdiv konfektdiv venstreinfo hoyreinfo konfektdiv konfektdiv konfektdiv konfektdiv konfektdiv konfektdiv handlekurv Vår side er satt sammen av følgende elementer: <head> I headen står metainformasjon som navn og beskrivelse, tittel på siden og linker til eksterne filer som stilark og JavaScript. <link href="sukkergris_endelig.css" rel="stylesheet" type="text/css"/> <script src="sjoko.js"></script> <body> Bodytaggen inneholder følgende elementer (div'er):
<div id="header"> Vi fant det hensiktsmessig å dele headeren ytterligere inn i to div er med id-ene "tittel" og "butikkinfo" for å lettere styre utforming og utseende på disse to tekstene. <div id="konfektoversikt"> Her vises alle konfektbitene, med informasjon hentet fra sjoko.js. Se beskrivelse senere i rapporten. <div id="hoyreside"> Denne div'en er delt opp i div'ene konfektinfo og handlekurv. - <div id="konfektinfo"> Konfektinfo "lytter på" og viser informasjon om en konfektbit når denne blir klikket på i konfektoversikt. I hoyreinfo står det en knapp som legger valgt konfektbit inn i handlekurven. - <div id="handlekurv"> Handlekurven samler opp valgte konfektbiter i en liste og summerer prisene. 2.1.2 CSS og Grafisk design Utseende, utforming og plassering av elementer beskrives i en CSS-fil, et såkalt stilark. Utgangspunktet for nettstedet for var CSS-fila sukkergris.css som ble utlevert med oppgaven. Vi har valgt å bruke en mørk palett på siden, med mørkebrun bakgrunnsfarge og jordtoner i skriftfargene. Riktig bruk av mørke farger gir en følelse av luksus, samtidig som at de understreker at Sukkergris faktisk selger konfekt og mørk sjokolade. De to horisontale inndelingene er atskilt av en lys kantstrek. Av generelle verdier som ble satt i body, overskrifter og p vil vi nevne bruken av en sans-serif fontfamilie for å gjøre uttrykket mer moderne. font-family: "Trebuchet MS", Helvetica, sans-serif; Deretter er egenskapene for de ulike div ene deklarert. Hver div fikk sin egen id, og ved å skrive # foran navn på div i CSS-fila velger man å definere egenskaper for akkurat den div en. Man deklarerer egenskaper som er felles for alt innholdet i denne div en. Gjennomgang av enkeltelementer En liten beskrivelse av noen selektorer vi mener fortjener en grundigere gjennomgang. Og hvorfor. I #header satte vi bakgrunnsbildet med background-image:url(chocolate_header.jpg); #tittel har skygge på teksten. Den gjør omrisset av den lyse tekstfargen tydeligere: text-shadow: 2px 2px 4px #8B4513; #konfektoversikt er satt til float:left 60% bredde og #hoyreside til float:right 35% bredde. konfektoversikt har også en deklarasjon text-align: center; som midtstiller alt innhold. Da ser det ryddigere ut.
I.konfektDiv har vi brukt avrundede hjørner, en hvit kantstrek og sentrert bilde, ved å sette bredde-attributt for innlastingen av bildet i javascriptkoden til 70%. I tillegg til koden som fulgte med i lagdiver.css: display: inline-table; Viser div ene bortover, som I en tabell cursor: pointer; Gjør musepekeren om til en hånd over div en #venstreinfo og #hoyreinfo er delt inn med float til venstre og høyre og bredde satt til 50%. I deloppgave 3b skulle vi vise en tekst for rabatt på konfektbiter over 14 kr. For å tydeliggjøre dette valgte vi å gi denne teksten en egen klasse:.advarsel { color:red; font-weight:60%; font-size:1,2em; } #knapp følger stilen til konfektdiv. 2.2 Oversikt over konfektbitene I deloppgave 2 skulle vi lage en oversikt over utvalget til Sukkergris og vise hver konfektbit i en div med navn, bilde og pris. Data om hver bit hentes fra en ferdiglagd JavaScript-fil, sjoko.js. Utgangspunkt for koden er lagdiver.html og lagdiver.css, og JavaScript-koden skrives i <script>-taggen. 2.2.1 Opprette konfektbitdivene i konfektoversikt Først måtte vi skrive kode for å lage div er i konfektoversikt-div en. For å endre eller legge til innhold i en div, må man først legge elementet til en variabel i JavaScript: var beholder = document.getelementbyid("konfektoversikt");. Deretter setter vi hvor mange konfektbitdiver vi ønsker å vise i konfektoversikt: var antall = 12; eller sjoko.antall: som henter alle div ene fra sjoko.js. For å gjenta kode, benytter man seg av en løkke, i dette tilfellet for å kjøre en funksjon som oppretter en ny div med et tall: for (var teller = 0; teller <= antall; teller++) Teller øker med 1 til den blir lik antall - som er en tallvariabel definert i sjoko.js. Løkken lager nye konfektbitdiver ved å kalle opp funksjonen lagsjokodiv, som lager div for hvert tall teller slik: var nydiv = lagsjokodiv(teller); Deretter legges konfektbitdivene til i konfektoversikt gjennom variabelnavnet beholder: beholder.appendchild(nydiv); 2.2.2 Vise informasjon fra sjoko.js i hver enkelt div Nå har vi laget en div for hver konfektbit i sjoko.js. Neste skritt i oppgaven er å faktisk å klare å vise informasjonen i disse div'ene. Sjoko.js inneholder et array over alle konfektbiter med informasjon og id, og id'en er et tall fra 0 og oppover. Funksjonen lagsjokodiv bruker teller fra løkka som teller opp ider. For hver id henter lagsjokodiv navn, bilde, pris og beskrivelse via funksjoner definert i sjoko.js.
Eksempel: hente bilde og legge det inn i variabelen 'bilde': var bilde = sjoko.getbilde(teller); getbilde henter bildet for tallet teller som tilsvarer id'en til en bestemt konfektbit. Så må man lage selve div'en, her som en variabel 'element': var element = document.createelement("div") Vi setter sammen variablene vi har hentet fra sjoko.js til 'divtext', additivt: var divtext = '<h3> ' + naejm + '</h3>'; divtext += '<img src="konfekt/bilder_s/' + bilde + '" alt="' + bilde + '" width=70% />'; divtext += '<p>pris kr ' + pris + ',-</p>'; divtext += '<br />'; Så angis id, som vi skal bruke senere: element.setattribute("id", teller); og klasse, slik at vi kan bestemme utseendet : element.setattribute("class", "konfektdiv"); Innholdet, 'divtext', må legges inn i htmlkoden til div'en: element.innerhtml = divtext; Hele div'en returneres deretter tilbake til løkka som påkalte funksjonen: return element; Og vi er tilbake til start, før løkka begynner på en ny konfektbitdiv. 2.3 Gjøre konfektbitene «klikkbare» 2.3.1 Klikkbare konfektbiter I oppgave 3a skal vi gjøre konfektbitene klikkbare. Hensikten er at når du klikker på en konfektbit skal det vises mer info om biten inne i konfektinfo-div en på høyre side av websiden. Navn, beskrivelse, pris og et stort bilde kommer frem i div en ved klikk på en konfektbit. For å få til dette må vi legge til en onclick-hendelse til hver enkelt konfektbit som kjører en funksjon for å utføre denne hendelsen. Vi kaller den mokkaklikk. element.oncklick = mokkaklikk; legges inn i funksjonen lagsjokodiv som ble laget i oppgave 2. For at mokkaklikk funksjonen skal få tak i nummeret til konfektbiten som blir klikket på, må vi lagre en attributt til hver enkelt konfektbit. element.setattribute ("id", teller); function mokkaklikk() For å få tak i informasjon om hvilken konfektbit det ble klikket på må vi hente attributten vi lagret over fra this som refererer til konfektbiten det ble klikket på. var sjokoid = this.getattribute("id"); For å legge inn selve innholdet i div ene må vi oppdatere innholdet i hoyreinfo og venstreinfo. JS henter informasjon ved hjelp av sjokoid. For å oppdatere innholdet i
venstre og høyre ramme settes inn variabler som brukes for å lage HTML kode. Denne koden viser vi i konfektinfo ved å bruke innerhtml. 2.3.2 Rabatt Når du klikker på en konfektbit hvor prisen er over 14 kr dukker det opp en tekst (i konfektinfo-div en) som sier at du får 10 % rabatt. Oppgaven er løst ved å benytte en if-test på prisen som skriver en tekst hvis denne testen er sann. Hvis prisen er over 14 kroner oppdateres innholdet i hoyrebeholder. 2.4 Handlekurven 2.4.1 Legg i handlekurven Det første som ble gjort i denne oppgaven var å lage en knapp i HTML inne i konfektinfo-div en med teksten «Legg i handlekurven». Med en oncklick-funksjon. Når du klikker på knappen legges navn og pris på konfektbiten inn i en select-liste i handlekurv-div en. Denne select-lista lages også inne i HTML. Den kaller vi «minkurv» og er i utgangspunktet tom. Ved å klikke på knappen kjøres en funksjon for å hente informasjon fra høyreside div en. Denne funksjonen kaller vi «leggikurv». Denne funksjonen skal oppdatere select-lista med konfektbitene som vi klikker på. For å få til dette må vi hente nummeret på konfektbiten som skal inn i lista. Måten vi løser dette på er å oppdatere mokkaklikk-funksjonen med å lagre de verdiene vi skal legge inn i handlekurven som attributter i hoyreside-div en. Vi må deretter hente attributtene tilbake i leggikurv-funksjonen slik vi kan oppdatere selectlista(sjokoid, navnet og prisen). Vi lager en option som inneholder navn og pris på den valgte konfektbiten, som vi så legger inn i select-lista med selectliste.add(mokkabit); Add-funksjonen oppdaterer select-lista vi har laget i HTML-koden. 2.4.2 Totalsum i handlekurven For å lagre totalsum i handlekurven er totalsum satt med verdi 0 i en global variabel. Vi har også laget en div i HTML kalt «resultat» for å skrive ut totalsummen. Hver gang du legger til en konfektbit legges den til i totalsummen. For å konvertere til tall bruker vi funksjonen Number() med variabelen pris som er tekst: totalsum = totalsum + Number(pris); Vi bruker innerhtml på resultat div en for å oppdatere totalsummen som vises i HTML siden.
3. K O N K L U S J O N 3.1 Prosjektet Vi har tatt utgangspunkt i oppgaveillustrasjonen og oppgavemalen for utforming av nettsiden. Utformingen består av tre hoveddeler, en header, en hoveddel og en sidedel. Nettsiden fungerer slik vi har lagt opp og oppfyller kravene stilt i de fire obligatoriske oppgavene. Vi er fornøyd med resultatet og mener at vi har vi har løst oppgaven på en strukturert måte. Det største og viktigste forbedringspotensialet ligger i å benytte seg av responsivt design for å få best mulig tilpasning til ulike skjermstørrelser. En større og større andel av menneskenes nettbruk foregår på smale og små skjermer. Derfor er det det er viktig for en butikk, egentlig for alle med et formidlingsbehov, å ha en side som duger i breddemangfoldet. Ellers er det mange småting som kan forbedres og som ble begrenset av tid og av mangel på css-kunnskap. Vi nevner i fleng: - god løsning på plassering av leggihandlekurv-knappen - teste i flere nettlesere: en rask sjekk viste at Internet Explorer 8 ikke viste all cssen. - sette stil på handlekurvlista - footer-område med informasjon om Sukkergris-firmaet - kanskje et annet utseende og fargevalg. I tillegg til de frivillige oppgavene. 3.2 Kommentarer til arbeidsprosessen Versjonskontroll Underveis i arbeidet er det et problem som gjør seg gjeldene når flere skal arbeide med den samme filen: hvordan styrer vi med hva som er endret og hva vi ønsker å beholde? Vårt system var ganske primitivt og bestod i å gi nytt navn til filene vi arbeidet med hver for oss og deretter kommentere i selve koden hva vi hadde satt inn. Omsider tok vi i bruk googledrive og lastet opp filer dit, som et alternativ til å sende filene som vedlegg. Slik er det også mulig å ha oversikt over tidligere filere, eller alltid ha nyeste fil tilgjengelig. Ingen av oss tar DAT101 programmering grunnkurs hvor ryktet forteller at de lærer å ta i bruk GiT et versjon kontrollsystem som bare lagrer forskjellene mellom versjoner - som helt sikkert hadde gjort arbeidet lettere. 4. R E F E R A N S E R Bakgrunnsbilde i headeren på sukkergris_endelig.hml: http://www.freewebheaders.com