1

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)

2

IT Management FWG’s Blog

http://edblog.hkedcity.net/itman

3

Reference Site

http://www.w3schools.com

4

Part 1: Introduction

5

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)

6

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

7

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.

8

How does ASP differ from HTML?

Web Server

Client

Request

ASP Engine

Response

displayed in browser

9

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

10

Part 2: How to setup a Web Server?

11

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.

12

13

14

After Installation, you can find the IIS program icon in System Tools (系統管理工具 ):

15

Right-click and then select “Properties (內容 )”

16

Primary Document Folder (Can be changed)

17

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.

18

How to install IIS in Windows Vista?1. On the Start menu, click Settings and select Control

Panel. 2. Select Turn Windows Features On or Off from

Programs and Features.

3. Select Internet Information Services. Expand the tree nodes of IIS, check the options that you want to turn on. (You must turnon ASP feature)

4. Then click OK to install IIS.

19

How to install IIS in Windows Vista?

20

How to install IIS in Windows Vista?

TRUE

21

How to install IIS in Win Server 2003?1. When you start the Windows Server 2003, you should

see the Manage Your Server wizard 2. If the wizard is not displayed, go to Administrative

Tools, and select Manage Your Server 3. In the wizard, click Add or Remove a Role, click

Next 4. Select Custom Configuration, click Next 5. Select Application Server role, click Next 6. Select Enable ASP.NET, click Next 7. 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

8. The wizard should now show the Application Server role installed

22

How to install IIS in Win Server 2003?9. Click on Manage This Application Server to bring up

the Application Server Management Console (MMC) 10. Expand the Internet Information Services (IIS)

Manager, then expand your server, and then the Web Sites folder

11. You should see the Default Web Site, and it should not say (Stopped)

12. IIS is running! 13. In the Internet Information Services (IIS) Manager

click on the Web Service Extensions folder 14. Here you will see that Active Server Pages are

Prohibited (this is the default configuration of IIS 6) 15. Highlight Active Server Pages and click the Allow

button 16. ASP is now active!

23

Part 3: Basic ASP Syntax

24

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

25

Example 1A

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

example1a.asp

26

Example 1B

<html><body><%=“hello World!”%></body></html>

example1b.asp

27

Example 2A

<html><body><%response.write(“The time now is ” &

now())%></body></html>

example2a.asp

28

Example 2B

<html><body><%response.write(formatdatetime(now(),1) & "<br>")response.write(formatdatetime(now(),2) & "<br>")response.write(formatdatetime(now(),3) & "<br>")response.write(formatdatetime(now(),4) & "<br>")%></body></html>

example2b.asp

29

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.

30

Example 3

<% X = “Hello World!”Sub Display()

Dim XX = “Welcome!”Response.write(X)

End Sub%><html><body><% call display() %> <br><% =X %></body></html>

example3.asp

31

Procedure

You can call both a JavaScript procedure and a VBScript procedure in an ASP file

32

Example 4 – Calling a VBScript Procedure

<html><head><%sub vbproc(num1,num2)

response.write num1*num2end sub%></head><body><p>The result of 3 * 4 is <%call vbproc(3,4)%>.</p></body></html>

example4.asp

33

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

34

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.

35

Example 6

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

example6.asp

36

Example 7

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

example7.asp

37

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

38

Session Object

To end a session immediately, you may use the Abandon method:

<% Session.Abandon %>

Can you name one application of the Session object?

39

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.

40

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>

41

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.

42

Example 8

<script language="vbscript" runat="server">Sub Application_OnStart

Application("visitors")=0 End Sub

Sub Session_OnStart Application.Lock Application("visitors")=Application("visitors")+1Application.UnLock

End Sub

Sub Session_OnEnd Application.Lock Application("visitors")=Application("visitors")-1 Application.UnLock

End Sub</script>

Global.asa

Save this file in the root directory (i.e. c:\inetpub\wwwroot\)

Save this file in the root directory (i.e. c:\inetpub\wwwroot\)

This “Global.asa” file counts the number of current visitors

43

Example 8

<html><head></head><body><p>There are <

%response.write(Application("visitors"))%>online now!</p></body></html>

example8.asp

To display the number of current visitors in an ASP file:

44

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.

45

Example 9

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

example9.asp

46

Example 9

"One should never increase, beyond what is necessary, the number of entities required to explain anything."

<%Response.Write(Time)%>

Here is the content of "wisdom.inc" file:

Here is the content of “time.inc" file:

47

Part 4: Web forms handling

48

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.

49

Request Object

The Request object may be used to retrieve user information from forms. For example:

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

example10.asp

Let’s try another method - “Post”

50

Classwork 1 Create the following ASP file that accepts

name and sex as input, then output the text as indicated.

51

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!

52

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.

53

Site Definition in DreamWeaver 2/3

Define the site name & the root folder (c:/inetpub/wwwroot) for the ASP files

54

Site Definition in DreamWeaver 3/3

Define the server model (ASP VBScript) and the access method (Local/Newtork).

Then, click OK to confirm.

55

Part 5: Database Manipulation

56

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

57

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

58

Example 11 Open a MS access database called

“student.mdb” in the ASP folder.

“ ClassTeacher” table

“Student” Table

59

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

60

<%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.eoffor each x in rs.fields

response.write(x.name & " = ")response.write(x.value)response.write("<br>")

nextresponse.write("<p>")rs.movenext

wend

rs.closeconn.close%>

example11a.asp

Must specify theabsolute pathof the database

SQL used to extract data from table

61

Alternative way to define the location of database

<%set conn=Server.CreateObject("ADODB.Connection")conn.Provider="Microsoft.Jet.OLEDB.4.0"dbPath = Server.MapPath(“student.mdb")conn.Open dbPathset rs=Server.CreateObject("ADODB.recordset")rs.Open "Select * from student", conn%>

The Server.MapPath() function can determine the absolute path of the database.

example11b.asp

62

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’

63

<%set conn=Server.CreateObject("ADODB.Connection")conn.Provider="Microsoft.Jet.OLEDB.4.0"dbPath = Server.MapPath(“student.mdb")conn.Open dbPathset 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>

<% wendrs.closeconn.close %></table>

example12a.asp

64

<%set conn=Server.CreateObject("ADODB.Connection")conn.Provider="Microsoft.Jet.OLEDB.4.0"dbPath = Server.MapPath(“student.mdb")conn.Open dbPathset 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.movenextwendrs.closeconn.close %></table>

example12b.asp

65

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'

66

<%set conn=Server.CreateObject("ADODB.Connection")conn.Provider="Microsoft.Jet.OLEDB.4.0"dbPath = Server.MapPath(“student.mdb")conn.Open dbPathset 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.movenextwendrs.closeconn.close %></table>

example13.asp

67

Classwork 2 Create an ASP file that display a class list of a specified

class chosen from the database “Student.mdb”.

68

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.

69

Example 14 To add a new record to “Student”, two files are

needed.<html><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>

example14.asp

70

<html><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 nextconn.Execute sql, recaffectedif err<>0 then Response.Write("No update permissions!")else Response.Write("<h3>" & recaffected & " record added</h3>")end ifconn.close%></body></html>

example14_add.asp

71

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.

72

You must grant the “Write” access right to the Internet guest account

73

74

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

75

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

<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><tr><td>Registration Number:</td><td><%=rs("regno")%><input type="hidden" name="regno" value=<%=rs("regno")%>></td></td></tr><tr><td>Name:</td><td><input name="enname" value=<%=rs("enname")%>></td></tr><tr>

example15.asp

Search box for reg.no.

See if the specified reg. no. is found in the table

Hidden field that will be passed to the update file

76

<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

response.write("Record not found!")end if

end if%>

</body></html>

77

<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="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 nextconn.Execute sqlif err <> 0 then

response.write("No update permissions!")else

response.write("Record " & Request("regno") & " was updated!")end if conn.close%></body></html>

example15_update.asp

78

79

Deleting record from table

You may use the SQL DELETE command to delete a record in a table in a database

80

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

<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

%>

Example 16example16.asp

81

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

<% elseresponse.write("Record not found!")

end ifend if %>

82

<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 nextconn.Execute sqlif err <> 0 then

response.write("No update permissions!")else

response.write("Record " & Request("regno") & " was deleted!")end if conn.close%></body></html>

example16_delete.asp

83

84

Congratulation!

You have learnt the basics of ASP and you are now able to access database online.

85

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/

86

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

87

IT Management FWG’s Blog

http://edblog.hkedcity.net/itman