asp-dreamweaver project guide ver3.1

41
Biên soạn : Lê Thanh Nhân HƯỚNG DẪN ASP Bổ sung tài liệu hướng dẫn Project Áp dụng trên nền Windows Vista và SQL Server 2005 3 rd Edition FPT ACADEMY Tháng 05 năm 2009

Upload: toan-stt

Post on 20-Feb-2015

241 views

Category:

Documents


8 download

TRANSCRIPT

Page 1: ASP-Dreamweaver Project Guide Ver3.1

Biên soạn : Lê Thanh Nhân

HƯỚNG DẪN ASP Bổ sung tài liệu hướng dẫn Project

Áp dụng trên nền Windows Vista và SQL Server 2005

3rd Edition

FPT ACADEMY Tháng 05 năm 2009

Page 2: ASP-Dreamweaver Project Guide Ver3.1
Page 3: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 1

Chương 1 Giới thiệu ASP

Mục tiêu :

Cuối chương này học viên có thể nắm bắt được :

Tổng quan về ASP

Cài đặt Websever – IIS

Publish một Website

Sử dụng các đối tượng Request, Response, Server, Session

1.1 ASP là gì ?

ASP (Active Server Page) là môi trường lập trình ứng dụng phía máy chủ (Server Side Scripting) nhằm bổ sung

cho các công nghệ CGI (Common Gateway Interface) đã có trước đó

Các file asp có dạng *.asp. Chúng được đặt tại máy chủ và dùng trình duyệt web (browser) để duyệt. Máy chủ

phải được cài đặt một Webserver. IIS (Internet Information Services) là một Webserver được Microsoft phát triển

cùng với ASP.

Hình 1.1 : Mô hình ASP

Các đoạn mã ASP thực chất là các đoạn kịch bản (JavaScript, VBScript) được chèn vào trang HTML nằm giữa

cặp ngoặc <% . . .%>. Chúng sẽ không được nhìn thấy khi dùng chức năng View Source trong trình duyệt web.

Để sử dụng ASP, ta cần khai báo ngay đầu trang web dòng mã sau :

<%@Language=”Tên_ngôn_ngữ_Script”%>

Ví dụ : <%@Language=”JavaScript”%>

VBScript là ngôn ngữ Script mặc định dùng trong ASP nên không cần khai báo như trên.

1.2 Một số đối tượng trong ASP

1.2.1 Đối tượng Request :

Dùng nhận giá trị được truyền từ các điều khiển (control) như hộp văn bản, hộp danh sách . . . trong trang

web trước. Tùy thuộc vào Form gửi dữ liệu đi dùng method là POST hay GET mà trang nhận giá trị phải

dùng Request.Form hay Request.QueryString để nhận giá trị. Xem Bảng 1.1

CLIENT

Trình duyệt WEB

(Browser)

WEB SERVER

DATABASE SERVER

R D B M

S

ASP

OLE DB

ODBC

HTTP

Page 4: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 2

Method Request

POST Request.Form(“Ten_Control”)

GET Request.QueryString(“Ten_Control”)

Bảng 1.1 : Đối tượng Request

Chú ý :

Có thể dùng Request(“Tên_Control”) khi không quan tâm đến method của Form 1

Dùng method GET bị giới hạn số lượng ký tự (<255) nên kích thước dữ liệu của biến không lớn,

form sẽ hiển thị các tham số của nó dưới dạng HTTP Query String ngay trong ô địa chỉ của trình

duyệt web theo mẫu sau : http://URL/Page.asp? contol1=value1+control2=value2+. . .+controlN=valueN

1.2.2 Đối tượng Response :

Dùng kết xuất dữ liệu ra trình duyệt. Có nhiều cách sử dụng đối tượng này. Tuy nhiên trong khuôn khổ đồ

án, chúng ta sẽ tham khảo một số cách thông dụng. Xem Bảng 1.2

Đối tượng Response Tham số Ý nghĩa

Response.Write(“Hello”); Chuổi Viết ra một chuổi hay một giá trị một biến

Response.Redirect("Page.asp") URL Chuyển hướng trang sang trang khác

Response.Buffer=True Boolean Đặt kết quả xử lý của server vào vùng đệm

Bảng 1.2 : Đối tượng Response

Chú ý :

Dòng khai báo <%Response.Buffer=. . .%> phải được đặt tại dòng đầu tiên của trang ASP nếu

muốn đưa kết quả xử lý của Server vào vùng đệm trước khi trả về Client

Có thể dùng các phương thức sau nếu khai báo Buffer là True :

o Response.Flush : cho phép chuyển kết quả trong vùng đệm đến ngay Client mà không

chờ Server xử lý xong

o Response.End : yêu cầu Server ngưng việc xử lý và chuyển các kết quả đang có tại

vùng đệm đến Client trong các lệnh rẽ nhánh

o Response.Clear : xoá tất cả kết xuất đang có trong vùng đệm

1.2.3 Đối tượng Session :

Dùng để lưu trữ các thông tin cho một phiên làm việc. Xem bảng 1.3

Đối tượng Session Ý nghĩa

Session(“ses”) = val Đặt giá trị biến val vào Session tên ses

val = Session(“ses”) Đặt giá trị Session tên ses vào biến val

Session.Contents.Remove(“ses”) Xoá giá trị khỏi Session tên ses

Bảng 1.3 : Đối tượng Session

1.2.4 Đối tượng Server :

Dùng để hổ trợ các chức năng của Server. Đặc biệt là việc dùng các lệnh để kết xuất với Database.

Đối tượng Server Tham số Ý nghĩa

Server.ScriptTimeOut=100 Giây Hạn định thời gian thực thi Script trên Server

Server.Execute(“Page.asp”) URL Gọi trang khác như một phần trang hiện hành.

Server.CreateObject(“ADODB.Connection”) Object Tạo đối tượng như Connection, Recordset . . .

Server.MapPath(“Data.mdb”) Data file Ánh xạ đường dẫn ảo thành đường dẫn vật lý

Bảng 1.4 : Đối tượng Server

1.2.5 Tiến trình viết ASP :

Page 5: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 3

1.3 Cài đặt WebServer (IIS)

Trước khi publish một Website, ta cần cài đặt một Web Server. Web Server giúp đáp trả các yêu cầu của trình

duyệt. Tuỳ theo công nghệ sử dụng như ASP, JSP hay PHP.v.v . . . ta phải cài đặt một WebServer tương ứng. Với

ASP, ta chỉ cần cài đặt IIS, tiến trình như sau :

1. Nhấp Start Control Panel Programs and Features

2. Chọn Turn Windows Features on or off trong mục Tasks bên trái cửa sổ như hình 1.2

Hình 1.2 : Turn Windows Features on or off

3. Cửa sổ Windows Features mở ra, chọn Internet Information Services như hình 1.3

Turn Windows Features on or off

Bắt đầu

Kết thúc

Cài đặt Webserver

Publish Website

Viết ASP

Page 6: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 4

4. Nhấp nút OK Finish

Chú ý :

Chọn tất cả các thành phần bên trong IIS theo hướng từ trong ra ngoài.

Khi nhất nút OK, chương trình có thể yêu cầu đưa đĩa source Windows Vista vào.

Hình 1.3 : Windows Features

1.4 Publish Website

Sau khi cài đặt WebServer, việc kế tiếp là publish Website. Web Publish là đưa toàn bộ nội dung có trong một thư

mục trên máy cục bộ thành nội dung trên một website. Người dùng có thể có thể truy cập đến nội dung site thông

qua trrình duyệt web trên bất cứ máy tính nào. Đối với Windows 98, Xin xem thêm phần PHỤ LỤC, Publish

website bằng Personal Web Server. Đối với Windows Vista, ta tiến hành như sau :

1. Tạo thư mục để publish web trên ổ cứng. Ví dụ D:\TEST\WEB

2. Nhấp Start Control Panel

3. Chọn Administrative Tools Internet Information Services (IIS) Manager, cửa sổ IIS mở

ra hình 1.4

4. Nhấp mũi tên trước tên máy tính (ví dụ L3NHAN) để hiển thị cây thư mục cục bộ

5. Nhấp tiếp mũi tên trước mục Sites

6. Nhấp chuột phải lên Default Web Site Add Virtual Directory

Chú ý :

Localhost trong địa chỉ http://localhost/mysite có thể thay bằng tên máy.

Ví dụ http://l3nhan/mysite

Trong mạng LAN, có thể liên hệ với Admin để biết địa chỉ Publish web đặt tại đâu và có thể bỏ qua

giai đoạn cài đặt Webserver cũng như Publish website vừa nêu trên. Thường địa chỉ Publish

website trong mạng LAN là : http://Tên_Host/Thư_Mục . . . Do đó, địa chỉ web có thể đổi thành :

http://AptechDC01/WEB/HocVien/200303-0001/Mysite (200303-0001 là mã số của học viên).

Chọn IIS

Page 7: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 5

Hình 1.4 : Cửa sổ IIS

7. Gõ “MySite” vào field Alias (Như tên site yahoo, hotmail, google . . .), hình 1.5

8. Nhấp nút … chọn thư mục đã tạo trước đó ( D:\TEST\WEB)

9. Nhấp nút OK hoàn tất việc publish

10. Địa chỉ website đã được xác lập tại http://localhost/mysite

Hình 1.5 : Add Virtual Directory

- Chọn Default Web Site - Chọn Add Virtual Directory

Page 8: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 6

1.5 Ví dụ minh họa

Ví dụ 1 : Tạo trang First.asp

1. Mở Notepad

2. Nhập đoạn code sau :

<%@LANGUAGE="JAVASCRIPT"%>

<html> <head>

<title>First</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<%

var tday = new Date(); var day = tday.getDay();

switch(day){ case 1:

Response.Write("Hôm nay là thứ HAI"); break;

case 2:

Response.Write("Hôm nay là thứ BA"); break;

case 3: Response.Write("Hôm nay là thứ TƯ");

break;

case 4: Response.Write("Hôm nay là thứ NĂM");

break; case 5:

Response.Write("Hôm nay là thứ SÁU"); break;

case 6:

Response.Write("Hôm nay là thứ BẢY"); break;

default : printf("Hôm nay là NGÀY NGHỈ");

break;

} %>

<body> </body>

</html>

Để xem kết quả ta làm như sau :

1. Lưu file với tên First.asp tại thư mục D:\TEST\WEB

2. Mở trình duyệt web

3. Nhập địa chỉ web vào hộp Address như sau http://localhost/Mysite/First.asp

4. Nhấn phím Enter

Kết quả xuất ra : Hôm nay là thứ . . .

Chú ý :

Nếu dùng View/Source, ta chỉ nhìn thấy kết quả trả về “Hôm nay là thứ …” chứ không nhìn thấy

source code như trên đã viết. Điều này chứng tỏ ASP đã xử lý yêu cầu tại Server và chỉ trả kết quả

sau khi đã xử lý về máy Client.

Page 9: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 7

Ví dụ 2 : Tạo Mã khách hàng. Áp dụng các đối tượng ASP

Tiến trình Coding Duyệt tại Client

1. Mở Notepad

2. Nhập đoạn code sau :

<html>

<head> <title>Test1</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf8">

</head> <body>

<form name="myFrm" method="GET" action="Test2.asp"> <input type="text" name="txtKey" value="MaKH" size="10">

<input type="submit" name="Submit" value="Make Key">

</form> </body>

</html>

3. Lưu file với tên Test1.htm tại thư mục D:\TEST\WEB

4. Chọn File New

5. Soạn tiếp đoạn code sau :

<%@LANGUAGE="JAVASCRIPT"%>

<html>

<head><title>Test2</title> <%

//Tao MaKH tday = new Date();

keyVal = "C"+tday.getHours()+"."+tday.getMinutes()+"."+tday.getSeconds()+"-"; keyVal+= Request.QueryString("txtKey");

/*========================================================

CHU Y : Nếu Test1.htm, dùng method="POST", ta dùng keyVal+=Request.Form("txtKey");

====================================================*/

//Đưa giá trị vào đối tượng Session để chuyển qua trang Test3.asp

Session("kValue")=keyVal;

Bắt đầu

Kết thúc

Viết trang Test1.htm

Viết trang Test2.asp

Viết trang Test3.asp

Bắt đầu

Kết thúc

Tạo Mã KH

Nhập giá trị

Hiển thị Mã KH

Page 10: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 8

//Chuyển hướng trang tới Test3.asp :

Response.Redirect("Test3.asp"); %>

<body> </body>

</html>

6. Lưu file với tên Test2.asp tại thư mục D:\TEST\WEB

7. 8. Soạn tiếp đoạn code sau :

<%@LANGUAGE="JAVASCRIPT"%> <html>

<head> <title>Test3</title>

<% //Nhận giá trị lại từ trong session

kVal=Session("kValue");

%> <body>

<H3 style="color:blue">KEY VALUE :</H3> <P style="color:red; font-size:32">

<%

//Xuat ket qua voi : Response.Write(kVal);

%> </body>

</html>

9. Lưu file với tên Test3.asp tại thư mục D:\TEST\WEB

Để xem kết quả, tiến hành như sau :

1. Mở trình duyệt web

2. Nhập địa chỉ web vào hộp Address như sau http://Localhost/Mysite/Test1.htm

3. Nhập giá trị bất kỳ vào Text field

4. Nhấp nút Make Key

Page 11: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 9

Chương 2 Xây dựng ứng dụngvới Dreamweaver

Database design, tạo trang LogIn, LogOut, SELECT Mục tiêu :

Cuối chương này học viên có thể :

Xây dựng Database dựa vào mô hình ERD

Tạo trang ASP hiển thị động dữ liệu trong Database

2.1 Xác định vấn đề

2.1.1 Yêu cầu :

Ví dụ được đưa ra nhằm thiết kế một Web Site giúp quản lý việc mua bán linh kiện máy tính trên mạng

Internet, bao gồm :

Kiểm tra Admin Login, Logout

Xem linh kiện

Thêm mặt hàng mới

Chỉnh sửa dữ liệu

Xoá dữ liệu

2.1.2 Giới hạn :

Do nhu cầu chỉ để cụ thể hoá việc thiết kế Web site sử dụng công nghệ ASP, đồng thời mô tả các chức năng

cơ bản trong thao tác với CSDL, chương trình sẽ không đi sâu vào thiết kế một Web Site “Mua bán linh

kiện máy tính” hoàn chỉnh, cũng như các kỹ thuật phức tạp khác.

2.2 Mô hình ERD

Hình 2.1 : Mô hình Quan hệ Thực thể

Admin

AdName AdPass

Categories

CateID

CateName

Items

ICode

CateID

IName Price

Img

Have

Page 12: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 10

2.3 Thiết kế bảng

Dùng Microsoft SQL 2005, xây dựng một Database lưu vào thư mục D:\TEST\WEB (Tham khảo mô hình ERD

được mô tả trong hình 2.1). Cụ thể như sau :

2.3.1 Bảng Admin – Giúp quản lý Account Login, LogOut của người quản trị :

Tên Field Data Type Field Size Key Mô tả

AdName varchar 5 Primary Tên Admin

AdPas varchar 5 Mật khẩu Admin

2.3.2 Bảng Categories - Quản lý nhóm linh kiện

2.3.3 Bảng Items - Quản lý linh kiện

Tên Field Data Type Field Size Key Mô tả

ICode varchar 3 Primary Mã số linh kiện

IName varchar 50 Tên linh kiện

CateID varchar 3 Foreign Tham chiếu Categories

Price Int Giá bán linh kiện

Img varchar 50 Hình ảnh linh kiện

2.3.4 Database Diagram (Relationship):

1. Có thể Attach file Data.MDF và Data_Log.LDF 2. Hay Chạy Script tạo database:

Mở SQL 2005

Nhập đoạn mã sau để tạo Database:

(1)

--Create database Data

CREATE DATABASE Data

ON

(

name=Data,

filename='D:\Test\Web\Data.mdf',

size=10MB,

maxsize=100MB,

filegrowth=1MB

)

(2)

LOG ON

(

name=Data_log,

filename='D:\Test\Web\Data_log.ldf',

size=5MB,

maxsize=25MB,

filegrowth=1MB

)

GO

Tên Field Data Type Field Size Key Mô tả

CateID varchar 3 Primary Mã số nhà cung cấp

CateName varchar 50 Tên nhà cung cấp

Page 13: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 11

--Create table Admin

CREATE TABLE Admin

(

AdName varchar(5) primary key,

AdPass varchar(5)

)

--Tạo bảng Categories

CREATE TABLE Categories

(

CateID varchar(3) primary key,

CateName varchar(50)

)

--Tạo bảng Items

CREATE TABLE Items

(

ICode varchar(10) primary key,

IName varchar(50),

CateID varchar(3) foreign key references Categories(CateID),

Price int,

Img varchar(50)

)

--Insert data into Admin

INSERT INTO Admin VALUES('admin', 'admin')

--Insert data into Categories

INSERT INTO Categories VALUES('CAS','Case')

INSERT INTO Categories VALUES('CDR','CDROM')

INSERT INTO Categories VALUES('CPU','Central Processing Unit')

INSERT INTO Categories VALUES('FAX','Fax Modem')

INSERT INTO Categories VALUES('FDD','Floppy Disk')

INSERT INTO Categories VALUES('HDD','Hard Disk')

INSERT INTO Categories VALUES('KBD','Keyboard')

INSERT INTO Categories VALUES('MNB','Mainboard')

INSERT INTO Categories VALUES('MON','Monitor')

INSERT INTO Categories VALUES('MOU','Mouse')

INSERT INTO Categories VALUES('PSU','Power Supply Unit')

INSERT INTO Categories VALUES('RAM','Random Access Memory')

INSERT INTO Categories VALUES('SND','Sound Card')

INSERT INTO Categories VALUES('SPK','Speaker')

INSERT INTO Categories VALUES('VGA','VGA Card')

--Insert data into Items

INSERT INTO Items(ICode,IName,CateID,Price) VALUES('A52','Asus 52X max

CDROM','CDR',22)

INSERT INTO Items(ICode,IName,CateID,Price) VALUES('A91','Asus V9110 Vga','VGA',65)

INSERT INTO Items(ICode,IName,CateID,Price) VALUES('CRM','Creative Optional

Mouse','MOU',13)

INSERT INTO Items(ICode,IName,CateID,Price) VALUES('CRS','Creative Sound Work

6000','SPK',110)

INSERT INTO Items(ICode,IName,CateID,Price) VALUES('GAG','GA IG1000 Pro','MNB',121)

INSERT INTO Items(ICode,IName,CateID,Price) VALUES('GAP','GA IP1000','MNB',125)

INSERT INTO Items(ICode,IName,CateID,Price) VALUES('MIT','Mitsumi Mouse','MOU',5)

Page 14: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 12

2.4 SiteMap

2.5 Process Diagram

HomePage

Login

Admin Task

View

Item

Insert

Item

Update

Item

Delete

Item

Login Login.asp

Tác vụ Admin Admin.htm

Login OK ?

N

Y

HomePage

Index.htm

LogOut DoLogout.asp

Item Key Duplicate?

Update Confirm?

View

Select.asp

Add Insert.asp

Update Update.asp

Remove Delete.asp

N

Y

Delete Confirm?

N

N

Y

Y

Page 15: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 13

2.6 Chuẩn bị

2.6.1 Tạo kết nối Database (DNS – Database Source Name):

Tạo kết nối có ý nghĩa như một danh bạ điện thoại, giúp các trang ASP dựa vào đó có thể kết nối

được với Database.

1. Nhấp Start Control Panel

2. Chọn Administrative Tools Data Sources (ODBC), cửa sổ ODBC Data Source

Administrators mở ra hình 2.2

Hình 2.2: Cửa sổ ODBC

3. Chắc chắn rằng Tab System DSN đang được chọn

4. Nhấp nút Add

5. Chọn SQL Server trong danh sách từ cửa sổ Create New Data Source mở ra như hình 2.3

6. Nhấp nút Finish.

Hình 2.3: Create New Data Source

Page 16: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 14

7. Điền các thông số vào cửa sồ Create New Data Source to SQL Server như hình 2.4

8. Nhấp nút Next.

Hình 2.4: Create New Data Source to SQL

9. Chọn tên database như trong hình 2.5

10. Nhấp nút Next.

Hình 2.5: Create New Data Source to SQL

Page 17: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 15

11. Cửa sổ xác nhận quyền truy cập mở ra như hình 2.6

12. Chọn With SQL Server authentication using a login ID and password entered by the user

13. Nhấp username trong field Login và password trong field Password để kết nối database

14. Nhấp nút Next cho đến khi xuất hiện cửa sổ ODBC Microsoft SQL Server Setup thông báo kết

quả thiết đặt như hình 2.7

Hình 2.6: Create New Data Source to SQL

15. Nhấp nút Test Data Source ... để kiểm tra kết nối. Nếu thành công, sẽ xuất hiện thông báo:

"TESTS COMPLETED SUCCESSFULLY!”

16. Nhấp OK, kết thúc quá trình thiết đặt.

Hình 2.7: ODBC Microsoft SQL Server Setup

Page 18: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 16

2.7 Làm việc với Dreamweaver 8 (DW):

2.7.1 Định nghĩa site

Trước khi làm việc, bắt buột bạn phải định nghiã site. Việc định nghĩa site không những giúp quản lý tốt các

liên kết trong Web site mà còn giúp bạn tự động Upload dữ liệu lên Server khi có bất cứ sự thay đổi nào trong

site.

1. Khởi động DW nếu DWchưa được kích hoạt

2. Chọn menu Site New Site ….

3. Chọn tab Advanced. Xem hình 2.8

Hình 2.8: Định nghĩa Site

4. Điền các value như Bảng T-2.1

5. Nhấp OK

6. Nhấp nút Done để xác nhận thiết lập site

Page 19: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 17

Categories Field Value

Local Info

Site Name MySite

Local Root Folder D:\TEST\Web

Default Images Folder D:\TEST\Web\IMG

HTTP Address http://localhost/mysite

Remote Info Access Local/Network

Remote Folder D:\TEST\Web

Testing Server

Server Model ASP JavaScript

Access Local/Network

Testing Server Folder D:\TEST\Web

URL Prefix http://localhost/mysite

Bảng T-2.1: Định nghĩa Site

Chú ý :

Trong Remote Folder stick vào tùy chọn Automatically upload files to server on save để tự động Upload

file lên Server khi lưu file.

2.7.2 Tạo trang Homepage

1. Chọn menu File, tạo một file html mới

2. Lưu file với tên Index.htm tại thư mục D:\TEST\WEB 3. Nhập đoạn code sau

4. <html><title>HomePage</title>

<body> <center><h3><a href="Login.asp" style="text-decoration:none">Admin Login</a></h3></center>

</body></html>

5. Nhấp Save, lưu file.

2.7.3 Tạo trang Login.asp

a. Tạo giao diện trang Login

1. Trong DW, chọn menu File New Window. Hộp thoại New Document xuất hiện như hình 2.9

2. Chọn Dynamic Page trong hộp Category

3. Chọn ASP JavaScript trong hộp Dynamic Page

4. Nhấp nút Create

5. Chọn menu File Save. Đặt tên file là Login.asp

6. Mở trang Login.asp lên, nhập đoạn code như sau trong <BODY> và lưu lại:

<center><H1>Admin Login</H1></center> <form name="myFrm" method="POST"> <table align="center"> <tr> <td><div align="right">Admin Name : </div></td> <td> <input type="text" name="txtName"></TD> <tr> <td><div align="right">Admin Password : </div></td> <td> <input type="password" name="txtPas"></TD> <tr> <td></td> <td><input type="submit" name="submit" value="Login"> <input type="reset" name="reset" value="Reset"></td> </tr> </table> </form>

Page 20: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 18

Hình 2.9: New Document

b. Tạo kết nối database

1. Chọn menu Window Database. Nhấp dấu cộng (+)

2. Chọn Data Source Name(DSN)

3. Nhập “cnn” vào field Connection Name. Xem hình 2.10

4. Chọn DataDSN trong list Data source name như trong hình.

5. Nhập User name, Password login vào SQL Server

6. Nhấp nút OK để kết thúc

Hình 2.10: Data Source Name(DSN)

User name và Password nhập theo account đăng nhập SQL Server

Page 21: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 19

Chú ý:

- Khi tạo xong kết nối, Dreamweaver sẽ tạo một file tên cnn.asp với dòng code sau

var MM_cnn_STRING = "dsn=DataDSN;uid=sa;"

- Ta có thể tạo kết nối database bằng connection string thay DSN. Ta tiến hành như sau:

1. Chọn menu Window Database. Nhấp dấu cộng (+)

2. Chọn Custom Conection String

3. Nhập “cnn” vào field Connection Name

4. Nhập dòng connection string (*)

vào field Conection String

5. Nhấp nút OK để kết thúc

(*)

Connection String có thể dùng một trong 2 kỹ thuật sau:

Dùng OLEDB Cennection String,

"Provider=SQLOLEDB; Server=.;Database=Data;Uid=sa;"

Dùng ODBC Cennection String

"Driver={SQL Server}; Server=.;Database=Data;Uid=sa;"

- Trường hợp database có dùng password (ví dụ abc) thì thêm tham số Pwd=abc vào các dòng code trên

c. Kết nối Login.asp vào database với User Authentication:

1. Mở trang Login.asp lên

2. Chọn menu Window Server Behaviors. Nhấp dấu cộng (+)

3. Chọn User Authentication Log In User

4. Điền các thông số như bảng T-2.2 và hình 2.11

5. Nhấp OK.

Hình 2.11: Form Login

Page 22: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 20

Field Value Description

Get input from form myFrm Tên Form Login

Username field txtName Tên field Admin Name trong form Login

Password Field txtPas Tên field Admin Password trong form Login

Validate using connection cnn Tên kết nối database (Connection)

Table dbo.Admin Tên bảng Admin trong SQL Server 2005

Username column AdName Tên field AdName trong bảng Admin

Password column AdPas Tên field AdPas trong bảng Admin

If login succeeds, go to Task.htm Tên file sẽ chuyển đến nếu login thành công

If login fails, go to LoginError.htm Tên file sẽ chuyển đến nếu login không thành công

Restrict access based on Username and password Hình thức hạn chế truy xuất

Bảng T-2.2: Tạo form Login

d. Trang Task.htm Trang này, chứa các tác vụ cơ bản trong ngôn ngữ lệnh DML

1. Tạo file html trong D:\TEST\WEB

2. Nhập đoạn code sau : <html> <head> <title>Admin Task</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <body> <table style="font-size:20px" width="20%" border="1" cellpadding="0" cellspacing="0" bordercolor="blue"> <tr colspan="2"> <td> <a href="Select.asp" target="_blank">View Items</a><BR> <a href="Insert.asp" target="_blank">Insert Item</a><BR> <a href="Update.asp" target="_blank">Update Item</a><BR> <a href="Delete.asp" target="_blank">Delete Item</a> </td> <tr> <td> <td>Logout </tr> </table> </body> </html>

3. Lưu file với tên Task.htm

e. Trang LoginError.htm Trang này, thông báo lỗi khi login không thành công

1. Tạo file html trong D:\TEST\WEB

2. Nhập đoạn code sau : <html> <head> <title>Login Fails</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <CENTER> <H3>Invalid Adimin Name or Password</H3> <A HREF="Login.asp">BACK</A></CENTER> </body> </html>

3. Lưu file với tên LoginError.htm

Để xem kết quả, tiến hành như sau :

Page 23: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 21

1. Mở trình duyệt web

2. Nhập địa chỉ web vào hộp Address như sau http://Localhost/Mysite

3. Nhấp vào link Admin Login để kiểm tra kết quả

2.7.4 Trang View Items (SELECT):

Trang View Items giúp ta có thể xuất dữ liệu của một hay nhiều bảng lên trang web.

a. Tạo giao diện trang Select

7. Trong DW, tạo Dynamic Page như trang login

8. Chọn menu File Save. Đặt tên file là Select.asp

9. Mở trang Select.asp lên, nhập đoạn code như sau và lưu lại:

<html> <head> <title>View Items</title> <body><H3>View Items</H3></body> </html>

b. Tạo Recordset:

Mỗi bảng trong Database cần mở một Recordset tới nó. Điều này có nghĩa một form khi tương

tác với bao nhiêu bảng trong database thì cần chừng ấy Recordset cho các thao tác DML.

1. Mở trang Select.asp lên.

2. Chọn menu Window Server Behaviors. Nhấp dấu cộng (+) Chọn Recordset (Query)

3. Điền các thông số như bảng bảng T-2.3 và hình 2.12

4. Nhấp nút Test để xem trước kết quả.

Hình 2.12 Tạo Recordset rsViewItems

Page 24: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 22

Field Value Description

Name rsViewItems Tên Recordset

Connection cnn Tên Connection

Table dbo.Items Tên Bảng cần select data

Columns all Tên các cột trong bảng

Filter Mặc định Lọc data the điều kiện

Sort Mặc định Sắp xếp data theo thứ tự tăng dần hay giảm dần

Bảng T-2.3: Tạo Recordset rsViewItems

c. Kết nối Select.asp vào Database với Dynamic Table:

Dynamic Table giúp tạo một bảng hiển thị kết quả từ Database. Ta chỉ có thể áp dụng Dynamic

Table khi ngôn ngữ DML được dùng là SELECT . . .

1. Trong cửa sổ Design View, đặt con trỏ tại vị trí muốn chèn bảng .

2. Chọn menu Window Insert

3. Chọn mục Application (Mặc định là Common) Dynamic Table

4. Điền thông số như bảng T-2.4 và hình 2.13

Field Value Description

Recordset rsViewItems Tên Recordset

Show … records at a time 10 Số dòng tối đa muốn hiển thị

Border 1 Độ dày đường viền của bảng

Cell padding 0 Khoảng cách Text với cell của bảng

Cell spacing 0 Khoảng cách giữa các cell trong bảng

Bảng T-2.4: Dynamic table

Hình 2.13: Dynamic table

d. Tính năng hiển thị ảnh với Place Holder

Bản chất field hình ảnh chỉ là text chứa đường dẫn đến ảnh lưu trữ. Dynamic Table sẽ xuất dữ

liệu này ra như những dạng dữ liệu khác. Muốn hiển thị được hình ảnh của sản phẩm bạn phải đặt

nó vào một Placeholder.

1. Đặt con trỏ vào ô Img, xoá đi dòng “rsViewItems.Image”.

2. Đặt con trỏ vào ô Img, Chọn menu InsertImage Objects Placeholder

3. Điền thông số như hình 2.14 rồi nhấn nút OK để hoàn tất

4. Chọn menu Window Bindings Nhấp dấu cộng (+) phía trước Recordset (rsViewItems)

5. Kéo field Img thả vào Placeholder vừa tạo.

Page 25: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 23

Hình 2.14: Image Placeholder

e. Tạo thông báo Record not Found

Khi không tìm thấy dữ liệu do một số lý do, hệ thống thường hay phát sinh lỗi. Ta nên thiết kế

các Region để ngăn lỗi trên và xuất ra một thông báo cho người dùng biết không tìm thấy data.

1. Đặt con trỏ dưới bảng View Items, nhập vào đoạn text “Record not Found”

2. Chọn khối đoạn text trên Chọn menu Window Server Behaviors

3. Nhấp dấu cộng (+) Show Region Show Region If Recordset Is Empty

4. Nhấp OK đóng cửa sổ xác nhận Recordset lại.

Chú ý:

Khi không có dữ liệu, dù thông báo Record not Found xuất hiện nhưng tiêu đề các field vẫn tồn tại. Để

bảng chứa các field này mất đi ta làm như sau :

1. Chọn bảng Views Item trong trang Select.asp. Chọn menu Window Server Behaviors

2. Nhấp dấu cộng (+)Show RegionShow Region If Recordset Is NotEmpty

3. Nhấp OK đóng cửa sổ xác nhận Recordset lại

Để xem kết quả, tiến hành như sau :

1. Mở trình duyệt web

2. Nhập địa chỉ web vào hộp Address như sau http://Localhost/Mysite/Select.asp

2.7.5 Tạo chức năng Logout:

Khi các giao dịch đã thực hiện cần thực hiện việc logout để kết thúc và xoá các session, tránh người khác

sử dụng quyền truy cập dữ liệu trái phép. Từ lúc này, những trang nào muốn có chức năng logout, chỉ cần

thêm link đến trang Logout.asp này. Sinh viên tự thêm link này vào trang Task.htm và Select.htm

1. Mở trang Logout.asp lên. Chọn menu Window Server Behaviors.

2. Nhấp dấu cộng (+) User Authentication Log Out User

3. Điền các thông số như hình 2.15

Hình 2.15: Log Out User

Page 26: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 24

Chương 3 Xây dựng ứng dụngvới Dreamweaver

INSERT, UPDATE, DELETE

Mục tiêu :

Cuối chương này học viên có thể :

Tạo trang ASP cho phép thêm các record vào Database

Cập nhật lại dữ liệu trong Database

Xoá dữ liệu trong Database

3.1 INSERT

3.1.1 Tạo trang Insert.asp

Form Insert dùng để đưa dữ liệu vào bảng trong Database. Các field trong Form sẽ tùy vào thiết kế mà

xuất hiện dưới dạng Textfield, Listbox . . . Phần này được điều chỉnh trong Display As của Form Field

a. Tạo giao diện trang Insert:

1. Trong DW, tạo Dynamic Page như trang login

2. Chọn menu File Save. Đặt tên file là Insert.asp

3. Mở trang Insert.asp lên, nhập đoạn code như sau và lưu lại:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Add Items</title> <body> <H3>Add Items</H3> </body> </html>

b. Tạo chức năng Insert với Record Insert Form:

1. Chọn menu WindowInsert

2. Chọn mục Application (Mặc định là Common)Record Insertion Form Wizard

3. Điền thông số như hình 3.1

4. Các field còn lại trong Form Field, thay đổi Display As như bảng T-3.1

5. Nhấp OK để xác nhận thiết đặt

Field Display as Value Description

ICode Text Field Hiển thị kiểu Text Field IName Text Field Hiển thị kiểu Text Field CateID Menu Hiển thị kiểu Combo box (Menu/List) Price Text Field Hiển thị kiểu Text Field Img Text Field Hiển thị kiểu Text Field

Bảng T-3.1: Change Display

Page 27: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 25

Hình 3.1: Record Insertion Form

c. Kết nối menu CateID vào Database:

CateID là khóa ngoại. Dữ liệu về CateID đã có sẵn ở bảng Categories. Dữ liệu trong menu sẽ

được thiết kế động thông qua việc móc dữ liệu vào field CateID

1. Tạo Categories Recordset tên rsCateItems. Tham khảo cách tạo ở các phần trên

2. Chọn menu CateID, mở menu WindowServer Behaviors.

3. Nhấp dấu cộng (+) Chọn Dynamic Form ElementsDynamic List/Menu

4. Điền thông số như hình 3.2

5. Nhấp OK để xác nhận thiết đặt

Hình 3.2: Dynamic List/Menu

Page 28: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 26

d. Tạo hộp file cho field hình ảnh:

Hình ảnh là các file. Ta cần tạo hộp file với nút Browse giúp người sử dụng open file ảnh

1. Chọn Text field Img, chọn menu ViewCode and Design

2. Vào phần mã HTML, chỉnh thuộc tính TYPE=”text” của thẻ INPUT thành TYPE=”file”: <input type="file" name="Img" value="" size="32">

e. Kiểm tra trùng khoá chính:

Các khoá chính trong bảng phải tuân thủ đặc tính không trùng lặp hay bỏ. Có thể dùng tính năng

Check New Username để áp dụng.

1. Chọn Text field ICode, chọn menu WindowServer Behaviors.

2. Nhấp dấu cộng (+) Chọn User AuthenticationCheck New Username

3. Điền thông số như hình 3.3

Hình 3.3: Check New Username

f. Tạo trang InsertError.htm:

Trang này dùng thông báo lỗi trùng khoá.

4. Tạo file html trong D:\TEST\WEB

5. Nhập đoạn code sau : <html> <head> <title>Duplicate key</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <CENTER> <H3>This Item Code is exist. Try another one</H3> <A HREF="Insert.asp">BACK</A></CENTER> </body> </html>

6. Lưu file với tên InsertError.htm

Để xem kết quả, tiến hành như sau :

1. Mở trình duyệt web

2. Nhập địa chỉ web vào hộp Address như sau http://Localhost/Mysite/Insert.asp

3.2 UPDATE

3.2.1 Tạo trang Update.asp

Form Update giúp chỉnh sửa lại dữ liệu đang tồn tại trong bảng. Ta cần thiết kế 2 form:

- Form chọn data muốn Update (Update.asp)

- Form xác nhận việc Update (UpdateConfirm.asp)

Page 29: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 27

a. Tạo giao diện trang Update:

1. Trong DW, tạo Dynamic Page như trang login

2. Chọn menu File Save. Đặt tên file là Update.asp

3. Mở trang Update.asp lên, nhập đoạn code như sau và lưu lại:

<html> <head> <title>Update Items</title> <body> <form name="form1" method="post" action="UpdateConfirm.asp"> Select Items: <select name="sICode"> <option></option>> </select> <input type="submit" name="Submit" value="Submit"> </form> </body> </html>

b. Kết nối menu ICode vào Database:

1. Tạo Items Recordset tên rsItemsUpdate như hình 3.4

2. Chọn menu Window Server Behaviors

3. Nhấp dấu cộng (+) chọn Dynamic Form Elements Dynamic List/Menu

4. Điền các thông số cần thiết như bảng T-3.2 và hình 3.5

Hình 3.4: Tạo Recordset rsItemsUpdate

Field Display as Value Description

Option From recordset rsItemsUpdate Items Recordset Value ICode Giá trị dùng cho việc xử lý Lable IName Nhãn hiển thị trên form

Bảng T-3.2: Tạo Dynamic List/Menu

Page 30: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 28

Hình 3.5: Tạo Dynamic List/Menu

3.2.2 Tạo trang UpdateConfirm.asp

a. Tạo giao diện trang Update Confirm:

1. Trong DW, tạo Dynamic Page như trang login

2. Chọn menu File Save. Đặt tên file là UpdateConfirm.asp

3. Mở trang UpdateConfirm.asp lên, nhập đoạn code như sau và lưu lại:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Update Confirm</title> </head> <body> <H4>Are You sure to Update this Item?</H4><BR> </body> </html>

b. Tạo Recordset rsItemTransfer:

Mục đích của Recordset này là nhận giá trị Icode được chuyển qua từ form Update.asp

Tham khảo cách tạo Recordset đã đề cập ở trên. Riêng phần Filter thì điền thông tin như hình 3.5

WHERE ICode = Form Update.asp Request (sICode)

Hình 3.5: Mục Filter

Page 31: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 29

c. Tạo Update Confirm với Record Update Form Wizard:

1. Chọn menu WindowInsert

2. Chọn mục Application (Mặc định là Common)Record Update Form Wizard

3. Điền thông số như hình 3.6

4. Các mục trong Form fields thay đổi mục Display as như bảng T-3.3

5. Nhấp OK để xác nhận thiết đặt

Hình 3.6: Record Update Form

Field Display as Value Description

ICode Text Field Hiển thị kiểu Text Field IName Text Field Hiển thị kiểu Text Field CateID Menu Hiển thị kiểu Combo box (Menu/List) Price Text Field Hiển thị kiểu Text Field

Img Text Field Hiển thị kiểu Text Field

Bảng T-3.3: Record Update Form

d. Hoàn chỉnh form Update Confirm:

Thêm nút Cancel:

- Sửa Nút Update record thành OK

- Nhập đoạn code sau vào kế bên nút OK vừa sửa trong cửa sổ code <input name="cancel" type="button" value="Cancel" onClick="history.back(-1);">

Page 32: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 30

Chỉnh field ICode sang dạng không thể chỉnh sửa

- Sửa Field ICode sang dạng ẩn.

o Chọn Text field ICode, chọn menu ViewCode and Design

o Vào phần mã HTML, chỉnh thuộc tính TYPE=”text” của thẻ INPUT thành

TYPE=”hidden” (Text Field được thay bằng biểu tượng hidden)

- Hiển thị ICode ở dạng Text

o Đặt con trỏ vào ô ICode

o Chọn menu Window BindingsNhấp dấu cộng (+) phía trước Recordset

(rsItemTransfer)

o Kéo field ICode thả vào kế bên biểu tượng hidden.

Kết nối CateID vào Database (Tham khảo trang 25 và hình 3.7)

Hình 3.7: Kết nối CateID và Database

Tạo hộp File cho field hình ảnh: (Tham khảo trang 26)

Kết quả được form như sau: Are You sure to Update this Item?

Để xem kết quả, tiến hành như sau :

1. Mở trình duyệt web

2. Nhập địa chỉ web vào hộp Address như sau http://Localhost/Mysite/Update.asp

Page 33: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 31

3.3 DELETE

3.3.1 Tạo trang Delete.asp

Form Delete giúp xoá dữ liệu đang tồn tại trong bảng. Ta cần thiết kế 2 form:

- Form chọn data muốn xoá (Delete.asp)

- Form xác nhận việc xoá dữ liệu (DeleteConfirm.asp)

a. Tạo giao diện trang Delete:

4. Trong DW, tạo Dynamic Page như trang login

5. Chọn menu File Save. Đặt tên file là Delete.asp

6. Mở trang Delete.asp lên, nhập đoạn code như sau và lưu lại:

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Delete Items</title> <body> <form name="form1" method="post" action="DeleteConfirm.asp"> Select Items: <select name="sICode"> <option></option>> </select> <input type="submit" name="Submit" value="Submit"> </form> </body></html>

b. Kết nối menu ICode vào Database:

1. Tạo Items Recordset tên rsItemsDelete như hình 3.8

2. Chọn menu Window Server Behaviors

3. Nhấp dấu cộng (+) chọn Dynamic Form Elements Dynamic List/Menu

4. Điền các thông số cần thiết như bảng T-3.4 và hình 3.9

Hình 3.8: Tạo Recordset rsItemsDelete

Page 34: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 32

Hình 3.9: Tạo Dynamic List/Menu

Field Display as Value Description

Option From recordset rsItemsDelete Items Recordset Value ICode Giá trị dùng cho việc xử lý Lable IName Nhãn hiển thị trên form

Bảng T-3.4: Tạo Dynamic List/Menu

3.3.2 Tạo trang DeleteConfirm.asp

a. Tạo giao diện trang Delete Confirm:

4. Trong DW, tạo Dynamic Page như trang login

5. Chọn menu File Save. Đặt tên file là DeleteConfirm.asp

6. Mở trang DeleteConfirm.asp lên, tạo giao diện như sau:

Are you sure to delete this Item?

Hình 3.10: Form Delete Confirm

Chú ý: Mã HTML của 2 nút trên như sau:

- Nút OK: <input name="submit" type="submit" value="OK">

- Nút Cancel: <input name="cancel" type="button" value="Cancel" onClick="history.back(-1);">

Page 35: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 33

b. Tạo Recordset rsItemDelTransfer:

Mục đích của Recordset này là nhận giá trị Icode được chuyển qua từ form Delete.asp

Tham khảo cách tạo Recordset đã đề cập ở trên. Phần Filter thì điền thông tin như hình 3.11

Hình 3.11: Mục Filter

c. Tạo Delete Confirm với Delete Record

1. Chọn menu WindowInsert

2. Chọn mục Application (Mặc định là Common)Delete Record

3. Điền thông số như hình 3.12

Hình 3.12: Delete Record

1. Đặt Placeholder vào phần IMG trong mục IMG của form

2. Mở menu WindowBindings

3. Nhấp dấu cộng (+) Recordset (rsItemDelTransfer) - Kéo các Items thả vào từng thành phần của Form.

Kết quả như hình 3.13

Are you sure to delete this Item?

Hình 3.13: Form Delete Cofirm hoàn chỉnh

Để xem kết quả, tiến hành như sau :

1. Mở trình duyệt web

2. Nhập địa chỉ web vào hộp Address như sau http://Localhost/Mysite/Delete.asp

Page 36: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 34

PHỤ LỤC A

Có thể thực hiện việc update hay delete từ trang View chi tiết sản phẩm. Điều này giúp việc

quyết định update hay delete chính xác hơn vì nhìn được đầy đủ các thông tin của sản phẩm.

1. Tạo liên kết trong trang View:

Đặt liên kết trong trang View theo cú pháp sau:

<A HREF="[URL]?[Field]=<%=([Recordset].Fields.Item("[Field]").Value)%>">[Link]</A> Trong đó:

- URL : Tên trang đích (UpdateConfirm.asp hay DeleteConfirm.asp) - Field : Tên field khoá được của bảng muốn chọn (ICode) - Recordset : Tên recordset đã tạo để kết nối vào database (rsViewItems) - Link : Tên liên kết hiển thị (Update hay Delete)

Tuần tự thực hiện như sau:

1. Mở trang View sản phẩm Select.asp

2. Thêm một ô bên trái như hình H1 để đưa chức năng Update, Delete sản phẩm vào

3. Chọn File Save để lưu trang

Hình H1: Thêm ô chứa liên kết

1. Chọn ô mới thêm (Update Delete)

2. Chọn menu ViewCode and Design

3. Vào phần mã HTML, thay nội dung “(Update Delete)” bằng 2 dòng code sau:

<A href="_UpdateConfirm.asp?ICode=<%=(rsViewItems.Fields.Item("ICode").Value)%>">Update</A> <A href="_DeleteConfirm.asp?ICode=<%=(rsViewItems.Fields.Item("ICode").Value)%>">/Delete</A>

2. Tạo trang Confirm cho chức năng Update và Delete:

Các bước tạo trang UpdateConfirm.asp và DeleteConfirm.asp không khác gì phần nội dung

đã đề cập ở chương 3.

a. Tạo trang _UpdateConfirm.asp

1. Tạo trang _UpdateConfirm.asp

2. Tạo Recordset rsItemViewTransfer

3. Trong phần filter, chọn tham số như hình H2

4. Các bước còn lại tham khảo chương 3

Hình H2: Filter

b. Tạo trang _DeleteConfirm.asp

Tương tự trên

Page 37: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 35

PHỤ LỤC B

I. Thanh điều hướng gắt trang (Recordset Navigation Bar)

Thanh điều hướng này giúp người dùng duyệt số record trong bảng. Khi số record vượt quá quy định

một trang, tiện ích sẽ ngắt các record còn lại sang một hay nhiều

trang mới. Ta làm như sau:

1. Trong cửa sổ Design View của trang Select.asp, đặt con trỏ tại

nơi muốn chèn Recordset Navigation Bar.

2. Chọn menu Window Insert.

3. Chọn mục Application (Mặc định là Common) Recordset

Navigation Bar.

4. Giao diện Recordset Navigation

Bar xuất hiện như sau:

5. Sau khi insert, kết quả xuất hiện trong giao diện design như sau:

Chú ý: Số record hiển thị chính bằng số record

khi đã tạo Dynamic Table.

Page 38: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 36

II. Ngăn người dùng truy cập trực tiếp bằng liên kết

Người dùng có thể gõ địa chỉ của trang web vào hộp địa chỉ của trình duyệt, mà bỏ qua bước login.

Ta có thể ngăn cản việc này với chức năng Restrict Access to Page.

Ta làm như sau:

1. Mở trang ASP muốn thêm chức năng này.

2. Chọn menu Window Insert.

3. Chọn mục Application (Mặc định là Common) User

Authentication.

4. Chọn Restrict Access to Page.

5. Của sổ Restrict Access to Page hiện ra.

6. Chọn trang được chuyển tới khi người dùng chưa login. Ví dụ ở đây là Login.asp

III. Upload ảnh

Ta có thể dùng một hình ảnh minh hoạ thông qua hộp file trong trang web. Điều khó khăn với sinh

viên khi làm project là đường dẫn nạp trong hộp file luôn là địa chỉ tuyệt đối nên khó khăn khi hiển thị

ảnh ra trang web, nhất là lúc publish trên một vị trí lưu trữ khác. Có hai cách giải quyết:

a. Sinh viên viết một trang upload ảnh bằng ASP.

o Ưu điểm: Có thể upload ảnh từ bất kỳ nguồn nào. Ảnh sẽ được upload thẳng lên site và

đưa đường dẫn vào database.

o Nhược điểm: Code xử lý phức tạp so với một project học kỳ đầu tiên.

b. Sinh viên chỉ viết một đoạn mã cắt chuỗi tại máy khách để nạp lại một đường dẫn tương đối cho

các ảnh đang có trang site.

o Ưu điểm: Code client-side sinh viên đã được học. sau khi cắt, đường dẫn mới sẽ được

đưa database.

o Nhược điểm: Không thể upload các ảnh đang có ngoài site.

Do đặc tính của một project học kỳ đầu tiên, khuyến các sinh viên dùng cách thứ hai. Sau đây là hướng

dẫn chi tiết:

1. Mở trang web cần upload ảnh ở chế độ Split: Design và Code view.

2. Chọn hộp text Image cần upload ảnh.

3. Trong của sổ code sửa Type lại thành Hidden.

4. Thêm hộp file có tên txtUpload.

5. Đoạn mã sau khi thêm như sau:

Page 39: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 37

<INPUT type="Hidden" name="Img" value="" size="32">

<INPUT type="file" name="txtUpload" value="" size="32" onChange="doUpFile('Img')">

6. Trong cửa sổ Design View, kết quả như hình:

7. Nhập đoạn mã sau vào phần head của trang web

<SCRIPT language=”JavaScipt”>

function doUpFile(fileName){

var sPath = "";

var sGetPath = "";

var ext = "";

//Đọc giá trị trong hộp file

sGetPath = document.getElementById("txtUpload").value; //UploadForm.txtUpload.value;

//Kiểm tra phần mở rộng của tên file

ext = sGetPath.substring(sGetPath.length-3, sGetPath.length);

ext = ext.toLowerCase();

if((ext != 'bmp') && (ext != 'jpg') && (ext != 'gif')) {

alert("Please, select *.gif , *.jpg, *.bmp file instead")

return false;

}else{ // Thiết lập lại URL đưa vào database

sPath = sGetPath.substring(sGetPath.lastIndexOf("\\")+1);

sPath = "IMG/" + sPath;

document.getElementById(fileName).value = sPath;

}

}

</SCRIPT>

Page 40: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 38

THAY LỜI KẾT

Quyển HƯỚNG DẪN ASP (Bổ sung tài liệu hướng dẫn Project, Áp dụng trên nền Windows Vista và

SQL Server 2005) nhằm mục đích giúp học viên nắm khái quát về ASP cũng như phối hợp công cụ

Dreamweaver trong việc thiết kế một website động.

Chắc chắn sẽ còn nhiều thiếu sót. Những thiếu sót được hiểu trên cả hai mặt : Kiến thức và Kỹ thuật

Với kiến thức, học viên phải tìm đọc thêm các sách hướng dẫn về:

- Lập trình web với Asp

- Công cụ Dreamweaver

Với Kỹ thuật, học viên phải xây dựng thêm các tính năng cho website :

- Thiết kế lại database

- Xây dựng chặt chẽ các ràng buột :

o Khoá chính

o Quan hệ Master-Details

- Phải có những cảnh báo khi người dùng can thiệp vào database như :

o Xoá dữ liệu

o Update dữ liệu

- Trình bày giao diện thân thiện, màu sắc phù hợp

- Xây dựng thêm những chức năng hoàn chỉnh

- Validate các field nhập liệu

Nếu đã đọc và làm theo từng bước trong quyển sách này, tôi tin rằng bạn đã có đủ bản lĩnh để tiếp tục

hoàn tất đồ án môn học của mình. Hãy nhập vào dòng địa chỉ trên máy của bạn để tận hưởng thành quả

lao động của bạn http://localhost/mysite

Chúc các bạn thành công.

Biên soạn lần thứ 1, tháng 09 Năm 2003.

Tái bản lần thứ 2, tháng 02 Năm 2005

Tái bản lần thứ 3, tháng 05 Năm 2009.

Page 41: ASP-Dreamweaver Project Guide Ver3.1

ASP Project Guide version 3.1 Giảng viên Lê Thanh Nhân Trang 39

MỤC LỤC

Chương 1 Giới thiệu ASP ............................................................................................................................................... 1

1.1 ASP là gì ? ...................................................................................................................................................................... 1

1.2 Một số đối tượng trong ASP .......................................................................................................................................... 1

1.3 Cài đặt WebServer (IIS) .................................................................................................................................................. 3

1.4 Publish Website ............................................................................................................................................................. 4

1.5 Ví dụ minh họa .............................................................................................................................................................. 6

Chương 2 Xây dựng ứng dụngvới Dreamweaver .......................................................................................................... 9

2.1 Xác định vấn đề ............................................................................................................................................................. 9

2.2 Mô hình ERD .................................................................................................................................................................. 9

2.3 Thiết kế bảng ............................................................................................................................................................... 10

2.4 SiteMap ....................................................................................................................................................................... 12

2.5 Process Diagram .......................................................................................................................................................... 12

2.6 Chuẩn bị ....................................................................................................................................................................... 13

2.7 Làm việc với Dreamweaver 8 (DW): ............................................................................................................................ 16

Chương 3 Xây dựng ứng dụngvới Dreamweaver ........................................................................................................ 24

3.1 INSERT ......................................................................................................................................................................... 24

3.2 UPDATE ....................................................................................................................................................................... 26

3.3 DELETE ......................................................................................................................................................................... 31

PHỤ LỤC A ......................................................................................................................................................................... 34

1. Tạo liên kết trong trang View: ..................................................................................................................................... 34

2. Tạo trang Confirm cho chức năng Update và Delete: ................................................................................................. 34

PHỤ LỤC B ......................................................................................................................................................................... 35

I. Thanh điều hướng gắt trang (Recordset Navigation Bar) ........................................................................................... 35

II. Ngăn người dùng truy cập trực tiếp bằng liên kết ...................................................................................................... 36

III. Upload ảnh .................................................................................................................................................................. 36

THAY LỜI KẾT ..................................................................................................................................................................... 38