Een ASP.NET applicatie opzetten. Beginsituatie:

Transcriptie

1 Hoofdstuk 1 Een ASP.NET applicatie opzetten Beginsituatie: Windows XP Pro, Windows Vista Pro of Windows 7 Pro Visual Studio.NET moet zijn geïnstalleerd. Let hierbij op dat de Express versie niet voldoet. Hiermee kun je geen ASP.NET applicaties maken. Internet Information Server (IIS) moet zijn geïnstalleerd. Dit is de webserver van Micro Soft. Micro Soft SQL-Server moet zijn geïnstalleerd. Je kunt hier wel de Express versie gebruiken. Er moet een voorbeelddatabase op MS SQL-server zijn geïnstalleerd. In deze lesbrieven wordt de Northwind database gebruikt. Voorkennis: Je moet enige ervaring hebben met programmeren van een Windows Applicatie in Visual Studio.NET hebben Je moet kennis hebben van object georiënteerd programmeren. Je moet kennis hebben van HTML. Je moet kennis hebben van CSS. Je moet kennis hebben van systeembeheer binnen Windows (gebruikersbeheer, lokaal beveiligingsbeleid,.net configuratie) 1.1 Een eenvoudige ASP.NET applicatie maken Opdracht Een lege ASP.NET Web Applicatie maken Start VS.NET en kies ervoor een ASP.NET Empty Web Application te maken Let op het volgende: Geef de applicatie een naam zonder spaties (niet de standaardnaam WebApplication1). Kies als Location de beheermap van IIS. Dit is de map inetpub/wwwroot/ Open vervolgens de solution explorer (met de knop beeld van figuur 1.1 te zien., rechts bovenin het scherm ). Je krijgt dan het De map test_app (de applicatiemap ~) Figuur 1.1 De solution explorer geeft de mappen- en bestandenstructuur van je applicatie weer. De naam van de applicatie is (in dit geval) test_app. Alle mappen en bestanden die tot deze applicatie behoren staan in de map test_app. Deze map noemen we in het vervolg de applicatiemap en wordt in je code aangeduid met ~. 1.1

2 Opdracht Een webform aan de applicatie toevoegen In de webapplicatie staan tot nu toe twee mappen en een bestand (web.config). In dit bestand kun je allerlei instellingen van je website vastleggen. In een later stadium gaan we dit bestand gebruiken. Eerst gaan we een nieuwe webpagina in de applicatiemap zetten. De naam van deze pagina zal Default.aspx zijn. Dit is de indexpagina voor je applicatie. Dit doe je als volgt (voor de instructies uit): Klik rechts op de applicatiemap in de solution explorer. Kies Add en daarna New Item. In het dialoogvenster kies je Web Form en geef dit de naam Default.aspx. Druk daarna op de knop Add. Je ziet dan een formulier zoals in figuur 1.2. Figuur 1.2 Je ziet hier de source van de pagina Default.aspx. Het is een pagina waarin bekende HTML-tags te zien zijn, afgewisseld met minder bekende tags of attributen (zoals het attribuut runat met de waarde "Server"). Voorlopig kun je deze pagina als normale HTML-pagina opvatten. In de solution explorer zie je dat in de applicatiemap de pagina Default.aspx is toegevoegd. Als je de pagina zelf wilt zien, dan moet je het design van de pagina bekijken. Links onderin het scherm zie je navigatieknopjes om de source, het design of beiden (Split) te tonen. In figuur 1.3 zie je het design van de pagina in figuur

3 Figuur 1.3 Opdracht Een pagina opmaken Je ziet dat er in het design van onze webpagina de body van de webpagina staan. Schakel nu terug naar de source. In de source van de webpagina zie je dat een <div> als volgt gedefinieerd is: <div> </div> Dit is niet echt bijzonder. Selecteer de tag <div> en schakel terug naar design. Je ziet nu dat de <div> in het design zichtbaar is. Schakel naar source en geef de <div> een id: <div id="keuzemenu"> Schakel naar design. Je ziet nu het id bij de <div> vermeld staan (div#content). Doe vanuit design het volgende Selecteer de <div> Verander de grootte van de <div> met behulp van de ankerpunten aan de geselecteerde <div> (bijvoorbeeld 200px breed en 300px hoog) 1.3

4 Keer weer terug naar de source van de webpagina. Je ziet nu dat in de head van de pagina een style tag is toegevoegd, waardoor de div z'n nieuwe afmetingen heeft gekregen: <style type="text/css"> #keuzemenu { height: 300px; width: 200px; } </style> Dit kan eleganter, namelijk met een style sheet. Opdracht Een pagina opmaken met een style sheet Een pagina opmaken met een style sheet gaat eigenlijk zoals je gewend bent, maar nu komt de solution explorer er eerst aan te pas. Verwijder eerst de style tag voor het aanpassen van de afmetingen van de <div> in het bestand Default.aspx. Daarna: Open de solution explorer Klik rechts op de applicatiemap Kies Add > New Folder. Geef de nieuwe map de naam StyleSheets Klik nu rechts op de map StyleSheets en kies Add > New Item Selecteer in het dialoogvenster Style Sheet. Geef het style sheet de naam opmaak.css. Klik op de knop Add Je ziet in de solution explorer dat het bestand opmaak.css aan je applicatie is toegevoegd. Open nu het style sheet en voeg daar de volgende code toe: div.keuzemenu { height: 300px; width: 200px; } Je ziet dat tijdens het invoeren van de css-code, intellisense werkzaam is. Maak hier gebruik van. Schakel naar de source van de pagina Default.aspx en zet tussen <head> en </head> het volgende: <link type="text/css" rel="stylesheet" href="~/stylesheets/opmaak.css" /> Deze codes moet je kennen uit de lessen css. 1.4

5 Opdracht Maak een webpagina met drie aaneengesloten div s met verschillende kleuren. In figuur 1.4 zie je hiervan een voorbeeld. maak hier gebruik van een style sheet. Let op: de div s moeten strak tegen de boven- en linkerkant van het scherm aanliggen (zie figuur 1.4). Figuur Een ASP.NET applicatie uitvoeren Je kunt een ASP.NET applicatie op verschillende manieren uitvoeren, namelijk: Met behulp van de webserver binnen VS.NET (de deploiment server) Via de lokale webserver Via een externe webserver De eerste twee manieren gaan we binnen deze lesbrieven toepassen. Voor de derde manier moet je een externe webserver hebben. deze kun je zelf inrichten of via een hostingcontract verkrijgen. Een ASP.NET applicatie starten met behulp van de deploiment server Dit gaat in het algemeen heel eenvoudig: Druk op Sart Debugging (knopje ). De applicatie start nu de standaardbrowser met daarin de webpagina. Het resultaat van figuur 1.4 is zo verkregen. 1.5

6 Een ASP.NET applicatie starten met behulp van lokale webserver Dit wil nog wel eens wat instellings- en rechtenproblemen opleveren. Voordat je je hiermee eventueel gaat bezighouden, gaan we eerst de applicatie als volgt starten: Start de webserver (IIS). Start je browser en voer de volgende url in: localhost/%applicatiemap%/default.aspx Op de plaats van %applicatiemap% komt het pad naar de applicatiemap te staan ten opzicht van de map inetpub/wwwroot Als het goed is dan krijg je het scherm van figuur 1.4 weer te zien. Echter, in veel gevallen krijg je een scherm te zien met een aantal foutmeldingen. Deze foutmeldingen hebben vaak te maken met een aantal rechten die niet aan de gebruiker zijn toegekend of dat de website niet als webapplicatie wordt herkend. Daarom een aantal punten die belangrijk zijn om een ASP.NET applicatie te starten vanuit een web browser. Voor Windows XP Controleer of er een gebruiker ASPNET bestaat. Als het goed is bestaat deze. Hij is namelijk aangemaakt bij de installatie van VS.NET. De gebruiker ASPNET behoort tot de groep users. Verander niets aan deze gebruiker! Open nu Configuratiescherm > Systeembeheer > Lokaal beveiligingsbeleid Kies nu Beveiligingsinstellingen > Lokaal beleid > Toewijzing van gebruikersrecht Grand nu de gebruiker ASPNET aan de volgende policies: Aanmelden als batchtaak Aanmelden als service Lokaal aanmelden De website kan nu gestart worden met localhost/%applicatiemap%/default.aspx Voor Windows Vista met IIS6 en voor Windows 7 met IIS7 Open het beheerscherm van IIS (zie figuur 1.5). Navigeer in het venster Verbindingen naar de applicatiemap van de betreffende website. Klik rechts op de applicatiemap en kies Converteren naar toepassing. De website kan nu gestart worden met localhost/%applicatiemap%/default.aspx 1.6

7 Figuur