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

Web Application DevelopmentWeb Application Development

Vijayan SugumaranVijayan SugumaranDecision and Information SciencesDecision and Information Sciences

Oakland UniversityOakland University

AgendaAgenda

Session 1 – Introduction to ASPSession 1 – Introduction to ASP– Assignment #1Assignment #1

Session 2 – Database ConnectivitySession 2 – Database Connectivity– Assignment #2Assignment #2

Session 3 – ASP Application Session 3 – ASP Application DevelopmentDevelopment– Assignment #3Assignment #3

Introduction to ASPIntroduction to ASP

Session 1Session 1

Forms provide a way for a web page to interact Forms provide a way for a web page to interact with a user with a user

Generating a static web page does not begin to Generating a static web page does not begin to tap into the unlimited possibilities the internet tap into the unlimited possibilities the internet has to offerhas to offer

By using forms we can gather information and By using forms we can gather information and make decisionsmake decisions

Why Use Forms in a Web Site?Why Use Forms in a Web Site?

•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 PagesActive Server Pages

Creating ASP FilesCreating ASP Files– Microsoft FrontPageMicrosoft FrontPage– Visual InterDevVisual InterDev– Any HTML editor and add scripts laterAny HTML editor and add scripts later

Viewing ASP pagesViewing ASP pages– ASP page has to be executed on the serverASP page has to be executed on the server– Can’t just view the page on the clientCan’t just view the page on the client– Server running (IIS4.0/Personal Web Server running (IIS4.0/Personal Web

Server4.0)Server4.0)– To force the server to execute the ASP page, To force the server to execute the ASP page,

place it in the required/suitable directoryplace it in the required/suitable directory

Creating and Viewing ASP PagesCreating and Viewing ASP Pages

A form is encapsulated with the <form></form> tagsA form is encapsulated with the <form></form> tags

A web form is similar to a paper form. A web form is similar to a paper form.

A form can contain many elements:A form can contain many elements:– Text FieldsText Fields– CheckboxesCheckboxes– DroplistsDroplists– Radio ButtonsRadio Buttons

Each of these items are called “form controls”Each of these items are called “form controls”They are described using a “label”They are described using a “label”

The following controls are generated using these tags:The following controls are generated using these tags:– Textbox = <input type=“text”>Textbox = <input type=“text”>– Checkbox = <input type=“checkbox”>Checkbox = <input type=“checkbox”>– Radio Buttons = <input type=“radio”>Radio Buttons = <input type=“radio”>– Lists = a <select> tag followed by one or more <option> tagsLists = a <select> tag followed by one or more <option> tags

Form ElementsForm Elements

An Example FormAn Example Form

Generally, a form is created with an Generally, a form is created with an embedded table. The table helps align the embedded table. The table helps align the information.information.

The form controls are placed within each The form controls are placed within each cell of the table.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

<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>

Partial code for previous formPartial code for previous formForm 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

Radio buttons are Radio buttons are mutually exclusive mutually exclusive (i.e. (i.e. only one can be selected at a time)only one can be selected at a time)

Submit buttons are used to Submit buttons are used to submitsubmit the the information to the serverinformation to the server– When the customer clicks the submit button an When the customer clicks the submit button an

actionaction is performed and a method is executed is performed and a method is executed– On the previous slide, the action was shown to On the previous slide, the action was shown to

be be register.aspregister.asp and the method is and the method is GETGET

Form Elements NotesForm Elements Notes

After the customer clicks on the submit After the customer clicks on the submit button the following information can be button the following information can be found in the address bar of the found in the address bar of the browser: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 Information after the question mark informs the server that the URL informs the server that the URL includes URL Encoded Data, i.e., includes URL Encoded Data, i.e., QueryString DataQueryString Data

Sending Form Data to ServerSending Form Data to Server

Each occurance of Each occurance of name=valuename=value is is called a called a name-value pairname-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 Each name is the name of the attribute of a form control (last_name) and the value is the form control (last_name) and the value is the value returned by the control (cavaliere)value returned by the control (cavaliere)Each value pair concatenated with “&”Each value pair concatenated with “&”

QueryStringQueryString

There are two ways to package data to send There are two ways to package data to send it to the serverit to the server– PostPost

Requests are sent all the way to the specified serverRequests are sent all the way to the specified serverThis is important for an e-commerce site where you want This is important for an e-commerce site where you want to view fresh information after saving items to a to view fresh information after saving items to a shopping cartshopping cart

– GetGetRequests are cached by an intermediate serverRequests are cached by an intermediate serverInstead of getting a fresh page, we might receive a copy Instead of getting a fresh page, we might receive a copy of the page viewed previouslyof the page viewed previouslyAllows requests to be satisfied without needing to send Allows requests to be satisfied without needing to send the request all the way back to the original server and the request all the way back to the original server and the response all the way back to the requesting browserthe response all the way back to the requesting browser

Sending Data to ServerSending Data to Server

The The register.aspregister.asp page is used to page is used to process the data when the submit process the data when the submit button is clickedbutton is clicked

.asp designates a web page that is .asp designates a web page that is written using ASPwritten using ASP

ASP code is enclosed in <% %> tagsASP code is enclosed in <% %> tags

Processing the Data on the ServerProcessing the Data on the Server

<%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>")

elseResponse.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 CodeSample ASP Code

•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)

Putting it all togetherPutting it all together

ClientClient

Server

Response Object

Request Object

ObjectContext Object

ServerObject

SessionObject

ApplicationObject

ASP Object ModelASP Object Model

Request ObjectRequest Object– Captures all the information about user’s Captures all the information about user’s

requestrequest

Response ObjectResponse Object– Send information back to the userSend information back to the user– Server’s response to the userServer’s response to the user

ObjctContext ObjectObjctContext Object– Used to either commit or abort transactions Used to either commit or abort transactions

managed by Microsoft Transaction Server managed by Microsoft Transaction Server initiated by an Active Server Page script.initiated by an Active Server Page script.

ASP ObjectsASP Objects

Server ObjectServer Object– Represents the environment in which ASP pages runRepresents the environment in which ASP pages run– Provides general utility functionsProvides general utility functions

Application ObjectApplication Object– An application can contain a set of script files, html An application can contain a set of script files, html

documents, images, etc.documents, images, etc.– Represents an entire Active Server Pages applicationRepresents an entire Active Server Pages application

Session ObjectSession Object– Store information about a user sessionStore information about a user session– A session object maintained for each userA session object maintained for each user– Values stored in the session object are not discarded Values stored in the session object are not discarded

when the user jumps between pages.when the user jumps between pages.

ASP ObjectsASP Objects

User’s request info is stored in collectionsUser’s request info is stored in collectionsCollectionsCollections– QueryString – QueryString – Values of variables in the HTTP query stringValues of variables in the HTTP query string

– Form – Form – values of form elements sent from the browservalues of form elements sent from the browser

– ServerVariables – ServerVariables – Values of the HTTP and environment variablesValues of the HTTP and environment variables

– Cookies – Cookies – Values of cookies sent from the browserValues of cookies sent from the browser

– ClientCertificate – ClientCertificate – client certificate values sent from the browserclient certificate values sent from the browser

PropertiesProperties– TotalBytes – TotalBytes – Specifies the number of bytes the client is sending Specifies the number of bytes the client is sending

in the body of this requestin the body of this request

MethodsMethods– BinaryRead – BinaryRead – used to retrieve data sent to the server as part of used to retrieve data sent to the server as part of

the POST requestthe POST request

Request ObjectRequest Object

CollectionsCollections– CookiesCookies

PropertiesProperties– BufferBuffer– CacheControlCacheControl– CharsetCharset– ContentTypeContentType– ExpiresExpires– ExpiresAbsoluteExpiresAbsolute– IsClientConnectedIsClientConnected– PICSPICS– StatusStatus

MethodsMethodsAddHeaderAddHeaderAppendToLogAppendToLogBinaryWriteBinaryWriteClearClearEndEndFlushFlushRedirectRedirectWriteWrite

Response ObjectResponse Object

CollectionsCollections– NoneNone

PropertiesProperties– ScriptTimeout – Length of time a script can run ScriptTimeout – Length of time a script can run

before before an error occursan error occurs

MethodsMethods– CreateObject – CreateObject – Creates an instance of an object or server Creates an instance of an object or server

componentcomponent

– HTMLEncode – HTMLEncode – Applies HTML encoding to the specified Applies HTML encoding to the specified stringstring

– MapPath – MapPath – Converts a virtual path to a physical pathConverts a virtual path to a physical path

– URLEncode – URLEncode – Applies URL encoding including escape chars Applies URL encoding including escape chars to a stringto a string

Server ObjectServer Object

CollectionsCollections– Contents – Contents – contains all items added to the session through script commandscontains all items added to the session through script commands

– StaticObjects – StaticObjects – contains all objects added to the session with the <object> contains all objects added to the session with the <object> tagtag

PropertiesProperties– CodePage – CodePage – Sets the codepage used for symbol mappingSets the codepage used for symbol mapping

– LCID – LCID – sets the locale identifiersets the locale identifier

– SessionID – SessionID – returns the session identification for this userreturns the session identification for this user

– Timeout – Timeout – sets timeout period for session state for applicationsets timeout period for session state for application

MethodsMethods– Abandon – Abandon – destroy a session object and release the resourcesdestroy a session object and release the resources

EventsEvents– onStart – onStart – occurs when the server creates a new sessionoccurs when the server creates a new session

– onEnd – onEnd – occurs when a session is abandoned or times outoccurs when a session is abandoned or times out

Session ObjectSession Object

CautionCaution

You cannot view the ASP source code You cannot view the ASP source code by selecting "View source" in a by selecting "View source" in a browserbrowser

You will only see the output from the You will only see the output from the ASP file, which is plain HTMLASP file, which is plain HTML

This is because the scripts are This is because the scripts are executed on the server before the executed on the server before the result is sent back to the browser.result is sent back to the browser.

Writing Back to Client…Writing Back to Client…

The Write method of the ASP Response Object is used to send The Write method of the ASP Response Object is used to send content to the browser. For example, the following statement content to the browser. For example, the following statement sends the text "Hello World" to the browser:sends the text "Hello World" to the browser:

You may use different scripting languages in ASP files. You may use different scripting languages in ASP files. However, the default scripting language is VBScript:However, the default scripting language is VBScript:

To set JavaScript as the default scripting language for a To set JavaScript as the default scripting language for a particular page you must insert a language specification at particular page you must insert a language specification at the top of the page:the top of the page:

<html> <body><% response.write("Hello World!") %></body> </html>

<% response.write("Hello World!") %>

<%@ language="javascript"%><html> <body> <% Response.Write("Hello World!") %> </body> </html>

Procedures and FunctionsProcedures and Functions

The ASP source code can contain The ASP source code can contain procedures and functions: 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>

Procedures and FunctionsProcedures and Functions

Insert the <%@ language="Insert the <%@ language="languagelanguage" %> line " %> line above the <html> tag to write procedures or above the <html> tag to write procedures or functions in another scripting language than default: 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>

User InputUser Input

The Request object may be used to The Request object may be used to retrieve user information from formsretrieve user information from forms

Two ways:Two ways:– Request.QueryStringRequest.QueryString– Request.FormRequest.Form

Consider this form definition 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>

Request.QueryStringRequest.QueryString

Request.QueryString command is used to collect Request.QueryString command is used to collect values in a form with method="get". values in a form with method="get".

Information sent from a form with the GET method Information sent from a form with the GET method is visible to everyone (it will be displayed in the is visible to everyone (it will be displayed in the browser's address bar)browser's address bar)

Has limits on the amount of information to be sentHas limits on the amount of information to be sent

<body>Welcome<%response.write(request.querystring("fname"))response.write(" " & request.querystring("lname"))%></body>

Request.FormRequest.Form

Request.Form command is used to collect values Request.Form command is used to collect values in a form with method="post". in a form with method="post".

Information sent from a form with the POST Information sent from a form with the POST method is invisible to othersmethod is invisible to others

Has no limits on the amount of information that Has no limits on the amount of information that could be sentcould be sent

<body>Welcome<%response.write(request.form("fname"))response.write(" " & request.form("lname"))%></body>

Text Field ExampleText Field Example

Sending theform 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 ExampleTry Form Example

Radio Button ExampleRadio Button Example

Call an ASP Pageusing the POST method

Creating a text field

Set of Radio ButtonsNotice: a) All the buttons have same nameb) First button is checked by defaultSubmit Button

Radio Button Example (Continued)Radio Button Example (Continued)

Creating a variable (TheName)and assigning a value to it

Retrieving the value of the formelement named “COLOR” (set ofRadio buttons)

Depending upon which radio buttonwas clicked on, the variable “colornumber”will have the “value” of that radio button

Use if statement to printout the appropriatemessage

Try This ExampleTry This Example

Drop-down List Example (hellocolor.htm)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-downbox named “definedcolor”

Drop-down List Example (hellocolor.asp)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>

Try This ExampleTry This Example

Get the value of selected color andstore it in a variableGet the value of count as well

Nested If .. Elseif .. Else statementto check the color and display “Hello”Notice the For .. Next loop.

Checkbox Example (checkbox.htm)Checkbox Example (checkbox.htm)

<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”

Calling the asppage checkbox.asp

Checkbox Example (checkbox.asp)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>

Try This ExampleTry This Example

Get all the selectedalbum names in onelong string separated by comma

Separate the namesusing the “split” function and storethe names in the array

Loop through the arrayand print the value stored in each element of the array on a separate line using “<br>”

Assignment #1Assignment #1

Create an HTML form with text fields,Checkboxes and radio buttons

The form should also contain a submitand a reset button

When the form is submitted, it shouldcall an asp page, which summarizesthe data that the user entered.

Exercise#1 - Word DocumentExercise#1 - Word Document See SolutionSee Solution