.NET 2.0: Web applicaties met ASP.NET
Door Michiel van Otegem
24 juli 2008
Wie weinig kennis heeft van het maken van web applicaties kan met ASP.NET 2.0 snel iets tastbaars
neerzetten. Voor veel voorkomende zaken is namelijk niet of nauwelijks code nodig. Het plaatsen
van controls die het werk doen is in die gevallen al genoeg. Je kunt controls beschouwen als niets
meer dan speciale HTML tags met wat bijzondere attributen (eigenschappen). Door de nodige
attributen te voorzien van waardes, worden de controls van informatie voorzien van wat ze moeten
doen en eventueel weergeven. Je kunt dus ASP.NET pagina’s maken met een HTML- of tekst-editor. Ook
als er code aan te pas moet komen zou je daarmee uit de voeten kunnen, omdat code in de pagina
zelf kan staan. Handiger is het echter om gebruik te maken van Visual Studio, de ontwikkelsuite
van Microsoft. Daarin hoef je niet in de HTML te gaan zitten ploeteren, maar kun je de eigenschappen
van controls via een handige interface instellen. Sommige controls bieden zelfs wizards waarmee je
door het instelproces geloodst wordt. Verder biedt Visual Studio allerhande hints bij het schrijven
van code. Visual Studio is dus echt een toegevoegde waarde bij het ontwikkelproces. Voor wie de
professionele versie van Visual Studio te duur vindt, brengt Microsoft ook een aantal instapmodellen
op de markt onder de noemer Visual Studio Express (zie http://msdn.microsoft.com/express).
Deze instapmodellen worden waarschijnlijk gratis, en anders zeer mild geprijsd. Voor het maken van
ASP.NET applicaties gebruik je Visual Web Developer Express met eventueel SQL Server Express als
database voor je applicatie. Vanaf Beta 2 is dit de standaardkeuze, omdat SQL Server Express een
aantal voordelen heeft ten opzichte van onder andere Microsoft Access, dat bij Beta 1 nog de
standaard database was. Het is aan te raden om inderdaad van SQL Server Express gebruik te maken.
De keuze daarvoor kun je maken tijdens het installatieproces. Visual Web Developer wordt geleverd
met een speciale ingebouwde web server, zodat je geen web server hoeft te installeren om te kunnen
ontwikkelen. Deze web server staat standaard uit, en wordt alleen gestart op het moment dat dit
nodig is. Dit gebeurt elke keer op een andere TCP/IP poort en ook nog eens een in de hogere cijfers
(bijvoorbeeld 19460), zodat het veiligheid risico beperkt is. Dit is verder beperkt doordat alleen
browsers op de lokale machine toegang krijgen. Verbindingen vanaf andere computers worden onmiddellijk
verbroken.
Pagina indeling
Een ASP.NET applicatie bevat net als een “gewone” web site pagina’s. Het verschil is dat HTML
pagina’s statisch zijn, terwijl het resultaat van een ASP.NET pagina bijvoorbeeld af kan hangen
van de gegevens in een database. Eén ASP.NET pagina kan meerdere HTML pagina’s vervangen, bijvoorbeeld
in het geval van een nieuwspagina die aan de hand van de keuze van de gebruiker een bepaald artikel
laat zien. In een conventionele HTML site heb je daar meerdere HTML pagina’s voor nodig. Een
ASP.NET pagina bestaat uit HTML met daartussen ASP.NET controls. Verder kan een pagina code bevatten
tussen tags. De code kan echter ook in een apart bestand
opgeslagen worden, zodat de code en de opmaak gescheiden zijn. Optioneel kan een pagina beginnen
met een aantal aanwijzingen, bijvoorbeeld welke programmeertaal in de pagina gebruikt wordt of in
welk bestand de code staat indien er gebruik gemaakt wordt van de mogelijkheid om opmaak en code
te scheiden. Afbeelding 1 laat de pagina indeling zien van een pagina met de code in de pagina zelf.
Afbeelding 1, Pagina indeling
In Visual Studio ben je over het algemeen niet zo direct met de pagina indeling bezig, tenzij je
de pagina bekijkt in Source-weergave. Voor de meest voorkomende operaties zul je gebruik maken van
de Design-weergave. In de Design-weergave zie je een visuele representatie van de pagina zoals die
ongeveer wordt als je de pagina in een web browser opvraagt. Controls kun je in de weergave
herkennen aan een groen pijltje in de linker bovenhoek. Nieuwe controls kun je vanuit de toolbox
op de pagina slepen (dit kan ook in Source weergave). Wanneer je dat doet of als je een control
selecteert kun je in het Properties venster eigenschappen van de control instellen. Die wijzigingen
worden automatisch doorgevoerd naar de onderliggende HTML. Ook komt er bij de rechterbovenhoek een
pijltje te staan voor een uiklap menu. Als je op het pijltje klikt komt een menu voor de
betreffende control te voorschijn met daarin acties voor de betreffende control, zoals je kunt
zien in Afbeelding 2.
Afbeelding 2, Acties menu bij een control
Uniforme opmaak
Een belangrijk aspect van een web applicatie is een uniforme opmaak. Je kunt daar het beste mee
beginnen, in elk geval in grote lijnen, want het is lastig om dit achteraf voor een site te regelen.
Een uniforme opmaak behelst een aantal zaken, waaronder de pagina indeling, lettertypes, en dezelfde
knoppen en dergelijke voor dezelfde acties. Nu kun je een behoorlijk gedeelte hiervan verzorgen
met Cascading Style Sheets (CSS), maar dat kan zeer ingewikkeld worden. ASP.NET 2.0 biedt een
aantal complementaire mogelijkheden om een uniforme opmaak te verzorgen. Het eenvoudigst is het
principe van Master Pages. Een Master Page is een sjabloon voor een pagina, bijvoorbeeld met het
logo,navigatie en andere onderdelen die op alle pagina’s voor moeten komen. Binnen een Master Page
definieer je één of meerdere content regio’s. Wanneer je een pagina baseert op een bepaalde Master
Page, kun je in die pagina de content van die regio’s bepalen. Dit concept is niet nieuw, maar
ASP.NET 2.0 geeft het wel nog de nodige extra’s. Zo kun je vanuit een pagina die gebaseerd is op
een Master Page de betreffende Master Page benaderen en eventueel wijzigen. Verder kun je onder
bepaalde voorwaarden tijdens het uitvoeren van de pagina een andere Master Page selecteren, en kun
je een Master Page baseren op een andere Master Page. Zo kun je dus een algemene opmaak maken en
vervolgens voor bepaalde onderdelen van een site een enigszins andere opmaak gebruiken, bijvoorbeeld
een onderdeel van een web winkel met alleen producten van een bepaalde leverancier in andere
kleurstelling. Wanneer je in Visual Studio een pagina baseert op een Master Page dan is in
Design-weergave de Master Page te zien. Om te laten zien dat het om de Master Page gaat zijn
content regio’s duidelijk gemarkeerd en is de Master Page niet te selecteren en wijzigen in de
Design-weergave van de pagina. Je kunt dit zien in Afbeelding 3 waarin 1 content regio gedefinieerd
is (Content1), die gemarkeerd is met een grijze balk. Alles daarboven is onderdeel van de Master
Page en niet te wijzigen.
Afbeelding 3, Pagina gebaseerd op een Master Page in Visual Studio
Met alleen Master Pages ben je er nog niet als het gaat om een uniforme opmaak. Complementair hieraan is het principe van Themes. Eigenlijk is dat net zo als Themes voor bijvoorbeeld de Windows Desktop. Het bepaalt de gehele opmaak van alle elementen in een pagina op basis van een Theme-bestand, vergelijkbaar met een CSS-bestand. In CSS geef je echter aan hoe bepaalde HTML elementen onder bepaalde voorwaarden opgemaakt moeten worden. Een Theme-bestand daarentegen bevat control definities die min of meer gelijk zijn aan hoe die in de HTML van een pagina staat. De betreffende definitie wordt samengevoegd met de definitie die in de pagina staat. Door op de definitie in de pagina alleen functionele eigenschappen in te stellen wordt de opmaak definitie uit het Theme-bestand gebruikt. Dit maakt Themes veel makkelijker te gebruiken dan CSS, omdat vanuit het Theme-bestand heel duidelijk is hoe een control eruit komt te zien. Onder de kap wordt een control echter tot HTML en CSS geconverteerd (als de browser CSS ondersteunt), en kun je ook verwijzen naar een CSS class definitie. Je hebt dus wel de lusten maar niet de lasten van CSS.
Binnen een Theme kun je meerdere definities voor dezelfde control plaatsen, zodat binnen een Theme bijvoorbeeld een OK-knop en een Annuleren-knop er anders uit kunnen zien. De verschillende definities zijn “skins” voor de control die onderscheiden worden door een SkinID. Op de pagina geef je aan welke skin een control moet gebruiken aan de hand van de SkinID.
Naast opmaak kan een Theme ook afbeeldingen bevatten die gebruikt moeten worden voor bijvoorbeeld knoppen. Je bent dus niet beperkt tot pure opmaak via HTML en CSS, maar kunt per Theme ook aanpassingen doen van andere visuele elementen. Verder kun je net als Themes in Windows meerdere Themes definiëren en de gebruiker eventueel de gelegenheid geven een Theme te kiezen en dit opslaan in het gebruikersprofiel. Afbeeldingen 4 en 5 laten dezelfde pagina zien op basis van verschillende Themes.
Afbeelding 4, Pagina op basis van een Theme
Afbeelding 5, Pagina van afbeelding 5 met een andere Theme
Werken met een gegevensbron
Zo ongeveer de meest voorkomende reden om een technologie als ASP.NET, PHP, JSP, of iets dergelijks
te gebruiken is om gegevens weer te geven uit een gegevensbron. Dit is meestal een database, maar
het is ook mogelijk dat dit tekst of XML bestanden zijn. Helaas is dit ook meteen iets wat betrekkelijk
ingewikkeld is, omdat je de gegevens uit de database of het bestand moet lezen, en deze vervolgens
moet weergeven in een pagina. Wil je door de gegevens heen kunnen bladeren en eventueel gegevens
willen wijzigen, dan vereist dit al snel behoorlijk wat programmeerwerk en dus programmeerkennis.
Die kennis is dan vaak ook nog specifiek voor een bepaald type gegevensbron, zodat je bij een
ander type bron weer helemaal bij het begin moet beginnen. ASP.NET 2.0 brengt hierin verandering.
Je kunt uitsluitend op basis van controls gegevens weergeven, wijzigbaar maken, enzovoorts.
Afhankelijk van welke opmaak je wilt is dit in slechts enkele minuten te regelen, zonder dat je nu
echt geweldige programmeerkennis moet hebben. Dit komt omdat de communicatie met de gegevensbron
gedaan wordt via een zogenaamde Data Source control. Omdat dit ook weer gewoon een control is,
hoef je slechts de benodigde eigenschappen (bijvoorbeeld welke database je wilt gebruiken) in te
stellen. Ook hier is er meestal een wizard je handje helpt. De controls waarmee gegevens weergeven
moeten worden koppel je vervolgens aan de Data Source control waarvan je gegevens weer wilt geven.
Afhankelijk van de controls die je hiervoor kiest en afhankelijk van wat mogelijk dan wel ingesteld
is op de Data Source control kun je naast het weergeven van gegevens deze ook wijzigen, er doorheen
bladeren, en sorteren. Nu zal de doorgewinterde ontwikkelaar z’n bedenkingen hebben bij deze aanpak,
omdat het erop lijkt dat je de business logica overslaat en dus teruggrijpt naar een soort
client-server model. Dit is echter maar schijn, omdat een Data Source control gebaseerd is op
afspraken over hoe gegevens aangeleverd moeten worden en hoe deze te wijzigen zijn. Elke control
die zich aan deze afspraken houdt kan fungeren als een Data Source voor andere controls. Dit kan
dus ook een business logica object zijn. Je kunt zelf Data Source controls maken, maar in veel
gevallen is de Object Data Source control afdoende. Met die control kun je ieder object dat bepaalde
functies implementeert als gegevensbron laten dienen. In Afbeelding 6 zie je hoe gemakkelijk het
is om gegevens in tabelvorm weer te geven en deze pagineerbaar, soorteerbaar en wijzigbaar te maken.
In Visual Studio hoef je alleen aan te vinken wat je wilt… een kind kan de was doen.
Afbeelding 6, Gegevens weergeven in tabelvorm
Beveiliging
Het kunnen wijzigen van gegevens is in negen van de tien gevallen iets dat alleen bepaalde mensen
moeten kunnen. Je zult die pagina’s dus moeten beveiligen. Dit komt zo vaak voor dat ASP.NET specifieke
functionaliteit bevat voor het beveiligen van pagina’s, waarbij de gebruiker zonodig naar een
login-pagina wordt verwezen. In ASP.NET 2.0 is dit mechanisme verder uitgebreid en zijn er meerdere
controls die hierop van toepassing zijn. Het meest voor de hand liggend is een login-control waarin
naam en wachtwoord opgegeven moeten worden. Deze werkt zonder dat je daar code bij hoeft te
schrijven om te controleren of de gebruiker wel toegang heeft, aangezien in ASP.NET 2.0 die
database automatisch voorhanden is. Standaard werkt dit met SQL Server, maar dit is configureerbaar
zonder dat de controls daar wat van merken. Ook hier is dus gekozen voor een aanpak die de
functionaliteit op control niveau scheidt van de onderliggende functionaliteit dan wel de
gegevensbron. Dit patroon, dat wel het Provider-patroon genoemd wordt, komt in ASP.NET 2.0
regelmatig terug. Andere controls die handig zijn bij beveiliging van web applicaties zijn
controls voor het aanmaken van een gebruikersaccount, het opvragen van een vergeten wachtwoord,
en verschillende weergaven afhankelijk van of de gebruiker ingelogd is of niet. Deze controls zijn
hun specifieke functies heel duidelijk en dus makkelijk te begrijpen. Voor dit soort essentiële
functionaliteit is dat ook belangrijk, want je wilt niet dat door een klein foutje iemand toegang
krijgt tot pagina’s die hij/zij niet mag zien.
Wil je de beveiliging gaan instellen, of alvast gebruikers of rollen aanmaken, dan kan dit via de Web Site Administration Tool, waarvan je in Afbeelding 7 de Security (beveiliging) tab ziet. Het instellen van de beveiliging is ook hier weer met een wizard te doen, zodat je weinig risico loopt verkeerde instellingen te doen.
Afbeelding 7, Web Site Administration Tool
Topje van de ijsberg
Dit artikel geeft slechts een overzicht van een aantal belangrijke nieuwe mogelijkheden van ASP.NET 2.0.
Er is echter nog vele malen meer, en in allerlei verschillende delen van ASP.NET. De beste manier
om te zien wat er allemaal kan is door met Visual StudioExpress aan de slag te gaan. In de help
daarvan staan How To’s die je stapsgewijs kennis laten maken met bepaalde mogelijkheden. Bovendien
bevat de huidige Beta versie een Template voor een persoonlijke site met onder andere een
foto-album. Dat sjabloon, eigenlijk een kant en klare site, geeft inzicht in bepaalde mogelijkheden
en hoe je die voor elkaar krijgt. De uiteindelijke versie zal mogelijk meer Templates bevatten,
en er zullen Templates te downloaden zijn van Microsoft en derden. Hiermee kun je dan snel een
site maken met leuke functionaliteit.
Dit artikel is eerder verschenen in NetOpus, maart/april 2005.
|
