Tutorial Membuat Fitur Shopping Cart di Codeigniter 4. Dewasa ini, fitur shooping cart sudah sering digunakan pada situs website atau aplikasi mobile semisal toko online dan e-commerce. Fitur shopping cart bisa kita buat sendiri atau menggunakan library yang sudah ada.
Pokok bahasan tutorial kali ini akan mengacu pada salah satu framework PHP yang sangat populer, yaitu Codeigniter. Library shopping cart bisa kita temukan pada Codeigniter versi 3. Namun, pada versi 4, Codeigniter tidak menyediakannya. Anda bisa membaca informasinya di https://codeigniter4.github.io/userguide/libraries/index.html. Pada page tersebut, tidak ada fitur Cart seperti pada versi ke 3. Hal ini membuat saya penasaran dan mencoba membuat fitur Shopping Cart di Codeigniter 4.
Cara Membuat Fitur Shopping Cart di Codeigniter 4
Sekarang, kita akan masuk ke point utama di artikel kali ini tentang membuat fitur Shopping Cart dengan menggunakan Codeigniter 4. Silahkan ikuti langkah demi langkah ini:
Step 1: Membuat Database Shopping Cart
Silahkan buat database baru bernama ci4_cart di web server Anda. Anda bisa menggunakan XAMPP, WAMP atau Laragon sesuai dengan aplikasi yang digunakan.
Step 2: Install Codeigniter 4
Silahkan download file Codeigniter 4 di situs resmi Codeigniter.com atau Anda bisa membaca tutorial lengkap cara menginstall Codeigniter 4 di situs ilmu coding. Silahkan simpan file baru tersebut di web server yang Anda gunakan. Misalnya di htdocs jika Anda menggunakan XAMPP atau di www jika Anda menggunakan Laragon.
Step 3: Setup Environment dan Konfigurasi Database
Setiap kali Anda download atau install Codeigniter 4, Anda akan menemukan file bernama env. File ini memiliki fungsi yang sangat penting. Yaitu bisa mengatur environment secara langsung (development, testing dan production) serta mengatur setup database.
Oke, pertama silahkan ubah nama file env menjadi .env (ingat ya, tambahkan titik di depannya).
Kedua, kita membutuhkan environment development agar jika dalam tahap ngoding terjadi error, kita bisa memperbaikinya. Langsung saja cari kode berikut ini:
# CI_ENVIRONMENT = production
Ubah menjadi:
CI_ENVIRONMENT = development
Ketiga, kita perlu mengatur nama database, username dan passwordnya. Jadi, silahkan cari kode berikut ini:
# database.default.hostname = localhost # database.default.database = ci4 # database.default.username = root # database.default.password = root # database.default.DBDriver = MySQLi
Ubah menjadi:
database.default.hostname = localhost database.default.database = ci4_cart database.default.username = root database.default.password = database.default.DBDriver = MySQLi
Kalau diperhatikan, saya menghapus tanda tagar dan value dari password. Memang saya tidak menggunakan password di webserver local yang saya gunakan. Jadi saya kosongkan saja.
Step 4: Membuat Table Products
Saya akan membuat table products menggunakan fitur migrate yang disediakan oleh Codeigniter 4. Silahkan ketik perintah berikut ini di terminal:
php spark migrate:create products
Jika berhasil, maka akan terdapat file baru di root/app/Database/Migrations/xxxxxxx_products.php. Nah, kita perlu memodifikasinya menjadi seperti ini:
<?php namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
class Products extends Migration
{
public function up()
{
$this->forge->addField([
'id' => [
'type' => 'INT',
'constraint' => 11,
'auto_increment' => true
],
'name' => [
'type' => 'VARCHAR',
'constraint' => 50
],
'price' => [
'type' => 'INT',
'constraint' => 11
],
'description' => [
'type' => 'TEXT'
],
'photo' => [
'type' => 'VARCHAR',
'constraint' => 50
]
]);
$this->forge->addKey('id');
$this->forge->createTable('products');
}
public function down()
{
//
}
}
Dengan memperhatikan code di atas, kita bisa memahami kalau field-field yang akan kita buat adalah id, name, price, description dan photo.
Kemudian agar code di atas bisa berjalan di database kita, silahkan ketik perintah berikut ini:
php spark migrate
Jika berhasil, maka table products akan terbentuk di database kita.
Step 5: Menyiapkan Assets Bootstrap, Font Awesome dan Images
Saya menggunakan bootstrap dan gambar yang bisa Anda download di link Google Drive yang akan saya berikan. Silahkan download di sini.
Jika sudah mendownloadnya, pindahkan file assets.zip tersebut ke ROOT/public. Kemudian extract here.
Perhatikan isi folder public melalui gambar di bawah ini:
Oke, sekarang sudah ada 3 file assets yang kita miliki, yaitu bootstrap, fontawesome dan images.
Step 6: Membuat Data Dummy di Table Products
Silahkan buat data dummy secara menual di dalam table products. Sebagai contoh, saya akan membuat data dummy di table products seperti gambar di bawah ini:
Step 7: Membuat Model Product
Silahkan buat file baru bernama Product_model.php dan simpan di direktori ROOT/app/Models.
Kemudian isi file tersebut dengan kode di bawah ini:
<?php
namespace App\Models;
use CodeIgniter\Model;
class Product_model extends Model{
protected $table = "products";
protected $primaryKey = "id";
public function getProduct($id)
{
return $this->db->table($this->table)->where('id', $id)->get()->getRowArray();
}
}
Silahkan pahami dulu kode di atas, jika belum, saran saya jangan lanjut ke step berikutnya.
Jelasin donk, Mas…
Oke, jadi intinya saya membuat function untuk mengambil data product berdasarkan id-nya. Tak lupa saya memberikan value products pada variabel $table dan value id di $primaryKey.
Step 8: Membuat Controller Product
Silahkan buat file baru bernama Product.php dan simpan di dalam file ROOT/app/Controllers.
Kemudian silahkan isi file Product.php dengan kode di bawah ini:
<?php namespace App\Controllers;
use App\Models\Product_model;
class Product extends BaseController
{
public function __construct() {
$this->product = new Product_model;
}
public function index()
{
// membuat variabel untuk menampung session cart
$session = session('cart');
// membuat variabel total yang isinya mengecek ada atau tidak
// variabel session dan memasukannya ke dalam array values
// jika session cart tidak ada, tampilkan array() / kosong
$data['total'] = is_array($session)? array_values($session): array();
// menampilkan semua data product yang ada di dalam database
$data['items'] = $this->product->findAll();
// menampilkan halaman view product dan membawa variabel data
return view('product/index', $data);
}
}
Penjelasannya sudah ada di setiap baris kode di atas ya.
Step 9: Membuat View Product
Silahkan buat folder baru bernama product di direktori ROOT/app/Views dan di dalam folder tersebut buat file bernama index.php.
Pada file index.php silahkan ketikan 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">
<h3 class="text-center mb-5">Tutorial Codeigniter 4 Shopping Cart</h3>
<div class="card">
<div class="card-header">
List Product
<a class="btn btn-success btn-sm float-right" href="<?php echo base_url('cart'); ?>"><i class="fa fa-cart-plus"></i> <?php echo count($total); ?></a>
</div>
<div class="card-body">
<?php if(session()->getFlashdata('success') != null){ ?>
<div class="alert alert-success">
<?php echo session()->getFlashdata('success'); ?>
</div>
<?php } ?>
<?php if(session()->getFlashdata('error') != null){ ?>
<div class="alert alert-danger">
<?php echo session()->getFlashdata('error'); ?>
</div>
<?php } ?>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Price</th>
<th>Desc</th>
<th>Photo</th>
<th>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>Rp. <?php echo number_format($item['price'], 0, 0, '.'); ?></td>
<td><?php echo $item['description']; ?></td>
<td><img src="<?php echo base_url('images/'.$item['photo']); ?>" width="100px"></td>
<td>
<a href="<?php echo base_url('cart/beli/'.$item['id']); ?>" class="btn btn-primary">Beli</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Step 10: Testing Halaman Product
Silahkan jalankan webserver Anda (terutama apache dan mysql) dan ketik perintah berikut ini melalui terminal untuk menjalankan file project Codeigniter 4:
php spark serve
Jika berhasil, silahkan buka browser dan silahkan ketik URL berikut:
localhost:8080/product
Jika tidak ada kendala, hasilnya adalah sebagai berikut:
Penutup
Demikianlah tutorial membuat fitur shopping cart di Codeigniter 4 pada part pertama ini. Insya Allah saya akan melanjutkannya sampai ke part ke 2. Pada part terakhir tak lupa saya akan menyertakan source code yang bisa Anda download di Github. Jadi, pastikan Anda tidak melewatkan part ke 2 nanti ya.
Semoga bermanfaat…
Selamat belajar …
