XÂY DỰNG CHỨC NĂNG XEM DANH SÁCH ĐƠN HÀNG

Một phần của tài liệu CÔNG NGHỆ WEB NÂNG CAO XÂY DỰNG WEBSITES VỚI ASP.NET 2.0 (Trang 57)

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) { (adsbygoogle = window.adsbygoogle || []).push({});

{

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" (adsbygoogle = window.adsbygoogle || []).push({});

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> (adsbygoogle = window.adsbygoogle || []).push({});

<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" /> (adsbygoogle = window.adsbygoogle || []).push({});

</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. (adsbygoogle = window.adsbygoogle || []).push({});

<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) {%> (adsbygoogle = window.adsbygoogle || []).push({});

<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 (adsbygoogle = window.adsbygoogle || []).push({});

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" /> (adsbygoogle = window.adsbygoogle || []).push({});

</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" (adsbygoogle = window.adsbygoogle || []).push({});

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) { (adsbygoogle = window.adsbygoogle || []).push({});

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> &gt;&gt; <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> (adsbygoogle = window.adsbygoogle || []).push({});

</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) { (adsbygoogle = window.adsbygoogle || []).push({});

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.

Một phần của tài liệu CÔNG NGHỆ WEB NÂNG CAO XÂY DỰNG WEBSITES VỚI ASP.NET 2.0 (Trang 57)