Lab 7: Tạo trang tóm tắt tin tức

Chia sẻ: Nong Mai Thang | Ngày: | Loại File: PDF | Số trang:13

Thêm vào BST

Báo xấu

282
lượt xem 100
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Mục tiêu: Sử dụng Master page để tạo phần layout của trang web tin tức Sử dụng SQLDataSource để kết nối với bảng dữ liệu tin tức trong SQL Server Sử dụng DataList để hiển thị tóm tắt các tin tức. Nội dung: Tiếp tục phát triển bài Lab 6 trong buổi trước, trong bài lab 6 chỉ xây dựng layout của trang tin tức, cụ thể là phần master page, còn các trang nội dung từng chuyên mục như game online, game PC, game console… thì chưa có nội dung. Trong bài Lab 7 này chúng ta sẽ xây dựng...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Lab 7: Tạo trang tóm tắt tin tức

Lập trình ASP.NET Khoa CNTT Lab 7: TẠO TRANG TÓM TẮT TIN TỨC Mục tiêu Sử dụng Master page để tạo phần layout của trang web tin tức Sử dụng SQLDataSource để kết nối với bảng dữ liệu tin tức trong SQL Server Sử dụng DataList để hiển thị tóm tắt các tin tức Bài 7.1: Tạo trang tóm tắt tin tức Nội dung: - Tiếp tục phát triển bài Lab 6 trong buổi trước, trong bài lab 6 chỉ xây dựng layout của trang tin tức, cụ thể là phần master page, còn các trang nội dung từng chuyên mục như game online, game PC, game console… thì chưa có nội dung. - Trong bài Lab 7 này chúng ta sẽ xây dựng trang GameOnline.aspx, trang này chứa toàn bộ các tin tức tóm tắt của chuyên mục GameOnline, trang này được gọi từ menu trái, mục GameOnline. - Giao diện cuối cùng của trang GameOnline.aspx thể hiện như sau. Hình 1: Giao diện của ứng dụng ở chuyên mục GameOnline 1
Lập trình ASP.NET Khoa CNTT Hướng dẫn: 1. Sinh viên mở lại project của bài Lab 6 (đã làm xong phần master page của trang) 2. Tạo Database đơn giản chứa tin tức game có tên TinTucGame, có một table có tên BanTin có cấu trúc như sau: Hình: Cấu trúc của bảng BanTin Tên trường Kiểu Diễn giải MaBanTin Int, tự động tăng TieuDe nvarchar(255) Tiêu đề của bạn tin NDTomTat nvarchar(255) Nội dung tóm tắt của bản tin NoiDung ntext Nội dung chính của bản tin NgayDang datetime Ngày đăng tin HinhAnh nvarchar(50) Chứa tên file minh họa trong bản tin MaTheLoai nchar(2) Mã của bản tin: -‘GO’: game online ‘PC’: game PC 2
Lập trình ASP.NET Khoa CNTT ‘SC”: game console ‘MB’: game mobile ‘ES” eSport Bảng mô tả chi tiết các trường dữ liệu của bảng BanTin. Hình: Minh họa phần dữ liệu của bảng BanTin 3. Tạo trang tóm tắt tin: trang mới có tên GameOnline.aspx khai báo sử dụng master page. 3
Lập trình ASP.NET Khoa CNTT Hình 2: Tạo trang GameOnline.aspx Hình 3: Chọn Master Page cho GameOnline.aspx Ta chuyển sang màn hình design của trang GameOnline Hình 4: Màn hình design của trang GameOnline.aspx 4
Lập trình ASP.NET Khoa CNTT 4. Tạo DataSource cho trang web - Kéo thả SqlDataSource vào vùng content của trang Hình: Kéo DataSource thả vào trang web 5. Chọn phần cấu hình Configure Data Source Hình: Chọn chức năng cấu hình data source Trong màn hình Choose your data connection 5
Lập trình ASP.NET Khoa CNTT Hình: Chọn database Trong màn hình Configure the Select Statement chọn: Specify a custom SQL statement or stored procedure. 6
Lập trình ASP.NET Khoa CNTT Hình: Màn hình chọn câu lệnh select để truy vấn database Trong màn hình Define Custom Statements or Stored Procedures: nhập câu truy vấn để lấy các bản tin thuộc game online 7
Lập trình ASP.NET Khoa CNTT Hình: Nhập câu truy vấn Bước cuối cùng là màn hình Test Query. 8
Lập trình ASP.NET Khoa CNTT Hình: Màn hình Test Query 6. Sử dụng DataList để hiển thị các tin tức tóm tắt của thể loại Game Online. Kéo thả DataList vào phần nội dung của trang web. 7. Khai báo DataSource cho DataList liên kết đến DataSource đã tạo trong bước trước Hình chọn DataSource 9
Lập trình ASP.NET Khoa CNTT 8. Bước tiếp theo chọn Edit Templates để chỉnh lại phần hiển thị bản tin tóm tắt Hình: Chọn Edit Template 9. Trong màn hình edit template: thực hiên các bước sau a. Xóa hết các template cũ, b. Tạo bảng bên trong template, c. Kéo Hyperlink, 2 label và image vào các vị trí tương ứng trong bảng. 10
Lập trình ASP.NET Khoa CNTT Hình tạo lại phần thể hiện của DataList 10. Kết buộc phần dữ liệu từ data source lên các control a. Kích vào hyperlink hiển thị tiêu đề, chọn edit databindings… Phần databinding cho hyperlink tiêu đề 11
Lập trình ASP.NET Khoa CNTT b. Khai báo data binding cho label hiển thị ngày đăng tin c. Khai báo data binding cho image hiển thị hình minh họa 12
Lập trình ASP.NET Khoa CNTT d. Khai báo data binding cho label hiển thị tóm tắt bản tin 11. Đã hoàn tất xong bước khai báo các phần dữ liệu sẽ hiển thị trên datalist, để cho từng mục tin hiển thị dễ xem hơn, sinh viên có thể bổ sung thêm đường ngang sau mỗi tin, bằng cách thêm tag dưới cùng trong phần edit template của DataList. 12. Sinh viên nhập một số dữ liệu thử nghiệm cho database bản tin, có thể lấy từ các trang tin tức game. Tạo thư mục Upload để lưu các file ảnh. 13. Cuối cùng test trang web trong trình duyệt. Bài 7.2: - Sinh viên thiết kế các trang còn lại: GamePC, GameConsole, GameMobile, GameESport - Thiết kế lại template cho DataList theo ý của sinh viên. =oOo= 13