Using Active Server Page (ASP) to create Simple Web-database

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


20


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




%>

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

X = “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></p>

<h3>The time is:</h3>

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


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

54


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

rs.close

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

<%



dbPath = Server.MapPath(“student.mdb")

conn.Open dbPath


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

<%




conn.Open dbPath


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>

example12a.asp

64

<%




conn.Open dbPath


rs.Open "Select classname, classno,enname from student where classname = '1B'", conn

%>


<tr> <th> Class </th><th> Class Number </th><th> Name </th></tr>


<tr> <td> <%=rs(“classname”)%> </td>

<td> <%=rs(“classno”)%> </td>

<td> <%=rs(“enname”)%> </td> </tr>

<%

rs.movenext

wend

rs.close

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

<%




conn.Open dbPath


rs.Open "Select student.classname, classno, enname, tname from Student, ClassTeacher where student.classname = classteacher.classname and student.classname = '1B'", conn

%>


<tr> <th> Class </th><th> Class Number </th><th> Name </th><th> Class Teacher </th></tr>


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

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

<%



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>

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

example16.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 Timetablehttp://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

Documents

Using Active Server Page (ASP) to create Simple Web-database