9 – Web applications: Server-side code (ASP)
Session Aims & Objectives To introduce the fundamental ideas involved in server-side code Objectives, by end of this week’s sessions, you should be able to: add dynamic server-side functionality, using VB Script
Example: Logon page Logon pages – probably most common page hotmail Amazon University portal utility bills (gas, electricity, phone, internet) Travel (flights, ferry, car rental)
Example: Logon Restrict access to home page
Example: Logon - code (v1) Using Client-side VB Script: <html> <head> <title>My Home page</title> </head> <body> <p>Welcome to my home page.<br> <img src="YouAreHere.jpg" WIDTH="450" HEIGHT="259"> </body> </html> Home.htm <html> <head> <title></title> <script language=vbscript> Sub btnLogon_OnClick() If txtUserName.value = "mark" And txtPassWord.value = "soft131" Then window.navigate "Home.htm" Else window.navigate "LoginFail.htm" End If End Sub </script> </head> <body> <p>Please logon: <input id=txtUserName type=text> <input id=txtPassWord type=text> <input id=btnLogon type=submit value=Logon> </body> </html> Logon.htm <html> <head> <title></title> </head> <body> <p>Sorry, those login details were incorrect. <p>Please try <a href=Logon.htm>again</a> </body> </html> LoginFail.htm
Reveals both username & password Problem: View Source View Source – shows client-side script: Reveals both username & password
Web Hardware and Software Server Client network connection Browser Application (MS Explorer, Netscape) Web-server Application (MS IIS, Apache)
Request-Response Cycle: HTML <head> <title>Mark Dixon's web site</title> </head> <body background="BackGround.JPG"> <font size=+3><center><b> <p>Mark Dixon's web site</b></center> <font size=+2> <p>Welcome to my web server. Please select from the following list: <ul> <li><a href="./Soft131/Index.htm">Soft131: Introduction to programming for Multimedia and Internet applications.</a> </ul> </font> </body> </html> Response Browser Application (MS Explorer, Netscape) Web-server Application (MS IIS, Apache) http://mdixon.soc.plym.ac.uk/ Request
Request-Response Cycle: CSC Client-side code: Code sent to Client Interpreted by browser <html> <head> <title></title> <script language=vbscript> Sub btnLogon_OnClick() If txtUserName.value = "mark" And txtPassWord.value = "soft131" Then window.navigate "Home.htm" Else window.navigate "LoginFail.htm" End If End Sub </script> </head> <body> <p>Please logon: <input id=txtUserName type=text> <input id=txtPassWord type=text> <input id=btnLogon type=submit value=Logon> </body> </html> Response Browser Application (MS Explorer, Netscape) Web-server Application (MS IIS, Apache) Logon.htm Request
Request-Response Cycle: SSC Server-side code: Interpreted by server (code never sent to Client) <html> <head> <title>Today's date</title> </head> <body> <p>The date today is <% Response.Write Date() & "<br>" %> <p>The time is currently Response.Write Time() & "<br>" </body> </html> <html> <head> <title>Today's date</title> </head> <body> <p>The date today is 21/11/2005<br> <p>The time is currently 10:28:18<br> </body> </html> Response Browser Application (MS Explorer, Netscape) Web-server Application (MS IIS, Apache) http://localhost/datetime.asp Request
Server-side Script (what) ASP – active server pages executed on server takes time – request-response cycle requires server software (e.g. IIS) not sent to client secure (can't be viewed by client) results (response) sent to client pages will NOT work by double clicking on file
Server-side Script (how) Date.asp ASP code: .asp (not .htm) between <% and %> Response object: page sent back to client write method: adds text to response object Date() function: current date (server) <html> <head> <title>Today's date</title> </head> <body> <p>The date today is <% Response.Write Date() & "<br>" %> <p>The time is currently Response.Write Time() & "<br>" </body> </html>
Form Submission action attribute submit button Login.htm <html> <head> <title>Login</title> </head> <body> <p>Please login: <form name="frmLogin" action="LoginCheck.asp" method=post> Username:<input name="txtUserName" type="text"><br> Password:<input name="txtPassWord" type="password"><br> <input name="btnLogin" type="submit" value="Login"> </form> </body> </html>
Form Processing LoginCheck.asp <html> <head> <title>Login</title> </head> <body> <% If Request.Form("txtUserName") = "George" Then Response.Write "Login successful." Else Response.Write "Invalid user name." End If %> </body> </html>
View Source Code executed at server View, Source – does not show code: code is never sent to client View, Source – does not show code:
Code Execution LoginCheck.asp Response Server SW (IIS) <html> <head> <title>Login</title> </head> <body> <% If Request.Form("txtUserName") = "George" Then Response.Write "Login successful." Else Response.Write "Invalid user name." End If %> </body> </html> LoginCheck.asp <html> <head> <title>Login</title> </head> <body> Invalid user name. </body> </html> Response Server SW (IIS)
Example: Logon - code (v2) Using Server-side VB Script: <html> <head> <title>My Home page</title> </head> <body> <p>Welcome to my home page.<br> <img src="YouAreHere.jpg" WIDTH="450" HEIGHT="259"> </body> </html> Home.htm <html> <head> <title></title> </head> <body> <p>Please logon: <form action=LoginFail.asp method=post> <input name=txtUserName type=text> <input name=txtPassWord type=text> <input name=btnLogon type=submit value=Logon> </form> </body> </html> Logon.htm <html> <head> <title></title> <% If Request.Form("txtUserName") = "mark" And Request.Form("txtPassWord") = "soft131" Then Response.Redirect "home.htm" End If %> </head> <body> <p>Sorry, those login details were incorrect. <p>Please try <a href=Logon.htm>again</a> </body> </html> LoginFail.asp
Server-side Script (IIS) IIS / personal web server on Windows CD Start, Settings, Control Panel, Add/Remove Programs Add/Remove Windows Components IIS
Enabling/Disabling IIS Start, Settings, Control Panel, Administrative Tools, Internet Services Manager Start Stop
Reference: Server Object Model Request object: calling web page Form: used to get form data from previous page Response object: web page sent back Write: used to put text into web page Redirect: used to navigate to other page Clear: erases all HTML in web page
Client-side vs. Server-side Code <html> <head> <title></title> <script language=vbscript> Sub btnLogon_OnClick() If txtUserName.value = "mark" And txtPassWord.value = "soft131" Then window.navigate "Home.htm" Else window.navigate "LoginFail.htm" End If End Sub </script> </head> <body> <p>Please logon: <input id=txtUserName type=text> <input id=txtPassWord type=text> <input id=btnLogon type=submit value=Logon> </body> </html> Logon.htm Both use VB Script language (i.e. Sub, If, Dim, For, etc.) <html> <head> <title></title> <% If Request.Form("txtUserName") = "mark" And Request.Form("txtPassWord") = "soft131" Then Response.Redirect "home.htm" End If %> </head> <body> <p>Sorry, those login details were incorrect. <p>Please try <a href=Logon.htm>again</a> </body> </html> LoginFail.asp
Tutorial Exercise: Login Task 1: Get the Login (v2) example from the lecture working.