Cara membuat keranjang belanja sederhana html

Pada artikel ini saya ingin membagikan tutorial cara membuat shopping cart menggunakan PHP dan MySQLi, tutorial ini memang bukan hal baru karena jika teman-teman cari di google sudah banyak website/blog yang membahas hal ini.

Shopping cart atau keranjang belanja merupakan salah satu fitur penting untuk aplikasi penjualan (point of sale) atau aplikasi toko online yang mana fitur ini berfungsi untuk menampung sementara data pembelian pelanggan sebelum melakukan checkout pada aplikasi tersebut.

Untuk membuat shopping cart di PHP kita menggunakan variabel session. variabel ini digunakan untuk menyimpan data sementara di server sampai data tersebut kita masukan dan simpan ke database secara permanen. Langsung saja simak pembahasan berikut ini:

  • Membuat Database
  • Membuat File Koneksi Database
  • Membuat File index.php
  • Membuat file produk.php
  • Membuat file keranjang-belanja.php
  • Download Source Code

Membuat Database

Buatlah sebuah database dengan nama shopping_cart

create database shopping_cart

Buat sebuah tabel dengan nama produk

CREATE TABLE produk (
  id_produk int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  kode_produk char(3) NOT NULL UNIQUE,
  nama varchar(50) NOT NULL,
  stok int(11) NOT NULL,
  harga bigint(20) NOT NULL,
  keterangan text NOT NULL,
  gambar varchar(500) NOT NULL
);

Cara membuat keranjang belanja sederhana html

Setelah berhasil membuat tabel produk, selanjutnya kita coba memasukan beberapa contoh data dummy ke dalam tabel produk.

INSERT INTO produk (kode_produk,nama,harga,stok,keterangan,gambar) values 
('P01','Bubur Ayam','12000','10','racikan bubur khas Kuningan + slederi + bawang goreng + ayam suwir, kuah kaldu (dipisah) + kerupuk (dipisah) + sambal (dipisah)','bubur_ayam.jpg'),
('P02','Indomie Intel Goreng','10000','10','Indomie Telor ,sayuran sawi segar + bawang goreng + saos terpisah','indomi_goreng.jpg'),
('P03','Bubur Ketan Item','11000','10','tambahan santan akan dipisah','ketan_item.jpg');

Cara membuat keranjang belanja sederhana html

Membuat File Koneksi Database

Buatlah sebuah file dengan nama database.php file ini berfungsi untuk menghubungkan aplikasi dengan database yang telah kita buat sebelumnya.

Membuat File index.php

File index.php berfungsi sebagai file utama yang akan dibuka saat pengguna mengakses project di dalam server localhost.

Pada contoh ini kita juga menggunakan framework CSS bootstrap agar tampilan antarmuka lebih bagus. File-file bootsrap kita load menggunakan metode CDN sehingga teman-teman perlu memastikan komputer harus terkoneksi kedalam jaringan internet.

Seperti yang telah saya sebutkan diatas bahwa untuk membuat shopping cart kita akan menggunakan session PHP yang perlu kita aktifkan menggunakan perintah session_start() seperti yang terlihat pada file index.php baris ke 2.






    

Maaf. Halaman tidak di temukan !

"; break; } }else { include "produk.php"; } ?>

Perhatikan pada sintak diatas pada bagian sintak PHP halaman dibagi dan seleksi menggunakan pemilihan switch halaman akan di tampilkan berdasarkan nilai dari variabel halaman.

Membuat file produk.php

File produk.php berfungi untuk mengambil data-data produk dari database dan ditampilkan diaplikasi.

0){ while ($data = mysqli_fetch_array($hasil)): ?> Tidak ada produk pada kategori ini.
"; }; ?>

Ketika pengguna mengklik tombol ‘Masukan Keranjang’ aplikasi akan mengarahkan ke halaman keranjang belanja dengan menampilkan produk yang dipilih tersebut.

Tampilan Halaman Produk

Cara membuat keranjang belanja sederhana html

Membuat file keranjang-belanja.php

File keranjang-belanja.php berfungsi untuk menampung sementara produk yang dipilih oleh pelanggan. Keranjang belanja memiliki fitur update untuk mengubah QTY suatu produk dan fungsi untuk menghapus produk yang telah dimasukan kedalam keranjang belanja.

array('kode_produk'=>$kode_produk,'nama_produk'=>$nama_produk,'jumlah'=>$jumlah,'harga'=>$harga,'stok'=>$stok));
    if(!empty($_SESSION["keranjang_belanja"])) {
        if(in_array($data['kode_produk'],array_keys($_SESSION["keranjang_belanja"]))) {
            foreach($_SESSION["keranjang_belanja"] as $k => $v) {
                if($data['kode_produk'] == $k) {
                    $_SESSION["keranjang_belanja"] = array_merge($_SESSION["keranjang_belanja"],$itemArray);
                }
            }
        } else {
            $_SESSION["keranjang_belanja"] = array_merge($_SESSION["keranjang_belanja"],$itemArray);
        }
    } else {
        $_SESSION["keranjang_belanja"] = $itemArray;
    }
    break;
    //Fungsi untuk menghapus item dalam cart
    case "hapus":

        if(!empty($_SESSION["keranjang_belanja"])) {
            foreach($_SESSION["keranjang_belanja"] as $k => $v) {
                    if($_GET["kode_produk"] == $k)
                        unset($_SESSION["keranjang_belanja"][$k]);
                    if(empty($_SESSION["keranjang_belanja"]))
                        unset($_SESSION["keranjang_belanja"]);
            }
        }
    break;

    case "update":
        $itemArray = array($kode_produk=>array('kode_produk'=>$kode_produk,'nama_produk'=>$nama_produk,'jumlah'=>$jumlah,'harga'=>$harga));
        if(!empty($_SESSION["keranjang_belanja"])) {
            foreach($_SESSION["keranjang_belanja"] as $k => $v) {
                if($_GET["kode_produk"] == $k)
                $_SESSION["keranjang_belanja"] = array_merge($_SESSION["keranjang_belanja"],$itemArray);
            }
        }
    break;
}
?>

Keranjang Belanja

"/>
No Kode Nama Harga QTY Sub Total Aksi
Rp. " class="form-control" id="jumlah" name="jumlah[]" > Rp.
" id="jumlaha" value="" class="form-control">
Delete

Total Pembayaran Rp.

Pada halaman keranjang belanja terdapat tiga bagian yang dikerjakan dihalaman ini yakni tambah produk, update dan hapus, ketiganya dibagi masing-masing sesuai fungsinya saat pengguna melakukan aksi.

Tampilan Keranjang Belanja

Cara membuat keranjang belanja sederhana html

Download Source Code

Silahkan teman-teman bisa download GRATIS source code shopping cart (keranjang belanja) menggunakan PHP dan MySQLi dibawah ini: