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

Chia sẻ: Dương Hàn Thiên Băng | Ngày: | Loại File: PDF | Số trang:72

Thêm vào BST

Báo xấu

31
lượt xem 9
download

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

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!

Chủ đề:

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

Lưu

Nội dung Text: 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 ở trên.
CHƯƠNG 5: ASP.NET VÀ CƠ SỞ DỮ LIỆU 5.1. Cơ sở dữ liệu SQL Server Cơ sở dữ liệu được dùng để minh họa cho ứng dụng ASP.NET là SQL Server 1) Tạo CSDL cho ứng dụng - Trong SQL Server, tạo CSDL có tên là “SachOnline”, tạo 3 table: Sach, TheLoai, NguoiDung. - Table “Sach” có cấu trúc như sau:
- Table “TheLoai” có cấu trúc như sau: - Table “NguoiDung” có cấu trúc như sau:
2) Thực hiện sao lưu (Back up) hoặc khôi phục (Restore) nếu đã có bản sao lưu - Thực hiện các bước khôi phục (Restore) như hình dưới
- Thực hiện các bước sao lưu (Back Up) như hình dưới
5.2. Các bước cần thực hiện trước khi thao tác với cơ sở dữ liệu Bước 1: Tạo ứng dụng Website - Tạo ứng dụng Website có tên là “”WebSach” * Bước 2: Tạo một thư mục tại bất kỳ vị trí nào trên máy có tên là “WebSach” để lưu ứng dụng Website này. (chẳng hạn: D:\WebASP\WebSach) - Mở Visual Studio để tạo ứng dụng “WebSach” * Bước 3: Tạo đường dẫn đến thư mục “WebSach” như hình dưới: * Bước 4: Tạo các trang để sử dụng cơ sở dữ liệu “SachOnline”.
5.3. Công nghệ ADO.NET Khi phát triển các ứng dụng trên nền web thì công việc chủ yếu phải giải quyết là xử lý các nghiệp vụ, trong đó phần lớn là xử lý Cơ sở dữ liệu. Trong môi trường phát triển Microsoft .NET tất cả các ứng dụng webform hay winform đều thống nhất sử dụng chung một bộ thư viện để truy xuất và thao tác Cơ sở dữ liệu gọi là ADO.NET (Active Data Object). - ADO.NET là một tập các lớp nằm trong bộ thư viện lớp cơ sở của .NET Framework, cho phép các ứng dụng windows (như C#, VB.NET) hay ứng dụng web (như ASP.NET) thao tác dễ dàng với các nguồn dữ liệu. - Mục tiêu chính của ADO.NET là: + Cung cấp các lớp để thao tác CSDL trong cả hai môi trường là phi kết nối (Disconected data) và kết nối (Connected data). + Tích hợp chặt chẽ với XML (Extensible Markup Language) + Tương tác với nhiều nguồn dữ liệu thông qua mô tả dữ liệu chung. + Tối ưu truy cập nguồn dữ liệu (OLE DB & SQL server). + Làm việc trên môi trường Internet. - Các lớp của ADO.NET được đặt trong Namespace là System.Data/ System.Data.oledb - ADO.NET bao gồm 2 Provider (2 bộ thư viện thường dùng) để thao tác với các CSDL là: OLE DB Provider (nằm trong System.Data.OLEDB) dùng để truy xuất đến bất kỳ CSDL nào có hỗ trợ OLEDB; SQL Provider (nằm trong System.Data.SQLClient) chuyên dùng để truy xuất đến CSDL SQL Server (Không qua OLE DB nên nhanh hơn). Hiện nay, các hãng thứ ba còn cung cấp các Provider khác như : MySQL, Oracle… provider để cho phép ứng dụng .NET truy xuất đến các cơ sở dữ liệu không phải của Microsoft khác.