Bdr. Larsens Duer juni 12 2014 IT TEKNOLOG - ITTEN0912 DATABASES AND NETWORKING. UCN AALBORG, SOFIENDALSVEJ 60, 9000 AALBORG Af Thomas Markmann Moltsen
University College Nordjylland Sted: Sofiendalsvej 60, 9000 Aalborg KLASSE: ITTEN0912 AFGANGSPROJEKT 4. SEMESTER 28 SIDER + 6 SIDER LITTERATURLISTE OG APPENDIX LAVET AF: THOMAS MARMANN MOLTSEN VEJLEDER: JESPER MICHEAL KRISTENSEN D. 12/6-2014 THOMAS MARKMANN MOLTSEN 1
INDHOLD Abstract... 5 Forord... 5 Indledning... 5 Projekt mål... 5 Problemformulering... 6 Hvad skal der gemmes?... 6 Blog delen... 6 Due kataloget... 6 Ejer info... 7 Database... 7 Tables... 8 Owner... 8 Post... 9 Image... 9 Comment... 10 Pigeon... 10 Indsætning af Data... 10 Webløsning... 11 Andre løsninger som kunne være brugt... 11 Hvad er CMS?... 11 WordPress... 11 Joomla... 12 Webmatrix... 12 Hvorfor ASp.Net og Visual Studio 2012... 12 ASP.net... 12 Fordele ved brug ASP.NEt... 13 Ulemper ved brug asp.net (i forhold til WordPress og Joomla)... 13 Udvilkingen af webløsningen... 13 Opbygning af siden... 13 Siden og under sider... 14 Funktionaliteten på de enklte sider... 15 Default.aspx... 16 2
Billeder.aspx... 17 Billeder.ASPx.CS - C# Koden i Detaljer (Billeder.aspx.cs)... 18 Duerne.aspx... 18 CreateBlogPost.aspx... 19 Øvrige Sider og Mapper... 23 Mappen - App_Code... 23 Mappen Bin... 23 Mapperne Image og Upload... 23 MasterPage.master... 23 Header.inc... 24 Site.css... 24 ErrorPage.ASPX... 25 web.config... 25 Sider som mangler... 26 Login.aspx... 26 Addpigeons.aspx... 26 addimages.aspx... 26 EditBlogPost.aspx... 26 Samlet Konklusion af Webløsning og Database... 27 Samlet Refleksion af Webløsningen og Database... 27 Future Works... 27 Lessons learned... 28 Endelig konklusion af projektet... 28 LitteraturListe... 29 Internet... 29 Appendix A... 31 Database... 31 Tabellernes egenskaber... 31 Owner... 31 Pigeons... 31 Post... 32 Comment... 32 Image... 33 3
Appendix B... 33 Webløsningen... 33 App_Code... 33 Bin... 34 4
ABSTRACT This Project is about two pigeon enthusiasts whom would like to sell their pigeon s and communicate with others of the same interest, through a blog form. The database for handling the data is made in Microsoft SQL Server Management Studio and the webpage is create with ASP.Net and made in Microsoft Visual Studio 2012. On the webpage it s possible to create blog post with pictures that are saved on the database and shown on the front page. Furthermore the are a page that show all the pigeons that are for sale. FORORD Jeg vil gerne starte med at sige tak til Karsten Larsen, som gav mig idéen til projektet og har sat mig ind i hvordan due sporten fungerer. Ligeledes en tak til min vejleder Jesper Micheal Kristensen, for god opbakning og input til projektets fremgangsmåde. Til sidst vil jeg runde af med at sige tak til min lillesøster, Sabina, for at læse opgaven igennem for stave fejl, og yderligere input for optimering af projektet. INDLEDNING Dette projekt omhandler min svigerfar Karsten Larsen og Henrik Larsen, som er to brødre fra Voerså ved Sæby, og deres interesse for duer. De er med i diverse konkurrencer, hvor de flyver med deres duer, og klarer sig rigtig godt. I Danmark er due flyvning en mindre niche sport, og er derfor ikke så meget udbredt. De har efterspurgt en hjemmeside hvor de kan kommunikere og sælge deres eftertragtede duer med andre due entusiaster. Jeg har er i dialog med dem, omkring hvordan de gerne vil have deres hjemmesiden til at se ud. De vil gerne have et due katalog, hvor alle de aktuelle duer der er til salg, samt en blog del hvor de kan fortælle om seneste flyvninger eller arrangementer der har været afholdt, ligeledes skal der være mulighed for at ligge billeder op på siden. PROJEKT MÅL Finde ud af hvad der skal gemmes Lave en database der kan håndtere den nødvendige data Gør det muligt for Karsten og Henrik at indsætte data ved brug af websiden. Lave en webløsning som kan fremvise data indsat af Karsten og Henrik. 5
PROBLEMFORMULERING Dette projekt har til hensigt at lave en den bedst mulige webside, der kan håndtere Karsten Larsen og Henrik Larsens ønsker om at kommunikere med andre due entusiaster i form af en blog. En vigtig ting i projektet er katalog delen, hvor det er muligt for de due interesserede, at finde hvilke duer der er til salg, med dertilhørende information og stamtavle. Hovedpunktet i projektet er at få lavet en database, som kan håndtere alt den nødvendige data. Før dette kan gøres, skal der laves en oversigt over hvilken slags data der skal gemmes. For at lave websiden skal der undersøges hvilke muligheder der er for at kunne lave denne, og for at bedst muligt at kunne præsentere den gældende data fra databasen. HVAD SKAL DER GEMMES? Det første der skal findes ud af, er hvad der skal gemmes. Har delt databasen op i 3 grove elementer som er: En Blog del, Due Kataloget og Ejer Info. Dette er den information som skal gemmes. BLOG DELEN De vil have et sted på siden hvor de kan ligge indlæg op, om eventuelle begivenheder, som for eksempel d. 3 maj hvor de havde due træf, med 20 andre due entusiaster. Til dette skal der også være mulighed for at sætte billeder ind samt og lave kommentere til de enkelte indlæg. Blog delen i punkt form. Oprettelse af Blog Indsætning af billeder Kommentere til hver indlæg Mulighed for senere redigering af indlæg Nemt og overskueligt kan se hvem der har lavet blog, og hvornår den er lagt op, samme gælder for kommenterende. Aktiv post eller ej Oprettelses dato DUE KATALOGET Selve due kataloget skulle være på sådan en måde at interesserede due handlere/købere kunne få mulighed for at se hvilke duer de har til salg, med dertilhørende data, om den specifikke due har. Ydermere, så er det ikke alle Duer som har Navn, eller en relevant beskrivelse, men hvad alle duerne har, er et unikt due nr., en ejer og stamtavle. 6
Due Katalog delen i punkt form. Nr. Duen Ejer Hvem ejer duen? Navn (hvis den er navn given) Beskrivelse (hvis noget er angivet) Billede (hvis noget er angivet) Stamtavle Pris EJER INFO I ejer info skal informationen om hver enkelt bruger gemmes. Af brugere, er det Karsten, Henrik, som de 2 ejere og jeg (Thomas Moltsen). Ejer info i punkt form: Brugernavn Kodeord Rigtige navn. Efter navn Eventuel beskrivelse E-mail Telefon nr. Facebook side navn Fødselsdato DATABASE Der er nu styr på hvilken slags data der skal i databasen. Se Appendix A for hver tabels egenskaber. Som er Kolonne Navn, Data type, og om Null er tilladt. Det er også muligt at se Hvilken er der Primær nøgle. I følgende afsnit bliver der skrevet om tilhørs forhold mellem de enkelte tabeler. 7
TABLES Se Figur 1. Her er der et overblik over hvordan databasens enkelte tabeler er knyttet sammen i et Chen Entity-Relations model. Owner 1 Har N Post 1 Har N Image 1 1 Har Har N N Pigeon Comment Figur 1 OWNER Owner tabelen er sat således op, at der kun kan være en Owner til hver enkelt post, da det syntes at give mest mening, samt der er ikke nogen grund til at der er 2 eller flere om at skrive et enkelt indlæg. Pigeon tabelen er lidt på samme måde lavet. Hver Owner/Ejer har flere duer, men hver due har kun en ejer. Det giver især mening når de ikke har en enes fælles ejet due. Se Tabel 1. En Owner har mange Post, men en Post kan kun have en Owner og en Post kan ikke være til uden en Owner. En Owner kan have mange Pigeon, og Pigeon kan kun have 1 Owner, men en Pigeon kan ikke være til uden en Owner. Tabel 1 Tabel Kardinalitet Forhold Tilslutning Kardinalitet Tabel Owner 1.0 Har M:N 1.1 Post Owner 1.0 Har M:N 1.1 Pigeon 8
POST Hver Post er skrevet af en Owner, men Posten kan ikke eksistere uden den er knyttet sammen med en Owner. Det samme glæder for Comment og Images, de skal have en Post for at kunne eksistere. Se Appendix A Tabeler - Post Når Post og image er lavet på denne måde, så kan billedet ikke blive knyttet til flere Post, da ImageId er primær nøgle og er sat sammen med PostId. Det betyder at hvis samme billede skal bruges i en anden post, skal det sættes ind igen. Ideen med at gøre det på denne måde var for at gør alle billederne unikke, og at de få gange det skal gøres, ses det ikke som et stort problem. Se Tabel 2. Mange Post er lavet af en Owner, men en Owner har lavet mange Post og Post kan ikke være til uden en Owner. Post har mange Comment, men Comment har kun en Post og comment kan ikke være til uden en Post. Post har mange Image, men image har kun 1 Post og Image kan ikke være til uden en Post. Tabel 2 Tabel Kardinalitet Forhold Tilslutning Kardinalitet Tabel Post 0.1 Er lavet M:1 1.1 Owner Post 1.0 Har M:N 1.M Comment Post 1.0 Har M:N 1.M Image IMAGE Se Appendix A Tabeler - Image Hvert billede er unikt, og det bliver det, med brugen af ImageId. Billedet er knyttet sammen med PostId, og så med dens navn, som er stien hen til billedet. Se Tabel 3. Image har kun en Post, men mange Image kan have samme Post, men Image kan ikke være til uden Post. Tabel 3 Tabel Kardinalitet Forhold Tilslutning Kardinalitet Tabel Image 0.1 Har M:1 M:1 Post 9
COMMENT Se Appendix A Tabeler - Comment Comment er lavet sådan at alle Comment er knyttet sammen med PosId for at gøre alle Comments unikke. Det er sågar muligt, hvis brugeren vælger dette, kan personen indsætte navn, og eventuelt e-mail til Comment til Posten. Se Tabel 4. Comment har kun en Post, mange Comment kan have samme Post, men Comment kan ikke være til uden Post. Tabel 4 Tabel Kardinalitet Forhold Tilslutning Kardinalitet Tabel Comment 0.1 På M:1 1:0 Post PIGEON Se Tabel 5. Pigeon har en Owner, men mange Pigeon har samme Owner, men en Pigeon kan ikke være til uden en Owner. Tabel 5 Tabel Kardinalitet Forhold Tilslutning Kardinalitet Tabel Pigeon 0.1 Har M:1 1.0 Owner INDSÆTNING AF DATA Den data som er indsat i databasen i følgende tabeler er blevet sat ind manuelt i MS SQL Server Management Studio: Owner Ejer information Pigeon Due information Det er også muligt at lave et Excel dokument med alt information, og så parse det med Toad for SQL Server, men da det var begrænset med hvad der skulle sættes ind, har jeg valgt at gøre det manuelt. Hvis der havde været adgang til flere Stamtavler og duer, skulle Toad for SQL Server, nok bruges for at lette opgaven en smule. Webløsning virker således at det er muligt at indsætte følgende i databasen: Post Blog indlæg o Image Billede knyttet sammen med Post o Comment Kommentar på hver enkelt Post 10
WEBLØSNING Webløsning er blevet lavet i ASP.Net ved brugen af Microsoft Visual Studio 2012. ANDRE LØSNINGER SOM KUNNE VÆRE BRUGT CMS (Content Management System) er et af svarende, såsom Microsoft WordPress, Joomla eller WebMatrix. HVAD ER CMS? CMS står for Content Management System, og består af 2 elementer som er CMA (Content Management Application) og CDA (Content Delivery Application). CMA Indebære for det mest templates som automatisere mange af aspekterne når der skal laves en side hvor meget af indholdet er gentagende. Det gør det derfor muligt for brugere at lave en side uden brugen af HTML kunnen (Se Link 2 side 29). CDA - Opdatere hjemmesiden efter den er blevet redigeret. CMS gør det nemt for brugerne at lave en hjemmeside, da nogle kan redigeres direkte i, fra browseren af, uden at der skal installeres fx MS Visual Studio, som kan være dyrt. Nogle CMS gør det nemt for brugeren, med kun begrænset viden om HTML, da de fleste sider er bygget med templates, plugins og temaer mm. CMS et holder styr på alt indholdet på siden, lige fra tekst, musik og video samt andet indhold som kunne være vigtigt for siden. Nogle CMS redskaber er gratis, mens andre koster et månedligt beløb. De fleste CMS udbyder gratis basis værktøjer, men kræver penge for de mere highend produkter. Ved highend menes der specielle domæne navne, templates af høj kvalitet og ikke mindst web hosting (Se Link 1 side 29). WORDPRESS WordPress startede som et simpelt bloggin system, men har gennem tiden udviklet sig til et fuldt ud CMS. På WordPress er der ikke behov for programmere som MS Visual Studio, da siden kan redigeres direkte bagved websiden. Det er kun host serveren som skal have installeret WordPress, for at det kommer til at virke. WordPress er også at finde som en applikation til Android, så der er mulighed at opdatere og styre sin webside, gennem mobilen eller tablet. WordPress er OpenSource, det er altså gratis at hente og bruge. På WordPress egen side er der at finde over 2.500 temaer og 31.300 plugins, gratis! Det er dog også muligt at gå på andre websider som http://themeforest.net/ for at finde temaer/plugins, de er dog ikke gratis, prisen er fra $3 og op efter. http://en.wordpress.com/notable-users/ På denne side kan man finde nogle af de store udenlandske firmaer som bruge Wordpress. Nogle af dem er: http://blog.ebay.com/, http://samsungcamera.com/ og http://blogs.reuters.com/us/ (Se Link 3 side 29). 11
JOOMLA Joomla er OpenSource, ligesom WordPress, og sammen med andre CMS er, fjerner de meget af det tekniske know-how for at sætte en webside op og styre den. På Joomlas egen webside er der at finde over 8.100 forskellige extensions, hvilket svarer til plugins hos WordPress. Det er umildbart ikke til at finde temaer på Joomlas egen webside, men der findes mange andre udbydere, både gratis og til fast pris. Joomla og WordPress minder meget om hinanden på mange måder, hvad angår installation og brugen af dem (Se Link 4 side 29). WEBMATRIX WebMatrix er et Freeware program fra Microsoft som gør det nemt at lave en webside, ved installation af eksempelvis WordPress, Joomla eller lave websiden helt fra bunden, med hjælp af extensions fra extensions gallariet. Det er indbygget autocomplet af kode, eller intellisense som kommer med forslag til hvordan koden skal se ud, i form af en liste. Det smarte ved brugen af WebMatrix og eksempelvis WordPress sammen er at, websiden kan blive kørende på nettet, og redigere i websiden lokalt ved brugen af WebMatrix, og når alt er tilfredsstillende er det muligt at publish siden, altså frigive/ligge op på nettet. Der ved er det ikke ment at websiden går ned når man redigere i den direkte fra nettet (Se Link 5 side 30). HVORFOR ASP.NET OG VISUAL STUDIO 2012 Grunden til valget faldt på ASP.net og Visual Studio 2012, var at tiden var for kort til at bruge på at kunne lære og forstå og lave en komplet siden ved brug af andre end dette. Desuden er ASP.Net og Visual Studio blevet brugt og undervist i gennem skole forløbet, og mener der er mere trykhed ved brugen af dem til opbygningen af denne side. ASP.NET ASP.NET er efterfølgeren til ASP, (Active Server Page). Microsoft har udviklet denne nye teknologi, og er meget mere end bare næste version af ASP, grundet dens mere modne programmeringssprog (Visual Basic og C#). ASP.NET er bygget på CLR (Common Language Runtime), hvilket gør programmørerne i stand til at skrive ASP.NET ved brugen af hvilken som helst understøttet.net sprog, så som Visual Basic og C#. Microsoft.NET Platformen giver en masse værktøjer, som skal bruges til at lave en Webløsning. ASP.NET er indbygget i Visual Studio.NET som giver GUI (Graphical User Interface), samt en fuldt integreret Debugger ( Fejlsøger ). ASP.NET gør det muligt at skrive HTML koden i en.aspx fil, som er alt det flotte visuelle og for at få funktionalitet på siden skrives der C# i en.aspx.cs fil (Se Link 6 side 30). 12
FORDELE VED BRUG ASP.NET Masser af funktionalitet. Hurtigt udvikling med drag-and-drop og autocomplet. Ikke nødvendigt at være ekspert i HTML for at lave simpel funktionel webside. ULEMPER VED BRUG ASP.NET (I FORHOLD TIL WORDPRESS OG JOOMLA) Det er svært at sammenlige disse to, for ASP.Net er et programmerings sprog og WordPress/Joomla er et CMS. Kræver en del ekspertise at lave en flot of funktionel side, hvor WordPress og Joomla, bare kan installere et tema. UDVILKINGEN AF WEBLØSNINGEN Jeg er ikke webdesigner, og har begrænset erfaringen med at lave hjemmesider. Begrænset erfaring, betyder at jeg har kun lavet få dele af hjemmesider, jeg har ikke været med til at lave en fuldt funktionel webløsning. Ideen med denne side er at den skal være simpel og nem at bruge. Der skal være en forside, hvor alle blog indlæggende er slået op, der skal være muligt for at kommentere på disse, mulighed for at se billeder. Alt dette er i tankerne da siden skal laves, for Karsten og Henrik, de to due ejere. Det skal også gøres muligt for dem at logge ind på siden, for at kunne oprette indlæg, sætte billeder ind, rette i dem bagefter, og for at kan styre den. Det skal ligeledes være muligt for dem at oprette nye duer i databasen, og slette dem igen, hvis de i så fald bliver solgt. OPBYGNING AF SIDEN Som sagt er der brugt Microsoft Visual Studio 2012 og skrevet i ASP.NET, helt fra bunden med en tom webform. Desuden er der også anvendt FreeTextBox, http://www.freetextbox.com/. Det er et gratis værktøj, der er nemt at installere, ved bare at sætte FreeTextBox.dll filen in i /bin/ mappen på serveren, samt at initialisere den på siden hvor den skal bruges (Se Figur 3 Side 34). <%@ Register Assembly="FreeTextBox" Namespace="FreeTextBoxControls" TagPrefix="FTB" %> 13
SIDEN OG UNDER SIDER De nævnte sider nedenunder, er de vigtigste sider på websiden, og vil her forklare ganske kort om dem. Længere nede kan for siden ses (Se Websiden 1 side 15). MasterPage.master Hvor en header fil er inkluderet med links til de andre under sider. Default.aspx Home eller start siden. o Posted.asp Hele oplægget, billeder og kommentarer. Billeder.aspx En kollektion af alle billeder på siden. Duerne.aspx Et due katalog hvor man kan finde alle duerne som er til salg o Stamtavle.asp En underside som linker videre med tilhørende stamtavle til den pågældende due. OmOs.aspx Information om ejerne De næste par side er test side, da der har været problemer med at lave en ordenligt login side. CreateBlogPost.aspx Lav indlæg o Tilføj billeder, til tidligere post. o Rediger tidligere blog posts. Resultat.aspx Skal indeholde resultater fra flyvninger Login.aspx Login-siden som har voldet nogen problemer 14
Websiden 1 FUNKTIONALITETEN PÅ DE ENKLTE SIDER I dette afsnit vil der blive afdækket nærmere hvordan de enkelte sider er lavet samt hvordan de virker i detaljer. Hver af sider er delt op i en HTML del (.ASPX) og en C# del (.CS). *Der er undladt kode, for ikke at gentage mig selv for meget. **Hver kode del vil blive vist som dette med en beskrivelse oven over. Se HTML / C# Test 1. reppost.datasource = db.posts.orderbydescending(x => x.publishdate); reppost.databind(); HTML / C# Test 1 15
DEFAULT.ASPX Det er forsiden på websiden, og hvor indlæggene fremvises, med et link videre til selve posten, (beskrevet nærmere i næste afsnit). På hvert indlæg er der en titel og navnet på hvem der har lavet indlægget, en dato for hvornår selve indlægget er skrevet, og et link videre til posten hvor der kan ses billeder og kommenteres på det. DEFAULT.ASPX - HTML KODEN I DETALJER Der er brugt en repeater til at tage data ud af databasen. Repeater en er et kontrol værktøj som kan bruges til at liste en gentagede liste, som her, hvor den skal hive alle indlæggende ud af databasen, for så at vise dem på websiden. Repeater en har ID reppost, som også bruges i C# koden (.CS filen) som kan binde den til en tabel i databasen. I selve repeater en er det muligt at vælge hvilke kolonner som skal bruges og eventuelt vises til brugeren. Se HTML Eksempel 1, her er der hevet følgende ud af databasen: Title, Owner.Name, Owner.LastName, PublishDate, BodyText og PostId kolonner ud. Owner.Name og Owner.LastName er fra Owner tabelen, men fordi OwnerId, er at finde i Post tabelen, er det muligt for repeater en at dykke ned i Owner tabelen, og finde Name og LastName. HTML koden: <asp:repeater ID="repPost" runat="server"> <SeparatorTemplate> <hr /> </SeparatorTemplate> <ItemTemplate> <div id="bold"> <h2>title: <%#Eval("Title") %></h2> <b>navn: </b><%#eval("owner.name") %> <%#Eval("Owner.LastName") %> <%#Eval("PublishDate") %> <p><%#eval("bodytext") %> </p> <a href="posted.aspx?id=<%#eval("postid") %>"><b>indlæg nr: <%#Eval("PostId") %></b></a> </div> </ItemTemplate> </asp:repeater> HTML Eksempel 1 16
DEFAULT.ASPX.CS - C# KODEN I DETALJER Se C# Eksempel 1 Linje 1, laves der forbindelse til databasen, ved at initialiser db. Linje 2, Her bliver der lavet forbindelse til Post tabelen i databasen gennem reppost. Hvor der bliver sorteret på hvornår posten/indlægget er lavet, hvor den nyeste er først/øverst. Linje 3, Her bliver data knyttet sammen med reppost, så den kan bruges i repeater en. C# Koden bagved: 1 PigeonDataContext db = new PigeonDataContext(); 2 reppost.datasource = db.posts.orderbydescending(x => x.publishdate); 3 reppost.databind(); C# Eksempel 1 BILLEDER.ASPX Her bliver alle billeder som er lagt ind på websiden vist, samt en tæller som fortæller hvor mange billeder er lagt ind. BILLEDER.ASPX - HTML KODEN I DETALJER Der er brugt en Label med ID Label1, til at vise tælleren af billederne, med hjælp fra C# koden bagved. Se HTML Eksempel 2. Repeater en har ID repimages. I linje 9 i koden nedenunder bruger img src til at tage billeder ud med, fordi i databasen er billederne gemt på sådan en måde, at de linker til billederne på webserveren. Samt er de konveneret så alle har samme størrelse. HTML Koden: 1<b><h2>Antal Billeder: <asp:label ID="Label1" runat="server" 2Text="Label"></asp:Label></h2></b> 3<asp:Repeater ID="repImages" runat="server"> 4 <SeparatorTemplate> 5 <hr /> 6 </SeparatorTemplate> 7 <ItemTemplate> 8 <div id="bold"> 9 <img src=' <%# Eval("Name") %>' Width="150px" Height="150px" /> 10 </div> 11 </ItemTemplate> 12 </asp:repeater> HTML Eksempel 2 17
BILLEDER.ASPX.CS - C# KODEN I DETALJER (BILLEDER.ASPX.CS) Se C# Eksempel 2. Her i koden er der lavet en tæller til billederne, som sætter dem ind i Label1 som er brugt i HTML. Linje 1 og 2. Bliver der lavet en SQL forbindelse til databasen, som hedder conn. Linje 3. Laves der en SQL kommando, benævnt result, hvor der bliver er en SQL query som tæller billederne, ved hjælp af COUNT og Image tabelen gennem SQL forbindelse conn. Linje 4. Åbner SQL forbindelse. Linje 5. Eksekveres SQL kommandoen og laver den til en string, som Label1 kan læses som en tekst, som i sidste ende bliver vist i HTML koden. Linje 6. Der lukkes for SQL forbindelse igen. C# Koden 1SqlConnection conn = new SqlConnection("Data Source=.\\sqlexpress;Initial 2Catalog=Pigeon;Integrated Security=True"); 3 SqlCommand result = new SqlCommand("SELECT COUNT(*) ImageId FROM Image", conn); 4 conn.open(); 5 Label1.Text = result.executescalar().tostring(); 6 conn.close(); C# Eksempel 2 DUERNE.ASPX Under fanen med Due Katalog kan der findes information om duerne der er til salg. Her oplyses duens nr., eventuelt navn og beskrivelse samt en pris på hver specifik due. Yderligere er der at finde et link videre til stamtavlen på hver enkelt due. DUERNE.ASPX - HTML KODEN I DETALJER Se HTML Eksempel 3. Her er der lavet et link ved brug af duens unikke due nr., så den nye side, hvor stamtavlen bliver vist kommer til at hedde, /Stamtavle.asp?id=(Duens nr.). HTML Koden <a href="stamtavle.aspx?id=<%#eval("pigeonid") %>"><b>stamtavle</b></a> HTML Eksempel 3 18
DUERNE.ASPX.CS C# KODEN I DETALJER Se C# Eksempel 3. Ligesom i de andre sider er der oprettet en forbindelse til databasen, den hedder db, og videre til duens tabel som hedder Pigoen. Repeateren s Id er reppigeon, og der til bliver tabelen koblet på. C# Koden PigeonDataContext db = new PigeonDataContext(); reppigeon.datasource = db.pigeons; reppigeon.databind(); C# Eksempel 3 CREATEBLOGPOST.ASPX Fanen Lav Indlæg, er hvor det er muligt at oprette et nyt indlæg som så bliver vist på forsiden. Lige pt, er det som en test, da det er mening at brugeren skal logge ind, og at websiden så kan genkende brugeren, når den har skrevet et indlæg. Derfor er der lige nu brugt en DropDownList til at kunne skifte mellem hvem der skriver et indlæg. CREATEBLOGPOST.ASPX - HTML KODEN I DETALJER Her er HTML koden for CreateBlogPost.aspx. Den er delt op i bider, så det er nemmere at overskue, samt er der gået i detaljer med de enkelte linje koder. Se HTML Eksempel 4. Her bliver der lavet en DropDownList som er benævnt ddlowner, som bliver knyttet sammen med de ejerne, der er i databasen i koden bagved. <asp:dropdownlist ID="ddlOwner" runat="server"></asp:dropdownlist> HTML Eksempel 4 Se HTML Eksempel 5. Her bliver der lavet en TextBox, hvor titlen på indlægget skal skrives, i koden bagved med id et txttitle laves der en forbindelse så titlen kommer det rette sted hen. <asp:textbox ID="txtTitle" MaxLength="100" Width="562" runat="server"></asp:textbox> HTML Eksempel 5 19
Se HTML Eksempel 6. Her er der brugt en RequiredFieldValidator, som er sat til at kontrollere om der er en titel, ved brugen af ControlToValidate="txtTitle". runat="server" Betyder at det kører på serveren og ikke klient siden. SetFocusOnError="true" Fokusset bliver flyttet til denne boks, tekstboksen er tom. ForeColor="Red" Farven er rød på skriften, som bliver vist til brugen på siden. ErrorMessage="<-- Dette felt kan ikke være Tomt!" Ved manglen på en titel bliver denne fejlmeddelelse vist til brugen. Når det så er kogt sammen, betyder det, at ved manglen på tekst i txttitle boksen, bliver fokusset rettet til boksen, samt der vil blive vist en fejlmeddelelse til brugeren. <asp:requiredfieldvalidator ID="RequiredFieldValidator1" ControlToValidate="txtTitle" runat="server" SetFocusOnError="true" ForeColor="Red" ErrorMessage="<-- Dette felt kan ikke være Tomt!"> </asp:requiredfieldvalidator> HTML Eksempel 6 Se HTML Eksempel 7. Her er der brugt FreeTextBox, som gør det muligt og nemt for brugeren at skifte skrift type, størrelse, indsætte links mm. <FTB:FreeTextBox ID="ftbEditor" runat="server"></ftb:freetextbox> HTML Eksempel 7 Se HTML Eksempel 8. Her er der brugt en FileUpload. FileUpload gør det muligt for brugeren at uploade et billede sammen med indlægget på siden. AllowMultiple="true" betyder at brugeren må vælge mere end et billede af gangen og uploade, men der har været problemer med at få det til at virker, som det skal, så det er med for at hvis det er muligt. <asp:fileupload ID="FileUpload1" runat="server" AllowMultiple="true" Title="Vælg Billede" /> HTML Eksempel 8 Se HTML Eksempel 9. Der er brugt to labels til at lave meddelelser til brugeren ved mangle på tekst eller om den er gået godt igennem. lblmessage fortæller at oplægget er gemt og hvad klokken er, med hjælp fra koden bagved. lblimage fortæller hvad om der er gemt et billede med indlægget eller ej. <asp:label ID="lblMessage" runat="server" ForeColor="Blue"></asp:Label> <asp:label ID="lblImage" runat="server" ForeColor="Blue"></asp:Label> HTML Eksempel 9 20
Se HTML Eksempel 10. Til sidst er der lavet en knap, så brugeren kan gemme. Den gemmer titlen, selve indlægget og billedet (hvis det er tilføjet). Alt dette bliver kørt i koden bagved, som kommer i næste afsnit. <asp:button ID="btnSave" runat="server" Text="SAVE" OnClick="btnSave_Click" title="gem Post"></asp:Button> HTML Eksempel 10 CREATEBLOGPOST.ASPX.CS C# KODEN I DETALJER Se C# Eksempel 4. I HTML koden er der lavet en DropDownList som er benævnt ddlowner som skal bindes til databasen, for at kunne vise de forskelle brugere. Linje 1 DataTextField henter data fra databasen og kigger efter Name som er en tekst. Linje 2 DataValueField henter data fra databasen og kigger efter OwnerId som er et nummer. Linje 3 DataSource laver db.owners til en kilde. Til når DataTextField og DataValueField kigger efter Name og OwnerId, så kigger de først i Owner tabelen, og så i Name og OwnerId Kolonnen. Linje 4 DataBind binder data sammen med ddlowner. 1 ddlowner.datatextfield = "Name"; 2 ddlowner.datavaluefield = "OwnerId"; 3 ddlowner.datasource = db.owners; 4 ddlowner.databind(); C# Eksempel 4 Se C# Eksempel 5. Linje 1 - btnsave_click Når SAVE knappen bliver trykket på, bliver denne kode eksekveret. Linje 5 Her laves thepost til et objekt, Post. Linje 7 Værdien fra DropDownListen konveneret til en int32, og det kunne i det her tilfælde være 3. Så thepost.ownerid = 3. Linje 8 Titlen bliver gemt, ved brugen af textbox en fra HTML koden, som hedder txttitle, og det skal gemmes som en tekst, så derfor kommer den til at hedde txttitle.text. Linje 9 Mangen til hvordan titlen gemmes, men i stedet for at bruge en textbox, bruges FreeTextBox i stedet for. Linje 10 Her gemmes datoen på hvornår indlægget er lavet, her bruges DateTime.Now som bruger den lokal tid. Linje 12 - thepost.active = true. I databasen er der en kolonne som hedder Aktiv, som er en boolean, og den gemmes som true. Linje 14 Her tilføjer vi alle data til thepost. Linje 15 Her gemmes alt data i databasen som er skrevet af brugeren. 21
1protected void btnsave_click(object sender, EventArgs e) 2 // New up the Context object 3 PigeonDataContext db = new PigeonDataContext(); 4 // New up the Post object 5 Post thepost = new Post(); 6 // Set the properties of the Post object 7 thepost.ownerid = Convert.ToInt32(ddlOwner.SelectedItem.Value); 8 thepost.title = txttitle.text; 9 thepost.bodytext = ftbeditor.text; 10 thepost.createdate = DateTime.Now; 11 thepost.publishdate = DateTime.Now; 12 thepost.active = true; 13 //Save Post on Database 14 db.posts.insertonsubmit(thepost); 15 db.submitchanges(); C# Eksempel 5 Se C# Eksempel 6. Det er gjort muligt at tilføje billeder på siden, og her i koden bliver der først kontrolleret om FileUpload1 har en fil. Billedet bliver i så fald gemt på serveren i mappen ~/Uploads/ med navnet som billedet har. Når alt er sket, bliver der skrevet ud i lblimage, så brugeren kan se om billedet er gemt eller ej. Linje 1 Kontrol om FileUpload1 har en fil, hvis ikke hop til linje 14, hvor en meddelelse vil blive vist at "Ingen billeder valgt". Linje 6 I FileUpload1 bliver billedet gemt i mappen "~/Uploads/" med navnet som uploaderen har givet billedet. Linje 7 Her bliver billedet gemt i databasen, som en sti til hvor billedet ligger, i dette tilfælde er det "/WebSite/Uploads/" +(Navn på billede). 1 if (FileUpload1.HasFile) 2 { 3 //Image Object 4 Image myimage = new Image(); 5 myimage.postid = thepost.postid; 6 FileUpload1.SaveAs(Server.MapPath("~/Uploads/" + FileUpload1.FileName)); 7 myimage.name = "/WebSite/Uploads/" + FileUpload1.FileName; 8 lblimage.text = "Billede Gemt"; 9 10 // Save it to the database 11 db.images.insertonsubmit(myimage); 12 db.submitchanges(); 13 } 14 else 15 { 16 lblimage.text = "Ingen billeder valgt"; 17 } C# Eksempel 6 22
Se C# Eksempel 7. Til sidst i koden bliver titelfeltet og FreeTextBox tømt, så der er blevet gjort klar til nyt indlæg. 1 txttitle.text = string.empty; 2 ftbeditor.text = string.empty; C# Eksempel 7 ØVRIGE SIDER OG MAPPER Øvrige sider skal forstås på sådan en måde, at de ikke direkte er indhold på siden, de fungerer ikke på samme måde som Default.asp og den slags sider, men derimod som hjælpe sider, som vil blive forklaret nærmere i nedenunder. MAPPEN - APP_CODE I App_code mappen er filen Pigeon.dbml lavet. I Microsoft Visual Studio, er det muligt at lave denne fil, ved at trække de relevante tabeller over som skal bruges senere. Altså, Pigeon.dbml er en kortlægningens fil, der kortlægger databasen, baseret på databasens tabeller. Se Figur 2 Side 33. Når dette er trukket ind, laver den en connection string, som kommer til at hedde PigeonDataContext. Med den kan det lade sig gøre at oprette en forbindelse til databasen, for at hente eller sende data til den. MAPPEN BIN Her er FreeTextBox.dll filen lagt ind, som automatisk opretter resten af filerne i mappen, som gør det muligt at bruge FreeTextBox (Se Figur 3 Side 34). MAPPERNE IMAGE OG UPLOAD Image er hvor stamtavlerne skal gemmes sammen med billederne af duerene og i Upload bliver alle billederne gemt fra websiden som er uploadet at brugeren. MASTERPAGE.MASTER MasterPage.master indeholder header filen Header.inc + Style.css. MasterPage er den overordnede side, som gør det muligt at lave alle sider ens, på en nemmere måde, ved at spare på en masse kode. Det sker ved at de øvrige sider bruger MasterPage som en ramme. Tag for eksempel Default.aspx, hvor der kun er en Repeater sat ind og siden ligner de andre, grundet MasterPage. 23
HEADER.INC I Header.inc er der lavet links rundt til de forskellige sider, som webløsningen indeholder. Header.inc er inkluderet i MasterPage.Master for at kunne vise alle disse links, samt er der brugt et ID som heder Menu, som er formateret i Site.CSS. Se CSS Eksempel 1. Padding bestemmer hvor tæt eller adskilt elementet skal være, som den er sat til. Her er den 0px(pixel), som betyder den er så tæt på så muligt. ul#menu { padding: 0px; margin: 0; } CSS Eksempel 1 SITE.CSS HTML er hvad front siden er skrevet af, altså selve strukturen af hvordan websiden ser ud. CSS gør det nemt at redigere de forskellige tags, så som H1 (Heading 1/Headline 1/Overskrift 1), tr (tabel række). Det kan også lade sig gør at give en hel sektion, eller tabel med samme CSS design. Det er sågar også muligt at give forskellige sektioner, forskellige ID, for eksempel: <div id = main >, <div id = blog > osv. Inde i site.css fil er det så muligt at redigere dem (Se Link 7 side 30). Se CSS Eksempel 2. Tag koden her nedenunder. # = med ID et. Så hvis vi nu bruger <div id = main > så vil <div> bruge dette stykke CSS kode til at formatere resten af sektionen, så den for en padding på 30 pixel og med en hvid baggrunds farve. #main { padding: 30px; background-color: #ffffff; } CSS Eksempel 2 CSS står for Cascading Style Sheets. Det smarte ved at have en.css fil er at det kan lade sig gøre at genbruge et styk kode flere gange. I denne webside er der lavet en site.css som er initialiseret på MasterPage, og derved på resten af siden, fordi de arver MasterPage. I Site.css er der hvor det flotte ved siden er lavet, så den er lidt mere spændende at se på. Det er i denne fil som bl.a. får toplinksne til at reagere som de gør, og ser ud som de nu gør. Se CSS Eksempel 3, her laver den alle overskrifter om til denne stil, og det er ens for alle som hedder h1. Det er ment med at de her følgende værdier: 24
Font (skrift type) er Georgia, serif. Border-bottom (Det er linjen under overskrift) - 3px solid #cc9900; som så sætter linjen til at være 3 pixel tyk og laver farven om til orange ish. Color er farven på teksten..css kode /*Overskriften på de enkelte sider (H1)*/ h1 { font: Georgia, serif; border-bottom: 3px solid #cc9900; color: #996600; } CSS Eksempel 3 ERRORPAGE.ASPX Er lavet for at sløre, hvis der skulle opstå en fejl. Hvis en fejl skulle opstå, vil der komme et billede op, med en 404 fejl, som så linker videre til forsiden. WEB.CONFIG I denne fil er det muligt at konfigurer websiden. Se web.config Eksempel 1. Her er den autogenereret connection string som blev lavet i Pigeon.dbml filen. <add name="pigeonconnectionstring" connectionstring="data Source=.\sqlexpress;Initial Catalog=Pigeon;Integrated Security=True" providername="system.data.sqlclient"/> web.config Eksempel 1 For at kunne lave en custom made/bruger differeret fejl, skal der gives lov i web.config filen. Det sker ved hjælp af følgende kode. Se web.config Eksempel 2. Som simpelt betyder at der er givet lov til at lave bruger differeret fejlside, som automatisk omdirigerer til ErrorPage.aspx. <customerrors mode ="On" defaultredirect="~/errorpage.aspx" /> web.config Eksempel 2 25
SIDER SOM MANGLER Som det kan ses på websiden mangler der en del sider for at websiden bliver fuldt ud optimal og funktionel. I denne sektion vil der blive kastet lys over nogle af siderne som mangler, for at lave en ordenligt webside. LOGIN.ASPX Planen med denne side er at brugeren logger ind på siden og derved har adgang til at skrive indlæg, og redigere i dem, samt at kunne tilføje og oprette nye duer efterhånden. Der har været problemer undervejs, med at kunne lave det ordenligt. MS Visual Studio indbygget Membership, hvor det er muligt at oprette profiler, og styre rettigheder til hver enkelt bruger. Ville gerne have brugt noget lignede, bare ved brug af den database der er i forvejen, og da der kun skal være max tre brugere, ses der ingen grund til at dele dem op i brugergrupper med forskellige rettigheder. ADDPIGEONS.ASPX På denne siden er det meningen at brugeren skal have mulighed for at oprette nye duer i databasen: PigeonId Som er duens nr. Name Eventuelt navn. Description Eventuel beskrivelse. Image Mulighed for eventuel uploading af billede. Stamtavle Muligheden for at upload stamtavle. Price Pris på duen. ADDIMAGES.ASPX Her i AddImages.aspx er det meningen at det skal gøres muligt at uploade og fjerne billeder fra det enkelte indlæg. Det skal også være muligt at upload mere end et billede af gangen. Nu er siden sat op som test, med en DropDownList som viser alle titlerne på de posts som er i databasen. Så det er muligt at vælge en titel og tilføje et billede der til. Ville gerne have vist hele titlen, Indlægget og hvem som har skrevet det. Men det har været svært at skrive data ud, for så at kunne vise det til brugeren. EDITBLOGPOST.ASPX I EditBlogPost.aspx er det intentionen at der skal rettes i ældre indlæg, for eksempel for stavefejl, lave en post aktiv eller ej, og ikke mindst at skrive videre på en post. 26
SAMLET KONKLUSION AF WEBLØSNING OG DATABASE Konklusionen af projektet er at databasen og webløsningen virker okay. Lige nu fungerer webløsningen som en blog, hvor det er muligt at ligge indlæg op og der kan kommenteres på de forskellige indlæg, gennem websiden kan der tilføjes et billede til de enkelte indlæg. Det er også muligt at tilføje ekstra billeder, til i forvejen eksisterende indlæg. På websiden er der også lavet et katalog, hvor der kan ses de duer som er til salg, med dertilhørende information og stamtavle. Valget faldt på ASP.Net og Visual Studio 2012, til opbygningen af webløsningen, da det virker mest optimalt for mig, da at hoppe ud i noget nyt, muligvis ville tage for meget til, konsekvensen af dette er at projektet ikke blev færdiggjort til tiden. Databasen virker som den skal, den gemmer de oplysninger der kommer fra websiden. I øjeblikket kan der kun ligges duer ind i databasen manuelt, da webløsningen ikke understøtter dette endnu. SAMLET REFLEKSION AF WEBLØSNINGEN OG DATABASE Det er en meget simpel webside der er blevet lavet, med en dertilhørende lille databasen som virker som den skal. Hvis der havde været mere tid, skulle der være tilføjet Kategorier og Tags til blog delen, for at dele den op og gøre den mere overskuelig. En Søge boks ville også hjælpe med at kunne søge, både på billeder, tags, Kategorier, skribent, duer osv. Tidspresset har voldet store problemer ved at skabe et Login, og har haft svært ved at få dette til at virke. Jeg har prøvet at implementere MemberShip, men har ikke fået dette til at fungerer som jeg gerne vil og har derfor måtte undlade dette. Der kan også udvikles en Resultat fane som skulle være i fire dele: Indlands, Mellem lang, Lang distance og Marathon flyvninger. Det er de fire forskellige distance der bliver fløjet i brevdue flyvninger. Der til vil der også være en tilhørende database som vil understøtte dette element. FUTURE WORKS Dette projekt er ikke overstået efter projektets afslutning, der skal arbejdes videre med dette, men denne gang skal det af prøves med WordPress, og nogle af dens mange plugins og temaer for at forhåbentligt at lette arbejdes gangen. Alt dette skal testes grundigt ved brug af MS WebMatrix. Når alt dette er blevet undersøgt nærmere og udviklet, skal der findes en måde at hoste det hele på, så det bliver tilgængeligt på nettet for andre de andre due entusiaster. 27
LESSONS LEARNED Det har været en sjov, irriterende, spændende, fustrende og lærerig oplevelse at lave sådan et stort projekt alene. Jeg har lært en masse ved at arbejde alene, og ved at gå ned i detaljer i dette projekt. Det dejlige ved at arbejde alene er at være fri for at skulle være afhængig af andre, med hensyn til mødetidspunkter, og at lave planer for at arbejde bedst muligt sammen. Det har dog også til tider været frustrerende at være alene med projektet, når for eksempel jeg gik i stå, med et eller flere problemer, kunne det have været en stor fordel at kunne diskutere med en sparingspartner som har været inde i projektet. ENDELIG KONKLUSION AF PROJEKTET Efter færdiggørelse af projektet, har jeg været i dialog med Karsten Larsen, den ene af de to brødre. Han kan godt lide siden, og kan se idéen med den, han mener dog at websiden måske er lidt for simpel. Ved simpel mener han, at den mangler noget visuelt såsom nogle billeder og mere spændende farver. Dette har jeg valgt at nedprioritere grundet manglende tid og grafiskdesign erfaring. Jeg har snakket med Karsten om at fortsætte med websiden og lave den om, så den forhåbentligt bliver bedre med brugen af WordPress og dens farverige temaer. Drømmen er at få udarbejdet en endelig webside som kan blive tilgængelig på nettet og hvor de har muligheden for at vise deres duer frem, og fortælle om deres erfaringer og flyvning gennem bloggen til de interesserede due entusiaster. 28
LITTERATURLISTE INTERNET TechTerms: CMS Lokaliseret d. 10/6-2014 på: http://www.techterms.com/definition/cms Link 1 SearchContentManagement: Content management application (CMA) Lokaliseret d. 10/6-2014 på: http://searchcontentmanagement.techtarget.com/definition/content-management-application-cma Link 2 Wordpress.org: WordPress Features Lokaliseret d. 10/6-2014 på: http://codex.wordpress.org/wordpress_features Mediarealm.com: WordPress Pros and Cons Lokaliseret d. 10/6-2014 på: http://mediarealm.com.au/articles/2013/04/wordpress-pros-and-cons/ WordPress.org: About WordPress Lokaliseret d. 10/6-2014 på: http://www.wordpress.org/about/ Link 3 Joomla.org: What is Joomla Lokaliseret d. 10/6-2014 på: http://www.joomla.org/about-joomla.html WhatIs.com: Joomla! Lokaliseret d. 10/6-2014 http://whatis.techtarget.com/definition/joomla Youtube.com: What is Joomla? Learn about the Joomla! Application Lokaliseret d. 10/6-2014 på: https://www.youtube.com/watch?v=qjnc0h8utks Link 4 29
Microsoft.com: WebMatrix3 Lokaliseret d. 10/6-2014 på: http://www.microsoft.com/web/ Link 5 Netinformations.com: What is ASP.NET? Lokaliseret d. 10/6-2014 på: http://asp.net-informations.com/introduction/what-is-asp-net.htm Link 6 W3schools: CSS Introduktion Lokaliseret d. 10/6-2014 på: http://www.w3schools.com/css/css_intro.asp HTML.net: Lesson 1: What is CSS: Lokaliseret d. 10/6-2014 på: http://html.net/tutorials/css/lesson1.php Link 7 30
APPENDIX A DATABASE TABELLERNES EGENSKABER OWNER Se DB Tabel Eksempel 1. DB Tabel Eksempel 1 PIGEONS Se DB Tabel Eksempel 2. DB Tabel Eksempel 2 31
POST Se DB Tabel Eksempel 3. DB Tabel Eksempel 3 COMMENT Se DB Tabel Eksempel 4. DB Tabel Eksempel 4 32
IMAGE Se DB Tabel Eksempel 5. DB Tabel Eksempel 5 APPENDIX B WEBLØSNINGEN APP_CODE Databasen i Microsoft Visual Studio. Se Figur 2. Figur 2 33
BIN FreeTextBox. Se Figur 3. Figur 3 34