Tutorial CRUD Menampilkan Data dengan CodeIgniter 4

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.

1-tutorial-crud-menampilkan-data-codeigniter-4

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!

Related Posts
Cara Install CodeIgniter di Softaculous cPanel

Hai, Sobat Jagoan! Softaculous adalah fitur auto-installer yang biasanya tersedia di cPanel dan digunakan untuk memasang berbagai aplikasi web secara Read more

Cara Install CodeIgniter dengan Composer di cPanel Hosting

Hai, Sobat Jagoan! Saat kamu mengembangkan proyek CodeIgniter, menggunakan Composer adalah langkah terbaik. Selain mendapatkan versi resmi terbaru, kamu juga Read more

Clone Proyek CodeIgniter dari Remote Repository ke Hosting

Halo, Sobat! Remote repository adalah tempat penyimpanan proyek kamu di server Git yang bisa diakses dari mana saja melalui internet. Read more

Memahami Konsep Dasar CodeIgniter 4

Hai, Sobat Jagoan! Sebelum nyemplung lebih jauh dengan CodeIgniter versi 4, kamu perlu mengenal dan memahami konsep dasar CodeIgniter 4 Read more