Hướng dẫn xây dựng ứng dụng Web với MacroMedia DreamWeaver MX
TRUNG TÂM ĐÀO TẠO LẬP TRÌNH VIÊN QUỐC TẾ
FPT-APTECH
HƯỚNG DẪN XÂY DỰNG ỨNG DỤNG WEB VỚI
MACROMEDIA DREAMWEAVER MX
(Tài liệu bổ sung thực hiện project)
09/2003
Xây dựng trang web động với công cụ Dreamweaver MX
HƯỚNG DẪN XÂY DỰNG ỨNG DỤNG WEB VỚI
MACROMEDIA DREAMWEAVER MX
I. Giới thiệu
1. Các bước cần thực hiện
a. Cấu hình hệ thống và Môi trường làm việc của Dreamweaver MX
b. Tạo Database
c. Thiết lập web site và tạo kết nối vào Database.
➢
➢
➢
➢
➢
Định nghĩa web site
Chế độ làm việc đối với server
Tạo liên kết với database
Publish web site vừa tạo lên PWS
Xem trang web trong trình duyệt.
d. Tạo các dạng trang web thao tác có kết nối Database.
2. Web site minh họa
a. Nội dung: Trong phần này chúng ta minh họa việc tạo một web site giới thiệu mặt
hàng điện thoại. Chế độ làm việc với Server thông qua các trang Active Server Page
(asp).
b. Chức năng thao tác:
-
-
-
-
-
-
-
-
Trang login
Trang logout
Hiển thị dữ liệu theo danh sách theo dạng bảng
Hiển thị dữ liệu theo danh sách dạng Master-Detail
Nhập mới dữ liệu
Cập nhật dữ liệu dạng Master-Detail (Search Update)
Cập nhật dữ liệu trên cùng một form (Search Update)
Xoá dữ liệu (Search Delete)
c. Bố trí các trang:
Trang chủ Trang Login Trang chọn nội dung Danh sách dạng bảng
(Index_Login)
Danh sách dạng Master-Detail
Nhập mới
Cập nhật dạng Master-Detail
Cập nhật trên cùng một form
Xoá dữ liệu
Trang logout
(default.htm) (Login.asp)
(Index_Login.htm
d. Nội dung từng trang
➢
Trang chủ: gồm 3 frame
Contents
<Banner>
Login
<Nội dung>
Hình 1: trang Index.htm
1
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
Trang Login.asp
➢
LOGIN FORM
User name:
Password:
Submit
Hình 2: Trang Login.htm
Trang Login khi được gọi sẽ chiếm trọn màn hình hiện tại.
➢
Trang Index_Login.htm
Contents
<Banner>
Display
Dipslay Mas_Detail
Insert
<Nội dung>
Update Two Form
Update One Form
Delete
Logout
Hình 3: Trang Index_Login.htm
Trang Index_Login khi được gọi sẽ chiếm trọn màn hình hiện tại.
➢
Trang Logout.asp
•
•
•
Đây là trang trống, chỉ chứa các đoạn mã JavaScript để đóng lại việc login.
Chỉ đi kèm với việc đã login.
Trang Logout.asp khi được gọi sẽ liên kết đến trang default.htm, khi đó
trang default.htm sẽ chiếm trọn màn hình hiện tại.
➢
Các trang còn lại sẽ được đề cập khi xây dựng từng trang.
2
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
II. Cấu hình hệ thống và Môi trường làm việc
2. Cấu hính hệ thống
- Hệ điều hành: Windows 2000, có cài đặt thêm các công cụ “Internet Information
Server” và “Personal Web Server”.
- Hệ quản trị dữ liệu: Ms Access 2000.
- Trình duyệt web: Internet Explorer 5.0 và Netscape Nevigator 4.7
- Dreamweaver MX.
Cài đặt IIS và PWS: (Khi Windows chưa được cài đặt)
a. Trong Windows 2000 vào Control Panels, chọn “Add / Remove Programs” Hiển
thị hộp thoại chọn tab “Add / Remove Windows Components” xuất hiện hộp
thoại kế tiếp như hình 4.
Hình 4.
b. Đánh dấu chọn vào Checkbox “Internet Information Sevices (IIS), sau đó bấm vào nút
lệnh Next và thực hiện các công việc theo yêu cầu (PWS là một component trong IIS,
bấm vào nút lệnh Detail… để xem chi tiết).
c. Sau khi khởi động lại máy tính, ta sẽ có một thư mục web site mặc định là
D:\\Interpub\wwwroot như hình 5 (giả sử cài windows 2000 trên ổ đĩa D:)
Hình 5
3
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
2. Môi trường làm việc của Dreamweaver MX
a. Chọn giao diện làm việc giống Dreamweaver 4.0
-
-
Vào menu Edit / Preferences hiển thị hộp thoại Preferences
Trong mục Category chọn General chọn nút lệnh “Change workspace..” hiển thị
hộp thoại như hình 6, sau đó chọn “Dreamwevaer 4 Workspace” (thay đổi chỉ có hiệu
quả cho sử dụng Dreamweaver MX lần sau)
Hình 6.
b. Hiển thị Object Panels
Trong Dreamweaver MX, để hiển thị Object Panels ta vào menu Windows / Insert
-
Object Panel sẽ xuất hiện bên trái màn hình. Xem hình 7.
Hình 7.
4
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
II. Tạo Database
-
-
Database được tạo trong Ms.Access2000 (Data_Project.mdb).
Bảng dữ liệu
Login
Name
UName
PWord
Data Type
Text
Text
Decription
User name
Password
Mobile
Name
Data Type
Text
Text
Decription
Mobile code
Supplier code (Distributor)
Mobile Name
Mcode
SCode
MName
DNotice
Price
Text
Date / Time Date of notice
Number Price of mobile
OLE Object Mobile’s photographic or movie
Image
Supplier
Name
SCode
Data Type
Text
Text
Decription
Supplier code (Distributor)
Supplier’s Name
SName
-
Sơ đồ quan hệ như sau:
Hình 8.
5
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
III. Thiết lập web site và kết nối Database
1. Định nghĩa site:
Việc định nghĩa site tương tự trong Dreamweaver 4.0, giả sử ta tiến hành khai báo các
thông số như hình 9. Trong đó:
-
-
Site name: tên của web site (Project)
Local Root Folder: địa chỉ lưu trữ web site trên máy local
(D:\Internetpub\wwwroot\project (có thể lưu ở bất cứ thư mục nào tuỳ ý).
Default Images Folder: thư mục chứa ảnh của trang (nếu có)
HTTP Address: Địa chỉ của web site trên máy local, sẽ khai báo ở phần “Testing Server”.
-
-
Hình 9
2. Chế độ làm việc đối với server
Ta phải chọn chế độ làm việc đối với server, ở đây ta chọn là ASP JavaScript
a. Mở panel “Application”: Trong web site “Project”, từ Laucher bar (hoặc từ menu
Windows) chọn “Database”, xuất hiện panel “Application” như hình 10a.
6
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
Hình 10a
Hình 10b
b. Click chuột vào “testing server” để mở hộp thoại “Site Definition for Project” xuất
hiện như hình 11.
Hình 11
7
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
c. Điền các thông số như hình 11. Trong đó:
-
-
-
-
Server Model: chọn công nghệ server (ASP JavaScript)
Access: giao thức giao tiếp với server (Local / Network).
Testing Server Folder: thư mục chứa web site.
URL Prefix: Địa chỉ của web site trên máy local, giả sử chúng ta đặt cho web site một
alias là “myproject” (hoặc là tên của thư mục hiện hành: project), thì địa chỉ sẽ là:
PWS)
-
Chọn OK để kết thúc ta được hình 10b.
3. Tạo liên kết với database
Trong project này ta dùng cơ chế kết nối ODBC connection string.
Có 2 hình thức kết nối:
Cách 1. Kết nối dùng DSN
-
-
Tạo kết nối DSN vào Database
Trong Dreamweaver MX, tạo kết nối giữa ứng dụng với kết nối DSN.
Khi sao chép Site đến một máy khác thì phải định nghĩa lại DSN tương ứng thì
chương trình mới thi hành.
Cách 2. Kết nối do người dùng viết code.
-
Trong Dreamweaver MX, tạo kết nối giữa ứng dụng với Database do người dùng viết
code. Có 2 dạng Đường dẫn tuyệt đối và đường dẫn tương đối
Nên dùng đường dẫn tương đối để sao chép và thi hành Web Site trên các máy
khác nhau được dễ dàng.
Kết nối DSN vào Database
a. Kích Start Settings Addministrative Tools Data Sources, hộp thoại ODBC
Data Source Administrator xuất hiện như hình 12.
Hình 12.
8
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
b. Click vào nút lệnh “Add”, xuất hiện hộp thoại như hình 13.
Hình 13
c. Chọn driver là “Microsoft Access Driver” như như hình 13, sau đó bấm “Finish”, một
hộp thoại sẽ xuất hiện như hình 14. Tiến hành điền Data Source Name, sau đó click
vào nút “Select” để chọn Database (Giả sử ta đang lưu ở thư mục
D:\\Interpub\wwwroot\Project), sau cùng click vào nút lệnh “OK” quay lại hộp
thoại như hình 12 nhưng có thêm data source “MyDatabase” vừa tạo. Click vào nút
“OK” để hoàn tất.
Hình 14
9
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
d. Trong site Project, vào panel Application.
Hình 15
e. Chọn tab Database, nhấn chuột vào dấu + và chọn “Data Source Name (DSN)”, một
hộp thoại “Data Source Name” xuất hiện. Điền các thông số vào như hình 16.
Hình 16
f. Bấm “Test” để kiểm tra sự kết nối, nếu thành công sẽ xuất hiện thông báo
“Connection was made successfully”.
g. Sau khi kết nối thành công, cửa sổ Application sẽ thay đổi như sau:
Hình 17
10
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
Kết nối ứng dụng với Database do người dùng viết code.
a. Trong panel Application, nhấn chuột vào dấu + và chọn “Custom Connection String”, một
hộp thoại “Custom Connection String” xuất hiện. Điền các thông số vào như hình 18.
Hình 18
Trong đó:
-
-
Connection name: tên của kết nối vào Database
Connection String: dòng lệnh tạo kết nối vào Database:
* Dang đường dẫn tuyệt đối: "Driver={Microsoft Access Driver (*.mdb)};
DBQ=D:\\Inetpub\\wwwroot\\Project\\Data_Project.mdb"
* Dang đường dẫn tương đối: "Driver={Microsoft Access Driver (*.mdb)};
DBQ=”+Server.MapPath(“Data_Project.mdb”)
a. Bấm “Test” để kiểm tra sự kết nối, nếu thành công sẽ xuất hiện thông báo
“Connection was made successfully”. Hoặc đối với hình thức đường dẫn tương đối,
thì sẽ có thể có câu sau “The simple Recordset Dialog box, can not be open….”
Nhưng vẫ tiếp tục làm tíếp.
b. Sau khi kết nối thành công, cửa sổ Application sẽ thay đổi như sau
Hình 19
➢ Sau này nếu muốn hiệu chỉnh chỉ cần Double click chuột vào “MyConnect” thì một
hộp thoại tương ứng xuất hiện để hiệu chỉnh. Tương tự cho các trường hợp hiệu
chỉnh khác.
11
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
4. Publish web site vừa tạo lên PWS
a. Kích Start Settings Taskbar & Start Menu… Advanced. Trong mục “Menu
Start Setting” kiểm tra xem checkbox “Display Addministrative Tools” đã được chọn
chưa, nếu chưa thì đánh dấu chọn.
b. Kích Start Programs Addministrative Tools Personal Web Server hiển thị
hộp thoại như hình 20.
Hình 20
c. Chọn vào tab Advanced click vào nút Add, một hộp thoại Add Directory sẽ hiện
ra. Chọn các thông số như hình 21, trong đó Directory là thư mục đang chứa trang
web; alias là một thư mục ảo (Vitual Directory) của trang web, alias này sẽ được dùng
để truy xuất trang web sau này. (chú ý các thuộc tính: write, execute…)
Hình 21
12
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
d. Ở hình 20, trong textbox “Default Documents” gõ vào tên trang chủ của web site (ví
dụ trang chủ là Index.htm). Khi truy cập vào web site này, trang Index.htm sẽ tự động
được tải ra đầu tiên.
5. Xem trang web trong trình duyệt.
a. Mở trình duyệt IE
xuất hiện.
Hình 22 – trang chủ (Index.htm)
13
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
IV. Tạo các trang web có kết nối Database
-
-
Các trang này có kết nối Database dùng công nghệ kết nối là JavaScript
Phần mở rộng của tên file là asp (*.asp)
2. Tạo form login
a. Trong site Project, vào menu File / New Hộp thoại New Document xuất hiện, chọn
Category “Dynamic Page” trong Dynamic page chọn “ASP Javascript” bấm nút
“Create”.
Hình 23
b. Thiết kế giao diện vào lưu file (Login.asp)
Hình 24
14
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
c. Từ panel “Application” chọn tab “Server Behaviors” click chuột vào dấu + để đổ
xuống menu chọn User Authentication / Log In User xuất hiện hộp thoại,
Hình 25
d. Tiến hành khai báo như hình 26
Hình 26
e. Click vào nút lệnh “OK” để kết thúc.
15
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
3. Tạo form logout (Logout.asp)
Logout form là một trang ‘rỗng’ chỉ chứa các mã JavaScript để đóng lại kết nối khi login.
a. Từ panel “Application” chọn tab “Server Behaviors” click chuột vào dấu + để đổ
xuống menu chọn User Authentication / Log Out User (hình 25) xuất hiện hộp
thoại, tiến hành khai báo như hình 27
Hình 27
b. Click vào nút lệnh “OK” để kết thúc.
4. Tạo form hiển thị danh sách theo dạng bảng
a. Thiết kế giao diện vào lưu file (Display.asp)
Hình 28
b. Từ panel “Application” chọn “Server Behaviors” click chuột vào dấu + xuất
hiện menu chọn Recordset xuất hiện hộp thoại, tiến hành khai báo như hình 29.
Hình 29
16
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
c. Trên trang Display, đặt con trỏ tại ví trí mà ta muốn xuất hiện dữ liệu vào menu
Insert / Application Objects / Dynamic Table hộp thoại Dynamic table xuất hiện,
tiến hành chọn các thông số, sau đó nhấn OK. Trang Web sẽ có dạng như sau:
Hình 30
d. Thêm và hiệu chỉnh các tính năng khi hiển thị dữ liệu:
➢ Đối với ảnh của sản phẩm, nếu ta không hiệu chỉnh thì Dreamweaver MX sẽ đưa ra
vị trí của file ta phải tạo một PlaceHolder để chứa ảnh
•
•
•
•
Chọn và xoá bỏ biến hiển thị ảnh {display.Image}
Đặt con trỏ tại ô hiển thị ảnh.
Chọn menu Insert / Image PlaceHolder đặt tên cho vùng hiển thị ảnh
Từ panel “Application” chọn tab “Bindings” sau đó click chuột vào Image
kéo và thả vào PlaceHolder vừa tạo.
➢ xuất ra thông báo thích hợp khi không có dữ liệu:
•
•
•
Đặt con trỏ dưới vùng table gõ vào thông báo “Record Not Found”
Chọn toàn bộ câu thông báo
Từ panel “Application” chọn tab “Server Behaviors” sau đó click chuột vào
dấu + để đổ xuống menu chọn Show Region / Show Region If Recordset Is
Empty.
➢ Chỉ xuất hiện phần bảng dữ liệu trên khi có dữ liệu trong Database
•
•
Chọn toàn bộ vùng table.
Từ panel “Application” chọn tab “Server Behaviors” sau đó click chuột vào
dấu + để đổ xuống menu chọn Show Region / Show Region If Recordset Is
Not Empty.
➢ Sau khi thao tác xong chúng ta có cấu trúc trang Display.asp như sau:
17
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
Hình 31
5. Tạo form Hiển thị dữ liệu theo danh sách dạng Master-Detail (form Search)
-
Trang Master dùng để liệt kê các mẫu tin và chứa một liên kết đến trang detail. Khi click
vào liên kết, trang Detail sẽ mở ra để thể hiện nhiều hơn các chi tiết của mẫu tin.
Các bước thực hiện:
-
➢ Tạo trang Master
➢ Tạo recordset
➢ Hiệu chỉnh trang Detail (tự sinh)
➢ Hiệu chỉnh trang Master
a. Tạo giao diện và lưu trang Master (DisplayMaster.asp)
Hình 32
b. Từ panel “Application” chọn tab “Server Behaviors” click chuột vào dấu + để đổ
xuống menu chọn Recordset xuất hiện hộp thoại, tiến hành khai báo như hình
33. Có thể kiểm tra kết nối bằng cách nhấn vào phím “Test”.
18
Page of 31
Xây dựng trang web động với công cụ Dreamweaver MX
Hình 33
c. Trên trang Display, đặt con trỏ tại vị trí mà ta muốn xuất hiện dữ liệu vào menu
Insert / Application Objects / Master Detail Page Set hộp thoại “Insert
Master_Detail Page Set” xuất hiện, tiến hành chọn các thông số như hình 34 sau.
Hình 34
19
Page of 31
Tải về để xem bản đầy đủ
31 trang
23180
Free
Bạn đang xem 20 trang mẫu của tài liệu "Hướng dẫn xây dựng ứng dụng Web với MacroMedia DreamWeaver MX", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- huong_dan_xay_dung_ung_dung_web_voi_macromedia_dreamweaver_m.doc
