Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Membangun Keranjang Belanja di ASP.NET

by
Read Time:11 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (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.

  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.

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:

Kelas Product:

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.

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.

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.

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.
  • GridView secara otomatis akan menghasilkan kolom dan nama kolom dari data yang kita berikan kecuali kita secara khusus melarangnya.
  • Kita dapat memberi tahu GridView apa yang akan ditampilkan jika kita tidak menyediakan data.
  • Kita ingin menunjukkan footer agar kita dapat menampilkan harga total.
  • 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:
  • 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".

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

Screencast

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.


Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.