Web Application Development

1. Web Application Development Vijayan Sugumaran Decision and Information Sciences Oakland University

2. Agenda • Session 1 – Introduction to ASP • Assignment #1 • Session 2 – Database Connectivity • Assignment #2 • Session 3 – ASP Application Development • Assignment #3

3. Introduction to ASP Session 1

4. Why Use Forms in a Web Site? Forms provide a way for a web page to interact with a user Generating a static web page does not begin to tap into the unlimited possibilities the internet has to offer By using forms we can gather information and make decisions

5. Active Server Pages • Server side scripting environment • ASP script begins to run when a • browser requests an .asp file from • the web server • Web server then executes the • commands • Generate response and send an • html page to the browser

6. Creating and Viewing ASP Pages • Creating ASP Files • Microsoft FrontPage • Visual InterDev • Any HTML editor and add scripts later • Viewing ASP pages • ASP page has to be executed on the server • Can’t just view the page on the client • Server running (IIS4.0/Personal Web Server4.0) • To force the server to execute the ASP page, place it in the required/suitable directory

7. Form Elements • A form is encapsulated with the <form></form> tags • A web form is similar to a paper form. • A form can contain many elements: • Text Fields • Checkboxes • Droplists • Radio Buttons • Each of these items are called “form controls” • They are described using a “label” • The following controls are generated using these tags: • Textbox = <input type=“text”> • Checkbox = <input type=“checkbox”> • Radio Buttons = <input type=“radio”> • Lists = a <select> tag followed by one or more <option> tags

8. An Example Form • Generally, a form is created with an embedded table. The table helps align the information. • The form controls are placed within each cell of the table. Text box control Drop list control Black dotted lines designate the borders of the table Red dotted lines designate the borders of the form

9. Partial code for previous form Determines how the form data is sent to the server Form tag and name <form action="registar.asp" method="get" name="form1" onSubmit="MM_validateForm('cust_name','','R','last_name','','R','email_address','','NisEmail');return document.MM_returnValue"> <table width="100%" border="0" cellspacing="0"> <tr> <td><div align="center"><strong><font size="5">Request For Information</font></strong></div></td> </tr> </table> <table width="95%" border="0" cellspacing="5"> <tr> <td width="124"><div align="right">First Name</div></td> <td width="5" rowspan="8">&nbsp;</td> <td width="153" nowrap> <div align="left"> <input name="cust_name" type="text" class="input-text" id="cust_name" size="25" maxlength="25"> </div></td> </tr> <tr> <td><div align="right">Last Name</div></td> <td nowrap> <div align="left"> <input name="last_name" type="text" class="input-text" id="last_name" size="25" maxlength="25"> </div></td> </tr> <tr> <td><div align="right">E-Mail Address</div></td> <td nowrap> <div align="left"> <input name="email_address" type="text" class="input-text" id="email_address" size="25" maxlength="25"> </div></td> </tr> Name of the controls When the submit button is clicked, the function is executed first and then the action, i.e., calling the asp page CSS Class for this control Name of the control Form control that allows a customer to enter their first name

10. Form Elements Notes • Radio buttons are mutually exclusive (i.e. only one can be selected at a time) • Submit buttons are used to submit the information to the server • When the customer clicks the submit button an action is performed and a method is executed • On the previous slide, the action was shown to be register.asp and the method is GET

11. Sending Form Data to Server • After the customer clicks on the submit button the following information can be found in the address bar of the browser: http://www.cavalierewebdesigns.com/registar.asp?cust_name=chris&last_name=cavaliere&email_address=&street=&city=&state=AL&zipcode=&cust_intrest=1&Submit=Submit • Information after the question mark informs the server that the URL includes URL Encoded Data, i.e., QueryString Data

12. QueryString • Each occurance of name=value is called a name-value pair. http://www.cavalierewebdesigns.com/registar.asp?cust_name=chris&last_name=cavaliere&email_address=&street=&city=&state=AL&zipcode=&cust_intrest=1&Submit=Submit • Each name is the name of the attribute of a form control (last_name) and the value is the value returned by the control (cavaliere) • Each value pair concatenated with “&”

13. Sending Data to Server • There are two ways to package data to send it to the server • Post • Requests are sent all the way to the specified server • This is important for an e-commerce site where you want to view fresh information after saving items to a shopping cart • Get • Requests are cached by an intermediate server • Instead of getting a fresh page, we might receive a copy of the page viewed previously • Allows requests to be satisfied without needing to send the request all the way back to the original server and the response all the way back to the requesting browser

14. Processing the Data on the Server • The register.asp page is used to process the data when the submit button is clicked • .asp designates a web page that is written using ASP • ASP code is enclosed in <% %> tags

15. Sample ASP Code <% Dim strFirstName, strLastName, strStreet, strCity, strState, strEmail, strCustIntrest strFirstName = request.querystring("cust_name") strLastName = request.querystring("last_name") strStreet = request.querystring("street") strCity = request.querystring("city") strState = request.querystring("zipcode") strCustIntrest = request.querystring("cust_intrest") strEmail = request.querystring("email_address") %> <% Response.Write("Thank you " & strFirstName & " for your request.") %> <br> <br> <% if strCustIntrest = "1" then Response.Write("We will email the information to you at<strong>" & stremail & "</strong>") else Response.Write("We will send the information to you at yourhome address") end if %> Requst.querysting is used to extract the data being sent to the server Visual Basic is used to generate conditional output (Javascript could also be used) Lines in green are displayed on the resultant web page. Notice how HTML tags are embedded into the output

16. Putting it all together • Forms are used to gather information from a customer • Forms use the <forms> </forms> tags • Tables are used to layout the form-controls on the page • When the user clicks on the submit button, the information is sent to a server where it is processed (in this case by an ASP page)

17. ASP Object Model Client Response Object Server Object Server Request Object Application Object Session Object ObjectContext Object

18. ASP Objects • Request Object • Captures all the information about user’s request • Response Object • Send information back to the user • Server’s response to the user • ObjctContext Object • Used to either commit or abort transactions managed by Microsoft Transaction Server initiated by an Active Server Page script.

19. ASP Objects • Server Object • Represents the environment in which ASP pages run • Provides general utility functions • Application Object • An application can contain a set of script files, html documents, images, etc. • Represents an entire Active Server Pages application • Session Object • Store information about a user session • A session object maintained for each user • Values stored in the session object are not discarded when the user jumps between pages.

20. Request Object • User’s request info is stored in collections • Collections • QueryString – Values of variables in the HTTP query string • Form – values of form elements sent from the browser • ServerVariables – Values of the HTTP and environment variables • Cookies – Values of cookies sent from the browser • ClientCertificate – client certificate values sent from the browser • Properties • TotalBytes – Specifies the number of bytes the client is sending in the body of this request • Methods • BinaryRead – used to retrieve data sent to the server as part of the POST request

21. Response Object • Collections • Cookies • Properties • Buffer • CacheControl • Charset • ContentType • Expires • ExpiresAbsolute • IsClientConnected • PICS • Status • Methods • AddHeader • AppendToLog • BinaryWrite • Clear • End • Flush • Redirect • Write

22. Server Object • Collections • None • Properties • ScriptTimeout – Length of time a script can run before an error occurs • Methods • CreateObject – Creates an instance of an object or server component • HTMLEncode – Applies HTML encoding to the specified string • MapPath – Converts a virtual path to a physical path • URLEncode – Applies URL encoding including escape chars to a string

23. Session Object • Collections • Contents – contains all items added to the session through script commands • StaticObjects – contains all objects added to the session with the <object> tag • Properties • CodePage – Sets the codepage used for symbol mapping • LCID – sets the locale identifier • SessionID – returns the session identification for this user • Timeout – sets timeout period for session state for application • Methods • Abandon – destroy a session object and release the resources • Events • onStart – occurs when the server creates a new session • onEnd – occurs when a session is abandoned or times out

24. Caution • You cannot view the ASP source code by selecting "View source" in a browser • You will only see the output from the ASP file, which is plain HTML • This is because the scripts are executed on the server before the result is sent back to the browser.

25. Writing Back to Client… • The Write method of the ASP Response Object is used to send content to the browser. For example, the following statement sends the text "Hello World" to the browser: • You may use different scripting languages in ASP files. However, the default scripting language is VBScript: • To set JavaScript as the default scripting language for a particular page you must insert a language specification at the top of the page: <% response.write("Hello World!") %> <html> <body> <% response.write("Hello World!") %> </body> </html> <%@ language="javascript"%> <html> <body> <% Response.Write("Hello World!") %> </body> </html>

26. Procedures and Functions • The ASP source code can contain procedures and functions: <html> <head> <% sub vbproc(num1,num2) response.write(num1*num2) end sub %> </head><body> <p>Result: <%call vbproc(3,4)%></p> </body></html>

27. Procedures and Functions • Insert the <%@ language="language" %> line above the <html> tag to write procedures or functions in another scripting language than default: <%@ language="javascript" %> <html> <head> <% function jsproc(num1,num2) { Response.Write(num1*num2) } %> </head><body> <p>Result: <%jsproc(3,4)%></p> </body></html>

28. User Input • The Request object may be used to retrieve user information from forms • Two ways: • Request.QueryString • Request.Form • Consider this form definition <form method="get" action="simpleform.asp"> First Name: <input type="text" name="fname"><br> Last Name: <input type="text" name="lname"> <br><br> <input type="submit" value="Submit"> </form>

29. Request.QueryString • Request.QueryString command is used to collect values in a form with method="get". • Information sent from a form with the GET method is visible to everyone (it will be displayed in the browser's address bar) • Has limits on the amount of information to be sent <body> Welcome <% response.write(request.querystring("fname")) response.write(" " & request.querystring("lname")) %> </body>

30. Request.Form • Request.Form command is used to collect values in a form with method="post". • Information sent from a form with the POST method is invisible to others • Has no limits on the amount of information that could be sent <body> Welcome <% response.write(request.form("fname")) response.write(" " & request.form("lname")) %> </body>

31. Text Field Example Sending the form data Calling the ASP page to process the data Get the value of the form element called “name” Get the value of the form element called “email” Try Form Example

32. Radio Button Example Call an ASP Page using the POST method Creating a text field • Set of Radio Buttons • Notice: • All the buttons have same name • First button is checked by default Submit Button

33. Radio Button Example (Continued) Creating a variable (TheName) and assigning a value to it Retrieving the value of the form element named “COLOR” (set of Radio buttons) Depending upon which radio button was clicked on, the variable “colornumber” will have the “value” of that radio button Use if statement to printout the appropriate message Try This Example

34. Drop-down List Example (hellocolor.htm) <html> <head><title>Chose a color</title></head> <form action="hellocolor.asp" method="post"> <h1>Saying Hello in Different Colors </h1> Here are the available colors: <select name="definedcolor"> <option value="nocolor">Choose a color</option> <option value="Red">Red</option> <option value="Green">Green</option> <option value="Blue">Blue</option> <option value="Orange">Orange</option> <option value="Pink">Pink</option> </select> <BR> How many times? <input type="text" name="count" size="5"><br> <BR><input type="Submit" value="Submit"></input> </form> </body> </html> Creating a drop-down box named “definedcolor”

35. Drop-down List Example (hellocolor.asp) <html> <head><title>Name and Color</title></head> <body> <% TheColor = Request.form("definedcolor") TheCount = Request.form("count") %> <% if Thecolor = "Red" then For mycount = 1 to TheCount %> <font color=red><h2>Hello</h2> <%Next%> <% elseif Thecolor= "Blue" then For mycount = 1 to TheCount %> <font color=blue><h2>Hello</h2> <%Next%> <% elseif Thecolor= "Green" then For mycount = 1 to TheCount %> <font color=green><h2>Hello</h2> <%Next%> <% elseif Thecolor= "Pink" then For mycount = 1 to TheCount %> <font color=pink><h2>Hello</h2> <%Next%> <% elseif Thecolor= "Orange" then For mycount = 1 to TheCount %> <font color=orange><h2>Hello</h2> <%Next%> <% else For mycount = 1 to TheCount %> <font color=black><h2>Hello</h2> <%Next%> <% end if %> </body> </html> Get the value of selected color and store it in a variable Get the value of count as well Nested If .. Elseif .. Else statement to check the color and display “Hello” Notice the For .. Next loop. Try This Example

36. Checkbox Example (checkbox.htm) Calling the asp page checkbox.asp <html></head> <body> <form name="form1" method=post action=checkbox.asp> <h2>Please indicate the albums that you would like:</h2> <input type=checkbox name="album" value="No Way Out (Puff Daddy)">No Way Out (Puff Daddy)<br> <input type=checkbox name="album" value="Secrets (Tony Braxton)">Secrets (Tony Braxton)<br> <input type=checkbox name="album" value="Release Some Tension (SWV)">Release Some Tension (SWV)<br> <input type=checkbox name="album" value="When Disaster Strikes (Busta Rhymes)">When Disaster Strikes (Busta Rhymes)<br> <input type=checkbox name="album" value="My Way (Usher)">My Way (Usher)<br> <p>&nbsp<input name="order" value="Process Order" type=submit> &nbsp <input type=reset> </form></body></html> Creating a series of checkboxes named “album”

37. Checkbox Example (checkbox.asp) <html> <head><title>Process Order</title></head> <body> <h1>Here are the albums you selected</h1> <% selected_albums = Request.form("album") Dim album_Array album_Array = split(selected_albums, ",") Dim iLoop For iLoop = LBound(album_Array) to UBound(album_Array) Response.write album_Array(iLoop) & "<BR>" Next %> </body> </html> Get all the selected album names in one long string separated by comma Separate the names using the “split” function and store the names in the array Loop through the array and print the value stored in each element of the array on a separate line using “<br>” Try This Example

38. Assignment #1 Create an HTML form with text fields, Checkboxes and radio buttons The form should also contain a submit and a reset button When the form is submitted, it should call an asp page, which summarizes the data that the user entered. Exercise#1 - Word Document See Solution