MVC-mönster i ASP.NET Projektblogg bygghemma.se

C-uppsats i Datavetenskap MVC-mönster i ASP.NET Projektblogg bygghemma.se Författare: Janina Torstensson Handledare: Martin Blomberg Termin: VT11 Kurskod: 2DV40E

Abstrakt Rapporten tar upp resultatet av en studie kring MVC som gjordes på en applikation som utvecklades för bygghemma.se i programmeringsspråket ASP.NET MVC 3. Metoden för att undersöka detta har främst varit den kodning som gjort under utvecklingen. Resultatet av detta arbete har blivit en webbapplikation där användare kan lägga upp sina renoveringsprojekt samt en erfarenhet rikare vad gäller MVC och dess struktur. Nyckelord Bygghemma.se, projektblogg, ASP.NET MVC 3, MVC. Abstract The report discusses the results of a study regarding the use of MVC in an application that was developed for bygghemma.se, written in ASP.NET MVC 3. The primary method of investigating this has been the coding during development. The result of this has become a web application where users can upload their renovation projects and a richer experience in terms of MVC and its structure. Keywords Bygghemma.se, project blog, ASP.NET MVC 3, MVC.

Förord Detta arbete är ett examensarbete och ingår i examinationen av programmet Utvecklare av digitala tjänster vid Linnéuniversitetet i Kalmar. Arbetet har gett mig djupare kunskap vad gäller ASP-dotnet MVC 3 och MVC-strukturen som sådan. Jag har även fått erfarenhet av att jobba mot ett företag vilket jag tycker varit intressant och lärorikt. Jag vill tacka IT-avdelningen på bygghemma.se som har handlett och hjälpt mig igenom detta arbete. /Janina Torstensson

Innehåll 1 Introduktion... 6 1.1 Inledning/bakgrund... 6 1.2 Tidigare forskning... 6 1.3 Problemformulering... 6 1.4 Syfte och frågeställning... 6 1.5 Målgrupp... 7 1.6 Disposition... 7 2 Bakgrund/Teori... 8 2.1 Vad är MVC?... 8 2.2 MVC fördelar... 9 2.3 MVC nackdelar... 9 2.4 ASP.NET MVC 3... 10 3 Metod... 11 3.1 Vetenskaplig ansats... 11 3.2 Arbetssätt... 11 3.3 Litteraturstudie... 11 3.4 Val av teknik/verktyg... 12 3.5 Implementering med hjälp av ASP.NET MVC 3... 13 3.6 Analys... 19 3.7 Tillförlitlighet... 19 4 Resultat... 20 4.1 Skapa projekt... 20 4.2 Skapa blogginlägg... 21 4.3 Bilduppladdning... 22 4.4 Projektdetaljer... 22 4.5 Blogginlägg... 23 4.6 Före och efter bild... 24 4.7 Skapa en kommentar... 25 4.8 Nyckelord... 25 4.9 Övriga funktioner... 25 5 Diskussion... 26 5.1 För och nackdelar kring en MVC-struktur... 26 5.2 Metod och resultat... 27

6 Avslutning... 29 6.1 Slutsats... 29 7 Referenser... 30 7.1 Uppsatser/Vetenskapliga artiklar... 30 7.2 Elektroniska källor... 30 Bilagor Ordlista... 31

1 Introduktion 1.1 Bakgrund Bygghemma.se är ett nätbaserat byggvaruhus som grundades 2006. Bygghemma.se har sitt huvudkontor i Oskarshamn men det är i Kalmar som större delar av IT-avdelningen sitter. Syfte med detta projekt är att skapa en webbapplikation åt bygghemma.se som ger användaren möjlighet att visa sina egna renoveringsprojekt i form av bild och text. Applikationen ska utvecklas i ASP.NET MVC 3 (ASPdotnet MVC 3)1 vilket också är ett av de ämnen som kommer tas upp i rapporten. Applikationen kommer i ett första läge vara fristående från bygghemma.se s nuvarande plattform. MVC-strukturen(MVC)2 är ett välkänt designmönster och ASP-dotnet MVC3 har flera tidigare versioner. ASP-dotnet MVC 3 är deras nyaste version och är i hög grad aktuell för utvecklare inom detta område. 1.2 Tidigare forskning När det gäller MVC så finns det mycket forskning men ofta är de riktade mot något specifikt, det kan vara ett visst språk eller liknande. Ingen tidigare forskning kring ASP.NET MVC 3 har hittats vilket kan bero på att det är en relativt ny version på marknaden. 1.3 Problemformulering Eftersom utvecklingen kommer att ske i ASP-dotnet MVC 3 blev det också en självklar grund för rapporten. För att kunna utveckla denna applikation kommer studier kring MVC att göras även om en del tidigare erfarenhet finns. I rapporten kommer jag behandla vilka för och nackdelar det finns att jobba med MVC-strukturen i ren fakta men också jämföra dessa punkter med egna erfarenheter som uppkommit under och efter denna utveckling. 1.4 Syfte och frågeställning Undersökning av problemet kommer ske under utvecklingens gång. Det är under utvecklingen som observationer och erfarenheter kring MVC och ASP-dotnet MVC 3 kommer tas in. Undersökningen kommer också bestå av en del litteraturstudie för att ta in fakta vad gäller MVC-strukturen och

dess för och nackdelar. Frågeställningen handlar om MVC och dess struktur och vad den har för för och nackdelar. Det som också kommer att undersökas är hur denna struktur fungerar i ASP-dotnet MVC 3. 1.5 Målgrupp Målgruppen för denna rapport är den teknikintresserade och personer som är relativt insatta i utveckling med inriktning mot dotnet och webbapplikationer. Ett intresse för att lära sig mer om MVC bör även finnas hos målgruppen då det är det ämne som berörs i rapporten. 1.6 Disposition Rapporten behandlar först en teoridel där MVC kommer att vara i fokus. Här beskrivs det vad MVC är och vilka olika delar som ingår. I teoridelen behandlas även ASP-dotnet MVC 3 och dess nyheter. I metoden beskrivs sedan arbetssättet och de verktyg och tekniker som har används i utvecklingen. Metoden som främst går ut på implementering i ASP-dotnet MVC 3 kommer också behandla de delar som tas upp i teoridelen. Hur fungerar MVC i samband med detta språk och hur man gör rent praktiskt visas här. Metoden följs av en metodanalys för att sedan gå vidare till resultatet. Här visas hur resultatet blev både med bilder och med text. Uppsatsen fortsätter sedan med en diskussion för att avslutas med en slutsats.

2 Bakgrund/Teori Här beskrivs de tekniker och den teori som arbetats med under arbetets gång. 2.1 Vad är MVC? MVC2 som står för Model, View, Controller är ett designmönster för utvecklare som används för att separera användargränssnittet och presentationslagret från affärslagret. Logiken mellan dessa sköts av en Controller. Controller och View är beroende av Model medan Model ska vara helt oberoende av de andra. Detta gör att det är enkelt att byta ut en Model. Bild 1. MVC-strukturens beroende. Model är applikationens hjärta och tar hand om all data i applikationen. Ofta består Model av objekt som motsvarar tabellerna i databasen och på så sätt kan data hämtas och sparas. View tar hand om presentationen, dvs. det som syns för användaren. Controller tar hand om användarens handlingar, det kan exempelvis var en knapptryckning på en hemsida. Beroende på vad användaren trycker på så skickas information från en aktuell View till en Controller, Controller i sin tur skickar vidare informationen antingen till en Model eller/och en View. Nedan följer ett exempel på hur flödet kan se ut i en MVC-applikation. Flödet startar då användaren trycker på en länk, tanken är då att användaren ska komma till en ny sida som visar ny information.

Bild 2. Flödesschema för en MVC-applikation. Länken som användaren trycker på är i sin tur kopplad till en funktion i en Controller för att hantera inputen. Funktionen tar en parameter, nämligen användarens id som skickas med från vyn. Här tar Controller i sin tur kontakt med Model för att hämta den information som användaren vill se. Controller returnerar sedan en ny View med den information som hämtats från Model. 2.2 MVC Fördelar MVC2 organiserar koden så att man skiljer på logik och presentation. Detta medför att man kan ha flera olika vyer för att presentera informationen. De separerade delarna kan också lättare återanvändas i andra projekt när logik och presentation är åtskilda. Uppdelandet på presentationen och logiken ger lösa kopplingar som gör det lättare för olika sorters komponenter att integrera med varandra på ett flexibelt sätt. De lösa kopplingarna gör det också lättare för utvecklare att jobba med olika delar samtidigt och koden blir lättare att återanvända i flera sammanhang. Detta medför att en MVC-applikation2 är utbyggbar, det är lätt att bygga på flera komponenter och funktioner då det är en tydlig separation. MVC ger också en bättre förutsättning för testdriven utveckling. 2.3 MVC Nackdelar En MVC-struktur är inte för små applikationer. Det blir ofta alldeles för komplext att använda sig av MVC2 i en mindre applikation och det kommer få negativa effekter på prestanda och designen.

2.4 ASP-dotnet MVC 3 ASP-dotnet MVC 3 bygger på ASP-dotnet MVC och dess tidigare versioner som är till för utveckling med hjälp av MVC-strukturen i dotnet-miljö och används för att skapa dynamiska webbsidor. Det har kommit en rad nyheter kring denna version1, nedan beskrivs ett antal av dem. 2.4.1 View med razor-syntax En View med en syntax som kallas razor4 är en nyhet vad gäller ASP-dotnet MVC 3. Razor är baserat på de existerande språken C#(c-sharp)5 och Visual Basic och i Visual studio finns även kodhjälp för razor-syntax. För att använda sig av den Model som är kopplad till en View anges @model. I samband med denna nyhet går det även nu att välja vilken typ av View som man vill arbeta med. Den gamla vyn eller den med razor-syntax. 2.4.2 MvcScaffolding MvcScaffolding1 är ett verktyg som gör det lättare och snabbare att bygga upp och starta en applikation om man är ny när det gäller ASP-dotnet. 2.4.3 Global Filters Global filters1 används då en viss logik ska kunna användas på alla Controller i en applikation. Detta görs genom att lägga till filtret till GlobalFilters collection som finns i filen Global.asax. 2.4.4 Klientsidevalidering som standard I tidigare versioner av ASP-dotnet behöver man anropa Html.EnableClientValidation från en View för att aktivera denna validering. I ASP-dotnet MVC 3 är denna validering på som standard men går även att stänga av i filen web.config1. 2.4.5 Validering En rad nyheter finns när det gäller valideringen1. I ASP-dotnet 3 går det att jämföra två olika värden i en Model genom attributet compare. Bild 3. Exempel på attributet compare i ASP-dotnet MVC 3.

Ett antal interface vad gäller validering är också med bland nyheterna kring ASP-dotnet MVC 3. 2.4.5 Fler nya funktioner ASP-dotnet MVC 3 innehåller nya typer för actionresult, en annan nyhet är att det automatiskt installerar NuGet som är ett gratis paket som gör det lättare för utvecklaren att hitta och installera bibliotek och andra paket till sitt projekt. 3. Metod 3.1 Vetenskaplig ansats Jag har valt att induktiv ansats med lite teori i grunden. Jag kommer utifrån egna observationer och erfarenheter få en djupare förståelse för ämnet samtidigt som jag jämför mina erfarenheter med teorin. Undersökningen kommer därför att vara kvalitativ. 3.2 Arbetssätt Detta projekt innefattar både utveckling av en webbapplikation och en uppsats. Även en del dokumentation har gjorts under projektets gång. Balansen mellan dessa är fyra dagar utveckling och en dag uppsatsskrivande/litteraturstudie. Utvecklingen kommer främst att ske på bygghemma.se s kontor. Under projektets gång kommer även en liten dagbok att skrivas där det beskrivs vad som gjorts den närmaste tiden. Denna kommer förhoppningsvis blir användbar till uppsatsen. Under varje vecka ska en milstolpe sättas upp där det beskrivas vad man ska göra under kommande period. 3.3 Litteraturstudier Under datainsamlingsprocessen har en del litteraturstudier gjorts även om jag sedan tidigare har en del kunskap. Informationen kring MVC och ASPdotnet MVC 3 har hämtats i vetenskapliga artiklar och på internet. Källorna kollades ut på förhand för att göra arbetet lättare. Dock har även en del litteraturstudier gjorts under tiden av arbetet. Den största datainsamlingen kommer ske under utvecklingen då jag kommer observera de olika delarna av MVC samtidigt som jag får med mig erfarenhet ifrån dem.

Inga enkäter eller intervjuer har gjorts i denna undersökning då det framförallt handlar om ren fakta och därefter hur jag själv upplever denna. 3.4 Val av teknik/verktyg Många av de tekniker och verktyg som används i applikationen används också av bygghemma.se och blev då ett lätt val. Teknikerna nedan är inte krav för ett MVC-projekt i ASP-dotnet MVC 3 men används däremot väldigt ofta. För förklaring av orden nedan se bilaga 1. För versionshantering använde sig bygghemma.se av Mercurial6 vilket också ha gjorts i denna utveckling. I och med kravet att jobba i ASP-dotnet MVC 3 så har programmeringen skett i c-sharp. Kopplingen med databasen har skett med hjälp av Nhibernate7, databasen mappas då till de objekt som finns i modellen. Repository pattern8 har också används i applikationen för att få ett mer organiserat upplägg då man gör olika anrop till databasen och fungerar som ett mellanlager mellan Controller och Model. JavaScript9 är också något som har används i applikationen samt ett antal olika jquery-funktioner och plugin10. Ett av de plugin som har använts i applikationen är Tinymce som gör det möjligt att addera en avancerad texteditor till sin applikation. För att få ett utseende på applikationen så har CSS(css)11 använts. För kommunikation med Facebook och inloggningsfunktion har en Facebook helper12 används. På detta sätt går det att se om användaren är inloggad och det går också att få tag på en del information kring användaren. 3.5 Implementering med hjälp av ASP-dotnet MVC 3 3.5.1 Filstruktur Genom att starta ett ASP-dotnet MVC Web Application-projekt i Visual Studio13 får man med sig en klar mappstruktur. Även exempeldata finns med

så det går lätt att se hur saker och ting hänger ihop. Bild 4. MVC-struktur för ASP-dotnet MVC Web Application i Visual Studio. Som standard ser strukturen ut som ovan och rekommenderar följande3: Content-mappen används för css och bilder. Controllers är mappen som innehåller projektets Controller och namnet på en Controller ska enligt ASP-dotnet MVC alltid sluta på Controller. I Models finns affärslogiken. Mappen kan bland annat innehålla logik för att arbeta med databasen men också de olika objekt som finns att arbeta med i applikationen, ofta motsvarande databasens tabeller. JavaScript-filer läggs i Scripts-mappen. Här får man från början med en hel del filer vad gäller AJAX och jquery. Dessa kan bland annat användas för validering. De filer som rör presentationen läggs i mappen Views. För varje Controller finns ofta en mapp i views med samma namn som en Controller, ett exempel kan tex vara home och där under ligger sedan dess vyer.

Vissa delar i strukturen är fasta medan en del är fria. Modeller och dess databaser kan man själv välja vad man vill lägga. I den utvecklade applikationen har bland annat filtstrukturen delats upp ytterligare. Bild 5. Den utvecklade applikationens filstruktur. Bilden ovan visar hur applikationens filer är uppdelade. Projektet som heter BH är uppdelat i flera mindre projekt. Data, Model, Service och Web. Denna uppdelning var en rekommendation från Bygghemma.se och gör projektet väldigt flexibelt. Förklaring av varje delprojekt tas nu upp. I datalagret sker alla kopplingar mot databasen, dessa kopplingar ligger i ett repository(se val av teknik/verktyg). Här sker även mappningen mellan databasen och objekten. Modellagret innehåller de klasser och objekt som motsvarar databasen. Servicelagret kan beskrivas som ett affärslager. Här sker kopplingen till datalagret och dess repository men även validering. Här finns också de Html-helpers som används i applikationen. Webblagret är det lager som innehåller Controller, View, script-filer, bilder, stilmallar.

3.5.2 Model I modellagret skapar man nya klasser för de objekt man vill jobba med i sin applikation. I den utvecklade applikationen betyder det att modellens klasser heter Project, Post, Comment, Media och Tag. I klasserna specificerar man upp vilka egenskaper objekten ska ha, exempelvis titel och beskrivning. Bild 6. Egenskaper i en Model-klass. Här visas klassen post. I den utvecklade applikationen så har Nhibernate7 används för att mappa c- sharp-objekten till databasen, denna mappning sker i datalagret. Bild 7. En mappnings-klass. Så här kan en mappning se ut. Klassen som i detta fall heter postmap ärver från Nhibernates classmap där man får specificera vilken klass i Model den ska mappas till. I detta fall sker mappningen till klassen post som motsvarar ett nytt blogginlägg i applikationen. I mappningen får man ange vilka beroenden som finns och vilka egenskaper som har många till många relation(hasmany och HasManyToMany). När man har en många till många relation måste man ange vilken kolumn som kopplingen sker till(keycolumn, ParentKeyColumn, ChildKeyColumn). Den sista raden i bilden ovan säger att en post har ett helt projekt-objekt kopplat till sig i modellen, denna kopplingen sker genom kolumnen ProjektId i databasen.

3.5.3 Controller En ny Controller skapar man genom att högerklicka på mappen Controller och ta Add -> Controller, här får man namnge sin Controller. Som standard får man en funktion vid namn index som returnerar en View. Om man inte specificera namnet på sin View så blir det automatiskt den View som har samma namn som namnet på Controller-funktionen. Bild 8. Funktion i en Controller, som returnerar en View med namnet index. 3.5.4 View En View finns i några olika typer. Förutom de som nämns nedan finns de standard vyer som man använder sig av mest. En Partial view14 är en View som kan användas på flera ställen i applikationen. Det är en View som kan laddas in i en annan View för att visa specifik data. De partiella vyerna lägger man ofta under mappen shared som finns i Views. En annan typ av View är en master page14 som är en View där man specificera saker som man vill ska synas på alla sidor, exempelvis en meny. Om man vill ha flera olika utseenden i sin applikation kan man använda sig av flera master page. Bild 9. Innanför dessa taggar i en master page visas innehållet från en annan View. I en master page finner man dessa taggar och det är här innanför som det specifika innehållet sedan kommer att visas. Det vill säga den View som laddas in.

För att skapa en master page i Visual studio högerklickar man på mappen Views och väljer new item. Under web och mvc finns här ett val som heter mvc master page. Välj det och ett namn på den View du vill skapa. En View kan skapas på flera sätt. Är en controller-funktion redan skapad så kan man högerklicka i metoden och välja add view vilket gör att man får samma namn på vyn som det är på metoden. Detsamma går även att göra på mappen Views. Bild 10. Utseende för skapande av en View i visual studio. Denna rutan får man upp när man väljer att skapa en ny View. Först väljer man namnet på sin View och sedan finns ett val hur man vill att syntaxen ska vara på sin View. Nytt för ASP-dotnet MVC 3 är att man kan välja razor, mer om det senare. Man kan välja att skapa en starkt typad vy och detta betyder att vyn är kopplad till ett specifikt objekt, exempelvis postobjekt. Väljer man att använda en stark typad View kan man även välja en specifik mall och få lite hjälp på vägen(bra att använda för att komma igång). Här kan man bland annat välja bland en View för att skapa, ändra, ta bort och att lista sitt objekt som man har kopplat till sin View.

När man skapar en View kan man också välja att skapa den som en partial view och oftast väljer man också den master page som man vill ha för sin vy. Exemplet nedan är en vanlig View med den äldre syntaxen, den är typad till ett post-objekt och har en master page. Denna View heter index för att passa ihop med controller-funktionen som skrevs tidigare. Bild 11. En View med den äldre syntaxen. Det som finns i content-taggarna med id maincontent är det som kommer synas på sidan medan ContentPlaceHolder motsvarar den vanliga titeltaggen. Nedan följer samma exempel med med razor-syntax, dock utan master page. Bild 12. En View med razor-syntax. För att få ihop detta till någon applikation så måste data skickas in till vyn, så den vet vilken titel den ska skriva ut. Denna data hämtas därför i Controller och då från Model. I detta fall anropas en service-klass som i sin tur anropar ett repository som sedan hämtar från databasen och returnerar tillbaka data till Controller. Bild 13. En Controller som hämtar ett post-objekt och sedan returnerar en View kopplat till det aktuella objektet.

Posten som har hämtats ut skickas här in i vyn för att sedan skriva ut dess titel, se bild 8 och 9. Implementation av en MVC-applikation i ASP-dotnet MVC handlar mycket om det som beskrivits ovan. En eller flera vyer som kopplas ihop med en Controller som i sin tur antingen hämtar eller sätter in data till Model. 3.6 Analys De tekniker som har används för att analysera resultatet är framför allt den kodning som har gjorts. Under arbetets gång har iakttagelser samt observationer gjorts. Kodningen i sig har också gett erfarenhet och djupare förståelse vad gäller MVC och dess uppbyggnad med Model, View och Controller. Kodningen rör bland annat de tekniker och mönster som jag tagit upp i tidigare delar av rapporten. 3.7 Tillförlitlighet Då undersökningens resultat handlar om egna erfarenheter så är det svårt att säga att undersökningen har en hög tillförlitlighet. Inga tvivel finns dock på att validiteten är hög, det som var avsett att undersökas har utförts. Undersökningens resultat är beroende på vem som utför, personer kan ha olika åsikter om saker och ting. Dock tror jag att reliabiliteten ökar i denna undersökning då det finns en teori som stämmer bra överens med det resultat som tagits fram.

4 Resultat Resultatet är en applikation där användaren kan skapa ett renoveringsprojekt och till det skapa flera olika bloggposter. Till bloggposterna finns även en kommentarsfunktion. Bild 14. Applikationens startsida Det finns en rad olika funktioner i applikationen. Alla kommer inte tas upp utan ett antal har valts ut här. 4.1 Skapa projekt Bild 15. Det ska vara enkelt att skapa ett projekt.

Projektet är applikationens grund. Det är dessa som ska bära upp hemsidan och göra den intressant. Ett projekt kan man endast skapa om man är inloggad. Det ska vara enkelt att skapa ett projekt, inga detaljer eller onödiga moment ska finnas med och därför behövs endast ett projektnamn vid skapandet. Det finns också ta bort och editeringsmöjligheter vad gäller ett projekt. 4.2 Skapa blogginlägg Bild 16. Så här ser det ut när ett nytt inlägg ska skapas. Varje projekt kan innehålla flera blogginlägg, ett inlägg ska helst innehålla en titel, beskrivning, minst en bild och ett nyckelord som passar in på inlägget. Ett nyckelord kan exempelvis vara badrum. Beskrivningen och bilduppladdning är dock frivilligt, bilduppladdningen beskrivs nedan. När det gäller blogginläggen finns det även här både ta bort och editeringsmöjligheter.

4.3 Bilduppladdning Bild 17. Popup för bilduppladdning. För att ladda upp en bild måste användaren befinna sig i den vyn som antingen skapa ett blogginlägg eller den vy som editera ett befintligt inlägg. Här finns en specifik knapp för uppladdningen. Vid knapptryckning öppnas en popup där användaren får bläddra bland sina egna filer för att välja den bild man ska laddas upp, den valda bilden kommer visas för användaren. När användaren trycker på ladda upp så visas bilden i formuläret i bakgrunden, detta klargör att bilden är uppladdad rätt. Vill användaren sedan ladda upp flera bilder så kan man göra det annars väljer man att stänga popup-rutan. Bilden sparas dock inte till inlägget förrän användaren trycker på spara i formuläret som han/hon befinner sig i. 4.4 Projektdetaljer På projektsidan kan en användare se detaljerna kring sitt projekt. Dess titel, beskrivning och före och efter bild över projektet. På detaljsidan kan man också välja om man vill ändra eller ta bort sitt projekt och en överblick över dess bloggposter visas också. Editeringsmöjligheterna visas endast om det är användare som är inloggad.

Bild 18. En projektsida med före och efter bild samt dess relaterade blogginlägg. 4.5 Blogginlägg Bild 19. Detaljvy för ett specifikt blogginlägg. Detaljerna kring ett blogginlägg visas på inläggets sida. Här kan man se dess bilder, titel, beskrivning, nyckelorden som är kopplade till inlägget och

man kan också här välja att editera och ta bort inlägget. Editeringsmöjligheterna visas endast om det är rätt användare som är inloggad. 4.6 Före och efter bild Före och efter bild väljs automatiskt så fort man skapar ett inlägg, förebilden blir den bild som laddades upp först till projektet och efterbilden blir den sista bilden som laddats upp. Dessa bilder kan man ändra och det gör man i samma vy som man editera sitt projekt. Bild 20. Användaren kan här själv välja ut vilken bild som ska visas som före respektive efterbild. Här visas först de bilder som i stunden ligger som före och efter bild och under dessa visas alla bilder som finns sparade på det aktuella projektet. Genom att dra den bild man vill ha till respektive ruta(före och efter) så väljer man vilken bild man vill ha på vardera plats.

4.7 Skapa en kommentar Bild 21. Skapa kommentar. En kommentar skapar man på ett specifikt blogginlägg och finns därför på samma vy som detaljerna kring det. Kommentera kan man endast göra om man är inloggad. 4.8 Nyckelord I Applikationen finns något som kallas nyckelord och detta är en specifik taggning av ett inlägg. Man kan välja att ha flera nyckelord per inlägg om man anser att det är aktuellt. Genom dessa nyckelord kan användaren också söka sig till specifika inlägg som handlar om det han/hon är intresserad av. 4.9 Övriga funktioner Applikationen listar även alla projekt för den inloggade användaren så att han/hon lätt kan få en överblick över dessa. Även en bokstavslista kring alla projekt finns att tillgå. Inloggningen i applikationen sker via Facebook och en html-helper, i applikationen finns även en gilla-knapp som är kopplad till Facebook. Genom denna html-helper kan man även få ut viss information kring användaren.

5 Diskussion 5.1 För och nackdelar kring en MVC-struktur Genom att starta en ASP-dotnet MVC Web Application i Visual Studio så funderas det direkt på om detta är ett bra alternativ för mindre applikationer. Detta kan relateras till en av nackdelarna som i teoridelen löd: Inte för små applikationer. Blir ofta alldeles för komplext att använda sig av MVC i en mindre applikation och kommer få negativa effekter på prestanda och designen. Jag tycker dock inte att man kan se detta som en direkt nackdel, i alla fall inte när det gäller ASP-dotnet MVC då det är mycket enkelt att komma igång med ett MVC-projekt. Det är många steg som ska göras endast för en liten funktion och är det då en mindre applikation som ska byggas så kan denna MVC-struktur kännas ganska överflödig och kan lätt försvåra arbetet istället för att underlätta. I ASP-dotnet MVC finns det i regel en View för varje funktion i en Controller, bara detta kan ge många filer. Tittar man på Visual Studios MVC Web Application så ger denna också en väldigt stor mappstruktur som kanske inte alltid passar en mindre applikation. Ganska snabbt in i utvecklingen märks också en av de fördelar som kommit upp nämligen den som gäller parallell utveckling. Då komponenterna är så löst kopplade är det lätt att jobba med olika delar samtidigt. Att jobba med flera komponenter samtidigt är inga problem när det gäller MVC så länge de inte har beroende till varandra. Parallell utveckling kan ske då någon exempelvis arbetar med framsidan samtidigt som någon annan arbetat med ett formulär för att lägga till någonting på sidan. Olika funktioner och flera Controller gör att det är lätt att arbeta parallellt och detta gäller även för vyerna där de också är uppdelade på samma sätt. Föregående fördel med MVC hör ihop med nästa fördel som rör utbyggbarheten. Utbyggbarheten är också något som upplevs positivt. Det är inte svårt att lägga till en ny funktion i en Controller och till den skapa en ny vy eller använda en existerande. Det behövs ofta inte mycket kod för att utöka applikationen. Även återanvändningen upplevs som en stark fördel, däremot kan den också bli en nackdel om man försöker använda sig för mycket av det.

Denna fördel använder jag mig av ganska mycket men det kan försvåra och göra det komplext om man använder det för mycket. Vilket jag också har upplevt. I en applikation kan det tex. vara smidigt att använda samma View för olika saker men man får vara försiktig. En View kan också bli för komplex. Här måste man som utvecklare kunna se om återanvändning är en bra idé eller om det är bättre och ger renare kod om man använder sig av exempelvis två vyer. Detsamma kan även gälla funktioner. I MVC-strukturen kan man alltså ha flera vyer, vilket är väldigt smidigt och upplevs av mig som en stark fördel. Man kan ha flera vyer med samma modell, exempelvis en View för att skapa ett objekt och en View för att skriva ut objektet. I ASP-dotnet är det väldigt smidigt och lätt att jobba med vyer. Då man koppla en View till en viss modell och på så sätt kan man få tag i all information som finns i just den Model. När det gäller organisation i en MVC-applikation så håller jag även med i den fördelen, det är absolut lättare att hitta i en MVC-applikation men mycket av detta är upp till utvecklaren som måste se till att filerna hamnar rätt i mappstrukturen. 5.2 Metod och Resultat Jag tycker arbetet har fungerat bra och genomförandet har löpt på utan några luckor. Jag har i stort sätt suttit på bygghemma.se's kontor fyra dagar i veckan och det har fungerat jättebra. Genom att ha varit på plats har jag kunna få den hjälp jag behöver, de har alltid varit öppna med att hjälpa mig. När det gäller dokumentation så har den inte riktigt blivit som jag tänkt, i början var jag väldigt flitig men efterhand när saker och ting börjar falla på plats så är det lättare att det glöms av. Men jag tycker ändå att det har fungerat bra. Jag tycker att MVC är ett mycket bra mönster att använda sig av och ASPdotnet gör detta på ett väldigt smidigt sätt. Det är lätt att komma igång och lätt att förstå sig på de olika delarna och detta tack vare Visual Studio som är ett verktyg som jag verkligen tycker om att arbeta i. Dock är det självklart en del bakomliggande tekniker man behöver lära sig för att få en fungerande applikation. Exempelvis hur man får kontakt med sin databas och hur mappningen där i mellan går till. Nhibernate var något nytt för mig vilket gjorde att det tog ett bra tag innan man kom in i det. C-sharp och ASP-dotnet MVC har jag tidigare jobbat med och tycker absolut om det

men det hade absolute underlättat om jag jobbat med det lite mer än vad jag gjort. Mercurial har också varit en teknik i utvecklingen som varit väldigt smidig. Det var nytt för mig och jag tycker det har fungerat riktigt bra. Jag tycker det är bra att man får välja vilken syntax man vill använda sig av i vyn, har man jobbat med ASP-dotnet tidigare så kan man tycka att den vanliga syntaxen är bättre eller i alla fall lättare att använda till en början. Även om razor-syntax är väldigt enkel att lära sig. När det gäller css och utseendet så måste jag lära mig lite mer. När jag kommer till denna biten så är det lätt att jag fastnar, jag kan sitta hur länge som helst och blir aldrig nöjd. Ett färgval kan för mig ta alldeles för många timmar och i ett sådant här projekt har man inte tid med det. Bli bättre på design och kunna ta snabba beslut när det gäller denna biten är något jag behöver bli bättre på. Dock har inte designen varit något direkt krav i detta arbete. Jag är nöjd med resultatet även om jag hade velat göra så mycket mer. Det finns så mycket att göra med en sådan här applikation, särskilt mindre funktioner och det hade varit kul om jag hunnit med dessa också. Det viktiga är dock att grundkraven är uppfyllda och så långt är jag nöjd. Om jag jämför mot den tidigare forskning som jag varit i kontakt med vad gäller detta ämnet så tycker jag att jag har fått med en bra bild av MVC med fokus på implementering i samband med detta. Som utvecklare tror jag att detta kan vara en intressant forskning då man får tydliga exempel på hur MVC-strukturen fungerar och då främst i ASP-dotnet.

6 Avslutning 6.1 Slutsats MVC-strukturen fungerar väldigt bra i ASP-dotnet MVC 3 och det är relativt enkelt att komma in i den. Även att jag hade en del tidigare erfarenhet så hade jag gärna haft lite till för att få en snabbare utveckling av applikationen. Parallell utveckling, återanvändning och separation av logik och presentation är klara fördelar och fungerar även riktigt bra i ASP-dotnet MVC 3 som organisera projektets olika delar på ett bra sätt. Med fördel används MVC-strukturen i större projekt.

7 Referenser 7.1 Uppsatser/Vetenskapliga artiklar 2. Chen och Han, 2008 The Research on Modern Distance Education System Based on Improved MVC Pattern, School of Computer science and technology, Shandong economic university. 2. Örman, 2007 Utveckling av affärsapplikation med mjukvarumönster, Avdelning för datavetenskap, Umeå Universitet. 7.2 Elektroniska källor 1. ASP-dotnet MVC 3 - http://www.asp.net/mvc/mvc3 [2011-05-16], http://weblogs.asp.net/scottgu/archive/2010/07/27/introducing-asp-net-mvc- 3-preview-1.aspx [2011-05-18], http://msdn.microsoft.com/enus/library/dd410120%28vs.98%29.aspx [2011-05-22] 2. MVC - http://msdn.microsoft.com/en-us/library/ff649643.aspx [2011-05- 16], http://www.martinfowler.com/eaadev/uiarchs.html [2011-05-16], http://msdn.microsoft.com/en-us/library/dd410120%28vs.98%29.aspx [2011-05-18] 3. ASP-dotnet http://msdn.microsoft.com/en-us/library/dd566231.aspx [2011-05-22] 4. Razor - http://www.asp.net/webmatrix/tutorials/2-introduction-to-aspnet-web-programming-using-the-razor-syntax [2011-05-18] 5. C-sharp - http://msdn.microsoft.com/library/z1zx9t92%28vs.100%29.aspx [2011-05- 18] 6. Mercurial - http://mercurial.selenic.com/ [2011-05-18] 7. Nhibernate - http://nhforge.org/default.aspx [2011-05-18] 8. Repository pattern - http://msdn.microsoft.com/enus/library/ff649690.aspx [2011-05-18] 9. JavaScript - http://www.w3schools.com/js/js_intro.asp [2011-05-18] 10. jquery - http://jquery.com/ [2011-05-18] 11. CSS - http://www.w3schools.com/css/css_intro.asp [2011-05-18] 12. Facebook helper - http://facebookhelper.codeplex.com/documentation?referringtitle=home [2011-05-18] 13. Visual Studio - http://www.microsoft.com/visualstudio/svse/products/2010-editions/professional [2011-05-18] 14. Partial View och Master page - http://msdn.microsoft.com/enus/library/dd410123.aspx [2011-05-18]

Bilaga Ordlista ASP-dotnet MVC 3 ASP-dotnet MVC 31 bygger på ASP.NET MVC(ASP-dotnet MVC) och dess tidigare versioner. De är versioner för utveckling med hjälp av MVCstrukturen i dotnet-miljö och används för att skapa dynamiska webbsidor. C# Applikationen är utvecklad i C#(c-sharp)5, ett objektorienterat programmeringsspråk som används för dotnet-applikationer. CSS CSS(Cascading Style Sheets)11 definierar hur en applikations olika element ska se ut och visas för användaren. JavaScript JavaScript9 är ett objektorienterat skriptspråk som fungerar i alla webbläsare. JavaScript används bland annat för att manipulera DOMstrukturen på en hemsida. jquery jquery10 är ett snabbt JavaScripts-bibliotek som förenklar händelser, animeringar och andra modifieringar på en hemsida. Nhibernate Med Nhibernate7 kan man göra om sina traditionella databaser till objektorienterade modeller och tvärt om. Nhibernate är gratis och har en öppen källkod. Mercurial Mercurial6 är ett gratis versionshanteringssystem. Som användare får man en egen lokal kopia som man kan jobba med oberoende av nätverksanslutning eller en server. Mercurial är skrivet i Python och C. Visual Studio och ASP-dotnet MVC 3 Visual Studio13 är en utvecklingsmiljö från Microsoft. Första gången ett projekt ska skapas i Visual studio kan användaren välja att skapa ett ASP-

dotnet MVC Web Application. Detta projekt innehåller separerade komponenter och mappar för MVC-strukturen och användaren får mycket hjälp på vägen. Repository pattern Ett repository8 har sin plats mellan en Controller och en Model och kan bland annat användas för att hämta eller sätta in en viss data från eller till Model. Ett repository tar hand om all dataöverföringar som sker mellan en Model och en Controller så att en Controller aldrig ska behöva arbeta direkt mot Model. På detta sätt finns all datalogik på ett och samma ställe. Facebook Helper Denna Facebook helper12 gör det möjligt att lägga till de sociala funktionerna som Facebook erbjuder i sin egenutvecklade applikation. Det går även att integrera inloggning mot Facebook genom denna helper.