Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 1
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”).
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 2
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
{
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;
-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 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;
}
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
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:
<form id="Main" runat="server">
<div id = "header"> </div>
</form>
Thêm div subheader, loginbox, themeselector:
<div id = "header">
<div id ="subheader"> </div>
<div id="loginbox">Login box</div>
<div id="themeselector">Theme selector</div>
</div>
Thêm div headermenu:
<div id ="subheader">
<div id="headermenu">
</div>
</div>
"
<html xmlns="
<head id="Head1" runat="server">
<title>KimSoft</title>
</head>
<body>
<form id="Main" runat="server">
<! Phần đầu (Header) >
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id = "header">
<div id = "subheader">
<div id="headermenu">
<! Control SiteMapDataSource >
<asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server"
StartingNodeOffset="0" />
<! Control Menu >
<asp:Menu ID="mnuHeader"
runat="server"
CssClass="headermenulink"
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
MaximumDynamicDisplayLevels="0"
SkipLinkText=""
StaticDisplayLevels="2" />
</div>
<div id="loginbox">Login box</div>
<div id="themeselector">Theme Selector</div>
<asp:ContentPlaceHolder ID="LeftContent" runat="server" />
</asp:ContentPlaceHolder>
</div>
Thêm vào các div phần ở giữa Container:
<! Phần giữa (Container) >
<div id="container">
<div id="subcontainer">
<div id="centercol">
<div id="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" />
</div>
<div id="centercolcontent">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
</asp:ContentPlaceHolder>
</div>
</div>
</div> Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 11
Thêm vào các div phần bên phải RightCol:
CssClass="footermenulink"
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
MaximumDynamicDisplayLevels="0"
SkipLinkText=""
StaticDisplayLevels="2" />
</div>
<div id="footertext">
<small>Copyright © 2008 by KimSoft
</div>
</div> Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 12
Kết quả các bước trên như sau:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"
Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head id="Head1" runat="server">
<title>KimSoft</title>
</head>
<body>
<asp:Image ID="imgArrow1"
runat="server"
ImageUrl="~/Images/arrowr.gif"
ImageAlign="left"
hspace="6" />Site News
</div>
<div class="text">
<b>20 Aug 2005 :: News Header</b>
<br />News text
</div>
<div class="alternatetext">
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 13
<b>20 Aug 2005 :: News Header</b>
<br />Other news text
</div>
<asp:ContentPlaceHolder ID="LeftContent" runat="server" />
</asp:ContentPlaceHolder>
</div>
<! Phần giữa (Container) >
<div id="container">
<div id="subcontainer">
<div id="centercol">
<div id="breadcrumb">
<br />Other news text
</div>
<asp:ContentPlaceHolder ID="RightContent" runat="server" />
</div>
<! Phần cuối (Footer) >
<div id="footer">
<! Control Menu >
<div id="footermenu">
<asp:Menu ID="mnuFooter"
runat="server"
style="margin-left:auto; margin-right:auto;"
CssClass="footermenulink"
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 14
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
MaximumDynamicDisplayLevels="0"
SkipLinkText=""
StaticDisplayLevels="2" />
</div>
<div id="footertext">
<small>Copyright © 2008 by KimSoft
</div>
</div>
</form>
Hình 05: Tạo file Controls.skin.
8. Thêm code vào file Controls.skin như sau:
<% TextBox - Thiết lập skin cho TextBox %>
<asp:TextBox runat="server" BorderStyle="dashed" BorderWidth="1px" />
<% Label Thiết lập skin cho Label %>
<asp:Label runat="server" SkinID="FeedbackOK" ForeColor="green" />
<asp:Label runat="server" SkinID="FeedbackKO" ForeColor="red" />
<% SiteMapPath - Thiết lập skin cho SiteMapPath %>
<asp:SiteMapPath runat="server">
<PathSeparatorTemplate>
<asp:Image runat="server" ImageUrl="Images/SeparateWhite.gif"
align="middle" />
</PathSeparatorTemplate>
</asp:SiteMapPath>
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.
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 16 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
masterPageFile
=
"
~/
MasterPage.master
"
>
</pages>
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.
<%@ Page Language="C#"
MasterPageFile
="~/
MasterPage.master
"
AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
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
{
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.
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 19
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
{
/// <summary>
themes[i] = Path.GetFileName(themes[i]);
//Lưu mảng theme vừa lấy vào cache để cung cấp cho lần thứ 2 trở đi.
CacheDependency dep = new CacheDependency(themesDirPath);
HttpContext.Current.Cache.Insert("SiteThemes", themes, dep);
return themes;
}
}
}
}
25. Thêm 2 namespace cho Directory và CacheDependency
using System.IO;//Directory
using System.Web.Caching;//CacheDependency
26. Kéo thả ThemeSelector.ascx vào MasterPage.master:
Kết quả như sau:
<%@ Register src="Controls/ThemeSelector.ascx" tagname="ThemeSelector" tagprefix="uc1" %>
<div id="themeselector">
<uc1:ThemeSelector ID="ThemeSelector1" runat="server" />
</div>
27. Thêm lớp Globals.cs vào thư mục App_Code và viết code cho nó như sau:
namespace KimSoft
{
/// <summary>
/// Đây là lớp tĩnh (static)==> 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.
/// </summary>
public static class Globals
{
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 22
29. Tạo lớp BasePage trong thư mục App_Code và viết code như sau:
namespace KimSoft.UI
{
/// <summary>
/// Lớp BasePage kế thừa từ System.Web.UI.Page
/// Bao gồm các phương thức viết chồng (override) lên các phương thức có sẵn của lớp
Page.
/// Được các trang Defalt.aspx, Contact.aspx, About.aspx, kế thừa
/// thay vì phải viết nhiều lần trong các trang trên.
/// </summary>
public class BasePage : System.Web.UI.Page
{
/// <summary>
/// Vì project này sử dụng nhiều Theme và cho phép người dùng
/// chọn thay đổi trực tiếp, nên mỗi khi load trang ta cần xử lý
/// chọn Theme tương ứng và hiển thị cho trang.
/// </summary>
protected override void OnPreInit(EventArgs e)
{
string id = Globals.ThemesSelectorID;
if (id.Length > 0)
{
// Nếu trang khởi tạo là sự kiện postback phát sinh bởi dropdownlist
theme, lấy theme được chọn và sử dụng nó cho trang hiện tại.
if (this.Request.Form["__EVENTTARGET"] == id &&
!string.IsNullOrEmpty(this.Request.Form[id]))
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 24
32. Thêm vào 2 trang Contact.aspx và About.aspx sử dụng MasterPage.master để test.
Tạo trang Contac.aspx và About.aspx
Thay đổi code cho trang Contact.aspx.cs và About.aspx.cs kế thừa từ lớp BasePage thay vì
System.Web.UI.Page như 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 như sau:
public static class Helpers
{
public static string[] GetThemes(){…}
/// <summary>
/// Highlight cho các input control (control nhập liệu).
GVHD: Dương Ngọc Long Nam – Page 25
34. Để thực thi code trong sự kiện Load của mỗi trang, tạo phương thức “override void OnLoad”
trong lớp BasePage class như sau:
namespace KimSoft.UI
{
public class BasePage : System.Web.UI.Page
{
protected override void OnPreInit(EventArgs e){ }
/// <summary>
// Mỗi khi load trang thêm sự kiện onfocus và onblur javascripts cho tất cả input
control
// để các active control có giao diện khác.
/// </summary>
protected override void OnLoad(EventArgs e)
{
Helpers.SetInputControlsHighlight(this, "highlight", false);
base.OnLoad(e);
}
}
}
35. Chạy và kiểm tra chương trình.
***HẾT CHƯƠNG 2***
Copyright: Tài liệu đại học ©