Pada tutorial ini, kita akan belajar membuat CRUD Template Layout Sidebar CodeIgniter 4. Struktur ini membantu developer dalam mengelola tampilan aplikasi secara lebih rapi dan terorganisir. Template Layout di CodeIgniter 4 berfungsi sebagai kerangka utama, sementara Sidebar menjadi navigasi utama untuk mengakses fitur CRUD. Kita akan menghubungkan template layout dengan Controller dan View sehingga proses CRUD dapat berjalan secara optimal dan terstruktur.
Langkah Membuat CRUD Template Layout dan Sidebar di CodeIgniter 4
Langkah-langkah CRUD di dalam Template Layout CodeIgniter 4 akan kita bahas secara detail.
1️⃣ Membuat Model CRUD
Buat file baru di app/Models/ProdukModel.php
<?php
namespace AppModels;
use CodeIgniterModel;
class ProdukModel extends Model
{
protected $table = 'produk';
protected $primaryKey = 'id';
protected $allowedFields = ['kode_produk', 'nama_produk', 'harga', 'stok'];
}
2️⃣ Membuat Controller CRUD
Lokasi: app/Controllers/Produk.php
<?php
namespace AppControllers;
use AppModelsProdukModel;
use CodeIgniterController;
class Produk extends Controller
{
protected $produkModel;
public function __construct()
{
$this->produkModel = new ProdukModel();
helper(['form']);
}
public function index()
{
$data['produk'] = $this->produkModel->findAll();
return view('produk/index', $data);
}
public function create()
{
return view('produk/create');
}
public function store()
{
$this->produkModel->save([
'kode_produk' => $this->request->getPost('kode_produk'),
'nama_produk' => $this->request->getPost('nama_produk'),
'harga' => $this->request->getPost('harga'),
'stok' => $this->request->getPost('stok'),
]);
return redirect()->to('/produk');
}
public function edit($id)
{
$data['produk'] = $this->produkModel->find($id);
return view('produk/edit', $data);
}
public function update($id)
{
$this->produkModel->update($id, [
'kode_produk' => $this->request->getPost('kode_produk'),
'nama_produk' => $this->request->getPost('nama_produk'),
'harga' => $this->request->getPost('harga'),
'stok' => $this->request->getPost('stok'),
]);
return redirect()->to('/produk');
}
public function delete($id)
{
$this->produkModel->delete($id);
return redirect()->to('/produk');
}
}
3️⃣ Membuat Template dan Sidebar
Pada langkah ini, kita akan membuat struktur template lengkap dengan sidebar di CodeIgniter 4. Template ini akan menjadi dasar tampilan untuk semua halaman, sehingga mempermudah proses pengelolaan tampilan secara konsisten. Sidebar akan berfungsi sebagai navigasi utama untuk mengakses fitur CRUD dan halaman lainnya.
Lokasi:📄 app/Views/layout/template.php
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title><?= $title ?? 'Aplikasi Toko POS' ?></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
min-height: 100vh;
display: flex;
}
.sidebar {
width: 250px;
background-color: #343a40;
color: #fff;
}
.sidebar a {
color: #fff;
text-decoration: none;
padding: 12px;
display: block;
}
.sidebar a:hover {
background-color: #495057;
}
.content {
flex-grow: 1;
padding: 20px;
}
</style>
</head>
<body>
<div class="sidebar">
<h4 class="text-center py-3">📦 POS Toko</h4>
<a href="/">Dashboard</a>
<a href="/produk">Produk</a>
<a href="/transaksi">Transaksi</a>
<a href="/laporan">Laporan</a>
<a href="/logout">Logout</a>
</div>
<div class="content">
<?= $this->renderSection('content') ?>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Tambahkan di semua view CRUD yang sudah dibuat:
📄 app/Views/produk/index.php
<?= $this->extend('layout/template') ?>
<?= $this->section('content') ?>
<h2>Daftar Produk</h2>
<a href="/produk/create" class="btn btn-primary mb-3">+ Tambah Produk</a>
<table class="table table-bordered">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Nama Produk</th>
<th>Harga</th>
<th>Stok</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($produk as $i => $p): ?>
<tr>
<td><?= $i + 1 ?></td>
<td><?= esc($p['nama_produk']) ?></td>
<td>Rp<?= number_format($p['harga'], 0, ',', '.') ?></td>
<td><?= $p['stok'] ?></td>
<td>
<a href="/produk/edit/<?= $p['id'] ?>" class="btn btn-warning btn-sm">Edit</a>
<form action="/produk/delete/<?= $p['id'] ?>" method="post" class="d-inline" onsubmit="return confirm('Yakin hapus?')">
<?= csrf_field() ?>
<button class="btn btn-danger btn-sm">Hapus</button>
</form>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<?= $this->endSection() ?>
Di📄 app/Views/produk/create.php
<?= $this->extend('layout/template') ?>
<?= $this->section('content') ?>
<h2>Tambah Produk</h2>
<a href="/produk" class="btn btn-primary mb-3"><< Kembali</a>
<form method="post" action="/produk/store">
<label>Kode</label><br>
<input type="text" name="kode_produk"><br>
<label>Nama</label><br>
<input type="text" name="nama_produk"><br>
<label>Harga</label><br>
<input type="number" name="harga"><br>
<label>Stok</label><br>
<input type="number" name="stok"><br>
<button type="submit">Simpan</button>
</form>
<?= $this->endSection() ?>
Di📄 app/Views/produk/edit.php
<?= $this->extend('layout/template') ?>
<a href="/produk" class="btn btn-primary mb-3"><< Kembali</a>
<h2>Edit Produk</h2>
<form method="post" action="/produk/update/<?= $produk['id']; ?>">
<label>Kode</label><br>
<input type="text" name="kode_produk" value="<?= $produk['kode_produk']; ?>"><br>
<label>Nama</label><br>
<input type="text" name="nama_produk" value="<?= $produk['nama_produk']; ?>"><br>
<label>Harga</label><br>
<input type="number" name="harga" value="<?= $produk['harga']; ?>"><br>
<label>Stok</label><br>
<input type="number" name="stok" value="<?= $produk['stok']; ?>"><br>
<button type="submit">Update</button>
</form>
<?= $this->endSection() ?>
🌐 4. Atur Route
Tambahkan ke app/Config/Routes.php
$routes->get('/produk', 'Produk::index');
$routes->get('/produk/create', 'Produk::create');
$routes->post('/produk/store', 'Produk::store');
$routes->get('/produk/edit/(:num)', 'Produk::edit/$1');
$routes->post('/produk/update/(:num)', 'Produk::update/$1');
$routes->get('/produk/delete/(:num)', 'Produk::delete/$1');
✅ Hasil Akhir
Dengan fitur ini:
- Admin dapat menambahkan produk baru ke sistem.
- Melihat semua daftar produk.
- Melakukan perubahan atau penghapusan data produk.
- Data produk akan terhubung langsung ke sistem transaksi (Part 4).
Sekarang, aplikasi CRUD dengan Template berikut Sidebar pada CodeIgniter 4 sudah berhasil dibuat. Kamu bisa menambah, melihat, dan menghapus data produk dengan tampilan sidebar yang rapi. Di tutorial berikutnya, kita akan menambahkan fitur update dan validasi form.
