Download Information and Communication Technology

IT in Education e-Leadership & Management Series
Using Active Server Page
(ASP) to create Simple
Web-database Application
Speaker：PAU CHUNG WAI (Half-seconded Teacher)
1
IT Management FWG’s Blog
http://edblog.hkedcity.net/itman
2
Reference Site

http://www.w3schools.com
3
Part 1: Introduction
4
Introduction to Dynamic Web Page



Dynamic means content on a web page can
change in response to different context or
conditions.
More interactive than static web page
Two ways:


Client-side Scripting (e.g. JavaScript, VBScript)
Server-side Scripting (e.g. PHP, Perl, ASP, JSP)
5
What is ASP?




ASP stands for Active Server Pages
ASP is a program that runs inside IIS
IIS stands for Internet Information Services
IIS comes as a free component with Win XP
and Vista
6
How does ASP differ from HTML?


When a browser requests an HTML file, the
server returns the file.
When a browser requests an ASP file, IIS
passes the request to the ASP engine. The
ASP engine reads the ASP file, line by line,
and executes the scripts in the file. Finally,
the ASP file is returned to the browser as
plain HTML.
7
How does ASP differ from HTML?
Web Server
Request
ASP Engine
Client
Response
displayed in
browser
8
Advantages of using ASP?



Dynamically edit, change or add any content
of a Web page
Access any data or databases and return
the results to a browser
Provide security since your ASP code cannot
be viewed from the browser
9
Part 2: How to setup a
Web Server?
10
How to install IIS in Win XP?


To run ASP, IIS must be installed.
Follow these steps to install IIS on Windows XP:








On the Start menu, click Settings and select Control
Panel.
Double-click Add or Remove Programs.
Click Add/Remove Windows Components.
Click Internet Information Services (IIS).
Click Details.
Select the check box for World Wide Web Service, and
click OK.
In Windows Component selection, click Next to install IIS.
After you have installed IIS, make sure you install all
patches for bugs and security problems.
11
12
13
After Installation, you can find the
IIS program icon in System Tools
(系統管理工具):
14
Right-click and
then select
“Properties (內容)”
15
Primary
Document
Folder (Can
be changed)
16
Test your Web

Follow these steps after you have installed IIS:






Look for a new folder called Inetpub on your hard drive.
Open the Inetpub folder, and find a folder named
wwwroot.
Create a new folder, “ASP", under wwwroot.
Copy all the sample files to this folder
Make sure your Web server is running.
Open your browser and type
“http://localhost/ASP/testing.asp"
to view your first web page.
17
How to install IIS in Windows Vista?
1.
2.
3.
4.
On the Start menu, click Settings and select Control Panel.
Select Turn Windows Features On or Off from Programs and
Features.
Select Internet Information
Services. Expand the tree nodes
of IIS, check the options that you
want to turn on. (You must turn
on ASP feature)
Then click OK to install IIS.
18
How to install IIS in Windows Vista?
19
How to install IIS in Windows Vista?
TRUE
20
How to install IIS in Win Server 2003?
1.
2.
3.
4.
5.
6.
7.
8.
When you start the Windows Server 2003, you should see
the Manage Your Server wizard
If the wizard is not displayed, go to Administrative Tools,
and select Manage Your Server
In the wizard, click Add or Remove a Role, click Next
Select Custom Configuration, click Next
Select Application Server role, click Next
Select Enable ASP.NET, click Next
Now, the wizard may ask for the Server 2003 CD. Insert
the CD and let it run until it is finished, then click the Finish
button
The wizard should now show the Application Server role
installed
21
How to install IIS in Win Server 2003?
9.
10.
11.
12.
13.
14.
15.
16.
Click on Manage This Application Server to bring up the
Application Server Management Console (MMC)
Expand the Internet Information Services (IIS)
Manager, then expand your server, and then the Web Sites
folder
You should see the Default Web Site, and it should not say
(Stopped)
IIS is running!
In the Internet Information Services (IIS) Manager
click on the Web Service Extensions folder
Here you will see that Active Server Pages are
Prohibited (this is the default configuration of IIS 6)
Highlight Active Server Pages and click the Allow button
ASP is now active!
22
Part 3: Basic ASP Syntax
23
Basic Syntax





ASP file normally contains HTML tags
Also contains server scripts, surrounded
by the delimiter <% and %>
Server scripts are executed on the server
Results are plain HTML codes
Source codes not viewed by the web
browser
24
Example 1A
example1a.asp
<html>
<body>
<%
response.write(“Hello World!”)
%>
</body>
</html>
25
Example 1B
example1b.asp
<html>
<body>
<%
=“hello World!”
%>
</body>
</html>
26
Example 2A
example2a.asp
<html>
<body>
<%
response.write(“The time now is ” & now())
%>
</body>
</html>
27
Example 2B
example2b.asp
<html>
<body>
<%
response.write(formatdatetime(now(),1)
response.write(formatdatetime(now(),2)
response.write(formatdatetime(now(),3)
response.write(formatdatetime(now(),4)
%>
</body>
</html>
&
&
&
&
"<br>")
"<br>")
"<br>")
"<br>")
28
Variable



A variable is used to store information.
If the variable is declared outside a
procedure it can be changed by any script
in the ASP file.
If the variable is declared inside a
procedure, it is created and destroyed
every time the procedure is executed.
29
Example 3
example3.asp
<%
X = “Hello World!”
Sub Display()
Dim X
X = “Welcome!”
Response.write(X)
End Sub
%>
<html>
<body>
<% call display() %> <br>
<% =X %>
</body>
</html>
30
Procedure

You can call both a JavaScript procedure
and a VBScript procedure in an ASP file
31
Example 4 – Calling a VBScript Procedure
example4.asp
<html>
<head>
<%
sub vbproc(num1,num2)
response.write num1*num2
end sub
%>
</head>
<body>
<p>
The result of 3 * 4 is <%call vbproc(3,4)%>.
</p>
</body>
</html>
32
Example 5 – Calling a JavaScript Procedure
<%@ language=“JavaScript”%>
<html>
<head>
<%
function jsproc(num1,num2)
{
Response.Write(num1*num2)
}
%>
</head>
<body>
<p>
The result of 3 * 4 is <%jsproc(3,4)%>.
</p>
</body>
</html>
example5.asp
33
Session Object


The Session object is used to store
information about, or change settings for a
user session.
Variables stored in the Session object hold
information about one single user, and are
available to all pages in one application.
34
Example 6
example6.asp
<html>
<head>
<%
Session(“Username”) = “Raymond”
%>
</head>
<body>
<p>
My name is <%=session(“Username”)%>.
</p>
</body>
</html>
Keep the browser open, browse another ASP file called “example7.asp”.
35
Example 7
example7.asp
<html>
<head>
</head>
<body>
<p>
My name is <%=session(“Username”)%>.
</p>
</body>
</html>
Now, close all the browsers,
Open “example7.asp” again. What do you see?
36
Session Object


A session ends if a user has not requested
or refreshed a page for a specified period.
(By default, this is 20 minutes)
You can set the timeout property:
<% Session.Timeout=5 %>
37
Session Object

To end a session immediately, you may use
the Abandon method:
<% Session.Abandon %>
Can you name one application of the
Session object?
38
Application Object



The Application object is used to store and
access variables from any page, just like the
Session object.
The difference is that ALL users share one
Application object, while with Sessions there is
one Session object for EACH user.
The Application object in ASP is used to tie
these files together.
39
Application Object

You can create Application variables in “Global.asa”
<script language="vbscript" runat="server">
Sub Application_OnStart
application("vartime")=""
application("users")=1
End Sub
</script>
40
What is Global.asa?



The “Global.asa” file is an optional file that can
contain declarations of objects, variables, and
methods.
It can be accessed by every page in an ASP
application.
The “Global.asa” file must be stored in the root
directory of the ASP application, and each
application can only have one “Global.asa” file.
41
Example 8
This “Global.asa” file counts the number
of current visitors
Global.asa
<script language="vbscript" runat="server">
Sub Application_OnStart
Application("visitors")=0
End Sub
Sub Session_OnStart
Application.Lock
Application("visitors")=Application("visitors")+1
Application.UnLock
End Sub
Sub Session_OnEnd
Application.Lock
Application("visitors")=Application("visitors")-1
Application.UnLock
End Sub
Save this file in
</script>
the root directory
(i.e. c:\inetpub\wwwroot\)
42
Example 8
To display the number of current visitors
in an ASP file:
example8.asp
<html>
<head>
</head>
<body>
<p>
There are
<%response.write(Application("visitors"))%>
online now!
</p>
</body>
</html>
43
The #include Directive


You can insert the content of one ASP file
into another ASP file.
The #include directive is used to create
functions, headers, footers, or elements
that will be reused on multiple pages.
44
Example 9
example9.asp
<html>
<body>
<h3>Words of Wisdom:</h3>
<p><!--#include file="wisdom.inc"--></p>
<h3>The time is:</h3>
<p><!--#include file="time.inc"--></p>
</body>
</html>
45
Example 9
Here is the content of "wisdom.inc" file:
"One should never increase, beyond what is
necessary, the number of entities required to
explain anything."
Here is the content of “time.inc" file:
<%
Response.Write(Time)
%>
46
Part 4: Web forms handling
47
User Input

Form is usually used to collect information from
user. For example:
<html>
<body>
<form action=“display.asp" method="get">
Your name: <input type="text" name="fname" size="20">
<input type="submit" value="Submit">
</form>
</body>
</html>


Get or Post method could be used.
Action defines the ASP file that accepts the user inputs.
48
Request Object

The Request object may be used to retrieve user
information from forms. For example:
<html>
example10.asp
<body>
<form action=" example10.asp" method="get">
Your name: <input type="text" name="fname" size="20">
<input type="submit" value="Submit">
</form>
<%
fname=Request("fname")
If fname<>"" Then
Response.Write("Hello " & fname & "!")
End If
%>
</body>
</html>
Let’s try another method - “Post”
49
Classwork 1

Create the following ASP file that accepts name and
sex as input, then output the text as indicated.
50
Using DreamWeaver as editor



Use design view to create the layout of the
web page in WYSIWYG mode.
Change to code view, add ASP scripts
Preview (press F12) the web page and make
changes
Let’s see a demonstration!
51
Site Definition in DreamWeaver 1/3

When you press F12 to preview the ASP file, you will
be asked to define the location of testing server.
52
Site Definition in DreamWeaver 2/3
Define the site name & the root folder (c:/inetpub/wwwroot)
for the ASP files
53
Site Definition in DreamWeaver 3/3
Define the server model (ASP VBScript)
and the access method (Local/Newtork).
Then, click OK to confirm.
54
Part 5: Database
Manipulation
55
Introduction to ADO



ADO stands for Active-X Data Object
It is a Microsoft Active-X component
It is a programming interface to access data
in a database
56
Introduction to ADO

Common way to access a database from inside
an ASP page:







Create an ADO connection to a database
Open the database connection
Create an ADO recordset (SQL is needed)
Open the recordset
Extract the data you want from the recordset (you
need to know how to use SQL)
Close the recordset
Close the connection
57
Example 11

Open a MS access database called “student.mdb” in
the ASP folder.
“ ClassTeacher” table
“Student” Table
58
Example 11


This example extract all student records from
the table “Student”, then display them on a
web page
To do so, the following SQL is required:
select * from student
59
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open “c:\inetpub\wwwroot\asp\student.mdb"
set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select * from student", conn
while not rs.eof
for each x in rs.fields
response.write(x.name & " = ")
response.write(x.value)
response.write("<br>")
next
response.write("<p>")
rs.movenext
wend
example11a.asp
Must specify the
absolute path
of the database
SQL used to extract
data from table
rs.close
conn.close
%>
60
Alternative way to define the
location of database
example11b.asp
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
dbPath = Server.MapPath(“student.mdb")
conn.Open dbPath
set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select * from student", conn
%>
The Server.MapPath() function can determine the
absolute path of the database.
61
Example 12



Display the student records of 1B in an HTML tables
Only “classname”, “classno” and “enname” are
displayed
This time, the following SQL should be used:
Select classname, classno, enname from
Student where classname = ‘1B’
62
<%
example12a.asp
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
dbPath = Server.MapPath(“student.mdb")
conn.Open dbPath
set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select classname, classno, enname from student where classname = ‘1B’", conn
%>
<table border="1" width="100%">
<tr> <% for each x in rs.fields %>
<th> <% response.write(x.name) %></th>
<% next %> </tr>
<% while not rs.eof %>
<tr> <% for each x in rs.fields %>
<td> <% response.write(x.value) %></td>
<% next
rs.movenext %>
</tr>
<% wend
rs.close
conn.close %>
</table>
63
<%
example12b.asp
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
dbPath = Server.MapPath(“student.mdb")
conn.Open dbPath
set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select classname, classno,enname from student where classname = '1B'", conn
%>
<table border="1" width="100%">
<tr> <th> Class </th><th> Class Number </th><th> Name </th></tr>
<% while not rs.eof %>
<tr> <td> <%=rs(“classname”)%> </td>
<td> <%=rs(“classno”)%> </td>
<td> <%=rs(“enname”)%> </td> </tr>
<%
rs.movenext
wend
rs.close
conn.close
%>
</table>
64
Example 13



Display the student records of 1B in an HTML tables
The output should also display the class teacher of
1B
This time, the following SQL should be used:
Select student.classname, classno, enname,
tname from Student, ClassTeacher where
student.classname = classteacher.classname
and student.classname = '1B'
65
<%
example13.asp
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
dbPath = Server.MapPath(“student.mdb")
conn.Open dbPath
set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select student.classname, classno, enname, tname from Student, ClassTeacher
where student.classname = classteacher.classname and student.classname = '1B'",
conn
%>
<table border="1" width="100%">
<tr> <th> Class </th><th> Class Number </th>
<th> Name </th><th> Class Teacher </th></tr>
<% while not rs.eof %>
<tr> <td> <%=rs(“classname”)%></td><td> <%=rs(“classno”)%> </td>
<td> <%=rs(“enname”)%> </td><td> <%=rs(“tname”)%> </td> </tr>
<% rs.movenext
wend
rs.close
conn.close %>
</table>
66
Classwork 2

Create an ASP file that display a class list of a specified class
chosen from the database “Student.mdb”.
67
Adding record to table



You may use the SQL INSERT INTO
command to add a record to a table in a
database.
A form is needed to collect information.
The information collected is then sent to
another ASP file for manipulation.
68
Example 14

To add a new record to “Student”, two files are needed.
<html>
example14.asp
<body><form method="post" action="example14_add.asp">
<table>
<tr><td>Registration Number:</td><td><input name="regno"></td></tr>
<tr><td>Name:</td><td><input name="enname"></td></tr>
<tr><td>Class:</td><td><input name="classname"></td></tr>
<tr><td>Class No:</td><td><input name="classno"></td></tr>
<tr><td>Sex:</td><td><input name="sex"></td></tr>
<tr><td>House:</td><td><input name="house"></td></tr>
</table>
<p>
<input type="submit" value="Add New">
<input type="reset" value="Cancel">
</form></body>
</html>
69
<html>
example14_add.asp
<body>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.MapPath("student.mdb"))
sql="INSERT INTO student (regno,enname,classname,classno,sex,house) VALUES ("
sql=sql & "'" & Request("regno") & "', " & "'" & Request("enname") & "',"
sql=sql & "'" & Request("classname") & "'," & Request("classno") & ","
sql=sql & "'" & Request("sex") & "'," & "'" & Request("house") & "')"
on error resume next
conn.Execute sql, recaffected
if err<>0 then
Response.Write("No update permissions!")
else
Response.Write("<h3>" & recaffected & " record added</h3>")
end if
conn.close
%>
</body>
</html>
70
Problem



If you try to update the database, you will
get the error message: "You do not have
permission to update this database".
You get this error because you don't have
write access to the server.
To solve this problem, right-click the .mdb
file and select Properties. Go to the Security
tab and set the access-rights there.
71
You must grant the
“Write” access right
to the Internet guest
account
72
73
Updating record in table


You may use the SQL UPDATE command to
update a record in a table in a database.
Again, 2 files are needed.
 See Example 15
74
<html>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.MapPath("student.mdb"))
set rs=Server.CreateObject("ADODB.Recordset")
%>
<body>
example15.asp
Search box for reg.no.
<Form method="get" action="example15.asp">
Regno: <input name="searchname"> <input type="submit" value="Search"></Form>
<%
if request("searchname") <> "" then
rs.open "SELECT * FROM student where regno = '" & request("searchname") & "'",conn
if not rs.eof then
%>
<form method="post" action="example15_update.asp">
<table>
See if the specified reg.
<tr>
no. is found in the table
<td>Registration Number:</td>
<td><%=rs("regno")%>
<input type="hidden" name="regno" value=<%=rs("regno")%>></td></td>
</tr><tr>
Hidden field that will be
<td>Name:</td>
<td><input name="enname" value=<%=rs("enname")%>></td> passed to the update file
</tr><tr>
75
<td>Class:</td>
<td><input name="classname" value=<%=rs("classname")%>></td>
</tr><tr>
<td>Class No:</td>
<td><input name="classno" value=<%=rs("classno")%>></td>
</tr><tr>
<td>Sex:</td>
<td><input name="sex" value=<%=rs("sex")%>></td>
</tr><tr>
<td>House:</td>
<td><input name="house" value=<%=rs("house")%>></td>
</tr>
</table>
<p>
<input type="submit" value="Update">
<input type="reset" value="Cancel">
</form>
<%
else
end if
end if
%>
response.write("Record not found!")
</body>
</html>
76
<html>
example15_update.asp
<body>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.MapPath("student.mdb"))
set rs=Server.CreateObject("ADODB.Recordset")
sql="UPDATE student SET enname = '" & request("enname") & "',"
sql=sql & "classname = '" & Request("classname") & "',"
sql=sql & "classno = " & Request("classno") & ","
sql=sql & "sex = '" & Request("sex") & "',"
sql=sql & "house = '" & Request("house") & "'"
sql=sql & "WHERE regno = '" & Request("regno") & "'"
on error resume next
conn.Execute sql
if err <> 0 then
response.write("No update permissions!")
else
response.write("Record " & Request("regno") & " was updated!")
end if
conn.close
%>
</body>
</html>
77
78
Deleting record from table

You may use the SQL DELETE command to
delete a record in a table in a database
79
Example 16
<html>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.MapPath("student.mdb"))
set rs=Server.CreateObject("ADODB.Recordset")
%>
<body>
example16.asp
<Form method="get" action="example16.asp">
Regno: <input name="searchname"> <input type="submit"
value="Search"></Form>
<%
if request("searchname") <> "" then
rs.open "SELECT * FROM student where regno = '" &
request("searchname") & "'",conn
if not rs.eof then
%>
80
<form method="post" action="example16_delete.asp">
<table>
<tr>
<td>Registration Number:</td>
<td><%=rs("regno")%>
<input type="hidden" name="regno" value=<%=rs("regno")%>>
</td></tr>
<tr><td>Name:</td><td><%=rs("enname")%></td></tr>
<tr><td>Class:</td><td><%=rs("classname")%></td></tr>
<tr><td>Class No:</td><td><%=rs("classno")%></td></tr>
<tr><td>Sex:</td><td><%=rs("sex")%></td></tr>
<tr><td>House:</td><td><%=rs("house")%></td></tr>
</table>
<p>
<input type="submit" value="Delete">
<input type="reset" value="Cancel">
</form>
<% else
response.write("Record not found!")
end if
end if %>
81
example16_delete.asp
<html>
<body>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.MapPath("student.mdb"))
set rs=Server.CreateObject("ADODB.Recordset")
sql="DELETE FROM student WHERE regno = '" & Request("regno") & "'"
on error resume next
conn.Execute sql
if err <> 0 then
response.write("No update permissions!")
else
response.write("Record " & Request("regno") & " was deleted!")
end if
conn.close
%>
</body>
</html>
82
83
Congratulation!
You have learnt the basics of ASP and you
are now able to access database online.
84
Some School Applications …




Online Class List
http://localhost/samples/classlist/
Download file at specific time
http://localhost/samples/download/
Online Timetable
http://localhost/samples/tt/
Online Booking System
http://localhost/rbs/
85
More Internet References

ASP 程式設計入門班
http://www.spps.tp.edu.tw/documents/memo/asp/asp.htm

Homepage for ASP 3.0 (ASP3Wiki)
http://asp3wiki.wrox.com/wiki/

藍色小鋪
http://www.blueshop.com.tw
86
IT Management FWG’s Blog
http://edblog.hkedcity.net/itman
87