Xõy dựng trang Master-Detail Page Set

Một phần của tài liệu Giáo trình thiết kế web (Trang 154 - 158)

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.

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.

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.

Một phần của tài liệu Giáo trình thiết kế web (Trang 154 - 158)

Tải bản đầy đủ (PDF)

(166 trang)