asp-dreamweaver project guide ver3.1
TRANSCRIPT
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
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
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 :
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
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
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
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.
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
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
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
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
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)
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
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
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
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
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
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>
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
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
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 :
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
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.
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
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
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
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)
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
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
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);">
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
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
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);">
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
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
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.
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:
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>
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.
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