3.6.1. Thiết kế giao diện
Danh sách của đơn hàng đƣợc hiển thị bằng một repeater với các cột là: Mã đơn hàng, Khách hàng, ngày đặt hàng, ngày giao hàng, trị giá, đã giao. Trong đó mã đơn hàng là một liên kết để chuyển đến trang chi tiết đơn hàng đó.
<div>
<div class="title"> Danh sách đơn hàng </div>
<div class="addnewrow">
</div>
<div>
<asp:Repeater ID="Repeater1" runat="server"
OnItemDataBound="Repeater1_ItemDataBound">
<HeaderTemplate>
<table cellspacing="1" cellpadding="3" width="100%"
bgcolor="#cccccc" border="0"> <thead> <tr class="listtableheader"> <th>Mã đơn hàng</th> <th>Khách hàng</th> <th>Ngày đặt hàng</th> <th>Ngày giao hàng</th> <th>Trị giá</th> <th>Đã giao</th> </tr> </thead> <tbody> </HeaderTemplate> <ItemTemplate> <tr> <td>
<asp:HyperLink ID="hyp_DonHang" runat="server" />
<td>
<asp:Literal ID="lit_KhachHang"
runat="server"></asp:Literal>
</td> <td><%#Eval("NgayDatHang") %></td> <td><%#Eval("NgayGiaoHang") %></td> <td><%#Eval("TriGia") %></td> <td><%#Eval("DaGiao") %></td> </tr> </ItemTemplate> <FooterTemplate> </tbody> </table> </FooterTemplate> </asp:Repeater> </div>
<div style="width:100%;">
<div style="float:left;">
<pagerv2:pagerv2_8 ID="hyperlinkPager" runat="server"
CompactModePageCount="5"
GenerateFirstLastSection="true"
GeneratePagerInfoSection="false"
GenerateSmartShortCuts="false"
GenerateHiddenHyperlinks="false"
NormalModePageCount="5" OnCommand="hyperlinkPager_Command" />
</div>
</div> </div>
3.6.2. Xử lý tải dữ liệu
Chƣơng trình tải dữ liệu bằng cách gán danh sách đơn hàng cho thuộc tính DataSource của Repeater.
protected void Page_Load(object sender, EventArgs e) {
{
LoadData(); }
}
private void LoadData() {
int total = 0;
Criteria cri = new Criteria(); hyperlinkPager.PageSize =
int.Parse(ConfigurationManager.AppSettings["pagesize"]); Repeater1.DataSource =
tbDonHangBUS.Get(cri.Criter,hyperlinkPager.CurrentIndex,
hyperlinkPager.PageSize, tbDonHangColumns.MaDH.ToString(), OrderDirection.ASC.ToString(), out total);
Repeater1.DataBind(); hyperlinkPager.ItemCount = total; if(hyperlinkPager.ItemCount <= hyperlinkPager.PageSize) hyperlinkPager.Visible = false; else hyperlinkPager.Visible = true; }
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
tbDonHang donHang = (tbDonHang)e.Item.DataItem; tbKhachHang khachHang = tbKhachHangBUS.GetByID(donHang.MaKH); if (khachHang != null) { Literal lit_KhachHang = (Literal)e.Item.FindControl("lit_KhachHang"); lit_KhachHang.Text = khachHang.HoTen; }
HyperLink hyp_DonHang = (HyperLink)e.Item.FindControl("hyp_DonHang"); hyp_DonHang.Text = donHang.MaDH.ToString(); hyp_DonHang.NavigateUrl = "~/Admin/CTDonHang.aspx?id=" + donHang.MaDH.ToString(); } } 3.6.3. Xử lý phân trang
Khi ngƣời dùng chuyển trang ta chỉ cần cập nhật lại thuộc tính CurrentIndex của control Pager và tiến hành tải lại dữ liệu cho trang web.
protected void hyperlinkPager_Command(object sender, CommandEventArgs e) { hyperlinkPager.CurrentIndex = int.Parse(e.CommandArgument.ToString()); LoadData(); }
3.7. XÂY DỰNG CHỨC NĂNG XEM CHI TIẾT ĐƠN HÀNG3.7.1. Thiết kế giao diện 3.7.1. Thiết kế giao diện
Giao diện của trang chi tiết đơn hàng là các chi tiết của đơn hàng đó và một danh sách các hàng hóa của đơn hàng đó. Danh sách hàng hóa đƣợc biểu diễn bằng một repeater chứa các cột: tên sách, số lƣợng, đơn giá, thành tiền.
<div>
<div class="title"> Chi tiết đơn hàng
</div>
<div>
<table width="100%" cellspacing="1" cellpadding="3"
border="0" bgcolor="#cccccc">
<tr>
<td style="width:30%">Mã đơn hàng</td>
<td style="width:70%">
<asp:Literal ID="lit_MaDonHang"
runat="server"></asp:Literal>
</td>
</tr>
<tr>
<td style="width:30%">Khách hàng</td>
<td style="width:70%">
<asp:Literal ID="lit_KhachHang"
runat="server"></asp:Literal>
</td>
</tr>
<tr>
<td style="width:30%">Ngày đặt hàng</td>
<asp:Literal ID="lit_NgayDatHang"
runat="server"></asp:Literal>
</td>
</tr>
<tr>
<td style="width:30%">Ngày giao hàng</td>
<td style="width:70%">
<asp:Literal ID="lit_NgayGiaoHang"
runat="server"></asp:Literal>
</td>
</tr>
<tr>
<td style="width:30%">Trị giá</td>
<td style="width:70%">
<asp:Literal ID="lit_TriGia"
runat="server"></asp:Literal>
</td>
</tr>
<tr>
<td style="width:30%">Đã giao hàng</td>
<td style="width:70%">
<asp:Literal ID="lit_DaGiaoHang"
runat="server"></asp:Literal>
</td> </tr> </table> </div>
<div style="padding-top:10px;">
<asp:Repeater ID="Repeater1" runat="server"
OnItemDataBound="Repeater1_ItemDataBound">
<HeaderTemplate>
<table cellspacing="1" cellpadding="3" width="100%"
bgcolor="#cccccc" border="0">
<thead>
<th>Sách</th> <th>Số lượng</th> <th>Đơn giá</th> <th>Thành tiền</th> </tr> </thead> <tbody> </HeaderTemplate> <ItemTemplate> <tr> <td>
<asp:Literal ID="lit_TenSach"
runat="server"></asp:Literal></td>
<td><%#Eval("SoLuong") %></td> <td><%#Eval("DonGia") %></td>
<td>
<asp:Literal ID="lit_ThanhTien"
runat="server"></asp:Literal></td>
</tr> </ItemTemplate> <FooterTemplate> </tbody> </table> </FooterTemplate> </asp:Repeater> </div>
<div style="width:100%;">
<div style="float:left;">
<pagerv2:pagerv2_8 ID="hyperlinkPager" runat="server"
CompactModePageCount="5"
GenerateFirstLastSection="true"
GeneratePagerInfoSection="false"
GenerateSmartShortCuts="false"
GenerateHiddenHyperlinks="false"
NormalModePageCount="5" OnCommand="hyperlinkPager_Command" />
</div>
</div>
3.7.2. Xử lý tải dữ liệu
Chƣơng trình lấy mã của đơn hàng cần xem chi tiết thông qua đối tƣợng Request, sau đó chƣơng trình tiến hành lấy các thông tin của đơn hàng đó điền vào các controls.
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { LoadData(); } }
private void LoadData() {
try {
int id = int.Parse(Request.QueryString["id"].ToString());
tbDonHang donHang = tbDonHangBUS.GetByID(id); lit_MaDonHang.Text = donHang.MaDH.ToString(); tbKhachHang khachHang = tbKhachHangBUS.GetByID(donHang.MaKH); lit_KhachHang.Text = khachHang.HoTen; lit_NgayDatHang.Text = donHang.NgayDatHang.ToString(); lit_NgayGiaoHang.Text = donHang.NgayGiaoHang.ToString(); lit_TriGia.Text = donHang.TriGia.ToString(); lit_DaGiaoHang.Text = donHang.DaGiao.ToString(); int total = 0;
Criteria cri = new Criteria();
cri.add(Condition.AND, tbCTDonHangColumns.MaDH, Condition.EQUAL, donHang.MaDH);
hyperlinkPager.PageSize =
int.Parse(ConfigurationManager.AppSettings["pagesize"]); tbCTDonHangCollection cTDonHangCollection =
tbCTDonHangBUS.Get(cri.Criter,
hyperlinkPager.CurrentIndex, hyperlinkPager.PageSize, tbCTDonHangColumns.MaCTDonHang.ToString(), OrderDirection.ASC.ToString(), out total);
Repeater1.DataSource = cTDonHangCollection; Repeater1.DataBind(); hyperlinkPager.ItemCount = total; if (hyperlinkPager.ItemCount <= hyperlinkPager.PageSize) hyperlinkPager.Visible = false; else hyperlinkPager.Visible = true; } catch { Response.Redirect("~/Admin/DonHangList.aspx"); } }
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
tbCTDonHang cTDonHang = (tbCTDonHang)e.Item.DataItem; tbSach sach = tbSachBUS.GetByID(cTDonHang.MaSach); if (sach != null) { Literal lit_TenSach = (Literal)e.Item.FindControl("lit_TenSach"); lit_TenSach.Text = sach.TenSach; } Literal lit_ThanhTien = (Literal)e.Item.FindControl("lit_ThanhTien");
int tongTien = cTDonHang.SoLuong * cTDonHang.DonGia; lit_ThanhTien.Text = tongTien.ToString();
}
3.7.3. Xử lý phân trang
Khi ngƣời dùng cần chuyển trang, chƣơng trình chỉ cần cập nhật lại thuộc tính CurrentIndex của control pager, sau đó gọi phƣơng thức LoadData.
protected void hyperlinkPager_Command(object sender, CommandEventArgs e) { hyperlinkPager.CurrentIndex = int.Parse(e.CommandArgument.ToString()); LoadData(); }
Chƣơng 4. XÂY DỰNG PHÂN HỆ NGƢỜI DÙNG 4.1.1. TẠO TRANG MASTER PAGE
4.1.2. Thiết kế giao diện
4.1.2.1. Thiết kế phần đầu trang Web
Phần đầu trang web bao gồm logo và menu. Khi ngƣời dùng di chuyển vào trang web nào thì menu của trang ấy chuyển sang màu sắc khác.
<div class="header">
<div class="logo"><a href="Default.aspx"><img
src="images/logo.gif" alt="" title="" border="0" /></a></div>
<div id="menu">
<ul>
<% if ((MainMenu)Session["Page"] ==
MainMenu.Default) {%>
<li class="selected"><a
href="Default.aspx">Trang chủ</a></li>
<% } else { %>
<li><a href="Default.aspx">Trang chủ</a></li>
<% } %>
<% if ((MainMenu)Session["Page"] ==
MainMenu.About) {%>
<li class="selected"><a href="About.aspx">Giới thiệu</a></li>
<%} else { %>
<li><a href="About.aspx">Giới thiệu</a></li>
<%} %>
<% if ((MainMenu)Session["Page"] ==
MainMenu.MyAccount
&& Session["KhachHang"] == null) {%> <li class="selected"><a href="Login.aspx">Đăng nhập</a></li>
<% }
else if (Session["KhachHang"] == null) { %>
<li><a href="Login.aspx">Đăng nhập</a></li>
<%} else
%>
<li><a href="Login.aspx">Tài khoản</a></li>
<%} %>
<% if ((MainMenu)Session["Page"] ==
MainMenu.Register && Session["KhachHang"] == null) {%>
<li class="selected"><a
href="Register.aspx">Đăng ký</a></li>
<% } else if(Session["KhachHang"] == null) { %> <li><a href="Register.aspx">Đăng ký</a></li>
<%} %>
<% if ((MainMenu)Session["Page"] ==
MainMenu.Contact) {%>
<li class="selected"><a
href="Contact.aspx">Liên hệ</a></li>
<% } else { %>
<li><a href="Contact.aspx">Liên hệ</a></li>
<%} %>
<%if(Session["KhachHang"] != null) { %> <li>
<asp:LinkButton ID="lbt_Thoat" runat="server"
OnClick="lbt_Thoat_Click">Thoát</asp:LinkButton>
</li>
<%} %> </ul> </div>
</div>
4.1.2.2. Thiết kế phần thông tin giỏ hàng
Phần thông tin giỏ hàng bao gồm: số lƣợng sản phẩm, tổng số tiền và một liên kết đến trang chi tiết giỏ hàng.
<div class="cart">
<div class="title"><span class="title_icon">
<img src="images/cart.gif" alt="" title="" /></span>Giỏ hàng</div>
<div class="home_cart_content">
<asp:Literal ID="lit_Quantity"
runat="server"></asp:Literal> x sp | <span class="red">TỔNG:
<asp:Literal ID="lit_Total"
runat="server"></asp:Literal> VNĐ </span>
</div>
<a href="Cart.aspx" class="view_cart">Xem</a> </div>
4.1.2.3. Thiết kế phần danh sách chủ đề và sản phẩm đặc biệt
Phần danh sách chủ đề bao gồm các liên kết đến trang danh sách sản phẩm theo từng chủ đề.
Phần sản phẩm đặc biệt gồm hình ảnh và tên của các sản phẩm đặc biệt do nhân viên của cửa hàng quy định.
<div class="right_box">
<div class="title"><span class="title_icon"><img
src="images/bullet5.gif" alt="" title="" />
</span>Chủ đề</div>
<asp:Repeater ID="rep_Category" runat="server">
<HeaderTemplate>
<ul class="list">
</HeaderTemplate>
<ItemTemplate>
<li><a href="Category.aspx?id=<%#Eval("MaCD") %>"><%#Eval("TenChuDe") %></a></li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater> </div>
<div class="right_box">
<div class="title"><span class="title_icon">
<img src="images/bullet4.gif" alt="" title="" /></span>Đặt biệt</div>
<asp:Repeater ID="rep_Promotion" runat="server">
<ItemTemplate>
<div class="new_prod_box">
<a href="Detail.aspx?id=<%#Eval("MaSach") %>">
<%#Eval("TenSach") %> </a>
<div class="new_prod_bg">
<span class="new_icon">
<img src="images/special_icon.gif"
alt="" title="" />
</span>
<a href="Detail.aspx?id=<%#Eval("MaSach") %>">
<img
src="Photos/Thumb/<%#Eval("HinhMinhHoa") %>" alt="" title=""
class="thumb" border="0" />
</a> </div> </div> </ItemTemplate> </asp:Repeater> </div>
4.1.2.4. Thiết kế phần cuối trang Web
Phần cuối trang web gồm các liên kết đến một số trang web.
<div class="footer">
<div class="left_footer"><img src="images/footer_logo.gif"
alt="" title="" /></div> <div class="right_footer">
<a href="Default.aspx">Trang chủ</a>
<a href="About.aspx">Giới thiệu</a>
<a href="Contact.aspx">Liên hệ</a> </div>
</div>
4.1.3. Xử lý tải dữ liệu
Lấy thông tin giỏ hàng thông qua biến Session, sau đó điền các thông tin: số lƣợng sản phẩm, tổng số tiền vào các control đã thiết kế.
Chƣơng trình tiến hành tải danh sách chủ đề và danh sách sản phẩm đặc biệt gán vào thuộc tính DataSource của các Repeater tƣơng ứng.
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { LoadData(); } }
private void LoadData() {
ShoppingCart c = (ShoppingCart)Session["Cart"];
lit_Quantity.Text = c.ItemCollection.Count.ToString(); lit_Total.Text = c.Total().ToString();
rep_Category.DataSource = tbChuDeBUS.GetAll(); rep_Category.DataBind();
rep_Promotion.DataSource = tbSachBUS.GetPromotion(3); rep_Promotion.DataBind();
4.1.4. Xử lý thoát khỏi hệ thống
Khi ngƣời dùng nhấp chuột vào link thoát khỏi hệ thống, chƣơng trình tiến hành gán cho biến session bằng null.
protected void lbt_Thoat_Click(object sender, EventArgs e) {
Session["KhachHang"] = null;
Response.Redirect(Request.RawUrl); }
4.2. XÂY DỰNG TRANG CHỦ 4.2.1. Thiết kế giao diện 4.2.1. Thiết kế giao diện
Giao diện trang chủ gồm một số sản phẩm mới nhất cùng các thông tin cơ bản của nó: hình ảnh, tên sản phẩm, mô tả ngắn và liên kết đến trang chi tiết sản phẩm.
<div class="title"><span class="title_icon">
<img src="images/bullet2.gif" alt="" title="" /></span>Sách mới</div>
<asp:Repeater ID="rep_BookList" runat="server"
OnItemDataBound="rep_BookList_ItemDataBound">
<ItemTemplate>
<div class="feat_prod_box">
<div class="prod_img">
<a href="Detail.aspx?id=<%#Eval("MaSach") %>">
<img
src="Photos/Thumb/<%#Eval("HinhMinhHoa") %>" alt="" title=""
border="0" />
</a>
</div>
<div class="prod_det_box">
<div class="box_top"></div>
<div class="box_center">
<div class="prod_title"><%#Eval("TenSach") %></div>
<p class="details">
<asp:Literal ID="lit_Description"
runat="server"></asp:Literal>
</p>
<a href="Detail.aspx?id=<%#Eval("MaSach") %>"
class="more">- xem chi tiết -</a>
<div class="clear"></div></div>
<div class="box_bottom"></div>
</div>
<div class="clear"></div>
</div>
</ItemTemplate> </asp:Repeater>
4.2.2. Xử lý tải dữ liệu
Chƣơng trình tải danh sách sản phẩm và gán vào thuộc tính DataSource của Repeater.
protected void Page_Load(object sender, EventArgs e) {
Session["Page"] = MainMenu.Default; if (!IsPostBack)
{
LoadData(); }
}
{
rep_BookList.DataSource = tbSachBUS.GetLimited(6); rep_BookList.DataBind();
}
protected void rep_BookList_ItemDataBound(object sender,
RepeaterItemEventArgs e) {
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
tbSach sach = (tbSach)e.Item.DataItem; Literal lit_Description =
(Literal)e.Item.FindControl("lit_Description"); lit_Description.Text =
sach.MoTa.Substring(0, 100) + "..."; }
}
4.3. XÂY DỰNG TRANG DANH SÁCH SẢN PHẨM THEO CHỦ ĐỀ 4.3.1. Thiết kế giao diện 4.3.1. Thiết kế giao diện
Danh sách sản phẩm gồm: tên sản phẩm và hình ảnh của sản phẩm.
<div class="crumb_nav">
<a href="Default.aspx">Trang chủ</a> >> <asp:Literal ID="lit_CategoryNameLink"
runat="server"></asp:Literal> </div>
<div class="title"><span class="title_icon"><img
src="images/bullet1.gif" alt="" title="" /></span> <asp:Literal ID="lit_CategoryName"
<asp:Repeater ID="rep_ChuDe" runat="server"
OnItemDataBound="rep_ChuDe_ItemDataBound"> <HeaderTemplate>
<div class="new_products"> </HeaderTemplate>
<ItemTemplate>
<div class="new_prod_box">
<a href="Detail.aspx">
<asp:Literal ID="lit_TenSach"
runat="server"></asp:Literal>
</a>
<div class="new_prod_bg">
<a href="Detail.aspx?id=<%#Eval("MaSach") %>">
<img src="Photos/Thumb/<%#Eval("HinhMinhHoa") %>" alt="<%#Eval("TenSach") %>" title="" class="thumb"
border="0" /> </a> </div> </div> </ItemTemplate> </asp:Repeater>
<div class="pagination">
<PagerV2:PagerV2_8 ID="PagerV2_8_1" runat="server"
GeneratePagerInfoSection="False" GenerateSmartShortCuts="True"
OnCommand="PagerV2_8_1_Command" /> </div>
</div>
<div class="clear"></div>
4.3.2. Xử lý tải dữ liệu
Tải danh sách sản phẩm và gán vào thuộc tính DataSource của Repeater danh sách sản phẩm.
protected void Page_Load(object sender, EventArgs e) {
Session["Page"] = MainMenu.Category; if (!IsPostBack)
{
LoadData(); }
}
private void LoadData() {
try
tbChuDe chuDe =
tbChuDeBUS.GetByID(int.Parse(Request.QueryString["id"])); lit_CategoryName.Text = chuDe.TenChuDe;
lit_CategoryNameLink.Text = chuDe.TenChuDe; int total = 0;
PagerV2_8_1.PageSize = 12; Criteria cri = new Criteria();
cri.add(Condition.AND, tbSachColumns.MaCD.ToString(),
Condition.EQUAL, int.Parse(Request.QueryString["id"])); rep_ChuDe.DataSource = tbSachBUS.Get(cri.Criter, PagerV2_8_1.CurrentIndex, PagerV2_8_1.PageSize,
tbSachColumns.MaSach.ToString(),
OrderDirection.ASC.ToString(), out total); rep_ChuDe.DataBind(); PagerV2_8_1.ItemCount = total; if (total <= PagerV2_8_1.PageSize) PagerV2_8_1.Visible = false; else PagerV2_8_1.Visible = true; } catch { Response.Redirect("~/Default.aspx"); } }
protected void rep_ChuDe_ItemDataBound(object sender,
RepeaterItemEventArgs e) {
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
tbSach sach = (tbSach)e.Item.DataItem; Literal lit_TenSach =
(Literal)e.Item.FindControl("lit_TenSach"); if(sach.TenSach.Length > 16) lit_TenSach.Text = sach.TenSach.Substring(0, 16) + "..."; else lit_TenSach.Text = sach.TenSach; } } 4.3.3. Phân trang
Khi ngƣời dùng muốn chuyển trang, chƣơng trình tiến hành cập nhật lại thuộc tính CurrentIndex của control pager, sau đó gọi lại phƣơng thức LoadData.
protected void PagerV2_8_1_Command(object sender,
{
PagerV2_8_1.CurrentIndex =
int.Parse(e.CommandArgument.ToString()); LoadData();
}
4.4. XÂY DỰNG TRANG CHI TIẾT SẢN PHẨM 4.4.1. Thiết kế giao diện 4.4.1. Thiết kế giao diện
Giao diện của trang chi tiết sản phẩm bao gồm: hình ảnh (có thể phóng lớn ảnh bằng cách click chuột vào nút zoom), tên sản phẩm, giá, mô tả của sản phẩm, nút thêm sản phẩm vào giỏ hàng và một danh sách các sản phẩm liên quan.