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.. <img>, <a href= >, <span> Verwerking van eenstatische 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
Een beetje historiek 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 Een beetje historiek 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. Client verzoekt om een web pagina (URL) 2. 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 System.Web ADO.NET System.Data WINDOWS System.Winforms XML (.NET) System.Xml.NET Base Class Library Intermediate Language : IL Common Language Runtime : CLR Native code Operating System Jit compiler Pag. 7 De Ontwikkelomgeving 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
De Ontwikkelomgeving 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. Database Access Wordt geinstalleerd bij installatie van WebMatrix Of surf naar http://www.asp.net/projects/cassini/download/ 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. <html> <head><title>first ASP.NET Page!</title></head> <body><asp:label id= lblhello text= Hello World /><body> </html> 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.aspxpages : 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
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 die een combinatie bevat van HTML en tekst Script (in C#, VB.NET of Jscript.NET,...) Servercomponenten Met.aspx extensie.aspx : UI, de presentatie.aspx.vb : code-behind, de applicatielogica Compileert naar een klasse afgeleid van de Page-klasse Een.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,... 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 ID : btnplay Text : Play Druk enter en plaats label op form. 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 (<asp:type attributen runat= server />)? 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 > </script> 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 ></script> 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
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) 1 file Code-Behind Code <tags> Form1.aspx <tags> Form1.aspx Code Form1.aspx.vb Pag. 29 Inline scripting : voorbeeld <HTML> <asp:button id= btnsubmit runat= server /> </HTML> <script language= vb runat= server > Sub btnsubmit_click(s as object, e as EventArgs) handles btnsubmit.click... End Sub </script> 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"%> <html>...</html> Dice.aspx.vb Public Class Dice Inherits System.Web.UI.Page Private Sub btnplay_click... End Sub... End Class Pag. 31 Code en presentatie vormen samen één webformulier MyWebForm.aspx.vb Pag. 32 16
ASP.NET Page Processing Parse ASP.NET Engine Generate Codebehind class Request Request ASP.NET File Instantiate Page Class Output Compile Response Page Response Class Instantiate, Process and Render Pag. 33 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.Label Protected WithEvents lbleye2 As System.Web.UI.WebControls.Label Protected WithEvents lblcomment As System.Web.UI.WebControls.Label Protected WithEvents lblcount As System.Web.UI.WebControls.Label #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 <form> control genereert automatisch een Viewstate. Een versleutelde representatie van alle waarden in alle controls op de pagina bewaard als <input type=hidden> 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. <input type="hidden" name=" VIEWSTATE" value="ddwzodk1mdiynte7ddw7bdxppde+oz47bdx0pdtspgk8mt47 atwypjtppdg+oz47bdx0pha8cdxspfrlehq7pjtspdm7pj47pjs7pjt0ph A8cDxsPFRleHQ7PjtsPDU7Pj47Pjs7Pjt0PHA8cDxsPFRleHQ7PjtsPDg7Pj 47Pjs7Pjs+Pjs +Pjs +DYb9OO4GKHrcpgdvIhv08ufLa6E=" /> 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 (declarative Load Starts tracking changes made to properties set) Controls properties PreRender tree are is added completely to the initialized control Subsequently changed properties tree Allows Page_Load Save are round-tripped ViewState controls to in prepare ViewState themselves for Event rendering Page_Init Typically Changes Eg. Registering see properties Event page client code are saved script that tests out Render IsPostBack for round-tripping == false, in the to do form things of Each control renders itself to the first ViewState Dispose produce time the around Response Page and all its controls are disposed Pag. 38 19
Post-back Request (IsPostBack == true) Init Track ViewState Load ViewState Load post-back data Load Change events Action event PreRender Save ViewState Render Dispose Load ViewState Load Saved Post-Back ViewState Data from previous Form request post is loaded values into are controls. loaded into associated controls Change Simulates Events continuity Action Change Controls Event events are now due back to changes in the state in Event controls they were that as in caused a during result the the of new post-back last post-back request is raised. data are raised. Eg. TextChanged Click event on event Buttonon TextBox Pag. 39 Uitvoeren van de applicatie 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. Als je 1 web formulier wenst uit te voeren 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 = " karine.samyn@hogent.be ".To = "karine.samyn@hogent.be".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