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

Chia sẻ: Pham Duy Anh | Ngày: | Loại File: PDF | Số trang:25

Thêm vào BST

Báo xấu

285
lượt xem 150
download

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

Mô tả tài liệu

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

Chương 2: Tạo website và xây dựng phần giao diện

Chủ đề:

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

Lưu

Nội dung Text: Building CMS E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 - Chương 2

Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 Chương 2 Tạo website và xây dựng phần giao diện *** 1. Tạo web site KimSoft (sử dụng Visual Studio .NET 2008) như 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. 2. Xoá trang Default.aspx:  Right-click trang Default.aspx chọn delete để xoá (Chúng ta sẽ tạo lại trang Default.aspx sau khi đã tạo trang “master page”). GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 1
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 3. Tạo trang MasterPage.master:  Từ menu bar, chọn : Website  Add New Item  AJAX Master Page.  Đặt tên là : MasterPage.master. Hình 02: Tạo trang MasterPage.master 4. 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 là : SeaBlue GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 2
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 là : Images  Copy các hình ảnh của 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 là : Default.css. Hình 04: Tạo file Default.css cho theme SeaBlue GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 3
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005  Viết code cho file Default.css như 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 các khoảng trống còn 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 khi 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 4
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 khi trừ chiều cao của Header Baner (top: 12px, width: 200px (fix)) */ #leftcol { position: absolute; top: 182px; left: 0px; width: 199px; background-color: white; font-size: 10px; } /* Tiêu đề của 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 5
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 6
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 7
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; } 5. Thêm vào trang MasterPage.master các control ASP.NET và thành phần HTML tĩnh như sau:  Thêm vào các 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 8
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005  Thêm Menu control với các thuộc tính như sau:  Kết quả các bước trên như sau: KimSoft Login box Theme Selector GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 9
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005  Thêm vào các 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 các div phần ở giữa 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 các 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 các 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 quả các bước trên như 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...
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 DataSourceID="SiteMapDataSource1" Orientation="Horizontal" MaximumDynamicDisplayLevels="0" SkipLinkText="" StaticDisplayLevels="2" /> Copyright © 2008 by KimSoft 6. Tạo file Web.sitemap:  Right-click project : KimSoft  Chọn : Add New Item  Site Map.  Đặt tên là : Web.sitemap  Thêm vào file Web.sitemap vừa tạo các XML node như sau: 7. Thêm file Controls.skin  Right-click thư mục: SeaBlue  Chọn : Add New Item  Skin File.  Đặt tên là : 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. 8. Thêm code vào file Controls.skin như sau: 9. Thêm trang Default.aspx  Right-click project : KimSoft  Chọn : Add New Item  Web Form  Chọn checkbox : “Select master page” trong 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 là : Images  Copy các hình ảnh của project vào thư mục Images vừa tạo. (Từ thư mục Resources). 11. Thêm hình và text vào phần ContentPlaceHolder MainContent như sau: 12. Áp dụng Theme cho các trang:  Thay vì áp dụng Theme cho từng trang bằng cách thêm trực tiếp vào thuộc tính @Page, chúng ta thêm vào file web.config, chỉ 1 lần và áp dụng cho tất cả các trang bằng cách thêm theme="SeaBlue" masterPageFile="~/MasterPage.master" vào tag pages như 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. Xoá thuộc tính MasterPageFile từ trang Default.aspx  Vì đã đặt trong tag pages của file web.config nên các trang không cần đặt MasterPageFile nữa. 14. Thêm theme thứ 2 tên Orange  Right click project : KimSoft  Chọn : Add Folder  Theme Folder  Đặt tên là : 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 là : Images  Copy hình của theme Orange vào thư mục Images vừa tạo. (Từ thư mục Resources). 16. Thêm file Default.css  Copy và paste file Default.css từ SeaBlue 17. Thêm file Controls.skin  Copy và paste file controls.skin của SeaBlue  Chú ý: Ngoài hình ảnh, nếu các bạn muốn theme Orange khác theme SeaBlue về vị trí, màu sắc, hiệu ứng,…của các đối tượng thì các bạn chỉnh sửa 2 file Default.css và 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 là : 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 là : ThemeSelector.ascx. Hình 07: Tạo Web User Control ThemeSelector.ascx. 20. Thêm chuỗi “Theme:” và control DropDownList vào ThemeSelector.ascx: Theme: 21. Thêm code cho ThemeSelector.ascx.cs như sau:  Lấy danh sách cho drop-down list bằng phương thức GetThemes của lớp Helper  Đặt giá trị mặc định là Theme của trang hiện tại. 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 trong 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 là : Helpers.cs Hình 08: Tạo lớp Helpers.cs 24. Viết code cho lớp Helpers như sau: namespace KimSoft.UI { /// /// Đây là lớp tĩnh không cần khởi tạo khi sử dụng. /// Bao gồm các phương thức (tiện ích) hỗ trợ cho các trang, /// các đối tượng khác của project. /// public static class Helpers { /// /// Trả về 1 mảng (array) tên của các theme trong thư mục App_Theme. /// public static string[] GetThemes() { //Trả về 1 mảng tên các theme được lưu trong 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 của thư mục App_Themes lưu vào biến themesDirPath. string themesDirPath = HttpContext.Current.Server.MapPath("~/App_Themes"); // Lấy mảng các thư mục theme dưới 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 khi sử dụng. /// Lớp lưu trữ các biến toàn cục cho ứng dụng. /// public static class Globals { //Khai báo và khởi tạo biến tĩnh ThemesSelectorID // để lưu lại ID của theme hiện hành được chọn. public static string ThemesSelectorID = ""; } } GVHD: Dương Ngọc Long Nam – longnamit@yahoo.com Page 20