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

Transkript

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

2 Technical University of Denmark Informatics and Mathematical Modelling Building 321, DK-2800 Kongens Lyngby, Denmark Phone , Fax IMM-B.Eng

3 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.

4 ii

5 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.

6 iv

7 Indhold Summary Resumé i iii 1 Introduktion Om firmaet, Weptop WebtopOne Den eksisterende løsning Formål Problemformulering Udviklingsproces Tidsplan Rapportskitse Analyse Teknologi ASP.Net Web Forms MVC LINQ JQuery Kravspecifikation Brugergrænseflade Database Funktionsliste Administrator funktioner Brugerfunktioner

8 vi INDHOLD 3 Design Brugergrænseflade Administratormenu Folderliste Visning af folder Ressourceinformation JQuery Funktionslaget Routing Controllers Datalaget Implementering Det nye ressourcekatalog Folderliste Foldervisning Upload af ressource Database kommunikation Test CatalogController ResourceController AdminController Konklusion 39 A Sekvensdiagrammer 41 B Kildekode 55

9 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 WebtopOne WebtopONE er et Content Management System (CMS) udviklet af Webtop i år 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

10 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 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.

11 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.

12 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) Tidsplan Til projektet er der afsat 20 uger med startdato d og slutdato d 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

13 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.

14 6 Introduktion

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

16 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 Microsoft Visual Studio understøtter udvikling i ASP.Net med mange indbyggede skabeloner samt mange drag and drop funktioner til HTML, validering og datavisning 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.

17 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

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

19 2.1 Teknologi 11 der så henviser til et netkabel. Ved brug af routing kunne linket istedet være 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.

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

21 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.

22 14 Analyse 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 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 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 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

23 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

24 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

25 2.2 Kravspecifikation 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

26 18 Analyse 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

27 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 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.

28 20 Design Figur 3.1: Opbygning af design 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

29 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 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.

30 22 Design 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 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å.

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

32 24 Design foldervisning som omtales i sektion Denne folderliste skal hentes på url en / Catalog/DirectoryList. Derudover skal der være en funktion til at udvide folderlisten og folde den sammen igen. Denne skal kaldes ved /Catalog/Expand/id. Desuden skal alle funktioner markeret med * skal have en [HttpPost] metode i MVC således at de kan modtage data fra en input form. 3.3 Datalaget Selve databasen laves på en MSSQL server 2005 og tabellerne vil være som i det nuværende system og se således ud. Figur 3.3: Database Til at tilgå disse tabeller skal der i MVC udvikles to repositories, som står for datakommunikationen. Disse to repositories laves ved at bruge LINQ to SQL Ud fra sekvensdiagrammerne i appendix A er der lavet en samlet liste over hvilke kald funktioner der skal være samt hvilke data der skal sendes tilbage. DirectoryRepository vil have funktionerne: void Add(Directory) - Tilføjer mappe til databasen IQuery Directory GetDirectories() - Henter alle mapper

33 3.3 Datalaget 25 Directory GetDirectory(id) - Returnerer mappen med samme id void Save() - Gemmer alle mappe ændringer void Delete(Directory) - Sletter mappen ResourceRepository vil have funktionerne: void Add(Resource) - Tilføjer ressourcen til databasen Resource GetResource(id) - Returnerer ressourcen med samme id IQueryable Resource GetAllResources(id) - Returnerer alle ressourcer hvis folder er det samme som id void Save() - Gemmer alle ressource ændringer void Delete(Resource) - Sletter ressourcen

34 26 Design

35 Kapitel 4 Implementering I det følgende afsnit vil der blive redegjort for implementeringen af ressourcekataloget. Dette foregik i Visual Studio 2010, med ASP.Net MVC 2 som framework og C# 4.0 som programmeringssprog. Siden kører på en IIS 7.0 server med en MSSQL 2005 database. 4.1 Det nye ressourcekatalog Herunder på Figur 4.1 ses det nye ressourcekatalog. Administrator er inde i en mappe, og er i gang med at redigere et billede. Den generelle opbygning er blevet beholdt, mens selve udseendet har fået nogle ændringer. Til opdatering af de forskellige områder er der lavet et javascript for at kunne hente en side og indsætte den i det rette område. Dette gøres ved brug af JQuerys indbyggede ajax funktion. For at opdatere et område skal scriptet vide, hvilken URL den nye side skal hentes på, hvilket område resultatet skal placeres i, og om folderlisten skal opdateres. Når JQuery så succesfuldt har loadet siden, bliver den sat ind i det ønskede område.

36 28 Implementering 4.2 Folderliste Figur 4.1: Det nye ressourcekatalog Til at vise folderlisten bliver der i CatalogControlleren oprettet et folder træ. For at oprette dette træ bliver alle mapper hentet ud af databasen. Vha. LINQ søges denne igennem for mapper, der ikke tilhører en anden mappe som så bliver startmapper. For disse startmapper bliver alle undermappe fundet vha. den rekursive funktion, der ses i Figur 4.3 Når selve folder træet er blevet genereret sendes dette til Viewet som skal vise selve folderlisten. For at undgå at have for meget logik i selve Viewet er en hjælpeklasse blevet lavet. Dette sker i TreeViewHelper.cs som sørger for at generere HTML koden for selve træstrukturen som ved hjælp af styling i CSS viser den mappeopbygning, som kan ses til venstre i Figur 4.1. For at gøre folder listen så dynamisk som muligt er links til at udforske undermapper, samt at vise indhold af mappen blevet lagt ind vha. JQuery. Derfor vil denne liste kunne bruges i andre sammenhænge end den tiltænkte. Fordelen ved at lægge links ind med JQuery er derudover at der ved ændringer kun skal ændres i en javascript fil, istedet for en.cs fil som skal kompileres igen.

37 4.3 Foldervisning 29 function Ajax ( url, target, updatedirectorylist ) { $. ajax ({ // Indsætter tilfældig tal efter url for at undgå caching url : url +? + Math. random () * Math. random (), cache : false, success : function ( data ) { $( target ). html ( data ); if ( updatedirectorylist ) { $. ajax ({ url : / ResourceCatalog / Catalog / DirectoryList +? + Math. random () * Math. random (), cache : false, success : function ( data ) { $( # directorylist ). html ( data ); } }); } } }); } Figur 4.2: Javascript til asynkron opdatering 4.3 Foldervisning I foldervisning bliver alle billeder hentet i skaleret tilstand, hvor de maksimalt er 90 pixels i højden og bredden. Til at skalere billederne bruges en indbygget funktion i C# System.Drawin.Image klassen. Dette er lagt ind i en hjælpefunktion som gemmer billedet på webserveren. Funktionen til skalering er billeder er vist i Figur 4.4. Når alle ressourcer i folderen bliver vist, er det muligt at markere flere billeder. Dette sker ved enten at holde CTRL eller SHIFT knappen nede. Holdes CTRL knappen nede, får den ressource, som klikkes på tilføjet eller fjernet markeringen. Holdes SHIFT nede bliver alle ressourcer mellem to markeringer markeret. Markeringen sker i javascript filen ResourceList.js som indeholder en liste over markerede ressourcer. Hver gang en ressource bliver markeret, bliver stylingen ændret således den får en blå kant istedet for en sort. Når en markering bliver fjernet fra en ressource, vil denne blive skiftet tilbage til sort.

38 30 Implementering /// < param name =" directories " > List of all directories </ param > /// < param name =" directory " > Start Directory </ param > private void FindChildren ( IQueryable < Directory > directories, Directory directory ) { // Find all directories with current directory as parent var children = from dir in directories where dir. Parent. Equals ( directory.id) orderby dir. Name select dir ; } foreach ( var child in children ) { // Add directory as child directory. Add ( child ); // Find subdirectories to child FindChildren ( directories, child ); } Figur 4.3: Brug af LINQ til at finde undermapper 4.4 Upload af ressource Når en administrator skal lægge et nyt billede op til ressourcekataloget, skal denne højreklikke på mappen, som ressourcen skal lægges i, og vælge Upload ressouce. Der vil nu i ressource information området være et felt, hvor man kan trykke for at uploade ressource. Ved klik på dette felt vises der et vindue, hvor administrator kan vælge den fil, der skal lægges op. For at lave uploadknappen blev der brugt et JQuery plugin, der har den funktion. Figur 4.5 viser opsætning af dette plugin.

39 4.4 Upload af ressource 31 public static void ResizeImage ( string source, string destination, int width, int height ) { try { // load image Image original = Image. FromFile ( source ); if ( original. Width > width original. Height > height ) { // Create new image Image newimage = original. GetThumbnailImage ( width, height, null, IntPtr. Zero ); // Clear handle to original file so that we can overwrite it if necessary original. Dispose (); // Save resized picture newimage. Save ( destination ); } else { original. Save ( destination ); } } catch { } } Figur 4.4: Skalering af billeder

40 32 Implementering $( document ). ready ( function () { new AjaxUpload ( upload_ button, { action : / ResourceCatalog / Resource / Upload / + $( # dirid ). attr ( value ), oncomplete : function ( file, response ) { Ajax ( / ResourceCatalog / Catalog / Directory / + $(" # dirid "). attr (" value "), "# directorycontent "); } }); }); Figur 4.5: Brug af JQuery plugin til upload af ressource 4.5 Database kommunikation For at lave database kommunikationen blev der brugt LINQ to SQL. Ved bruge af dette kan man forbinde til en database og trække de tabeller over, som man ønsker at bruge i Visual Studio Med LINQ to SQL bliver datamodellerne også automatisk oprettet i MVC, hvor de vil have de variable, der eksisterer i databasen. Ressource modellen blev udvidet med en funktion til at finde den fysiske sti på harddisken. Mappe modellen blev udvidet med funktionalitet til at blive vist i folderlisten, såldan at det blev muligt at tilføje undermapper til mappen, samt at det blev muligt at se status på om mappen er udfoldet. For at kunne udskifte datalaget blev de to repositories bygget ud fra et interface hvor funktionerne fra designfasen er beskrevet. Derved vil der nemt kunne laves et ressourcekatalog, som bruger en anden database.

41 4.5 Database kommunikation 33 Figur 4.6: Klassediagram af de to repository interfaces

42 34 Implementering

43 Kapitel 5 Test 5.1 CatalogController Alle funktioner, som hører under CatalogControlleren, testes og sammenlignes med det forventede resultat. Testresultatet kan ses i Tabel ResourceController Alle funktioner, som hører under ResourceControlleren, testes og sammenlignes med det forventede resultat. Testresultatet kan ses i Tabel AdminController Alle funktioner, som hører under AdminControlleren, testes og sammenlignes med det forventede resultat. Testresultatet kan ses i Tabel 5.3

44 36 Test Test Forventet resultat Succes? Opret mappe Omdøb mappe Flyt mappe Indsæt mappe i undermappe Indsæt mappe Slet mappe Vis mappe Marker flere ressourcer ved brug af CTRL Marker flere ressourcer ved brug af SHIFT Flyt ressource Flyt ressourcer Indsæt ressource Mappen bliver oprettet. Folderlisten bliver opdateret med den nye mappe. Den nye mappe bliver den aktive mappe. Mappen bliver omdøbt. Mappelisten bliver opdateret. Menupunktet Indsæt ressource bliver aktiveret ved højreklik i folderlisten. Mappen bliver ikke flyttet. Indsæt ressource bliver ikke deaktiveret ved højreklik i folderlisten. Mappen bliver flyttet. Mappelisten bliver opdateret. Indsæt ressource bliver deaktiveret ved højreklik i folderlisten. Mappen og alle undermapper samt ressourcer i disse bliver slettet. Mappelisten bliver opdateret Alle ressourcer i mappen bliver vist Ressourcerne som klikkes på bliver markeret Alle ressourcer mellem de to markerede ressourcer bliver markeret Menupunktet Indsæt ressource bliver aktiveret ved højreklik i folderlisten. Menupunktet Indsæt ressource bliver aktiveret ved højreklik i folderlisten. Ressourcerne bliver indsat i mappe. Mappe visning bliver opdateret. Tabel 5.1: Test af CatalogController

45 5.3 AdminController 37 Test Forventet resultat Succes? Upload ressource Rediger ressource Download ressource Download flere ressourcer Slet ressource Slet ressourcer Ressourcen lægges ind i den aktive mappe. Visning af folder bliver opdateret og den nye fil vises. Det er muligt at uploade en ny ressource. Ressource informationerne bliver ændret. Visning af folder bliver opdateret. Ressourcen bliver sendt til browseren så den kan downloades. Ressourcerne bliver pakket i en zip fil og bliver sendt til browseren så den kan downloades. Ressourcen bliver slettet. Visning af folder bliver opdateret Ressourcerne bliver slettet. Visning af folder bliver opdateret Tabel 5.2: Test af ResourceController Test Forventet resultat Succes? Eksporter Importer Alle ressourcer bliver pakket i en zip fil, mens database bliver gemt i en XML fil. De to filer bliver pakket i en zip fil og sendt til browseren sp den kan downloades Alle ressourcer bliver lagt ind i kataloget og folderstrukturen bliver oprettet Tabel 5.3: Test af AdminController

46 38 Test

47 Kapitel 6 Konklusion Projektets overordnede formål var at udvikle et nyt billedhåndteringsmodul til Webtops CMS system til styring af billeder. Til dette var der behov for at opbygge et ressourcekatalog efter trelagsmodellen istedet for virksomhedens hidtidige tolagsmodel. I projektet er der udarbejdet en funktionsliste der har til formål at specificere funktioner der skal implementeres. Projektets undersøgelse viste, at trelagsmodellen havde den fordel, at databasekommunikationen blev samlet på et sted, hvilket betyder, at det vil være nemmere at fejlsøge og eventuelt udskifte i datalaget. Tidsmæssigt er trelagsmodellen hurtig at lave, ideet selve udviklingen af det ekstra datalag udføres med LINQ to SQL. Endelig samler trelagsmodellen funktionaliteten i funktionslaget. Et yderligere formål i projektet har været at undersøge, hvilket ASP.Net framework, der ville være fordelagtigt at bruge. ASP.Net MVC blev valgt ud for følgende kriterier: ASP.Net MVC giver fuld kontrol over HTML koden, hvilket giver det en umiddelbar fordel i forhold til performance, når der bruges AJAX. ASP.Net MVC understøtter trelagsmodellen og er baseret på denne, hvorimod ASP.Net Web Forms umiddelbart lægger op til brug af tolagsmodellen. Fremtidig innovation og produktudvikling: Det vil være forholdvis simpelt at tilføje funktionalitet som, giver mulighed for at beskære billeder istedet for blot at nedskalere. Det har den fordel, at brugeren har flere redigeringsmuligheder. Brugerven-

48 40 Konklusion ligheden af systemet kan forbedres ved at opbygge brugergrænsefladen mere intuitiv. En videreudvikling af ressourcekataloget kunne medføre at dette kunne forbinde med sociale medier.

49 Bilag A Sekvensdiagrammer

50 42 Figur A.1: Opret mappe

51 Figur A.2: Vis mappe 43

52 44 Figur A.3: Omdøb mappe

53 Figur A.4: Flyt mappe 45

54 46 Figur A.5: Slet mappe

55 Figur A.6: Upload billede til mappe 47

56 48 Figur A.7: Rediger ressource

57 Figur A.8: Flyt ressourcer 49

58 50 Figur A.9: Download ressourcer

59 Figur A.10: Slet ressourcer 51

60 52 Figur A.11: Exporter

61 Figur A.12: Importer 53

62 54

63 Bilag B Kildekode Kildekode, som er sendt sammen med PDF, kan hentes på

64 56