Tutorial Membuat Fitur Shopping Cart Menggunakan Codeigniter 4. Pada part ke 1, kita sudah membuat halaman product dan menampilkan jumlah cart di dalam keranjang belanja. Nah, pada kesempatan kali ini kita akan melanjutkannya.
Pada part ke 2, kita akan belajar untuk menginstall library cart di Codeigniter 4, membuat halaman cart, update cart berdasarkan quantity, menampilkan sub total dan total serta masih banyak lagi.
Saya sangat menyarankan agar membaca tutorial part pertama terlebih dahulu.
Part 1: Shopping Cart Codeigniter 4 Full Tutorial – Part 1
Jika sudah membaca dan mempraktikkan part 1 sampai berhasil, mari langsung saja kita mulai ke tahap coding di part ke 2 ini.
Let’s go!
Install dan Setup Library / Package WFcart
Package ini didesign untuk mempermudah kita membuat fitur cart menggunakan Codeigniter 4. Cara penggunaan dan installasinya cukup mudah dan dijelaskan secara detail.
Langsung saja kita install dan setup.
Let’s go!
Step 1: Masuk ke Folder ThirdParty
Melalui terminal, silahkan masuk ke direktory ThirdPary dengan perintah berikut ini:
cd app/ThirdParty
Step 2: Clone Library / Package WFcart
Setelah masuk ke direktori ThirdParty, silahkan ketik perintah berikut ini:
git clone https://github.com/wildanfuady/WFcart.git
Jika berhasil, maka librarynya akan berada seperti pada gambar berikut ini:
Step 3: Setup WFcart di Autoload
Silahkan buka file Autoload.php pada direktory app/Config/Autoload.php
Kemudian cari kode berikut ini:
$psr4 = [ 'App' => APPPATH, // To ensure filters, etc still found, APP_NAMESPACE => APPPATH, // For custom namespace 'Config' => APPPATH . 'Config', ];
Tambahkan 1 baris kode seperti di bawah ini:
$psr4 = [ 'App' => APPPATH, // To ensure filters, etc still found, APP_NAMESPACE => APPPATH, // For custom namespace 'Config' => APPPATH . 'Config', 'Wildanfuady' => APPPATH . 'ThirdParty/WFcart/Wildanfuady' ];
Selesai.
Membuat Fitur Shopping Cart Menggunakan Codeigniter 4
Sekarang kita masuk ke tahap pembuatan controller untuk menghandle Cart. Silahkan ikuti beberap step di bawah ini:
Step 1: Buat Controller Cart
Silahkan buat file baru bernama Cart.php dan simpan di dalam direktori app/Controllers.
Kemudian ketik kode berikut ini:
<?php namespace App\Controllers;
use App\Models\Product_model;
// memanggil library / package WFcart
use Wildanfuady\WFcart\WFcart;
class Cart extends BaseController
{
public function __construct() {
// memanggil product model
$this->product = new Product_model;
// membuat variabel untuk menampung class WFcart
$this->cart = new WFcart();
// memanggil form helper
helper('form');
}
public function index()
{
// membuat variabel untuk menampung total keranjang belanja
$data['items'] = $this->cart->totals();
// menampilkan total belanja dari semua pembelian
$data['total'] = $this->cart->count_totals();
// menampilkan halaman view cart
return view('cart/index', $data);
}
public function beli($id = null)
{
// cari product berdasarkan id
$product = $this->product->getProduct($id);
// cek data product
if($product != null){ // jika product tidak kosong
// buat variabel array untuk menampung data product
$item = [
'id' => $product['id'],
'name' => $product['name'],
'price' => $product['price'],
'photo' => $product['photo'],
'quantity' => 1
];
// tambahkan product ke dalam cart
$this->cart->add_cart($id, $item);
// tampilkan nama product yang ditambahkan
$product = $item['name'];
// success flashdata
session()->setFlashdata('success', "Berhasil memasukan {$product} ke karanjang belanja");
} else {
// error flashdata
session()->setFlashdata('error', "Tidak dapat menemukan data product");
}
return redirect()->to('/product');
}
// function untuk update cart berdasarkan id dan quantity
public function update()
{
// update cart
$this->cart->update();
return redirect()->to('/cart');
}
// function untuk menghapus cart berdasarkan id
public function remove($id = null)
{
// cari product berdasarkan id
$product = $this->product->getProduct($id);
// cek data product
if($product != null){ // jika product tidak kosong
// hapus keranjang belanja berdasarkan id
$this->cart->remove($id);
// success flashdata
session()->setFlashdata('success', "Berhasil menghapus product dari keranjang belanja");
} else { // product tidak ditemukan
// error flashdata
session()->setFlashdata('error', "Tidak dapat menemukan data product");
}
return redirect()->to('/cart');
}
}
Step 2: Buat Halaman View Cart
Sekarang silahkan buat folder baru bernama cart di dalam direktori app/Views. Di dalam folder tersebut buat file bernama index.php.
Gambarannya seperti ini:
Kemudian ketik kode berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codeigniter 4 Shopping Cart by Ilmu Coding</title>
<link rel="stylesheet" href="<?php echo base_url('bootstrap/css/bootstrap.min.css'); ?>">
<link rel="stylesheet" href="<?php echo base_url('font-awesome/css/font-awesome.min.css'); ?>">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-5">Tutorial Codeigniter 4 Shopping Cart</h1>
<div class="card">
<div class="card-header">List Cart</div>
<div class="card-body">
<!-- tampilkan pesan success -->
<?php if(session()->getFlashdata('success') != null){ ?>
<div class="alert alert-success">
<?php echo session()->getFlashdata('success'); ?>
</div>
<?php } ?>
<!-- selesai menampilkan pesan success -->
<?php if(count($items) != 0){ // cek apakan keranjang belanja lebih dari 0, jika iya maka tampilkan list dalam bentuk table di bawah ini: ?>
<div class="table-responsive">
<?php echo form_open('cart/update'); ?>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Photo</th>
<th>Quantity</th>
<th>Price</th>
<th>Sub Total</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<?php foreach($items as $key => $item) { ?>
<tr>
<td><?php echo $key + 1; ?></td>
<td><?php echo $item['name']; ?></td>
<td><img src="<?php echo base_url('images/'.$item['photo']); ?>" width="100px"></td>
<td>
<input type="number" name="quantity[]" min="1" class="form-control" value="<?php echo $item['quantity']; ?>" style="width:50px">
</td>
<td>Rp. <?php echo number_format($item['price'], 0, 0, '.'); ?></td>
<td>Rp. <?php echo number_format($item['quantity'] * $item['price'], 0, 0, '.'); ?></td>
<td class="text-center">
<div class="btn-group">
<button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i></button>
<a href="<?php echo base_url('cart/remove/'.$item['id']); ?>" class="btn btn-danger btn-sm" onclick="return confirm('Apakah Anda yakin ingin menghapus product ini dari keranjang belanja?')"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
<?php } ?>
<tr>
<td colspan="5" class="text-right">Jumlah</td>
<td>Rp. <?php echo number_format($total, 0, 0, '.'); ?></td>
</tr>
</tbody>
</table>
<?php echo form_close(); ?>
</div>
<?php } // selesai menampilkan list cart dalam bentuk table ?>
<?php if(count($items) == 0){ // jika cart kosong, maka tampilkan: ?>
Keranjang belanja Anda sedang kosong. <a href="<?php echo base_url('product'); ?>" class="btn btn-success">Belanja Yuk</a>
<?php } else { // jika cart tidak kosong, tampilkan: ?>
<a href="<?php echo base_url('product'); ?>" class="btn btn-success">Lanjut Belanja</a>
<?php } ?>
</div>
</div>
</div>
</div>
</body>
</html>
Sampai di sini sudah selesai tahapnya. Penjelasannya sudah ada di dalam source code ya.
Testing Fitur Cart Codeigniter 4 dengan WFcart
Sekarang kita balik lagi ke direktori project.
cd ../.. php spark serve
Perhatikan gambar di bawah ini ya:
Kemudian buka browser Anda dan ketik URL ini:
localhost:8080/product atau localhost:8080/cart
Jika berhasil, maka berikut ini tampilan jika keranjang belanja masih kosong:
… dan jika sudah berisi beberapa product yang telah dimasukan ke keranjang, maka akan tampil seperti gambar di bawah ini:
Penutup
Alhamdulillah telah selesai tutorial membuat fitur shopping cart menggunakan Codeigniter 4 pada kesempatan kali ini. Saya berharap tutorial ini banyak yang akan mengembangkannya.
Setelah bisa mempraktikkan tutorial ini, jangan puas dulu. Masih banyak hal yang perlu kita pelajari di Codeigniter 4.
… dan untuk mendukung tutorial kali ini, saya meryertakan source code yang bisa Anda download via Github.
Semoga bermanfaat …
Ini pakainya session ya bang?
Jadi ketika kita logout yang ada session destroy-nya apakah cart nya akan otomatis kosong? makasih
Yaps, betul.
Mantab bang, semangat terus sharing nya
Mantap
terima kasih atas tutorialnya,
saya mau update quantity pada halaman cart
http://localhost:8080/cart, tapi selalu error : Undefined index: quantity, scriptnya cart[$i][‘quantity’] = $_POST[‘quantity’][$i]; pada WFCart.php method update.bagaimana solusinya ya
Kang, kalo checkout masuk ke databasenya gimana kang?
Tinggal bawa hasil sessionnya ke database mallui form metode POST.
Hallo bg. Ini apakah ketika edit quantity ny udh auto ngerubah total harga ?
Perlu disubmit untuk updatenya. Kalau mau otomatis, gunakan ajax aja.