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. 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 Why Use Forms in a Web Site?

5. 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 Active Server Pages

6. 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 Creating and Viewing ASP Pages

7. A form is encapsulated with the 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 = –Textbox = –Checkbox = –Checkbox = –Radio Buttons = –Radio Buttons = –Lists = a tag followed by one or more tags Form Elements

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. Red dotted lines designate the borders of the form Black dotted lines designate the borders of the table Text box control Drop list control

9. Request For Information First Name Last Name E-Mail Address Partial code for previous form Form tag and name Form control that allows a customer to enter their first name CSS Class for this control Name of the control Determines how the form data is sent to the server When the submit button is clicked, the function is executed first and then the action, i.e., calling the asp page Name of the controls

10. 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 Form Elements Notes

11. 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 Sending Form Data to Server

12. 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 “&” QueryString

13. 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 Sending Data to Server

14. 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 Processing the Data on the Server

15. <% 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.") %> <% if strCustIntrest = "1" then Response.Write("We will email the information to you at " & stremail & " ") else Response.Write("We will send the information to you at your home 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 Sample ASP Code

16. Forms are used to gather information from a customer Forms use the 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) Putting it all together

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

18. 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. ASP Objects

19. 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. ASP Objects

20. 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 Request Object

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

22. 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 Server Object

23. Collections –Contents – contains all items added to the session through script commands –StaticObjects – contains all objects added to the session with the 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 Session Object

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:

26. Procedures and Functions The ASP source code can contain procedures and functions: <% sub vbproc(num1,num2) response.write(num1*num2) end sub %> Result:

27. Procedures and Functions Insert the line above the tag to write procedures or functions in another scripting language than default: <% function jsproc(num1,num2) { Response.Write(num1*num2) } %> Result:

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 First Name: Last Name:

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 Welcome <% response.write(request.querystring("fname")) response.write(" " & request.querystring("lname")) %>

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 Welcome <% response.write(request.form("fname")) response.write(" " & request.form("lname")) %>

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: a)All the buttons have same name b)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) Chose a color Saying Hello in Different Colors Here are the available colors: Choose a color Red Green Blue Orange Pink How many times? Creating a drop-down box named “definedcolor”

35. Drop-down List Example (hellocolor.asp) Name and Color <% TheColor = Request.form("definedcolor") TheCount = Request.form("count") %> <% if Thecolor = "Red" then For mycount = 1 to TheCount %> Hello <% elseif Thecolor= "Blue" then For mycount = 1 to TheCount %> Hello <% elseif Thecolor= "Green" then For mycount = 1 to TheCount %> Hello <% elseif Thecolor= "Pink" then For mycount = 1 to TheCount %> Hello <% elseif Thecolor= "Orange" then For mycount = 1 to TheCount %> Hello <% else For mycount = 1 to TheCount %> Hello Try This Example 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.

36. Checkbox Example (checkbox.htm) Please indicate the albums that you would like: <input type=checkbox name="album" value="No Way Out (Puff Daddy)">No Way Out (Puff Daddy) <input type=checkbox name="album" value="Secrets (Tony Braxton)">Secrets (Tony Braxton) <input type=checkbox name="album" value="Release Some Tension (SWV)">Release Some Tension (SWV) <input type=checkbox name="album" value="When Disaster Strikes (Busta Rhymes)">When Disaster Strikes (Busta Rhymes) <input type=checkbox name="album" value="My Way (Usher)">My Way (Usher) &nbsp Creating a series of checkboxes named “album” Calling the asp page checkbox.asp

37. Checkbox Example (checkbox.asp) Process Order Here are the albums you selected <% 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) & " " Next %> Try This Example 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 “ ”

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