Creating Interactive Websites with Active Server Pages ASPs

1
Creating Interactive Websites with Active Server
Pages (ASPs)
IDS 6441 Electronic Commerce

• Robert J. Kauffman
• Carlson School of Management
• University of Minnesota

Note This presentation uses materials initially
prepared by Alina M. Chircu for IDS 6441 during
Summer 1999, and then extended by Alina Chircu
and Robert J. Kauffman for IDS 6441 in 2000-2001.
2
Learning Objectives

• By the end of this session you should be able to
• define the basic concepts associated with Active
  Server Pages (ASP)
• create forms in HTML and process them using ASP
• embed simple database functionality into webpages
  
• Take away useful intuition about how this works
  in current contexts on the World Wide Web

3
Active Server Pages(ASP) provide dynamic
webpagefunctionality.
ltHTMLgtlt ASP Codegtlt/HTMLgt

• ltHTMLgt
• ltBgtHello
• lt/HTMLgt

ASP Processing
4
ASP Concepts

• Objects
• combine data and commands
• provide basic functions without the need of
  re-writing them every time
• Object types
• Response -- sends data to the users browser
• Request -- requests data from the users browser
• Server -- controls the ASP execution environment,
  enables database access, etc.

5
Request and Response Enable Dynamic Web Pages
All ASP instructions are run on the server side,
not on the client side.
6
ASP Code

• Writing the ASP program
• Any text editor (Notepad recommended)
• FrontPage IN THE HTML VIEW the file has to be
  saved as Active Server Pages file type
• Basic Rules
• Static HTML tags are mixed with dynamic ASP code
• ASP commands appear inside lt and gt
• The pre-defined ASP objects (I.e. Response
  Request) can be used to create dynamic HTML code
  and request information from the user

7
Example 1 (ASP_1.asp)

• Goal Write a simple ASP program that displays
  text on the screen
• This is what we want to obtain

8
Example 1 The ASP Code That Runs on the Server
HTML tag for font size 6 gt big font
Line break
Tag that signals to the server that the following
is ASP code that needs processing
ASP command the RESPONSE object is required to
send the text inside quotation marks to the
browser
End of ASP code
9
Example 1 What Does The Browser Receive?
Up to here everything is the same the HTML code
is sent unchanged
This line is what the server sends to the client
browser through RESPONSE.WRITE
10
Creating Personalized WebPages

• Scope
• recognize users
• provide personalized service
• provide security via a login name and password

11
Passwording Example
12
Call to Member Database
13
Personalization with ASP

• Reading information in a form from the browser
• Displaying a personalized web page based on the
  form input
• Searching information in a database based on the
  form input
• Displaying the information dynamically based on
  the search results

14
Forms

• Have two main components
• Input Fields
• Accept input from the user
• Text fields, scrolling text box fields, radio
  buttons, check buttons
• Action Buttons
• The input of the form is processed by an
  associated program when the button is clicked

15
Example 2 Dynamic Content Based on Form Input

• The following are the minimum things required to
  illustrate how this works
• login webpage that asks for users name --
  ASP_2_form.htm
• response webpage that displays a personalized
  greeting ASP_2_form_handler.asp

16
How It Works

• The login webpage is a simple HTML page that
• reads data
• sends the data to the form handler program
• The form handler webpage uses an ASP code to
• read the data from the form
• display a personalized greeting

17
ASP_2_form.htm
When the user enters a name (i.e. Alina) and
clicks Submit, the following response is generated
18
Example 2 Preliminaries Creating FORMS

• HTML tags ltform attributesgt lt/formgt
• Attributes specify
• What program handles the form (action)
• How the input is sent to the handling program
  (method)
• The form can have several components (inputs)
• A Text Input field ltinput typetext
  nameAVariableNameWhereTheInputIsStored
  sizeANumberSpecifyingTheLengthOfTheTextInCharact
  ersgt
• A Submit Button ltinput typesubmit
  nameTheNameOfTheButton valueTheTextAppearingO
  nTheButton
• A Reset Button ltinput typereset
  nameTheNameOfTheButton valueTheTextAppearingO
  nTheButton

19
Heres the example that creates the form shown
earlier
20
Forms in FrontPage
Just use the Insert Menu, it is self-explanatory
21
Example 2 The ASP Code That Runs on the Server
user_name is a variable that receives the value
entered by the user in the text input field of
the form called UserName. The value of the
variable is then sent to the client.
22
Example 2 What Does the Client (The Browser)
Receive?
As you can see, the text entered in the from
(Alina) was sent to the server, and then
converted in plain HTML code.
23
What If I Enter Another Name?
Now the browser has received the value Andrew,
which was initially entered in the text field
UserName, then read in the ASP variable user_name
and send to the browser through the command
RESPONSE.WRITE user_name
24
Creating Even More Personalized Webpages

• To include more input fields in the form
• just follow the same steps
• Give different names to each input
• To read the inputs from the form in ASP
• Use request.form(TheNameofEachField) for each
  field you want to read
• Save the inputs in individual variables

25
Combining Variables and Text in ASP
The previous example uses a response.write
command for each element of the greeting. A
similar effect can be obtained by combining all
the text of the greeting in one variable called
greeting with or
26
Writing HTML in ASP Code

• ASP can generate not only simple text, but
  formatted text using HTML tags
• To do so, you can use RESPONSE.WRITE HTMLCode
• Example
• response.write ltbgt SomeText lt/bgt makes SomeText
  bold
• In the earlier example, generating a greeting in
  which the user name only is bold requires the ASP
  code
• response.write Hello, ltbgt user_name lt/bgt!
  
• This code is processed and the client will
  receive (assuming the form input is Andrew)
  Hello, ltbgt Andrew lt/bgt !

27
Personalization with ASP

• Reading information in a form from the browser
• Displaying a personalized web page based on the
  form input
• Searching information in a database based on the
  form input
• Displaying the information dynamically based on
  the search results

28
Database Connectivity with ASPs

• Server
• Web pages (HTML, ASP)
• Database

Database search
Obtain search results
Submit search criteria
Read webpage
Enter search criteria

• Client
• Web browser

29
Search Functionality
An ASP script allows you to search for all the
Quicken products available
30
The results are displayed as a list after
searching in a product database gt results are
dynamic depending on availability of products
31
Database Connectivity with ASPs

• Server
• Web pages
• search page (enables user to enter/select search
  criteria click a button to start the search)
  Search.htm or Search.asp
• processing page (searches the database and
  displays results)SearchHandler.asp
• Database

Execute SearchHandler.asp
SearchHandler.asp displays search results
Read Search webpage
Start Search
Enter/select search criteria

• Client
• Web browser

32
Database Connectivity with ASPs

• Preliminary Issues
• create and save database on the server
• set-up server connection
• set up appropriate access rights to the database
• ASP Steps the 4 essential steps!
• CONNECT to DATABASE
• SELECT RECORDS according to search criteria using
  a SQL query
• DISPLAY RECORDS
• DISCONNECTION

33
Preliminary Issues

• Creating a database
• Establishing access rights
• server administrator
• Set-up of server connection DSN (Domain Server
  Name)
• used to hide the details of the connection to the
  database
• File DSN see example
• System DSN set up by server administrator

34
A File DSN
35
Database Connectivity Example

• Background Consider a database of case studies
  that stores information about
• companies
• students
• the case studies completed by each student
• articles about companies
• Problem Search the database and display the
  results on the web
• Solution Use ASP to embed search capability into
  static webpages

36

• Case_studies.mdb
• Connectivity is to a Microsoft Access .mdb
  database in relational form (key, non-key fields)

37
(No Transcript)
38
Database Queries SQL SELECT Syntax

• SELECT field_list FROM database_table_list
• WHERE conditions
• field_list can contain the names of the fields,
  or if all fields are needed
• database_table_list should contain at least one
  table name
• conditions can be related to
• comparison of fields to pre-defined values
• equality of fields in 2 tables (useful when you
  want to combine info from multiple tables using a
  relationship)

39
SELECT Examples

• Select all fields in all records in the Articles
  table SELECT FROM Articles
• Select only the Title and the Date fields for all
  articles in the Articles table SELECT Title,
  Date FROM Articles
• Select all fields from the articles that were
  published in Business Week SELECT FROM
  Articles WHERE PublicationBusiness Week
• Select the title of the articles about Amazon
  SELECT Articles.Title FROM Articles, Companies
  WHERE Articles.CompanyIDCompanies.CompanyID AND
  Companies.CompanyNameAmazon

40
Example 3 Display Records from a Database Table
Display all records in the Articles table
41
This is the entire ASP code, saved in a file
ASP_3.asp. Lets discuss the code in more detail.
It has 4 steps CONNECT SELECT DISPLAY DISCONNECT
42
CONNECT
These commands create a database connection. Note
the conn.open command conn.open
"filedsn"Server.MapPath("file.dsn") "DBQ"
Server.MapPath("case_studies.mdb") This command
uses the Server.MapPath function to find the
entire path of the file.dsn and case_studies.mdb
files on the server. Note the server.createobject
command this creates a recordset object rs that
will store the results of the database search.
Note ASP is not case-sensitive, so
server.createobject is the same as
server.CreateObject.
43
SELECT
These commands build a SQL query in the variable
query and then run the query in the database to
which the connection conn was established. The
result is a record set rs, i.e. a table. Each
row of rs, i.e. rs(i), 'will now contain a
record, where i0, 1, ..., no. of fields -1
44
DISPLAY
This code writes the records in a table generated
by inserting HTML tags in the ASP response.
45
More About Displaying The Results (1)

• First, find out how many fields there are in the
  query results, i.e. in the recordset rs.
  Remember, rs will contain only those fields
  specified by the SELECT statement above. The
  number of fields is in the rs.fields.count
  variable
• Since rs(0) contains the first record, the upper
  bound will be the total number of fields - 1
  thus, rs(0), rs(1), .... rs(howmanyfields) will
  contain the 1st record, the 2nd record, ... , the
  last record respectively
• The first row of the table will contain the field
  names, which are stored in rs(i).name. The code
  accesses each field name, for i from 0 to
  howmanyfields, and display it

46
More About Displaying the Results (2)

• The recordset rs has a "pointer" that indicates
  the current record
• The current record is, by default, the first
  record in the recordset
• The pointer can be moved to the next record with
  rs.movenext
• rs.eof is a variable that is true when the
  pointer reaches the end of file (eof) indicator
• Each record in rs is written as long as there are
  still records in the recordset, i.e. no end of
  file (eof) has been reached

47
DISCONNECT
Closing the connection after all the records
have been written, close the recordset rs, reset
the recorset variable rs, close the connection,
and reset the connection variable
48
Example 4 Selecting Specific Records
Selecting only the records that were published in
InformationWeek gt specify a condition in the
SELECT SQL statement with WHERE.
49
Example 4 ASP Code

• CONNECT, DISLAY, DISCONNECT are the same
• SELECT part is different
• The code below generates the following SQL
  statement SELECT From Articles WHERE
  PublicationInformationWeek

This creates the quotes
The criteria can come from a form, too!
50
Learning Objectives

• By the end of this session you should be able to
• define the basic concepts associated with Active
  Server Pages (ASP)
• create forms in HTML and process them using ASP
• embed simple database functionality into webpages
  
• Take away useful intuition about how this works
  in current contexts on the World Wide Web