Programming Data-Driven WebSites (ASPX, Active Server Pages) Chris North CS 4604: DB

WinApp vs WebApp Standard client application (WinApp) E.g. C#, Java Single user, location Portability is less critical Power, dynamics Targeted audience Distributed executable Server-side application (WebApp) Broad user class Lightweight, Supports lo-fi clients One-time users, quick, no installation/updates Distributed simultaneous users Simpler functionality, information access Centralized executable, data

Page = Server-side script Dynamically generates page at client request Pulls data from DB to create page contents E.g. E-Bay, Amazon, … Data-Driven WebSites Client (Browser) Server (Web server) URL request html page html Database Table

Sequence 1.User clicks linkhttp://server.com/script.aspx 2.Client requests script.aspx from server.com 3.Server.com executes script.aspx 4.Script.aspx generates html page (using DB data) 5.Server.com sends html page to client 6.Client displays page

Example Books.aspCart.aspPurchase.asp Shows books list Add to cart View cart button Displays cart contents Delete items Purchase button Charges credit card Displays ‘thankyou’ Link back to books Amazon.com server

ASPX Microsoft Active Server Pages,.Net IIS server Old ASP: Html with embedded server scripts Session support Visual Basic script ASPX.Net: Separation of html and code Additional state-preservation capability C# (or any other lang) Visual Studio.net, C# Web Application If install IIS after install VStudio.Net, must run: C:/windows/MS.net/framework/Vx.x/aspnet_regiis.exe -i

ASP = html + script New server-script tags: Tag contents are executed and replaced with script’s output Myscript.asp: The time is Good morning Good afternoon Client receives: The time is 2:03pm Good afternoon At page request, Server executes script Replaced with value of expr Executes code

ASPX: Separate code.aspx = html with asp tags.aspx.cs = associated Csharp code Also supports ASP-style embedded code Env. similar to WinApp, execution different Execution order: 1.Constructor, OnInit (auto-generated code) 2.Page load 3.Any events from form submit request 4.Embedded code in.aspx

Processing Form Input POST (aspx default) Myscript.aspx.cs reads input from Control properties »E.g: ListBox1.SelectedValue GET querystring Myscript.aspx.cs reads input from Request.QueryString »E.g: this.Request.QueryString[“var1”]

Problems Many simultaneous users Who’s who? Request-Response HTTP model (page requests are independent) How to maintain contiguous program state? UI (browser) disconnect from back-end (server) How to keep UI in sync with back-end? (e.g. ‘Back’ button) Books.aspCart.aspPurchase.asp …

Different than GUI programming! Standard WinApp GUI: One user (per executable) ‘Global’ state data Client = server –UI and back-end are same executable Shopping.exe Books window Cart window Purchase window

Solutions in ASPX Provides user ‘session’ awareness (a) Recognizes users by cookies (b) Maintains contiguous state info for each user in global storage. »E.g: this.session[“var1”] (c) Keeps page state info in a hidden form item. »Maintains properties of all UI controls Automatic Who is the user? What is his data? Where is he in the ‘application’?

Form Input & Session State Process form input, store state info: Button1_Click() this.Session(“myname”) = TextBox1.Text; HTML output based on session state: Label1.Text = “Welcome “ + this.Session(“myname”); Or: Welcome, Welcome, chris Enter your name: chris Send

Useful ASPX Objects this. properties:.Session: specific to each user.Application: global, all users.Request:.querystring,.form, ….Response:.redirect,.write, ….Server: utilities.IsPostBack Global.asax events: Session_Start, Session_End Application_Start, Application_End

Database Access The usual connect & query code: OleDbConnection con = new OleDbConnection( "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:/census4604.mdb"); // Jet=Access OleDbCommand cmd = new OleDbCommand( "SELECT * FROM States4604", con); // SQL query OleDbDataAdapter adpt = new OleDbDataAdapter(cmd); DataSet data = new DataSet( ); adpt.Fill(data); // execute the query and put result in ‘data’

Database Display Binding data to UI controls: ListBox1.DataSource = data.Tables[0]; ListBox1.DataTextField = "Name"; ListBox1.DataValueField = “ID"; ListBox1.DataBind();// always do this to make it finalized DataGrid1.DataSource = data.Tables[0]; DataGrid1.DataBind();// always do this to make it finalized Limited customization capability Can get events Simple coding, similar to WinApp

Database Display Inline scripting: Complete customization, html-level control, more complex code

Database Display Repeater control (combines binding & inline) In file.aspx.cs: Repeater1.DataSource = data.Tables[0]; Repeater1.DataBind(); In file.aspx: Compromise: some customization, some automation

InfoVis tricks on web pages Simple graphics: Image trick: red.gif = 1x1 red pixel gif Control the location (dhtml,xhtml): »places the gif at (100,49) on the page »Z-index -1 means put it behind the page text Control the size (html): »Stretches it into a 75x100 red rectangle Item1 Item2 Item3 Item4 Item5 …

Open Problems: Client-Server Out of Sync ‘Re-post’ problem: E.g: Submit, Back, Submit; purchased twice! Solution: give each form unique ID, counter ‘Jump in too deep’ problem E.g: nav by bookmark deep into app, without logging in. On deep page, check for username, redirect to login page Test page state against session state. Browser cache problem E.g: browser shows old page instead of getting new content Defeat cache using expiration tags

Defeating Browser Cache Expiration tags: <% Response.Expires = -1 Response.Expiresabsolute = Now() - 2 Response.AddHeader "pragma","no-cache" Response.AddHeader "cache-control","private" Response.CacheControl = "no-cache" %> Random queryString: ” > ”

Consistent look-and-feel Banner, Navigation bar, … Server-side ‘include’ files: Put banner, nav bar in separate ‘include’ file: Can be used in.html files too

Document Object Model (more useful in old ASP) <input type=“button” name=“mybutton” value=“OK” onclick=“document.myform.mybutton.color=red”> document myform mybutton … …