Bài giảng Lập trình Web - Bài 8: Xây dựng hoàn chỉnh ứng dụng Web

Nội dung text: Bài giảng Lập trình Web - Bài 8: Xây dựng hoàn chỉnh ứng dụng Web

1. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC a - Tek Ngành lập trình - CSDL 1
2. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Mục tiêu • Tạo cấu trúc nhất quán các trang trong một website • Sử dụng thành thạo Themes • Hiểu và sử dụng điều khiển Menu, TreeView a - Tek Ngành lập trình - CSDL 2
3. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Master Pages 2. Themes và Skin 3. Site Navigation Controls a - Tek Ngành lập trình - CSDL 3
4. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Master Pages • Giới thiệu • Tạo Master Pages • Tham chiếu thuộc tính và điều khiển của trang Master từ trang Content • Master động a - Tek Ngành lập trình - CSDL 4
5. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Master Pages • Giới thiệu - Master Pages cho phép tạo ra một bố cục nhất quán trên các trang web trong cùng một Web site (tương tự Template) - Nội dung thể hiện trên trình duyệt chính là sự kết hợp giữa trang master (Master page) và trang aspx (Content page) a - Tek Ngành lập trình - CSDL 5
6. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM Master Page TRUNG TÂM TIN HỌCContent Page Resulting Page (Trang kết quả) a - Tek Ngành lập trình - CSDL 6
7. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Master Pages • Giới thiệu - Master Pages gồm 2 phần chính: • Master page Ø Dùng để xây dựng một bố cục chung cho Web site Ø Tập tin lưu trữ có phần mở rộng là .master Ø Thay thế tag định hướng bằng tag Ø Thao tác thiết kế: giống trang .aspx, nhưng phải bổ sung ít nhất một điều khiển ContentPalceHolder Minh họa a - Tek Ngành lập trình - CSDL 7
8. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Master Pages • Giới thiệu - Master Pages gồm 2 phần chính: • Content page: chính là trang .aspx nhưng có các đặc điểm sau Ø Bổ sung thuộc tính MasterPageFile=“Tên tập tin master” trong định hướng Ø Không chứa các tag tạo ra cấu trúc trang HTML Ø Chứa tag : số lượng tag này tùy thuộc vào trang master được kết hợp Ø Chỉ được phép tạo nội dung trong tag Minh họa a - Tek Ngành lập trình - CSDL 8
9. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Master Pages Code trong cửa sổ Source Minh họa a - Tek Ngành lập trình - CSDL 9
10. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Master Pages • Các bước tạo - Bước 1: tạo trang Master chọn icon - Bước 2: thiết kế bố cục chung và bổ sung điều khiển ContentPlaceHolder vào trang Master - Bước 3: tạo trang Content và khai báo trang Master - Bước 4: thiết kế nội dung trên trang Content Minh họa a - Tek Ngành lập trình - CSDL 10
11. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Master Pages • Tham chiếu thuộc tính trên trang Master - Bước 1: tạo thuộc tính (Public) trong trang Master - Bước 2: bổ sung định hướng .master" %> trong trang Content - Bước 3: trong trang Content, tại sự kiện Page_Load ta tham chiếu đến thuộc tính như sau: Master. Minh họa a - Tek Ngành lập trình - CSDL 11
12. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Master Pages • Tham chiếu điều khiển trên trang Master - Sử dụng phương thức FindControl tại sự kiện Page_Load của trang Content Master.FindControl(“tên control”) Ví dụ: điều khiển Nhan_Master trên trang Master Label2.Text = ((Label) Master.FindControl("Nhan_Master")).Text; Minh họa a - Tek Ngành lập trình - CSDL 12
13. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Master Pages • Master động – Dynamic Master - Thay đổi trang Master lúc thực thi - Tại sự kiện PreInit của trang Content, khai báo như sau: Page.MasterPageFile =“tên tập tin Master” Minh họa a - Tek Ngành lập trình - CSDL 13
14. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Master Page 2. Themes và Skin 3. Site Navigation Controls a - Tek Ngành lập trình - CSDL 14
15. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Themes và Skin • Giới thiệu • Tạo Themes • Sử dụng Themes • Themes động a - Tek Ngành lập trình - CSDL 15
16. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Giới thiệu - Themes là tập hợp các khai báo thuộc tính về hình thức hiển thị (màu sắc, nét chữ , ) của điều khiển - Dùng để áp dụng chung cho tất cả các trang trong một ứng dụng hoặc tất cả các ứng dụng trên Web server - Themes được hiểu và xử lý ở phía Server a - Tek Ngành lập trình - CSDL 16
17. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Giới thiệu - Themes được tạo ra từ các thành phần: Skins, CSS, Images và các nguồn khác nhưng tối thiểu phải có Skins - Tất cả các thành phần trên được đặt trong thư mục App_Themes a - Tek Ngành lập trình - CSDL 17
18. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Giới thiệu q Skins: - Là một tập tin có phần mở rộng là .skin, chứa các tag tạo ra các Server Control kèm theo các khai báo thuộc tính Ví dụ: skin Lưu ý: không khai báo thuộc tính ID trong skin a - Tek Ngành lập trình - CSDL 18
19. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Giới thiệu q Skins: - Có 2 loại skin: § Default skin : không khai báo thuộc tính SkinId, và mặc định ứng dụng sẽ áp dụng skin này cho tất các điều khiển có cùng kiểu khai báo § Named skin : có khai báo thuộc tính SkinId, muốn sử dụng thì phải khai báo tường minh thuộc tính SkinId trên một điều khiển cụ thể a - Tek Ngành lập trình - CSDL 19
20. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Giới thiệu q Skins: - Có 2 loại skin: Ví dụ: khai báo trong tập tin .skin //defaut skin //named skin a - Tek Ngành lập trình - CSDL 20
21. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Tạo Themes - Thao tác Minh họa a - Tek Ngành lập trình - CSDL 21
22. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Tạo Themes - Tổ chức thư mục lưu trữ Ứng dụng có 3 Themes Minh họa a - Tek Ngành lập trình - CSDL 22
23. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Sử dụng Themes - Cấp ứng dụng: áp dụng cho tất cả các trang. Khai báo trong tập tin Web.config Ví dụ: a - Tek Ngành lập trình - CSDL 23
24. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Sử dụng Themes - Cấp trang – page Themes: áp dụng cho một trang cụ thể. Khai báo trong tag định hướng của trang .aspx Ví dụ: • Cú pháp này làm thay đổi định dạng riêng của điều khiển a - Tek Ngành lập trình - CSDL 24
25. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Sử dụng Themes - Cấp trang – page Themes: áp dụng cho một trang cụ thể. Khai báo trong tag định hướng của trang .aspx Ví dụ: • Cú pháp này không làm thay đổi định dạng riêng của điều khiển Minh họa a - Tek Ngành lập trình - CSDL 25
26. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Sử dụng Themes - Hủy bỏ Themes: • Muốn huỷ bỏ Themes ở cấp ứng dụng cho một trang cụ thể, ta sử dụng thuộc tính EnableTheming trong • Muốn hủy bỏ Themes cho riêng một điều khiển, ta khai báo thuộc tính EnableTheming là false a - Tek Ngành lập trình - CSDL 26
27. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Sử dụng Themes - Khai báo skin cụ thể cho một điều khiển: • Muốn xác định skin cụ thể (không sử dụng skin mặc định của Themes hiện hành), ta khai báo thuộc tính SkinId a - Tek Ngành lập trình - CSDL 27
28. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Themes động – Dynamic Themes - Sử dụng sự kiện Page_PreInit của trang - Thay đổi Themes: protected void Page_PreInit( ) { Page.Theme = “tên Theme"; } a - Tek Ngành lập trình - CSDL 28
29. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Themes và Skins • Themes động – Dynamic Themes - Thay đổi SkinId của Theme hiện hành: protected void Page_PreInit( ) { .SkinID = “gía trị SkinId”; } Ví dụ: thay đổi skin của TreeView Caythucdon, tên skin là giá trị được chọn từ DropDownList1 protected void Page_PreInit( .) { Caythucdon.SkinID = Request.Form["DropDownList1“] ; } a - Tek Ngành lập trình - CSDL 29
30. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Master Page 2. Themes và Skin 3. Site Navigation Controls a - Tek Ngành lập trình - CSDL 30
31. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Site Navigation Controls • Giới thiệu • Sử dụng các Navigation Controls: Menu, TreeView và SiteMapPath • Điều khiển SiteMapDataSource a - Tek Ngành lập trình - CSDL 31
32. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • Giới thiệu - Dùng để chuyển đến (navigate) một trang web khác và thể hiện cấu trúc logic của Web site (site map) - Gồm các điều khiển: Menu, TreeView, SiteMapPath kết hợp với SiteMapDataSource - Các điều khiển này thường được sử dụng trong trang Master a - Tek Ngành lập trình - CSDL 32
33. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • Menu - Dùng để thể hiện thực đơn và cho phép người dùng chuyển đến một trang web khác khi chọn một chức năng - Thao tác tạo: chọn thuộc tính • Items: khai báo các chức năng trên thực đơn a - Tek Ngành lập trình - CSDL 33
34. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • Menu - Thao tác tạo: Minh họa a - Tek Ngành lập trình - CSDL 34
35. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • TreeView - Dùng để thể hiện thực đơn có dạng cây và cho phép người dùng chuyển đến một trang web khác khi chọn một node - Thao tác tạo: chọn thuộc tính • Nodes: khai báo các chức năng trên thực đơn a - Tek Ngành lập trình - CSDL 35
36. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • TreeView - Thao tác tạo: Minh họa a - Tek Ngành lập trình - CSDL 36
37. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • SiteMapPath - Dùng để thể hiện cấu trúc logic của website và cho phép người dùng chuyển đến một trang web khác - Nội dung cấu trúc của website mặc định được chứa trong tập tin Web.sitemap - Nếu nội dung cấu trúc nằm trong tập tin ???.sitemap (không phải Web.sitemap), thì phải định nghĩa SiteMapProvider trong tập tin Web.config a - Tek Ngành lập trình - CSDL 37
38. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • SiteMapPath - Các bước tạo: • Bước 1: tạo tập tin Web.sitemap a - Tek Ngành lập trình - CSDL 38
39. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • SiteMapPath Lưu ý: chỉ được phép có một siteMapNode gốc Minh họa a - Tek Ngành lập trình - CSDL 39
40. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • SiteMapPath - Các bước tạo: Bước 2 và 3 chỉ dành cho tập tin ???.sitemap (khác Web.sitemap) • Bước 2: khai báo SiteMapProvider trong tập tin Web.config Minh họa a - Tek Ngành lập trình - CSDL 40
41. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • SiteMapPath - Các bước tạo: • Bước 3: tạo điều khiển SiteMapPath, khai báo thuộc tính SiteMapProvider là “tên SiteMapProvider” đã khai báo trong tập Web.config Minh họa a - Tek Ngành lập trình - CSDL 41
42. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • SiteMapDataSource - Dùng để chứa nguồn dữ liệu được lưu trữ trong tập tin .sitemap - Nguồn dữ liệu mặc định là tập tin Web.sitemap - Thường sử dụng kết hợp với các điều khiển Menu và TreeView a - Tek Ngành lập trình - CSDL 42
43. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • SiteMapDataSource - Các thuộc tính: • SiteMapProvider: tên SiteMapProvider đã khai báo trong tập tin Web.config. Nếu nguồn là Web.sitemap thì không không cần khai báo thuộc tính này • ShowStartingNode(True/False): bắt đầu bằng siteMapNode gốc hay không • SiteMapProvider: tên SiteMapProvider • StartingNodeUrl: địa chỉ URL cho node bắt đầu Minh họa a - Tek Ngành lập trình - CSDL 43
44. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web Site Navigation Controls • SiteMapDataSource - Liên kết với Menu và TreeView: • Sử dụng thuộc tính DataSourceID của 2 điều khiển trên, giá trị của thuộc tính là ID của SiteMapDataSource Minh họa a - Tek Ngành lập trình - CSDL 44
45. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 8: Xây dựng hoàn chỉnh ứng dụng web HẾT a - Tek Ngành lập trình - CSDL 45