Membangun Keranjang Belanja di ASP.NET
() translation by (you can also view the original English article)
Keranjang belanja sangat penting dan dapat berkali-kali menjadi bagian yang paling menakutkan dalam membangun situs e-commerce. Tutorial ini akan menunjukkan betapa mudahnya mengimplementasikan keranjang belanja menggunakan ASP.NET. Selain itu, beberapa penjelasan dasar akan diberikan untuk membantu para programmer pemula ASP.NET memahami kerangka kerja yang luar biasa ini.



Gambaran Singkat ASP.NET

Karena ASP.NET belum terlalu banyak dibahas di NETTUTS, saya pikir akan lebih baik untuk menyertakan gambaran singkat tentang beberapa hal yang membedakannya dari bahasa lain.
- Kode yang dikompilasi. Pertama kali halaman ASP.NET diminta melalui web, kode dikompilasi menjadi satu atau lebih file DLL di server. Ini memberi Anda kemampuan untuk menyalin kode ke server dan memberi Anda manfaat kecepatan dari kode yang dikompilasi.
- ASP.NET adalah kerangka kerja berorientasi objek. Setiap fungsi, properti, dan halaman adalah bagian dari kelas. Sebagai contoh, setiap halaman web adalah kelasnya sendiri yang memperluas kelas Page. Kelas Page memiliki event yang diaktifkan ketika halaman web dimuat yang disebut "Page Load Event". Anda dapat menulis fungsi yang berlangganan ke event itu dan dipanggil. Prinsip yang sama berlaku untuk event lain seperti event klik tombol dan "drop-down" "selected index changed".
- Logikanya terpisah dari desain dan konten. Mereka berinteraksi satu sama lain, tetapi mereka berada di tempat terpisah. Umumnya, ini memungkinkan desainer untuk mendesain tanpa mengkhawatirkan fungsi dan memungkinkan programmer untuk fokus pada fungsi tanpa melihat desain. Anda memiliki pilihan untuk menempatkan keduanya di file yang sama atau di file yang berbeda. Ini mirip dengan model model-view-controller.



Jika Anda baru mengenal ASP.NET (dan Anda memiliki Windows), Anda dapat mencobanya secara gratis. Anda dapat mengunduh Visual Studio Express dengan mengunjungi situs web ASP.NET. Juga, ketika Anda membuat situs web secara lokal di komputer Anda, Anda dapat menjalankan situs web kapan saja dan Visual Studio akan segera memulai server di komputer Anda dan membuka situs web Anda di browser default Anda.
Langkah 1: Buat Kelas ShoppingCart
Kita membutuhkan tempat untuk menyimpan barang-barang di keranjang belanja serta fungsi untuk memanipulasi barang. Kita akan membuat kelas ShoppingCart untuk ini. Kelas ini juga akan mengelola penyimpanan sesi.
Pertama, kita harus membuat folder App_Code. Untuk melakukan ini, buka menu "Website", lalu "Add ASP.NET Folder", dan pilih "App_Code." Di sinilah kita akan menempatkan semua kelas kustom kita. Kelas-kelas ini akan secara otomatis dapat diakses dari kode di salah satu halaman kita (kita tidak perlu merujuknya menggunakan sesuatu yang mirip dengan "include" atau apa pun). Kemudian kita dapat menambahkan kelas ke folder itu dengan mengklik kanan pada folder dan memilih "Add New Item."
Tip Cepat: Regions di ASP.NET sangat bagus untuk mengatur dan mengelompokkan kode bersama-sama. Hal terbaik tentang mereka adalah Anda dapat membuka dan menutup wilayah untuk meminimalkan jumlah kode yang Anda cari atau dengan cepat menemukan jalan di sekitar sebuah file.

1 |
|
2 |
using System.Collections.Generic; |
3 |
using System.Web; |
4 |
|
5 |
/**
|
6 |
* The ShoppingCart class
|
7 |
*
|
8 |
* Holds the items that are in the cart and provides methods for their manipulation
|
9 |
*/
|
10 |
public class ShoppingCart { |
11 |
#region Properties |
12 |
|
13 |
public List<CartItem> Items { get; private set; } |
14 |
|
15 |
#endregion |
16 |
|
17 |
#region Singleton Implementation |
18 |
|
19 |
|
20 |
|
21 |
// Readonly properties can only be set in initialization or in a constructor
|
22 |
public static readonly ShoppingCart Instance; |
23 |
|
24 |
// The static constructor is called as soon as the class is loaded into memory
|
25 |
static ShoppingCart() { |
26 |
// If the cart is not in the session, create one and put it there
|
27 |
// Otherwise, get it from the session
|
28 |
if (HttpContext.Current.Session["ASPNETShoppingCart"] == null) { |
29 |
Instance = new ShoppingCart(); |
30 |
Instance.Items = new List<CartItem>(); |
31 |
HttpContext.Current.Session["ASPNETShoppingCart"] = Instance; |
32 |
} else { |
33 |
Instance = (ShoppingCart)HttpContext.Current.Session["ASPNETShoppingCart"]; |
34 |
}
|
35 |
}
|
36 |
|
37 |
// A protected constructor ensures that an object can't be created from outside
|
38 |
protected ShoppingCart() { } |
39 |
|
40 |
#endregion |
41 |
|
42 |
#region Item Modification Methods |
43 |
/**
|
44 |
* AddItem() - Adds an item to the shopping
|
45 |
*/
|
46 |
public void AddItem(int productId) { |
47 |
// Create a new item to add to the cart
|
48 |
CartItem newItem = new CartItem(productId); |
49 |
|
50 |
// If this item already exists in our list of items, increase the quantity
|
51 |
// Otherwise, add the new item to the list
|
52 |
if (Items.Contains(newItem)) { |
53 |
foreach (CartItem item in Items) { |
54 |
if (item.Equals(newItem)) { |
55 |
item.Quantity++; |
56 |
return; |
57 |
}
|
58 |
}
|
59 |
} else { |
60 |
newItem.Quantity = 1; |
61 |
Items.Add(newItem); |
62 |
}
|
63 |
}
|
64 |
|
65 |
/**
|
66 |
* SetItemQuantity() - Changes the quantity of an item in the cart
|
67 |
*/
|
68 |
public void SetItemQuantity(int productId, int quantity) { |
69 |
// If we are setting the quantity to 0, remove the item entirely
|
70 |
if (quantity == 0) { |
71 |
RemoveItem(productId); |
72 |
return; |
73 |
}
|
74 |
|
75 |
// Find the item and update the quantity
|
76 |
CartItem updatedItem = new CartItem(productId); |
77 |
|
78 |
foreach (CartItem item in Items) { |
79 |
if (item.Equals(updatedItem)) { |
80 |
item.Quantity = quantity; |
81 |
return; |
82 |
}
|
83 |
}
|
84 |
}
|
85 |
|
86 |
/**
|
87 |
* RemoveItem() - Removes an item from the shopping cart
|
88 |
*/
|
89 |
public void RemoveItem(int productId) { |
90 |
CartItem removedItem = new CartItem(productId); |
91 |
Items.Remove(removedItem); |
92 |
}
|
93 |
#endregion |
94 |
|
95 |
#region Reporting Methods |
96 |
/**
|
97 |
* GetSubTotal() - returns the total price of all of the items
|
98 |
* before tax, shipping, etc.
|
99 |
*/
|
100 |
public decimal GetSubTotal() { |
101 |
decimal subTotal = 0; |
102 |
foreach (CartItem item in Items) |
103 |
subTotal += item.TotalPrice; |
104 |
|
105 |
return subTotal; |
106 |
}
|
107 |
#endregion |
108 |
}
|
Langkah 2: The Kelas CartItem & Product
Dengan tempat untuk menyimpan item keranjang belanja kita, kita harus dapat menyimpan informasi tentang setiap item. Kita akan membuat kelas CartItem yang akan melakukan ini. Kita juga akan membuat kelas Product sederhana yang akan mensimulasikan cara untuk mengambil data tentang produk yang kita jual.
Kelas CartItem:
1 |
|
2 |
using System; |
3 |
|
4 |
/**
|
5 |
* The CartItem Class
|
6 |
*
|
7 |
* Basically a structure for holding item data
|
8 |
*/
|
9 |
public class CartItem : IEquatable<CartItem> { |
10 |
#region Properties |
11 |
|
12 |
// A place to store the quantity in the cart
|
13 |
// This property has an implicit getter and setter.
|
14 |
public int Quantity { get; set; } |
15 |
|
16 |
private int _productId; |
17 |
public int ProductId { |
18 |
get { return _productId; } |
19 |
set { |
20 |
// To ensure that the Prod object will be re-created
|
21 |
_product = null; |
22 |
_productId = value; |
23 |
}
|
24 |
}
|
25 |
|
26 |
private Product _product = null; |
27 |
public Product Prod { |
28 |
get { |
29 |
// Lazy initialization - the object won't be created until it is needed
|
30 |
if (_product == null) { |
31 |
_product = new Product(ProductId); |
32 |
}
|
33 |
return _product; |
34 |
}
|
35 |
}
|
36 |
|
37 |
public string Description { |
38 |
get { return Prod.Description; } |
39 |
}
|
40 |
|
41 |
public decimal UnitPrice { |
42 |
get { return Prod.Price; } |
43 |
}
|
44 |
|
45 |
public decimal TotalPrice { |
46 |
get { return UnitPrice * Quantity; } |
47 |
}
|
48 |
|
49 |
#endregion |
50 |
|
51 |
// CartItem constructor just needs a productId
|
52 |
public CartItem(int productId) { |
53 |
this.ProductId = productId; |
54 |
}
|
55 |
|
56 |
/**
|
57 |
* Equals() - Needed to implement the IEquatable interface
|
58 |
* Tests whether or not this item is equal to the parameter
|
59 |
* This method is called by the Contains() method in the List class
|
60 |
* We used this Contains() method in the ShoppingCart AddItem() method
|
61 |
*/
|
62 |
public bool Equals(CartItem item) { |
63 |
return item.ProductId == this.ProductId; |
64 |
}
|
65 |
}
|
Kelas Product:
1 |
|
2 |
/**
|
3 |
* The Product class
|
4 |
*
|
5 |
* This is just to simulate some way of accessing data about our products
|
6 |
*/
|
7 |
public class Product |
8 |
{
|
9 |
|
10 |
public int Id { get; set; } |
11 |
public decimal Price { get; set; } |
12 |
public string Description { get; set; } |
13 |
|
14 |
public Product(int id) |
15 |
{
|
16 |
this.Id = id; |
17 |
switch (id) { |
18 |
case 1: |
19 |
this.Price = 19.95m; |
20 |
this.Description = "Shoes"; |
21 |
break; |
22 |
case 2: |
23 |
this.Price = 9.95m; |
24 |
this.Description = "Shirt"; |
25 |
break; |
26 |
case 3: |
27 |
this.Price = 14.95m; |
28 |
this.Description = "Pants"; |
29 |
break; |
30 |
}
|
31 |
}
|
32 |
|
33 |
}
|
Definisi: Sebuah "property" dalam ASP.NET adalah variabel di kelas yang memiliki setter, getter, atau keduanya. Ini mirip dengan bahasa lain, tetapi di ASP.NET, kata properti mengacu khusus untuk ini. Contoh dari ini adalah properti ProductId di kelas CartItem. Ini bukan hanya variabel di dalam sebuah kelas dengan metode untuk mendapatkan atau mengatur. Ini dideklarasikan dengan cara khusus dengan blok get{} dan set{}.
Mari Menambahkan Item ke Keranjang
Setelah kepala kita berada di kode begitu lama, sudah waktunya kita melakukan sesuatu yang visual. Halaman ini hanya akan menjadi cara untuk menambahkan item ke keranjang. Yang kita butuhkan hanyalah beberapa item dengan tautan "Add to Cart". Mari letakkan kode ini di halaman Default.aspx.
1 |
|
2 |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> |
3 |
|
4 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
5 |
|
6 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
7 |
<head runat="server"> |
8 |
<title>My Store</title> |
9 |
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /> |
10 |
</head>
|
11 |
<body>
|
12 |
|
13 |
<form id="form1" runat="server"> |
14 |
|
15 |
<div class="container"> |
16 |
<h1>My Store</h1> |
17 |
|
18 |
<div class="products"> |
19 |
<div>Shoes - <asp:LinkButton runat="server" ID="btnAddShirt" OnClick="btnAddShoes_Click">Add To Cart</asp:LinkButton></div> |
20 |
|
21 |
<div>Shirt - <asp:LinkButton runat="server" ID="btnAddShorts" OnClick="btnAddShirt_Click">Add To Cart</asp:LinkButton></div> |
22 |
<div>Pants - <asp:LinkButton runat="server" ID="btnAddShoes" OnClick="btnAddPants_Click">Add To Cart</asp:LinkButton></div> |
23 |
</div>
|
24 |
|
25 |
|
26 |
<a href="ViewCart.aspx">View Cart</a> |
27 |
</div>
|
28 |
|
29 |
</form>
|
30 |
</body>
|
31 |
</html>
|
Seperti yang Anda lihat, satu-satunya yang terjadi di sini adalah bahwa kita memiliki beberapa LinkButtons yang memiliki event handler OnClick yang terkait dengannya.
Di halaman belakang-kode, kita memiliki 4 event handler. Kita memiliki satu untuk setiap LinkButton yang hanya menambahkan item ke keranjang belanja dan mengarahkan ulang pengguna untuk melihat keranjang mereka. Kita juga memiliki event handler Page_Load yang dibuat oleh IDE secara default yang tidak perlu kita gunakan.
1 |
|
2 |
using System; |
3 |
|
4 |
public partial class _Default : System.Web.UI.Page { |
5 |
protected void Page_Load(object sender, EventArgs e) { |
6 |
|
7 |
}
|
8 |
|
9 |
protected void btnAddShoes_Click(object sender, EventArgs e) { |
10 |
// Add product 1 to the shopping cart
|
11 |
ShoppingCart.Instance.AddItem(1); |
12 |
|
13 |
// Redirect the user to view their shopping cart
|
14 |
Response.Redirect("ViewCart.aspx"); |
15 |
}
|
16 |
|
17 |
protected void btnAddShirt_Click(object sender, EventArgs e) { |
18 |
ShoppingCart.Instance.AddItem(2); |
19 |
Response.Redirect("ViewCart.aspx"); |
20 |
}
|
21 |
|
22 |
protected void btnAddPants_Click(object sender, EventArgs e) { |
23 |
ShoppingCart.Instance.AddItem(3); |
24 |
Response.Redirect("ViewCart.aspx"); |
25 |
}
|
26 |
|
27 |
}
|
Membangun Halaman Keranjang Belanja



Akhirnya, apa yang telah kita persiapkan sepanjang waktu—keranjang belanja! Mari kita lihat pada ViewCart.aspx dulu dan saya akan menjelaskannya setelah itu.
1 |
|
2 |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ViewCart.aspx.cs" Inherits="ViewCart" %> |
3 |
|
4 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
5 |
|
6 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
7 |
<head runat="server"> |
8 |
<title>Shopping Cart</title> |
9 |
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /> |
10 |
</head>
|
11 |
<body>
|
12 |
|
13 |
<form id="form1" runat="server"> |
14 |
<div class="container"> |
15 |
<h1>Shopping Cart</h1> |
16 |
<a href="Default.aspx">< Back to Products</a> |
17 |
|
18 |
<br /><br /> |
19 |
<asp:GridView runat="server" ID="gvShoppingCart" AutoGenerateColumns="false" EmptyDataText="There is nothing in your shopping cart." GridLines="None" Width="100%" CellPadding="5" ShowFooter="true" DataKeyNames="ProductId" OnRowDataBound="gvShoppingCart_RowDataBound" OnRowCommand="gvShoppingCart_RowCommand"> |
20 |
<HeaderStyle HorizontalAlign="Left" BackColor="#3D7169" ForeColor="#FFFFFF" /> |
21 |
<FooterStyle HorizontalAlign="Right" BackColor="#6C6B66" ForeColor="#FFFFFF" /> |
22 |
<AlternatingRowStyle BackColor="#F8F8F8" /> |
23 |
<Columns>
|
24 |
|
25 |
<asp:BoundField DataField="Description" HeaderText="Description" /> |
26 |
<asp:TemplateField HeaderText="Quantity"> |
27 |
<ItemTemplate>
|
28 |
<asp:TextBox runat="server" ID="txtQuantity" Columns="5" Text='<%# Eval("Quantity") %>'></asp:TextBox><br /> |
29 |
<asp:LinkButton runat="server" ID="btnRemove" Text="Remove" CommandName="Remove" CommandArgument='<%# Eval("ProductId") %>' style="font-size:12px;"></asp:LinkButton> |
30 |
|
31 |
</ItemTemplate>
|
32 |
</asp:TemplateField>
|
33 |
<asp:BoundField DataField="UnitPrice" HeaderText="Price" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" DataFormatString="{0:C}" /> |
34 |
<asp:BoundField DataField="TotalPrice" HeaderText="Total" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" DataFormatString="{0:C}" /> |
35 |
</Columns>
|
36 |
</asp:GridView>
|
37 |
|
38 |
<br /> |
39 |
<asp:Button runat="server" ID="btnUpdateCart" Text="Update Cart" OnClick="btnUpdateCart_Click" /> |
40 |
</div>
|
41 |
</form>
|
42 |
</body>
|
43 |
</html>
|
Kontrol GridView adalah kontrol yang kuat yang dapat terlihat rumit pada awalnya. Saya tidak akan membahas unsur-unsur gaya karena mereka cukup jelas. (Ada beberapa prinsip di sini yang tidak akan saya jelaskan secara mendalam. Saya hanya akan mencoba untuk mendapatkan ide utama di seluruhnya). Mari kita rinci.
- Memberikan GridView sebuah ID akan memungkinkan kita untuk mengakses GridView dari belakang-kode menggunakan ID tersebut.
1
ID="gvShoppingCart"
- GridView secara otomatis akan menghasilkan kolom dan nama kolom dari data yang kita berikan kecuali kita secara khusus melarangnya.
1
AutoGenerateColumns="false"
- Kita dapat memberi tahu GridView apa yang akan ditampilkan jika kita tidak menyediakan data.
1
EmptyDataText="There is nothing in your shopping cart."
- Kita ingin menunjukkan footer agar kita dapat menampilkan harga total.
1
ShowFooter="true"
- Akan menyenangkan bagi kita untuk memiliki array ProductIds yang diindeks oleh indeks baris saat kita memperbarui kuantitas item keranjang di belakang-kode. Ini akan melakukannya untuk kita:
1
DataKeyNames="ProductId"
- Kita membutuhkan event untuk menanggapi dua event: RowDataBound dan RowCommand. Pada dasarnya, RowDataBound dijalankan ketika GridView mengambil satu baris data kita dan menambahkannya ke tabel. Kita hanya menggunakan event ini untuk menanggapi ke footer yang terikat sehingga kita dapat menyesuaikan apa yang kita inginkan ditampilkan di sana. RowCommand dijalankan ketika tautan atau tombol diklik dari dalam GridView. Dalam hal ini, itu adalah tautan "Remove".
1
OnRowDataBound="gvShoppingCart_RowDataBound" OnRowCommand="gvShoppingCart_RowCommand"
Sekarang mari kita bicara tentang kolomnya. Kita mendefinisikan kolomnya di sini dan GridView akan mengambil setiap baris dalam data yang kita berikan dan memetakan data di baris itu ke kolom yang seharusnya ditampilkan. Kolom paling sederhana adalah BoundField. Dalam kasus kita, ini akan mencari properti "Description" di objek CartItem kita dan menampilkannya di kolom pertama. Header untuk kolom itu juga akan menampilkan "Description."
Kita membutuhkan kuantitas agar ditampilkan di dalam textbox daripada hanya ditampilkan sebagai teks, jadi kita menggunakan TemplateField. TemplateField memungkinkan Anda untuk meletakkan apa pun yang Anda inginkan di kolom itu. Jika Anda memerlukan beberapa data dari baris, Anda cukup memasukkan %# Eval("PropertyName") %. LinkButton yang kita masukkan ke dalam TemplateField kita memiliki CommandName dan CommandArgument, keduanya akan diteruskan ke event handler RowCommand dari GridView kita.
Hal terakhir yang perlu disebutkan di sini adalah bahwa dua BoundField terakhir memiliki DataFormatString yang ditentukan. Ini hanyalah salah satu dari banyak string format yang disediakan ASP.NET. Yang ini memformat angka sebagai mata uang. Lihat dokumentasi Microsoft untuk string format lain.
Sekarang kita bisa melihat halaman di belakang-kode. Saya telah memberikan banyak komentar di sini untuk menjelaskan apa yang sedang terjadi.
Hasil Akhir:
Sekarang kita memiliki keranjang belanja yang bagus!



Anda Mungkin Juga Menyukai...

Cara Mencari Situs Web Menggunakan ASP.NET 3.5 - screencast
1 Okt di Screencasts oleh Jeffrey Way
Saya senang mengatakan bahwa hari ini, kami memposting artikel pertama kami di ASP.NET. Dalam screencast ini, saya akan menunjukkan kepada Anda cara menerapkan fungsi penelusuran sederhana ke situs web pribadi Anda. Kami akan membahas banyak fitur baru di ASP.NET 3.5, seperti LINQ dan banyak kontrol AJAX yang dikirimkan bersama Visual Studio/Web Developer.
- Berlangganan Feed RSS NETTUTS untuk tutorial dan artikel pengembangan web harian lainnya.
56