Hoofdstuk 1 : Inleiding

Hoofdstuk 1 : Inleiding

Een beetje historiek De ontwikkelomgeving IIS Een eerste ASP.NET applicatie

Een beetje historiek ?

Statische Web Pagina’s (.htm(l)) ?

Inhoud en layout ligt vast, voor altijd

?

Vb. . , , <span>

?

Verwerking van een statische webpagina 1.

Client verzoekt om een web pagina (URL)

2.

Web server localiseert de web pagina

3.

En retourneert de pagina (Html code) naar de browser

4.

Browser maakt de HTML pagina op

Pag. 2

1


Client-Side dynamische Web Pagina’s (.htm(l)) ?

Inhoud en layout kunnen veranderen!

?

De pagina bevat naast de HTML code ook client-side scripts (kan een aparte file zijn)

?

Client-side script : Jscript, VBScript dmv DOM

?

Verwerking van een client side dynamische webpagina 1.

Client verzoekt om een web pagina (URL)

2.

Web server localiseert de web pagina (en instructie file)

3.

En retourneert de pagina (Html code en instructie file) naar de browser

4.

Browser maakt de Html pagina op en voert de scripts uit op een dynamische en interactieve manier

Pag. 3


Server side dynamische pagina (.asp) ?

Inhoud en layout kunnen veranderen!

?

De pagina bevat naast de HTML code, client-side scripts ook server-side script code

?

Server-side script : Jscript, VBScript en ASP objecten

?

Verwerking van server side dynamische webpagina 1. 2.

Client verzoekt om een web pagina (URL) Web server localiseert de web pagina

3.

Web Server voert de server-side scripts uit en genereert HTML en client side script

4.

De gegenereerde pagina wordt geretourneerd naar de browser (De originele pagina ziet de gebruiker niet!)

5.

Browser maakt de Html pagina op en voert de scripts uit op een dynamische en interactieve manier Pag. 4

2

Een beetje historiek

Pag. 5

Pag. 6

3

De Ontwikkelomgeving ?

.NET Framework ? http://www.asp.net/download-1.1.aspx

ASP.NET

WINDOWS

System.Web

System.Winforms

ADO.NET

XML (.NET)

System.Data

System.Xml

.NET Base Class Library

Native code Operating System

Jit compiler

Intermediate Language : IL Common Language Runtime : CLR

Pag. 7


Editor Visual Studio.NET (2003) ? .NET Framework SDK (versie 1.1) ?

? http://www.microsoft.com/downloads/details.aspx?familyid=9B3

A2CA6-3647-4070-9F41-A333C6B9181D&displaylang=en ? Notepad

of andere 3th party tekst editors; Overzicht zie http://www.123aspx.com/directory.aspx?dir=142 of http://www.411asp.net/home/software/aspcodee

? DreamWeaver

MX :

http://www.macromedia.com/software/dreamweaver/ ?

Web Matrix (gratis light-weight versie van VS.NET) :

http://www.asp.net/webmatrix Pag. 8

4


WebServer ? ? ? ? ?

?

PWS : Personal Web Server onder Windows 95, 98, NT workstation IIS 4.0 : Option Pack NT 4 Server IIS 5.0 : Windows 2000 en XP IIS 6.0 : Windows 2003 Cassini is een gratis web server. ? Wordt geinstalleerd bij installatie van WebMatrix ? Of surf naar http://www.asp.net/Projects/Cassini/Download/

Database ? ? ? ?

Access SQL Server MSDE database engine (gratis desktop versie van SQL Server) : http://www.microsoft.com/sql/msde/default.asp Oracle,... Pag. 9

IIS ?

HTTP ?

Protocol basics : ?

bestaat uit methodes, die kunnen worden opgeroepen vanuit de browser ?

? ?

?

?

GET,POST

connectieloos stateless

Creatie van sessies : cookies, sessions en viewstate

HTTPS : HTTP in combinatie met SSL

Pag. 10

5

IIS ?

Web server, draait onder Windows ? ? ? ?

? ?

PWS : Personal Web Server onder Windows 95, 98, NT workstation IIS 4.0 : Option Pack NT 4 Server IIS 5.0 : Windows 2000 en XP IIS 6.0 : Windows 2003

Accepteert en verwerkt HTTP aanvragen en retourneert het resultaat Belangrijke topics ? ? ?

Virtuele directories Application settings IIS Authenticatie Pag. 11

IIS ?

Virtuele directories ?

Wat? ?

Startdirectory voor een web applicatie

?

Alias voor een fysieke directory op de webserver.

?

IIS zorgt voor de mapping van URL (http://naam server/naam virtuele directory/bestand) naar fysieke directory op de webserver.

http:://www.hogent.be/info/newstudent.htm wordt door IIS vertaald naar c:\inetpub\wwwroot\informatie. Daar zoekt IIS de file newstudent.htm op

?

Virtuele directory definiëren ?

Maak een nieuwe map aan in Windows Explorer onder de map “wwwroot” (vb c:\inetpub\wwwroot\aspnettest). Maak onder de map aspnettest een nieuwe map met de naam “bin”

?

Maak van de map aspnettest vervolgens een virtuele root Pag. 12

6

IIS ?

IIS 5.0 ?

Start > Programs > Administrative Tools > Internet Service Manager => start de Microsoft Management Console voor IIS Of Start >Run > inetmgr

? ?

Dubbelklik in linkerframe naam van je server Selecteer "Default Web Site“. Rechtermuisklik > New > Virtual Directory. Volg de wizard

?

Op de eerste pagina, klik Next Op 2de pagina, geef alias in voor nieuwe virtuele directory, klik Next Vul fysisch pad in, klik next

?

Geef de access permissies op. Behoud de defaults. Klik Next

? ?

?

?

Read : gebruikers kunnen bestanden lezen of downloaden

?

Script : uitvoeren van scripts is toegelaten. Aanzetten voor ASP pagina’s

?

Execute : uitvoering andere programma’s (vb CGI, ISAPI) toegelaten

?

Write : laat gebruiker toe bestanden naar directory te kopieren

?

Browse : listing inhoud map

Klik Finish Pag. 13

IIS ? ?

Alle webpagina's van die applicatiee plaats je in deze directory en subdirectories van deze directory Toegang tot de pagina's : http://localhost/naam virtuele directory/subdirectories/bestandsnaam http://127.0.0.1/naam virtuele directory/subdirectories/bestandsnaam http://naam PC/naam virtuele directory/subdirectories/bestandsnaam

?

Voorbeeld : ? ?

Maak een virtuele directory aspnetvb1 die een alias is voor c:\inetpub\wwwroot\aspnetvb1 In Notepad : Tik onderstaande code in en sla op als ASPNETHello.aspx. First ASP.NET Page!

?

Ga naar de browser en tik volgende URL in http://localhost/ASPNETTest/ASPNETHello.aspx. Pag. 14

7

IIS ?

Application settings ? Selecteer

vervolgens de gecreëerde virtuele directory > rechtermuisklik > Properties

? Virtual

Directory-tab

?

Application settings : check run in seperate memory space

?

Application permissions : niveau van uitvoering programma's

?

?

None : alleen statische files (HTML files of beeldjes)

?

Scripts only : enkel scripts, zoals ASP, kunnen draaien

?

Scripts and Executables : toegang tot scripts, .exe's en .dll's

Application protection : ?

Low : programma's draaien in hetzelfde proces als de web services

?

Medium : in een geïsoleerde pooled proces waarin ook andere applicaties draaien

?

High : in een volledig geïsoleerd proces Pag. 15

IIS ?

Authenticatie ?

Directory-security tab ? ?

Kan ingesteld worden op niveau van web site, directory, file WWW authentication methods ?

Anonieme authenticatie : niet aanloggen

?

Basis authenticatie : username en passwoord opgeven, niet geencrypteerd

?

Digest authenticatie : username en passwoord opgeven, geencrypteerd

?

Integrated Windows authenticatie : gebruikt Windows username en paswoord

?

SSL : secure transacties over internet

Pag. 16

8

Het ontwikkelproces ?

In Visual Studio

Pag. 17

Het ontwikkelproces ?

Creatie van een Web Application met de .NET SDK ? ? ? ? ? ?

Creatie van een applicatie root : in IIS Creatie van subdirectories : in Windows Explorer Creatie van de .aspx pages : in bvb Notepad Creatie van de Global.asax file Creatie van de Web.config file Compileren van pagina’s via tools in .NET SDK

Pag. 18

9

Een eerste web applicatie project ?

Demo SNAKE Eyes GAME

Pag. 19


Creatie project : File > New > Project

?

Project type : Visual Basic Project Template : ASP.NET Web application Location : http://localhost/SnakeEye

?

Creatie van een virtuele root in IIS

?

Creatie van mappen en bestanden

? ?

Pag. 20

10


Web applicatie file structuur

Pag. 21


File Types ? ? ?

Solution files (.sln en suo) Project files (.vbproj) Web application files ? ? ? ? ? ? ? ?

?

.aspx : web forms .ascx : user controls .asmx : web services .vb : klassen en code behind pagina’s .disco : discovery files voor webservices .resx : resource files Global.asax : bestand gebruikt om variabelen en opstartprocedures te definieren op applicatie en sessie niveau Web.config : configuratiefile voor applicatie

Project assembly (.dll) Pag. 22

11


Web form ? Tekstbestand ? ? ?

? Met ? ?

die een combinatie bevat van

HTML en tekst Script (in C#, VB.NET of Jscript.NET,...) Servercomponenten

.aspx extensie .aspx : UI, de presentatie .aspx.vb : code-behind, de applicatielogica

? Compileert

naar een klasse afgeleid van de Page-klasse .aspx bestand wordt door de web server die IIS draait, herkend en uitgevoerd. De web server genereert een HTML bestand met eventueel client side scripting dat naar de client wordt teruggestuurd. Die HTML pagina wordt dynamisch aangemaakt op basis van de statische HTML instructies + toevoeging van de HTML instructies die gegenereerd worden door uitvoering van de scripting en servercomponenten, ...

? Een

Pag. 23


Aanmaken van een Web form ?

Bij creatie van project wordt automatisch 1 web form aangemaakt ?

WebForm1.aspx : UI

?

Webform1.aspx.vb : code behind

Hernoem de file ?

In Solution Explorer, ga naar WebForm1.aspx > rechtermuisklik > rename in dice.asppx. De naam van de code behind file wordt automatisch aangepast.

?

Pas zelf de naam van de klasse in de code behind file aan

?

Pas zelf de naam aan in @Page directive in aspx file

Kan eenvoudiger door ?

Web form te verwijderen : Rechtermuisklik op web form in Solution Explorer > Delete

?

En een nieuwe Web form aan te maken : Rechtermuisklik op project in Solution Explorer > Add > Add Web form > vul de juiste naam in voor de web form Pag. 24

12


Ontwerpen van GUI ?2 ? ? ? ? ? ?

weergaven : Design en HTML

Klik op dice.aspx (opent de design mode) Stel Pagelayout = FlowLayout in Properties Window van document Typ “Snake Eyes”. Selecteer de text , selecteer Heading1 van style list Druk enter, type dan “Keep going, but don’t get two 1’s” Druk enter, selecteer in Toolbox in Web form tab, 2 maal een label. Stel de properties van beide labels in ? ? ? ? ?

?

ID : respectievelijk lblEye1 en lblEye2 Borderstyle : solid Font : name : Arial; size : X-Large Height : 44px Text : 0

Klik rechts van de labels en druk enter. Plaats terug een label op form met ? ? ?

ID : lblComment Text : Ooops, you did it again:( Visible : false

Pag. 25


Druk enter, en plaats een button op form ? ?

?

Druk enter en plaats label op form. ? ? ? ?

?

ID : btnPlay Text : Play ID : lblCount Font : name : Arial; Size:X-Large ForeColor : Red Text : 0

De HTML code werd gegenereerd. Selecteer de HTML tab. De code bevat ? ? ?

Page directive HTML, tekst Web controls () ? ? ?

Interactieve gedeelte van pagina Genereren HTML (browser onafhankelijk) Object model Pag. 26

13


Coderen ? ?

ASP.NET is event-georienteerd Event procedures worden gebruikt om interacties van de gebruiker met de browser af te handelen ?

Client side event procedures ? ? ? ?

Enkel gebruikt voor HTML controls Ze worden geinterpreteerd door de browser en draaien op de client Ze hebben geen toegang tot de server resources <script language=“Jscript”>

Pag. 27


Server-side event procedures ? ? ? ? ?

Gebruikt voor Web Controls en HTML Server controls Code wordt gecompileerd en draait op de server. Uitvoering vereist een roundtrip naar de server via postback Hebben toegang tot de server resources <script language=“vb” runat=“server”>

Browser : cart.aspx Gebruiker selecteert artikel dat aan het winkelwagentje moet worden toegevoegd Gebruiker wijzigt de gewenste hoeveelheid van een geselecteerd artikel Het bijgewerkte winkelwagentje met het nieuwe artikel en hoeveelheid wordt weergegeven

Server : cart.aspx

Event ItemSelect wordt op de server verwerkt

Event QuantityChange wordt op de server verwerkt

Pag. 28

14

Een eerste web applicatie project Web Controls genereren server-side events De code voor server-side events kan je op 2 manieren toevoegen

? ?

? ?

1 file (Inline scripting – WebMatrix / NotePad) Aparte file (Code-Behind – VS.NET)

Code-Behind

1 file

Code

Code

Form1.aspx

Form1.aspx

Form1.aspx.vb Pag. 29

Een eerste web applicatie project Inline scripting : voorbeeld

?

<script language=“vb” runat=“server”> Sub btnSubmit_click(s as object, e as EventArgs) handles btnSubmit.click ... End Sub

Pag. 30

15


Code behind ? ?

Aparte files voor presentatie en interface logica Presentatie (aspx-bestand) ? ?

?

Page-directief om naar achterliggende code te verwijzen Afgeleide klasse van de “Code Behind”-klasse

Code (aspx.vb extensie) ? ? ?

Klasse bestand (aspx.vb) Afgeleide klasse van Page In zelfde map als aspx-bestand

Dice.aspx <%@ Page Language="vb" Src="dice.aspx .vb" Inherits="SnakeEye.Dice"%> ...

Dice.aspx.vb Public Class Dice Inherits System.Web.UI.Page Private Sub btnPlay_Click ... End Sub ... End Class

Pag. 31

Een eerste web applicatie project •

Code en presentatie vormen samen één webformulier

MyWebForm.aspx.vb

Pag. 32

16

ASP.NET Page Processing Parse

ASP.NET

Generate

Engine

Request

ASP.NET File

Instantiate

Page Class Output

Request

Response Response

Codebehind class

Compile

Page Class

Instantiate, Process and Render Pag. 33

Een eerste web applicatie project Public Class Dice Inherits System.Web.UI.Page Protected WithEvents btnHit As System.Web.UI.WebControls.Button Protected WithEvents btnPlay As System.Web.UI.WebControls.Button Protected WithEvents lblEye1 As System.Web.UI.WebControls.La bel Protected WithEvents lblEye2 As System.Web.UI.WebControls.La bel Protected WithEvents lblComment As System.Web.UI.WebControls .Label Protected WithEvents lblCount As System.Web.UI.WebControls.L abel #Region " Web Form Designer Generated Code " <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() End Sub Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init InitializeComponent() End Sub #End Region Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 'Put user code to initialize the page here End Sub End Class

Pag. 34

17


Voeg code toe voor de events in de code behind page ?

Dubbelklik de knop Play en codeer Private Sub btnPlay_Click(ByVal sender As System.Object, ByVal e As _ System.EventArgs) Handles btnPlay.Click Dim rnd As New Random() lblComment.Visible = False lblEye1.Text = rnd.Next(1, 7) lblEye2.Text = rnd.Next(1, 7) If lblEye1.Text = "1" And LblEye2.Text = "1" Then lblCount.Text = 0 lblComment.Visible = True Else lblCount.Text = CInt(lblCount.Text) + CInt(lblEye1.Text) + _ CInt(lblEye2.Text) End If End Sub Pag. 35


Wat gebeurt er als je op de “Play” knop klikt? ?

? ? ?

Klikken op een knop, triggert een automatische “postback ” naar de server. Het formulier stuurt een HTTP-verzoek van het type POST naar zichzelf. De server herbouwt de pagina, op basis van de data die de gebruiker heeft ingetikt en de viewstate De server stuurt de gegenereerde pagina terug naar de browser De browser geeft de pagina weer. De gegenereerde code (niet de originele!) kan je bekijken via het context menu > View Source

Pag. 36

18


ViewState ?

Een ASP.NET pagina met een server-side
control genereert automatisch een Viewstate.

?

Een versleutelde representatie van alle waarden in alle controls op de pagina bewaard als control op pagina Zodat bij een postback de pagina opnieuw gemaakt kan worden

? ? ? ?

Per control kan je Viewstate aan of uit zetten via property EnableViewState. Nadeel : prestaties van pagina kunnen dalen, beveiliging? Voorbeeld : voeg de tekst “naam speler” toe gevolgd door een textbox. Als de gebruiker zijn naam opgeeft zal bij klikken van de “Play” knop de pagina opnieuw gegenereerd worden. De naam van de gebruiker blijft staan in textbox.

Pag. 37


Page Lifecycle ?

Eerste verzoek

Init Track ViewState Load PreRender Save ViewState Render Dispose

Initialization Control are instantiated, Track ViewState Controls are set to initial state Starts tracking changes made to Load (declarative properties set) properties Control tree completely Controls areisadded to the initialized control PreRender Subsequently changed properties tree Allows controls to in prepare are round-tripped ViewState Save ViewState Page_Load Event themselves for rendering Changes properties are saved out Typically see page code that tests Page_Init Event Render Eg. Registering client script for round-tripping in the form of IsPostBack false, to do to things the Each control== renders itself ViewState Dispose first time around produce the Response Page and all its controls are disposed Pag. 38

19

Een eerste web applicatie project • Post-back Request (IsPostBack == true)

Init Track ViewState Load ViewState Load post-back data Load Change events Action event PreRender Save ViewState

Load ViewState Saved ViewState Data from previous Load Post-Back request is loaded into Form post values are controls. loaded into associated controls Change Events Simulates continuity… Change events due to changes in Controls are back in the state Action Eventnow controls asin aduring resultthe of new they the lastpost-back request Eventwere that caused post-back is data are raised. raised. Eg. on TextBox Eg. TextChanged Click event onevent Button

Render Dispose

Pag. 39


Uitvoeren van de applicatie ? ?

?

Als je 1 web formulier wenst uit te voeren ?

?

In Solution Explorer > rechtermuisklik op Startup formulier > selecteer “Set as start page” Selecteer Debug > Start (F5) om applicatie uit te voeren. Het project wordt gecompileerd en de startup pagina wordt geopend in de browser.

In Solution Explorer > rechtermuisklik op Web form > selecteer “Build en Browse”

Bekijk ook eens de gegenereerde code!!!!! Pag. 40

20


Deployen van een webapplicatie ?

mshelp://MS.VSCC/MS.MSDNVS/vsintro7/html/vbtskdeplo yingwebsolution.htm

Pag. 41


Plaatsen van een ASP.NET applicatie op een andere PC ? ?

Stel applicatie staat onder c:\inetpub \wwwroot\oef1 Kopieer de solution files naar c:\inetpub\wwwroot\oef1 ?

? ? ?

Deze staan onder c:\documents and Settings\Jouw account\My Documents\Visual Studio Projects\naam webapplicatie.

Zip de directory c:\inetpub \wwwroot\oef1 Unzip op andere PC onder c:\inetpub\wwwroot Start IIS. Creëer een virtuele directory voor c:\inetpub\wwwroot\oef1. ? ?

!!!Gebruik dezelfde naam voor de virtuele directory als op de andere PC. VS.NET niet downward compatible Pag. 42

21


Opgave ? ?

Hou nu ook de hoogste score en laatste score bij Voeg een label, textbox en button toe. De label bevat de tekst email. Bij klik op knop worden de hoogste en laagste score gemailed.

Dim myEmail As System.Web.Mail.MailMessage = New System.Web.Mail.MailMessage() '---- Set Message Properties ------------With myEmail .From = " [email protected] " .To = "[email protected]" .Subject = "Snake Eye" .Body = “Snake Eye scores ..." .BodyFormat = System.Web.Mail.MailFormat.Text End With '---- Send Message ------------------------System.Web.Mail.SmtpMail.SmtpServer = "" ‘name or IP SMTP server System.Web.Mail.SmtpMail.Send(myEmail)

Pag. 43

22

Hoofdstuk 1 : Inleiding

Recommend Documents