Hai, Sobat Jagoan! Setelah kamu berhasil menghubungkan database dan melakukan persiapan awal pada artikel Cara Koneksi Database dan Konfigurasi Model pada CodeIgniter 4, kali ini akan membahas cara menampilkan data pada database sebagai langkah awal membuat aplikasi CRUD sederhana.
Fitur ini penting karena memungkinkan pengguna melihat data barang yang telah tersimpan di database dalam format tabel yang rapi dan responsif. Ini merupakan pondasi awal sebelum melanjutkan ke proses tambah, ubah, dan hapus data barang.
STEP 1: Membuat file view di app/Views/barang/index.php untuk menampilkan data barang. Lalu, isi file index.php tersebut dengan kode berikut:
<html lang=”id”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Data Barang</title>
<!– Bootstrap 5 CDN –>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container mt-5″>
<h2 class=”mb-4 text-center”>Daftar Barang</h2>
<div class=”card shadow rounded”>
<div class=”card-body”>
<?php if (!empty($barang)) : ?>
<table class=”table table-bordered table-hover”>
<thead class=”table-dark”>
<tr>
<th>ID</th>
<th>Nama Barang</th>
<th>Harga</th>
<th>Stok</th>
</tr>
</thead>
<tbody>
<?php foreach ($barang as $item) : ?>
<tr>
<td><?= esc($item[‘id’]) ?></td>
<td><?= esc($item[‘nama_barang’]) ?></td>
<td>Rp <?= number_format($item[‘harga’], 0, ‘,’, ‘.’) ?></td>
<td><?= esc($item[‘stok’]) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php else : ?>
<div class=”alert alert-info text-center” role=”alert”>
Belum ada data barang.
</div>
<?php endif; ?>
</div>
</div>
</div>
<!– Optional: Bootstrap JS –>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
Untuk membantu kamu memahami sintaks kode di atas, simak penjelasan singkat berikut.
- <?= esc(…) ?> digunakan untuk keamanan agar data HTML-escaped.
- number_format() dipakai agar harga tampil lebih rapi (Rp 75.000).
- Jika tidak ada data, muncul alert bertuliskan “Belum ada data barang.”
STEP 2: Kemudian buat routing view index.php di dalam app/Routes.php.
$routes->get('/barang', 'Barang::index');
STEP 3: Buka controller Barang.php yang sudah dibuat pada artikel sebelumnya dan modifikasi isi filenya menjadi seperti berikut:
<?php
namespace App\Controllers;
use App\Models\BarangModel;
class Barang extends BaseController
{
public function index()
{
$model = new BarangModel();
// Ambil semua data dari tabel barang
$data['barang'] = $model->findAll();
// Kirim data ke view barang/index
return view('barang/index', $data);
}
}
STEP 4: Buka http://localhost:8080/barang di web browser untuk melihat hasilnya.
Dengan menyelesaikan langkah-langkah di atas, kamu telah berhasil membangun fitur daftar barang yang terhubung langsung dengan database melalui model CodeIgniter. Tampilan data yang kamu buat kini bisa diakses dari browser menggunakan routing yang telah dikonfigurasi, dan dikelola melalui controller.
Di tahap berikutnya, kamu akan mempelajari cara membuat form tambah data agar aplikasi bisa digunakan untuk mencatat barang baru secara dinamis.
Kalau ada yang masih bikin bingung, jangan ragu hubungi Tim Support Jagoan Hosting ya, Sob!