XÂY DỰNG TRANG DANH SÁCH SẢN PHẨM THEO CHỦ ĐỀ- 123docz.net

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.

<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>

<asp:Literal ID="lit_TenSach"

runat="server"></asp:Literal>

</a>

<img src="Photos/Thumb/<%#Eval("HinhMinhHoa") %>" alt="<%#Eval("TenSach") %>" title="" class="thumb"

border="0" /> </a> </div> </div> </ItemTemplate> </asp:Repeater>

<PagerV2:PagerV2_8 ID="PagerV2_8_1" runat="server"

GeneratePagerInfoSection="False" GenerateSmartShortCuts="True"

OnCommand="PagerV2_8_1_Command" /> </div>

</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.

type="text/javascript"></script>

<a href="Default.aspx">Trang chủ</a> >> <asp:Literal ID="lit_LinkSach"

runat="server"></asp:Literal> </div>

<asp:Literal ID="lit_ProductName"

runat="server"></asp:Literal> </div>

<img alt="" id="img_Image" runat="server" title=""

border="0" />

</div>

<asp:Literal ID="lit_MoTaNgan"

runat="server"></asp:Literal></p>

<asp:Literal ID="lit_Price"

runat="server"></asp:Literal>

VNĐ</span></div>

<asp:LinkButton ID="lbt_OrderNow" runat="server"

CssClass="more" OnClick="lbt_OrderNow_Click">

<img src="images/order_now.gif" alt="" title=""

border="0" />

</asp:LinkButton>

</div>

<li><a class="active" href="#tab1">Thông tin thêm</a></li>

</ul>

<asp:Literal ID="lit_MoTa"

runat="server"></asp:Literal>

</p> </div>

<asp:Repeater ID="rep_Related" runat="server"

OnItemDataBound="rep_Related_ItemDataBound">

<asp:Literal ID="lit_TenSach"

runat="server"></asp:Literal>

</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>

id: 'demo'

</script>

4.4.2. Xử lý tải dữ liệu

Khi ngƣời dùng vào trang chi tiết sản phẩm, chƣơng trình lấy ID của sản phẩm thông qua đối tƣợng Request, sau đó lấy các thông tin chi tiết của sản phẩm đó hiển thị cho khách hàng.

Sau đó chƣơng trình tiến hành lấy danh sách các sản phẩm cùng chủ đề với sản phẩm mà khách hàng đang xem gán cho thuộc tính DataSource của Repeater danh sách sản phẩm liên quan.

protected void Page_Load(object sender, EventArgs e) {

Session["Page"] = MainMenu.Detail; if (!IsPostBack)

{

LoadData(); }

}

private void LoadData() {

try

{

int iD =

int.Parse(Request.QueryString["id"].ToString()); tbSach sach = tbSachBUS.GetByID(iD); lit_LinkSach.Text = sach.TenSach; lit_ProductName.Text = sach.TenSach;

img_Image.Src = "Photos/Thumb/" + sach.HinhMinhHoa; a_Image.HRef = "Photos/" + sach.HinhMinhHoa;

lit_MoTaNgan.Text = sach.MoTa.Substring(0, 250) + "..."; lit_MoTa.Text = sach.MoTa; lit_Price.Text = sach.DonGia.ToString(); lbt_OrderNow.CommandArgument = sach.MaSach.ToString(); int total = 0;

Criteria cri = new Criteria();

cri.add(Condition.AND, tbSachColumns.MaCD.ToString(),

Condition.EQUAL, sach.MaCD); rep_Related.DataSource =

tbSachBUS.Get(cri.Criter, 1, 9,

tbSachColumns.MaSach.ToString(),

OrderDirection.DESC.ToString(), out total); rep_Related.DataBind();

} catch { Response.Redirect("~/Default.aspx"); } }

protected void rep_Related_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.4.3. Xử lý thêm vào giỏ hàng

Khi ngƣời dùng nhấp chuột vào nút thêm vào giỏ hàng, hệ thống tiến hành thêm sản phẩm đó vào giỏ hàng thông qua lớp giỏ hàng.

protected void lbt_OrderNow_Click(object sender, EventArgs e) {

Item i = new Item(); tbSach sach =

tbSachBUS.GetByID(int.Parse(lbt_OrderNow.CommandArgument)); i.IDProduct = sach.MaSach;

i.Image = sach.HinhMinhHoa; i.Price = sach.DonGia;

i.Quantity = 1;

i.Name = sach.TenSach;

ShoppingCart c = (ShoppingCart)Session["Cart"]; c.Add(i);

Session["Cart"] = c;

Response.Redirect(Request.RawUrl); }

4.5. XÂY DỰNG CHỨC NĂNG ĐĂNG KÝ 4.5.1. Thiết kế giao diện 4.5.1. Thiết kế giao diện

Trang đăng ký gồm các control cho phép ngƣời dùng nhập các thông tin: Email, mật khẩu, họ tên, địa chỉ, điện thoại.

<label

class="contact"><strong>Email:</strong></label>

<asp:TextBox CssClass="contact_input"

ID="txt_Email" runat="server"></asp:TextBox>

</div>

<asp:TextBox CssClass="contact_input"

ID="txt_Password" TextMode="Password"

runat="server"></asp:TextBox>

</div>

<asp:TextBox CssClass="contact_input"

ID="txt_Fullname" runat="server"></asp:TextBox>

</div>

<asp:TextBox CssClass="contact_input"

ID="txt_Adresss" runat="server"></asp:TextBox>

</div>

<label class="contact"><strong>Điện thoại:</strong></label>

<asp:TextBox CssClass="contact_input"

ID="txt_Mobile" runat="server"></asp:TextBox>

</div>

<asp:Button ID="btn_Register" CssClass="register"

runat="server" Text="Đăng ký" OnClick="btn_Register_Click" />

</div> </div>

</div>

4.5.2. Xử lý đăng ký

Sau khi ngƣời dùng nhập thông tin của mình và nhấp vào nút đăng ký, chƣơng trình sẽ tiến hành chèn thông tin của khách hàng này vào cơ sở dữ liệu.

protected void Page_Load(object sender, EventArgs e) {

Session["Page"] = MainMenu.Register; }

protected void btn_Register_Click(object sender, EventArgs e) {

tbKhachHang khachHang =

tbKhachHangBUS.GetByEmail(txt_Email.Text); if (khachHang == null)

{

khachHang = new tbKhachHang();

khachHang.DiaChi = txt_Adresss.Text; khachHang.DienThoai = txt_Mobile.Text; khachHang.Email = txt_Email.Text; khachHang.HoTen = txt_Fullname.Text; khachHang.MatKhau = txt_Password.Text; tbKhachHangBUS.Insert(khachHang); Response.Redirect("~/Default.aspx"); } }

4.6. XÂY DỰNG CHỨC NĂNG ĐĂNG NHẬP 4.6.1. Thiết kế giao diện 4.6.1. Thiết kế giao diện

Giao diện của trang đăng nhập gồm: Email, mật khẩu và một nút đăng nhập.

<label

class="contact"><strong>Email:</strong></label>

<asp:TextBox ID="txt_Email"

CssClass="contact_input" runat="server"></asp:TextBox>

</div>

<asp:TextBox ID="txt_MatKhau" TextMode="Password"

CssClass="contact_input" runat="server"></asp:TextBox>

</div>

<asp:Button ID="btn_DangNhap" CssClass="register"

runat="server" Text="Đăng nhập" OnClick="btn_DangNhap_Click" />

</div> </div>

</div>

4.6.2. Xử lý đăng nhập

Khi ngƣời dùng nhập email, mật khẩu và nhấp chuột vào nút đăng nhập, chƣơng trình tiến hành kiểm tra email và mật khẩu có đúng không. Nếu nhập sai, chƣơng trình sẽ thông báo cho ngƣời dùng nhập lại, nếu đúng chƣơng trình sẽ tiến hành tạo đối tƣợng Session khách hàng.

protected void Page_Load(object sender, EventArgs e) {

Session["Page"] = MainMenu.MyAccount; }

protected void btn_DangNhap_Click(object sender, EventArgs e) {

tbKhachHang khachHang =

tbKhachHangBUS.GetByEmail(txt_Email.Text);

if (khachHang != null && khachHang.MatKhau == txt_MatKhau.Text)

{

Session["KhachHang"] = khachHang.MaKH; Response.Redirect("~/Default.aspx"); }

}

4.7. XÂY DỰNG CHỨC NĂNG GIỎ HÀNG 4.7.1. Xây dựng giỏ hàng 4.7.1. Xây dựng giỏ hàng

4.7.1.1. Xây dựng lớp hàng hóa

Lớp Item gồm các thuộc tính: Mã sản phẩm, số lƣợng, giá, hình ảnh và tên của sản phẩm. Lớp Item dùng để đại diện cho một sản phẩm trong giỏ hàng.

public class Item

{

private int iDProduct; public int IDProduct {

get { return iDProduct; } set { iDProduct = value; } }

private int quantity; public int Quantity {

get { return quantity; } set { quantity = value; } }

public int Price {

get { return price; } set { price = value; } }

private string image; public string Image {

get { return image; } set { image = value; } }

private string name; public string Name {

get { return name; } set { name = value; } }

}

4.7.1.2. Xây dựng lớp giỏ hàng

Lớp ShoppingCart có một thuộc tính là danh sách các Item. Danh sách này thể hiện các sản phẩm hiện có trong giỏ hàng.

Lớp ShoppingCart có các phƣơng thức: Add (thêm một Item vào trong giỏ hàng), Delete (xóa một Item ra khỏi giỏ hàng), Update (chỉnh sửa thông tin của một Item) và Total (tính tổng tiền hiện tại của giỏ hàng).

public class ShoppingCart

{

public List<Item> ItemCollection = new List<Item>(); public void Add(Item item)

{

for (int i = 0; i < ItemCollection.Count; i++) { if (item.IDProduct == ItemCollection[i].IDProduct) { ItemCollection[i].Quantity += item.Quantity; return; } } ItemCollection.Add(item); }

public void Delete(Item item) {

for (int i = 0; i < ItemCollection.Count; i++) { if (item.IDProduct == ItemCollection[i].IDProduct) { ItemCollection.RemoveAt(i); return; } } }

public void Update(Item item) {

for (int i = 0; i < ItemCollection.Count; i++) { if (item.IDProduct == ItemCollection[i].IDProduct) { ItemCollection[i].Quantity = item.Quantity; return; } } }

public int Total() {

int total = 0;

for (int i = 0; i < ItemCollection.Count; i++) { total += ItemCollection[i].Price; } return total; } }

4.7.2. Thiết kế giao diện

Trang thông tin giỏ hàng gồm 1 danh sách các sản phẩm hiện đang có trong giỏ hàng, hai nút tiếp tục mua hàng và đặt hàng.

<asp:Repeater ID="rep_Cart" runat="server"

OnItemDataBound="rep_Cart_ItemDataBound">

<tr class="cart_title"> <td>Hình ảnh</td> <td>Tên sách</td> <td>Giá</td> <td>Số lượng</td> <td>Tổng tiền</td> </tr> </HeaderTemplate> <ItemTemplate> <tr>

<img src="Photos/Thumb/<%#Eval("Image") %>" alt=""

title="" border="0" class="cart_thumb" />

</a></td>

<td>

<asp:Literal ID="lit_ThanhTien"

runat="server"></asp:Literal> VNĐ</td> </tr>

</ItemTemplate> </asp:Repeater>

<tr>

<td colspan="4" class="cart_total"><span

class="red">TOTAL:</span></td>

<td>

<asp:Literal ID="lit_TongTien"

runat="server"></asp:Literal> VNĐ</td> </tr>

</table>

<a href="Default.aspx" class="continue">< Tiếp tục</a> <a href="Order.aspx" runat="server" id="a_Order"

class="checkout">Đặt hàng ></a> </div>

4.7.3. Xử lý tải dữ liệu

Khi ngƣời dùng đi vào chức năng xem giỏ hàng, chƣơng trình tiến hành tải danh sách sản phẩm hiện đang có trong giỏ hàng.

Nếu khách hàng chƣa đăng nhập thì sẽ không hiển thị nút đặt hàng, ngƣợc lại nếu khách hàng đã đăng nhập thì chƣơng trình sẽ cho phép khách hàng đó đặt hàng.

protected void Page_Load(object sender, EventArgs e) {

Session["Page"] = MainMenu.Cart; if (!IsPostBack)

{

LoadData(); }

}

private void LoadData() {

ShoppingCart c = (ShoppingCart)Session["Cart"]; rep_Cart.DataSource = c.ItemCollection;

rep_Cart.DataBind();

lit_TongTien.Text = c.Total().ToString(); if (Session["KhachHang"] == null)

{

} }

protected void rep_Cart_ItemDataBound(object sender,

RepeaterItemEventArgs e) {

if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)

{

Item i = (Item)e.Item.DataItem; Literal lit_ThanhTien =

(Literal)e.Item.FindControl("lit_ThanhTien"); int thanhtien = (i.Price * i.Quantity); lit_ThanhTien.Text = thanhtien.ToString(); }

}

4.8. XÂY DỰNG CHỨC NĂNG ĐẶT HÀNG 4.8.1. Thiết kế giao diện 4.8.1. Thiết kế giao diện

Chức năng đặt hàng gồm có các thông tin: ngày giao hàng và địa chỉ nhận hàng. Trong đó ngày giao hàng là một DateTimePicker cho phép khách hàng chọn ngày để giao hàng.

<asp:TextBox CssClass="contact_input"

ID="txt_Date" runat="server"></asp:TextBox>

</div>

<asp:TextBox CssClass="contact_input"

ID="txt_Address" runat="server"></asp:TextBox>

</div>

<asp:Button ID="btn_Order" CssClass="register"

runat="server" Text="Đặt hàng" OnClick="btn_Order_Click"/>

</div>

<asp:Label ID="lit_ThongBao"

runat="server"></asp:Label>

</div> </div>

</div>

$(function() { $('#<%=txt_Date.ClientID %>').datepicker({ duration: '', constrainInput: false }); }); </script> 4.8.2. Xử lý chức năng đặt hàng

Sau khi ngƣời dùng nhập đầy đủ thông tin và nhấp chuột vào nút đặt hàng, chƣơng trình tiến hành thêm thông tin đặt hàng này vào cơ sở dữ liệu.

Chƣơng trình sẽ lấy tất cả sản phẩm có trong giỏ hàng và thêm chi tiết đơn hàng này vào cơ sở dữ liệu.

protected void btn_Order_Click(object sender, EventArgs e) {

try

{

ShoppingCart c = (ShoppingCart)Session["Cart"]; tbDonHang donHang = new tbDonHang();

donHang.DaGiao = false;

donHang.DiaChiNhanHang = txt_Address.Text; donHang.NgayDatHang = DateTime.Now;

XÂY DỰNG TRANG DANH SÁCH SẢN PHẨM THEO CHỦ ĐỀ

Phƣơng thức khởi tạo

XÂY DỰNG TRANG CHI TIẾT SẢN PHẨM