Giáo trình Thiết kế web: Phần 2 - Trường ĐH Công nghiệp Quảng Ninh

Phần 2 của giáo trình "Thiết kế web" tiếp tục cung cấp cho học viên những nội dung về: tạo và sử dụng User Custom Control (UCC); thiết kế Website với MasterPage; ASP.NET và cơ sở dữ liệu; xây dựng ứng dụng Website bằng ASP.NET;... Mời các bạn cùng tham khảo!
Nội dung trích xuất từ tài liệu:
Giáo trình Thiết kế web: Phần 2 - Trường ĐH Công nghiệp Quảng Ninh CHƯƠNG 3: TẠO VÀ SỬ DỤNG USER CUSTOM CONTROL (UCC) 3.1. Giới thiệu User Custom Control Visual studio cung cấp cho chúng ta rất nhiều các điều khiển để phát triển ứng dụng gọi là điều khiển nội tại (Instrict control). Ngoài ra, nó còn cung cấp cho chúng ta khả năng tự xây dựng các điều khiển tùy biến nếu các điều khiển hiện hành không đáp ứng được yêu cầu. Ví dụ: Nếu ứng dụng của bạn cần chiếc máy tính (Calculator) ở rất nhiều trang thì giải pháp tốt nhất là tạo một điều khiển Calculator riêng thay việc kết hợp các điều khiển truyền thống, khi đó ta có thể sử dụng điều khiển này trong toàn bộ ứng dụng. Chương này sẽ hướng dẫn cách tạo và sử dụng điều khiển do lập trình viên tự xây dựng – hay còn gọi là điều khiển tùy biến (Custom Control). Tiếp theo sẽ minh họa thêm một số ví dụ về tạo điều khiển tùy biến để người đọc hiểu rõ hơn. Thực chất của User Custom Control (UCC) chính là một 'trang con', trong đó có thể chứa bất kỳ nội dung nào (trừ các thẻ ,, vì một trang chỉ có duy nhất một lần xuất hiện các thẻ này) . 'Trang con' này sau đó có thể được chèn (Include) vào các trang khác để sử dụng. Khi muốn cập nhật nội dung ở tất cả các trang, ta chỉ việc sửa đổi duy nhất UCC ban đầu. Khả năng này của ASP.NET giúp chúng ta xây dựng ứng dụng nhanh hơn, dễ bảo trì hơn. Mỗi một UCC được đặt trong một trang có phần mở rộng là *.ascx. File này có đặc điểm là không truy cập trực tiếp từ trình duyệt mà chỉ được chèn vào các trang aspx. UCC: là trang ASP.NET nhưng nó được sử dụng giống như các điều khiển khác như: label, TextBox, CheckBox,…Nó được sử dụng dưới dạng Control mà không trực tiếp thực thi giống như trang ASP.NET. UCC sau khi thiết kế có thể kéo thả vào trang ASP.NET giống như các điều khiển label, TextBox, CheckBox,… 3.2. Các bước tạo User Custom Control Việc thực hiện tạo User custom control trải qua 3 bước chính như sau: Bước 1: Thêm một web form vào Project hiện hành Vào menu [Website], chọn [Add new item]. Chọn loại Web user control Đặt tên cho web user control. Bước 2: Soạn nội dung của trang. - Chế độ: Source - Chế độ: Design Bước 3: Lưu lại nội dung của trang. *** Một số điểm cần lưu ý khi tạo UCC: - Trang UCC cũng có trang Code C# tương ứng là : .ascx.cs - Đầu trang ascx, thay vì viết chỉ dẫn + Tạo 1 Table: 1 cột, 11 hàng, độ rộng của table là Width:100% + Dòng đầu tiên (ô) của bảng: chọn nền cho ô, gõ vào nội dung: “CHỦ ĐỀ SÁCH” + Dòng thứ hai gõ như hình trên (Mỗi mục là 1 HyperLink) .. + Dòng thứ mười (ô) của bảng: chọn nền cho ô, gõ vào nội dung: “ĐĂNG NHẬP” + Các dòng tiếp theo soạn như hình trên + Chọn viền Border cho Table như hình dưới - Kết quả khi thiết kế xong - Thiết kế trang Default.aspx + Thiết kế trang Default.aspx như bảng dưới, chèn 1 Table, thiết lập độ rộng Width:100% Width: giữ nguyên Chỉnh kích thước ô Chỉnh kích thước ô này có độ rộng khoảng: 75%, này có độ rộng chiều cao không chỉnh khoảng: 25%, chiều cao không chỉnh Width: giữ nguyên => Thiết lập độ rộng 25% của ô như hình dưới + Sau khi thiết kế xong trang Default.aspx, kéo UCC MenuTrai.ascx vào ô đầu tiên của dòng thứ hai của bảng trên, kết quả như hình dưới CÂU HỎI ÔN TẬP CHƯƠNG 3 Bài tập Tạo 1 ứng dụng Website có tên là “WebSach”, trên ứng dụng này thực hiện các yêu cầu sau: 1) Tạo UCC “Banner.ascx” như hình dưới 2) Tạo UCC “MenuNgang.ascx” như hình dưới 3) Tạo UCC “MenuTrai.ascx” như hình dưới 4) Tạo UCC “Footer.ascx” như hình dưới 5) Thiết kế trang “Default.aspx” và kéo các UCC vào các vị trí như hình dưới: Banner.ascx MenuNgang.ascx MenuTrai.ascx Footer.ascx 6) Kết quả chạy trang “Default.aspx” sau khi thiết kế CHƯƠNG 4: THIẾT KẾ WEBSITE VỚI MASTERPAGE 4.1. MasterPage là gì? MasterPage: là trang chính trên website nó cung cấp một giao diện chung nhất trên toàn website. Khi thay đổi nội dung trên Master page thì toàn website sẽ được áp dụng theo. Trên MasterPage thường bao gồm các thành phần sau: - Banner của Website - Menu trái - Nội dung trang - Menu phải - Bottom của Website Page Layout là gì ? Page layout: là các bố cục để thể hiện nội dung trên một page. Page layout được áp dụng cho một trang web. 4.2. Tạo MasterPage Để tạo trang MasterPage, ta tiến hành tuần tự như sau: - Tạo ứng dụng Website có tên là “MinhHoa” - Xây dựng ứng dụng “MinhHoa” trong đó trang Default.aspx, sử dụng MasterPage được thiết kế như hình dưới: - MasterPage được thiết kế như sau: + Trong ứng dụng “MinhHoa” tạo trang MasterPage như sau: chọn Website\Add New Item, xuất hiện cửa sổ như hình dưới: + Chọn MasterPage, click Add + Xóa điều khiển ContentPlaceHolder có đoạn mã sau trong trang MasterPage vừa được tạo ra. + Tiến hành thiết kế MasterPage như yêu cầu + Sau khi thiết kế xong, tại phần nội dung màu trắng trên trang MasterPage, kéo điều khiển ContentPlaceHolder vào. Các trang khác khi sử dụng MasterPage này, thì phần nội dung được soạn thảo sẽ là phần màu trắng mà có chứa điều khiển ContentPlaceHolder này. Kết quả hiển thị như hình dưới sau khi thêm điều khiển ContentPlaceHolder - Áp dụng MasterPage cho trang Default.aspx (các trang khác cũng làm tương tự như vậy) Tạo trang “Default.aspx” áp dụng “MasterPage.master” CÂU HỎI ÔN TẬP CHƯƠNG 4 Bài tập Xây dựng ứng dụng Website “KhoaCNTT”, thực hiện các yêu cầu sau 1) Thiết kế trang MasterPage như hình dưới: 2) Thiết kế trang Default.aspx sử dụng MasterPage như hình dưới: 3) Thiết kế các trang: GioiThieu.aspx, DaoTao.aspx, SinhVien.aspx, TuyenSinh.aspx với nội dung tương ứng, các trang này đều sử dụng MasterPage ...