Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Shopping Cart Codeigniter 4 Full Tutorial – Part 2

4 min read

Tutorial Shopping Cart Codeigniter 4 Part 2 - Ilmu Coding

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:

Shopping Cart Codeigniter 4 Full Tutorial - Part 2 - Structure View

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
localhost:8080/cart

Jika berhasil, maka berikut ini tampilan jika keranjang belanja masih kosong:

Shopping Cart Codeigniter 4 Full Tutorial - Part 2 - Cart Null

… dan jika sudah berisi beberapa product yang telah dimasukan ke keranjang, maka akan tampil seperti gambar di bawah ini:

Shopping Cart Codeigniter 4 Full Tutorial - Part 2 - Cart > 0

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.

Download via Github

Semoga bermanfaat …

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

4 Replies to “Shopping Cart Codeigniter 4 Full Tutorial – Part 2”

  1. Ini pakainya session ya bang?
    Jadi ketika kita logout yang ada session destroy-nya apakah cart nya akan otomatis kosong? makasih

Leave a Reply

Your email address will not be published. Required fields are marked *