Hurtig Udvikling - Et Nyhedssystem i ASP.NET

Tags:    asp.net
Skrevet af Bruger #2730 @ 30.04.2009
Denne artikel er for udviklere der er bekendt med LINQ og som er vandt til at arbejde med Web sider, jeg forklarer ikke alle begreberne så en vis form for viden indenfor dette er nødvendig.

Indledning


I den seneste tid er jeg blevet stillet overfor nogle dilemmaer. I forbindelse med finanskrisen er der ikke mange firmaer der vil suse ud og ansætte nye folk, men der er stadig arbejdsopgaver, så man hyrer nogle freelancere eller mindre firmaer til at udvikle. Når der ikke er så mange penge til udviklingen stiller det nogle nye krav til os som udviklere - hvor hurtigt kan vi lave det, og hvordan bliver kvaliteten? For at være realistisk skal vi som udviklere også begynde at kigge rundt efter en måde at kode smart på, genbrugbare komponenter, CMS osv. alt efter hvad man laver. I denne artikel vil jeg lave et simpelt nyhedssystem, med nyheder, administration (opret, slet, opdater). Jeg starter mit stopur når jeg begynder at kode og stopper det igen når jeg er færdig. Formålet er også at få os udviklere til at bide lidt af stoltheden i os omkring kvalitet og måske fokusere mere på at få et produkt ud over disken.

Teknologierne


Normalt når jeg udvikler bygger jeg det hele selv, jeg har nogle hjælpeklasser til at bygge database forbindelser og forskellige hjælpemetoder til at styre oprettelsen af objekter. Det vil sige at på et eller andet tidspunkt har jeg lavet det hele selv. I denne artikel vil jeg bruge "Linq" og "Linq to Sql" til at håndtere mine data og så nogle hurtige kontroller til at redigere med. Mine udviklingsmiljøer er Microsoft Visual Studio 2008 Professional Edition, samt Microsoft SQL Server 2008

Datagrundlaget


Det første jeg vil gøre er at sikre at jeg har et fornuftigt datagrundlag. Jeg bygger to tabeller i en database og laver et indbyrdes forhold mellem dem.



Nyhedssystemet består af to tabeller, en tabel til at holde nyheder og en til at holde kommentarer til disse nyheder. Der er en fremmednøgle på kommentar tabellen der peger på den nyhed den enkelte kommentar er tilknyttet. Meget simpelt. Begge Id kolonnerne er Identity og tæller selv op hver gang der indsættes. Bemærk at jeg ikke kobler mine kommentarer på i denne artikel, principperne er de samme som vises her, tabellen er brugt her for at illustrere det forhold som opbygges mellem databasen og mine klasser.

Linq to SQL Klasser


Nu er databasen på plads og klar til at sætte nyheder og kommentarer ind i. Jeg laver en ny ASP.NET applikation og gør klar til næste skridt. Det næste jeg vil gøre er at bygge mine klasser der skal repræsentere mine tabeller, dvs. min forretningslogik. Til det formål tilføjer jeg et nyt element til min solution som er af typen: "LINQ to SQL Classes".



Når jeg tilføjer den til min løsning får jeg en ny fil i min løsning og den åbner op i mit Visual Studio og klar til at blive redigeret. Jeg skal nu have fat i min database fra min ServerExplorer (View->Server Explorer, hvis den er gemt) i Visual Studio (ganske som der står på min nye komponent) Jeg vælger at koble på min database og trækker mine tabeller fra min database ind i min nye komponent.



Som vi kan se så bygger vores "LINQ to SQL Classes" komponent en model der ligner den vi har i vores database. Det den rent faktisk har gjort er at bygge en række klasser der hedder det samme som vores tabeller og bygget collections mv. til at styre disse klasser. Vi har sparet en masse arbejde her. Hvis vi kigger på filen i NyhedsSystem.designer.cs som ligger under vores nytilføjede "LINQ to SQL Classes" så kan vi se at den har oprettet partial klasser således vi ikke skal ændre i det autogererede hvis vi vil udvide klasserne.

Præsentation


Vi har allerede en Default.aspx web form klar til cores visning af det nye artikelsystem, men før vi kan nå dertil skal vi lige kunne oprette, slette og redigere i en nyhed. Der tilføjes nu en ny side til vores løsning, som hedder "AdminVisNyheder.aspx" den skal indeholde en visning af vores nyheder. Jeg tilføjer en ny DataList til siden, kalder den for "NyhedsDataList", herefter skal vi have lavet en simpel template til hvert af de items jeg vil vise deri. Jeg vil have en overskrift efterfulgt af de forste 50 tegn fra indholdet, et "slet" og et "rediger" link. Denne template bygges let ved at bruge de værktøjer som Visual Studio giver os ved at klikke på "edit templates" linket og så bare smide de labels og de links på man vil have, mit ser ud som nedenstående:

Fold kodeboks ind/udKode 


Når dette er på plads er tid til at binde vores tabel på vores dataliste, dette gøres let i vores codebehind hvor vi i vores page_load eventhandler sætter vores data listes datasource samt beder den om at databinde.

Fold kodeboks ind/udKode 


Nu begynder det rigtigt at give mening, vi laver en ny instans af vores "LINQ to SQL Classes" klasse som vi har autogenereret på baggrund af vores database. På variablen nhContext kan vi nu se at vi har en række properties, blandt andet en der hedder "Nyheds" det er en liste af vores "Nyhed" object, som vi kan se er der blot sat et "s" på for at angive flertal, det fungerer ikke så godt på dansk. Vi assigner listen som data source og beder den om at databinde. Det næste der skal laves er at styre hvilken data der kommer i den template vi lavede til at holde vores liste. Vi går i design mode igen og markerer vores DataList og finder den event der hedder "ItemDataBound" denne event bliver udført een gang for hvert element i vores liste der bliver bundet til DataListen. Her skal vi have fat i vores 2 labels og de to links for at give dem den rette tekst.

Fold kodeboks ind/udKode 


Første trin er at finde de enkelte labels og hyperlinks, dernæst sætter vi deres værdi, meget simpelt. Hvis vi kører det nu ser vi ikke andet end en hvis skærm da vi ikke har nogle data i vores database. Lad os tilføje en LinkButton efter vores DataList som peger over på en ny side vi samtidig opretter, der hedder: "OpretNyhed". På denne side tilføjer vi to labels, to tekstbokse og en knap.



Dobbeltklik på knappen så vi kommer ned til eventhandleren. Nu vil vi lave en ny nyhed, indsætte den og redirecte browseren til liste siden. Igen skal vi arbejde med vores "LINQ to SQL Classes" og lave en ny instans, indsætte en ny nyhed og gemme den i databasen.

Fold kodeboks ind/udKode 


Igen bruger vi alle de klasser som er blevet autogeneret. Det eneste vi skal gøre er at implementere det på vores sider. Til sidst redirecter vi til vores liste og der bliver nu vist det antal nyheder vi har indsat.



Så skal der opdateres, vi laver igen en side (selvom vi sagtens kan bruge vores oprettelses side, men for eksemplets skyld laver vi en ny). Kalder den "RedigerNyhed.aspx" og laver samme layout som på opret siden. Denne side er forskellig på to måder, for det første skal den hente den nyhed der skal redigeres og vise teksten i tekstboksene, den skal også opdatere i stedet for at indsætte. Første henter og populerer vi vores tekstbokse.

Fold kodeboks ind/udKode 


Nu bliver det lidt specielt, læg mærke til at vores "LINQ to SQL Classes" klasse bliver erklaret udenfor, det er fordi vi skal operere på samme kontekst, når vi henter ud og når vi opdaterer. I Page_Load event handleren henter vi det id ud vi har sendt med tidligere (da vi lavede vores DataListe), det bruger vi så til at lave en LINQ forespørgsel på vores nyheder og henter den ene nyhed der har samme id som det vi har modtaget. Dernæst populeres vores tekstbokse, således man kan rette i dem. Når man så skal gemme ændringerne, bruger vi igen samme kontekst (samme objekter) så vi har læst ud, ændrer deres properties og skriver ændringerne tilbage til databasen.

Det sidste vi mangler er at slette. Det er ligeså nemt som det andet. Da vi lavede vores DataListe lavede vi også vores slet link som pegede på vores "AdminVisNyheder.aspx" side. Vi skal nu til at arbejde med den side igen og sørge for at den kan slette en nyhed. Vores Page_Load skal ændres så vi sletter før vi loader dem vi vil vise.

Fold kodeboks ind/udKode 

Igen, er det nemt at arbejde med klasserne, det eneste der er lidt omstændigt her, er at vi skal hente den nyhed vi vil slette første før vi kan arbejde med vores liste, det er heldigvis nemt.

Så er administrationen færdig. Det sidste der nu mangler er at lave vores forside til nyhedssystemet. Det er efter samme princip som vi lavede vores administrationsside, dog med en mindre ændring. Til forsiden af systemet vil vi gerne have sorteret vores nyhedsindlæg så de nyeste står øverst, det vil sige vi skal have dem sortere, og vi skal ikke længere kun vise en del af teksten, men hele teksten.

Fold kodeboks ind/udKode 


Igen som tidligere benytter vi vores "NyhedsSystemDataContext" klasse til at stille en LINQ forespørgsel imod, denne gang sorterer vi det, databinder det og vupti så har vi vores forside til vores nyheder.



Afslutning


Stopuret siger 28 minutter, det er også fornuftigt for et simpelt nyhedssystem med administration. Formålet er naturligvis at vise hvor hurtigt man kan komme i gang med at skabe resultater, hvis man som i dette eksempel benytter "LINQ to SQL Classes" som forretningslag.


Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Kommentarer (4)

User
Bruger #14381 @ 04.05.09 06:19
28 minutter.... Er det ikke bare det, som det tager for de fleste af den slags systemer?

Jeg kan huske da jeg skulle sætte en lignende funktion op på mit eget webhotel med, overskrift, dato, og besked og det tog da ikke meget længere tid.

Det var så i ASP 2.0 Vs. MySQL Men stadig, det blev kodet i notepad:D
User
Bruger #2730 @ 04.05.09 08:15
Jeg synes nu 28 minutter er pænt hurtigt, med transaktionsstyring, database, database lag, klasser der kan udviddes, administration (create, update, delete). Måske er det bare mig der er langsom :-)
User
Bruger #10049 @ 21.10.09 17:00
Super god artikel der forklarer godt hvordan det hele hænger sammen.
User
Bruger #15758 @ 13.04.10 15:36
Godt lavet!
Det er slet ikke det.
Men ville det ikke være meget nemmere bare at smide et formview op og så tilrette det efter som man nu vil have det :)?
Du skal være logget ind for at skrive en kommentar.
t