Bài 4: Xây dựng trang chủ cho từng lĩnh vực

Bài 4: Xây dựng trang chủ cho từng lĩnh vực 1. Mục đích • Trong bài thực hành này, bạn sẽ làm quen với cách xây dựng một trang web tương tác với CSDL sử dụng SqlDataSource kết hợp DataList. • Xây dựng Trang chủ cho từng lĩnh vực. 2. Yêu cầu • Đã hoàn tất bài thực hành 2, xây dựng trang chủ bản tin điện tử. • Đã nắm bắt được cách thức kết nối CSDL sử dụng SqlDataSource 3. Vấn đề liên quan • Thiết kế CSDL bằng SQL Server. • Đọc và hiển thị thông tin từ CSDL lên DataList (SqlDataSource với DataList). 4. Thời gian để hoàn tất bài thực hành: • 120 phút 1 Thiết kế giao diện 1. Thiết kế Form theo mẫu dưới đây (Trang chủ lĩnh vực Xã hội) 2. Xây dựng Trang chủ Lĩnh vực Xã hội Thêm trang XaHoi.aspx kế thừa từ trang MasterPage (trang cha) như sau: • Menu Website – Add New Item • Template : Webform • Name : XaHoi.aspx • Chọn “Select master page” 2 3. Tạo hiển thị tóm tắt các bản tin thuộc lĩnh vực Xã hội • Sử dụng DataList Control: o Từ ToolBox – kéo control DataList vào trang XaHoi.aspx o Đặt tên cho DataList là dataListTomTatTinTuc • Sử dụng SqlDataSource o Từ cửa sổ Toolbox, kéo thả đối tượng SqlDataSource vào Web Form. 3 o Kết nối đến CSDL WebNews(sử dụng lại connectionString đã tạo ở bài 3) o Chọn Specify a custom SQL statement or stored procedure o Sử dụng Query Builder để tạo câu lệnh như sau: 4 • Vào Property của dataListTomTatTinTuc chọn DataSourceID bằng SqlDataSource1 • Nhấn chuột phải vào dataListTomTatTinTuc và chọn Edit Template > Item Templates từ pop-up menu. • Xóa tất cả nội dung trong Item Template. Vào Layout – Insert Table (có thuộc tính Width = 100%), thêm vào các control theo mẫu sau : 5 o Thiết lập thuộc tính cho các control theo bảng sau: Font Size Font Bold Font Color Hyperlink1 Small True Maroon Label1 Small DimGray Label2 Small o Phải chuột vào [HyperLink] chọn EditDataBinding  Bindable Properties : Text  Field binding – Bound to : TieuDe o Phải chuột vào [Label1] chọn EditDataBinding o Phải chuột vào [Image] chọn EditDataBinding 6 o Phải chuột vào [Label2] chọn EditDataBinding • Copy các hình ảnh trong thư mục Resources vào thư mục upload của project. • Chạy và Kiểm tra chương trình. ******Hết****** 7 . Bài 4: Xây dựng trang chủ cho từng lĩnh vực 1. Mục đích • Trong bài thực hành này, bạn sẽ làm quen với cách xây dựng một trang web tương. SqlDataSource kết hợp DataList. • Xây dựng Trang chủ cho từng lĩnh vực. 2. Yêu cầu • Đã hoàn tất bài thực hành 2, xây dựng trang chủ bản tin điện tử. • Đã nắm