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
• Cant 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 ltformgtlt/formgt
  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 ltinput typetextgt
• Checkbox ltinput typecheckboxgt
• Radio Buttons ltinput typeradiogt
• Lists a ltselectgt tag followed by one or more
  ltoptiongt 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
ltform action"registar.asp" method"get"
name"form1" onSubmit"MM_validateForm('cust_name'
,'','R','last_name','','R','email_address','','Nis
Email')return document.MM_returnValue"gt
lttable width"100" border"0"
cellspacing"0"gt lttrgt
lttdgtltdiv align"center"gtltstronggtltfont
size"5"gtRequest For
Informationlt/fontgtlt/stronggtlt/divgtlt/tdgt
lt/trgt lt/tablegt
lttable width"95" border"0"
cellspacing"5"gt lttrgt
lttd width"124"gtltdiv
align"right"gtFirst Namelt/divgtlt/tdgt
lttd width"5" rowspan"8"gtnbsplt/tdgt
lttd width"153" nowrapgt ltdiv
align"left"gt ltinput
name"cust_name" type"text" class"input-text"
id"cust_name" size"25" maxlength"25"gt
lt/divgtlt/tdgt lt/trgt
lttrgt
lttdgtltdiv align"right"gtLast Namelt/divgtlt/tdgt
lttd nowrapgt ltdiv align"left"gt
ltinput name"last_name"
type"text" class"input-text" id"last_name"
size"25" maxlength"25"gt
lt/divgtlt/tdgt lt/trgt
lttrgt lttdgtltdiv
align"right"gtE-Mail Addresslt/divgtlt/tdgt
lttd nowrapgt ltdiv align"left"gt
ltinput name"email_address"
type"text" class"input-text" id"email_address"
size"25" maxlength"25"gt
lt/divgtlt/tdgt lt/trgt
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?cu
st_namechrislast_namecavaliereemail_addresss
treetcitystateALzipcodecust_intrest1Subm
itSubmit

• Information after the question mark informs the
  server that the URL includes URL Encoded Data,
  i.e., QueryString Data

12
QueryString

• Each occurance of namevalue is called a
  name-value pair.

http//www.cavalierewebdesigns.com/registar.asp?cu
st_namechrislast_namecavaliereemail_addresss
treetcitystateALzipcodecust_intrest1Subm
itSubmit

• 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 lt gt tags

15
Sample ASP Code
lt Dim strFirstName, strLastName, strStreet,
strCity, strState, strEmail, strCustIntrest
strFirstName request.querystring("cust_name") s
trLastName request.querystring("last_name") strS
treet request.querystring("street") strCity
request.querystring("city") strState
request.querystring("zipcode") strCustIntrest
request.querystring("cust_intrest") strEmail
request.querystring("email_address") gt lt Respons
e.Write("Thank you " strFirstName " for your
request.") gt ltbrgt ltbrgt lt if strCustIntrest
"1" then Response.Write("We will email the
information to you at ltstronggt" stremail
"lt/stronggt") else Response.Write("We will send
the information to you at your home address") end
if gt
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 ltformsgt lt/formsgt 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 users request
• Response Object
• Send information back to the user
• Servers 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

• Users 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 ltobjectgt 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

lt response.write("Hello World!") gt
lthtmlgt ltbodygt lt response.write("Hello World!")
gt lt/bodygt lt/htmlgt
lt_at_ language"javascript"gt lthtmlgt ltbodygt lt
Response.Write("Hello World!") gt lt/bodygt lt/htmlgt
26
Procedures and Functions

• The ASP source code can contain procedures and
  functions

lthtmlgt ltheadgt lt sub vbproc(num1,num2) response.wr
ite(num1num2) end sub gt lt/headgtltbodygt ltpgtResult
ltcall vbproc(3,4)gtlt/pgt lt/bodygtlt/htmlgt
27
Procedures and Functions

• Insert the lt_at_ language"language" gt line above
  the lthtmlgt tag to write procedures or functions
  in another scripting language than default

lt_at_ language"javascript" gt lthtmlgt ltheadgt lt func
tion jsproc(num1,num2) Response.Write(num1num2)
gt lt/headgtltbodygt ltpgtResult ltjsproc(3,4)gtlt/pgt
lt/bodygtlt/htmlgt
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

ltform method"get" action"simpleform.asp"gt First
Name ltinput type"text" name"fname"gtltbrgt Last
Name ltinput type"text" name"lname"gt ltbrgtltbrgt lti
nput type"submit" value"Submit"gt lt/formgt
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

ltbodygt Welcome lt response.write(request.querystri
ng("fname")) response.write(" "
request.querystring("lname")) gt lt/bodygt
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

ltbodygt Welcome lt response.write(request.form("fna
me")) response.write(" " request.form("lname"))
gt lt/bodygt
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)
lthtmlgt ltheadgtlttitlegtChose a colorlt/titlegtlt/headgt
ltform action"hellocolor.asp" method"post"gt
lth1gtSaying Hello in Different Colors lt/h1gt
Here are the available colors ltselect
name"definedcolor"gt ltoption value"nocolor"gtChoos
e a colorlt/optiongt ltoption value"Red"gtRedlt/optio
ngt ltoption value"Green"gtGreenlt/optiongt ltoption
value"Blue"gtBluelt/optiongt ltoption
value"Orange"gtOrangelt/optiongt ltoption
value"Pink"gtPinklt/optiongt lt/selectgt ltBRgt How
many times? ltinput type"text" name"count"
size"5"gtltbrgt ltBRgtltinput type"Submit"
value"Submit"gtlt/inputgt lt/formgt lt/bodygt lt/htmlgt
Creating a drop-down box named definedcolor
35
Drop-down List Example (hellocolor.asp)
lthtmlgt ltheadgtlttitlegtName and Colorlt/titlegtlt/headgt
ltbodygt lt TheColor Request.form("definedcolor
") TheCount Request.form("count") gt lt
if Thecolor "Red" then For mycount 1 to
TheCount gt ltfont colorredgtlth2gtHellolt/h2gt
ltNextgt lt elseif Thecolor "Blue" then For
mycount 1 to TheCount gt ltfont
colorbluegtlth2gtHellolt/h2gt ltNextgt lt elseif
Thecolor "Green" then For mycount 1 to
TheCount gt ltfont colorgreengtlth2gtHellolt/h2
gt ltNextgt lt elseif Thecolor "Pink" then
For mycount 1 to TheCount gt ltfont
colorpinkgtlth2gtHellolt/h2gt ltNextgt
lt elseif Thecolor "Orange" then For mycount
1 to TheCount gt ltfont
colororangegtlth2gtHellolt/h2gt ltNextgt lt else
For mycount 1 to TheCount gt ltfont
colorblackgtlth2gtHellolt/h2gt ltNextgt lt end if gt
lt/bodygt lt/htmlgt
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
lthtmlgtlt/headgt ltbodygt ltform name"form1"
methodpost actioncheckbox.aspgt lth2gtPlease
indicate the albums that you would
likelt/h2gt ltinput typecheckbox name"album"
value"No Way Out (Puff Daddy)"gtNo Way Out (Puff
Daddy)ltbrgt ltinput typecheckbox name"album"
value"Secrets (Tony Braxton)"gtSecrets (Tony
Braxton)ltbrgt ltinput typecheckbox name"album"
value"Release Some Tension (SWV)"gtRelease Some
Tension (SWV)ltbrgt ltinput typecheckbox
name"album" value"When Disaster Strikes
(Busta Rhymes)"gtWhen Disaster Strikes

(Busta Rhymes)ltbrgt ltinput
typecheckbox name"album" value"My Way
(Usher)"gtMy Way (Usher)ltbrgt ltpgtnbspltinput
name"order" value"Process Order"
typesubmitgt nbsp ltinput typeresetgt lt/formgtlt/bo
dygtlt/htmlgt
Creating a series of checkboxes named album
37
Checkbox Example (checkbox.asp)
lthtmlgt ltheadgtlttitlegtProcess Orderlt/titlegtlt/headgt
ltbodygt lth1gtHere are the albums you
selectedlt/h1gt lt 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) "ltBRgt" Next gt lt/bodygt
lt/htmlgt
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 ltbrgt
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.
Exercise1 - Word Document
See Solution