Hovedprosjekt 2011 HO912A. Securitas IT portal. Sluttrapport. Adeel Yousaf Khan s Mats Klingenberg Naustdal s Stig Arild Ysterud

Transkript

1 Hovedprosjekt 2011 HO912A Securitas IT portal Sluttrapport Adeel Yousaf Khan s Mats Klingenberg Naustdal s Nur M. Ahmed s Thomas Wiborg s Stig Arild Ysterud s

2 Innholdsfortegnelse Forord Forprosjektrapport Sammendrag Gruppa Veileder Oppdragsgiver Kontaktperson Bedriften Oppgave Dagens situasjon Mål og rammebetingelser Løsninger og alternativer Omstrukturering av hjemmesiden Webshop løsning Søkefunksjon Analyse av virkninger Arbeidsplan Fremdriftsplan Dato og signatur Kravspesifikasjon Innledning Om prosjektet Systembeskrivelse Infoportal Bestillingsfunksjon Søkefunksjon Generelt Funksjonelle krav Tekniske krav Krav til brukerstøtte Designkrav Use case diagram Use case beskrivelse

3 1.2.9 Sekvensdiagram Kompatibilitetskrav Dokumentasjonskrav Prosjektrapport Kartlegging av Securitas IT portal IT meny hovedside Kategorien Datasystemer Meny for GMS Meny for GRS Meny for SPS Meny for Superoffice Meny for Lotus Notes Meny for Prosjektsystem og Tilbudssystem Kategorien Utstyr Meny for PC Meny for Skrivere Meny for Mobiltelefoner Meny for Datalinjer Analyse av Securitas IT portal Konklusjon av analysen Prototype Foreløpig oppsett av sidene Siden for datautstyr Siden for datasystemer Siden for IT-Securitas Siden for FAQ Prototype rapport Innledning Dagens webshop Webshop Produktrapport og Implementeringsfase CSS Definisjon Hvorfor CSS

4 Bruksområde CSS Switch HTML Definisjon Hvorfor HTML Bruksområde Mappestruktur PHP Definisjon Bruksområder Bestillingssystem Administratorside MySQL Definisjon Hvorfor MySQL MySQL database Søkefunksjon Test av produktet Test av layout Test av webshop Resultat Test av administratorsiden Resultat Test med forskjellig skjermoppløsninger Erfaringer Gruppeevaluering og erfaringer Gruppemedlem Gruppemedlem Gruppemedlem Gruppemedlem Gruppemedlem Konkusjon Referanser Vedlegg

5 4.1 Prosessrapport Dokumenter tegnet for hånd Kildekode

6 Forord Denne rapporten tar for seg planleggingen og utviklingen av en informasjonsportal med webshop for utsalg av IT-produkter internt i selskapet. Den tar for seg hele forløpet, fra idé og planlegging til utvikling. For å lese og forstå denne rapporten stilles det krav til generell kunnskap innen informasjonsteknologi. Prosjektgruppen består av fem studenter fra Høgskolen i Oslo. Dette har vært vårt avsluttende prosjektarbeid for en treårig bachelorgrad i Anvendt datateknologi og Informasjonsteknologi ved avdeling for ingeniørutdanning. Oppgaven dekker 20 studiepoeng over ett avsluttende vårsemester. Vi har møtt mange interessante utfordringer gjennom prosjektet, men samtidig fått opparbeidet nye kunnskaper innenfor utvikling at hjemmeside, gruppearbeid og flere nye områder innenfor informasjonsteknologi. Vi har blitt tatt vel i mot hos Securitas AS, og vi ønsker å takke avdelingsleder Geir Lapstuen og tildelt veileder Anne Sofie Skaufel for et godt samarbeid. Vi ønsker å takke førstelektor Ulf Uttersrud ved Høgskolen i Oslo for god veiledning med konkrete og konstruktive tilbakemeldinger under hele prosjektperioden. 6

7 1. Forprosjektrapport 1.1 Sammendrag Vi begynner med en kort beskrivelse av gruppemedlemmene og deres respektive roller i prosjektet. Oppdragsgiveren er Securitas AS, der Geir Lapstuen er avdelingsleder og Anne Sofie Skaufel er kontaktperson. Ulf Uttersrud ble utnevnt som intern veileder ved HiO. I samarbeid med Geir Lapstuen, har gruppa kommet frem til forslag på løsninger for hovedprosjektet Dette omfatter omstrukturering av deres interne IT portal. Det skal utvikles en webshopløsning som skal tilføyes i deres eksisterende IT portal. Det skal brukes eksisterende teknologier, som Securitas AS bruker i dag. Disse teknologiene er HTML, CSS, C#(ASP.NET), mysql og JavaScript. Målet er å gjøre deres interne IT portal moderne og brukervennlig Gruppa Gruppa består nå av fem medlemmer, som er fordelt mellom studieretningene anvendt datateknologi og informasjonsteknologi. Gruppa bestående av følgende gruppemedlemmer: Navn Studentnummer Studieretning Roller Adeel Yousaf Khan s Anvendt datateknologi Gruppeleder Mats Klingenberg Naustdal s Anvendt datateknologi Rapport- og kvalitetsansvarlig Nur M. Ahmed s Anvendt datateknologi Loggføring- og backup ansvarlig Thomas Wiborg s Informasjonsteknologi Programmeringsansvarlig Stig Arild Ysterud s Informasjonsteknologi Webmaster og programmerer Veileder Gruppa fikk tildelt veileder gjennom faglærer. Ulf Uttersrud ved avdeling for ingeniørutdanning, seksjon for data og allmennfag. Ulf Uttersrud har fagbakgrunn i Cand. real. Hovedfag i matematikk fra Universitetet i Oslo. Førsteamanuensis i matematikk. 7

8 1.1.4 Oppdragsgiver Oppdragsgiver for gruppa er Securitas AS, Urtegata 9 i Oslo. Gruppa har vært i kontakt med IT avdelingen ved avdelingsleder Geir Lapstuen Kontaktperson Geir Lapstuen har delegert ansvaret for prosjektet til Anne Sofie Skaufel som nå er vår kontaktperson og ekstern veileder. E-post: anne.sofie.skaufel@securitas.no Bedriften Virksomheten handler om sikkerhet. Gjennom å fokusere på løsninger tilpasset hver enkelt kundes behov har det lykkes å skape vekst og lønnsomhet i markedet. Deres tre ledestjerner ærlighet, vaktsomhet og hjelpsomhet har Securitas beskyttet liv og eiendom, sikret hjem, arbeidsplasser og samfunn i snart 80 år. Sammen med kunder og bransjeorganisasjoner jobber Securitas kontinuerlig med å forbedre sikkerheten i en verden der risikoene stadig endrer seg, noe som igjen stiller stadig større krav til det forebyggende sikkerhetsarbeidet. Avansert sikkerhetsteknikk og -personell veves sammen til heldekkende løsninger der hver detalj og person oppfyller kravene til kvalitet og kompetanse, for å skape trygghet og forebygge skader. Som det ledende selskapet i sikkerhetsbransjen ser Securitas det som en selvfølge, sammen med bransjeorganisasjonene, å støtte utviklingen innen det forebyggende sikkerhetsarbeidet. Dette gjøres blant annet ved å slå ring om at etikk og god moral opprettholdes og gjennom å bidra til at forutsetninger skapes for langsiktig utvikling og stabil kvalitet i arbeidet. Securitas forstår viktigheten av dette arbeidet og tar med stolthet sin del av ansvaret for å utvikle bransjen. Med nærmere 5000 ansatte finnes Securitas på over 40 avdelingskontor i hele Norge Oppgave Det skal foretas en omorganisering av IT portalen, da denne ikke er tilfredsstillende satt opp og organisert på en effektiv måte. Om andre aktuelle ting skulle dukke opp under arbeidet med sida vil det fremmes forslag for oppdragsgiver om dette eventuelt også skal gjøres noe med. Gruppa skal lage et eget bestillingssystem i form av en webshopløsning der de ansatte kan bestille direkte i stedet for den eksisterende løsningen som er beskrevet nedenfor. De samme betingelsene for bestilling som gjelder i dag skal også gjelde for den nye løsningen. Det skal legges inn en 8

9 autentiseringsmetode som verifiserer hvem som legger inn bestilling. Dette er fordi alle bestillinger som legges inn må godkjennes. Per i dag finnes det ikke noen form for søkefunksjon på IT portalen. Oppdragsgiver har gitt uttrykk for et ønske om en søkefunksjon. Gruppa har sett på mulighetene for å få til en slik funksjon og det er absolutt gjennomførbart. Det er lagt inn en forespørsel til kontaktpersonen om eventuelt andre funksjoner og tjenester som de ønsker å få med. Aktuelle forslag blir sendt hvis det skulle være noen Dagens situasjon Gruppa skal ta for seg IT portalen på Securitas AS sitt intranett. Per i dag er ikke denne siden tilfredsstillende satt opp og organisert på en effektiv måte. Det første målet i prosjektarbeidet blir å omstrukturere denne siden slik at de nevnte feil og mangler blir forbedret. Bilde av deres eksisterende IT portal. Siden har en infoside som inneholder en meldingsfunksjon som de bruker et egenprodusert publiseringsverktøy til. Denne funksjonen ønsker oppdragsgiver å beholde som den er. 9

10 Det tilbys tjenester og utstyr til de ansatte for intern bruk. Disse finner man i lister som er lagt ut på siden. Det bestilles ved at man henter informasjon fra de nevnte listene og legger den inn manuelt i deres egenproduserte program. Dette er et kvalitet- og avviksprogram som de ansatte bruker til å sende inn klager og bestillinger. Dette ansees ikke som en bra løsning for bestilling av tjenester og utstyr, og dermed skal det utvikles en bedre løsning. Siden mangler en funksjon for å søke gjennom informasjonen eller rett og slett finne fram til noe man leter etter. En slik funksjon er ønsket av oppdragsgiver Mål og rammebetingelser Målet med prosjektet er omorganisering av IT portalen som bedriften anvender på Microsoft Windows 2003 server med Citrix. Her skal det brukes det samme programmeringsspråk som den eksisterende sida, som er HTML, CSS og JavaScript. Det andre målet er utvikling av en webshopløsning. Her skal det brukes mysql til database og C# (ASP.NET) programmering. Det tredje målet er å implementere en søkefunksjon for IT portalen. Her skal gruppa få litt hjelp av Google til å lage selve søkemotoren, men for øvrig brukes XML. Mål Programmeringsspråk Programvare Omstrukturering av hjemmeside HTML, CSS, JavaScript Microsoft Expressions Web Webshop løsning mysql, C# (ASP.NET) MySQL server, Visual Studio Søkefunksjon XML Microsoft Expressions Web Løsninger og alternativer Den løsningsmodellen som ligger til grunn for prosjektet er valgt fordi den samsvarer med oppdragsgivers ønsker og med deres eksisterende systemer. I tillegg har gruppemedlemmene kunnskaper innenfor de programmeringsspråkene som er valgt Omstrukturering av hjemmesiden Siden skal omstruktureres for å gjøre den mer navigerbar og oversiktlig. Siden er kodet i HTML med intern CSS. HTML skal fortsatt brukes, men det skal brukes ekstern CSS i stedet. Dette for å minske 10

11 antall linjer med kode i hver fil og for bedre oversikt i filene. De eksisterende sidene inneholder JavaScript som også vil bli brukt videre. Alternativer til HTML finnes ikke i form av andre programmeringsspråk, men det finnes forskjellige versjoner av HTML. Det samme gjelder CSS, og de eneste reelle alternativene er intern eller ekstern CSS. Når det gjelder alternativer for JavaScript kommer det an på scriptets funksjon på nettsiden. Et mulig alternativ hvis man skal presentere media er Flash Webshop løsning Denne løsningen må utvikles fra bunnen av. Det skal brukes mysql til database med alt som kan bestilles, og selve bestillingssystemet blir laget med C# (ASP.NET). I tillegg må systemet inneholde en metode for autentisering som verifiserer hvem som bestiller, noe som er et krav fra oppdragsgiver. Dette skal avløse det manuelle systemet som er i bruk i dag. Det finnes mange alternativer til databasesystemer enn mysql, og noen av dem er MS SQL, MS Access, Oracle, OpenInsight, osv. Alternativer til C# (ASP.NET) kan være PHP, Python eller JSP Søkefunksjon En søkefunksjon på sida var et ønske fra oppdragsgiver. Dette blir mulig gjennom et tilbud som gruppa har funnet på Google, der man kan få definert sin egen søkemotor konfigurert til sin egen hjemmeside. Denne løsningen velges fordi gruppa har liten eller ingen erfaring med akkurat dette fra før av og det ikke er nødvendig å utvikle noe som allerede eksisterer. Til denne funksjonen brukes det XML. For å lage en søkefunksjon på en nettside finnes det flere måter å gå fram på. Hvilken framgangsmåte som velges kommer an på hvilke forutsetninger som ligger til grunn for utviklingen av funksjonen. Disse kan være forkunnskap og erfaring utvikleren sitter inne med som er nødvendig for å utvikle funksjonen, omfanget av selve utviklingsprosessen i forhold til tidsdisponering og oppdragsgivers krav til funksjonalitet. 11

12 Løsning Fordeler Ulemper HTML Det som brukes av alle Statisk Ekstern CSS Mindre kode per fil Enklere å redigere En fil for alt JavaScript Funksjonelt Omfattende kode Krevende mysql Brukervennlig Gratis Oppdragsgiver kjenner systemet Omfattende kode C# (ASP.NET) Funksjonelt Bedre enn eldre løsninger Google Ferdiglaget Tidsbesparende Krevende Ikke fullstendig egenprodusert XML Lesbart Selvdokumenterende Plasskrevende og delvis overflødig syntax Alternativ Fordeler Ulemper Intern CSS Inneholder kun den spesifikke sidens formateringer Mye kode per fil Arbeidskrevende redigering Flash Bra til media presentasjon Ikke støttet på oppdragsgivers system PHP Ikke spesielt krevende Avgrenset muligheter Python Lettlest og klar syntax Minnekrevende Ikke blant de raskeste JSP Bra sikkerhet og operasjonell effektivitet Tregere 12

13 Analyse av virkninger Intern CSS: vil først og fremst øke kodemengden da koden for hver enkelt side ligger på de spesifikke sidene. Dette vil føre til økt arbeidsmengde hvis man må redigere hver enkelt fil. Hadde dette derimot vært få filer, ville det vært en fordel å bruke intern CSS. Flash: Ved hjelp av Flash vil vi kunne lage utrolig flotte grafiske nettsider. Den tar derimot mye lenger tid å laste opp og krever en høyere båndbredde om den skal fungere optimalt. PHP: er mye brukt og svært enkelt å kode. En har derimot færre muligheter enn det vi har ved bruk av C#. Python: er et mye brukt og stort programmeringsspråk med mange muligheter. Det krever derimot mye minne og er ikke blant de raskeste programmeringsspråkene. JSP: er en meget sikkert og mye brukt. Det er derimot tregere enn hva andre språk tilbyr Arbeidsplan Gruppa bruker Microsoft Project til å sette opp arbeidsplan og fremdriftsplan. Det føres også logg over alle møtene med møtereferater. 13

14 Task Name Varighet Start Slutt Startfasen 179 dager to ti Opprette gruppe 5 dager to on Bli kjent 1 dag on on Finne arbeidsgiver 5 dager lø fr Statusrapport 8 dager to ma Prosjektskisse 8 dager on fr Skrive under kontrakt 1 dag ti ti _ Innledningsfase 106 dager ti ti Planlegging 5 dager ti ma Forprosjekt 13 dager on fr Kravspesifikasjon 20 dager ma fr Analyse 20 dager ma fr Prototype til nettside 20 dager ma fr Prototype Webshop 20 dager ma fr Prototype testing 26 dager ma ma Testrapport prototype 6 dager ma ma _ Hoveddel 77 dager ma ti Koding av nettside 20 dager ma fr Implementering av webshop 20 dager ma fr Prossesdokumentasjon 60 dager ma fr Testing 7 dager ma ti Testrapport 10 dager ma fr _ Avslutning 17 dager ma ti Finpussing 11 dager ma ma Fullføre sluttrapport 15 dager ma fr Innlevering 1 dag ti ti Presentasjon 4 dager ti fr

15 Fremdriftsplan 15

16 Dato og signatur Oslo, 28/ Adeel Yousaf Khan Mats Klingenberg Naustdal Nur M. Ahmed Thomas Wiborg Stig Arild Ysterud 16

17 1.2 Kravspesifikasjon Innledning Vi har fått i oppdrag av Securitas AS og forbedre deres interne nettside. Prosjektet vårt har fått navnet Sec++ etter Securitas og ++ fra C++ som den gang ble døpt C++ pga utvidelsen den har fått basert på programmeringsspråket C. Dette er vårt bachelor hovedprosjekt 2011 for Høgskolen i Oslo. Målet vårt er å forbedre Securitas AS sin interne nettside. I dag er den svært rotete og komplisert for den vanlige Securitas bruker. Informasjonsportalen skal forbedres ved hjelp av HTML, CSS, JavaScript, PHP og mysql Om prosjektet Et av gruppemedlemmene jobber i Securitas AS, hvor han har fått deltidsjobb i IT-avdelingen. Her har han jobbet i over fem år. Dette gruppemedlemmet synes Securitas AS sin interne nettsted var i særdeles dårlig stand og tok derfor kontakt med Geir Lapstuen angående en prat om å forbedre deres interne nettsted. Lapstuen så problemet, og hadde i lang tid tenkt over samme sak. Han var derfor positiv til dette, og gav derfor oss muligheten til å jobbe med dette som hovedprosjekt Systembeskrivelse Infoportal Informasjonsportalen skal omstruktureres for å øke brukervennligheten i forhold til den nåværende portalen, som ansees å være meget ustrukturert og komplisert. Det skal være ryddig og lett å navigere. Informasjonsportalen inneholder mye informasjon om de forskjellige IT systemene bedriften tar i bruk. Sidene inneholder informasjon som ofte stilte spørsmål, brukerveiledning og generelt om systemene. Noen av fordelene med omstruktureringen er mindre belasting på helpdesken, lettere å finne fram, lettere å forstå. Siden skal designes så universell utformet som mulig, og et av tiltakene blir et eget CSS for bedre kontrast og forskjellige skriftstørrelser for svaksynte vil også bli implementert Bestillingsfunksjon For å erstatte deres manuelle bestillingssystem skal det lages en webshopløsning på portalen. På bestillingssidene skal det være tilstrekkelig med informasjon om produktet, prisen og bilder av produktene. Det blir en handlekurv som man legger alle varene i. Før bestillingen kan sendes videre skal det foretas autentisering av den som bestiller. Bestillingssystemet sender en engangskode til e- 17

18 posten til brukeren. Koden må legges inn i bestillingen. Selve ordren sendes videre per e-post til IT avdelingen som legger det inn i sitt ordre system Søkefunksjon Det skal være en mulighet til å finne informasjon på portalen. Det skal implementeres en søkefunksjon for og lettere kunne finne fram til den informasjonen man er ute etter uten å bruke for mye tid på det Generelt Det skal under koding tas høyde for at sidene skal være lette å redigere for IT avdelingen, slik at informasjon om nye systemer, produkter, osv. enkelt kan implementeres på informasjonsportalen og i bestillingssystemet Funksjonelle krav Utvikle deres eksisterende system. Bedre strukturen for lettere håndtering av hjemmesiden. To knapper med CSS valg. En knapp for svaksynte og en for normalsynte, slik at nettsiden er funksjonell for flere brukergrupper. Bedre struktur rundt HTML koden. Utvikle dagens eksisterende webshopløsning Tekniske krav Programmeringsspråk: HTML, PHP, SQL og JavaScript. Database: MySQL Programvare: Microsoft Expression Web 4, Microsoft Office Word og Microsoft Project Professional Krav til brukerstøtte Vi vil kun lage en brukermanual på vår webshop. Nettsiden vil for de fleste være så enkel at brukere med minimal IT erfaring er I stand til og ta den I bruk å finne ut av systemets funksjonalitet på egenhånd. Webshopen er for Securitas sin del såpass ny at vi lager en brukermanual, men vil I teorien kun være nødvendig for folk med IT erfaring lik null. 18

19 1.2.6 Designkrav Løsninger vi utgir skal være så brukervennlig som mulig. Vi vil bruker en hovedside med logoer, søkefunksjon og en rekke linker for å forenkle nettsiden. Dette gjør menyene statiske uansett hvor man er på nettsiden, noe som gjør det enkelt for bruker å velge en ny lenke eller søke uavhengig hvor han er på siden. Securitas banner og deres farger må beholdes da alle deres nettsider både nasjonalt og internasjonalt har dette som standard Use case diagram 19

20 1.2.8 Use case beskrivelse Use Case Aktør Prebetingelse Postbetingelse Hendelsesflyt Legg vare i handlekurv Bruker Bruker ønsker å legge vare i handlekurv Bruker legger til vare i handlekurv 1. Systemet gir bruker mulighet til å legge til vare 2. Bruker trykker på knappen "Legg til" om han ønsker å legge til vare Use Case Aktør Prebetingelse Postbetingelse Hendelsesflyt Fjern vare i handlekurv Bruker Bruker ønsker å fjerne vare Bruker fjerner vare fra handlekurv 1. Systemet gir bruker mulighet til å fjerne vare fra handlekurv 2. Bruker huker av ønsket vare 3. Bruker trykker på knappen "Fjern" Use Case Aktør Prebetingelse Postbetingelse Hendelsesflyt Variasjoner Taster inn e-post Bruker Bruker må taste inn sin e-post Bruker taster inn sin e-post 1. Systemet gir bruke mulighet til å taste inn sin e-post. 2. Bruker taster inn sin e-post 3. Bruker trykker på knappen "Send" 3a. Bruker får "Ugyldig e-post" 3b. Bruker får beskjed om å taste inn korrekt e-post og derretter trykket "Send" 20

21 Use Case Aktør Prebetingelse Postbetingelse Hendelsesflyt Variasjoner Use Case Aktør Prebetingelse Postbetingelse Hendelsesflyt Autentisering Systemet/Bruker Bruker autentiseres ved hjelp av kode Bruker taster inn kode 1. Bruker avventer på kode fra e-post 4. Bruker skriver inn kode mottatt på e-post 5. Bruker trykker på knappen "Autentiser" 5a. Bruker får "Ugyldig kode" 5b. Bruker må taste inn korrekt kode og derretter trykker "Autentiser" Sender kode Systemet Systemet ønsker å sende kode til e-post Systemet sender kode til angitt e-post 1. Systemet sender kode til angitt e-post Use Case Aktør Prebetingelse Postbetingelse Hendelsesflyt E-post E-post(Tjener) E-post venter på e-post fra systemet E-post mottar kode 1. E-post avventer kode fra systemet 2. E-post mottar kode fra systemet Use Case Aktør Prebetingelse Postbetingelse Hendelsesflyt Leser e-post Bruker Bruker ønsker å lese e-post Bruker leser e-post 1. Bruker leser e-post og mottar kode 2. Bruker skriver inn kode i autentisering 21

22 Use Case Aktør Prebetingelse Postbetingelse Hendelsesflyt Bestilling sendt Systemet Systemet ønsker og gi tilbakemelding om bestilling å sende bestilling Systemet gir tilbakemelding på bestilling og sender bestilling 1. Systemet gir tilbakemelding om bestilling til bruker 2. Systemet sender bestilling til IT.Avd Use Case Aktør Prebetingelse Postbetingelse Hendelsesflyt IT.Avd IT.Avd IT.Avd avventer bestilling IT.Avd mottar en bestilling 1. IT.Avd mottar en bestilling 2. IT.Avd godkjenner eller ikke-godkjenner bestillingen. 3. IT.Avd sender ordrebekreftelse. Use Case Aktør Prebetingelse Postbetingelse Hendelsesflyt Send ordrebekreftelse IT.Avd/Systemet IT.Avd ønsker å sende en ordrebekreftelse IT.Avd sender en ordrebekreftelse 1. Systemet sender ordrebekreftelse til bruker. 22

23 1.2.9 Sekvensdiagram 23

24 Kompatibilitetskrav Nettsiden vil kunne fungere på Microsoft Internet Explorer, Opera, Mozilla Firefox, Google Chrome, men er beregnet og optimalisert for Microsoft Internet Explorer da dette er Securitas default browser Dokumentasjonskrav Vi vil bruke følgende lisenser: Microsoft Visual Studio 2010 Microsoft Expression Web 4 Microsoft Project Professional 2010 Microsoft Office Word Vi følger dokumentasjonsstandarden utarbeidet av Ann-Mari Torvatn januar

25 2. Prosjektrapport 2.1 Kartlegging av Securitas IT portal IT meny hovedside IT-portalen er bygd opp som en standard nettside med en banner på toppen, en meny til venstre og en ramme hvor informasjon vises. Det vises også ymse informasjon under menyen. Den første siden har fire kategorier i menyen: Regler du må kunne, Systemer, Utstyr og Kurs. IT-Meny Regler du må kunne Systemer Utstyr Kurs De fire kategoriene i hovedmenyen. 25

26 Bilde av IT menyen. 26

27 I katgorien regler du må kunne er det to knapper: Regler for bruk av e-post og IT-håndbok: Sikkerhet som begge åpner et nytt vindu med et PDF dokument om det gjeldende temaet. IT-Meny Regler du må kunne Systemer Utstyr Kurs Regler for bruk av e-post IT-Håndbok: Sikkerhet Nytt vindu med PDF Nytt vindu med PDF Kategorien Regler du må kunne. 27

28 2.1.2 Kategorien Datasystemer I kategorien Systemer er det bare en knapp: Datasystemer. Denne sender brukeren til en ny meny med knappene GMS, GRS, SPS, Superoffice, Lotus notes, Prosjektsystem og Tilbudssystem. Her er det en Tilbake knapp. IT-Meny Regler du må kunne Systemer Utstyr Kurs Datasystemer Ny meny GMS GRS SPS Superoffice Lotus notes Prosjektsystem Tilbudssystem Kategorien systemer med den nye menyen. 28

29 Bilde av meny for Datasystemer 29

30 2.1.3 Meny for GMS Knappen GMS åpner en ny meny med knappene Status, Brukeransvarlig, Historie, Ofte stilte spørsmål og Informasjon. Knappen Status gjør ikke annet enn å åpne den samme siden. Alle de andre knappene viser informasjon i ramma. Her er det ingen Tilbake knapp. GMS Ny meny Status Brukeransvarlig Historie FAQ Info Samme side Info i ramma Info i ramma Info i ramma Info i ramma Menyen under knappen GMS. 30

31 2.1.4 Meny for GRS Knappen GMS åpner en ny meny med knappene Status, Brukeransvarlig, Historie, Ofte stilte spørsmål og Informasjon. Knappen Status gjør ikke annet enn å åpne den samme siden. Alle de andre knappene viser informasjon i ramma. Her er det ingen Tilbake knapp. GRS Ny meny Status Brukeransvarlig Historie FAQ Info Samme side Info i ramma Info i ramma Info i ramma Info i ramma Menyen undre knappen GRS. 31

32 2.1.5 Meny for SPS Knappen SPS åpner en ny meny med knappene Status, Brukeransvarlig, Historie, Ofte stilte spørsmål og Informasjon. Knappen Status gjør ikke annet enn å åpne den samme siden. Alle de andre knappene viser informasjon i ramma. Her er det ingen Tilbake knapp. SPS Ny meny Status Brukeransvarlig Historie FAQ Info Samme side Info i ramma Info i ramma Info i ramma Info i ramma Menyen under knappen SPS. 32

33 2.1.6 Meny for Superoffice Knappen Superoffice åpner en ny meny med knappene Status, Brukeransvarlig, Historie, Ofte stilte spørsmål og Informasjon. Knappen Status gjør ikke annet enn å åpne den samme siden. Alle de andre knappene viser informasjon i ramma. Her er det ingen Tilbake knapp. Superoffice Ny meny Status Brukeransvarlig Historie FAQ Info Samme side Info i ramma Info i ramma Info i ramma Info i ramma Menyen under knappen Superoffice. 33

34 2.1.7 Meny for Lotus Notes Knappen Lotus notes åpner en ny meny med knappene Status, Brukeransvarlig, Historie, Ofte stilte spørsmål og Informasjon. Knappen Status gjør ikke annet enn å åpne den samme siden. Alle de andre knappene viser informasjon i ramma. Her er det ingen Tilbake knapp. Lotus notes Ny meny Status Brukeransvarlig Historie FAQ Info Samme side Info i ramma Info i ramma Info i ramma Info i ramma Menyen under knappen Lotus notes. 34

35 2.1.8 Meny for Prosjektsystem og Tilbudssystem Knappen Prosjektsystem åpner et nytt vindu med en ny meny med kun en knapp, Tilbudsbeskrivelse, som åpner et nytt vindu med et PDF dokument. Her er det ingen Tilbake knapp. Knappen Tilbudssystem åpner et nytt vindu med en ny meny med to knapper: Tilbudsbeskrivelse og Kjente problemer. Knappen Tilbudsbeskrivelse åpner et nytt vindu med et PDF dokument. Knappen Kjente problemer viser informasjon i ramma. Her er det ingen Tilbake knapp. Prosjektsystem Tilbudssystem Nytt vindu med ny meny Nytt vindu med ny meny Tilbudsbeskrivelse Tilbudsbeskrivelse Kjente problemer Nytt vindu med PDF Nytt vindu med PDF Info i ramma Menyene under knappene Prosjektsystem og Tilbudssystem. 35

36 2.1.9 Kategorien Utstyr I kategorien Utstyr er det fire knapper: PC, Skrivere, Mobiltelefoner og Datalinjer. IT-Meny Regler du må kunne Systemer Utstyr Kurs PC Skrivere Mobiltelefoner Datalinjer Kategorien Utstyr. 36

37 Meny for PC Knappen PC åpner en ny meny med knappene: Status, Bestilling av PC, Brukeransvarlig, Historie, Ofte stilte spørsmål og Informasjon. Her er det ingen Tilbake knapp. Knappen Status åpner den samme siden. Knappen Bestilling av PC åpner et nytt vindu med en ny meny. Her er det Tilbake knapp. Menyen har linkene: Bærbare, PC normal og PC tynn client der informasjonen kommer i ramma. USB stick der det åpnes nytt vindu med et PDF dokument. PDA der informasjonen kommer i ramma. Knappene Brukeransvarlig, Historie, Ofte stilte spørsmål og Informasjon viser informasjon i ramma. Når det trykkes på Informasjon er det også linker i informasjonen i ramma. PC Ny meny Status Bestilling av PC Brukeransvarlig Historie FAQ Info Samme side Nytt vindu med ny meny Info i ramma Info i ramma Info i ramma Info i ramma Bærbare PC normal PC tynn client USB stick PDA Info i ramma Info i ramma Info i ramma Nytt vindu med PDF Info i ramma Menyene under knappen PC. 37

38 Bilde av meny for PC. 38

39 Meny for Skrivere Knappen Skrivere åpner en ny meny med knappene: Status, Bestilling av skriver, Brukeransvarlig, Historie, Ofte stilte spørsmål og Informasjon. Her er det ingen Tilbake knapp. Knappen Status åpner den samme siden. Knappen Bestilling av skriver åpner en ny meny med linkene: Laser (sort/hvit), Laser (farge), Multifunksjons (sort/hvit), Multifunksjons A4 og Multifunksjons A3-A4 der informasjon kommer i ramma. Her er det Tilbake knapp. Toner priser der det kommer et PDF dokument i ramma. Knappene Brukeransvarlig, Historie, Ofte stilte spørsmål og Informasjon viser informasjon i ramma. Skrivere Ny meny Status Bestilling av skrivere Brukeransvarlig Historie FAQ Info Samme side Ny meny Info i ramma Info i ramma Info i ramma Info i ramma Laser (sort/hvit) Laser (farge) Multifunksjons (sort/hvit) Multifunksjons A4 Multifunksjons A3-A4 Toner priser Info i ramma Info i ramma Info i ramma Nytt vindu med PDF Info i ramma PDF i ramma Menyene under knappen Skrivere. 39

40 Meny for Mobiltelefoner Knappen Mobiltelefoner åpner en ny meny med knappene Status som åpner den samme siden og Brukeransvarlig, Historie, Ofte stilte spørsmål og Informasjon som viser informasjon i ramma. Det er også tre kategorier med knapper i menyen. Kategorien Bestille med knappene Kjøp av mobiltelefon og Mobilabonnement som begge viser informasjon i ramma. Kategorien Egenandel med knappene Registrere egenandel og Avdelingssjefer som begge viser informasjon i ramma. Registrere egenandel har også link i ramma. Her er det ingen Tilbake knapp. Mobiltelefoner Ny meny Status Bestille Egenandel Oppsett Brukeransvarlig Historie FAQ Info Kjøp av mobiltelefon Mobilabonnement Registrere egenandel Avdelingssjefer Notes traveler - Iphone Info i ramma Info i ramma Info i ramma Info i ramma Info i ramma Info i ramma Info i ramma Info i ramma Ingen fil Menyen under knappen Mobiltelefoner. 40

41 Meny for Datalinjer Knappen Datalinjer åpner en ny meny med knappene: Status som åpner den samme siden. Bestilling av datalinjer som åpner et nytt vindu med PDF dokument. Brukeransvarlig, Historie, Ofte stilte spørsmål, Informasjon og Priser som viser informasjon i ramma. Priser har også link i ramma. Her er det ingen Tilbake knapp. Datalinjer Ny meny Status Bestilling av datalinjer Brukeransvarlig Historie FAQ Info Priser Meny under knappen Datalinjer. 41

42 Kategorien Kurs inneholder en knapp IT kurs som sender brukeren til et nytt vindu med innlogging. IT-Meny Regler du må kunne Systemer Utstyr Kurs IT kurs Nytt vindu, logg inn Kategorien Kurs. 42

43 2.2 Analyse av Securitas IT portal Etter kartlegging av den eksisterende IT-portalen kommer det tydelig fram at siden er noe kaotisk, akkurat som det ble stipulert tidligere. Selve oppsettet er for så vidt greit, men det er ikke vits med så mange og kompliserte menystrukturer når det ikke er så veldig mye informasjon som skal formidles. Det forekommer også en del inkonsistens ved at det skjer forskjellige ting når menyknappene blir trykket på, som for eksempel at det noen ganger åpnes et nytt vindu, noen ganger kommer en ny meny og noen ganger kommer det informasjon i ramma. Dette er ikke feil i alle tilfellene. Knappene har forskjellige funksjoner og skal vise ulike ting og må derfor ikke fungere på samme måte, men de som skal gjøre det samme burde også fungere på samme måte. I menyen på første side er det en kategori som heter Regler du må kunne med to knapper, som åpner nye vinduer med PDF dokumenter. Disse er overflødig og kan erstattes med en knapp med samme navn som kategorien. Denne burde vise informasjonen i ramma og ikke åpne et nytt vindu. Eventuelt, siden det er to dokumenter, kan det være to linker i ramma som viser brukeren til vært av dokumentene. Dette vil gjøre menyen enklere ved at to elementer blir slått sammen til ett. Bilde av hovedmenyen, markert kategorien Regler du må kunne. 43

44 I den neste kategorien i hovedmenyen Systemer er det en knapp. Denne fører brukeren til en ny meny. Dette er greit fordi det er et eget tema med mye informasjon om forskjellige systemer. I den nye menyen har vært av de fem systemene sin egen knapp, noe som også er greit. Hver av disse knappene fører brukeren til enda en ny meny. Dette er overflødig i forhold til informasjonsmengden som er der. En enklere metode vil være å bruke linker i ramma som viser informasjonen i stedet. Dette vil gjøre det enklere å navigere og mindre komplisert for brukeren. Bilde fra en av systemmenyene. Tilbake i menyen for systemer er det to knapper litt lenger nedenfor knappene for datasystemene. Disse åpner nye vinduer med nye menyer, noe som igjen er overflødig i forhold til informasjonen. Nytt vindu er i hvert fall overflødig, og ny meny er også overflødig. All informasjonen kan vises i ramma uten nye vinduer eller menyer med eventuelt linker til spesifikk informasjon eller dokumenter. Dette vil igjen forenkle menystrukturen. 44

45 Bilde fra systemmenyen, markert de ekstra systemene. I kategorien Utstyr er det fire knapper med de ulike utstyrskategoriene. Disse kan godt slås sammen til en knapp med samme navn som kategorien for å forenkle hovedmenyen. Deretter kan det komme opp en ny meny med knapper for de forskjellige utstyrsgruppene. Dagens utgave har en meny for hver utstyrsgruppe, noe som gjør at det blir mange menyer å forholde seg til. Innenfor hver av disse menyene er det også en knapp for bestilling av utstyr i den kategorien brukeren befinner seg i. Denne åpner enda en ny meny i et nytt vindu med linker til de forskjellige typene av utstyr innenfor den utstyrskategorien brukeren befinner seg i. Alle disse nye menyene og nye vinduene skaper kaos på skjermen og er forvirrende for brukeren. Ved i stedet å ha en knapp for bestilling av alle typene utstyr og et eget system for bestilling, for man kan ikke bestille noe som helst under menyene for bestilling, vil det bli mye enklere for brukeren. 45

46 Bilde av en av bestillingssidene. Den siste kategorien i hovedmenyen Kurs er helt grei og kan være som den er. Den sender brukeren til en ny side hvor man må logge seg inn. Bilde av hovedsiden, markert kurs. 46

47 Flere av sidene mangler en tilbakeknapp, noe som burde være på hver side. De som er der sender brukeren tilbake til hovedmenyen Konklusjon av analysen Menystrukturen for infoportalen bør endres for å gjøre siden mer brukervennlig og mer oversiktlig for brukeren. Dagens løsing gjør at informasjonen ikke kommer fram til brukerne og det gir unødvendig mye belastning på IT helpdesk da brukeren velger å gi opp og heller ringe etter opplysninger. 47

48 2.3 Prototype Foreløpig oppsett av sidene Den nye menystrukturen vil bli slik at kategoriene ligger over ramma. Når disse trykkes på vil det komme en meny på venstre side av ramma med alternativene innenfor hver kategori. Disse alternativene vil igjen vise informasjon i ramma. Kategoriene vil hele tiden ligge over ramma mens menyen til venstre vil endre seg ettersom hvilken kategori som er valgt. Informasjonen vil hele tiden komme i ramma uten nye vinduer eller nye sider Siden for datautstyr Logo IT MENY Datautstyr System IT-Securitas FAQ PC Skrivere Mobil Datalinjer Copyright Denne siden vil erstatte hele den gamle kategorien Utstyr og alle dens undermenyer og sider. Den kommer opp ved å trykke på kategorien Datautstyr og i menyen kommer alternativene for de typene datautstyr som tilbys. Hvert av alternativene viser informasjon om det aktuelle utstyret i 48

49 ramma. På denne siden vil det også være mulig å bestille det utstyret man ønsker ved å trykke på en knapp som fører brukeren videre til bestilling Siden for datasystemer Logo IT MENY Datautstyr Datasystemer IT-Securitas FAQ GMS GRS SPS Superoffice Lotus Notes Prosjektsystem Tilbudssystem Citrix Copyright Denne siden vil erstatte den gamle kategorien Systemer og alle dens undermenyer og sider. Den kommer opp ved å trykke på kategorien Datasystemer og i menyen kommer alternativene for de typene datasystemer som Securitas bruker. Hvert av alternativene viser informasjon om det aktuelle systemet i ramma. 49

50 2.3.4 Siden for IT-Securitas Logo IT MENY Datautstyr System IT-Securitas FAQ IT-Kurs Regler for e-post IT-håndbok: Sikkerhet Copyright Denne siden erstatter kategoriene Regler du må kunne og Kurs med alle undermenyer og sider. Den kommer opp ved å trykke på kategorien IT-Securitas og i menyen kommer alternativene som har med IT å gjøre. Alternativet IT-Kurs vil fungere nesten som det gjør i dag, men med noe forklarende tekst og en link til den samme siden som i dag. De to andre alternativene viser informasjon i ramma. 50

51 2.3.5 Siden for FAQ Logo IT MENY Datautstyr System IT-Securitas FAQ GMS GRS SPS Superoffice Lotus Notes Prosjektsystem Tilbudssystem Citrix Copyright Denne siden er tatt med fordi det var en knapp Ofte stilte spørsmål innenfor alle de gamle menyene til hvert enkelt system. Den er et nyttig hjelpemiddel for brukeren hvis det er noen problemer og for it-ansvarlig som kan legge ut svar på spørsmål eller løsninger på problemer som går igjen. Hvis brukerne alltid sjekker her før de ber om hjelp kan det spare it avdelingen tid og andre ressurser. 51

52 2.4 Prototype rapport Innledning Da vi begynte arbeidet med å utvikle webshoppen gikk vi først ut fra deres tidligere sider for utsalg av it-utstyr for å finne ut hva som gjorde denne så komplisert å bruke Dagens webshop Deres eksisterende webshop er komplisert å bruke da en må gjennom flere ledd fra første side for å komme til webshop siden, det åpnes også nye vinduer noe som bare lager kaos for brukeren. Når en så har valgt et produkt sender brukeren mail til avdelingslederen som tar en avgjørelse på om kjøpet skal innvilges eller ikke. Avdelingslederen bruker så et program Kvalitet hvor han legger til ønsket vare. Programmet sender så en mail til IT avdelingen som igjen sender varen videre til brukeren Webshop Vårt mål var å lage en webshop som var enkel og ryddig for brukeren. Vi satte derfor opp noen mål som vi bestemte oss for å gjennomføre. Webshoppen skulle entres ved et enkelt klikk på hovedmenyen Kjøp av vare skulle gå enklere og raskere for bruker og avdelingsleder Alt skal foregå på samme vindu Valg av produkt etc. skal være ordnet på en ryddig måte Webshoppen skal være selvforklarende Da førstesiden ble designet ble det tatt hensyn til at alt skulle skje på samme side. Derfor var det naturlig med en hovedmeny med få valg som igjen åpnet en ny meny med undervalg. Hovedmenyen ble plassert på toppen og undermenyene på venstre side. For å komme til webshoppen trykker man på It-Utstyr. Når man så har klikket på denne linken vil det komme opp noen valg på undermenyen som inneholder forskjellige produktkategorier. Om vi følger linken Bærbar Pc kan vi på midten av siden se en detaljert oversikt over hvilke pc-er som er tilgjengelige for salg. Det ble valgt å ha varene oppstilt på denne måten da det gir en enkel og ryddig beskrivelse. Trykker man på Kjøp knappen vil ordren bli lagret i databasen og en kan trykke på Handlekurv for å se valgte ordre. Handlekurven er plassert øverst til venstre. Den er godt synlig og selvforklarende for brukeren. Når bruker så har valgt å avslutte handelen kan han trykke på Gå til kassen. E-posten brukes som autentiseringsløsning. Når bruker taster inn sin e-post vil han få tilsendt en kode som må tastes inn. På neste side må bruker taste inn Faktureringsinfo, Mottagerinfo, Brukerinfo og Tilleggsinfo om nødvendig. Til slutt kommer en bekreftelsesside med all oppgitt informasjon samt bestilte varer. IT-Avdelingen mottar så ordren og det sendes en Ordrebekreftelse til brukeren. 52

53 Logo IT MENY PC Skrivere Datautstyr System IT-Securitas FAQ Laser Multifunk Multifunk A3 Toner Lemax E260d Handleliste: Mobil Datalinjer Side pr min. Svart: 33 Ca pris: ,- 1 Kjøp Lemax E360dn Side pr min. Svart: 43 Ca pris: ,- 0 Kjøp Copyright Denne siden vil erstatte hele den gamle kategorien Utstyr og alle dens undermenyer og sider. Den 53

54 2.5 Produktrapport og Implementeringsfase CSS Definisjon CSS- Cascading Style Sheets er et språk som brukes til å definere utseende på filer skrevet i HTML eller XML. Prinsippet er at HTML- eller XML-dokumentet utelukkende skal beskrive struktur og semantikk, mens oppsett, farger og annen stilinformasjon skal beskrives ved hjelp av CSS. ( n.n.) Hvorfor CSS I kravspesifikasjonen ble gruppa enig om å ha en ekstern CSS fil for hele websiden. Gruppa opprettet en CSS fil med navn styels.css som skulle inneholde all kode for utsende og oppførsel på sida. CSS oppsett for ønsket layout fant vi på internett: For å kunne gi økt brukervennlighet var det helt avgjørende med oversiktlig layout Bruksområde Under prototypedesign ble det besluttet å ha en meny på toppen som skulle åpne en undermeny på venstre side. I koden på CSS filen ligger menylinja på toppen i #navigation og menyene som vises på venstre side ligger i #leftcolumn. Oversikten over alle CSS linjene som kalles for selector og inneholder alle deklarasjonene som styrer layouten og oppførselen er lagt opp på følgende måte: 54

55 #topp {} #header {} #navigation {} #leftcolum {} #rightcolumn {} #footer {} Skisse av oppsettet 55

56 CSS koden har mange flere selector enn det som er nevnt over. Hele koden består av 165 linjer som er vedlagt rapporten (vedlegg CSS). Hovedselector kan ha flere under selectorer som kun styrer oppførselen innenfor hovedselectorens område. Plasseringen av alle selectors fremgår av skisse under: #topp {} #header {} #logo {} #hstyle{} #navigation {} #navigation li a {} #navigation a:hover {} #leftcolum {} #leftcolumn a {} #leftcolumn a:hover {} #rightcolumn {} #rightcolumn a {} #rightcolumn a:hover {} iframe#identity {} iframe#identity2 {} #cart {} #cart a {} #cart a:hover {} #kategori {} #kategori a {} #kategori a:hover {} #skjema {} #annonse {} #annonse img {} #annonse2 {} #annonse2 img {} #footer {} Skisse av oppsettet 56

57 Liste over alle selectors og hva deklarasjonene gjør. Selector #topp {} #header {} #logo {} #hstyle{} Hva deklarasjonene gjør Styrer plassering og størrelsen av frame Styrer plassering og størrelsen av frame Styrer plassering og størrelse av logo Styrer plassering og størrelse av overskrift Securitas IT-meny #navigation {} #navigation li a {} #navigation a:hover {} Styrer plassering og størrelse av frame Styrer li a href linkene Styrer oppførselen til a href #leftcolum {} #leftcolumn a {} #leftcolumn a:hover {} Styrer plassering og størrelsen av frame Styrer a href linkene Styrer oppførselen til a href #rightcolumn {} #rightcolumn a {} #rightcolumn a:hover {} Styrer plassering og størrelsen av frame Styrer a href linkene Styrer oppførselen til a href iframe#identity {} iframe#identity2 {} Styrer plassering og størrelsen av iframe for nyhetene Styrer plassering og størrelsen av iframe for nyhetene #cart {} #cart a {} #cart a:hover {} Styrer plassering, størrelsen og oppførsel av handlekurven Styrer a href linkene Styrer oppførselen til a href #kategori {} #kategori a {} #kategori a:hover {} Styrer plassering, størrelsen og oppførsel av kategoriknappene på webshop Styrer a href linkene Styrer oppførselen til a href 57

58 #skjema {} Styrer plassering og størrelsen av skjema som fylles ut etter bestilling #annonse {} #annonse img {} #annonse2 {} #annonse2 img {} Styrer plassering, størrelsen og oppførsel av annonsene Styrer plassering, størrelsen og oppførsel av bildene som har portrett format Styrer plassering, størrelsen og oppførsel av annonsene Styrer plassering, størrelsen og oppførsel av bildene som har landskap format #footer {} Styrer plassering og størrelsen av frame CSS Switch Siden skulle designes så universell utformet som mulig, og et av tiltakene gruppen skulle foreta var å opprette et eget CSS for bedre kontrast og forskjellige skriftstørrelser for svaksynte. CSS for bedre kontrast så ikke gruppa som nødvendig under utviklingsprosessen. Bilde av fargene på menyen Slik det fremgår av bildet over har menyknappene mørkegrå farge med hvit skrift som gir bra kontrast. Samme gjelder for område hvor informasjonen vises i sort skrifttype arial med hvit bakgrunn som gir veldig bra kontrast. CSS switch knapper for normal og større skrift ble tatt med. For å utvikle denne funksjonen ble det brukt et JavaScript. 58

59 Mye av informasjonen ble hentet fra og modifisert etter vårt behov og bruk. Funksjonen bytter mellom to CSS filer med forskjellige konfigurasjoner som heter styles.css og styles2.css. Bilde av koden for CSS filene Knappene for å benytte CSS switchen ble plassert på toppen på høyre side. Bilde av plasseringen på CSS switch knappene 59

60 2.5.3 HTML Definisjon HyperText Markup Language (HTML, hypertekstmarkeringsspråk) er et markeringsspråk for formatering av nettsider med hypertekst og annen informasjon som kan vises i en nettleser. HTML benyttes til å strukturere informasjon angi noe tekst som overskrifter, avsnitt, lister og så videre og kan, i en viss grad, brukes til å beskrive utseende og semantikk i et dokument. HTMLs grammatiske struktur er HTML DTD som ble skapt ved å gjøre bruk av SGML syntaks, som er en internasjonal standard for tekstformatering (ISO 8879). ( n.n) Hvorfor HTML Den eksisterende siden som gruppa fikk utlevert av oppdragsgiver var skrevet i html. Gruppa bestemte seg for å redigere og videreutvikle den eksisterende koden. Html koden fra oppdragsgiver sin startside som de har kalt for deafult.htm bestod av 875 linjer med kode og samtlige filer inneholdt like mye kode og mer. For å holde fokus på brukervennligheten og mulighetene for videreutvikling av produktet måtte hele koden skrives om igjen, og gruppa var helt enig om å starte med blanke ark Bruksområde Hovedsida for webportalen som vi begynte på er kalt index.html. Koden måtte utformes på en måte som gjorde at den kunne bli brukt for resten av html-sidene, og koden fra index.html dannet grunnlaget for videreutvikling av resten av filene. 60

61 Første utkastet av index.html bestod av 44 linjer med kode. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html xmlns=" <head> <title>securitas IT meny</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="header"> <img id="logo" alt="securitas logo" src="bilder/securitas-logo.png"/> <h1 id="hstyle">securitas IT- Meny</h1> </div> <div id="navigation"> <ul><li> <a href='index.php'>hjem</a> <a href='system.php'>system</a> <a href='utstyr.php'>it-utstyr</a> <a href='it%20securitas.php'>it Securitas</a> <a href='faq.php'>faq</a> </li></ul> </div> <div id="leftcolumn"></div> <div id="rightcolumn"> <br></br><br></br> <h1>velkommen til IT Helpdesk</h1> <h3>gjør deg godt kjent med innhold som ligger under IT Securitas meny<br></br> Alle supporthenvendelser skal ragistreres i Kvalitetssystemet som ligger i Securitas Hovedmeny. I kvalitet vil du kunne se status på alle dine saker som er registrert.<br> </br> For umiddelbar support ta kontakt med Securitas IT Helpdesk på telefon.<br/> Telefon: 8888 ( )<br></br></h3> </div> <div id="footer"> Gruppe 25</div> </body> </html> Bilde av første utkastet fra index.html 61

62 2.5.4 Mappestruktur En av hovedgrunnene til at gruppa var enig om og ikke å bruke den eksisterende mappestrukturen var måten den var organisert på. Den var meget utfordrende å sette seg inn i og finne igjen til filene som det var referert til i koden. Mapper, html-filer, dokumentfiler, bilder og mye annet lå spredt om hverandre i hovedmappen. Den eksisterende mappestrukturen er avbildet under. 62

63 Bilde av deres eksisterende mappestruktur 63

64 Under oppbyggingen av den nye mappestrukturen ble det lagt vekt på organisering og logisk oppsett og navngivningen av mappene. Alle hovedmenyvalgene som ble plassert på toppen, under selctor #navigation, fikk samme navn som knappene og ble plassert i hovedmappen. Alle filene som det blir referert til i undermenyen, under selector #leftcolumn, ble plassert inn i nye mapper med samme navn på mappen som på filen. Med denne mappestrukturen var det utrolig enkelt å navigere seg fram til infoformasjon og filene en trengte under videreutvikling av sidene. Bilde av ny mappestruktur. 64

65 2.5.5 PHP Definisjon Navnet PHP er et rekursivt akronym og står for PHP: Hypertext Preprocessor. PHP er et dynamisk, tolket og løst typet programmeringsspråk hovedsakelig brukt for å utvikle dynamiske nettsider. PHPs syntaks ligner C og Perl. ( n.n) I utgangspunktet var det egentlig ikke meningen å bruke PHP til utformingen av produktet. Med produktet menes det her de funksjonene som var nødvendige for å få til det som var satt ned i kravspesifikasjonen. Det skulle egentlig brukes aspx, fordi det var det som ble brukt på systemet til oppdragsgiver fra før. Beslutningen om å gå over til PHP ble tatt tidlig i utviklingsprosessen, før det var satt i gang koding av produktet. Den ble tatt fordi en av funksjonene som skulle implementeres var et bestillingssystem og det ble bestemt at det skulle brukes databaser i forbindelse med dette. PHP hadde bedre støtte for å jobbe opp mot databasesystemet enn aspx, og oppdragsgiver gikk dessuten også med på å prøve denne løsningen. Gruppa hadde også bedre kunnskap og mer erfaring innen PHP enn aspx, så det var lettere å komme i gang med og det krevde mindre forarbeid Bruksområder Selv om alle filene til hele produktet er døpt om til PHP filer fra html er det ikke alle filene som inneholder PHP kode eller script. De som gjør det er filene til de sidene som styrer funksjonene som er lagt til. Noen av filene inneholder lengre script med flere funksjonaliteter, mens andre bare har mindre kodesnutter for overføring av informasjon. Det finnes også filer helt uten PHP kode, men de har fortsatt PHP filendelse. 65

66 2.5.6 Bestillingssystem Filene som inneholder de mest omfattende scriptene har med utstyrsdelen å gjøre. Her brukes PHP med SQL til å hente ut all informasjonen om produktene i de ulike kategoriene fra databasen og vise dem i en tabell. Samtidig er dette første ledd i bestillingssystemet der brukeren velger produkt og valgt produkt blir lagt i databasen. Bilde av tabell for bærbar PC Variabler for de forskjellige parametrene blir satt. Funksjon for å koble til databasen med feilmelding hvis det misslykkes. Funksjon for å velge hvilken database det skal kobles til med feilmelding hvis det misslykkes. Koden for å koble til databasen 66

67 Variabel med tilkobling til databasen settes. Det sjekkes om kobling misslykkes og hvis det er tilfelle gis det feilmelding. Variabel for hvilken kategori som skal vises settes. Det sjekkes om det blir lest fra databasen og hvis det misslykkes gis det feilmelding. Ellers kjøres resten av scriptet. Variabel for antall rader som skal skrives ut settes. Link til handlekurven vises. Løkke for visning av alle varene i vareregisteret innenfor den gitte kategorien med all informasjon som skal være med. Kode for visning av en kategori Handlekurven, som er andre ledd i bestillingssystemet, henter de valgte produktene fra databasen og viser dem i en liste. Her er det også mulig å gjøre endringer før brukeren går videre for å registrere sin bestilling. 67

68 Bilde av handlekurven Det sjekkes at det er blitt trykket på kjøp knappen og hvis det er tilfellet kjøres resten av scriptet. En session startes for å unngå start av ny handleliste hver gang en vare blir valgt. Variabler for informasjonen som skal legges i databasen settes. Det blir koblet til databasen. Variabler for sqlspørringer og kjøring av disse settes, og dermed blir varene lagt inn. Kode for å legge til varer i handlekurven Overskrift for handlekurv vises. Variabler for SQLspørring og utføring av den settes. Variabel for antall rader i tabellen settes. Tabellen startes og overskriftene blir lagt inn. Løkke for visning av alle varer som er valgt i en tabell kjøres og tabellen avsluttes. Variabler for sqlspørring og utføring av den settes. Variabel for antall rader settes. Tabell for visning av totalpris og totalantall startes og en løkke fyller tabellen. 68

69 Kode for visning av handlekurven 69

70 Det sjekkes om det er trykket på Fjern alle knappen. Hvis det er tilfellet nullstilles sessionvariablen som tar vare på den startede ordren og det opplyses om at handlekurven er tom. Det sjekkes om det er trykket på en av Fjern knappene som er bak hver av varene i tabellen. Hvis det er tilfellet settes det variabler for varenummer og ordrenummer for den aktuelle varen. Det kobles til databasen og variabel for SQL-spørring og utføring av denne settes. Kode for endring av handlekurven 70

71 Neste ledd i bestillingssystemet er å oppgi en e-postadresse som blir sjekket med et regulært uttrykk for å kontrollere at det oppgis en e-postadresse som er fra Securitas domene. Det vil si at den må slutte med securitas.no. Deretter blir det sendt en generert engangskode til den oppgitte e- postadressen som må tastes inn for å komme seg videre. Dette er for å verifisere at brukeren er en av de ansatte i Securitas. Bilde av e-post siden Variabel fro e-postadressen som skal sjekkes settes. Det sjekkes om e-posten slutter med securitas.no. Hvis det er tilfellet vises siden, eller hvis det ikke er tilfellet får brukeren beskjed om at det er tastet feil med anvisninger om hva som er riktig og en link for å prøve igjen. Kode for test av e-post 71

72 Sessionvariabel med e-postadressen settes. Variabel med et tilfeldig tall settes og dette tallet gjøres om til en kode. Mail sendes til den oppgitte e-postadressen med den genererte koden. Kode for generering av engangskode og sending av e-post Engangskoden som ble sendt til den oppgitte e-postadressen tastes inn og sjekkes for verifisering. Bilde av kodesiden Den inntastede koden sjekkes mot koden som ble sendt. Hvis den er den samme vises siden, eller hvis den ikke er den samme vises en feilmelding og en link tilbake for å taste inn ny e-postadresse. Kode for test av engangskoden 72

73 Siste ledd i bestillingssystemet er å fylle ut et skjema med informasjon om fakturering, mottager, bruker og eventuelt tilleggsinformasjon. Deretter genereres en e-post som blir sendt til it-avdelinga og det sendes en bekreftelsese-post til brukeren. Bilde av informasjonsskjema ved bestilling Funksjon for å sende e-post til it-avdeling med parametrene til, emne og melding. Kode for sending av e-post 73

74 Funksjon for å sende e-post til bruker med parametrene til, emne og melding. Kode for sending av e-post Helt til slutt skrives det ut en oversikt over all informasjon til skjermen. Bilde av siste oversiktsbilde 74

75 2.5.7 Administratorside Det er også laget en administratorside hvor det er mulig å legge til, endre og slette varer i databasen. Dette systemet starter med at brukeren må logge seg inn. Her brukes sessions for hele tiden å kontrollere at brukeren er logget inn og slik at det er umulig å få tilgang til noen av de øvrige sidene uten at man er logget inn. Bilde av logg inn side Session startes, noe som må være med når session brukes. Inntastet brukernavn og passord sjekkes, eller om man allerede er logget inn. Sessionvariablen settes og brukeren sendes til admin.php. Hvis det blir tastet feil brukernavn eller passord får man beskjed om det og en link tilbake til innloggingssiden dukker opp. Koden for logg inn 75

76 Session startes som vanlig. Det sjekkes om sessionvariablen er satt, og hvis den er det vises siden. Hvis ikke gis det beskjed om at brukeren ikke er innlogget og link tilbake til logg inn dukker opp. Koden for å teste om brukeren er logget inn Når man er logget inn kan brukeren velge hvilken databasetabell som skal vises; varer, ordre eller ordrelinjer. Under varer listes hele vareregisteret fra databasen varer, og brukeren har mulighet til å legge til varer, endre varer og slette varer. Under ordre listes alle ordrene som er lagt inn og under ordrelinjer listes alle ordrene som ikke er registrerte ordre enda. De sistnevnte har også mulighet til å endre og slette. Bilde av administratorsiden 76

77 Bilde av Varer tabellen 77

78 Variabel for databasenavn, sqlspørring og antall rader settes. Overskrift vises på siden. Tabell startes og overskriftene fylles i første rad. Løkke startes for å gå gjennom hele databasen. Variabel med all informasjon i databasen som array settes. Informasjonen i arrayen skrives i tabellen. Tabellen avsluttes. Koden for å vise alle varene i en tabell 78

79 Brukeren fyller ut et skjema med all informasjon om den nye varen som skal legges til og det blir lagt i databasen. Feltet som heter Link er det som skal vises når brukeren klikker på linken Les mer under hver vare. Tabellen med alle de eksisterende varene vises ikke under denne operasjonen da den er overflødig på dette tidspunktet. Bilde av legg til skjemaet 79

80 Det sjekkes at brukeren har trykket på ok og hvis den er trykket på utføres scriptet. Variabler fylles med informasjon oppgitt i skjemaet for tillegging av varer og variabelen for sqlspørring settes. Variabel for utføring av sqlspørring settes. Det sjekkes at sqlspørringen har fungert. Har den ikke fungert blir det opplyst om det og varenummeret blir skrevet ut eller hvis den har fungert blir det opplyst om det. Koden for å legge til varer i databasen Brukeren taster inn vareid på den varen som skal endres. Varelisten vises under denne operasjonen for at det skal være mulig å finne vareid på den aktuelle varen. Bilde av endre-funksjonen 80

81 Et skjema dukker opp likt det som brukes når en vare skal legges til, men her er all den eksisterende informasjonen om den valgte varen allerede fylt ut. Brukeren kan dermed utføre endringer uten å måtte fylle ut all informasjon på nytt. Tabellen med alle de eksisterende varene vises ikke under denne operasjonen da den er overflødig på dette tidspunktet. Bilde av endre-funksjonen Det sjekkes at brukeren har trykket på ok og hvis den er trykket på utføres scriptet. Variabler fylles med informasjon oppgitt i skjemaet for endring av varer og variabelen for sqlspørring settes. Variabel for utføring av sqlspørring settes. Det sjekkes at sqlspørringen har fungert. Har den ikke fungert blir det opplyst om det og varenummeret blir skrevet ut eller hvis den har fungert blir det opplyst om det. Koden for å endre varer i databasen 81

82 Brukeren taster inn Vareid på den varen som skal slettes og varen blir slettet fra databasen. Varelisten vises under denne operasjonen for at det skal være mulig å finne vareid på den aktuelle varen. Bilde av slett funksjonen Det sjekkes at brukeren har trykket på ok og hvis den er trykket på utføres scriptet. Variabel fylles med informasjon oppgitt i skjemaet for sletting av varer og variabel for sqlspørring settes. Variabel for utføring av sqlspørring settes. Det sjekkes at sqlspørringen har fungert. Har den ikke fungert blir det opplyst om det og varenummeret blir skrevet ut eller hvis den har fungert blir det opplyst om det. Koden for å slette varer i databasen 82

83 Den siste funksjonen er logg ut knappen, som nullstiller sessionvariablen og sender brukeren tilbake til den første siden index.php. Session startes. Må være med når session brukes. Nullstiller sessionvariablen og sender brukeren tilbake til index.php, som er logg inn siden. Koden for å logge ut 83

84 2.5.8 MySQL Definisjon Database er en strukturert samling av data. Databaser skal håndtere store mengder data effektivt og sikkert. Systemene som håndterer databasen skal sikre at endringer og tilføyelser ikke fører til feil og skal kunne levere riktig informasjonen når den blir hentet ut. Systemet vi bruker for å koble til databasen heter mysql som er verdens mest populære open source DBMS(Database managment system) på norsk databasehåndteringssystem. For å få kontakt med databasen brukes et databasespråk kalt SQL(Structured Query Language). Vi definerer SQL operasjonene inn i tre grupper. Strukturelle operasjoner(data Definition Language), operasjoner mot data(data Manipulation Language) og kontrolloperasjoner(data Control Language). Strukturelle operasjoner lager, sletter og endrer databasen. Operasjoner mot data, Setter inn, sletter, oppdaterer og velger ut data som ligger inne i databasen. Kontrolloperasjoner, gir og fratar brukerer av databasen rettigheter til å utføre en eller flere operasjoner mot en databasetabell Hvorfor MySQL MySQL er veldig populært for webapplikasjoner. Mye av grunnen til dette er at MySQL er gratis, har høy ytelse og krever svært lite av maskinvare. Programmet er også veldig lett å lære MySQL database Under sees et utsnitt av vår database CREATE TABLE `secordre` ( //Her opprettes en tabell kalt secordre `OrdreNr` int(11) NOT NULL auto_increment, //Det opprettes en kategori OrdreNr den gis datatype integer med plass til 11 siffer. NOT NULL forteller oss at den MÅ fylles inn og kan ikke stå blank. Auto_increment øker tallet automatisk. `Kund ` varchar(30) NOT NULL, //Tildeles datatypen variable character(30) forskjellen på varchar og char er at char kun opptar plassen den trenger mens char(30) bruker hele plassen. 84

85 `ordredato` date NOT NULL, //datatype dato PRIMARY KEY (`OrdreNr`) //PRIMARY KEY OrdreNr brukes for å identifisere rader i en tabell. En primærnøkkel er aldri like. ) ENGINE=MyISAM ; //Database enginen. Er underligende software komponent som DBMS bruker for å lage, slette, lese og oppdatere data i databasen. Her kommer det mer Bilde av ordre-databasen 85

86 Bilde av ordrelinje-databasen Bilde av vare-databasen Her kommer det mer 86

87 2.5.9 Søkefunksjon Under utviklingen av søkefunksjonen fikk gruppa store utfordringer. Gruppa hentet flere forskjellige løsninger fra google, men ingen av dem vi testet var optimal for vår bruk. De søkescriptene gjorde at man fikk treff på innhold fra vår side samt andre eksterne sider. Gruppa klarte til slutt å finne et JavaScript som benytter innebygd Windows søkefunksjon. Scriptet ble modifisert noe for å tilpasse den til vår side. Søkefeltet ble plassert på toppen, foreløpig bruker vi det kun på FAQ siden for å teste funksjonen. Det skal senere implementeres i alle sider som er under FAQ. Denne søkefunksjonen søker kun gjennom den siden bruker er i. For eksempel om bruker er på forsiden kan man kun finne informasjonen man er ute etter på forsiden. Grunnen til dette er fordi oppdragsgiveren ville ha en sånn funksjon på FAQ siden. Bildet under er kildekoden til vi bruker på søkefunksjonen, koden sjekker først hvilken nett leser brukeren har. Etter den har sjekket så kjører den enten Windows.find eller Trange.findtext, basert på hvilke nettleser brukeren bruker. Disse strengene fungerer som en skulle trykke ctrl+f på tastaturet. 87

88 Bilde av søk Scriptet 88

89 2.6 Test av produktet Test av layout Mandag ble det foretatt en test av layouten med Leif Erik Thomassen som bruker Securitas infoportal ofte, da Thomassen er systemansvarlig for et av systemene som ligger på de sidene. Thomassen gikk gjennom hele siden og klarte å navigere seg fram til de forskjellige sidene uten at det var et problem. Han var svært fornøyd med at gruppa hadde laget en egen knapp med FAQ. Det var et tiltak som faktisk kunne gjøre jobben hans enklere med å publisere viktig informasjon om det systemet han administrerer. Selv om han til enhver tid visste hvor han var når han testa sida, så savnet han overskrifter på undermenyvalgene som ble vist på venstre side. Forslaget ble notert for videreutvikling og implementering. Bilde av førsteutkast av layout. 89

90 2.6.2 Test av webshop Onsdag hadde vi avtalt med Securitas om å vise vår forløpig utviklede webportal. Vi koblet vår maskin opp mot en prosjektor og viste Geir Lapstuen og Monika Einan vår oppgave. Først viste og fortalte vi dem om endringene som var gjort i forhold til deres tidligere nettside. Etter en liten briefing lot vi begge prøve seg. Vi ga dem forskjellige oppgaver som de skulle begi seg ut på. Blant dem var følgende. Bilde av hovedsiden til Securitas It-Portal. 90

91 Fra Hovedsiden bestill en bærbar Dell Latitude E6410 Geir: 1. I vår øvre meny klikket han på It-Utstyr deretter Bærbar PC Bilde av bærbare PCer tilgjengelig på IT-Utstyr 2. Han fikk da opp en rekke pcer og valgte 1 Latitude E6410, og klikket så Kjøp. Varen ble da bestilt og puttet i handlekurven. Fra Hovedsiden les gjennom IT-håndbok Sikkerhet Monika: 1. I øvre menyen klikket hun på IT-Securitas og fikk da opp valget IT-håndbok Sikkerhet som hun klikket på. Bilde av IT-Håndbok: Sikkerhet 91

92 Fra Hovedsiden fortsett å sjekke ut bestillingen som ble gjort på bærebar Dell Latitude E6410 Geir: 1. Geir gikk tilbake inn på It-Utstyr og trykket på Bærebar PC. Handlekurven poppet så opp og han gikk inn på denne. Bilde av varer valgt fra handlekurv 2. Listen med kjøpte varer ble så vist og etter en rask sjekk trykket han på Gå til kassen. 3. En tekstboks hvor en fyller inn E-post blir så vist og han tastet inn sin personlige E-post. Bilde fra inntasting av E-Post 4. Han fikk da en feilmelding Du må taste inn en Securitas epost han fylte på nytt inn sin Securitas E-post. 92

93 Bilde av feil inntasting av E-post 5. En kode ble så oppgitt og han tastet denne inn i Kode-feltet Bilde av inntasting av oppgitt kode Faktureringsinfo, Mottagerinfo, Brukerinfo og Tilleggsinfo er felter som han fylte inn og trykket deretter Send. Ordren ble så sendt og han mottok Ordren er sendt 93

94 Bilde av Faktureringsinfo Resultat Etter en liten testrunde fikk Geir og Monika mulighet til og leke seg litt rundt på egenhånd. De var svært fornøyd med produktet så langt og vi mottok en positiv tilbakemelding. I en tilbakemelding sto det blant annet at Webportalen var blitt svært ryddig, strukturert og designmessig elegant. Portalen var enkel å finne fram i og bestilling av utstyr var lett. Det var derimot noen få endringer de ønsket i forhold til FAQ og webshoppen. Blant forandringer var det ønskelig med en søkefunksjon i FAQ. I webshoppen ønsket de en link som gav mer produktinfo om produktet som de selv kunne skrive og redigere. Et alfabetisk oppsett av hyperlinkene var også ønskelig. Vi hadde også kontakt info til de ansvarlige i IT-Avdelingen. Dette måtte fjernes da man skal bruke systemet Kvalitet for å få kontakt med dem. 94

95 2.6.3 Test av administratorsiden Mandag ble det foretatt en test av administratorside. Monika Einan og Stephan gjennomførte hele testen. Monika gjennomførte alle testene i henhold til hva gruppa ønsket. Testen begynte med at gruppa logget seg inn på hovedsiden til administratorsiden. Testen ble gjennomført i følgende rekkefølge: 1. Monika logget seg på som administratorbruker med riktig brukernavn og passord Bilde av logg inn side 2. Fikk vist alle menyvalgene og dens innhold som hun gikk igjennom og ble raskt kjent med Bilde av menyvalgene 3. Hun trykket på menyvalget Vare og Legg til for å legge til en vare på databasen. Hun fylte ut tilfeldig informasjon i alle feltene på skjema, og trykket OK for å legge til varen og fikk tilbakemelding om at Varen er lagt til 95

96 Bilde av legg til knapp og skjema 4. På den andre skjermen hvor webshopen stod trykket hun på F5 for å oppdatere siden for å hente inn test annonsen ut på webshopen Bilde av annonsene, ny test og en annonse fra tidligere 5. Monika gikk tilbake til administratorsiden og trykket på kappen Endre. Ved å trykke på den fikk hun valg om å fylle ut Vareid og OK. 96

97 Bilde av endre-funksjonen 6. Ved å trykke på OK fikk hun opp samme skjema som ble vist på legg til med alt eksisterende innhold fra annonsen hentet ut av databasen. Bilde av endre-funksjonen 7. Hun trykket på Slett knappen. Når hun trykket på Slett knappen fikk hun opp et felt hvor hun måtte skive inn Vareid. Hun la til vareid på den test annonsen som ble opprettet, trykket på OK og fikk tilbakemelding om at Varen ble slettet. Ved å trykke på oppdater på ITmenyen så hun at den forsvart fra sida. 97

98 Bilde av slett-funksjon 8. Ordre og Ordrelinjer knappen hadde ingen funksjon inntil handlekurvsystemet var satt opp Resultat Monika var svært fornøyd med hele oppsettet og mente at dette var en enkel og brukervennlig administratorside som gjorde administreringen utrolig enkelt. Hun ga inntrykk for at hun ønsket å ta i bruk systemet fra samme dag. Hun begrunnet sin beundring over vår side med at de i dag legger inn annonser med Microsoft FrontPage ved å klippe og lime innhold fra forskjellige steder. Oppdateringene deres i dag er svært vanskelig å foreta og det blir ikke gjort, fordi det er ingen som vil foreta noen endringer i koden. Alt i alt var hun positiv til vår løsning og design av administratorsiden og webshopen. Stephan testet igjennom på samme måte og rekkefølge som Monika. Han var helt enig med Monika og syns løsningen fungerte godt og var brukervennlig. Stephan likte ikke at det ikke var likk meny oppsett på annonsene side som ellers på alle sidene på IT-meny sidene. Han kom med et forslag om å legge til kategori knappene på alle sidene slik vi har lagt opp på skrivere og diverse. 98

99 Bilde av Diverse med underkategorivalg Bilde av testbruker 99

100 2.6.4 Test med forskjellig skjermoppløsninger Det ble foretatt test ved å oppsøke tilfeldige studenter på datatorget med bærbare PCer med forskjellige skjermstørrelser. Vi fant en bruker med 13.1 og en bruker med Vi fikk anledning til å teste sideoppløsningen. Skjermstørrelse 10.1 førte til at noen små utfordringer og endringer måtte foretas for å få den skulle fungere optimalt på en Det var raske endringer som ble foretatt under testing. Bildet av fornøy testbruker ved HIO 100

101 3. Erfaringer 3.1 Gruppeevaluering og erfaringer Alle gruppemedlemmene fikk i oppgave å skrive en personlig evaluering og om erfaringer fra prosjektet og gruppearbeidet. Det ble satt opp tre spørsmål for å kunne skrive noe om evaluering og erfaringer. Evalueringsrapporten skulle inneholde følgende: positive og negative erfaringer med prosjektet positive og negative erfaringer med gruppearbeidet personlig vurdering og mening om egeninnsats Under har vi limt inn alle evalueringene uten å navngi hvem som skriver Gruppemedlem 1 Gruppen vår består av 2 fra informasjonsteknologi og 3 fra anvendt datateknologi. Denne kombinasjonen har fungert utmerket da begge IT rettningene har sine fag som igjen har gjort vårt prosjekt rikere på kunnskap. Vi er 5 personer med forskjellige kunnskaper og har lært å lære av hverandre noe som igjen har ført til at gruppemedlemmene har økt kunnskapene sine rundt IT. Anvendt fag har blitt lært bort til Informasjonsteknologi studentene og visa versa. Vi har hatt en god leder som har holdt orden på lik tildeling av oppgaver og vært svært striks på at frister har blitt overholdt. Samtlige gruppemedlemmer har gjort en strålende jobb i sine oppgaver. Det bør også sies at problemer og uenigheter vi har støtt på underveis alltid har løst seg på en god måte, noe som absolutt ikke er en selvfølge når en jobber med 5 forskjellige personer. En stor takk til samtlige i gruppen for et fantastisk samarbeid og et flott sluttprodukt Gruppemedlem 2 Min erfaring med dette prosjektet har vært bare positivt, Jeg har fått gleden av å samarbeide med en gruppe som var målbevisst og en leder som har vært med på slike prosjekter i arbeidslivet, som viste hva som måtte til for å nå målet vårt. I den anledning vil jeg takke hele gjengen i gruppe 25 for et fint semester med masse later og fin samarbeid. Jeg sitter her nå og tenker over hva jeg har lært ut av dette prosjektet. Mitt svar kan deles følgene: - Samarbeid - Vennskap 101

102 - Arbeidslivet Samarbeide: Selv om jeg har samarbeidet med mange medstudenter i min periode på høgskolen i Oslo, så tør jeg å bestå at i denne gruppen har jeg lært hvordan et samarbeid skal foregå, hvordan møter skal holdes, når mann skal være seriøs og når man kan tulle litt. Vennskap: Under dette prosjektet har det ikke bare vært å utvikle et produkt, men også utvikle vennskap som jeg håper det varer livet ut. Arbeidslivet: Men mange møter med vår oppdragsgiver har jeg lært hvordan det er å være på møte med folk ut i arbeidslivet, har også lært hvordan møter skal foregå. Samtidig har jeg lært hva de som sitter høyt oppe i stigen tenker og syns Gruppemedlem 3 Prosjektvalget var veldig i bra i forhold til min personlige kunnskap innen informasjonsteknologi. Utviklingsprosessen gikk bra og det var en del utfordringer underveis, som etter hvert med intenst arbeid ble løst. Prosjektarbeidet har gitt gode erfaringen og lærdom. Mye av det jeg hadde lært tidligere kom godt til nytte og ble forfrisket med mange flotte erfaringer. I forhold til prosjektomfanget var antall gruppemedlemmer for stor. Utgangspunktet var å være fire på gruppa og det er noe vi burde holdt oss til. På grunn av en del utfordringer med å sette sammen gruppe, måtte vi bli en gruppe på fem. Gruppearbeidet har fungert utmerket, men med en del utfordringer i forhold til å holde frister. Noen har selvsagt gjort mindre enn andre, men det har gått greit. Arbeidsfordelingen ble satt på plass ganske tidlig i prosjektet. Alt i alt har alle gjort en fabelaktig innsats som har ført til et godt resultat som jeg er svært fornøyd med. Personlig mener jeg at jeg har prestert veldig bra og gjort alt jeg kan for å holde høy standard og kvalitet på sluttproduktet. Jeg føler jeg har ytet maks og mer ville ikke vært mulig med hensyn til livssituasjonen og andre fag jeg har hatt ved siden av hovedprosjektet Gruppemedlem 4 Jeg er helhetlig fornøyd med gruppen. Samholdet, samarbeidet og gruppesammensetningen har vært fint. To fra informasjonsteknologi, og tre fra anvendt datateknologi viste seg og være en god kombinasjon. For vi fikk kombinert koding, og utforming på en bra måte. I et vellykket prosjekt trengs 102

103 det ekspertise på flere områder, slik at sammenslåing på tvers av forskjellige studieretning, gav oss flere bein å stå på. Gruppeleder har vært engasjert, som har gitt oss motivasjon til å arbeide hele tiden. Det har aldri vært uklarhet i arbeidet. Fulltallig gruppe er også en viktig faktor som spiller inn for å trives i en gruppe. Noe også vi oppnådde. Til slutt vil jeg si takk til de andre gruppemedlemmene for et også samarbeid så langt, og lykke til videre Gruppemedlem 5 Ved prosjektets start var det noen bekymringer om at omfanget av prosjektet skulle være stort nok til å rettferdiggjøre en gruppe på fem personer. Det blei fleipet med at vi skulle være ferdig i løpet av en ukes tid. Dette viste seg etter vært å være helt grunnløse bekymringer, fordi det var mer enn nok å gjøre for alle til enhver tid. Det var som om prosjektet vokste underveis, mens man jobbet med en ting fikk man ideer og inspirasjon til en annen ting. Samtidig ble det også mer tilfredsstillende ved at vi oppnådde de målene vi satte oss. Gruppa fungerte også bedre og bedre underveis, uten at det var noe problem i utgangspunktet. Det viste seg at vi utfylte hverandres kunnskaper og erfaringer ganske greit ved at gruppa bestod av medlemmer fra forskjellige studier. Det var enkelt å ha en åpen diskusjon selv om vi var uenige om det som ble diskutert, noe som bidro til en fri flyt av ideer. Stemninga var hele tiden god og fri for stress og frustrasjoner. Det kunne hende at man blei frustrert over noe man ikke fikk til, men da var det alltid en av de andre som hadde en god løsning på lager eller i hvert fall en ide til en løsning. Dermed viste det seg at samarbeidet ikke heller var noe problem og vi fungerte bra som en arbeidsgruppe. Jeg mener også at vi har hatt en rettferdig arbeidsfordeling hvis man tar hele prosessen i betraktning. Det var selvfølgelig perioder hvor noen hadde mer å gjøre enn andre, men dette blei jevnet ut etter hvert. Jeg er veldig fornøyd med alle sin innsats. Produktet som vi utviklet viste seg å være et mer omfattende og komplisert prosjekt enn vi i utgangspunktet hadde trodd. Vi lot oss ikke demotivere av den grunn og det endelige resultatet er jeg personlig veldig fornøyd med og jeg ser at de andre gruppemedlemmene også er det. Det er sikkert ting vi kunne gjort annerledes og andre løsninger som også kunne vært implementert, men det var det ikke mer tid til. Jeg er også rimelig sikker på at oppdragsgiver kommer til å være fornøyd med det produktet som vi leverer til dem, ikke minst på grunn av tilbakemeldingene vi har fått underveis. 103

104 Samarbeidet med Securitas har vært nærmest upåklagelig gjennom hele prosessen. De har vært imøtekommende og hjelpsomme i forhold til alle henvendelser vi har kommet med, så det har ikke vært noen kommunikasjonsproblemer. Vi er veldig takknemlige for at vi fikk muligheten til samarbeide med dem om dette prosjektet. 3.2 Konkusjon Valg av prosjekt og oppdragsgiver ble foretatt lenge før selve arbeidet med prosjektet ble satt i gang. Det ble vurdert flere forskjellige oppdragsgivere med hver sin type prosjekt. Det endelige valget falt på Securitas og oppgradering av infoportalen på deres intranettsider. Målene som ble satt ned i kravspesifikasjonene ble revidert underveis, med modifiseringer og noen forslag ble lagt til mens andre ble tatt vekk. De som ble tatt med i den endelige kravspesifikasjonen ble nesten alle oppnådd tilfredsstillende. Selve oppgraderingen av siden og bestillingssystemet med administratorside ble gjennomført uten problemer. Søkefunksjonen var et av målene som gruppa ikke er helt fornøyd med, ved at den ikke fungerer som det var ønsket at den skulle. Det har også vært små problemer underveis som har vært en kilde til frustrasjon. Under gjennomføringen av prosjektet ble det gjort mye og omfattende forarbeid for at prosessen skulle være dokumentert og at arbeidsoppgavene skulle være tydelige. Det ble utført en nøye analyse og kartlegging av den eksisterende infoportalen. Deretter ble det utviklet flere prototyper som ble diskutert og vurdert for å finne den mest optimale løsningen. Det ble også konsultert med oppdragsgiver på dette stadiet og underveis i utviklingsarbeidet. Det endelige produktet som var resultatet av Mer kommer 104

105 3.3 Referanser ( n.n.) Hentet fra: (4/ n.n ) Hentet fra: ( n.n) Hentet fra: (n.d., n.n) Hentet fra: 105

106 4 Vedlegg 4.1 Prosessrapport Forord Denne delen av rapporten tar seg for hvordan vi har gått fram i vår prosjekt Forarbeid Siden dette var det største prosjektet vi hadde gjennom vår tre år på Høgskolen i Oslo, så var det viktig for hele gruppen å starte så tidlig som mulig. Vi hadde noen problemer med startfasen hvor vi skulle opprette en gruppe, vi fikk med oss ei jente som sa hun var flink i programmering noe som senere viste seg å være feil. Det førte til at vi måtte kvitte oss med henne og søke nye gruppemedlemmer. Vi fikk med oss to nye studenter, og da var det bare å sette i gang med prosjektet. Securitas AS som er vår oppdragsgiver har vært kjempe hjelpsom med alt vi trengte. Hvorfor dette prosjektet: Da vi startet med dette prosjektet hadde vi tre forskjellige oppdragsgivere å velge mellom, så for oss var det viktig å velge et prosjekt som satt fokus på det vi har lært i vår studietiden og samtidig utvikle våre kunnskaper. Det var også viktig for oss å lage et produkt som kunne brukes og samtidig kunne utvikles videre av eieren av produktet. Det er derfor valget av oppdragsgiver falt hos Securitas As. Formålet med prosjektet: Formålet for dette prosjektet er å utvikle en webportal med web shop løsning for de ansatte i Securitas AS, denne portalen skal brukes av de ansatte for å lese nyheter, finne informasjon på bruk av utstyr som de ansatte bruke, de ansatte skal kunne handle på portalen. Denne portalen skal altså være tilgjengelig kun til de ansatte. Vi kan dele målene i følgene. - Intern webportal - Web shop løsning - Informasjon - Admin side - Søkefunksjon - CSS Switch 106

107 - Intern webportal En portal for de ansatte å følge med hva som skjer i bedriften, og finne all slags informasjon dem skulle trenge til enhver tid. Denne webportalen er selve siden som skal inneholde absolutt alt. - Web shop Webportalen skal inneholde en web shop løsning som de ansatte kan bruke til å kjøpe diverse ITutstyr. Denne webshopen er litt annerledes enn de normale vi er vant til. Først skal kunden velge hva han eller henne vil kjøpe, deretter fylle et bestillingsskjema, som ingen sendes til et annet system. Og det er fra det systemet skal avdelingslederen godkjenne bestillingen. og sende videre. Vi valgte å bruke denne løsningen fordi, det er kun avdelingsledere som kan gjøre bestillinger for de ansatte. - Informasjon Under flere møter med vår oppdragsgiver har vi fått beskjed om at de har ansatt en journalist som legger ut nyhetssaker og informasjon for Securitas, og det er derfor det var viktig at vi implementerte en av deres system i portalen. - Admin Vi har laget et Admin side for web shopen, slik at Admin har mulighet til å slette, endre eller legge til varer. - Søkefunksjon Vi har prøvd forskjellige søkefunksjoner til portalen, siden det var en av kravene fra vår oppdragsgiver. Vi har blant annet prøvd en gratis søkefunksjon fra google ( som vi syns var for dårlig i og med google sin søkefunksjon henter også å søke informasjon utenfor vår portal. Vi har også prøvd og å låne ferdig laget søkefunksjoner med alt vi har kommet over er ikke noe for oss. - CSS SWITCH 107

108 Vi bestemte oss for å føle den universale utforming i vår produkt av den grunn har vi valgt for å inkludere noe som heter CSS SWITCH, slik at de som har dårlig syn kan trykke på en knapp og få teksten større. Vi syns ikke det var en god ide og å utvikle en helt ny funksjon for det, så vi lånte en ferdig utviklet funksjon i java og tilpasset etter vårt ønske. Faglige bakgrunn: Gruppen består av fem studenter, hvor tre av dem går på anvendt datateknologi, og to resterende går på data informasjonsteknologi. Gruppen har hatt PHP, databaser, Java også videre. Alle disse fagfeltene kom i bruk i dette prosjektet. Siden vi alle hadde forståelse for det vi drev med kunne vi enkelt hjelpe hverandre om noen trengte hjelp. Roller: Vi hadde på forhånd bestemt oss på de diverse rollene innad gruppen. Det vil si en person har hovedansvar for en rolle for eksempel webmaster, og den personen fordelte oppgavene til de andre i gruppen. Slik at det ikke ble for mye jobb på en person. Vi har også nøye med at alle ble inkludert i prosjektet. De ulike rollene er følgene: - Gruppeleder Gruppelederen vår som er Adeel Khan hadde ansvar for hele prosjektet. Vi valgte han som gruppeleder fordi han har tidligere erfaring både fra skolen og arbeidslivet, så han viste hva det innebærer å lede en gruppe. Han var også vår kontakt person hos oppdragsgiver. - Rapport og kvalitetsansvarlig Rapport og kvalitetsansvarlig i gruppen vår er Mats Naustdal. Jobben hans gikk ut på å holde kvaliteten i rapporten høy. Han hadde også ansvar for å fordele hvem som skulle skrive hva ute ifra arbeidsplanen gruppen laget sammen. - Loggføring- og backup ansvarlig Nur Ahmed fikk ansvar for loggføring og backup ansvarlig. Et slikt ansvar innebærer å skrive møtereferater, legge ut nyheter på gruppesiden. Ta backup av alt gruppen jobber med. 108

109 - Programmeringsansvarlig Vår programmeringsansvarlig var Thomas Wiborg. Jobben hans var å fordele oppgavene som gjelder innenfor programmering i prosjektet. - Webmaster og programmerer Stig Ysterud hadde ansvar for å opprette en gruppeside med innloggings muligheter, siden skulle også ha en del funksjoner som for eksempel å legge ut nyheter. Han var også programmerer i prosjektet. NETTSIDE OG DAGBØKER Gruppesiden til prosjektet ble utviklet av vår webmaster for å holde alt av dokumentasjoner slik vi kunne ha alt av dokumenter samlet på et sted. Baktanken med gruppesiden var også å ha et sted vi sammen med vår veileder og oppdragsgiver kunne kommunisere ved hjelp av forum som krevde innlogging. Link til gruppesiden er; Det ble skrevd et møtereferat av hver møte for å kunne dokumentere hva vi har gjort til enhver tid. Disse møtereferatene har vært til svært nyttig for oss i gruppen når vi skulle fullføre skriving av den endelige rapporten. Risikoanalyse I de mange årene vi har studert i høgskolen i Oslo har vi hatt mange ulike prosjekter, det er av de prosjektene vi har lært at det er veldig lurt å utvikle en risikoanalyse, og av den grunn har vi opprette en risikoanalyse som tar for de forskjellige risikoene i prosjektet, alt fra fravær av gruppemedlemmer, mangel på fokus også videre. Kravspesifikasjon I startfasen av prosjektet var det viktig å ha en kravspesifikasjon slik vi i gruppen hadde noe å forholde oss til når vi skulle designe selve produktet. Denne kravspesifikasjonen ble utviklet i samarbeid med vår oppdragsgiver. Arbeidsplan 109

110 Gruppen har utviklet sammen en arbeidsplan som vi skulle prøve å forholde oss til under prosjektet. Det er alltid vanskelig å forholde seg til arbeidsplan for det kan alltid forekomme forandringer fra oppdragsgiver eller noen i gruppen. Men vi føler at vi har klart å forholde oss til mest mulig til arbeidsplanen, selv om det har kommet noen forespørsler fra oppdragsgiveren. Kartlegging Vi brukte mye tid på å kartlegge den eksisterende portalen til vår oppdragsgiver, slik vi hadde bedre bilde av hva slags forandring som måtte til for å forbedre selve siden. Før vi startet å kartlegge eksisterende portalen, hadde vi håpet at vi kunne bruke de eksisterende filene for å forberede portalen. Men det var så å si umulig å bruke disse filene på grunn av dårlig struktur på kilde kodene. Derfor har vi startet helt fra begynnelsen. Usecase Vi har laget flere usecaser i dette prosjektet, grunnen til det er fordi det var veldig viktig for oss når vi skulle utvikle portalen at, vi hadde en idé om hvordan vi skulle sette sammen portalen. Hvem siden som skulle koples sammen. Hvordan vi skulle gå videre til neste steg. Hvem tabell som hører sammen i databasen. Alle usecaser følger med rapporten. Arbeidsmetode I starten av dette prosjektet så har gruppen ikke valgt å bruke noen arbeidsmetoder, ettersom vi har forhold oss mye til prosjektplanen og fastedatoer. Arbeidsoppgavene var for delt i faste arbeidsområder. Vi så ikke noe vits i å bruke agile Scrum metoden siden startfasen handlet mest om innsamling av informasjon, og rapportskriving. I det vi kom lenger i prosjektet og var klar til å programmere brukte vi agile metoden, slik vi hadde noe resultat og forholde oss til fra uke til uke. Tips for Scrum-brukere Når prosessmetodikken ennå ikke er uttalt, er det forventet at Scrum-brukerne likevel vet hva de skal gjøre. Ikke bruk tid på å lage en perfekt metode, fordi utfordringene vil forandre seg fortløpende. Prøv i stedet noe ut, og se og lær hvordan det fungerer. Inspiser-og-tilpass mekanismene innebygd i Scrum vil veilede deg videre

111 Prototyper Før vi begynte å utvikle portalen sammen med webshopen, lagde vi prototyper. Slik vi hadde et produkt som vi kunne vise fram i et av møtene vi hadde med Securitas AS. Under møtene kunne de komme med forslags og endringer før de fikk ferdig produktet. Verktøy Vi har brukt en del forskjellige programvarer som vi fikk av høgskolen i Oslo. Programmene vi brukte er følgene. - FileZilla - Apache server - Word 2007/ Microsoft Expression 4 - PHP designer Firefox - Google Chrome - Internet Explorer Filezilla FileZilla er et FTP Client som ble brukt av gruppen for å overføre filer til FTP server som grunnen har tilgang til. Apache Server Apache server er en server vi gruppa disponerer, og den serveren ble brukt av gruppa for å opprette en gruppeside, vår produkt ble også brukt på den serveren for og teste på forskjellige datamaskiner, slik vi kunne for et klart bilde av hvordan forskjellige aspekter på portalen fungere på forskjellige datamaskiner som har forskjellige programvarer. Word 07/10 Office pakkene ble brukt for å skrive alle rapportene. Microsoft Expression 4 De fleste i gruppa brukte Microsoft Expression 4 for å programmere. 111

112 PHP Designer 07 De som ikke brukte Microsoft Expression brukte da PHP designer 07 for å programmere. Diverse nettlesere Vi brukte Firefox, google Chrome og Interner Explorer for å teste vår produkt, slik at vi kunne se hvordan kodene våre blir til på forskjellige nettlesere. med Det så mener vi oppløsningen av portalen, om ting skal være der det skal være i portalen, også videre. Design Securitas AS ville at den interne sin design skulle ligne på deres internasjonale siden, slik at ansatte følte seg hjemme når de besøkte portalen. Alle annet i designet fikk vi lov til å designe selv. Det kom også fram på et av møtene at de var fornøyd med den foreløpig designet. I designet har vi valgt å ha med følgene: - Intern CSS Grunnen til vi valgte å bruke CSS er fordi CSS tilbyr flere muligheter for å tilpasse utseendet slik vi ville ha det. Det er også mulig å legge til effekter som ikke er mulig å ha med i PHP. En av de største fordelene med vår intern CSS er at filen ligger utenfor selve PHP filene. På den grunn kan vi bruke CSS filen på flere sider og få lik design på sidene vi bruker CSS filen i. Dette gjør at sidene blir lastet ned raskere fordi det liger mindre informasjon i hver HTML fil. Det gjør også letter å redigere sidene. - PHP Vi bruker Hypertext preprocessor på alle sidene våre for å hente informasjon fra vår MYSQL server, ved bruk av kun HTML hadde vi ikke noe mulighet til å få informasjon fra MYSQL hentet. PHP blir også brukt for å lage en dynamisk portal. Den besøkende har altså ikke mulighet for å se hvordan vår kode er, kun se hva som er resultatet av den. Kort sagt: PHP brukes til de tingene som HTML ikke klarer. Godt eksempel på det er vår web shop løsning. - HTML Selv om vi bruker PHP som hovedprogram språk, har vi html i våre koder. Her er en lite kodesnutt som viser hvordan vi brukte HTML inn i PHP; 112

113 <?php echo "<html>"; echo "<head>"; echo "<title> SECURITAS AS </title>"; echo "</head>"; echo "<body>"; echo "<p>securitas AS</p>"; echo "</body>"; //en kommentar. echo "</html>";?> - Java Vi bruker Java for å få bilder i webshopen til å bli større når en peker på bildet med musa, vi bruker også java i søkefunksjonen og CSS Switch. - MYSQL MYSQL er en relasjons database. Enkelt forklart er MYSQL et sted hvor man lagrer informasjon i rader og sorterer via kolonner på en tabell, hvor det senere kan hentes ut igjen. Under portalen og webshopen har vi brukt MYSQL, slik at Admin delen kan legges til nye vare, endre vare eller slette vare. Og for at webportalen skal kunne hente informasjon når admin gjør noe. Som for eksempel slette vare. Prosess-sammendrag Under er det sammendrag av hvordan vi har jobbet med prosjektet fra start til slutt. Startfasen (ca. 179 dager) I startfasen gikk gruppa sammen for å utarbeide de diverse innleveringer som hovedprosjekt syret satt opp, men før det så måtte gruppen sette sammen et team som kunne jobbe med det. Når gruppen var klar satt vi i gang med å skrive litt om vår oppdragsgiver og litt om oss selv. Når det var gjort så tok vi oss en liten juleferie. Etter ferien gikk gruppen sammen for å skriver andre del av startfasen som var å skrive korte rapporter om hvordan vi hadde tenkt å fordele arbeidet, og hvordan vi skulle forhold oss til arbeidet vi skal fullføre. Det var også viktig å sette kravene i henhold til funksjonalitet som vår 113

114 oppdragsgiver hadde på plass, Vi satt også vår egne krav i forholden til funksjonalitet slikt at vi ikke kom bort i noe som kunne går ut arbeidsplanen vår. Alt dette skulle inkludere forprosjektrapporten. Når rapporten ble godkjent så gikk gruppa sammen for å skaffe seg mest mulig informasjon før vi begynt på innledningsfasen. Innledningsfasen (ca. 106 dager) I starten av denne fasen brukte vi mye tid på å analysere den eksisterende portalen som vi fikk av Securitas AS på den måten kunne vi få sett hvor så vidt hva vi kunne bruke av eksisterende portalen og hva vi ikke kunne bruke. Når analysen var det på plass satt vi i gang å lage prototyper til portalen, og prototyper til web shop løsningen. Etter det brukte vi tid på å analysere prototypene slik vi kunne skrive testrapport på det også. Det var viktig for oss i gruppen at alt av analyser på prototyper og eksisterende portalen var på plass før vi begynte med hovedfasen der vår produkt ble skapt. Arbeidsmetoden vi brukte er uke sprinter med hovedfokus på Scrum-metoden. Hver aspekt av prosjektet ble utviklet, testet og evaluert i en eller to ukers periode. Om det var enkel oppgave ble den evaluert en uke etter oppgaven ble fordelt. Om vi følte oppgaven trengte mer enn en uke for å bli utviklet ble den evaluert i to ukers iterasjoner. Her var det veldig viktig at gruppen jobbet etter planen slik at vi ikke hang etter arbeidsplanen vi har laget. Vi fokuserte også på å ligge litt foran skjema slik vi kunne få litt bedre tid til hoveddel som var å kode ferdig nettsiden og webshopen. Arbeidsflyten i Scrum er skissert nedenfor; Bildet er hentet fra; 114