hovedprosjekt i anvendt datateknologi og...

62
Våren 2014 1 HØGSKOLEN I OSLO OG AKERSHUS HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG INFORMASJONSTEKNOLOGI 2014 Nettbasert-Leksehjelp Gruppe 38 Muna Ghafour (s180485) Ali Karaboga (s171198) Fahad Sajid (s177996) Stephanie Yiamveha (s180389)

Upload: others

Post on 05-Aug-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Våren 2014

1

HØGSKOLEN I OSLO OG AKERSHUS

HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG

INFORMASJONSTEKNOLOGI 2014

Nettbasert-Leksehjelp

Gruppe 38

Muna Ghafour (s180485)

Ali Karaboga (s171198)

Fahad Sajid (s177996)

Stephanie Yiamveha (s180389)

Page 2: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Våren 2014

2

Studieprogram: Anvendt Datateknologi & Informasjonsteknologi Telefon: 22 45 32 00

Postadresse: Postboks 4 St. Olavs plass, 0130 Oslo Telefaks: 22 45 32 05

Besøksadresse: Holbergs plass, Oslo

HOVEDPROSJEKT

HOVEDPROSJEKTETS TITTEL Nettbasert-Leksehjelp

DATO

27.05.2014

ANTALL SIDER / BILAG

61/4

PROSJEKTDELTAKERE

Muna Ghafour (s180485)

Ali Karaboga (s171198)

Fahad Sajid (s177996)

Stephanie Yiamveha (s180389)

INTERN VEILEDER

Geir Skjevling

OPPDRAGSGIVER

Oslo Kultur- og Utdanningsforening

KONTAKTPERSON

Abdurrahim Øzturkoglu

Sammendrag Hovedprosjektet skal gjennomføres ved Høgskolen i Oslo og Akershus, fakultet for teknologi, kunst og design i

samarbeid med Oslo Kultur­ og Utdanningsforening (OKUF). Oppgaven består i å lage en ny webside for OKUF,

der de ønsker et nytt innloggingssystem hvor elevene skal få tilgang til et nettbasert leksehjelp. Denne dokumentasjonen er satt sammen av to deler: Prosess- og produktdokumentasjon.

Tre stikkord

Leksehjelp

PHP (webprogrammering)

Kommunikasjon

PROSJEKT NR. 38

TILGJENGELIGHET

Åpen

Page 3: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Våren 2014

3

FORORD

Denne rapporten inneholder prosessdokumentasjonen for arbeidet med hovedprosjektet

“Nettbasert-Leksehjelp” ved Høgskolen i Oslo og Akershus (HiOA), våren 2014.

Dette dokumentet inneholder dokumentasjon over arbeidet vårt med dette prosjektet. Her finner

man informasjon om oppdragsgiver, prosjektbeskrivelse, utviklingen av nettsiden,

dokumentasjonen og hvordan nettsiden fungerer.

Dette settet består av tre deler; prosessrapporten, produktrapporten og brukerveiledning for

Administrator.

Dokumentet er ment for sensor, veileder og de som skal drifte nettsiden, og finnes på både

papirformat og digitalt. Linken er: http://okuf.no/hioa/index.html

Vi vil gjerne takke Oslo kultur- og Utdanningsforening for å ha latt oss jobbe med dette

prosjektet.

Videre vil vi også takke Geir Skjevling, veilederen vår ved HIOA.

Page 4: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Våren 2014

4

Innhold

Prosessdokumentasjon…………...……………………………………………………………….5

Produktdokumentasjon……………………………………………………………………….20

Kilder……………………………………………………………………………………………..57

Vedlegg…………………………………………………………………………………………...58

Page 5: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Våren 2014

5

Prosessdokumentasjon

Page 6: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

6

INNHOLDSFORTEGNELSE

1 INNLEDNING………………………………………………………………………….. 8

1.1 Om gruppen…………………………………………………………………………… 8

1.2 Om oppdragsgiver……………………………………………………………………..8

1.3 Bakgrunn……………………………………………………………………………… 9

1.4 Mål og rammebetingelser……………………………………………………………...9

1.4.1 Mål…………………………………………………………………………………… 9

1.4.2 Rammebetingelser…………………………………………………………………….9

2 PLANLEGGING OG ARBEIDSMETODE………………………………………….. 10

2.1 Styringsdokumentasjon………………………………………………………………. 10

2.1.1 Prosjektskisse………………………………………………………………………… 10

2.1.2 Prosjektdagbok……………………………………………………………………….. 10

2.1.3 Forprosjektrapport…………………………………………………………………….10

2.1.4 Milepælsplan…………………………………………………………………………. 10

2.1.5 Risikoplan……………………………………………………………………………. 10

2.1.6 Kravspesifikasjoner…………………………………………………………………...11

2.2 Verktøy…………………………………………………………………………………11

2.2.1 Dreamweaver………………………………………………………………………… 11

2.2.2 PhpMyAdmin (MySQL)……………………………………………………………... 11

2.2.3 Microsoft Windows 7………………………………………………………………... 11

2.2.4 Paint og Photoshop…………………………………………………………………... 11

2.2.5 Violet………………………………………………………………………………….11

2.2.6 Dropbox……………………………………………………………………………… 11

2.2.7 Google Docs…………………………………………………………………………..11

3 UTVIKLINGSPROSESS………………………………………………………………. 12

3.1 Oppstartsfasen………………………………………………………………………... 12

3.2 Utviklingsmodell……………………………………………………………………… 12

3.3 Tenkt løsning………………………………………………………………………….. 13

3.4 Utfordringer…………………………………………………………………………... 13

Page 7: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

7

3.5 Samarbeid……………………………………………………………………………... 14

3.5.1 Med veileder…………………………………………………………………………. 14

3.5.2 Med oppdragsgiver…………………………………………………………………... 14

3.5.3 Med gruppen…………………………………………………………………………. 14

3.5.4 Samarbeidsavtale…………………………………………………………………….. 14

4 KONKLUSJON………………………………………………………………………… 15

Page 8: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

8

1 INNLEDNING

1.1 Om gruppen Vår gruppe består av Ali Karaboga, Muna Ghafour, Stephanie Yiamveha og Fahad Sajid. Vi går i

tredje året på Anvendt Datateknologi, minus Ali, som går Informasjonsteknologi.

De tre av oss som går i samme studie er godt kjent fra før, men har ikke veldig mye erfaring med

å være på gruppe sammen. Likevel forstår vi hverandres ambisjoner og hva som trengs for å gjøre

dette til et fullverdig prosjekt.

1.2 Om oppdragsgiver

Oppdragsgiveren vår er Oslo kultur- og utdanningsforening (heretter kalt OKUF).

OKUF er en ideell forening som har til formål å støtte barn, ungdommer og voksne på utdanning

og kulturelle sider ved å organisere nasjonale og internasjonale programmer og aktiviteter

gjennom ulike tiltak.

● Å hjelpe ungdommer i sin identitetsutvikling gjennom opplysningsarbeid og styrke

motivasjonen for studier, skole og universitet.

● Øke rekrutteringen til høyere utdanning av mennesker med minoritetsbakgrunn i Norge.

● Øke den interkulturelle forståelsen.

● Å kunne fremme veiledning og kunnskap i naturfag, språk og samfunnsorienterende

emner. Å kunne tilby elever slik studiehjelp for at de lettere skal kunne oppnå gode

resultater i sine studier

● Å styrke ungdommenes egenverd og visjoner.

● Å organisere temadager, seminarer, konferanser, foredrag, utflukter, teatergrupper, idretts­

og fritidsaktiviteter.

● Å samarbeide med foreninger, organisasjoner og stiftelser med fellesmål og utveksle

kunnskaper i samhandling.

● Å delta i ulike prosjekter i regi av EU og EØS landene og opprette prosjekter som kan

inngå i samarbeid med disse.

● Styre forbeholder seg retten til å føye til nye formål ved behov.

Page 9: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

9

1.3 Bakgrunn

Før vi startet dette prosjektet hadde ikke OKUF en fungerende nettside som er oppe. Når man

googlet “Oslo kultur- og Utdanningsforening” fikk man veldig får resultater, hvor blant annet

www.okuf.no var med på søkelisten, men siden hadde ingen funksjon. Av og til kom det opp at

siden ikke ekisterer. I følge http://archive.org/web/ var nettsiden til OKUF i bruk til 2013, men

hadde ikke noe særlig med innhold.

Derfor ønsker OKUF nå en egen nettside som fungerer. De vil at det skal bli en leksehjelp side,

og ønsker et eget rom for elevene og lærene. OKUF har også ønske om å kunne legge ut

forskjellige tilbud om kurs og aktiviteter.

Vi kom i kontakt med OKUF, ved hjelp av Ali som jobber hos OKUF.

1.4 Mål og rammebetingelser

1.4.1 Mål

Målet med dette prosjektet er å lage en nettside for OKUF som skal fungere som et

plattform hvor man kan få leksehjelp, og se forskjellige aktiviteter og kurser.

Meningen med nettsiden skal være å hjelpe elevene med leksehjelp innenfor diverse fag, samtidig

skal lærerne og foreldrene også ha innsyn i ungenes arbeid. De skal også kunne diskutere med

hverandre i et lite forum.

1.4.2 Rammebetingelser

● Det skal være mulig å logge seg inn med brukernavn og passord.

● Aktiviteter og kurser skal kunne annonseres på nettsiden.

● Kontaktlærer skal kunne se elevenes aktiviteter på siden

● Foreldrene skal kunne kommunisere med hverandre i forumet

Page 10: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

10

2 PLANLEGGING OG ARBEIDSMETODE

2.1 Styringsdokumentasjon

For å ha en god dokumenthåndtering mellom oss bruker vi en felles mappe i Dropbox og Google

Docs.

Google Docs bruker vi hele veien mens vi skriver rapporten, så alle skriver på samme dokument.

Inne på Dropbox har vi alle filene delt som diverse dokumenter, nettsiden, bilder osv.

Hver uke har vi et fast møte. Etter endt møte en det en fast person som skriver et referat, inne på

Google Docs slik at de andre deltagerne kan også se.

På møtene tildeler vi oppgaver til hverandre, og alle skriver ned hva de har gjort og sender dette

på mail, slik at den ansvarlige tar seg av det.

2.1.1 Prosjektskisse

Det er den første rapporten vi har skrevet. I prosjektskissen står det hvem vi har oppdrag hos,

beskrivelsen av prosjektet og hvem gruppemedlemmene er. Prosjektskissen har også blitt laget

som en nettside.

2.1.2 Prosjektdagbok

Hver uke har vi prøvd å ha minst et møte. I dagboken står det om hva som har blitt diskutert og

avtalt på møtene. Hvilke oppgaver som må bli gjort til neste møte, hva som har blitt gjort og

problemer som har oppstått. Det er også blitt brukt som referat til hver endt møte.

Prosjektdagboken har vært et nyttig verktøy, som hjelper oss å huske hva som har blitt gjort. Den

har blitt skrevet på Google Docs, i en felles mappe vi har sammen, slik at alle har tilgang til den.

2.1.3 Forprosjektrapport

Forprosjektrapporten ble laget i januar. Rapporten inneholder informasjon om arbeidsgiver,

daværende situasjon, målet med prosjektet, rammebetingelser og utviklingsverktøy, og vår

løsning.

2.1.4 Milepælsplan

Milepælsplanen forteller oss hva vi skal gjøre og når det skal gjøres. I den er det beskrevet

spesifikk hvilke oppgaver som må bli gjort, som milepæler, og må bli ferdig til angitt tid. Den har

hjulpet oss med å se hva som må gjøres og gitt litt mer press på å bli ferdig innen en viss tid.

2.1.5 Risikoplan

Risikoplanen viser hvilke konsekvenser som kan skje underveis, hvor stor sannsynligheten er og

hvilke tiltak som kan gjøres.

Page 11: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

11

2.1.6 Kravspesifikasjoner

Kravspesifikasjonen definerer hvilke krav arbeidsgiveren stiller til systemet. Selv om vi har fritt

til å bestemme våre egne krav, bestemte vi kravene etter samarbeid med arbeidsgiveren.

Kravspesifikasjonen finner du produktrapporten.

2.2 Verktøy

2.2.1 Dreamweaver

Vi tok i bruk Dremweaver siden vi syntes at den var brukervennlig og gav god oversikt over

kodene. Her vil vi hovedsaklig bruke HTML4 og CSS3.

2.2.2 PhpMyAdmin(MySQL)

Vi valgte å jobbe med PhpMyAdmin for databasen fordi det er behagelig verktøy og lett å

håndtere MySQL, der også kan man gjøre forskjellig oppgaver som å opprette, endre eller slette

databaser, tabeller, kolonner eller rader, utføre SQL-setninger, eller administrere brukere og

tillatelser.

2.2.3 Microsoft Windows 7

For utvikling og testing.

2.2.4 Paint og Photoshop

I tillegg har vi brukt Paint og Photoshop for å redigere bildene, screenshots og liggnende.

2.2.5 Violet

Vi benyttet Violet for å lage use case diagrammene i utviklingsfasen.

2.2.6 Dropbox

Vi benyttet Dropbox til å lagre alle filene som ble opprettet slik at alle i gruppa hadde lett tilgang

til filene gjennom deres egen PC.

2.2.7 Google Docs

Vi benyttet Google Docs til å opprette dokumenter som vi skulle skrive i. Vi kunne arbeide med

dokumentasjonen og Google Docs ville lagre alt automatisk. Samtidig kunne vi se hva de andre i

gruppa drev med i sanntid, slik at vi ikke drev og jobbet med det samme.

Page 12: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

12

3 UTVIKLINGSPROSESS

3.1 Oppstartsfasen

Prosjektgruppen ble først dannet av Ali og Muna.

Fahad og Stephanie var egentlig en egen gruppe og hadde en tredje person. Gruppen dannet seg

litt etter skolestart i august 2013. Vi var i gruppe på andre prosjekter også, så vi har samarbeidet

før.

Etter noen måneder sammen i gruppe, bestemte tredjemann å forlate gruppa, uten å melde fra om

det, eller gi noen form for respons til oss andre. Dermed ble det bare Fahad og Stephanie. Vi

tenkte at hovedprosjektet var for stort til bare oss og startet med å se etter grupper som bare var en

eller to. Via forespørsel på e-post kom vi i kontakt med Muna og Ali.

I januar møttes alle medlemmene for første gang, og det var da vi kunne komme i gang med

prosjektet.

Fahad og Stephanie ble presentert hva hovedoppgaven gikk ut på og fikk informasjon om hva

som måtte gjøres.

3.2 Utviklingsmodell

Vi valgte å ikke jobbe etter en bestemt utviklingsmodell, men har planlagt eller lagt en plan for

hvordan vi skulle jobbe. Milepælsplanen har på en måte vært en modell, fordi vi har fulgt

milepælene, og deretter planlagt hva vi skal gjøre. Dette er måten vi har jobbet på:

● Idémyldring

● Planlegging

● Utvikling

● Dokumentere

Ved å følge disse punktene har vi hatt kontroll på hva som måtte gjøres, og eventuelt hva som

måtte rettes opp om det ikke gikk som planlagt.

Vår hovedregel har vært at det må være god kommunikasjon i gruppen.

Vi har hatt jevnlig med møter, for det er viktig når vi skal samarbeide. Møtene vi har hatt har vært

både på skolen eller via internett. Da har vi kommunisert gjennom web- og mobilapplikasjoner

som Facebook og Viber.

Gruppen startet med å diskutere hvordan utseende nettsiden skulle ha. Dette tenkte vi var en fin

måte å starte på, slik at vi etter hvert kunne se om vi klarte å følge etter denne.

Vi lagde en papirprototype, en type kladd med innspurt av ideer. Etterhvert begynte vi å lage

skjellettet på nettsiden, slik at vi hadde en begynnelse.

Page 13: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

13

Når vi begynte å jobbe med nettsiden, så vi kanskje at vi ikke kunne lage den slik som vi tegnet

ned vår første prototype. Programmeringen gjorde vi litt hver dag med jevnlig oppdateringer til

hverandre.

3.3 Tenkt løsning

Vi skal lage en helt ny nettside der det er mulighet for elevene å få leksehjelp. Elevene får egne

brukernavn og passord, slik at de kan logge seg inn. Dermed må vi også ha en database. I tillegg

tenkte vi å lage et arkiv, hvis elevene skulle trenge hjelp utenfor åpningstidene.

Nettsiden skal ha en logo og en hovedmeny som innholder ‘Hjem’, ‘Om oss’, ‘Kontakt oss’. Vi

implementerer en søkemotor som gjør det lettere å få tilgang til forskjellige rom. Aktiviteter, kurs

og nyheter skal kunne annonseres på siden.

På nettsiden skal det være tre ulike rom/forum. En for lærerene, en for foresatte og et eget

leksehjelprom for elevene. Det er ulike rom, slik at de foresatte kan diskutere med hverandre og

eventuelt med lærerne.

3.4 Utfordringer

Første utfordring var at det var vanskeligheter med å sette opp arkitekturen til nettsiden og

hvordan ting skulle settes sammen. Vi måtte tenke ut en best mulig måte å lage siden på.

Arkitekturen ble endret etterhvert, siden vi ikke var helt fornøyde med den.

En annen ting var at vi måtte bruke en hel uke bare på å løse kommunikasjonen mellom lærer og

elev. Hvordan skulle vi få dette til å fungere, og ble litt oppgitt, når vi ikke klarte å løse det etter

flere dager.

Lærerdelen var også noe vi strev med. Når admin legger til en lærer, skal den læreren få en e-post

med link som aktiverer kontoen. Vi prøvde først å registrere med Gmail, og fikk ingen link.

Heller ikke inne på “spam”. Da la vi til en lærer til med Gmail, fikk vi atter en gang ingen e-post.

Den tredje læreren vi la til brukte Hotmail, og denne personen fikk en e-post inn på “spam”.

Læreren fikk åpnet mailen, og klikket på aktiver konto. Linken førte ingen vei og kom til en

nettside som ikke fungerte.

Den største utfordringen for oss var tidspresset på grunn av jobb og annet skolearbeid.

En annen utfordring var at alle i gruppa var ikke veldig gode i koding, og det hendte at en eller to

i gruppa måtte gjøre litt mer enn de andre under utviklingen, men da ordnet vi det slik at de to

andre tok seg av dokumentasjonen når kodingen ble vanskelig.

Page 14: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

14

Oppgaven i seg selv var veldig vanskelig og stor. Som å lage grensesnittet var både utfordrende

og tidskrevende. En positiv utfordring var å prøve mange av de fagrelaterte tingene som vi har

lært gjennom disse tre årene.

3.5 Samarbeid

3.5.1 Med veileder

Arbeidet med veilederen Geir har vært greit og lett. Vi har fått noen råd og tips av han angående

arbeidsmåte og nettsidens utseende. Det har ellers vært veldig få møter med han.

3.5.2 Med oppdragsgiver

Vi har hatt god og åpen samarbeid mellom oss som gruppe og oppdragsgiveren. Siden Ali på

gruppa jobber hos OKUF har han vært kontaktpersonen mellom oss og arbeidsgiveren.Vi har hatt

veldig få møter, men har kunnet gjennom Ali samarbeidet med nettsiden.

3.5.3 Med gruppa

Samarbeidet innad gruppen har vært fint. I begynnelsen, etter at Stephanie og Fahad kom, hadde

vi flere møter sammen før vi begynte å ha mindre møter. Ettersom vi er fire forskjellige personer

med jobb, studier og andre ting, ble det etterhvert vanskeligere å holde faste møter. Det endte ofte

med at noen enten ble syk, måtte jobbe eller hadde eksamen og andre innleveringer som var

viktigere. Likevel hadde vi god kontakt gjennom Facebook og mobilapplikasjonen Viber, hvor vi

kunne diskutere prosjektet, delegere arbeid og komme med annet info.

3.5.4 Samarbeidsavtale:

Vi har blitt enige om noen punkter som skal følges gjennom gruppearbeidet:

1. Hver enkelt i gruppa har ansvar for sine oppgaver.

2. Å være tilstede i møter.

3. Alle endringer som skjer på oppgaven skal oppdateres og hvert enkelt medlem av gruppa

får vite om det.

4. Det er viktig å jobbe i godt samarbeid for å oppnå målet til gruppa.

5. Det forventes at alle møter opp på prosjektmøtene, uavhengig av tema for møte. Dette

gjøres nødvending da alle medlemmene av gruppen skal holde seg orientert i henhold til

prosjektets progresjon.

6. Agenda avgjør møtenes varighet. Hvis det skulle være behov for utvidelse av tid, må

deltakerne respektere dette.

7. Et møte kan avsluttes tidligere dersom flertallet uttrykker ønske om dette og

arbeidsoppgavene er klare.

8. Blir man enig om at visse arbeidsoppgaver skal være fullført til et gitt tidspunkt forplikter

man seg til dette. Ved utfordringer gjeldende utførelse, skal de andre i gruppen informeres

så raskt det lar seg gjøre.

Page 15: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

15

9. Gruppemøtene er reservert prosjektetarbeid og en bør helst unngå mye digresjon.

10. Forslag blir avgjort av flertallet og bør respekteres.

11. Viktig å samarbeide med full forståelse og respekt av andres ideer, og tanker.

4 KONKLUSJON

Oslo Kultur- og Utdanningsforening hadde ingen nettside før vi kom i kontakt med dem gjennom

Ali.

Vår oppgave var å lage en fungerende nettside som skulle fungere som leksehjelp for elevene

deres. OKUF ønsker også at de skal kunne legge ut informasjon om aktiviterer og kurs. Vi føler vi

har klart å gjennomføre vår tenkte løsning og tatt med de kravene OKUF ønsket.

Prosessen har vært lærerrikt og utfordrende. Det er vært både opp og nedturer, men de fleste

problemene klarte vi å løse. Det at vi laget en samarbeidsavtale mellom oss har vært en nyttig

ting, siden da er vi alle fire forpliktet til det samme.

Nettsiden vi har laget er vi fornøyde med, og mener det er et nyttig verktøy. Nettbasert leksehjelp

er en fin måte å hjelpe elever som ikke kanskje kan få hjelp hjemme. Og akkurat der er vi glade

for at vi kunne lage siden for OKUF.

Page 16: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

16

5 VEDLEGG

5.1 Risikoanalyse

RISIKO SANNSYNLIGHET KONSEKVENS TILTAK

Sykdom/skader Middels - Tap av arbeid.

- Mer tid brukt på

å gjøre ekstra

arbeid

- Fildeling

- Kontakt via forskjellige

kommunikasjonskanaler

Kommunikasjonssvi

kt

Lav+ - Forsinkelse av

arbeid pga

misforståelser

- Kommunisere jevnlig

- Klargjøre tydelig hva som

skal gjøres

Mangel på

kompetanse

Lav - Forsinkelse av

arbeid

- Få hjelp av

gruppemedlemmer og

veileder

Full timeplan

(spesielt mot

eksamensperioden)

+ jobb utenom

studietiden

Høy - Forsinkelse

og/eller treig

arbeid

- Planlegging er essensielt

her

- Må ha god

kommunikasjon og

fordeling av

arbeidsoppgaver hvis det

blir vanskelig med møter

Teknologisvikt Middels - Tap av filer

- Kan ødelegge

hele prosjektet

- Backup

- Alle skal ha alle filene

lagret lokalt i tillegg til på

Dropbox og Google Docs

Page 17: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

17

5.2 Milepælsplan

Dato, frister

Oppgaver Ansvar Status, notater

06.12.2013

Bli enige om hva vi skal

jobbe med

Ali, Muna Ferdig, skal lage

nettbasert leksehjelp

Lage prototyping Ali, Muna Ferdig

24.01.2014

Skrive ferdig forprosjekt

rapporten

Ali, Muna, Stephanie, Fahad

Ferdig

25.01.2014 Innlevering av forprosjektet

20.02.2014

Jobbe med usecase modeller Fahad, Muna, Stephanie Ferdig

Koding, HTML, CSS Alle Ferdig

Skrive av hoved rapporten Alle

20.03.2014

Skrive av hovedrapporten Alle

20.04.2014

Koding, PHP, databaser Alle

20.05.2014 Bli ferdig med

hovedrapporten

Alle

21.05.2014 Levere hovedprosjektet inn

for trykking

Fahad

Page 18: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

18

5.3 Papirprototype

5.3.1 Hovedsiden

5.3.2 Kontrollpanel (lærere)

Page 19: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Prosessdokumentasjon Våren 2014

19

5.3.3 Online leksehjelp

5.3.4 Hovedsiden (siste utkast)

Page 20: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Våren 2014

20

Produktdokumentasjon

Page 21: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

21

FORORD

Produktrapporten innholder en beskrivelse av vår nettside, og de forskjellige funksjonene den har.

Det forutsettes at prosessrapporten har blitt lest før denne delen leses.

Denne delen av rapporten er ment for sensor, oppdragsgiver og den som skal vedlikeholde og

videreutvikle nettsiden.

Det forventes at de/den som skal bruke dette dokumentet har basis forståelse av PHP, HTML og

CSS. Det forventes også forståelse av hvordan en database fungerer.

Page 22: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

22

INNHOLDSFORTEGNELSE

1 INNLEDNING………………………………………………………………………….. 24

1.1 Beskrivelse av programmet…………………………………………………………... 24

1.1.1 Hensikten med programmet………………………………………………………….. 24

1.1.2 Hovedprogram og underprogram…………………………………………………….. 24

1.2 Kravspesifikasjoner…………………………………………………………………... 25

1.2.1 Funksjonelle krav…………………………………………………………………….. 25

1.2.2 Ikke-funksjonelle krav……………………………………………………………….. 25

1.3 Samsvar mellom kravspesifikasjon og løsning……………………………………… 25

1.3.1 Vår løsning på de funksjonelle kravene……………………………………………… 25

1.3.2 Vår løsning på de ikke-funksjonelle kravene…………………………………………25

1.4 Koding…………………………………………………………………………………. 26

1.4.1 PhpMyAdmin………………………………………………………………………… 26

1.4.2 PHP (PHP Hypertext Preprocessor)…………………………………………………..26

1.4.3 HTML 4……………………………………………………………………………… 26

1.4.4 CSS 3………………………………………………………………………………… 26

1.5 Arkitektur……………………………………………………………………………... 27

1.5.1 Use case modell for admin…………………………………………………………… 28

1.5.2 Detaljert use case beskrivelse for admin……………………………………………... 29

1.5.3 Use case modell for elev……………………………………………………………... 30

1.5.3 Detaljert use case beskrivelse for elev……………………………………………….. 30

2 DESIGN…………………………………………………………………………………. 31

2.1 Navigering og struktur……………………………………………………………….. 31

2.2 Fargevalg og bilder…………………………………………………………………… 33

2.3 Slide med bilder………………………………………………………………………. 33

2.4 Plassering……………………………………………………………………………… 33

2.5 Logo……………………………………………………………………………………. 34

2.6 Kontakt oss……………………………………………………………………………. 34

3 BRUKER………………………………………………………………………………... 36

3.1 Innlogging og registrering……………………………………………………………. 36

Page 23: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

23

3.1.1 Registrering…………………………………………………………………………... 37

3.1.2 Innlogging……………………………………………………………………………. 38

3.2 Godkjenning av elev………………………………………………………………….. 40

3.3 Passord………………………………………………………………………………… 41

3.3.1 Glemt passord………………………………………………………………………... 41

3.3.2 Forespørsel om passord……………………………………………………………… 42

3.4 Online leksehjelp……………………………………………………………………… 43

3.4.1 Still spørsmål/Nytt spørsmål…………………………………………………………. 44

4 ADMINISTRATOR (ADMIN)………………………………………………………… 46

4.1 Logg inn……………………………………………………………………………….. 46

4.2 Kontrollpanel…………………………………………………………………………. 48

4.3 Legg til kurs…………………………………………………………………………… 49

4.4 Legg til lærer………………………………………………………………………….. 50

4.4.1 Rediger lærer…………………………………………………………………………. 51

4.5 Legg til fag…………………………………………………………………………….. 52

4.6 Slette en bruker……………………………………………………………………….. 53

4.7 Logg ut………………………………………………………………………………… 54

4.8 Søk……………………………………………………………………………………... 55

5 AVSLUTNING…………………………………………………………………………. 56

5.1 Endringer………………………………………………………………………………56

5.2 Videreutvikling………………………………………………………………………... 56

5.3 Konklusjon……………………………………………………………………………. 57

6 KILDER………………………………………………………………………………… 58

7 VEDLEGG……………………………………………………………………………… 59

Page 24: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

24

1 INNLEDNING

1.1 Beskrivelse av programmet

1.1.1 Hensikten med programmet

Programmet er en komplett nettside for OKUF (Oslo Kultur- og Utdanningsforening), og

hovedformålet med programmet er at den skal tilby leksehjelp via internett. Dette har noe med at

samfunnet har endret seg såpass mye i retning av mer digitalisering av hverdagen. Barn og

ungdommer er den målgruppen som er mest utsatt for digitalisering, og er blant dem som bruker

teknologi hyppigst. For å kunne tilby leksehjelp som er tilpasset deres generasjon har vi valgt å

utvikle et system med online leksehjelp. Rent prinsipielt handler det om at OKUF får en ny

nettside. Den skal være en klassisk presentasjonsnettside, med innholdssider, aktivitetsoversikt,

kursoversikt, bilder, video, og en online leksehjelp. Elevene registrerer seg, og etter at

administrator aktiverer brukerne, kan de logge seg inn og stille spørsmål. De har ulike fagområder

å velge mellom, der spørsmålet gjelder. Lærerne som er tilknyttet de ulike fagområdene, kan

logge seg inn og svare på disse spørsmålene.

1.1.2 Hovedprogram og underprogram

(Figur 1)

Hovedprogrammet er leksehjelpfunksjonen. Elevene får stille spørsmål i ønsket fagområde, og

lærerne tilnyttet de enkelte fagområdene går inn og svarer disse. Underprogrammene er

presentasjonssiden der admin kan legge til tekst og bilde. Andre underprogrammer er aktiviteter,

artikler og kurs, som på tilsvarende måte i presentasjonssidene kan administreres via

kontrollpanelet.

Hele adminpanelet er et annet underprogram. Admin kan har administrere både

presentasjonssidene og andre underprogrammene, samt hovedprogrammet som er

leksehjelpdelen. Admin kan håndtere både lærere, elever og fagområder. For å kunne registrere

lærere, må admin legge inn en lærer. Denne læreren får da en e-post med en lenke, der den legger

inn passord. Dette passordet blir kryptert med MD5 og deretter legges inn i databasen. Læreren

kan da logge inn.

Page 25: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

25

1.2 Kravspesifikasjoner

1.2.1 Funksjonelle krav:

1. Administratorer skal kunne legge til/endre/slette sider, aktiviteter, kurs og fag

2. Man skal kunne se aktiviteter på siden

3. Elever skal kunne sende inn spørsmål til lærere

4. Det skal være enkelt for admin å å kontrollere nettsiden

5. Elevene skal registrere seg

6. Lærere skal registrere seg

7. Admin skal godkjenne nye brukere

1.2.2 Ikke-funksjonelle krav:

1. Brukervennlig

2. Oversiktlig

3. Lett å lære

4. Stabilt

1.3 Samsvar mellom kravspesifikasjon og løsning

1.3.1 Vår løsning på de funksjonelle kravene:

1. Vi har laget en administrator (admin) som kan legge til/endre/slette sider, aktiviteter, kurs

og fag. Admin kan i tillegg godkjenne elever og lærere, altså avgjøre statuen deres som

aktiv eller inaktiv.

2. Aktiviteter er synlig på høyre side av forsiden.

3. Ved å logge seg inn på leksehjelprommet kan elevene sende inn spørsmål til lærerene. Det

er blitt opprettet en chatside.

4. Admin har en oversiktlig kontrollpanel. Alle valg admin kan gjøre er på forsiden.

Kontrollpanelet er ikke avansert, vi har laget den enklest mulig.

5. Elever kan registrere seg, men må vente på godkjenning fra admin før kontoen er aktiv.

6. Lærere kan registrere seg, men må vente på godkjenning fra admin før kontoen er aktiv.

7. Admin er den som godkjenner brukere.

1.3.2 Vår løsning på de ikke-funksjonelle kravene:

1. Nettsiden er brukervennlig. Den er oversiktlig og ryddig, og bruker heller ikke noe form

Page 26: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

26

for tung programvare, slik at nettsiden er lett å laste inn.

2. Nettsiden er oversiktlig, siden vi har valgt en enkel struktur.

3. Nettsiden er lett å lære. Vi har prøvd å gjøre siden minst mulig avansert, slik at den er

enkel for brukere, spesielt fordi de fleste av brukerne vil være barn.

1.4 Koding

Ved koding av nettsiden har vi brukt hovedsaklig PhpMyadmin, PHP og HTML. CSS er en fil vi

har brukt for å lage utseendet og designet på siden. Vi delte disse filene på Dropbox slik at vi

kunne laste det opp hver for oss, og lettere fordele arbeidet og gi kommentarer til hverandre.

Databasen var en MYSQL-database hvor blant annet alle tabeller og deres sammenhørighet ble

planlagt.

1.4.1 PhpMyAdmin

PhpMyAdmin er et administrasjonverktøy som er skrevet i PHP. Den er fin å bruke når man skal

håndtere administrasjonen av MySQL. Særlig web-basert administrasjon, som passer fint for oss.

1.4.2 PHP (PHP Hypertext Preprocessor)

Passer perfekt til webutvikling og brukes som programmeringsspråk. PHP er egentlig en

forkortelse for PHP Hypertext Preprocessor. Det er et server-side script, der koden ligger på

serveren og blir kjørt derfra. Brukere som da vil se på en nettside vil ikke kunne se kildekoden.

Brukeren ser kun HTML-teksten som PHP-koden genererer. PHP kan programmere mot

databaser som er nyttig for vår nettside.

1.4.3 HTML 4

HTML er en forkortelse for HyperText Markup Language. Det er et markeringsspråk for

formatering av nettsider som inneholder hypertekst og annen innhold som skal vises i en nettleser.

Man bruker HTML for å strukturere informasjon, for eksempel tekst som en overskrift, lage

avsnitt, legge til tabell osv.

1.4.4 CSS 3

CSS er en forkortelse for Cascading Style Sheets, og er en standard som utfyller HTML. Den

angir hvordan HTML-fil skal se ut, enten i HTML-filen eller i en egen CSS-fil. CSS har grafiske

fordeler. Istedenfor å skrive all layout-informasjon i HTML, kan man ha alt i noen få CSS-fil. Det

gjør det enklere å vedlikeholde nettsidene.

Page 27: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

27

1.5 Arkitektur

(Figur 2)

Kartet (se figur 2) viser hvordan siden er bygd opp og henger sammen. Den viser enkelt hvor

brukeren kommer ved å trykke på de forskjellige aktivitetene.

(Figur 3)

Page 28: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

28

På administrator-siden blir man presentert de seks forskjellige tingene admin har kontroll over.

1.6 Use case

1.6.1 Use case modell for ADMIN

(Figur 4)

Page 29: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

29

1.6.2 Detaljert Use Case beskrivelse for admin

Aktør Administrator

Trigger Admin vil legge til en side

Pre-betingelser Bruker har administrasjonsprivilegier

Post-betingelser Admin har lagt til en side

Normal hendelsesflyt 1. Logger inn

2. Trykker på knappen “Side”

3. Fyller ut feltene + laste opp bilde

4. Legger til side

Variasjoner 1. Admin skriver inn feil brukernavn og

passord.

a) Admin må skrive brukernavn og

passord på nytt.

4. Feilmelding

a) Feltene er ikke riktig fylt ut.

Page 30: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

30

1.6.3 Use case modell for elev

(Figur 5)

1.6.4 Detaljert use Case beskrivelse for elev

Aktør Elev

Trigger Elev lurer på noe

Pre-betingelser Elev er registrert

Post-betingelser Spørsmålet har blitt sendt

Normal hendelsesflyt 1. Eleven logger inn

2. Eleven skriver inn tittel og deretter spørsmål

3. Deretter må relevant fag velges

4. Eleven trykker på “Send inn spørsmål”

Variasjoner 1. Feil brukernavn/passord

a. Fylle inn feltene på nytt

4. Spørsmål blir ikke sendt

a. Tittel og/eller spørsmålsfeltet må

fylles

Page 31: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

31

2 DESIGN

(Figur 6)

2. 1 Navigering og struktur

Figur 6 er presentasjonssiden til OKUF. En veldig enkel design og ganske klassisk form. Forsiden

er oversiktlig, og siden er enkel å navigere. Navigeringen har vi tenkt nøye på. Det er ikke mange

ganger man må klikke seg igjennom for å komme til bestemt sted, eller om en vil bare utforske

siden, er det heller ikke langt til forsiden igjen. Alle temaer som siden har er på forsiden, så man

klikker kun en gang (utenom de forskjellige rommene, på grunn av innlogging). Nettsiden følger

en god struktur. For å kunne helt nederst i siden trenger man ikke å scrolle mye. Valgene vi har

tatt er i tanke på at nettsiden skal ikke være en belastning.

Page 32: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

32

På forsiden er det lagt til lenker til både aktivitetene og kursene OKUF tilbyr. Det er også et

bildegalleri og et videogalleri. Også er det selve hovedhensikten med siden, at det er lenker til

leksehjelpdelen og lærerrommet.

(Figur 7)

På figur 7 ser vi hvordan strukturen er på siden. Det ligger flere bilder av strukturen som vedlegg.

Page 33: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

33

2.2 Fargevalg og bilder

Det er to hovedfarger, mørkeblå og hvit. Indeksen har vi valgt i mørkeblå, med hvit skrift. Hvit

skrift på mørk bakgrunn er lett leselig. Bakgrunnen er lys, nærmest hvit. Øverst på siden starter

det med en svak blåfarge som duser ut nedover til hvit. Utenom indeksen har vi valgt svart skrift,

for det er veldig leselig for alle brukere.

For å ikke ha en altfor kjedelig utseende har vi spriket litt med farger på innloggingene, og da har

vi valgt litt jordfarger slik at de ser fint ut sammen. Vi har bilder til artikler, og på newsfeeden for

å gjøre siden litt levende.

Det er tre forskjellige innlogginger på forsiden:

● Leksehjelp (grønn rute)

● Lærerrom (lilla rute)

● Foreldrerom (oransje rute)

Vi har valgt å ha de i godt synlige farger, slik at det er lett for bruker å få øye på de. Det var

veldig viktig at leksehjelpknappen var synlig og lett tilgjengelig.

Bildene som finnes nede på forsiden brukes med Lightbox. Denne funksjonen gjør slik at når du

åpner bildet, kommer den midt på skjermen, og resten av siden blir litt mørk i bakgrunnen slik at

man lettere kan fokusere på bildet.

2.3 Slide med bilder

På forsiden har vi en animasjon med bilder som skifter. Disse bildene har forskjellige funksjoner.

Et fører til informasjon om side, mens en annen kan føre til siste nyhet.

Vi har brukt jQuery for å få til denne sliden.

2.4 Plassering

På forsiden til www.okuf.no har vi valgt å ta indeksen helt øverst. Brukere kan se hvilke

aktiviteter og kurs som er tilgjengelig, i tillegg til vanlig informasjon (om OKUF,

kontaktinformasjon). Valget med å ta det øverst er fordi det er som oftest det en bruker ser først.

Vi har valgt å ha logoen øverst til venstre, slik at den er godt og synlig.

Søk er øverst til høyre, fordi det føles mest naturlig å se etter søk i den retningen. Aktiviteter og

kurs er i den høyre indeksen. De har vi valgt å ikke ta med i den øverste indeksen, i og med at det

hører til en annen kategori. Diverse artikler ligger under kurs, om elevene skulle være interessert i

å lese relevante saker. I midten er det en bildeslide med aktuelle nyheter. Aktuelle nyheter er

gjerne noe elevene burde få med seg og få øye på, derfor har valget falt til at det skal være i

midten.

Page 34: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

34

Over søk har vi tatt med tre sosiale medier, Facebook, Twitter og Youtube. Tanken bak disse er at

brukeren skal kunne få besøke de forskjellige kontoene OKUF har i sosiale medier.

2.5 Logo

Logoen har vi ikke laget selv, den er OKUFs originale logo.

2.6 Kontakt oss

(Figur 8)

På “Kontakt oss” står adressen, e-postadressen og telefonnummeret til OKUF.

Page 35: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

35

(Figur 9)

Vi har på samme side valgt å ta med kart, med en veibeskrivelse. På denne måten kan brukere

finne OKUF.

Page 36: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

36

3 OPPBYGNING OG VIRKEMÅTE

3.1 Innlogging og registrering

(Figur 10)

Før man i det hele tatt kommer inn på “Leksehjelp”-siden må man enten logge seg inn eller

registrere seg om man ikke har en bruker fra før.

Brukerne registrerer seg som medlem i OKUF, der de må gi personlig informasjon, som blir

videre sendt til databasen, der hvor admin må godkjenne det. Passordet blir kryptert med md5.

Page 37: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

37

3.1.1 Registrering

(Figur 11)

Når brukeren skal registrere seg må brukeren fylle inn alle feltene ellers kommer det opp en

feilmelding, ellers får ikke brukeren registrert seg.

(Figur 12)

Page 38: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

38

I “leksehjelp.php” ser vi at den sjekker at:

● Alle felter er skrevet inn

● E-postadressen er allerede registrert

● Sjekker om passordene stemmer

I registrering skal brukeren lage sitt eget passord, og da må gjerne brukeren gjenta passordet slik

at det er likt.

3.1.2 Innlogging

(Figur 13)

Har eleven skrevet inn riktig brukernavn og passord kommer man inn på “Online leksehjelp”,

som man kan se på på neste skjermbilde av nettsiden.

Page 39: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

39

(Figur 14)

Brukeren skriver inn e-postadressen og passord. Databasen sjekker om informasjonen er gyldig.

Om tastet informasjon er feil kommer det ut meldingen: “Denne e-postadressen eksisterer ikke!”,

om det er ugyldig e-postadresse. Er passordet ugyldig kommer ut meldingen: “Feil passord!”

$_SESSION[‘usertype’]=”student”; viser også hvilke brukergruppe brukeren tilhører. Som

tidligere nevnt har vi tre grupper; student/elev, lærer og foreldre/foresatt.

Page 40: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

40

3.2 Godkjenning av elev

(Figur 15)

Når eleven har registrert seg, så er det admin som må godkjenne. Så eleven må vente på

godkjenning, og man får opp denne meldingen om man fortsatt er på venting (se figur#).

Admin har en oversikt over elever som har registrert seg og eksisterende elever.

(Figur 16)

På status står det enten “Aktiv” eller “Inaktiv”, admin kan endre det ved å trykke på “Rediger” på

samme rad på den eleven admin vil endre.

Page 41: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

41

(Figur 17)

For eksempel om vi går inn på Jente Jentesen, kan vi på hennes status velge “Aktiv” eller

“Inaktiv”.

Admin trykker på “Oppdater elev” og da er brukeren aktiv og kan nå bruke leksehjelp. Statuen

hennes blir nå endret.

Nå kan eleven logge seg inn på leksehjelp.

3.3 Passord

3.3.1 Glemt passord

(Figur 18)

Page 42: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

42

Om eleven skriver inn feil passord, dukker det opp feilmeldingen: “Feil passord!” Om eleven ikke

husker passordet sitt kan eleven trykker på “Glemt passord?” som ligger rett under knappen

“Logg inn”. Vi har valgt å plassere den der, slik at eleven ikke trenger å lete etter knappen.

3.3.2 Forespørsel om passord

(Figur 19)

Eleven skriver inn e-postadressen sin og trykker “Send passord”. Passordet blir da sendt til e-

postadressen som er skrevet i feltet.

(Figur 20)

Systemet må koble til databasen for å hente et nytt passord. Da sender den et forespørsel

“SELECT * FROM students WHERE email=’$np_email’”. Den henter et nytt passord som er lik

e-postadressen som er skrevet.

Page 43: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

43

3.4 Online leksehjelp

På leksehjelp siden kan elevene registrere seg. Vi har også lagt inn en glemt-passord funksjon.

Når elevene logger inn, får de tilgang til å stille spørsmål dersom de er aktivert av admin. Elevene

kan da velge fagområde de ønsker å stille spørsmål i, og skrive spørsmålet også poste det.

Lærerne, som er tilknyttet de ulike fagområdene kan gå inn og svare på spørsmålene. Programmet

åpner for at denne dialogen kan forsette, og hvert spørsmål får sin egen “side”.

(Figur 21)

Leksehjelp fungerer ved at man har en tabell for hvert spørsmål. Når eleven legger inn spørsmål

tilknyttet et fagområde (en egen tabell i databasen som kan administreres via kontrollpanelet), er

dette spørsmålet synlig for lærerne som er tilknyttet det spesifikke fagområdet. Læreren kan så gå

inn og svare på spørsmålet. Dette registreres i en egen tabell. Eleven kan da gå inn og forsette

samtalen, som registreres i samme tabell.

Page 44: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

44

(Figur 22)

3.4.1 Still spørsmål/Nytt spørsmål

På hovedsiden til online leksehjelp er det en chatside hvor eleven kan stille spørsmål.

Spørsmålene blir arkivert under “Mine spørsmål.” Det er kun eleven som kan se denne siden.

Under “Mine spørsmål” kan man se svaret på sitt spørsmål, og man kan også velge å se hele

chatten under angitt tittel.

Når man har fylt feltene, i det tilfellet her tittel og beskrivelse, velger man kategori (foreløpig

norsk, engelsk og matematikk) hvor eleven kan sende inn spørsmålet.

Ved å trykke på “Vis mer” ser eleven om spørsmålet er besvart, se bildet under.

Page 45: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

45

(Figur 23)

Datoen siste spørsmål ble sendt inn, og om noen har besvart spørsmålet. Eleven kan stille flere

spørsmål i feltet.

(Figur 24)

Page 46: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

46

4 KONTROLLPANEL (ADMIN)

Eieren kan styre nettsiden via administrasjonspanelet. Denne finner man på www.okuf.no/admin.

Her kan eieren legge til, slette eller redigere undersidene, aktivitetene, artikklene og kursene.

Admin har også tilgang til å legge til nye fagområder, eller kategorier for leksehjelp. Admin kan

også administrere elever og lærere på samme måte.

4.1 Logg inn

(Figur 25)

Dette er siden adminstrator logger inn fra.

Page 47: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

47

(Figur 26)

Her foregår innloggingen på samme måte med innlogging for elever.

Eneste forskjellen her er at systemet sjekker om brukeren en er en administrator eller ikke. Om

brukeren er det, vil personen bli overført til admin.php

Page 48: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

48

4.2 Kontrollpanel

(Figur 27)

Admin har forskjellige valg på forsiden. Admin legger til side, legger ut om forskjellige

aktiviteter og kurs. Og har tilgang til informasjon om elever og lærere og legger til og sletter fag.

(Figur 28)

Page 49: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

49

I figur 28 ser man hvordan admin kan legge til en side. Admin skriver inn tittel, og legger til

innhold, og eventuelt et bilde eller bilder.

4.3 Legg til kurs

(Figur 29)

Admin kan legge til sider, slider, artikler, aktiviteter og kurs. Alle disse gjøres på samme på

samme måte, men har ulike php-filer. Filene heter pages.php, slides.php, articles.php,

activity.php og courses.php.

Som man kan se på legge til side og legge til kurs, er det den samme fremgangsmåten:

● Tittel

● Innhold

● Bilde

● Legg til

Page 50: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

50

(Figur 29)

Når admin skal laste opp bilde til de forskjellige sidene, blir det sjekket om riktig filtype er lastet

opp. Det er kun tillat med bildefilene JPG, JPEG, PNG eller GIF. Hvis det er en annen filtype

som er lastet opp enn de som er nevnt, kommer det beskjed fra PHP-koden “Du kan kun laste opp

JPG, JPEG, PNG eller GIF bilder.” Det er ikke støttet for andre filer.

4.4 Legg til lærer

Page 51: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

51

(Figur 30)

(Figur 31)

I de to skjermbildene over ser vi registrering av lærer. Man kan ikke registrere seg selv som lærer.

Dette er noe administrasjonen ordner. Admin skriver inn e-postadressen og passord, slik at

personen som er lærer mottar en e-post. Etter å ha trykket på linken kan vedkommende bytte

passord og aktivere brukeren sin.

4.4.1 Rediger lærer

(Figur 32)

Page 52: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

52

(Figur 33)

I tillegg til det har admin også en oversikt over eksisterende lærere. Hver lærer får deres eget ID-

nummer. Admin kan velge å redigere eller slette en lærer. Når admin trykker på “Slett” blir

læreren slettet øyeblikkelig og hele raden blir borte.

(Figur 34)

Per nå har vi ikke en “Glemt passord”- funksjon for lærere. Dette dokumentet blir levert en uke

før for å bli printet av skolen, men til 27. mai vil vi ha fått denne funksjonen implementert.

Page 53: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

53

4.5 Legg til fag

(Figur 35)

Admin kan legge til flere fag på siden, slette et fag, eller slette hele faget. Når admin trykker på

“Slett” blir faget slettet umiddelbart.

(Figur 36)

Page 54: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

54

4.6 Slette en bruker

(Figur 37)

I filen delete.php blir en bruker slettet. Det er en funksjon som kaller på databasen om å slette den

den bestemte bruker ved hjelp av ID.

4.7 Logg ut

(Figur 38)

Page 55: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

55

(Figur 39)

Øverst til høyre ligger “Logg ut” knappen til admin.

“session_destroy( );” gjør slik at at all data som er linket til nåværende “session” blir

ødelagt/fjernet (“destroy”).

4.8 Søk

(Figur 40)

På forsiden har vi implementert søk nesten øverst til høyre. Brukerne kan bruker søk, om de ikke

helt finner det de lurer på.

Page 56: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

56

(Figur 41)

Databasen finner artikkelen, aktiviteten, kurset eller siden som inneholder eller er lik ordet

brukeren har søkt etter.

5 AVSLUTNING

5.1 Endringer

I løpet av prosjektarbeidet, har vi fulgt det meste som vi planla

Vi hadde planlagt at vi også skulle ha med et rom for foreldre hvor de kunne se informasjon rettet

mot dem, i tillegg til å kunne ha kontakt med lærere, men etter at prosjektet nærmet seg slutten,

bestemte vi oss for å fjerne denne muligheten. Grunnen til det var at arbeidsgiveren var usikker på

om det var noe vi trengte å ha med, så til slutt fjernet vi det.

5.2 Videreutvikling

Denne nettsiden har gode muligheter til å kunne videreutvikles. Senere kan man få lagt til

foreldrerommet om OKUF føler at det er greit å ta med likevel.

Ettersom nettsiden skal fungere som hovedsiden for OKUF kan det hendes at de trenger å

ekspandere det etterhvert ved å legge til nye funksjoner dersom det blir behov.

Page 57: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

57

5.3 Konklusjon

Da vi startet prosjektet, var vi klare for utfordringen arbeidsgiveren gav oss. I løpet av

prosjekttiden har vi utviklet en nettside for unge hvor de kan få leksehjelp, samtidig som vi har

utformet to dokumentasjoner.

Nettsiden i sin helhet er vi fornøyde med; den er brukevennlig og oversiktlig og den tjener sin

hensikt.

Hele prosessen har vært læringsrikt, og samtidig arbeidskrevende. Vi føler at dette er noe vi kan

ta med videre.

Page 58: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

58

6 KILDER

Hjemmesiden

www.okuf.no

PHP (PHP Hypertext Preprocessor)

http://itpro.no/artikkel/4098/definisjon-hva-er-php/

HTML 4

http://no.wikipedia.org/wiki/HTML

CSS 3

http://www.garshol.priv.no/download/text/css-intro.html

Page 59: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

59

7 VEDLEGG

Page 60: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

60

Page 61: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

61

Page 62: HOVEDPROSJEKT I ANVENDT DATATEKNOLOGI OG …student.cs.hioa.no/hovedprosjekter/data/2014/38/PDF/Hove... · 2014-05-21 · Fahad og Stephanie var egentlig en egen gruppe og hadde en

Produktdokumentasjon Våren 2014

62