Tạo các trang web có kết nối Database

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

- Thiết kế giao diện vào lưu file (Login.asp)

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.

- Tiến hành khai báo như hình dưới.

- Click vào nút lệnh “OK” để kết thúc.

Logout form là một trang ‘rỗng’ chỉ chứa các mã JavaScript để đóng lại kết nối khi login.

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 dưới.

- Click vào nút lệnh “OK” để kết thúc.

- Thiết kế giao diện vào lưu file (Display.asp)

- 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 dưới.

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

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

- 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

- Tạo giao diện và lưu trang Master (DisplayMaster.asp)

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

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

Trong đó:

- “Master Page Fields” chứa những cột mà ta muốn thể hiện trên trang Master.

- “Detail Page Fields” chứa những cột mà ta muốn thể hiện trên trang Detail.

- “Detail Page Name” là trang Detail, trang này sẽ được tạo tự động do đó chỉ cần nhập vào một tên file mà ta dự định làm trang detail.

- Sau đó nhấn OK. Sẽ có 2 trang Web được tạo là trang Master và trang Detail. Trong đó trang Detail sẽ có dạng như sau:

- Tiến hành hiệu chỉnh theo mong muốn (xem thêm ở phần tạo form hiển thị dạng bảng). Sau khi tạo xong ta có cấu trúc như hình sau:

- Trang Insert có dùng một list box để liệt kê các nhà cung cấp (liệt kê tên, lưu bằng mã). Ảnh của điện thoại là một file đươc lấy từ một cửa sổ file.

- Các bước thực hiện:

Tạo recordset nhà cung cấp (supplier)
Tạo Insertion Form
Hiệu chỉnh

- Tạo Danh sách liệt kê nhà cung cấp (supplier) - hình dưới.

- Trên trang Insert, đặt con trỏ tại ví trí mà ta muốn tạo form nhập liệu → vào menu Insert / Application Objects / Record Insertion Form→ hộp thoại Record Insertion Form xuất hiện. Tiến hành khai báo các thuộc tính như trong hình dưới.

→ Trong đó: “After Inserting, go to” là trang mà chúng ta sẽ cho hiển thị thông báo sau khi insert thành công.

Trong phần Form fields → tiến hành chọn các thuộc tính:

Column	Label	Display As	Ghi chú
Mcode	Mobile Code	Text Field
Scode	Suplier	menu	*
Mname	Name	Text Field
DNotice	Date of Notice	Text Field
Price	Price	Text Field
Image	Photograph	Text Field	(chỉnh tag HTML → input type=”file”)

* Cách thực hiện menu Scode như sau:

Trong hình dưới, Chọn “Display As” cho Scode là menu, sau đó click vào “Menu Properties” → cửa sổ “Menu Properties” xuất hiện, tiến hành khai báo như hình sau:

- Click vào nút lệnh “OK” để trở về cửa sổ hình trên.

- Tiến hành hiệu chỉnh ta được màn hình Insert như hình sau.

Khi insert ảnh, nên sử dụng đường dẫn tương đối bằng cách xoá thư mục gốc.

D:InetpubwwwrootProjectImages6110.gif → Images6110.gif

Gồm 2 bước:

Tạo trang search
Tạo trang hiển thị kết quả

Tạo trang Search

- Tạo giao diện vào lưu file (Update.asp)

- Tạo Recordset “mcode” dùng để truy xuất tên và code của Mobile cần cập nhật

form có các thuộc tính sau:

Đặt tên cho menu là MobileCode, giá trị được lấy từ Recordset “mcode” như sau:

Chọn vào menu vừa tạo → Properties của menu hiển thị như hình sau:

Chọn “Dynamic” → hộp thoại xuất hiện

Chọn các thuộc tính như hình trên → OK để hoàn tất.

Tạo trang hiển thị kết quả (Update_detail.asp)

- Tạo Recordset “update” từ bảng Mobile, khai báo các thuộc tính như hình sau:

- Trên trang Update_Detail, đặt con trỏ tại ví trí mà ta muốn tạo form nhập liệu → vào menu Insert / Application Objects / Record Update Form→ hộp thoại Record Update Form xuất hiện

- Tiến hành chọn lựa các thuộc tính như ở form Insert → Click vào nút lệnh “OK” để kết thúc.

- Sau đó hiệu chỉnh để có giao diện như hình sau:

Gồm 2 bước:

Tạo trang chứa (trang HTML) gồm 2 frame: masterFrame, detailFrame.
Tạo trang search, hiển thị trong frame masterFrame
Tạo trang HTML để hiển thị khi chưa có kết quả tìm
Tạo trang chi tiết, hiển thị trong frame detailFrame khi tìm thấy dữ liệu.

→ Thực chất là ta vẫn tạo một form tìm kiếm và một form để hiển thị chi tiết, nhưng khác ở chỗ là cả 2 form này đều được hiển thị trên cùng một trang chứa gồm 2 frame.

Tạo trang chứa (Update.htm)

Tạo trang Search (UpdateMaster.asp)

form có các thuộc tính sau:

Thuộc tính target: là “detailFrame” (phải tự nhập vào vì không có trên list box)

Đặt tên cho menu là MobileCode, giá trị được lấy từ Recordset “mcode” (xem phần Tạo form cập nhật dạng Master-Detail)

Tạo trang hiển thị khi chưa có dữ liệu (UpdateDetail.htm)

Tạo trang hiển thị chi tiết (UpdateDetail.asp)

Trang này đã được tạo trong phần tạo trang Update dang Master-Detail ở trên (hình trên)

Sau khi thực hiện xong ta có trang chứa (Update.htm) như hình 54. Khi chọn vào menu, và click vào nút Submit → form Update_Detail.asp sẽ hiển thị vào frame detailFrame phí dưới.