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.

1. 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.
2. 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".
3. 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

56

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.

Lanjutkan Membaca

• Berlangganan Feed RSS NETTUTS untuk tutorial dan artikel pengembangan web harian lainnya.