Ressourcekatalog. Christian Glantz. Kongens Lyngby 2010 IMM-B.Eng-2010-25

Ressourcekatalog Christian Glantz Kongens Lyngby 2010 IMM-B.Eng-2010-25

Technical University of Denmark Informatics and Mathematical Modelling Building 321, DK-2800 Kongens Lyngby, Denmark Phone +45 45253351, Fax +45 45882673 reception@imm.dtu.dk www.imm.dtu.dk IMM-B.Eng-2010-25

Summary Webtop A/S has developed a Content Management System for producing and maintaining websites. In order to make it easy for the users of this system to use different resources on the website, need for development of a resource catalogue arises. Users can upload files to this catalogue and sort them into relevant folders in order to create an overview of all resources, used on the website. To obtain this, an analysis of all functional demands and technologies available, is needed. A resource catalogue is designed and implemented as a result of this analysis.

ii

Resumé Webtop A/S har udviklet et Content Management System til at fremstille og vedligeholde hjemmesider. For at gøre det nemmest for brugerne af dette system at bruge forskellige ressourcer på hjemmesiden, er der brug for udvikling af et ressourcekatalog. I dette katalog kan brugere lægge filer op og sortere dem i mapper for at skabe et overblik over alle ressourcer som bruges på hjemmesiden. Til dette skal der laves analyse af funktionelle krav, samt analyse af teknologier, der kan udfylde disse krav. På baggrund af analysen er der designet og implementeret et ressource katalog.

iv

Indhold Summary Resumé i iii 1 Introduktion 1 1.1 Om firmaet, Weptop......................... 1 1.1.1 WebtopOne.......................... 1 1.2 Den eksisterende løsning....................... 2 1.3 Formål................................. 3 1.4 Problemformulering.......................... 3 1.5 Udviklingsproces............................ 4 1.5.1 Tidsplan............................ 4 1.6 Rapportskitse............................. 4 2 Analyse 7 2.1 Teknologi............................... 7 2.1.1 ASP.Net............................ 7 2.1.1.1 Web Forms..................... 8 2.1.1.2 MVC........................ 10 2.1.1.3 LINQ........................ 12 2.1.2 JQuery............................. 12 2.2 Kravspecifikation........................... 13 2.2.1 Brugergrænseflade....................... 14 2.2.2 Database............................ 14 2.2.3 Funktionsliste......................... 14 2.2.3.1 Administrator funktioner.............. 14 2.2.3.2 Brugerfunktioner.................. 18

vi INDHOLD 3 Design 19 3.1 Brugergrænseflade........................... 19 3.1.1 Administratormenu...................... 19 3.1.2 Folderliste........................... 20 3.1.3 Visning af folder........................ 21 3.1.4 Ressourceinformation..................... 22 3.1.5 JQuery............................. 22 3.2 Funktionslaget............................. 22 3.2.1 Routing............................ 23 3.2.2 Controllers........................... 23 3.3 Datalaget............................... 24 4 Implementering 27 4.1 Det nye ressourcekatalog....................... 27 4.2 Folderliste............................... 28 4.3 Foldervisning.............................. 29 4.4 Upload af ressource.......................... 30 4.5 Database kommunikation....................... 32 5 Test 35 5.1 CatalogController........................... 35 5.2 ResourceController........................... 35 5.3 AdminController............................ 35 6 Konklusion 39 A Sekvensdiagrammer 41 B Kildekode 55

Kapitel 1 Introduktion I kapitel 1 beskrives hvilken motivation der har ført til projektet, samt en problemformulering til projektet. Derudover vil virksomheden, som projektet laves til, blive beskrevet. 1.1 Om firmaet, Weptop Webtop leverer hjemmesider til internet, intranet samt extranet til større virksomheder eller kommuner. Størstedelen af alle løsninger indeholder specialdesignede komponenter til kunden for at give optimalt udbytte af siden. 1.1.1 WebtopOne WebtopONE er et Content Management System (CMS) udviklet af Webtop i år 2001. I dette system kan virksomheder lave deres egen hjemmeside/intranet og holde dette opdateret, desuden kan der indsættes specielle komponenter med forskellig funktionalitet som at hente data fra Outlook og vise nyheder fra en hjemmeside. En standard installation af WebtopONE vil gøre brugere i stand til at fremstille

2 Introduktion hjemmesider og opdatere disse. Ligesom der vil være mulighed for at udvide med komponenter, fx: MediaPresenter - indeholder komponenter til at vise mediefiler som video og billeder SQLConnector - giver mulighed for at hente data direkte fra en database WebForms - en komponent til at lave input forme til fx email sender WebtopONE er kodet i ASP.Net som afvikles på en IIS server og bruger en MS SQL Server som data backend. 1.2 Den eksisterende løsning Til styring af billeder i WebtopOne er der lavet et ressourcekatalog, hvori en administrator kan uploade alle slags filer. Når en fil lægges ind i ressourcekataloget, kan den bruges i selve CMS systemet, men den tilgås gennem ressourcekataloget. Ressourcekatalogets fordel er, at billeder der bruges, kan skaleres i dimensioner, hvilket giver en mindre filstørrelse. Dette medfører en hurtigere load-tid for en besøgende på hjemmesiden. Derudover er det simpelt for en administrator at have overblik over alle ressourcer. Til WebtopOne er der også et ressource katalog, hvori en administrator kan uploade og styre alle billeder på hjemmesiden. Denne løsning er lavet i ASP.Net vha. Web Forms og en to lags model. Resourcekataloget er delt op i to dele, én administratordel, hvor folk med tilladelse kan gå ind og uploade nye billeder samt redigere de eksisterende. Derudover er der en brugerdel hvor det er muligt at bruge ressourcerne ved fx at få et billede i en bestemt størrelse eller at få alle billeder fra en mappe. Disse muligheder bliver brugt af komponenter i WebtopONE til at vise billeder på hjemmesiden. Når en administrator uploader en ny fil til en mappe i ressourcekataloget, bliver det først oprettet i en database, hvor alle filinformationer som størrelse, filtype og navn bliver gemt. Derefter bliver det gemt med et unikt filnavn på serveren. For at bruge en ressource bliver der lavet et kald til webserveren, som beder om resourcen med et bestemt id og eventuelt en bestemt billedstørrelse, der skal returneres. Webserveren finder filen, og i tilfælde af, at det er et billede, skaleres det til den ønskede størrelse, hvorefter det bliver vist.

1.3 Formål 3 Figur 1.1: Billede af eksisterende løsning 1.3 Formål Formålet med dette projekt er at udvikle et nyt billedhåndteringsmodul til Webtops CMS system til styring af billeder. Til dette skal det undersøges, hvilke fordele en tre-lags opbygning af ressource kataloget vil have i forhold til den nuværende to-lags. 1.4 Problemformulering Det ønskes desuden at undersøge hvilken ASP.Net teknologi der gør sig bedst egnet til dette system, idét systemet ønskes udviklet i enten ASP.Net vha. Web Forms eller ASP.Net MVC Der skal laves en funktionsliste ud fra det nuværende system, der indeholder de funktionaliteter som skal være i det nye resource katalog. Denne funktionsliste skal ligge til baggrund for valget mellem ASP.Net (Web Forms) og ASP.Net MVC, som systemet skal udvikles i. Ud fra funktionslisten laves use cases til beskrivelse af hver funktionalitet. Disse funktioner skal implementeres og fungere i en ny brugergrænseflade, der skal konstrueres. Efter implementering skal alle funktionaliteter testes for at kontrollere, at de virker efter hensigten.

4 Introduktion 1.5 Udviklingsproces Procesudvikling af systemet vil foregå efter Unified Process 4 faser: Inception: En kort fase, hvis formål er at finde de centrale dele til systemet. Elaboration: Alle krav til systemet fastlægges, og der skabes overblik over disse, og systemarkitekturen bliver fastlagt Den længste fase, hvor systemet udvikles, testes og doku- Construction: menteres. Transition: Sidste fase, der sætter produktet i drift hos kunden. (Denne fase vil ikke blive omhandlet i projektet) 1.5.1 Tidsplan Til projektet er der afsat 20 uger med startdato d. 01.03.2010 og slutdato d. 09.07.2010. Analyse - 3 uger Design - 3 uger Implementation - 11 uger Test - Vil blive foretaget løbende under implementation Dokumentation - 3 uger, men skal samtidig forgå løbende alle 20 uger. 1.6 Rapportskitse Opbygning af rapport: Kapitel 1: Introduktion Generel introduktion omkring projektet, udviklingsproces, tidsplan samt formålet med projektet. Kapitel 2: Analyse Gennemgang af de teknologier der kan bruges samt beskrivelse af fordele og ulemper

1.6 Rapportskitse 5 ved brug af disse. Der laves en problemformulering til projektet. Kapitel 3: Design Gennemgang af hvorledes arkitekturen skal bygges op efter tre-lags modellen. Kapitel 4: Implementering Forklaring af vigtige dele som er implementeret i det nye ressourcekatalog. Kapitel 5: Test Afsnit hvor test af kode bliver gennemgået. Kapitel 6: Konklusion Beskrivelse af hvad projektet er kommet frem til, samt hvilke fremtidige planer der er for projektet.

6 Introduktion

Kapitel 2 Analyse Analyseafsnittet redegør for hvilke teknikker der kan bruges, udviklingsproces, tidsplan samt rapportopbygning. 2.1 Teknologi I det følgende afsnit vil der blive redegjort for, hvilke teknologier, der kan bruges til udvikling af ressourcekataloget. Fordele og ulemper ved de forskellige teknologier gennemgås. 2.1.1 ASP.Net ASP.Net er en del af Microsofts.Net platform, der bruges til at skabe interaktive og dynamiske hjemmesider, web applikationer og web services. ASP.Net giver udvikleren mulighed for at programmere hjemmesider med alle programmeringssprog som.net

8 Analyse platformens CLR 1 understøtter (50+). ASP.Net blev introduceret i 2002 sammen med.net Framework 1.0 og giver udvikleren mulighed for at programmere objektorienteret. ASP.Net giver ligeledes god ydelse, da koden bliver kompileret til en dll fil. ASP.Net kører på Microsofts Internet Information Service server version 6 eller senere og kræver.net frameworket installeret, seneste version er 4.0 udkommet i April 2010. Microsoft Visual Studio understøtter udvikling i ASP.Net med mange indbyggede skabeloner samt mange drag and drop funktioner til HTML, validering og datavisning. 2.1.1.1 Web Forms Web Forms som er Microsoft første framework til ASP.Net platformen udkom samtidig med ASP.Net i 2002 og var på den tid eneste framework til platformen, hvilket har gjort, at mange omtaler Web Forms som ASP.Net. Web Forms kræver en Internet Information Service (IIS) server version 6 eller senere for at kunne køre. Formålet med Web Forms er at opnå et højere abstraktionsniveau samt at gøre hjemmesider mere event-drevne. Dette betyder, at udvikleren i mindre grad skal fokusere på selve HTML koden men istedet kan bruge de indbyggede server controls til at hente, behandle og fremvise data. En side i Web Forms består af en.aspx side, som indeholder HTML koderne, og en.aspx.cs kaldet en code-behind, som står for alt det funktionelle på siden. Ved kørsel bliver code-behind filerne kompileret til.dll filer, hvilket gør kørselstiden hurtigere i forhold til script baserede programmeringssprog. Når der kommer et kald til webserveren efter en fil, bliver det sendt videre til den fysiske.aspx fil, som bliver kørt. Kommer der et request til webserveren, bliver dette request sendt videre til den efterspurgte aspx fil, der så vil eksekvere den rette kode i dens dll fil. Et problem ved normal webudvikling er at selve HTTP protokollen er tilstandsløs, hvilket betyder at webserveren ikke ved hvilken tilstand brugeren er i. I mange tilfælde vil der ved brug af Web Forms være brug for kommunikation mellem webserver og klient, fx ved et tryk på en knap, hvilket skaber et postback til webserveren. 1 Common Language Runtime - Platformsuafhængigt miljø der kan køre højniveauprogrammeringssprog på computere uanset hardware.

2.1 Teknologi 9 Figur 2.1: Forespørgsel af fil med Web Forms Eksempel. aspx : <asp : Label runat =" server " ID=" lblmessage " Text =" Velkommen " ></ asp : Label > <br /> <asp : Button runat =" server " Text =" Skift tekst " ID=" btnsubmit " onclick =" btnsubmit_click " ></ asp : Button > <br /> <asp : Button ID=" Button1 " runat =" server " Text =" Tomt Postback " ></ asp : Button > Eksempel. aspx.cs: protected void btnsubmit_ Click ( object sender, EventArgs e) { lblmessage. Text = "Ny tekst!"; } Figur 2.2: Eksempel på ViewState Svaret fra webserveren er en helt ny HTML side. Dette medfører at man fx ved et spørgeskema vil opleve, at afkrydsninger vil forsvinde hvis der sker et postback. For at imødegå dette har Web Forms introduceret et ViewState, som er sidens fuldstændige tilstand gemt i en kode som webserveren kan aflæse ved et postback og dernæst, foretage de ændringer eventet skulle og efterfølgende sende en fuldt opdateret side tilbage til klienten. Fordele ved Web Forms Separerer HTML fra kode Hurtigt at udvikle i med drag-and-drop funktioner og indbyggede server controls God til store sider pga. højt abstraktionsniveau Mulighed for at kode i mange programmeringssprog Let dataadgang med databinders

10 Analyse ViewState giver mulighed for at gemme tilstande Ulemper ved Web Forms Svært at lave automatiserede test Ikke optimal performance pga. højt abstraktionsniveau 2.1.1.2 MVC ASP.Net MVC Frameworket er Microsofts nyeste framework til at skabe web applikationer på.net platformen. MVC udkom med ASP.Net version 3.5, mens MVC 2 udkom med ASP.Net version 4.0. ASP.Net MVC er, som navnet antyder, baseret på Model-View-Controller mønstret, som opdeler de forskellige aspekter af en webside i 3 dele: Model: Modellen indeholder al den logik, som ikke er i View eller Controlleren. Dette omfatter validering, forretningslogik samt dataadgang til databasen. Modellen repræsenterer objekter i selve web applikationen som fx en ressource i et ressourcekatalog. Et eksempel på en model kunne være et produkt, som indeholder navn, pris og antal på lager. Controller: Controllerens opgave er at håndtere indput fra brugeren, modtage data fra modellen, manipulere disse data og udvælge det view der skal vises. Controller er dermed primært brugt til at være bindeled mellem model og view. View: Sørger for brugergrænsefladen hvor den indsætter data modtaget fra controlleren i HTML koden som sendes til brugeren. Et View sørger dermed kun for det visuelle og indeholder så lidt logik som muligt. En af de store ændringer i ASP.Net MVC er dens måde at route på. En normal webside henviser til en fysisk fil på harddisken fx /Index.aspx, mens MVC har en standard URL opbygning, der hedder www.domæne.dk/controller/action/id, hvor controller er navnet på den controller, der skal bruges, og action er den funktion i controlleren, der skal kaldes, og id er en værdi der skal sendes med til funktionen. Dette kaldes routing og kan ændres til at se ud, som udvikleren ønsker. Routing bruges til at skabe forklarende links og til at lave søgemaskinevenlige links. I mange netbutikker ser et link meget neutralt ud fx

2.1 Teknologi 11 www.netbutik.dk/produkter.aspx?id=197 der så henviser til et netkabel. Ved brug af routing kunne linket istedet være www.netbutik.dk/produkter/netkabel-4m, hvilket er et meget mere forklarende link. Figur 2.3: Forespørgsel af fil med MVC Da ASP.Net er opdelt i Model-Controller-View, fokuserer denne opbygning på at udvikleren udvikler efter tre-lagsmodellen, hvilket gør udskiftning af forskellige moduler simpel. Hvis man ønsker at skifte en MSSQL database ud med en MYSQL database vil man kun skulle ændre i selve Modellen, og hvis man ønsker at skifte design på siden skal der kun ændres i Viewsne. Fordele ved MVC Egner sig godt til Test-Driven-Development, da alle aspekter er testbare Ideel til web 2.0 sider Mulighed for at kode i mange programmeringssprog Fuld kontrol over HTML koden Søgemaskine venlige URLer Ulemper ved MVC HTML bliver blandet med kode, hvilket kan gøre overblik svært Forholdsvis nyt framework, hvilket betyder, at der stadig kan findes småfejl samt at mere avancerede opgaver ikke er blevet implementeret endnu.

12 Analyse // Constructor til produkt public Product ( string name, int price, int quantity ) public IEnumerable < Product > ProductsInStock () { // Opretter produkt liste List < Product > products = new List < Product >() ; products. Add ( new Product (" Product 1", 100, 1)); products. Add ( new Product (" Product 2", 200, 0)); products. Add ( new Product (" Product 3", 300, 3)); } // Returnerer produkter på lager vha. LINQ return from p in products where p. quantity > 0 select p; Figur 2.4: Eksempel på LINQ forespørgsel 2.1.1.3 LINQ Language Integrated Query (LINQ) er et forespørgselssprog der blev introduceret med ASP.Net 3.5 frameworket, der indfører indbyggede forespørgsler efter data til.net programmeringssprog. LINQ gør det mulig for udvikleren at lave forespørgsler i forskellige datatyper i programmeringssproget. Dette gør, at der simpelt kan trækkes data ud af objekter, XML filer samt SQL databaser. LINQ giver muligheder for at lave forespørgsler i typestærke collections opbygget af enten egne eller de indbyggede.net datatyper. At LINQ kan lave forespørgsler i typestærke collections samtidig med at LINQ altid bruger parametre i SQL forespørgsler medfører at LINQ er sikret mod SQL injections. 2.1.2 JQuery JQuery er et Javascript bibliotek, som gør det simpelt at udvikle til klientside. Grunden til dette er, at den tilbyder simple genveje til at finde elementer i HTML koden, ligesom den giver let adgang til at lave asynkrone opdateringer af indhold på en side, hvilket er meget udbredt i web 2.0 løsninger. Derudover findes der mange plugins til JQuery som gør det ekstra simpelt at bruge

2.2 Kravspecifikation 13 <input type =" button " id=" button1 " text =" Klik på mig " onclick =" javascript : document. getelementbyid ( btntext ). innerhtml = Du har klikket på knappen ;" /> <span id=" btntext " ></span > Figur 2.5: Eksempel uden JQuery JQuery : $( document ). ready ( function (){ // Udfører først koden når HTML er hentet så det sikres at alle HTML elementer eksisterer når koden køres // $( input ) henter elementer der passer med input $( # button1 ). click ( function (){ $( # btntext ). html ( Du har klikket på knappen ); }); }); HTML <input type =" button " id=" button1 " text =" Klik på mig " /> <span id=" btntext " ></span > Figur 2.6: Eksempel med JQuery javascript. JQuery giver udvikleren den fordel, at HTML kode og Javascript kode kan blive totalt separeret i to forskellige filer, hvilket i mange tilfælde gør HTML koden meget lettere at overskue. I nedenstående eksempel ses forskellen mellem ren Javascript og en blanding af JQuery og javascript. 2.2 Kravspecifikation Kravspecifikationen er lavet ud fra det nuværende system for at fastsætte specifikationerne til det nye ressourcekatalog.

14 Analyse 2.2.1 Brugergrænseflade Den nuværende opbygning af brugergrænsefladen er baseret på frames, hvilket betyder at siden er delt op i 4 html sider, som vises i et samlet vindue. Ideen med denne opbygning skal bevares, men der er nye teknologier, som er mere effektive til at lave dette, fx Asynkron opdatering vha. Javascript (AJAX), hvilket også vil få siden til at loade lidt hurtigere. Ellers vil det generelle design af siden blive meget lig det nuværende. 2.2.2 Database Ressourcekatalog skal være kompatibelt med det nuværende system. Databasen skal derfor kun ændres i tilfælde af en kritisk fejl. Den nuværende løsning bruger en MSSQL 2005 database eller nyere 2.2.3 Funktionsliste Funktionslisten er delt op i to kategorier, hvor den ene er funktioner til administratorer, som kun administratorer skal kunne tilgå. Derudover er der bruger funktioner, som alle kan tilgå. Dette vil for det meste foregå vha. komponenter i WebtopONE, som bruger disse funktioner. 2.2.3.1 Administrator funktioner Usecase: Opret mappe Aktør: Administrator Pre-kondition: Administrator er af systemet godkendt og identificeret som administrator Post-kondition: Mappen bliver oprettet i databasen med korrekt navn i rodmappen Flow: 1. Administrator indtaster det ønskede mappenavn 2. Systemet opretter mappen i databasen Usecase: Vis mappe Aktør: Administrator

2.2 Kravspecifikation 15 Pre-kondition: Administrator er af systemet godkendt og identificeret som administrator Post-kondition: Indholdet af mappen bliver vist til administrator Flow: 1. Systemet henter alle ressourcer i valgte folder 2. Systemet viser alle ressourcer til administratoren Usecase: Omdøb mappe Aktør: Administrator Pre-kondition: Administrator er af systemet godkendt og identificeret som administrator Post-kondition: Den valgte mappes navn bliver korrekt ændret Flow: 1. Administrator indtaster nyt mappenavn 2. Systemet opdaterer mappenavnet i databasen Usecase: Flyt mappe Aktør: Administrator Pre-kondition: Administrator er af systemet godkendt og identificeret som administrator Post-kondition: Den valgte mappe bliver flyttet til den ønskede mappe Flow: 1. Administrator højreklikker på destinationsmappen og vælger Indsæt mappe 2. Systemet kontrollerer om destinationsmappen er en undermappe til mappen, der skal flyttes 3. Systemet flytter mappen, hvis det ikke er en undermappe 4. Systemet opdaterer databasen Usecase: Slet mappe Aktør: Administrator Pre-kondition: Administrator er af systemet godkendt og identificeret som administrator Post-kondition: Den valgte mappe bliver slettet Flow: 1. Administrator godkender sletning af mappe

16 Analyse 2. Systemet sletter alle ressourcer og undermapper fra mappen 3. Systemet sletter mappen Usecase: Upload ressource til mappe Aktør: Administrator Pre-kondition: Administrator er af systemet godkendt og identificeret som administrator Post-kondition: Ressourcen bliver uploadet og lagt i den valgte mappe Flow: 1. Administrator vælger ressource, der skal uploades 2. Systemet opretter en ny ressource i databasen 3. Systemet henter ressourcen og gemmer den i ressourcemappen med ressource id som navn 4. Systemet tilføjer ressourcen til den valgte mappe Usecase: Flyt ressourcer Aktør: Administrator Pre-kondition: Administrator er af systemet godkendt og identificeret som administrator Administrator er inde i Vis mappe Administrator har markeret en eller flere ressourcer Post-kondition: De markerede ressourcer bliver flyttet til ønskede mappe Flow: 1. Administrator vælger den mappe, der skal flyttes til 2. Systemet flytter de valgte ressourcer til ny mappe 3. Systemet opdaterer de valgte ressourcer i databasen Usecase: Slet ressourcer Aktør: Administrator Pre-kondition: Administrator er af systemet godkendt og identificeret som administrator Administrator er inde i Vis mappe Administrator har markeret en eller flere ressourcer Post-kondition: De markerede ressourcer bliver slettet Flow: 1. Administrator godkender sletning af ressourcer

2.2 Kravspecifikation 17 2. Systemet sletter de markede ressourcer og sletter dem fra databasen Usecase:Rediger ressource Aktør: Administrator Pre-kondition: Administrator er af systemet godkendt og identificeret som administrator Administrator er inde i Vis mappe Administrator har markeret en ressource Post-kondition: Den markerede ressources informationer bliver opdateret Flow: 1. Administrator opdaterer informationer omkring ressourcen 2. Systemet opdaterer ressourcen i databasen Usecase:Eksporter ressourcer Aktør: Administrator Pre-kondition: Administrator er af systemet godkendt og identificeret som administrator Post-kondition:Administrator får en XML fil, der kan genskabe data fra databasen samt en zip fil med alle ressourcer fra ressourcekataloget Flow: 1. Systemet finder alle mapper og ressourcer 2. Systemet gemmer alle informationerne i en xml fil 3. Systemet henter alle ressourcer og gemmer dem i en zip fil 4. Systemet returnerer xml og Zip fil til administrator i en samlet zip fil Usecase: Importer ressourcer Aktør: Administrator Pre-kondition: Administrator er af systemet godkendt og identificeret som administrator Administrator har angivet en.zip fil, der indeholder en XML fil med informationer om ressourcer og mapper, samt en zip fil med alle ressourcer fra ressourcekataloget Post-kondition: Alle mapper, kategorier og ressourcer bliver korrekt sat ind i ressourcekataloget Flow: 1. Systemet opretter alle mapper og undermapper samt kategorier i databasen 2. Systemet opretter alle ressourcer i databasen 3. Systemet lægger alle billeder fra zip filen ind i billedmappen

18 Analyse 2.2.3.2 Brugerfunktioner Usecase: Hent ressource Aktør: Bruger Pre-kondition: Ingen Post-kondition: Brugeren får vist ressourcen Flow: 1. Systemet henter ressourcen i databasen 2. Systemet viser ressourcen til brugeren Usecase: Hent billede i bestemt størrelse Aktør: Bruger Pre-kondition: Brugeren har valgt et billede som ressource samt en bredde og højde på billedet Post-kondition: Brugeren får vist billedet Flow: 1. Systemet henter ressourcen i databasen 2. Systemet skalerer billedet til ønsket størrelse 3. Systemet viser ressourcen til brugeren Usecase: Download ressourcer Aktør: Bruger Pre-kondition: Bruger har trykket på download knap til en eller flere ressourcer Post-kondition: Ressourcer bliver pakket i en.zip fil og returneret til administrator Flow: 1. Systemet pakker de markerede ressourcer i en.zip fil 2. Systemet returnerer filen til brugeren

Kapitel 3 Design I det følgende afsnit vil der blive redegjort hvorledes arkitekturen skal bygges op efter tre-lags modellen, hvor brugergrænsefladen vil være i form af aspx filer, som står for den grafiske præsentation. Funktionslaget vil være lavet i ASP.Net MVC, mens datalaget vil stå for kommunikation med databasen. 3.1 Brugergrænseflade Formålet med brugergrænsefladen er, at brugeren så simpelt og intuitivt som muligt kan tilgå alle funktioner. Designet vil blive delt op i fire områder, og disse områder vil have hver deres funktion. 3.1.1 Administratormenu Administrator menuen vil komme til at indeholde links til to funktioner: importer og eksporter. Da to funktioner simpelt kan henvises til med to knapper, bliver dette løsningen.

20 Design Figur 3.1: Opbygning af design 3.1.2 Folderliste Formålet med folderlisteområdet er at give et overblik over alle mapper i ressourcekataloget og skal virke som en stifinder i Windows. Det skal derfor være muligt at få vist alle undermapper samt folde visningen sammen igen. Dette kan enten gøres ved at finde samtlige mapper ved start eller ved at hente dem efterhånden, som der bliver udvidet. Da ressourcekataloget kan blive stort og indeholde flere hundrede mapper, er det en fordel, hvis det bliver hentet i takt med, at undermapperne udforskes. Derfor vil folder visningen blive hentet med asynkrone forespørgsler med javascript (AJAX). Figur 3.2: Opbygning af design Ved klik på et plus ikon skal folderstrukturen blive udvidet, mens et klik på minus ikonet vil indskrænke det igen. I tilfælde af, at der ingen undermapper er, skal der ikke vises et +/- ikon. Ved klik på folderikonet eller mappenavnet, skal indholdet af folderen hentes og blive vist i området Visning af folder. Ved højreklik på samme område, skal der

3.1 Brugergrænseflade 21 fremkomme en menu, som tilbyder funktionerne: Opret mappe Flyt mappe Indsæt mappe (kun hvis en mappe er under flytning) Indsæt ressource (Kun hvis en eller flere ressourcer er under flytning) Omdøb mappe Slet mappe Upload ressource til mappe 3.1.3 Visning af folder I dette område skal indhold af en folder blive vist i form af små miniaturebilleder. Hvis en ressource er et billede, skal dette hentes i en skaleret version, ellers skal der vises et logo, så brugeren ved, at ressourcen ikke er et billede. Det skal være muligt for administrator at klikke på en ressource, hvorefter alle informationer omkring filen vises i Ressourceinformation. Administrator skal kunne markere flere ressourcer. Ved at holde CTRL tasten nede skal der kunne tilføjes/fjernes markeringen af en enkelt ressource. Ved at holde SHIFT tasten nede skal alle ressourcer mellem den sidst markerede og den, der bliver klikket på, markeres. Ved højreklik på en eller flere ressourcer skal der komme en menu frem som tilbyder funktionerne: Download ressource(r) Flyt ressource(r) Slet ressource(r) Området skal også vise de sider der er brug for når administrator skal oprette en ny mappe, flytte en mappe, omdøbe en mappe og godkende sletning af en mappe.

22 Design 3.1.4 Ressourceinformation I dette område skal der stå informationer om en markeret ressource, samtidig med, at det skal være muligt at ændre disse informationer, og gemme dem. Ved sletning af en eller flere ressourcer skal administrator godkende sletningen i dette område, således at det stadig er muligt at navigere rundt i foldere og ressourcer. Når administrator vil uploade en ny ressource, skal dette foregå i dette område, hvor han skal have mulighed for at vælge en fil på sin computer, som skal lægges ind i ressourcekataloget. Når filen er lagt op, skal folderen opdateres således at det nye billede bliver vist, og adminstrator skal have mulighed for at lægge en ny ressource op. 3.1.5 JQuery JQuery har som formall at indlæse indhold til Foldervisning, Visning af folder og Ressource information og holde dem opdaterede vha. AJAX. I folderliste og visning af folder skal begge vise en menu, når der højreklikkes. Disse vil simpelt kunne laves med et JQuery plugin, som er bygget til at lave disse menuer. 3.2 Funktionslaget Funktionslaget vil blive kodet i ASP.Net MVC, da fordelene ved dette framework var størst til dette projekt. Det skyldes, at det primære fokus på dette ressourcekatalog ligger i at gøre det overskueligt, have hurtig loadtider. For at skabe overblik over alle funktioner, der skal laves er hver funktion i funktionslisten blevet udvidet med et sekvensdiagram. Disse kan findes i appendix A. Nedenstående tabel er en samling af alle funktioner, samt den URL de skal fungere på.

3.2 Funktionslaget 23 Funktion Opret mappe * Vis mappe Omdøb mappe * Flyt mappe Indsæt mappe Slet mappe * Upload ressource * Rediger ressource * Flyt ressource Indsæt ressource Hent ressource Hent billede i bestemt størrelse Download ressource Slet ressource * Exporter Importer * URL /Catalog/AddDirectory/id /Catalog/Directory/id /Catalog/Rename/id /Catalog/MarkDirectory/id /Catalog/MoveDirectory/id /Catalog/Delete/id /Resource/Upload/id /Resource/ResourceInfo/id /Catalog/MarkResource/id /Catalog/MoveResource/id /Resource/id /Resource/id/maxBredde/maxHøjde/ /Resource/Download/id /Resource/Delete/id /Admin/Export /Admin/Import 3.2.1 Routing Da ASP.Net MVC blev det foretrukne framework er selve routing også blevet indtegnet i sekvensdiagrammerne. En standard route i MVC er /Controller/Action/id hvilket alle funktioner opfylder, bortset fra Hent ressource og Hent ressource i bestemt størrelse. Routing mekanismen skal derfor udvides til at understøtte disse to funktioner. 3.2.2 Controllers Der skal udvikles tre controllers, hvilket kan læses ud fra funktion-url tabellen: CatalogController: Styrer alle former for mappeopgaver ResourceController: Håndterer alle ressourceopgaver, bortset fra flytning af ressourcer som ligger under CatalogControlleren AdminController: Har funktionerne importer og eksporter Ud over de funktioner der vises i funktion-url tabellen skal CatalogControlleren samtidig have funktioner der kan lave det tree-view der kræves for at kunne lave den