YOMEDIA
Building CMS E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 - Chương 2
285
lượt xem 150
download
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

Chương 2: Tạo website và xây dựng phần giao diện
YOMEDIA/
Chủ đề:
Bình luận(0) Đăng nhập để gửi bình luận!
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

ADSENSE
ADSENSE
CÓ THỂ BẠN MUỐN DOWNLOAD
Thêm tài liệu vào bộ sưu tập có sẵn:

Báo xấu

YOMEDIA
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Chịu trách nhiệm nội dung:
Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA
LIÊN HỆ
Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM
Hotline:0933030098
Email: support@tailieu.vn
