Building CMS E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 - Chương 2 pps

25 430 1
Building CMS E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 - Chương 2 pps

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 Chương Tạo website xây dựng phần giao diện *** Tạo web site KimSoft (sử dụng Visual Studio NET 2008) sau:  Từ menu bar, chọn: File  New  Web Site  Chọn Templates: ASP.NET Web Site  Chọn version NET Framework : NET Framework 3.5  Chọn Location: File System  Chọn Language: Visual C# Hình 01: Tạo website KimSoft Xoá trang Default.aspx:  Right-click trang Default.aspx chọn delete để xoá (Chúng ta tạo lại trang Default.aspx sau tạo trang “master page”) GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 Tạo trang MasterPage.master:  Từ menu bar, chọn : Website  Add New Item  AJAX Master Page  Đặt tên : MasterPage.master Hình 02: Tạo trang MasterPage.master Tạo theme SeaBlue:  Tạo thư mục theme SeaBlue:  Right-click project : KimSoft  Chọn : Add ASP.NET Folder  Theme  Đặt tên : SeaBlue GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 Hình 03: Tạo theme SeaBlue  Tạo thư mục Images cho theme SeaBlue  Right-click thư mục : App_Themes\SeaBlue  Chọn : New Folder  Đặt tên : Images  Copy hình ảnh theme SeaBlue vào thư mục Images vừa tạo (Từ thư mục Resources)  Tạo file Default.css cho theme SeaBlue  Right-click thư mục : App_Themes\SeaBlue  Chọn : Add New Item Style Sheet  Đặt tên : Default.css Hình 04: Tạo file Default.css cho theme SeaBlue GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005  Viết code cho file Default.css sau: body { margin: 0px; font-family: Verdana, Arial, Serif; font-size: 12px; } /* Phần Header bên trái (có logo) -Lấy kích thước thật 718x182 */ #subheader { padding: 0px; margin: 0px; width: 718px; height: 182px; background-image: url(images/HeaderLeft.jpg); } /* Phần Header -Tiếp theo hình Header.jpg -Với width: 100% lắp đầy khoảng trống lại #header { padding: 0px; margin: 0px; width: 100%; height: 182px; background-image: url(images/HeaderRight.jpg); } */ /* Phần Header Menu Home|Store|Forum| */ #headermenu { position: relative; top: 160px; left: 205px; width: 500px; padding: 2px 2px 2px 2px; text-transform: uppercase; } /* Phần Header Menu Home|Store|Forum| Trạng thái thông thường */ headermenulink a { text-decoration: none; color:Orange; } /* Phần Header Menu Home|Store|Forum| Trạng hái chuột hover */ headermenulink a:hover { text-decoration: underline overline; color:Highlight; font-weight:bold; } /* Phần login box (Đăng nhập, thông tin, trang thái người dùng) #loginbox { GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com */ Page Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 position: absolute; top: 16px; right: 10px; width: 180px; height: 80px; padding: 2px 2px 2px 2px; font-size: 9px; } /* Phần Theme -Cho phép chọn theme động */ #themeselector { position: absolute; text-align: right; top: 156px; right: 0px; width: 180px; height: 80px; padding: 2px 0px 2px 2px; font-size: 9px; } /* Phần bên trái -Sau trừ chiều cao Header Baner (top: 12px, width: 200px (fix)) */ #leftcol { position: absolute; top: 182px; left: 0px; width: 199px; background-color: white; font-size: 10px; } /* Tiêu đề phần cột trái (sectiontitle) */ #leftcol div.sectiontitle, #leftcol sectiontitle span { padding: 6px 6px 6px 3px; background-image: url(Images/TitleBackGround.jpg); color: white; font-size: 12px; font-weight: bold; text-transform: uppercase; height: 14px; } /* Phần text cột trái */ #leftcol div.text { padding: 6px 6px 6px 6px; text-align: justify; } /* Phần alternatetext cột trái */ #leftcol div.alternatetext { padding: 6px 6px 6px 6px; background-color: #fcd4be; text-align: justify; } /* Phần container */ #container { background-color:ActiveBorder; } #subcontainer { background-color: #bcbfc0; margin-right: 200px; } /* Phần centercol */ #centercol { position: relative; margin-left: 200px; padding: 0px; GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 background-color: white; height: 500px; } /* Phần breadcrumb */ #breadcrumb { background-image: url(Images/TitleBackGround.jpg); color: white; padding: 6px 6px 6px 3px; font-size: 12px; font-weight: bold; text-transform: uppercase; padding-left: 5px; height: 14px; } /* Phần breadcrumb */ #breadcrumb a { text-decoration: none; color:white; } /* Phần breadcrumb */ #breadcrumb a:hover { text-decoration: underline; color:Highlight; font-weight:bold; } /* Phần centercolcontent */ #centercolcontent { padding: 15px 6px 15px 6px; } #centercolcontent div.sectiontitle, #centercolcontent sectiontitle span { font-weight: bold; font-size: larger; color: #b45d16; } #centercolcontent div.sectionsubtitle { font-weight: bold; padding-bottom: 4px; } /* Phần rightcol */ #rightcol { position: absolute; top: 182px; right: 0px; width: 199px; color: black; background-color: White; font-size: 10px; } /* Phần rightcol */ GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 #rightcol a { color: Yellow; } /* Phần rightcol */ #rightcol div.text { padding: 6px 6px 6px 6px; text-align: justify; } /* Phần rightcol */ #rightcol div.sectiontitle, #rightcol sectiontitle span { padding: 6px 6px 6px 3px; background-image: url(Images/TitleBackGround.jpg); color: #fc9a0e; font-size: 12px; font-weight: bold; text-transform: uppercase; height: 14px; } /* Phần rightcol */ #footer { padding: 0px; margin: 0px; width: 100%; height: 49px; background-image: url(Images/Footer.jpg); } /* Phần Footer Menu */ #footermenu { text-align: center; padding-top: 10px; } /* Phần Footer Menu */ footermenulink { font-family: Arial, Serif; font-size: 12px; font-weight: bold; text-transform: uppercase; } /* Phần Footer Menu */ footermenulink a { text-decoration: none; color: Orange; } /* Phần Footer Menu */ footermenulink a:hover { text-decoration: underline overline; color:Highlight; font-weight:bold; } GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 /* Phần Footer Text Copyright */ #footertext { text-align: center; padding-top: 3px; } /* Phần Highlight */ highlight { background-color: #fefbd2; color: #000080; } Thêm vào trang MasterPage.master control ASP.NET thành phần HTML tĩnh sau:  Thêm vào div phần header:  Thêm div header:  Thêm div subheader, loginbox, themeselector: Login box Theme selector  Thêm div headermenu:  Thêm SiteMapDataSource control (vào div headermenu): GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005  Thêm Menu control với thuộc tính sau:  Kết bước sau: KimSoft Login box Theme Selector GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 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 trái LeftCol: Site News 20 Aug 2005 :: News Header News text 20 Aug 2005 :: News Header Other news text  Thêm vào div phần Container:

 

 

 

 

 

 

 

 

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:

Ngày đăng: 02/07/2014, 00:20

Từ khóa liên quan

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan