GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 10 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 Thêm vào div phần bên phải RightCol: Title 20 Aug 2005 :: News Header News text 20 Aug 2005 :: News Header Other news text Thêm vào div phần cuối Footer: Copyright © 2008 by KimSoft GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 11 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 Kết bước sau: KimSoft Login box Theme Selector Site News 20 Aug 2005 :: News Header News text GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 12 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 20 Aug 2005 :: News Header Other news text
Title 20 Aug 2005 :: News Header News text 20 Aug 2005 :: News Header Other news text Copyright © 2008 by KimSoft Tạo file Web.sitemap: Right-click project : KimSoft Chọn : Add New Item Site Map Đặt tên : Web.sitemap Thêm vào file Web.sitemap vừa tạo XML node sau: Thêm file Controls.skin Right-click thư mục: SeaBlue Chọn : Add New Item Skin File Đặt tên : Controls.skin GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 14 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 Hình 05: Tạo file Controls.skin Thêm code vào file Controls.skin sau: Thêm trang Default.aspx Right-click project : KimSoft Chọn : Add New Item Web Form Chọn checkbox : “Select master page” hộp hội thoại “Add New Item” Chọn master page : MasterPage.master GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 15 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 Hình 06: Tạo trang Default.aspx 10 Tạo thư mục Images cho project Right-click project : KimSoft Chọn : New Folder Đặt tên : Images Copy hình ảnh project vào thư mục Images vừa tạo (Từ thư mục Resources) 11 Thêm hình text vào phần ContentPlaceHolder MainContent sau: 12 Áp dụng Theme cho trang: Thay áp dụng Theme cho trang cách thêm trực tiếp vào thuộc tính @Page, thêm vào file web.config, lần áp dụng cho tất trang cách thêm theme="SeaBlue" masterPageFile="~/MasterPage.master" vào tag pages sau: GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 16 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 13 Xố thuộc tính MasterPageFile từ trang Default.aspx Vì đặt tag pages file web.config nên trang không cần đặt MasterPageFile 14 Thêm theme thứ tên Orange Right click project : KimSoft Chọn : Add Folder Theme Folder Đặt tên : Orange 15 Thêm thư mục Images cho Orange Right-click thư mục : App_Themes\ Orange Chọn : New Folder Đặt tên : Images Copy hình theme Orange vào thư mục Images vừa tạo (Từ thư mục Resources) 16 Thêm file Default.css Copy paste file Default.css từ SeaBlue 17 Thêm file Controls.skin Copy paste file controls.skin SeaBlue Chú ý: Ngồi hình ảnh, bạn muốn theme Orange khác theme SeaBlue vị trí, màu sắc, hiệu ứng,…của đối tượng bạn chỉnh sửa file Default.css Controls.skin vừa copy từ theme SeaBlue 18 Tạo thư mục "Controls" cho project Right-click project : KimSoft Chọn : Add Folder Regular folder Đặt tên : Controls 19 Tạo Web User Control ThemeSelector Right-click thư mục : Controls Chọn : Add New Item Web User Control GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 17 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 Đặt tên : ThemeSelector.ascx Hình 07: Tạo Web User Control ThemeSelector.ascx 20 Thêm chuỗi “Theme:” control DropDownList vào ThemeSelector.ascx: Theme: 21 Thêm code cho ThemeSelector.ascx.cs sau: Lấy danh sách cho drop-down list phương thức GetThemes lớp Helper Đặt giá trị mặc định Theme trang namespace KimSoft.UI.Controls { public partial class Controls_ThemeSelector : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { ddlThemes.DataSource = Helpers.GetThemes(); ddlThemes.DataBind(); ddlThemes.SelectedValue = this.Page.Theme; } } } Chú ý: Đặt control ThemeSelector namespace KimSoft.UI.Controls GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 18 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 22 Tạo thư mục App_Code: Right-click project : KimSoft Chọn : Add ASP.NET Folder App_Code 23 Tạo lớp Helpers Right-Click thư mục : App_Code Chọn: Add New Item Đặt tên : Helpers.cs Hình 08: Tạo lớp Helpers.cs 24 Viết code cho lớp Helpers sau: namespace KimSoft.UI { /// /// Đây lớp tĩnh không cần khởi tạo sử dụng /// Bao gồm phương thức (tiện ích) hỗ trợ cho trang, /// đối tượng khác project /// public static class Helpers { /// /// Trả mảng (array) tên theme thư mục App_Theme /// public static string[] GetThemes() { //Trả mảng tên theme lưu Cache // sử dụng từ khoá (key) SiteThemes if (HttpContext.Current.Cache["SiteThemes"] != null) { GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 19 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 return (string[])HttpContext.Current.Cache["SiteThemes"]; } else { //Lấy đường dẫn thư mục App_Themes lưu vào biến themesDirPath string themesDirPath = HttpContext.Current.Server.MapPath("~/App_Themes"); // Lấy mảng thư mục theme thư mục App_Themes theo biến themesDirPath string[] themes = Directory.GetDirectories(themesDirPath); for (int i = 0; i không cần khởi tạo sử dụng /// Lớp lưu trữ biến toàn cục cho ứng dụng /// public static class Globals { //Khai báo khởi tạo biến tĩnh ThemesSelectorID // để lưu lại ID theme hành chọn public static string ThemesSelectorID = ""; } } GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 20 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 28 Quay trở lại ThemeSelector.ascx.cs thêm code để lưu ID theme chọn vào ThemesSelectorID : namespace KimSoft.UI.Controls { public partial class Controls_ThemeSelector : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { //Lưu ID theme chọn từ DropDownListBox ddlThemes if (Globals.ThemesSelectorID.Length == 0) Globals.ThemesSelectorID = ddlThemes.UniqueID; ddlThemes.DataSource = Helpers.GetThemes(); ddlThemes.DataBind(); ddlThemes.SelectedValue = this.Page.Theme; } } } GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 21 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 29 Tạo lớp BasePage thư mục App_Code viết code sau: namespace KimSoft.UI { /// /// Lớp BasePage kế thừa từ System.Web.UI.Page /// Bao gồm phương thức viết chồng (override) lên phương thức có sẵn lớp Page /// Được trang Defalt.aspx, Contact.aspx, About.aspx, kế thừa /// thay phải viết nhiều lần trang /// public class BasePage : System.Web.UI.Page { /// /// Vì project sử dụng nhiều Theme cho phép người dùng /// chọn thay đổi trực tiếp, nên load trang ta cần xử lý /// chọn Theme tương ứng hiển thị cho trang /// protected override void OnPreInit(EventArgs e) { string id = Globals.ThemesSelectorID; if (id.Length > 0) { // Nếu trang khởi tạo kiện postback phát sinh dropdownlist theme, lấy theme chọn sử dụng cho trang if (this.Request.Form[" EVENTTARGET"] == id && !string.IsNullOrEmpty(this.Request.Form[id])) { this.Theme = this.Request.Form[id]; this.Session["CurrentTheme"] = this.Theme; } else { // Nếu kiện postback, hay postback phát sinh control khác thì, đặt theme trang giá trị tìm Session // thơng qua từ khố (key) CurrentTheme if (this.Session["CurrentTheme"] != null) this.Theme = this.Session["CurrentTheme"].ToString(); } } base.OnPreInit(e); } } } 30 Thay đổi code cho trang Default.aspx.cs kế thừa từ lớp BasePage thay System.Web.UI.Page: public partial class _Default : KimSoft.UI.BasePage { protected void Page_Load(object sender, EventArgs e){ } } 31 Chạy kiểm tra chương trình GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 22 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 23 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 32 Thêm vào trang Contact.aspx About.aspx sử dụng MasterPage.master để test Tạo trang Contac.aspx About.aspx Thay đổi code cho trang Contact.aspx.cs About.aspx.cs kế thừa từ lớp BasePage thay System.Web.UI.Page sau: public partial class Contact : KimSoft.UI.BasePage { protected void Page_Load(object sender, EventArgs e){ } } public partial class About : KimSoft.UI.BasePage { protected void Page_Load(object sender, EventArgs e){ } } 33 Thêm static method SetInputControlsHighlight vào lớp Helpers sau: public static class Helpers { public static string[] GetThemes(){…} /// /// Highlight cho input control (control nhập liệu) /// /// /// /// public static void SetInputControlsHighlight(Control container, string className, bool onlyTextBoxes) { foreach (Control ctl in container.Controls) { if ((onlyTextBoxes && ctl is TextBox) || ctl is TextBox || ctl is DropDownList || ctl is ListBox || ctl is CheckBox || ctl is RadioButton || ctl is RadioButtonList || ctl is CheckBoxList) { WebControl wctl = ctl as WebControl; wctl.Attributes.Add("onfocus", string.Format( "this.className = '{0}';", className)); wctl.Attributes.Add("onblur", "this.className = '';"); } else { if (ctl.Controls.Count > 0) SetInputControlsHighlight(ctl, className, onlyTextBoxes); } } } } GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 24 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 34 Để thực thi code kiện Load trang, tạo phương thức “override void OnLoad” lớp BasePage class sau: namespace KimSoft.UI { public class BasePage : System.Web.UI.Page { protected override void OnPreInit(EventArgs e){ } /// // Mỗi load trang thêm kiện onfocus onblur javascripts cho tất input control // để active control có giao diện khác /// protected override void OnLoad(EventArgs e) { Helpers.SetInputControlsHighlight(this, "highlight", false); base.OnLoad(e); } } } 35 Chạy kiểm tra chương trình ***HẾT CHƯƠNG 2*** GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 25 ... Page Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 20 08 and SQLServer 20 05 position: absolute; top: 16px; right: 10px; width: 180px; height: 80px; padding: 2px 2px 2px 2px; font-size:... Page Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 20 08 and SQLServer 20 05 Viết code cho file Default.css sau: body { margin: 0px; font-family: Verdana, Arial, Serif; font-size: 12px;... Page 14 Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 20 08 and SQLServer 20 05 Hình 05: Tạo file Controls.skin Thêm code vào file Controls.skin sau: