Hovedprosjekt. Våren 2011 HO912A. Securitas IT portal. Sluttrapport. Mats Klingberg Naustdal. Stig Arild Ysterud

Transkript

1 Hovedprosjekt Våren 2011 HO912A Securitas IT portal Sluttrapport Adeel Yousaf Khan Mats Klingberg Naustdal Nur Mahamoud Ahmed Thomas Wiborg Stig Arild Ysterud s s s s s155483

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 Informasjonsportal 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 Arbeidsmetodikk Prototype Foreløpig oppsett av sidene Siden for IT-Utstyr Siden for datasystemer Siden for IT-Securitas Siden for FAQ Prototype rapport Innledning Dagens webshop Webshop Implementeringsfase og produktrapport CSS Definisjon

4 Hvorfor CSS Bruksområde CSS Switch HTML Definisjon Hvorfor HTML Bruksområde Mappestruktur PHP Definisjon Bruksområder Bestillingssystem Administratorside MySQL Definisjon Hvorfor MySQL Relasjonene i databasen MySQL database Søkefunksjon Test av produktet Test av layout Test av webshop Resultat Test av administratorsiden Resultat Test med forskjellig skjermoppløsninger Prosessammendrag og erfaringer Startfasen Innledningsfasen Arbeidsplan Prosjektdagbok og gruppehjemmeside Kravspesifikasjon Kartlegging og analyse Prototyper og use case

5 3.3 Hoveddel Koding og implementering Testing Avslutning Gruppeevaluering og erfaringer Gruppemedlem Gruppemedlem Gruppemedlem Gruppemedlem Gruppemedlem Konkusjon Referanser Vedlegg Brukerveiledning av administratorsiden Dokumenter tegnet for hånd Prosjektdagbok Kildekode

6 Forord Denne rapporten tar for seg planleggingen og utviklingen av en informasjonsportal med webshop for utsalg av IT-produkter internt i Securitas AS. 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 av hjemmeside, gruppearbeid og flere nye områder innenfor informasjonsteknologi. I tillegg har vi fått erfaringer med å jobbe som et team ved å utnytte hverandres ferdigheter og kunnskaper. 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ørsteamanuensis Ulf Uttersrud ved Høgskolen i Oslo for god veiledning med konkrete og konstruktive tilbakemeldinger under hele prosjektperioden. Gruppehjemmeside: 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 Klingberg 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 og er 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. (n.d., n.n.) 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 portalen, 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 under avsnitt De samme betingelsene for bestilling som gjelder i dag skal også gjelde for den nye løsningen. Det skal legges 8

9 inn en 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 eksisterende IT portal. Portalen har en informasjonsside 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å portalen. 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 ønske er at det utvikles en bedre løsning. Portalen 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 de samme programmeringsspråkene som den eksisterende portalen, 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 filene 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å scriptes 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 C# (ASP.NET) Funksjonelt Bedre enn eldre løsninger Google Ferdiglaget Tidsbesparende XML Lesbart Selvdokumenterende Omfattende kode Krevende Ikke fullstendig egenprodusert 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 fil ligger på de spesifikke filene. Dette vil føre til økt arbeidsmengde hvis man må redigere hver enkelt fil. Hadde det 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. Man 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 både arbeidsplan og fremdriftsplan. Det føres også logg over alle møtene med møtereferater. 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 _ 13

14 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 Prosessdokumentasjon 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 Klingberg Naustdal Nur M. Ahmed Thomas Wiborg Stig Arild Ysterud 16

17 1.2 Kravspesifikasjon Innledning Gruppa har fått i oppdrag av Securitas AS og forbedre deres interne nettside og prosjektet har fått navnet Sec etter Securitas AS. Dette er gruppas bachelor hovedprosjekt 2011 for Høgskolen i Oslo. Målet 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 deltidsjobb i IT-avdelingen. Her har han jobbet i over fem år. Dette gruppemedlemmet synes Securitas AS sitt interne nettsted var i særdeles dårlig stand og tok derfor kontakt med Geir Lapstuen angående en forbedring av deres informasjonsportal. 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 Informasjonsportal 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 generell informasjon om systemene. Noen av fordelene med omstruktureringen er mindre belasting på helpdesken, lettere å finne fram og lettere å forstå. Siden skal designes så universelt 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 som pris og bilder av produktene. Det blir en handlekurv som man legger alle varene i og før bestillingen kan sendes videre skal det foretas autentisering av den som bestiller. Bestillingssystemet sender en engangskode til 17

18 e-posten til brukeren og koden må tastes inn. Selve ordren sendes videre per e-post til IT avdelingen som legger det inn i sitt ordresystem Søkefunksjon Det skal være en mulighet til å finne informasjon på portalen. Det skal implementeres en søkefunksjon for 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, CSS, PHP, SQL og JavaScript. Database: MySQL Programvare: Microsoft Expression Web 4, Microsoft Office Word og Microsoft Project Professional Krav til brukerstøtte Det vil kun bli laget en brukermanual for administratorsiden. 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. 18

19 1.2.6 Designkrav Løsninger som blir utgitt skal være så brukervennlig som mulig. Det vil bli brukt en hovedside som går igjen 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 Bilde av use case diagram 19

20 1.2.8 Use case beskrivelse Use Case Aktør Pre betingelse Postbetingelse Hendelsesflyt Legg vare i handlekurv Bruker Bruker ønsker å legge vare i handlekurv Bruker legger til vare i handlekurv 1. Systemet gir brukeren mulighet til å legge til vare. 2. Bruker trykker på knappen "Legg til" om han ønsker å legge til vare Use Case Aktør Pre betingelse Postbetingelse Hendelsesflyt Fjern vare i handlekurv Bruker Bruker ønsker å fjerne vare Bruker fjerner vare fra handlekurv 1. Systemet gir brukeren mulighet til å fjerne vare fra handlekurv 2. Bruker huker av ønsket vare 3. Bruker trykker på knappen "Fjern" Use Case Aktør Pre betingelse Postbetingelse Hendelsesflyt Variasjoner Taster inn e-post Bruker Bruker må taste inn sin e-post Bruker taster inn sin e-post 1. Systemet gir brukeren 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 deretter trykket "Send" 20

21 Use Case Aktør Pre betingelse Postbetingelse Hendelsesflyt Variasjoner Use Case Aktør Pre betingelse 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 deretter 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 Pre betingelse 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 Pre betingelse 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 Pre betingelse Postbetingelse Hendelsesflyt Bestilling sendt Systemet Systemet ønsker å 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-avdeling Use Case Aktør Pre betingelse Postbetingelse Hendelsesflyt IT-avdeling IT-avdeling IT-avdeling avventer bestilling IT-avdeling mottar en bestilling 1. IT-avdeling mottar en bestilling 2. IT-avdeling godkjenner eller ikke-godkjenner bestillingen. 3. IT-avdeling sender ordrebekreftelse. Use Case Aktør Pre betingelse Postbetingelse Hendelsesflyt Send ordrebekreftelse IT-avdeling/Systemet IT-avdeling ønsker å sende en ordrebekreftelse IT-avdeling sender en ordrebekreftelse 1. Systemet sender ordrebekreftelse til bruker. 22

23 1.2.9 Sekvensdiagram Bilde av 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 standard 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 Under kartlegging av deres eksisterende systemer, ble det identifisert en del systemnavn som er ukjent for prosjektgruppa. Det ble valgt ikke å søke etter mer informasjon om systemene da de ikke påvirker eller har sammenheng med prosjektoppgaven. Systemene som blant annet er ukjente er GRS, GMS, SPS og en del andre 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 fra eksisterende side. 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 fra eksisterende side. 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 fra eksisterende side. 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 nødvendig 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 det 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 forenkle menyen ved at to elementer blir slått sammen til ett. Bilde av hovedmenyen, markert kategorien Regler du må kunne fra eksisterende side. 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 hvert 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 forenkle navigeringen og oppleves mindre komplisert for brukeren. Bilde fra en av systemmenyene, fra eksisterende side. 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 og ny meny er overflødig og all informasjonen kan heller 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, fra eksisterende side. 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, er forvirrende for brukeren og man kan dessuten ikke bestille noe under menyene for bestilling. En alternativ løsning er å ha en knapp for bestilling av alle typene utstyr og et eget system for bestilling. Det vil oppleves mye enklere for brukeren. 45

46 Bilde av en av bestillingssidene fra eksisterende side. 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, fra eksisterende side. 46

47 Flere av sidene mangler en tilbakeknapp, noe som burde være på hver side. De knappene som er der sender brukeren tilbake til hovedmenyen Konklusjon av analysen Menystrukturen for informasjonsportalen 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 Arbeidsmetodikk Arbeidsmetoden som vil bli brukt er uke sprinter med hovedfokus på Scrum-metoden. Denne metoden ble valgt fordi gruppemedlemmene hadde erfaring med denne metoden fra tidligere prosjekter. Metoden passer for fordeling av arbeidsoppgavene mellom gruppemedlemmene. Andre metoder som ble vurdert var blant annet fossefallsmetoden, men den er utdatert og passer ikke til dette prosjektet. Hvert aspekt av prosjektet vil bli utviklet, testet og evaluert i en eller to ukers perioder. En oppgave blir evaluert en uke etter oppgaven blir fordelt. Om oppgavene trenger mer enn en uke for å bli utviklet blir den evaluert i to ukers iterasjoner. Her er det veldig viktig at gruppen jobber etter planen slik at man ikke henger etter arbeidsplanen. Det vil bli fokusert på å ligge litt foran skjema slik at det blir mulig å få litt bedre tid til hoveddel som er å kode ferdig nettsiden og webshoppen. Arbeidsflyten i Scrum er skissert nedenfor. Bildet av metode. ( n.n.) 2.4 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. 48

49 2.4.2 Siden for IT-Utstyr Logo IT MENY Hjem System IT-Utstsyr 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 IT-Utstyr og i menyen kommer alternativene for de typene datautstyr som tilbys. Hvert av alternativene viser informasjon om det aktuelle utstyret i 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. 49

50 2.4.3 Siden for datasystemer Logo IT MENY Hjem System IT-Utstsyr 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 System og i menyen kommer alternativene for de typene datasystemer som Securitas bruker. Hvert av alternativene viser informasjon om det aktuelle systemet i ramma. 50

51 2.4.4 Siden for IT-Securitas Logo IT MENY Hjem System IT-Utstsyr 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. 51

52 2.4.5 Siden for FAQ Logo IT MENY Hjem System IT-Utstsyr 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. 52

53 2.5 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 ofte oppleves kaotisk 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. 53

54 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. Logo IT MENY Hjem System IT-Utstsyr IT Securitas FAQ PC Skrivere 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 54

55 2.6 Implementeringsfase og produktrapport 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 styles.css som skulle inneholde all kode for utsende og oppførsel på sida. CSS oppsett for ønsket layout ble funnet på internett. ( n.n.) 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. 55

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

57 CSS koden har mange flere selector enn det som er nevnt over. Hele koden består av 165 linjer som er vedlagt rapporten sammen med kildekoden. 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 57

58 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 58

59 #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å universelt 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. 59

60 CSS switch knapper for normal og større skrift ble tatt med. For å utvikle denne funksjonen ble det brukt et JavaScript som ble hentet fra internett og scriptet ble modifisert etter vårt behov og bruk. Funksjonen bytter mellom to CSS filer med forskjellige konfigurasjoner som heter styles.css og styles2.css. ( , Christopher Heng) 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 60

61 2.6.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 i utgangspunktet å 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 ble gruppa enig om å starte med blanke ark isteden Bruksområde Hovedsida for webportalen som gruppa 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. 61

62 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 62

63 2.6.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. 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 selector #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. Mappestrukturen ble videreutviklet ved at det ble brukt include for gjentagende deler av kode, som vil gjøre det enklere å videreutvikle systemet. Bilde av den endelige mappestrukturen 64

65 2.6.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.6.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 parameterne blir satt. Funksjon for å koble til databasen med feilmelding hvis det mislykkes. Funksjon for å velge hvilken database det skal kobles til med feilmelding hvis det mislykkes. Koden for å koble til databasen 66

67 Variabel med tilkobling til databasen settes. Det sjekkes om kobling mislykkes 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 mislykkes 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 SQL spø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 SQL spø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 for 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 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. 72

73 Bilde av informasjonsskjema ved bestilling Funksjon for å sende e-post til IT-avdeling med parameterne til, emne og melding. Kode for sending av e-post 73

74 Funksjon for å sende e-post til bruker med parameterne 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.6.7 Administratorside Det er 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, SQL spø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 SQL spørring settes. Variabel for utføring av SQL spørring settes. Det sjekkes at SQL spø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 SQL spørring settes. Variabel for utføring av SQL spørring settes. Det sjekkes at SQL spø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 SQL spørring settes. Variabel for utføring av SQL spørring settes. Det sjekkes at SQL spø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.6.8 MySQL Definisjon MySQL er et SQL-basert databaseadministrasjonssystem som er lisensiert under GPL. Denne databasetjeneren er veldig mye brukt, og er en vesentlig del av LAMP-systemer, hvor M-en står for nettopp MySQL. ( n.n.) 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. Valgte og bruke en database til webshopløsningen, var enkelt da det er en fin og oversiktelig metode for å utføre operasjoner mot varer som tilbys og ordre som kunder oppretter, og for at administrator enkelt kan gå inn og sjekke statusen over godkjente ordre Relasjonene i databasen Bilde av relasjonsdatabase 84

85 MySQL database Her er et utsnitt av slik vi designet databasen for webshopløsningen, og under følger en mer konkret beskrivelse. Ansattes ordre: Her opprettes en tabell for ordre. Når en person velger å kjøpe et produkt, blir det automatisk opprettet en ordre, som valgte varer blir koblet til. Dette for å identifisere hvilken kunde som bestiller hvilken varer. CREATE TABLE `secordre` ( `OrdreNr` int(11) NOT NULL auto_increment, `Kund ` varchar(30) NOT NULL, `ordredato` date NOT NULL, `godkjent` varchar(3) default NULL, PRIMARY KEY (`OrdreNr`) ) ENGINE=MyISAM Bilde av databasetabell Et mellomlager for påfylling av handlekurven: Her blir de valgte varene tilordnet riktig ordrenummer for bestiller. Totalantall og totalpris blir også regnet ut her, ut i fra Antall og PrisPrEnhet attributtene. CREATE TABLE `secordrelinje` ( `OrdreNr` int(11) NOT NULL, `VareNr` varchar(20) NOT NULL, `PrisPrEnhet` int(6) default NULL, `Antall` int(3) default NULL, PRIMARY KEY (`OrdreNr`,`VareNr`), KEY `VareNr` (`VareNr`) ) ENGINE=MyISAM Bilde av databasetabell 85

86 Produkter Securitas AS tilbyr: Her blir produkter lagt inn i databasen. Den satte kategorien viser hvilken meny produktet skal ligge under i webshoppen. CREATE TABLE `secvare` ( `VareNr` varchar(20) NOT NULL, `Tittel` varchar(30) NOT NULL, `Kategori` varchar(20) NOT NULL, `Beskrivelse` text, `Spec` text, `Link` varchar(30) NOT NULL, `Pris` int(5) NOT NULL, `Antall` int(6) default NULL, `Bilde1` varchar(30) NULL, PRIMARY KEY (`VareNr`) ) ENGINE=MyISAM Bilde av databasetabell 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 brukes det kun på FAQ siden for å teste funksjonen. Grunnen til dette er fordi at oppdragsgiveren ville ha en slik funksjon på FAQ siden. Det skal senere implementeres i alle sider som er under FAQ og denne søkefunksjonen søker kun gjennom den siden scriptet ligger i. Bildet under er kildekoden til søkefunksjonen, koden sjekker først hvilken nettleser brukeren har. Etter den har sjekket så kjører den enten Windows.find eller Trange.findtext, basert på hvilken nettleser brukeren bruker. Disse strengene fungerer som om en skulle trykke ctrl+f på tastaturet. 86

87 Bilde av søk Scriptet 87

88 2.7 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. 88

89 2.7.2 Test av webshop Onsdag hadde vi avtalt med Securitas om å vise vår foreløpig utviklede webportal. Vi koblet vår maskin opp mot en prosjektor og viste Geir Lapstuen og Monica Følstad Einan våre forslag til løsninger. Først viste og fortalte vi dem om endringene som var gjort i forhold til deres tidligere nettside. Etter en kort demonstrasjon 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. 89

90 Fra Hovedsiden skulle Geir bestille en bærbar Dell Latitude E 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 skulle Monica lese gjennom IT-håndbok Sikkerhet 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 Fra Hovedsiden skulle Geir fortsett å sjekke ut bestillingen som ble gjort på bærbar Dell Latitude E

91 1. Geir gikk tilbake inn på It-Utstyr og trykket på Bærbar 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. 91

92 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 92

93 Bilde av Faktureringsinfo Resultat Etter en liten testrunde fikk Geir og Monica mulighet til og leke seg litt rundt på egenhånd. De var svært fornøyde 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 Les mer link som gav mer produktinformasjon om produktet som de selv kunne skrive og redigere. Et alfabetisk oppsett av hyperlinkene var også ønskelig. 93