Embed Size (px)
Citation preview
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 htmlDatabase
Table
Sequence
1. User clicks http://server.com/script.aspx link
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.asp Cart.asp Purchase.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: <% code %> <%= expression %>
• Tag contents are executed and replaced with script’s output
• Myscript.asp:<%@ Page language="c#” %><html><body>The time is <%= System.Date.Now.ToString() %><% if(System.Date.Now < “12:00pm”){ %>
<p>Good morning<% }else{ %>
<p>Good afternoon<% } %></body></html>
• Client receives:<html><body>The time is 2:03pm<p>Good afternoon</body></html>
At page request, Server executes script
<%= expr %> Replaced with value of expr
<% code %> 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)
• <form action=“myscript.exe” method=post>
• Myscript.aspx.cs reads input from Control properties» E.g: ListBox1.SelectedValue
• GET querystring• <form action=“myscript.exe” method=get>
• http://myserver.com/myscript.aspx?var1=value&…
• 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.asp Cart.asp Purchase.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 windowCart 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:
<html><body>
Welcome, <%= this.Session(“myname”) %>
</body></html> 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:
<table>
<% foreach(DataRow r in data.Tables[0].Rows){ %>
<tr>
<% foreach(Object v in r.ItemArray){ %>
<td> <%= v.ToString( ) %> </td>
<% } %>
</tr>
<% } %>
</table>
• 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:
<asp:repeater id="Repeater1" runat="server">
<HeaderTemplate> <ul> </HeaderTemplate>
<ItemTemplate>
<li> <%# DataBinder.Eval(Container, "DataItem.Name") %> </li>
</ItemTemplate>
<FooterTemplate> </ul> </FooterTemplate>
</asp:repeater>
• 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):
<img href=“red.gif” STYLE="position:absolute; left:100px; top:49px; z-index:-1" >
» places the gif at (100,49) on the page
» Z-index -1 means put it behind the page text
• Control the size (html):
<img href=“red.gif” width=75 height=10>» Stretches it into a 75x100 red rectangle
Item1Item2Item3Item4Item5…
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:<a href=“myscript.asp?Nocache=<%=rnd()%>” >
<a href=“myscript.asp?Nocache=4857493>”
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
<!-- #include file = "myfile.asp" -->
Document Object Model
• (more useful in old ASP)<form name=“myform”>
<input type=“button” name=“mybutton” value=“OK”
onclick=“document.myform.mybutton.color=red”>
</form>
document
myform
mybutton
…
…
