Giáo trình môn Thiết kế Web

của Dreamweaver. 
Mục tiêu 
1. Vận dụng đ-ợc chức năng Master – Detail Page Set để thiết kế một trang web 
động. 
2. Tạo đ-ợc kết nối CSDL trong Dreamweaver. 
3. Tạo đ-ợc các trang Insert, các đối t-ợng của Form. 
1. Xõy dựng trang Master-Detail Page Set 
Master-Detail Page set là một ứng dụng web có trình bày các thông tin đ-ợc 
trích xuất từ một cơ sở dữ liệu trong hai định dạng. Trang chủ (master)sẽ hiển thị một 
danh sách của tất cả các bản ghi truy xuất nh- là một kết quả của tìm kiếm cơ sở dữ liệu. 
Một trang chi tiết (Detail) liên kết từ trang chủ trang web và th-ờng cung cấp thêm các 
chi tiết cụ thể về một mục đã chọn trong trang chủ. 
Chúng ta có thể hoàn tất phần h-ớng dẫn này trong mô hình máy chủ sau đây -
ColdFusion, ASP, JSP. Trong phần h-ớng dẫn này, chúng ta sẽ xây dựng một master and 
detail page set. Những h-ớng dẫn mất khoảng 20 phút để hoàn thành, tùy thuộc vào kinh 
nghiệm của chúng ta, và sẽ dạy cho chúng ta cách làm các nhiệm vụ sau: 
1. “Tạo một master-detail page set” trên trang 144 
2. “Tạo một database recordset” trên trang 145 
3. “Chèn một đối t-ơng ứng dụng vào Master-Detail Page Set” trên trang 148 
4. “Hiển thị trang của chúng ta” trên trang 150 
1.1 Tạo một master-detail page set 
Một điểm xuất phát tốt để phát triển một ứng dụng cơ sở dữ liệu là để hiển thị 
một danh sách những bản ghi đ-ợc l-u trữ trong một cơ sở dữ liệu. Trang master-detail 
page set chúng ta phát triển sẽ liệt kê những vị trí cho thuê ô tô của công ty,cũng nh- 
thông tin chi tiết về mỗi vị trí, nh- số điện thoại và địa chỉ. 
Tất cả các thông tin về các địa điểm toàn cầu này đ-ợc l-u giữ trong một tập tin 
cơ sở dữ liệu Microsoft Access “ global.mdb”. Chúng ta nên chắc chắn rằng có một kết 
nối vào cơ sở dữ liệu này. ứng dụng các trang web sẽ không đ-ợc cập nhật mà không có 
một kết nối vào cơ sở dữ liệu này. 
Hãy bắt đầu bằng việc lựa chọn một trang để làm việc. 
1) Thực hiện một trong các cách sau để mở panel Site: 
▪ Trong nhóm panel Files, click vào mũi tên mở rộng, sau đó chọn tab Site nếu 
nó ch-a đ-ợc mở. 
▪ Chọn Window -> Site. 
▪ ấn F8. 
Panel Site đ-ợc mở. 
 2) Trong trình đơn pop-up Site, lựa chọn site GlobalCar mà chúng ta đã định nghĩa. 
3) Trong panel Site, click đúp vào file locationMaster để mở nó. 
Tài liệu mở trong cửa sổ Document. Chúng ta sẽ từng phần của trang đã hoàn 
thành. 
1.2 Tạo một bản ghi (recordset) cơ sở dữ liệu 
Bây giờ chúng ta sẽ tạo một recordset để hiển thị dữ liệu đã đ-ợc l-u trữ trong một cơ sở 
dữ liệu. Một recordset là một nhóm các thông tin trích xuất từ một cơ sở dữ liệu bằng 
việc truy vấn một cơ sở dữ liệu. (Trong ASP.NET, một recordset đ-ợc biết đến nh- một 
DataSet.) Một truy vấn cơ sở dữ liệu bao gồm các tiêu chí tìm kiếm, trong đó 
xác định những gì đ-ợc bao gồm trong recordset. Chúng ta hãy sử dụng những thông tin 
đ-ợc trích xuất nh- là một nguồn dữ liệu cho các trang web đông của chúng ta. 
Dreamweaver MX cung cấp một giao diện đơn giản - dễ sử dụng để tạo ra các truy 
vấn SQL –chúng ta không cần phải biết SQL để tạo ra một recordset trong 
Dreamweaver. 
Chúng ta sẽ tạo một recordset để lựa chọn tất cả các giá trị từ bảng Location. 
1) Trong Dreamweaver, mở hộp thoại Recordset hoặc DataSet (ASP.NET) bằng 
cách thực hiện một trong các b-ớc sau: 
▪ Trong thanh Insert chọn Tab Application, click vào nút Recordset hoặc 
DataSet (ASP.NET). 
▪ Chọn Window -> Bindings để mở panel Binding, sau dó click vào nút (+) 
và lựa chọn Recordset hoặc DataSet. 
▪ Trong nhóm panel Application, chọn panel Binding, sau đó click vào nút 
cộng (+) và lựa chọn Recordset hoặc DataSet. 
Hộp thoại Recordset hoặc DataSet xuất hiện. Những màn hình d-ới đây cho thấy 
hộp thoại recordset của ColdFusion. (Trong ASP.NET đây là hộp thoại DataSet, hầu hết 
các tùy chọn recordset đang có cùng một mô hình cho tất cả các loại máy chủ.) 
2) Trong ô textbox Name, nhập rsLocations. 
Đây là tên của recordset mà chúng ta định nghĩa. 
3) Trong trình đơn pop-up Data Source (ColdFusion) hoặc trình đơn pop-up 
Connection (Các loại trang phục vụ khác), lựa chọn connGlobal. 
Hộp thoại Recordset hoặc DataSet cập nhật và hiển thị thông tin cho bảng đầu 
tiên trong cơ sở dữ liệu Global. 
Chú ý: Nếu kết nôi connGlobal không xuát hiện trong trình đơn, click vào nút 
Define để tạo nó. 
Chọn REGION_ID, sau đó click vào nút trừ (-). 
1) Click OK. 
Dreamweaver cập nhật các trang master và detail, và thêm vào tất cả các kịch 
bản mà phía máy chủ cần và truy vấn cả trang danh sách và trang detail. 
Trang master đ-ợc cập nhật. Nó bao gồm một bảng cho cơ sở dữ liệu, một bảng 
cho định h-ớng trang recordset, và một bản ghi thiết lập đếm. 
Trang detail cũng cập nhật. Nó bao gồm một bảng chính là danh sách chi tiết cho 
mỗi bản ghi trong trang master. 
1.4 Hiển thị cỏc trang 
Tiếp theo, chúng ta sẽ l-u các trang lại, sau đó mở chúng ra để thấy các ứng dụng 
chúng ta phát triển hoạt động nh- thế nào. 
1) Trong cửa sổ Document, chọn tài liệu locationDetail, và chọn File > Save để l-u 
lại công việc của chúng ta. 
2) Trong panel Site, chọn tài liệu locationDetail, sau đó click vào nút Put Files 
(mũi tên quay lên màu xanh) để copy file cục bộ tới server của chúng ta. 
3) Trong cửa sổ Document, chọn tài liệu locationMaster, và chọn File > Save để l-u 
nó lại. 
4) Trong panel Site, chọn tài liệu locationMaster, sau đó click vào nút Put Files 
(mũi tên quay lên màu xanh) để copy file cục bộ tới server của chúng ta. 
5) Với tài liệu locationMaster vẫn đ-ợc lựa chọn, ấn F12 để xem trang trong trình 
duyệt. Kiểm tra liên kết từ trang Master tới trang Detail. 
6) Phía d-ới bảng dữ liệu, click Next để thiết lập tiếp theo của 10 bản ghi. 
Bảng dữ liệu, thanh định h-ớng và đếm bản ghi đ-ợc cập nhật. 
7) Click một trong số các tên vị trí để thấy trang detail. 
Trang master đi qua khóa chính đến server, server xử lý truy vấn và trang detail 
mở ra và hiển thi dữ liệu cho vị trí đ-ợc lựa chọn. 
8) ấn nút Locations ở vị trí phía trên trang để quay lại danh sách locations. 
9) Đóng cửa sổ trình duyệt khi chúng ta xem xong trang web. 
10) Trong Dreamweaver, đóng trang web lại. 
2. Xõy dựng và chốn trang Record 
Phần này h-ớng dẫn chúng ta đi qua các b-ớc xây dựng một Form để chèn các 
thông tin vào một cơ sở dữ liệu. Chúng ta sẽ tìm hiểu làm thế nào để chèn và định nghĩa 
các tr-ờng của Form. Chúng ta cũng sẽ tìm hiểu cách để tạo ra một tr-ờng form cho 
phép ng-ời sử dụng chèn thêm các thông tin tự động đ-ợc tạo ra bằng cách sử dụng một 
trình đơn. Chúng ta có thể hoàn thành phần h-ớng dẫn này trong tất cả các mô hình 
server đ-ợc hỗ trợ bởi Dreamweaver MX - Cold F usion, ASP, AS P. NE T, JSP, và 
PHP. 
Trong phần này chúng ta sẽ hoàn thành các nhiệm vụ sau: 
1. Tạo một trang Insert 
2. Thêm các đối t-ợng vaog Form 
3. Định nghĩa một Insert Record server behavior 
4. Kiểm tra trang 
2.1 Tạo một trang Insert 
Trang web mà chúng ta sẽ tạo ra các trang web cho phép quản trị viên mới chèn 
xe cho thuê địa điểm thông tin trong cơ sở dữ liệu Global Car Rental. 
Chúng ta sẽ bắt đầu trong một phần hoàn thành trang web. Dọc theo con đ-ờng 
chúng ta sẽ thêm các hình thức đối t-ợng và năng động nội dung cho trang web. 
Hãy bắt đầu bằng việc lựa chọn một trang web để làm việc: 
2) Thực hiện một trong các cách sau để mở panel Site. 
▪ Trong nhóm panel Files, click vào mũi tên mở rộng, sau đó lựa chọn tab Site 
nếu nó ch-a đ-ợc lựa chọn. 
▪ Chọn Window -> Site. 
▪ ấn F8. 
Panel Site đ-ợc mở. 
3) Trong trình đơn pop-up, lựa chọn site Global Car mà chúng ta đã định nghĩa. 
4) Trong panel Site, click đúp chuột vào tài liệu insertLocation để mở nó. 
Tài liệu đ-ợc mở trong cửa sổ Document. 
2.2 Thờm cỏc đối tượng Form 
Một bảng và một số các tr-ờng của Form đã đ-ợc thêm vào trang này. Một màu 
đỏ hình chữ nhật xuất hiện trong tài liệu, đây là ranh giới của Form. Dreamweaver sẽ tự 
động chèn một ranh giới Form trong một tài liệu khi chúng ta chèn thêm một đối t-ợng 
Form. 
Bây giờ chúng ta sẽ thêm vào các tr-ờng còn lại của Form : Một tr-ờng 
list/menu, một nút submit, và một nút reset. 
Chúng ta cũng sẽ cung cấp các nhãn cho các tr-ờng của Form. Việc tạo ra tên các 
tr-ờnglà khá đơn giản để chúng ta nhận dạng những tr-ờng mà chúng ta đang làm việc 
sau khi kết nối Form Fields tới các tr-ờng của cơ sở dữ liệu. 
Chúng ta sẽ bắt đầu bằng cách xem một trong những form fields có sẵn. 
1) Mở phần giám sát Property (Window > Properties),nếu nó ch-a đ-ợc mở. 
2) Di chuyển con trỏ tới ô trên cùng bên phải, click vào tr-ờng Form để lựa chọn 
nó. 
Phần giám sát Property cập nhật các thuộc tính tr-ờng của Form. 
Tr-ờng Name bao gồm tên của đối t-ợng Form, và tr-ờng Char Width thiết lập 
chiều rộng của tr-ờng đến 30 ký tự. Chúng ta sẽ cập nhật hai tr-ờng này trong 
các tr-ờng text chúng ta đã thêm vào trong Form. 
3) Trong tài liệu, đặt một điểm chèn trong ô phía phải của nhãn State hoặc Country 
, sau đó thực hiện một trong các cách sau để chèn một text field: 
▪ Trong thanh Inssert, click vào tab Forms, sau đó click vào nút Text Field 
hoặc kéo nó từ thanh Insert tới ô của bảng. 
▪ Chọn Insert > Form Objects > Text Field 
Đối t-ợng text field của Form đã đ-ợc chèn trong tài liệu. 
4) Text field vẫn đ-ợc lựa chọn, trong phần giám sát Property, nhập state_contrry 
trong ô TextField và nhập 30 trong ô Char Width. 
 5) Trong tài liệu, đặt điểm cần chèn trong ô phía phải của nhãn Region, sau đó làm 
một trong các cách sau để chèn một List/Menu: 
▪ Trong mục Form của thanh Insert, click vào nút List/Menu hoặc kéo nó từ thanh 
Insert tới ô của bảng. 
▪ Chọn Insert > Form Objects > Text Field. 
Đối t-ợng Form List/Menu đ-ợc chèn vào tài liệu. 
6) Trong bảng giám sát Property, nhập region_id trong ô List/Menu. 
7) Chèn một Text Field cho Telephone, sau đó trong mục TextField của phần giám 
sát Property điền là telephone, và trong tr-ờng Char Width nhập 30. 
8) Chèn một Text Field cho Fax, sau đó trong mục TextField của bảng giám sát 
Property điền là fax, và trong Char Width nhập 30. 
9) Trong tài liệu, đặt điểm chèn trong ô của bảng. 
10) Thêm một nút submit cho Form bằng một trong các cách sau: 
▪ Trong mục Form của thanh Insert, click vào nút Button hoặc kéo nó từ thanh 
Insert tới ô của bảng. 
▪ Chọn Insert > Form Objects > Button. 
Một nút Submit đ-ợc chèn vào tài liệu. Trong phần giám sát Property, Submit là 
một nhãn và Action là để thiết lập tới Form Submit. 
11) Lặp b-ớc 10 để thêm một nút khác cho Form. Chúng ta sẽ thêm nút resest để 
ng-ời dùng xác lập lại Form nếu họ cần. 
12) Trong phần giám sát Property, tại phần Action chọn Reset form. 
13) Trong ô textbox Button Name, nhập Reset. 
Form của chúng ta bây giờ đã hoàn thành và nó sẽ giống nh- thế này: 
14) L-u tài liệu lại. 
2.3 Định nghĩa cỏc trường của form List/Menu 
Giờ chúng ta sẽ cập nhật thêm thông tin cho tr-ờng list/menu mà sẽ để cho một ng-ời sử 
dụng lựa chọn trong phần region. Và cập nhật cơ sở dữ liệu với giá trị số của nó. Bằng 
cách này một ng-ời sử dụng không cần phải kiểm tra xác minh số nào phù hợp với tên 
nào 
1) Trong tài liệu, click vào tr-ờng Region_Id list/menu để lựa chọn nó. 
Phần giám sát Poperty cập nhật thông tin về đối t-ợng. 
2) Trong phần giám sát Property, click vào nút List Values. 
Hộp thoại List/Menu xuất hiện. 
3) Trong hộp thoại List Values, thêm Item Labels và Values để phù hợp với dữ liệu 
trong bảng cơ sở dữ liệu REGIONS. 
4) Trong Item Label, nhập North America, ấn Tab và trong Value nhập 1. 
5) Click vào nút cộng (+) để thêm các mục nhập khác, sau đó nhập South/Central 
America, ấnTab, sau đó nhập 2. 
6) Lặp b-ớc 4 và b-ớc 5 cho đến khi chúng ta nhập tất cả các vùng nh- bảng hộp 
thoại sau. 
7) Click OK để đóng hộp thoại. 
2.4 Định nghĩa một InsertRecord server behavior. 
Chúng ta sẽ sử dụng một hành vi phục vụ để tạo ra những kịch bản server cần thiết cho 
ứng dụng. Chúng ta sẽ tạo ra một kết nối giữa dữ liệu của tr-ờng Form và dữ liệu cơ sở 
dữ liệu để hoàn thành Form và khi click vào nút Submit sẽ chèn thông tin vào trong cơ 
sở dữ liệu. 
1) Trong panel Server Behaviors (Window > Server Behaviors), click vào nút cộng 
(+) và chọn Insert Record từ trình đơn pop-up. 
Bảng hộp thoại Insert Record xuất hiện. 
2) Trong Data Source (ColdFusion) hoặc trình đơn pop-up Connection (các mô hình 
server khác), chọn connGlobal. 
3) Trong trình đơn pop-up Insert Into Table, chọn LOCATIONS. 
Danh sách Columns cập nhật thông tin về các tr-ờng của Form liên quan đến các tr-ờng 
của cơ sở dữ liệu nh- thế nào. 
4) Hãy chắc chắn rằng giá trị của REGION_ID đ-ợc thiết lập là Number hoặc 
Integer (ASP.NET), Region ID là một giá trị số hơn là một giá trị text. 
5) Trong After Inserting, Go To hoặc On Success, Go To (ASP.NET), click Browse 
và trong bảng hộp thoại xuất hiện lựa chọn file LocationOK, sau đó click OK để 
đóng bảng hộp thoại. 
6) Click OK để đóng bảng hộp thoại Insert Record. 
Trong cửa sổ Document, form updates và panel Server Behaviors chỉ ra hành vi 
Insert Record đã đ-ợc thêm vào. 
7) L-u tài liệu lại. 
2.5 Test trang 
Tiếp theo, chúng ta sẽ hoàn thành trang vào server, sau đó mở nó trong một trình 
duyệt và chèn thêm một số thông tin. 
1) Trong panel Site, lựa chọn insertLocation, sau đó click vào nút Put Files (mũi tên 
quay lên màu xanh) để copy file cục bộ tới server. Chọn Yes khi đ-ợc hỏi để 
copy các file phụ thuộc. 
2) Sau khi lựa chọn InsertLocation, trong cửa sổ Document, chọn File > Preview in 
Browser hoặc ấn F12 (Windows) để xem tài liệu. 
3) Nhập test data trong form, sau đó click vào nút Submit. 
Trang locationOK xuất hiện chỉ ra thông tin đã đ-ợc chèn thành công trong cơ sở 
dữ liệu Global. 
4) Để xem các mục mà chúng ta đã thêm vào cơ sở dữ liệu làm theo các cách sau: 
Trong nhóm panel Application, lựa chọn panel Databases. Xác định vị trí của cơ sở 
dữ liệu connGlobal, sau đó bấm vào dấu cộng (+) ở phía tr-ớc của nó, để mở rộng nó. 
Nhấp vào cộng (+) ở phía tr-ớc Tables để xem cơ sở dữ liệu của bảng . Right-click 
(Windows) vào bảng LOCATIONS và sau đó chọn View Data. Các bản ghi của Cơ sở 
dữ liệu xuất hiện, bản ghi mới ở phía d-ới cùng trong cơ sở dữ liệu. 
3. Thực hành 
Sử dụng CSDL qlsv và Dreamweaver thực hiện các yêu cầu sau: 
1. Thiết kế một Form dăng nhập để đăng nhập vào hệ thống giống hình sau: 
2. Tạo trang master trong đó có liên kết đến các trang detail giống hình sau: 
3. Hiển thị các chức năng của trang detail khi ta click vào bất kỳ một liên kết nào, 
chẳng hạn khi ta click vào liên kết “Thêm sinh viên mới” chương trình sẽ cho ta 
một trang “Thêm sinh viên mới” như sau: 
Tài liệu tham khảo 
Nguyễn Hữu Tuấn – Giáo trình thiết kế Web 
Hồ Thuần, Hồ Cẩm Hà - Các hệ cơ sở dữ liệu lý thuyết và thực hành 
Trainingtool.com – Learning VBScript 
Matt Childs, Paul Lomax, Ron Petrusha - VBScript in a Nutshell, 2nd Edition 
Macromedia Dreamweaver MX tutorials 
W3schools.com