Webside/Webportal & IP-Sone
for
En Kopp Café & Bar
Arkaden Servering AS
Bind 4
Design
11121 Prosjektoppgave
Anja Nygård Sjøholt
Erlend Smines
Kenneth Johansen
Leif Gunnar Kristiansen
7. mai 2003
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 2
Innholdsfortegnelse
INNHOLDSFORTEGNELSE........................................................................................................................ 2
FIGURLISTE .................................................................................................................................................. 3
1 INNLEDNING.............................................................................................................................................. 5
2 DESIGNKLASSER ...................................................................................................................................... 6
2.1 DESIGN DATABASE-WEB.......................................................................................................................... 6
2.2 WEBSIDE/PORTAL DESIGNKLASSER ....................................................................................................... 22
2.3 UTRULLINGSDIAGRAM........................................................................................................................... 72
3 IP-SONE...................................................................................................................................................... 73
3.1 VALGT LØSNING: ................................................................................................................................... 74
4 WEBSIDE ................................................................................................................................................... 76
BRUKERVENNLIGHET, SVARTID OG NAVIGERING......................................................................................... 76
4.1 WEBSIDEDESIGN.................................................................................................................................... 77
4.2 PLANLEGGING AV UTSEENDET............................................................................................................... 80
4.3 PLANLEGGING AV INNHOLDET............................................................................................................... 82
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 3
Figurliste
FIGUR 1: SPORING DATABASE 1: USERS (ANSATT)............................................................................................. 7
FIGUR 2: SPORING DATABASE 2: ARRANGEMENT .............................................................................................. 9
FIGUR 3: SPORING DATABASE 3: ARTIKKEL..................................................................................................... 11
FIGUR 4: SPORING DATABASE 4: NYHET.......................................................................................................... 13
FIGUR 5: SPORING DATABASE 5: MENY ........................................................................................................... 14
FIGUR 6: SPORING DATABASE 6: MENYGRUPPER............................................................................................. 15
FIGUR 7: SPORING DATABASE 7: GJESTEBOK................................................................................................... 16
FIGUR 8: SPORING DATABASE 8: HJELP ........................................................................................................... 17
FIGUR 9TABELLER PÅ 3NF.............................................................................................................................. 20
FIGUR 10 OVERSIKT OVER TABELLER I DATABASEN......................................................................................... 21
FIGUR 11: SPORING DESIGNKLASSE 1: OPPDATERE SYSTEMET........................................................................ 23
FIGUR 12: KLASSEDIAGRAM DESIGNKLASSE 1: OPPDATERE SYSTEMET .......................................................... 23
FIGUR 13: SEKVENSDIAGRAM DESIGNKLASSE 1: OPPDATERE SYSTEMET........................................................ 24
FIGUR 14: SPORING DESIGNKLASSE 2: LEGG INN NY ANSATT .......................................................................... 25
FIGUR 15: KLASSEDIAGRAM DESIGNKLASSE 2: LEGG INN NY ANSATT............................................................. 25
FIGUR 16: SEKVENSDIAGRAM DESIGNKLASSE 2: LEGG INN NY ANSATT .......................................................... 26
FIGUR 17: SPORING DESIGNKLASSE 3: REDIGER ANSATT................................................................................. 27
FIGUR 18: KLASSEDIAGRAM DESIGNKLASSE 3: REDIGER ANSATT ................................................................... 27
FIGUR 19: SEKVENSDIAGRAM DESIGNKLASSE 3: REDIGER ANSATT................................................................. 29
FIGUR 20: SPORING DESIGNKLASSE 4: SLETT ANSATT ..................................................................................... 30
FIGUR 21: KLASSEDIAGRAM DESIGNKLASSE 4: SLETT ANSATT ....................................................................... 30
FIGUR 22: SEKVENSDIAGRAM DESIGNKLASSE 4: SLETT ANSATT ..................................................................... 31
FIGUR 23: SPORING DESIGNKLASSE 5: LEGG INN NYTT ARRANGEMENT........................................................... 32
FIGUR 24: KLASSEDIAGRAM DESIGNKLASSE 5: LEGG INN NYTT ARRANGEMENT............................................. 32
FIGUR 25: SEKVENSDIAGRAM DESIGNKLASSE 5: LEGG INN NYTT ARRANGEMENT........................................... 33
FIGUR 26: SPORING DESIGNKLASSE 6: REDIGER ARRANGEMENT ..................................................................... 34
FIGUR 27: KLASSEDIAGRAM DESIGNKLASSE 6: REDIGER ARRANGEMENT ....................................................... 34
FIGUR 28: SEKVENSDIAGRAM DESIGNKLASSE 6: REDIGER ARRANGEMENT ..................................................... 35
FIGUR 29: SPORING DESIGNKLASSE 7: SLETT ARRANGEMENT ......................................................................... 36
FIGUR 30: KLASSEDIAGRAM DESIGNKLASSE 7: SLETT ARRANGEMENT............................................................ 36
FIGUR 31: SEKVENSDIAGRAM DESIGNKLASSE 7: SLETT ARRANGEMENT ......................................................... 37
FIGUR 32: SPORING DESIGNKLASSE 8: LEGG INN ARTIKKEL ............................................................................ 38
FIGUR 33: KLASSEDIAGRAM DESIGNKLASSE 8: LEGG INN ARTIKKEL............................................................... 38
FIGUR 34: SEKVENSDIAGRAM DESIGNKLASSE 8: LEGG INN ARTIKKEL ............................................................ 39
FIGUR 35: SPORING DESIGNKLASSE 9: REDIGER ARTIKKEL.............................................................................. 40
FIGUR 36: KLASSEDIAGRAM DESIGNKLASSE 9: REDIGER ARTIKKEL................................................................ 40
FIGUR 37: SEKVENSDIAGRAM DESIGNKLASSE 9: REDIGER ARTIKKEL.............................................................. 41
FIGUR 38: SPORING DESIGNKLASSE 10: SLETT ARTIKKEL................................................................................ 42
FIGUR 39: KLASSEDIAGRAM DESIGNKLASSE 10: SLETT ARTIKKEL .................................................................. 42
FIGUR 40: SEKVENSDIAGRAM DESIGNKLASSE 10: SLETT ARTIKKEL................................................................ 43
FIGUR 41: SPORING DESIGNKLASSE 11: LEGG INN NYHET................................................................................ 44
FIGUR 42: KLASSEDIAGRAM DESIGNKLASSE 11: LEGG INN NYHET.................................................................. 44
FIGUR 43: SEKVENSDIAGRAM DESIGNKLASSE 11: LEGG INN NYHET................................................................ 45
FIGUR 44: SPORING DESIGNKLASSE 12: REDIGER NYHET................................................................................. 46
FIGUR 45: KLASSEDIAGRAM DESIGNKLASSE 12: REDIGER NYHET................................................................... 46
FIGUR 46: SEKVENSDIAGRAM DESIGNKLASSE 12: REDIGER NYHET................................................................. 47
FIGUR 47: SPORING DESIGNKLASSE 13: SLETT NYHET..................................................................................... 48
FIGUR 48: KLASSEDIAGRAM DESIGNKLASSE 13: SLETT NYHET ....................................................................... 48
FIGUR 49: SEKVENSDIAGRAM DESIGNKLASSE 13: SLETT NYHET ..................................................................... 49
FIGUR 50: SPORING DESIGNKLASSE 14: LEGG INN MENYELEMENT .................................................................. 50
FIGUR 51: KLASSEDIAGRAM DESIGNKLASSE 14: LEGG INN MENYELEMENT .................................................... 50
FIGUR 52: SEKVENSDIAGRAM DESIGNKLASSE 14: LEGG INN MENYELEMENT .................................................. 51
FIGUR 53: SPORING DESIGNKLASSE 15: REDIGER MENY .................................................................................. 52
FIGUR 54: KLASSEDIAGRAM DESIGNKLASSE 15: REDIGER MENY .................................................................... 52
FIGUR 55: SEKVENSDIAGRAM DESIGNKLASSE 15: REDIGER MENY .................................................................. 53
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 4
FIGUR 56: SPORING DESIGNKLASSE 16: SLETT MENYELEMENT........................................................................ 54
FIGUR 57: KLASSEDIAGRAM DESIGNKLASSE 16: SLETT MENYELEMENT.......................................................... 54
FIGUR 58: SEKVENSDIAGRAM DESIGNKLASSE 16: SLETT MENYELEMENT ........................................................ 55
FIGUR 59: SPORING DESIGNKLASSE 17: ENDRE BRUKERNAVN/PASSORD ......................................................... 56
FIGUR 60: KLASSEDIAGRAM DESIGNKLASSE 17: ENDRE BRUKERNAVN/PASSORD ........................................... 56
FIGUR 61: SEKVENSDIAGRAM DESIGNKLASSE 17: ENDRE BRUKERNAVN/PASSORD ......................................... 57
FIGUR 62: SPORING DESIGNKLASSE 18: LEGG INN BILDE................................................................................. 58
FIGUR 63: KLASSEDIAGRAM DESIGNKLASSE 18: LEGG INN BILDE ................................................................... 58
FIGUR 64: SEKVENSDIAGRAM DESIGNKLASSE 18: LEGG INN BILDE ................................................................. 59
FIGUR 65: SPORING DESIGNKLASSE 19: SLETT BILDE ...................................................................................... 60
FIGUR 66: KLASSEDIAGRAM DESIGNKLASSE 19: SLETT BILDE......................................................................... 60
FIGUR 67: SEKVENSDIAGRAM DESIGNKLASSE 19: SLETT BILDE ...................................................................... 61
FIGUR 68: SPORING DESIGNKLASSE 20: SLETT FRA GJESTEBOK....................................................................... 62
FIGUR 69: KLASSEDIAGRAM DESIGNKLASSE 20: SLETT FRA GJESTEBOK ......................................................... 62
FIGUR 70: SEKVENSDIAGRAM DESIGNKLASSE 20: SLETT FRA GJESTEBOK ....................................................... 63
FIGUR 71: SPORING DESIGNKLASSE 21: HJELP................................................................................................. 64
FIGUR 72: KLASSEDIAGRAM DESIGNKLASSE 21: HJELP ................................................................................... 64
FIGUR 73: SEKVENSDIAGRAM DESIGNKLASSE 21: HJELP................................................................................. 65
FIGUR 74: SPORING DESIGNKLASSE 22: LESE INFORMASJON NETTSIDE ........................................................... 66
FIGUR 75: KLASSEDIAGRAM DESIGNKLASSE 22: LESE INFORMASJON NETTSIDE.............................................. 66
FIGUR 76: SEKVENSDIAGRAM DESIGNKLASSE 22: LESE INFORMASJON NETTSIDE............................................ 67
FIGUR 77: SPORING DESIGNKLASSE 23: KONTAKTE EN-KOPP FRA NETTSIDE ................................................... 68
FIGUR 78: KLASSEDIAGRAM DESIGNKLASSE 23: KONTAKTE EN-KOPP FRA NETTSIDE...................................... 68
FIGUR 79: SEKVENSDIAGRAM DESIGNKLASSE 23: KONTAKTE EN-KOPP FRA NETTSIDE ................................... 69
FIGUR 80: SPORING DESIGNKLASSE 24: SKRIV I GJESTEBOK ............................................................................ 70
FIGUR 81: KLASSEDIAGRAM DESIGNKLASSE 24: SKRIV I GJESTEBOK .............................................................. 70
FIGUR 82: SEKVENSDIAGRAM DESIGNKLASSE 24: SKRIV I GJESTEBOK ............................................................ 71
FIGUR 83 UTRULLINGSDIAGRAM...................................................................................................................... 72
FIGUR 84 HOVEDMENY .................................................................................................................................... 81
FIGUR 85 HOVEDMENY/UNDERMENY............................................................................................................... 81
FIGUR 86 VIS HVOR.......................................................................................................................................... 82
FIGUR 87 DESIGNUTKAST................................................................................................................................. 84
FIGUR 88 DESIGNUTKAST................................................................................................................................. 84
FIGUR 89 DESIGNUTKAST................................................................................................................................. 85
FIGUR 90 ENDELIG DESIGN............................................................................................................................... 86
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 5
1 Innledning
Systemet deles inn i flere delsystemer:
x
Hjemmeside
x
Portal
x
Web-database
x
IP-sone
Disse delsystemene tar utgangspunkt i en eller flere pakker fra analysen.
I design blir systemet utformet i henhold til tidligere definerte krav. Utgangspunktet for
design er resultatet av analysen, som representerer en detaljert forståelse av kravene.
Designmodellen er en fysisk modell som fungerer som en mal for implementasjonen. Den
er ikke generell, men spesifikk for hvert enkelt prosjekt.
Rekkefølgen av arbeidsoppgavene er som følger, med forskjellige iterasjoner:
x
Designklasser laget ut fra brukstilfellerealiseringer fra analysen.
x
Designet i tekstlig beskrivelse samt illustrasjoner.
IP-sone-delen av prosjektet har vi valgt å ikke legge noe videre vekt på i design-delen da vi
på dette stadiet i prosessen så godt som har bestemt oss for å anbefale oppdragsgiver å
kjøpe inn dette fra ekstern leverandør. Vi kommer tilbake med en begrunnelse for dette
valget mot slutten av dette dokumentet.
Websiden/portalen har vi bestemt å utvikle ved å benytte oss av HTML, PHP, MySQL og
Java-script. Grensesnittet mot aktørene vil bestå av HTML og Java-script, mens selve siden
blir generert ved hjelp av PHP-script sammen med SQL-spørringer som jobber mot en
MySQL database.
PHP er ikke basert på klasser, men vi har allikevel valgt å benytte oss av dette begrepet
gjennom designfasen. Dette er et valg vi har tatt for ikke å miste sporingen til analysen
samt at en oppdeling i klasser vil gjøre det enklere å beskrive systemets design.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 6
2 Designklasser
Vi har valgt å gripe an design i følgende rekkefølge:
x
MySQL tabellene som er nødvendig i systemet.
x
Websiden/portalen
x
Oppdatere systemet (administrasjon)
x
Vise websiden
Back to top
2.1 Design database-web
Denne delen tar for seg følgende:
x
Diagram: Sporing til analysen.
x
Databasen består av følgende attributter: opplisting av attributter og datatype.
x
Enkel attributt- forklaring: Forklarer enkelte ”vanskelige” attributter.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 7
Database 1: Users (ansatt)
x
Sporing tilbake til analyse.
Users
ID
Fornavn
Etternavn
Brukernavn
Passord
Adm inistratorrettigheter
Stilling
E-post
Beskrivelse
Bilde
Ansatt
(f rom DB Users(ansatt) )
Figur 1: Sporing Database 1: Users (ansatt)
x
Databasen består av følgende attributter:
Attributter Datatype
ID Int (3)
Fornavn Varchar (50)
Etternavn Varchar (50)
Passord Varchar (50)
Administratorrettigheter Int (1)
Stilling Varchar (50)
E-post Varchar (50)
Beskrivelse Text
Bilde Varchar (50)
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 8
x
Enkel attributt forklaring:
x
Administrasjonsrettigheter: Denne attributten er en true/false, det vil si dersom
den er satt til 1 (true) har den aktuelle ansatte administratorrettigheter, det vil si
at han kan opprette nye brukere (ansatte).
x
Beskrivelse: En liten tekst om den aktuelle ansatte.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 9
Database 2: Arrangement
x
Sporing tilbake til analysen.
Arrangement
ID
PS
Dato
Ekstradato
Klokkeslett
Overskrift
Hvem
Beskrivelse
Pris_1
Pris_2
Url_1
Url_2
Bilde
Innlagt_av
Opprettet
Arrangem enter
(f rom DB Arrangement)
<<realize>>
Figur 2: Sporing Database 2: Arrangement
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 10
x
Databasen består av følgende attributter:
Attributter Datatype
ID Int (4)
PS Char (3)
Dato Varchar (16)
Ekstradato Varchar (40)
Klokkeslett Varchar (5)
Overskrift Varchar (80)
Hvem Varchar (80)
Beskrivelse Text
Pris_1 Int (3)
Pris_2 Int (3)
Url_1 Varchar (80)
Url_2 Varchar (80)
Bilde Varchar (50)
Innlagt_ av Varchar (50)
Opprettet Varchar (16)
x
Enkel attributt forklaring:
x
PS: Forklarer om arrangementet er et PS arrangement (spesiell type
arrangement) eller ikke.
x
Ekstradato: Dersom arrangementet går flere ganger.
x
Pris_1 og pris_2: Dersom det finnes to forskjellige pris-kategorier (eks:
medlem/ ikke medlem)
x
Url_1 og Url_2: Inneholder en lenke til et annet nettsted.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 11
Database 3: Artikkel
x
Sporing tilbake til analysen.
Artikkel
ID
Overskrift
Ingress
Innhold
Bilde_1
Bilde_2
Bilde_3
Bilde_4
Innlagt_av
Redigert_av
Opprettet
Redigert
Artikkel
(f rom DB artikkel)
<<realize>>
Figur 3: Sporing Database 3: Artikkel
x
Databasen består av følgende attributter:
Attributter Datatype
ID Int (4)
Overskrift Varcar (100)
Ingress Text
Innhold Text
Bilde_1 Varchar (30)
Bilde_2 Varchar (30)
Bilde_3 Varchar (30)
Bilde_4 Varchar (30)
Innlagt_av Varchar (50)
Redigert_av Varchar (50)
Opprettet Varchar (16)
Redigert Varchar (16)
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 12
x
Enkel attributt forklaring:
x
Ingress: Her skrives det som skal komme opp på artikkelsiden. Er innledning
til artikkelen og skal lokke lesere til å ”gå inn” å lese hele artikkelen.
x
Bilde_1 osv.: Her blir det lagt inn en sti til hvor systemet finner det aktuelle
bildet.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 13
Database 4: Nyhet
x
Sporing tilbake til analysen.
Nyhet
ID
Overskrift
Innhold
Bilde
Intern_url
Innlagt_av
Redigert_av
Opprettet
Redigert
Nyhet
(f rom DB ny het)
<<realize>>
Figur 4: Sporing Database 4: Nyhet
x
Databasen består av følgende attributter:
Attributter Datatype
ID Int (4)
Overskrift Varcar (100)
Innhold Text
Bilde Varchar (30)
Intern_url Varchar (40)
Innlagt_av Varchar (50)
Redigert_av Varchar (50)
Opprettet Varchar (16)
Redigert Varchar (16)
x
Enkel attributt forklaring:
x
Intern_url: Dersom man ønsker å legge en lenke fra nyheten til en annen intern
side.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 14
Database 5: Meny
x
Sporing tilbake til analysen.
Meny
ID
Gruppe
M enyelem ent
Komm entar
Pris_1
Pris_2
Numm er
Meny
(f rom DB meny )
Figur 5: Sporing Database 5: Meny
x
Databasen består av følgende attributter:
Attributter Datatype
ID Int (4)
Gruppe Varchar (30)
Menyelement Varchar (50)
Kommentar Varchar (50)
Pris_1 Int (3)
Pris_2 Int (3)
Nummer Int (2)
x
Enkel attributt forklaring:
x
Gruppe: Forteller hvilken gruppe den aktuelle retten skal ligge under.
x
Menyelement: Navn på rett.
x
Kommentar: f.eks.: Hva retten består av.
x
Nummer: Hvilken plass i menyen man ønsker at dette elementet skal stå.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 15
Database 6: Menygrupper
x
Sporing tilbake til analysen.
Menygrupper
ID
Gruppe
Kom m entar
Num m er
M enygrupper
(f rom DB meny grupper)
<<realize>>
Figur 6: Sporing Database 6: Menygrupper
x
Databasen består av følgende attributter:
Attributter Datatype
ID Int (4)
Gruppe Varchar (30)
Kommentar Varchar (40)
Nummer Int (2)
x
Enkel attributt forklaring:
x
Gruppe: Navn på menygruppen, eks.: Småretter, Dagens eller Drikkekart.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 16
Database 7: Gjestebok
x
Sporing tilbake til analysen.
Gjestebok
ID
Navn
Sted
E-post
Url
Hilsen
Dato
Gjestebok
(f rom DB gjestebok)
<<realize>>
Figur 7: Sporing Database 7: Gjestebok
x
Databasen består av følgende attributter:
Attributter Datatype
ID Int (4)
Navn Varchar (50)
Sted Varchar (50)
E-post Varchar (50)
Url Varchar (50)
Hilsen Text
Dato Timestamp (14)
x
Enkel attributt forklaring:
x
Sted: Hvor man kommer fra.
x
Url: Adresse til egen nettside.
x
Hilsen: Selve teksten.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 17
Database 8: Hjelp
x
Sporing tilbake til analysen.
Hjelp
ID
Ov erskrif t
Innhold
Hjelp
(from DB hjelp)
<<realize>>
Figur 8: Sporing Database 8: Hjelp
x
Databasen består av følgende attributter:
Attributter Datatype
ID Varchar (20)
Overskrift Varchar (50)
Innhold Text
x
Enkel attributt forklaring:
x
Innhold: Gir en liten innføring i det emne (overskrift) du har søkt hjelp.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 18
2.1.1 Normalisering av databasen
En viktig teknikk som bygger på logikken i en relasjonsdatabase er normalisering. Dette er
en prosess som avslører skjulte avhengigheter i datamodellen. Dette kan være en nyttig
metode for å analysere datamodellen selv om den ikke skal implementeres i en
relasjonsdatabase.
Begrepet normalisering ble introdusert av E.F. Codd i forbindelse med hans
relasjonsdatamodell. I en normalisert modell er de egenskaper som er gruppert sammen i et
objekt eller en relasjon "funksjonelt avhengig" av identifikasjonen. Begrepet funksjonell
avhengighet kan brukes for å beskrive forhold mellom dataattributter (termer) i
alminnelighet, men i forbindelse med normalisering av objekter og relasjoner er det særlig
funksjonell avhengighet mellom egenskapsdelen og identifikasjonsdelen som er
interessant.
Definisjon: En egenskap er funksjonell avhengig av identifikasjonsdelen hvis den på et
tidspunkt kan ha en, og bare en, verdi assosiert med verdien på identifikasjonsdelen. Vi har
her nøyd oss med å gå gjennom første, andre og tredje normalform (NB: Det finnes flere)
1. Normalform (1NF)
x
En relasjon er i første normalform når den inneholder kun atomiske (udelelige)
verdier
x
Eksempel:
Kunde
Kundenr Fornavn Etternavn Adresse
Kunde
Kundenr Fornavn Etternavn Gateadresse Postnr. Poststed
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 19
2. Normalform (2NF)
x
Må være i 1NF
x
Deler av ID skal ikke kunne være determinantfelt for andre felt,
dvs deler av ID skal ikke entydig kunne bestemme
verdier i et annet felt
x
Eksempel:
Kunde
Kundenr Fornavn Etternavn Gateadresse Postnr. Poststed OrdreNrOrdreDato
123 Anne Olsen Veien 2 5000 Bergen 1000 10.12.01
198 Petter Persen Svingen 3 5020 Bergen 1001 10.12.01
158 Ola Normann Kaien 4 5016 Bergen 1002 03.01.02
202 Kari Trestakk Stallen 5 5184 Olsvik 1003 02.02.02
3. Normalform (3NF)
x
Må være i 2NF
x
Det må ikke eksistere noen funksjonelle
avhengigheter mellom egenskapsfeltene
(felter utenom ID-feltene)
x
Eksempel:
Kunde
Kundenr Fornavn Etternavn Gateadresse Postnr. Poststed
123 Anne Olsen Veien 2 5000 Bergen
198 Petter Persen Svingen 3 5020 Bergen
158 Ola Normann Kaien 4 5016 Bergen
202 Kari Trestakk Stallen 5 5184 Olsvik
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 20
Kunde
Kundenr Fornavn Etternavn Gateadresse
Postnr
I systemets database oppfyller alle tabellene 2. normalform, bare tabellene Meny og
Menygrupper oppnår 3 NF. Her må hver rett ligge under en Menygruppe, mens hver
menygruppe kan ha 0 eller flere retter under seg.
Ill:
Meny
ID
Gruppe
M enyelem ent
Kom mentar
Pris_1
Pris_2
Num mer
(f rom DB m eny )
Menygrupper
ID
Gruppe
Komm entar
Num mer
(f rom DB m eny grupper)
1
0..*0..* 1
Figur 9 Tabeller på 3NF
Postnr Poststed
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 21
2.1.1 Oversikt over database tabeller
Dette er slik databasen i det ferdige systemet vil se ut:
Users
ID
Fornavn
Etternavn
Brukernavn
Passord
Administratorrettigheter
Stilling
E-post
Beskrivelse
Bilde
(from DB users(ansatt))
Arrangement
ID
PS
Dato
Ekstradato
Klokkeslett
Overskrift
Hvem
Beskrivelse
Pris_1
Pris_2
Url_1
Url_2
Bilde
Innlagt_av
Opprettet
(f rom DB arrangement)
Artikkel
ID
Overskrift
Ingress
Innhold
Bilde_1
Bilde_2
Bilde_3
Bilde_4
Innlagt_av
Redigert_av
Opprettet
Redigert
(f rom DB artikkel)
Nyhet
ID
Overskrift
Innhold
Bilde
Intern_url
Innlagt_av
Redigert_av
Opprettet
Redigert
(f rom DB ny het)
Gjestebok
ID
Navn
Sted
E-post
Url
Hilsen
Dato
(f rom DB gjestebok)
Hjelp
ID
Overskrift
Innhold
(f rom DB hjelp)
Meny
ID
Gruppe
Menyelement
Kom mentar
Pris_1
Pris_2
Num mer
(f rom DB meny )
Menygrupper
ID
Gruppe
Komm entar
Numm er
(f rom DB meny grupper)
1
0..*0..* 1
Figur 10 Oversikt over tabeller i databasen
I tillegg til disse tabellene et det tatt med en tabell for navigasjonsmenyen på siden.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 22
2.2 Webside/portal designklasser
Da vi har valgt å ikke implementere IP-sonen er det ikke nødvendig å implementere web-
portalen heller. Da web-portalen er ment å være nesten helt lik websiden har vi valgt å slå
sammen disse delene i design.
Denne delen tar for seg følgende:
x
Diagram: sporing til analysen.
x
Diagram: klasser (for denne funksjonen).
x
Forklaring til klassediagram.
x
Sekvensdiagram
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 23
2.2.1 Designklasser Oppdatere System
Designklasse 1: Oppdatere Systemet
x
Sporing tilbake til analysen.
Oppdatere system et - analyse
(f rom Oppdatere sy stemet)
Oppdatere system et - design
<<realize>>
Figur 11: Sporing Designklasse 1: Oppdatere Systemet
x
Klasser:
hjelp_id.inc
PicPop('hjelp/hjelp.php?page = $page')
Header.inc
validate.inc
Connect.inc
Main.inc
require("../inc/header.inc")
Users
ID
Fornavn
Etternavn
Brukernavn
Passord
Adm inistratorrettigheter
Stilling
E-post
Beskrivelse
Bilde
(from DB users(ansatt))
login.inc
Ansatt
(f rom Actors)
Adm inistrator
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
Figur 12: Klassediagram Designklasse 1: Oppdatere Systemet
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 24
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc” er
selve grensesnittet mot brukeren. ”Hjelp_id.inc” sørger for at vi når vi trykker
på hjelp får opp hjelp for den siden vi står på.
x
Klassen ”login.inc” med kobling til databasen ”Users” sørger for autentisering
av de ansatte/administrator.
x
Klassen ”Connect.inc” sørger for at grensesnittet kan koble opp mot
databasene som inneholder all informasjon på siden.
x
Sekvensdiagram
: Administrator
: Oppdater UI
: Passord
håndterer
: Passord
: Nettside/portal
håndterer
: Oppdater
hjem m eside/portal
Logg inn
Send passord
Hent
Oppdater nettside
Send oppdatering
Oppdater
Figur 13: Sekvensdiagram Designklasse 1: Oppdatere Systemet
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 25
Designklasse 2: Legg inn ny ansatt
x
Sporing tilbake til analysen.
Legg inn ny ansatt - analyse
(f rom Ansatt)
Legg inn ny ansatt - design
<<realize>>
Figur 14: Sporing Designklasse 2: Legg inn ny ansatt
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Users
ID
Fornavn
Etternavn
Brukernavn
Passord
Adm inistratorrettigheter
Stilling
E-post
Beskrivelse
Bilde
(from DB users(ansatt))
Legg inn ansatt
INSERT INTO users()
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 15: Klassediagram Designklasse 2: Legg inn ny ansatt
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 26
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Legg inn ansatt” inneholder en INSERT INTO setning som sørger for
at vi får lagt til nye ansatte i databasen ”Users”.
x
Sekvensdiagram
: Oppdater UI
: Opprett ansatt
: Ansatt
: Administrator
Velg opprett ny ansatt
Fyll inn info om kunde
Opprett ny
Oppdater
Figur 16: Sekvensdiagram Designklasse 2: Legg inn ny ansatt
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 27
Designklasse 3: Rediger ansatt
x
Sporing tilbake til analysen.
Rediger ansatt - analyse
(f rom Ansatt)
Rediger ansatt - design
<<realize>>
Figur 17: Sporing Designklasse 3: Rediger ansatt
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Users
ID
Fornavn
Etternavn
Brukernavn
Passord
Adm inistratorrettigheter
Stilling
E-post
Beskrivelse
Bilde
(from DB users(ansatt))
Rediger ansatt
UPDATE users()
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 18: Klassediagram Designklasse 3: Rediger ansatt
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 28
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen Rediger ansatt inneholder en UPDATE funksjon som sørger for at vi
får endret info om ansatte/administratorer i databasen ”Users”.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 29
x
Sekvensdiagram
: Oppdater UI
: Rediger ansatt
: Ansatt
: Adm inistrator
Velg rediger ansatt
Hent ansatte
Hent
Vis
Hvilken ansatt
Hent aktuell ansatt
Hent
Vis
Nye data
Rediger
Oppdater
Figur 19: Sekvensdiagram Designklasse 3: Rediger ansatt
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 30
Designklasse 4: Slett ansatt
x
Sporing tilbake til analysen.
Slett ansatt - analyse
(f rom Ansatt)
Slett ansatt - design
<<realize>>
Figur 20: Sporing Designklasse 4: Slett ansatt
x
Klasser:
Users
ID
Fornavn
Etternavn
Brukernavn
Passord
Adm inistratorrettigheter
Stilling
E-post
Beskrivelse
Bilde
(from DB users(ansatt))
Slett ansatt
DELET E FROM users()
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 21: Klassediagram Designklasse 4: Slett ansatt
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 31
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Slett ansatt” inneholder en DELETE FROM funksjon som sørger for
at vi får slettet ansatte/administratorer fra databasen ”Users”.
x
Sekvensdiagram
: Slett ansatt
: Oppdater UI
: Administrator
: Ansatt
Velg slett ansatt
Hent ansatte
Hent
Vis ansatte
Hvilken ansatt
Slett
Oppdater
Figur 22: Sekvensdiagram Designklasse 4: Slett ansatt
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 32
Designklasse 5: Legg inn nytt arrangement
x
Sporing tilbake til analysen.
Legg inn nytt arrangem ent - analyse
(f rom Arrangement)
Legg inn nytt arrangem ent - design
<<realize>>
Figur 23: Sporing Designklasse 5: Legg inn nytt arrangement
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Arrangement
ID
PS
Dato
Ekstradato
Klokkeslett
Overskrift
Hvem
Beskrivelse
Pris_1
Pris_2
Url_1
Url_2
Bilde
Innlagt_av
Opprettet
(f rom DB arrangement)
Legg inn nytt arrangement
INSERT INTO hva_skjer()
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 24: Klassediagram Designklasse 5: Legg inn nytt arrangement
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 33
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Legg inn nytt arrangement” inneholder en INSERT INTO funksjon
som sørger for at vi får lagt til nye arrangementer i databasen ”Arrangement”.
x
Sekvensdiagram
: Legg inn nytt
arrangement
: Arrangem enter
: Oppdater UI
: Ansatt
Velg Legg inn nytt arrangem ent
Fyll inn data om arrangem entet
Opprett nytt
Oppdater
Figur 25: Sekvensdiagram Designklasse 5: Legg inn nytt arrangement
Ansatt kan også være administrator.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 34
Designklasse 6: Rediger arrangement
x
Sporing tilbake til analysen.
Slett arrangem ent - analyse
(f rom Arrangement)
Slett arrangement - design
<<realize>>
Figur 26: Sporing Designklasse 6: Rediger arrangement
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Arrangement
ID
PS
Dato
Ekstradato
Klokkeslett
Overskrift
Hvem
Beskrivelse
Pris_1
Pris_2
Url_1
Url_2
Bilde
Innlagt_av
Opprettet
(f rom DB arrangement)
Rediger arrangement
UPDAT E hva_skjer()
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
(f rom Oppdatere sy stemet)
Administrator
(f rom Actors)
Figur 27: Klassediagram Designklasse 6: Rediger arrangement
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 35
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på
nytt her.
x
Klassen ”Rediger arrangement” inneholder en UPDATE funksjon som
sørger for at vi får endret oppføringer i databasen ”Arrangement”.
x
Sekvensdiagram
: Oppdater UI
: Redigere
arrangem ent
: Arrangem enter
: Ansatt
Velg rediger Arrangem ent
Hent arrangem enter
Hent
Vis
Hvilket arrangem ent
Hent aktuell ansatt
Hent
Vis
Nye data
Rediger
Oppdater
Figur 28: Sekvensdiagram Designklasse 6: Rediger arrangement
Ansatt kan også være administrator.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 36
Designklasse 7: Slett arrangement
x
Sporing tilbake til analysen.
Slett arrangem ent - analyse
(f rom Arrangement)
Slett arrangement - design
<<realize>>
Figur 29: Sporing Designklasse 7: Slett arrangement
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Slett arrangement
DELET E FROM hva_skjer()
Arrangement
ID
PS
Dato
Ekstradato
Klokkeslett
Overskrift
Hvem
Beskrivelse
Pris_1
Pris_2
Url_1
Url_2
Bilde
Innlagt_av
Opprettet
(f rom DB arrangement)
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/main.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 30: Klassediagram Designklasse 7: Slett arrangement
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 37
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Slett arrangement” inneholder en DELETE FROM funksjon som
sørger for at vi får slettet arrangementer fra databasen ”Arrangement”.
x
Sekvensdiagram
: Slett
arrnagement
: Arrangem enter
: Oppdater UI
: Administrator
Velg slett arrangem ent
Hent arrangem enter
Hent
Vis arrangem enter
Hvilket arr
Slett
Oppdater
Figur 31: Sekvensdiagram Designklasse 7: Slett arrangement
Administrator kan også være Ansatt
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 38
Designklasse 8: Legg inn artikkel
x
Sporing tilbake til analysen.
Legg inn artikkel - analyse
(f rom Artikkel)
Legg inn artikkel - design
<<realize>>
Figur 32: Sporing Designklasse 8: Legg inn artikkel
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Artikkel
ID
Overskrift
Ingress
Innhold
Bilde_1
Bilde_2
Bilde_3
Bilde_4
Innlagt_av
Redigert_av
Opprettet
Redigert
(f rom DB artikkel)
Header.inc
(f rom Oppdatere sy stemet)
Legg inn artikkel
INSERT INT O artikkel()
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/main.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 33: Klassediagram Designklasse 8: Legg inn artikkel
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 39
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Legg inn artikkel” inneholder en INSERT INTO funksjon som sørger
for at vi får lagt til nye artikler i databasen ”Artikkel”.
x
Sekvensdiagram
: Legg inn
artikkel
: Artikkel
: Oppdater UI
: Ansatt
Velg Legg inn artikkel
Fyll inn data
Opprett ny
Oppdater
Figur 34: Sekvensdiagram Designklasse 8: Legg inn artikkel
Ansatt kan også være administrator.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 40
Designklasse 9: Rediger artikkel
x
Sporing tilbake til analysen.
Rediger artikkel - analyse
(f rom Artikkel)
Rediger artikkel - design
<<realize>>
Figur 35: Sporing Designklasse 9: Rediger artikkel
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Artikkel
ID
Overskrift
Ingress
Innhold
Bilde_1
Bilde_2
Bilde_3
Bilde_4
Innlagt_av
Redigert_av
Opprettet
Redigert
(f rom DB artikkel)
Rediger artikkel
UPDATE artikkel()
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 36: Klassediagram Designklasse 9: Rediger artikkel
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 41
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Rediger artikkel” inneholder en UPDATE funksjon som sørger for at
vi får endret oppføringer i databasen ”Artikkel”.
x
Sekvensdiagram
: Rediger
artikkel
: Artikkel
: Oppdater UI
: Adm inistrator
Velg rediger atikkel
Hent artikkel
Hent
Vis
Hvilken artikkel
Hent aktuell artikkel
Hent
Vis
Nye data
Rediger
Oppdater
Figur 37: Sekvensdiagram Designklasse 9: Rediger artikkel
Administrator kan også være Ansatt
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 42
Designklasse 10: Slett artikkel
x
Sporing tilbake til analysen.
Slette artikkel - analyse
(f rom Artikkel)
Slett artikkel - design
<<realize>>
Figur 38: Sporing Designklasse 10: Slett artikkel
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require()
(f rom Oppdatere sy stemet)
Artikkel
ID
Overskrift
Ingress
Innhold
Bilde_1
Bilde_2
Bilde_3
Bilde_4
Innlagt_av
Redigert_av
Opprettet
Redigert
(f rom DB artikkel)
Slett artikkel
DELET E FROM artikkel()
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/main.inc")
(f rom Oppdatere sy stemet)
Administrator
(f rom Actors)
Figur 39: Klassediagram Designklasse 10: Slett artikkel
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 43
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Slett artikkel” inneholder en DELETE FROM funksjon som sørger
for at vi får slettet en artikkel fra databasen ”Artikkel”.
x
Sekvensdiagram
: Adm inistrator
: Oppdater UI
: Slett artikkel
: Artikkel
Velg slett artikkel
Hent artikler
Hent
Vis artikler
Hviken artikkel
Slett
Oppdater
Figur 40: Sekvensdiagram Designklasse 10: Slett artikkel
Administrator kan også være Ansatt
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 44
Designklasse 11: Legg inn nyhet
x
Sporing tilbake til analysen.
Legg inn nyhet - analyse
(f rom Ny het)
Legg inn nyhet - design
<<realize>>
Figur 41: Sporing Designklasse 11: Legg inn nyhet
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require()
(f rom Oppdatere sy stemet)
Nyhet
ID
Overskrift
Innhold
Bilde
Intern_url
Innlagt_av
Redigert_av
Opprettet
Redigert
(f rom DB ny het)
Legg inn nyhet
INSERT INTO nyhete()
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
(f rom Oppdatere sy stemet)
Administrator
(f rom Actors)
Figur 42: Klassediagram Designklasse 11: Legg inn nyhet
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 45
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Legg inn nyhet” inneholder en INSERT INTO funksjon som sørger
for at vi får lagt til nyheter i databasen ”Nyhet”.
x
Sekvensdiagram
: Legg inn nyhet
: Nyhet
: Oppdater UI
: Ansatt
Velg Legg inn nyhet
Fyll inn nyheten
Opprett ny
Oppdater
Figur 43: Sekvensdiagram Designklasse 11: Legg inn nyhet
Ansatt kan også være Administrator
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 46
Designklasse 12: Rediger nyhet
x
Sporing tilbake til analysen.
Rediger nyhet - analyse
(f rom Ny het)
Rediger nyhet - design
<<realize>>
Figur 44: Sporing Designklasse 12: Rediger nyhet
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Nyhet
ID
Overskrift
Innhold
Bilde
Intern_url
Innlagt_av
Redigert_av
Opprettet
Redigert
(f rom DB ny het)
Rediger nyhet
UPDATE nyhet()
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/main.inc")
(f rom Oppdatere sy stemet)
Administrator
(f rom Actors)
Figur 45: Klassediagram Designklasse 12: Rediger nyhet
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 47
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Rediger nyhet” inneholder en UPDATE funksjon som sørger for at vi
får endret oppføringer i databasen ”Nyhet”.
x
Sekvensdiagram
: Redigere
nyhet
: Nyhet
: Oppdater UI
: Ansatt
Velg rediger nyhet
Hent nyheter
Hent
Vis
Hviken nyhet
Hent aktuell nyhet
Hent
Vis
Nye data
Rediger
Oppdater
Figur 46: Sekvensdiagram Designklasse 12: Rediger nyhet
Ansatt kan også være Administrator
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 48
Designklasse 13: Slett nyhet
x
Sporing tilbake til analysen.
Slett nyhet - analyse
(f rom Ny het)
Slett nyhet - design
<<realize>>
Figur 47: Sporing Designklasse 13: Slett nyhet
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Nyhet
ID
Overskrift
Innhold
Bilde
Intern_url
Innlagt_av
Redigert_av
Opprettet
Redigert
(f rom DB ny het)
Slett nyhet
DELET E FROM nyhet()
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/main.inc")
(f rom Oppdatere sy stemet)
Administrator
(f rom Actors)
Figur 48: Klassediagram Designklasse 13: Slett nyhet
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 49
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Slett nyhet” inneholder en DELETE FROM funksjon som sørger for
at vi får slettet en nyhet fra databasen ”Nyhet”.
x
Sekvensdiagram
: Ansatt
: Oppdater UI
: Slett nyhet
: Nyhet
Velg slett nyhet
Hent nyheter
Hent
Vis nyheter
Hvilken nyhet
Slett
Oppdater
Figur 49: Sekvensdiagram Designklasse 13: Slett nyhet
Ansatt kan også være Administrator
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 50
Designklasse 14: Legg inn menyelement
x
Sporing tilbake til analysen.
Legg inn menyelement - analyse
(f rom Meny )
Legg inn m enyelem ent - design
<<realize>>
Figur 50: Sporing Designklasse 14: Legg inn menyelement
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Meny
ID
Gruppe
M enyelem ent
Komm entar
Pris_1
Pris_2
Numm er
(f rom DB meny )
Legg inn menyelement
INSERT INTO meny()
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 51: Klassediagram Designklasse 14: Legg inn menyelement
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 51
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Legg inn menyelement” inneholder en INSERT INTO funksjon som
sørger for at vi får lagt til menyelementer i databasen ”Meny”.
x
Sekvensdiagram
: Ansatt
: Oppdater UI
: Legg til
menyelement
: Meny
Velg legg inn m enyelem ent
Skriv inn retten
Opprett ny
Oppdater
Figur 52: Sekvensdiagram Designklasse 14: Legg inn menyelement
Ansatt kan også være Administrator
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 52
Designklasse 15: Rediger meny
x
Sporing tilbake til analysen.
Rediger m eny - analyse
(f rom Meny )
Rediger m eny - design
<<realize>>
Figur 53: Sporing Designklasse 15: Rediger meny
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Meny
ID
Gruppe
Menyelem ent
Kom m entar
Pris_1
Pris_2
Num m er
(f rom DB meny )
Header.inc
(f rom Oppdatere sy stemet)
Rediger meny
UPDATE m eny()
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/main.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 54: Klassediagram Designklasse 15: Rediger meny
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 53
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Rediger meny” inneholder en UPDATE funksjon som sørger for at vi
får endret oppføringer i databasen ”Meny”.
x
Sekvensdiagram
: Rediger meny
: Meny
: Adm UI
: Ansatt
Velg rediger meny
Hent meny
Hent
Vis
Hvilken rett
Hent aktuell rett
Hent
Vis
Nye data
Rediger
Oppdater
Figur 55: Sekvensdiagram Designklasse 15: Rediger meny
Ansatt kan også være Administrator
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 54
Designklasse 16: Slett menyelement
x
Sporing tilbake til analysen.
Slett m enyelem ent - analyse
(f rom Meny )
Slett m enyelement - design
<<realize>>
Figur 56: Sporing Designklasse 16: Slett menyelement
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Meny
ID
Gruppe
M enyelement
Komm entar
Pris_1
Pris_2
Numm er
(f rom DB meny )
Slett m enyelem ent
DELET E FROM meny()
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/main.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 57: Klassediagram Designklasse 16: Slett menyelement
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 55
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Slett menyelement” inneholder en DELETE FROM funksjon som
sørger for at vi får slettet et menyelement fra databasen ”Meny”.
x
Sekvensdiagram
: Slett
menyelem ent
: Meny
: Oppdater UI
: Ansatt
Velg slett menyelem ent
Hent meny
Hent
Vis meny
Hvilket elem ent
Slett
Oppdater
Figur 58: sekvensdiagram Designklasse 16: Slett menyelement
Ansatt kan også være Administrator
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 56
Designklasse 17: Endre brukernavn/passord
x
Sporing tilbake til analysen.
Endre brukernavn/passord - analyse
(f rom Endre brukernav n/passord)
Endre brukernavn/passord - design
<<realize>>
Figur 59: Sporing Designklasse 17: Endre brukernavn/passord
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Users
ID
Fornavn
Etternavn
Brukernavn
Passord
Adm inistratorrettigheter
Stilling
E-post
Beskrivelse
Bilde
(from DB users(ansatt))
Endre brukernavn/passord
UPDATE users()
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
(f rom Oppdatere sy stemet)
Ansatt
(f rom Actors)
Figur 60: Klassediagram Designklasse 17: Endre brukernavn/passord
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 57
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Endre brukernavn/passord” inneholder en UPDATE funksjon som
sørger for at vi får endret brukernavn og passord, disse oppdaterer databasen
”Users”.
x
Sekvensdiagram
: Oppdater UI
: Endre
brukernavn/passord
: Ansatt
: Ansatt
Velg endre brukernavn/passord
T ast inn nytt brukernavn/passord
Tast inn gamm elt passord
Sjekk gam m elt passord
Legg inn data
Oppdater
Figur 61: Sekvensdiagram Designklasse 17: Endre brukernavn/passord
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 58
Designklasse 18: Legg inn bilde
x
Sporing tilbake til analysen.
Legg inn bilde - design
Legg inn bilde - analyse
(f rom Bilder)
<<realize>>
Figur 62: Sporing Designklasse 18: Legg inn bilde
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
(f rom Oppdatere sy stemet)
Administrator
(f rom Actors)
Header.inc
(f rom Oppdatere sy stemet)
Lokal PC
Legg inn bilde
HT T P_POST _FILES()
serveren: www.en-kopp.no
Figur 63: Klassediagram Designklasse 18: Legg inn bilde
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 59
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Legg inn bilde” inneholder en HTTP_POST_FILES()-funsksjon som
sørger for at vi kan laste opp filer til serveren.
x
Sekvensdiagram
: Legg inn bilde
Web-server
: Oppdater UI
: Adm inistrator
: Lokal PC
Velg legg inn bilde
Åpne browser
Hent fil oversikt
Vis filer og katalogstruktur
Velg fil
Hent fil
Hent
Last opp fil
Figur 64: Sekvensdiagram Designklasse 18: Legg inn bilde
Administrator kan også være Ansatt
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 60
Designklasse 19: Slett bilde
x
Sporing tilbake til analysen.
Slett bilde - design
Slett bilde - analyse
(f rom Bilder)
<<realize>>
Figur 65: Sporing Designklasse 19: Slett bilde
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/m ain.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Slett bilde
unlink($dir."/".$fil)
Header.inc
(f rom Oppdatere sy stemet)
serveren: www.en-kopp.no
Figur 66: Klassediagram Designklasse 19: Slett bilde
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 61
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Slett bilde” inneholder en unlink()-funsksjon som sørger for at vi kan
slette filer fra serveren.
x
Sekvensdiagram
: Ansatt
: Oppdater UI
: Slett bilde
: Web-server
Velg slett bilde
Hvilket bilde
Velg bilde
Sjekk om bildet er i bruk
Oppdater
Bildet er slettet/er i bruk og kan ikke slettes
Figur 67: Sekvensdiagram Designklasse 19: Slett bilde
Ansatt kan også være Administrator
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 62
Designklasse 20: Slett fra gjestebok
x
Sporing tilbake til analysen.
Slett fra gjestebok - analyse
(f rom Gjestebok)
Slett fra gjestebok - design
<<realize>>
Figur 68: Sporing Designklasse 20: Slett fra gjestebok
x
Klasser:
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Header.inc
(f rom Oppdatere sy stemet)
Gjestebok
ID
Navn
Sted
E-post
Url
Hilsen
Dato
(f rom DB gjestebok)
Slett fra gjestebok
DELET E FROM gjestebok()
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/main.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 69: Klassediagram Designklasse 20: Slett fra gjestebok
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 63
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Slett fra gjestebok” inneholder en UPDATE funksjon som sørger for
at vi får slettet en gjestebok-oppføring fra databasen ”Gjestebok”.
x
Sekvensdiagram
: Adm inistrator
: Oppdater UI
: Slett fra
gjestebok
: Gjestebok
Velg slett fra gjestebok
Hent oppføringer
Hent
Vis gjestebok
Hvilken hilsning
Slett
Oppdater
Figur 70: Sekvensdiagram Designklasse 20: Slett fra gjestebok
Administrator kan også være ansatt
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 64
Designklasse 21: Hjelp
x
Sporing tilbake til analysen.
Hjelp - analyse
(from Hjelp)
Hjelp - design
<<realize>>
Figur 71: Sporing Designklasse 21: Hjelp
x
Klasser:
Header.inc
(f rom Oppdatere sy stemet)
Main.inc
require("../inc/header.inc")
(f rom Oppdatere sy stemet)
hjelp_id.inc
PicPop()
(f rom Oppdatere sy stemet)
Hjelp
ID
Overskrift
Innhold
(f rom DB hjelp)
Hjelp.php
SELECT * FROM hjelp()
Ansatt
(f rom Actors)
adm_Index.php
require("inc/header.inc")
require("inc/hjelp_id.inc")
require("inc/main.inc")
(f rom Oppdatere sy stemet)
Adm inistrator
(f rom Actors)
Figur 72: Klassediagram Designklasse 21: Hjelp
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”adm_index.php”, ”main.inc”, ”header.inc”, og ”hjelp_id.inc”
kjenner vi igjen fra ”Oppdatere Systemet”, og blir derfor ikke forklart på nytt
her.
x
Klassen ”Hjelp.php” inneholder en Select * from()-funksjon som sørger for at
vi får hentet ut hjelp fra databasen ”Hjelp”.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 65
x
Sekvensdiagram
: Søk i hjelp
: Hjelp
: Oppdater UI
: Ansatt
Velg "hjelp"
request hjelp
Hent
Vis
Hvilken operasjon?
request tem a
Hent
Vis tema
Figur 73: Sekvensdiagram Designklasse 21: Hjelp
Ansatt kan også være Administrator
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 66
2.2.2 Designklasser vise Web-side/portal
Designklasse 22: Lese informasjon nettside
x
Sporing tilbake til analysen.
Lese inform asjon nettside - ansalyse
(f rom Lese inf ormasjon nettside)
Lese Inform asjon nettside - design
<<realize>>
Figur 74: Sporing Designklasse 22: Lese informasjon nettside
x
Klasser:
Header_img.inc
background-im age:url()
Foother.inc
background-im age:url()
Main.inc
background-image:url(grafikk/m ain.gif)
<ifram e()
Nyhet
ID
Overskrift
Innhold
Bilde
Intern_url
Innlagt_av
Redigert_av
Opprettet
Redigert
(f rom DB ny het)
Nyheter.inc
SELECT * FROM nyheter()
Ansatt
(f rom Actors)
Administrator
(f rom Actors)
Index.php
require("inc/header_im g.inc")
require("inc/m ain.inc")
require("inc/foother.inc")
Figur 75: Klassediagram Designklasse 22: Lese informasjon nettside
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 67
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”index.php”, ”main.inc”, ”header_img.inc”, og ”foother.inc” er selve
grensesnittet mot brukeren.
x
Klassen ”Nyheter.inc” inneholder en Select * from()-funksjon som sørger for
at vi får hentet ut nyheter fra databasen ”Nyhet”.
x
Sekvensdiagram
: Bruker
:
Internett-browser
:
Nettsidehåndterer
: Web-server
Be om nettside
Request nettside
Hent
Vis nettside
Figur 76: Sekvensdiagram Designklasse 22: Lese informasjon nettside
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 68
Designklasse 23: Kontakte en-kopp fra nettside
x
Sporing tilbake til analysen.
Kontakte En kopp - analyse
(f rom Kontakte en-kopp f ra nettside)
Kontakte en-kopp - design
<<realize>>
Figur 77: Sporing Designklasse 23: Kontakte en-kopp fra nettside
x
Klasser:
Header_img.inc
background-im age:url()
(f rom Lese inf ormasjon nettside)
Foother.inc
background-im age:url()
(f rom Lese inf ormasjon nettside)
Kontakt.inc
X-M ailer: PHP/" . phpversion()
Main.inc
background-image:url()
<ifram e()
(f rom Lese inf ormasjon nettside)
Bruker
(f rom Actors)
Index.php
require("inc/header_img.inc")
require("inc/m ain.inc")
require("inc/foother.inc")
(f rom Lese inf ormasjon nettside)
Figur 78: Klassediagram Designklasse 23: Kontakte en-kopp fra nettside
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 69
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”index.php”, ”main.inc”, ”header_img.inc”, og ”foother.inc” kjenner
vi igjen fra ”Lese informasjon nettside”, og blir derfor ikke forklart på nytt her.
x
Klassen ”Kontakt.inc” inneholder X-mailer-funksjon som sørger for at
Informasjonen i kontaktskjemaet blir sendt på mail til post@en-kopp.no
x
Sekvensdiagram
: Kunde
:
Internett-browser
: Mail håndterer
: Mail
Gå til: kontakte en-kopp
Hent "kontakt-Skjema"
Vis kontakt skjema
Skriv inn m elding
Send kontakt skjema
Send m ail
Mail sendt/ikke sendt
Figur 79: Sekvensdiagram Designklasse 23: Kontakte en-kopp fra nettside
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 70
Designklasse 24: Skriv i gjestebok
x
Sporing tilbake til analysen.
Skriv i gjestebok - analyse
(f rom Gjestebok)
Skriv i gjestebok - design
<<realize>>
Figur 80: Sporing Designklasse 24: Skriv i gjestebok
x
Klasser:
Header_img.inc
background-image:url()
(f rom Lese inf ormasjon nettside)
Foother.inc
background-image:url()
(f rom Lese inf ormasjon nettside)
Main.inc
background-image:url()
<iframe()
(f rom Lese inf ormasjon nettside)
Gjestebok
ID
Navn
Sted
E-post
Url
Hilsen
Dato
(f rom DB gjestebok)
Skriv_gjestebok.inc
INSERT INTO gjestebok()
Index.php
require("inc/header_img.inc")
require("inc/main.inc")
require("inc/foother.inc")
(f rom Lese inf ormasjon nettside)
Bruker
(f rom Actors)
Figur 81: Klassediagram Designklasse 24: Skriv i gjestebok
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 71
x
Forklaring til klassediagram:
Dette klassediagrammet består av følgende klasser:
x
Klassene; ”index.php”, ”main.inc”, ”header_img.inc”, og ”foother.inc” kjenner
vi igjen fra ”Lese informasjon nettside”, og blir derfor ikke forklart på nytt her.
x
Klassen ”Skriv_gjestebok.inc” inneholder INSERT INTO-funksjon som sørger
for at brukere får lagt inn hilsninger i databasen ”Gjestebok”.
x
Sekvensdiagram
: Gjestebok
: Legg i
gjestebok
:
Internett-browser
: (Bruker)
Gå til: Skriv i gjestebok
Hent "gjestebok-skjem a"
Vis gjestebok-skjema
Skriv inn hilsning
Legg inn hilsning
Oppdater gjestebok
Hilsning lagt inn/ikke lagt inn
Figur 82: Sekvensdiagram Designklasse 24: Skriv i gjestebok
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 72
2.3 Utrullingsdiagram
Utrullingsdiagram er brukt for å vise fysisk design av systemet, og viser hvilke noder
systemet inneholder.
Hoveddelen er selve web serveren, det er her siden ligger lagret.
web server
ISP
Brukers klient
Ansatt/administrators
klient
TCP/IP
TCP/IP
TCP/IP
Figur 83 Utrullingsdiagram
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 73
3 IP-sone
Som vi nevnte i kravspesifikasjonen hadde vi flere alternativer til hvordan vi skulle løse
problemet med betaling og autentisering ved oppkobling til IP-sonen. Disse løsningene var
som følger:
Back to top
1 Nullalternativet
Nullalternativet medfører at vi velger å ikke gjennomføre prosjektet, og at systemet med
tilgang til IP-sonen fortsetter slik det er i dag. Dette alternativet ser vi bort fra da
oppdragsgiver selv ønsker et nytt system, og at vår prosjektgruppe har et ønske om å
gjennomføre prosjektet.
Back to top
2 Innkjøp av hyllevare
En Kopp kjøper en løsning fra etablerte it selskaper som driver med web løsninger, for
eksempel: iTet og Catch Communications. Men det finnes også flere som jobber mye og
godt med forskjellige løsninger på dette problemet for tiden, og det er ikke utenkelig at
utviklingen går så fort at det ville være mer hensiktsmessig å kjøpe dette inn fra ekstern
leverandør.
Fordelen med å benytte seg av hyllevare er at man sikrer et bedre og enklere vedlikehold
av systemene etter at vi har avsluttet prosjektet.
Back to top
3 Løsning utviklet av vår prosjektgruppe
En Kopp har allerede en IP-sone som er operativ på kafeen, vårt arbeid rundt dette vil
innebære problematikken rundt innlogging og registrering av brukere.
Vi har forutsatt at kunde har to muligheter for valg av tid: en halv time eller en times
tilgang der hvor annet ikke er nevnt. Det kunden trenger for å kunne benytte IP-sonen slik
vi skal utvikle den er et passord. Dette gjelder uansett om kunde vil benytte egen bærbar pc
eller den stasjonære som er plassert i lokalet.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 74
3.1 Valgt løsning:
Som det ble nevnt i innledningen til design har vi valgt å anbefale oppdragsgiver å gå til
innkjøp av hyllevare, dette fordi det vil være det billigste og enkleste for oppdragsgiveren
over tid. Begrunnelsen for dette er at vi gjennom besøk og samtaler med oppdragsgiver har
registrert de ansattes manglende databakgrunn og det ville blitt vanskelig for dem å
administrere et slikt system. Det er også klart at vårt system neppe ville blitt et fullgodt
system sammenliknet med hva man får kjøpt fra profesjonelle tilbydere.
I dag er det mulig å kjøpe ferdige systemer fra en ekstern leverandør som tar seg av all
form for administrasjon av systemet, dette innebærer at oppdragsgiver ikke trenger å
investere i nytt og kostbart datautstyr for å få til en enklere og sikrere løsning enn den som
eksisterer i dag.
Vi har vært i kontakt med følgende tilbydere av IP-sone løsninger:
x
NetPower:
I forstudierapporten var vi innom firmaet NetPower som tilbyr
disse former for tjenester, da forstudiet ble gjennomført hadde ikke disse en
kommersialisert tjeneste oppe å gå, bare noen pilotprosjekter som
hovedsaklig var lokalisert i Stavanger og Oslo. Etter hvert har disse
kommet med en kommersialisert tjeneste, dette skjedde 1.april d.å. Siden
den gang har vi vært i jevnlig kontakt med dem, og det viser seg at de kan
levere en fullgod løsning til vårt formål, de har serverparkene sine plassert i
Stavanger og Oslo, og alt styres derfra. NetPower er kommet godt i gang
med såkalte roaming-avtaler, og i den forbindelse er det nå blitt mulig å
koble seg til IP-sonen på Oslo Lufthavn Gardermoen med et abonnement
fra NetPower.
x
Catch Communications:
Catch står for drift og leveranse av linje til
oppdragsgiver fra før av. IP-sonen på En Kopp har lenge vært Catchs
pilotprosjekt når det gjelder IP-soner. I desember 2002 ansatte de en egen
IP-sone ansvarlig, og har per dags dato en fungerende løsning på Skagen
Hotell i Bodø i tillegg til pilotprosjektet på En Kopp. De jobber nå med å få
i stand avtaler med flere kafeer og hoteller på landsbasis. Til sammen
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 75
utgjør dette rundt 15-20 IP-soner i første omgang. Også disse baserer sitt
system på en sentral serverlokalisering. Når det gjelder alternative
betalingsløsninger har disse nå kun en enkel form (lapp med passord), men
det jobbes med å implementere andre og bedre løsninger som f.eks.:
kredittkort og per sms.
x
Telenor Mobil:
Da Telenor Mobil tar all fortjeneste selv har vi valgt å ikke
ha noe videre kontakt med dem.
Konklusjon IP-sone:
Selv om vi ikke har lykkes i å få tak i noen form for prisoversikt fra noen av tilbyderne vi
har vært i kontakt med (foruten Telenor Mobil) mener vi å kunne komme med en
anbefaling som vil kunne gi en mer en god nok løsning for oppdragsgiver.
Vi har kommet frem til at det er Catch Communications som vil være den beste
samarbeidspartneren for En Kopp. Dette fordi oppdragsgiver allerede har en avtale med
dem, og er kjent med dem. Det vil være veldig enkelt å legge En Kopp til i det eksisterende
nettet. Selv om det ikke er sikkert at det er Catch som har den beste løsningen per dags
dato ser vi for oss at de vil jobbe veldig for å komme opp på samme nivå som
konkurrentene.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 76
4 Webside
I analysen ble reklameeffekten gjennomgått, med de fordeler og ulemper som en webside
kan medføre. I designen går vi inn på hva siden skal inneholde, og vi skal jobbe fram mot
det endelige valg av det visuelle designet til websiden. For at vår prosjektgruppe skal
kunne levere et godt produkt til En Kopp må vi ha formålet med websiden og budskapet
som skal formidles til lesere i tankene. Vi ønsker å på best mulig måte å oppfylle de krav
og ønsker oppdragsgiver har for websiden.
Prosjektgruppen brukte i starten av prosjektet mye tid på å se på hva som finnes fra før av
når det gjelder websider til lignende konsepter. Som nevnt tidligere gjorde vi dette fordi vi
ikke ønsker å gå i de samme fellene som vi så mange hadde gjort, med å ha uferdige,
uoversiktlige sider og lignende. Å se på andres websider har gitt oss mye i form av ideer til
hva vi kan gjøre bedre for En Kopp.
Back to top
Brukervennlighet, svartid og navigering
Når brukerne først har funnet fram til web adressen og klikket seg inn på den forsøker vi å
gjøre siden tilgjengelig for alle. Det vil si at det er lagt vekt på at designet skal være såpass
robust at det fungerer godt i ulike situasjoner.
Det er anbefalt at en venter med å ta i bruk ny webteknologi på ett nettsted til ett eller to år
etter at den nye teknologien offisielt blir introdusert, da det tar tid før den vanlige bruker
oppdaterer sitt utstyr. Ny teknologi er derfor unngått fordi det ikke er ønskelig å unngå at
besøkende på websiden må installere ny nettleser eller annen programvare før det er mulig
å benytte nettstedet. Det blir derfor tatt hensyn på at det finnes et utall av ulike nettlesere
som folk benytter seg av. Spesielt tar vi hensyn til brukere av Opera, en nettleser som blir
stadig mer brukt. Den ikke støtter enkelte funksjoner som fungerer fint i Internet Explorer,
som for eksempel nedfellbare menyer.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 77
Svartid mot besøkende har også høy prioritet, det vil si at websiden skal være lett å laste.
Det er en kjent sak at brukere av Internet er utålmodige. Undersøkelser fra 2002 viser at
minimumsmålet for svartid bør være at besøkende skal få opp sidene på mindre enn 10
sekunder fra de taster inn adressen i nettleseren.10 sekunder er omtrent grensen for at
besøkendes oppmerksomhet skal holdes fokusert. Tar det for lang tid å få opp siden vil
besøkende droppe den og gå videre til en annen side. Derfor vil vi passe på å ikke lage
siden for stor og full av bilder. Det må gå fort!
Det viktigste navigasjonsspørsmålet er kanskje ”Hvor er jeg?”, for de besøkende vil ikke
ha noen mulighet til å forstå hvordan et nettsted er bygd opp, hvis de ikke vet hvor de er.
Hvor brukeren befinner seg må vises på to ulike måter:
x
I forhold til hele weben.
x
I forhold til nettstedsstrukturen.
En bør ha kjennetegn for nettstedet på alle undersidene. Fra brukernes synspunkt ser
mange nettsteder svært like ut.
4.1 Websidedesign
Av designen bør det gå tydelig fram for førstegangsbesøkende hva nettstedet har å tilby.
Det vil bli nøye overveid hvilke punkter og hvilken informasjon som er relevant å ha med.
Websiden vil bli sett av mange, og derfor er det viktig at gir et riktig bilde av En Kopp
dersom de vil bli oppfattet som en seriøs bedrift også på Internett. Det vil selvfølgelig være
opp til oppdragsgiver hva som legges ut etter at websiden er tatt i bruk og vårt prosjekt er
avsluttet. Men det er ingen grunn til å tro at websiden ikke vil bli benyttet til seriøs
informasjon.
Mange av websidene vi har sett som tilhører kaféer, ellers steder med lignende konsept
som En Kopp inneholdt mye statisk informasjon. Det vil si at sidene var lagt ut som en
reklameplakat som sjelden eller aldri blir oppdatert.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 78
Flere punkter gikk igjen på de ulike sidene:
x
Oversikt over menyen, gjerne med pris-liste.
x
Kontaktinformasjon og besøks- og e-post adresse.
x
Presentasjon av stedets konsept og eventuelle tjenester som tilbys foruten meny og
drikkekart, for eksempel catering, utleie av lokale.
x
Ekstra opplysninger om kaffens historie og om ulike kaffetyper.
x
Bruk av bilder.
Under utviklingen vil vi ta hensyn til de overnevnte punktene, samt prøve å utvide tilbudet.
Bilder
Å ha et utvalg bilder tatt på En kopp vil være med på å forsterke helheten vi forsøker å
legge i siden, samt at gjenkjennelsesfaktoren for de besøkende øker betraktelig. Bildene
skal også kunne være til hjelp når en skal selge inn artister, ved at bookingbyråer kan se
bilder av lokalet.
Ekstra informasjon om kaffe og te
Oppdragsgiver poengterte at de legger stor vekt på kaffe og te, og anser dette som sin
spesialitet. Derfor vil det også være på sin plass og ta med dette som et eget punkt, hvor de
for kan ta med litt om kaffe og te og dens historie, samt leverandører som En kopp benytter
seg av. Dette vil gi besøkende på siden nyttig informasjon, samt at det gir et større inntrykk
av seriøsitet. Kaffe er i vår moderne tid blitt en kunst og det ligger mye kunnskaper bak.
Synliggjøre aktiv oppdatering
For å holde på lesernes interesse og sørge for at de vender tilbake må siden oppdateres
jevnlig, det vil si at det må vises at siden blir brukt. Dette har vi tenkt å understreke ved å
ha et punkt som heter ”Siste nytt” eller ”Nyheter”, og under der vil oppdateringer komme.
Det med dato mener vi er en liten, men svært viktig detalj. Vi har gjennom vår analyse av
nettsteder sett mange nettsteder der det er umulig for de besøkende å si om informasjonen
som ligger der er gyldig, fordi der ikke finnes noen dato. Stamgjester som benytter siden
jevnlig vil kunne følge utviklingen og se at ny informasjon legges til. Da vet de besøkende
at informasjonen de finner der gjelder. For førstegangsbesøkende vil det at dato er med
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 79
gjøre at de ser at siden lever, at det ikke er lenge siden den har vært oppdatert. Dette håper
vi kan føre til at leserne lettere vender tilbake.
Redaktøransvaret for siden skal tilfalle En kopp, og i hovedsak Nicolay Kristiansen, etter
hvert som vårt arbeide avsluttes. I en start- /overføringsfase vil vi kunne være behjelpelig
med dette. Noe av hovedgrunnen for at vi i det hele tatt lager en side for En kopp er
nettopp at de selv skal kunne oppdatere denne. Vi har underveis sett at altfor mange sider
blir liggende ”døde” etter kort tid fordi det er altfor mye jobb i å oppdatere dem.
Personlighet
Når nyheter og andre endringer blir lagt inn vil navnet på den personen som har oppdatert
siden bli skrevet ut. At vi velger å ta med navnet på den som legger inn informasjonen gjør
det hele litt mer personlig, og gir en følelse av at en kjenner den som skriver. Mulighet for
å legge ut bilder av ansatte er og med på gjøre websiden mer personlig.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 80
4.2 Planlegging av utseendet
Det legges bevisst ned mye tid i design av utseende av websiden. Dette gjøres fordi
oppdragsgiver hadde relativt sterke ønsker på dette området, og for å sikre at stilen til En
Kopp ivaretas på websiden. Websiden skal ikke se ”hjemmesnekret” ut, og den skal ha et
enkelt og smakfullt design. Bruk av grafiske effekter og forvirrende reklame, skal
begrenses til et minimum og i beste fall unngås helt.
De første designforslagene, og tilbakemeldingene som ble gitt på dem, brukes som
grunnlag mens det jobbes mot et endelig design. Designet skal gjenspeile lokalene til En
Kopp; enkel og stilfull i litt mørke/brune farger. De besøkende skal formelig kunne kjenne
kaffelukten av siden.
Fargevalg
Oppdragsgivers fargeønsker går i retning kaffe latte i ulike varianter. Vi har fått hjelp av
Katarina Belsom som er utdannet innenfor visuell kommunikasjon, til å velge farger. Hun
har hjulpet oss med tips om det som kalles ”web vennlige” farger, det vil si farger som
holder seg bra i ulike nettlesere og sammen med hverandre. Det er valgt en farge som gir
god kontrast mellom skrift og bakgrunn, og dermed god lesbarhet.
Skrifttype
På grunn av den dårlige oppløsningen på dagens dataskjermer, gir liten skrift i såkalt
grotesk (sans seriff) skriftstil, som for eksempel Verdana, god leselighet. Derfor har vi
valgt å bruke Verdana i mørk grå farge over det hele.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 81
Plassering av logo
Det har fra starten av vært viktig at besøkende som klikker seg inn på websiden til En
Kopp ikke skal være i tvil om hva slags websiden dette er. Derfor er det viktig at logoen
plasseres godt synlig, og at den skal synes fra alle undersidene. En Kopps logo er ikke
designet med tanke på bruk på ei webside. Den er av en vanskelig størrelse og form som
gjorde at valg av plasseringen av logo tok ekstra tid. Den er vanskelig å tilpasse den til den
symmetrien som benyttes på web.
Navigering
Det ble tidlig bestemt at menylinjen skulle plasseres horisontalt i øvre kant av skjermen.
Alle valg på menyen skal være tilgjengelig fra alle undersider slik at besøkende ikke skal
få følelsen av å rote seg vekk. Det ble gått bort fra å benytte nedfellbare menyer for å vise
hva som finnes av informasjon under hovedoverskriftene, blant annet fordi nettleseren
Opera ikke støtter denne funksjonen. Det er kun punkter under ”Siste nytt” som kan linke
til andre sider på nettstedet. Ellers er de andre undersidene frittstående. ”Siste nytt” skal
fungere som en side der de siste endringer av innhold presenteres. Her vil det kunne legges
inn linker til enten ”Konserter etc.”, ”PS” eller ”Hva har skjedd?” .
I hovedmenyen vil følgene valg være tilgjengelige. Titlene på menyen mener vi opplyser
brukerne tydelig om hva de kan forvente å finne hvis de klikker på dem.
Figur 84 Hovedmeny
Menylinjen er delt inn i to nivåer, hvor nivå to vises dersom punktet på nivå en har noen
undervalg.
Figur 85 Hovedmeny/undermeny
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 82
Det markeres ikke på selve menylinjen hvor på siden en befinner seg, men det er hele
veien tydelig markert på selv siden som er aktiv hvor brukeren et til enhver tid.
Figur 86 Vis hvor
4.3 Planlegging av innholdet
Det har blitt tenkt på en del punkter angående design av websider, blant annet hva som skal
til for å få de besøkende på websiden til å bli på siden, og hvordan vil skal få dem til å
komme tilbake. Det har vært viktig å forsøke å se websiden gjennom de besøkendes øyne.
Det viktigste punktet på websiden er at et oppdatert program til enhver tid skal være å
finne på siden. Websiden har mulighet for å linke til artisters hjemmeside og relaterte
artikler, slik at besøkende kan finne fram til mer informasjon på en enkel måte.
At nettstedet skal være oversiktlig, og det skal være enkelt å finne fram til den
informasjonen som etterspørres, er også vektlagt. I og med at dette vil bli ett forholdsvis
lite nettsted, er det begrenset med informasjon som skal inn på siden.
Menylinjen skal ligge vannrett i overkant av siden, og skal være synlig fra alle undersider.
Menyen skal være navngitt på en slik måte at lesere som er inne på siden for første gang
lett oppfatter at En Kopp er mer enn kafè og bar. Vi mener vi har kommet frem til en
inndeling som gjør at det er intuitivt å skjønne hvor en skal gå for å finne det en er på jakt
etter.
Under idèmyldringen ble mange ulike alternativer til funksjonalitet vurdert. De følgende
punktene er funksjoner som ikke blir tillagt siden slik vi har tenkt å utforme den i første
omgang, men er punkter som kan være aktuelle for En Kopp å ta i bruk hvis eller når
produktet skal videreutvikles:
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 83
x
E-postliste
Dette er en god måte å få de besøkende til å benytte siden på. Interesserte kan
melde seg på en liste hvor de får beskjed hver gang web siden oppdateres.
x
Konkurranser
Nok en god måte å skaffe trofaste besøkende til websiden og mer aktivitet. Dette
ble foreslått av oppdragsgiver selv. Små konkurranser hvor premier kan være gratis
billetter eller gavekort på kaffe og lignende.
x
Reservering av billetter:
Mulighet for forhåndsreservasjon av billetter tilbys stadig flere steder, blant annet
har de fleste kinoer og kulturhus i Norge et slik tilbud. Her kan en altså reservere
billetter og få utdelt reservasjonsnummer. En kjekk funksjon for de som ikke har så
god mulighet for å komme ned til En Kopp for å kjøpe billetter. Men foreløpig
fungerer den manuelle ordningen En Kopp har med billettsalget tilfredsstillende.
x
Plassering av eventuell reklame
Oppdragsgiver antydet at det ville kunne være aktuelt å ha annonsører på websiden.
En Kopp har et nært samarbeid med blant andre Bodø Nu, og vi ser ikke bort ifra at
det er naturlig å ha link til deres side. Eventuell reklame bør plasseres på websiden
slik at den ikke virker for påtrengende og forstyrrende. En god idè vil da være å
plassere reklame nederst på siden.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 84
Figur 87 Designutkast
Fargevalget har i hele designfasen
vært bestemt, mens det har vært prøvd
ut ulike måter å plassere logo og
bilder på. Disse eksemplene er også
utviklet ved hjelp av Adobe
Photoshop, og fungerer som rene
design forslag.
Som nevnt tidligere bød En Kopps
logo på en del utfordringer da den
ikke er tilpasset til bruk på web.
Derfor har mange ulike varianter blitt
prøvd ut.
Figur 88 Designutkast
Det ble også tidlig bestemt at en serie
med små bilder skulle være med på
siden. Litt av poenget var at disse
skulle være tatt på En Kopp, da vi
ønsket å unngå bruk av andres bilder
uten å ha rettigheter til dem.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 85
Figur 89 Designutkast
Mange varianter har blitt prøvd ut når
det gjelder menylinjen, men som en
ser av figurene har vi gjennom hele
design fasen tenkt at den skulle
plasseres i overkant av websiden.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 86
4.4 Endelig valg av design og innhold
Mot slutten av designfasen kom vi stadig nærmere det endelig design.
Det endelige valget blir som følger. Det kan komme til å bli gjort noen få endringer innen
produktet ferdigstilles.
Figur 90 Endelig design
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 87
Siste nytt
Dette skal være hovedsiden, den de besøkende først ser når velger å klikke seg inn på
http://www.en-kopp.no. Det ble vurdert å kalle den ”Nyheter” eller ”Hovedside”, men gikk
bort fra det for å ikke gjøre det så formelt og likt det mange andre har. Under dette punktet
er det ment å presentere de siste endringene som er gjort på siden, og ellers andre nyheter.
En slik side ble valgt for å gjøre det enkelt for besøkende på siden å finne ut av de
endringer som er gjort på siden, i stedet for at en må lete rundt på websiden for å finne
endringer, det er det de færreste som orker.
Hva skjer?
Her skal først og fremst de kommende arrangementer presenteres sortert på dato.
Programmet deles inn i følgende kategorier:
x
Konserter etc…
Her legges alle arrangementer som ikke inngår i PS.
x
PS arrangement
PS (Philosophiske Smuler) arrangementene er et
samarbeidsprosjekt mellom flere aktører, og legges derfor ut på websiden som en
egen kategori.
x
Partnere PS
Her presenteres en oversikt over de sponsorer og samarbeidspartnere
PS har. Alle logoene fungerer som linker.
Hva har skjedd?
Dette er ment å fungere som et lite galleri over hva som tidligere har skjedd på En Kopp.
Dette vil i stor grad fungere som reklame og en slags portfolio for framtidige artister som
vurderer å opptre på En Kopp. Bookingselskapene til artistene er ofte interessert i hva slags
type plass de eventuelt skal opptre på. Siden En Kopp er en kafè vil mange muligens være
skeptisk til hvordan en scene skal plasseres i lokalet osv. Dermed kan de se hvem som har
vært der før dem, og at stedet begynner å bli anerkjent som artistscene. Meningen er at det
skal ligge en kort artikkel fra hvert arrangement her, og det er gjort plass for å sette inn et
lite utvalg av bilder.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 88
Siden er videre delt inn i:
x
Siste 5
siden viser de fem siste artiklene som har blitt lagt inn.
x
Arkiv siden
viser alle arrangementene som har blitt lagt inn.
.
Meny
Her presenteres menyen som helhet med gjeldende priser. Det var først tenkt at besøkende
skulle kunne velge ulike undergruppene på menyen, for eksempel hvis de spesifikt vil se
priser på kaffe. Dette ble endret, og etter nøye overveielse kom vi fram til at besøkende på
siden i hovedsak vil være interessert i å se hele menyen under ett, og at en viss grad av
scrolling på siden her vil være akseptabelt. Siden er altså endret til å vise menyen i sin
helhet.
En Kopp har lagt stor vekt på tilbudet av kaffe- og te-sorter. Derfor er det aktuelt å legge
inn informasjon om kaffe-bønner, eventuelt kaffens historie. Men først og fremst hvor de
får sine kaffebønner fra og om tilberedning av kaffe. Dermed får leserne en del lesestoff,
forhåpentligvis interessant lesning, samt at de blir gjort oppmerksomme på at det faktisk
ligger en god del arbeid bak det tilbudet de fører.
Om oss
Om oss er delt inn i flere undermenyer:
x
Hvem er vi?
Her kan En Kopp presentere seg slik de ønsker, fortelle litt om konseptet og
bakgrunnen for dette, og folk kan finne ut hvilken type plass dette er. Vitale data
som antall sitteplasser, hvem som er eier/driver. Litt om hva som er målet med
plassen og hvem er målgruppen, og de kan opplyse om aldersgrense.
x
Hvor er vi?
Her skal det legges inn et oversiktskart over Bodø sentrum med markering ved
SAS – hotellet hvor En Kopp holder til.
Adresse og telefon er også presentert her, samt en kort tekstlig vei beskrivelse.
Design
11121 Prosjektoppgave Handelshøgskolen i Bodø 89
x
Kontakt
Her finnes et kontaktskjema hvor innlegg vil bli sendt som e-post til daglig leder.
Et kontaktskjema ble valgt fordi det er lettere for besøkende å benytte seg av et
slikt enn av en link som åpner en e-post editor. Det er ikke gitt at alle har det
tilgjengelig, og dermed når en flere av brukerne ved å ha et kontaktskjema. Det må
sørges for at den ansvarlige får e-posten og besvarer den, dette kan være viktig
firmapost! Her kan det komme viktige tilbakemeldinger fra lesere, tips om
forbedringer og lignende.
Gjestebok
Gjestebok er tatt med slik at besøkende kan legge inn kommentarer til websiden,
arrangementer og lignende.
x
Signér:
Besøkende kan velge å signere gjesteboken.
x
Les
: Besøkende kan lese alle tidligere innlegg.
Back to top
