#Part 3: Tutorial CRUD Lengkap CI4 + Bootstrap 5 + Pagination + Search

#Part 3: Tutorial CRUD Lengkap CI4 + Bootstrap 5 + Pagination + Search

Setelah paham Routing dan Controller di #Part 2, sekarang kita masuk ke materi paling penting: CRUD. CRUD adalah singkatan dari Create, Read, Update, Delete. 90% aplikasi web di dunia isinya CRUD.

Di part ini kita akan bikin aplikasi "Manajemen Data Produk" untuk toko online. Lengkap dengan Bootstrap 5 biar tampilannya profesional, Pagination biar data banyak tidak lemot, dan Search.

1. Persiapan Database dan Studi Kasus

Kita akan buat tabel produk untuk toko. Buka phpMyAdmin lalu jalankan SQL ini:

CREATE TABLE `produk` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_produk` varchar(255) NOT NULL,
  `harga` int(11) NOT NULL,
  `stok` int(11) NOT NULL,
  `deskripsi` text,
  `created_at` datetime DEFAULT current_timestamp(),
  PRIMARY KEY (`id`)
);

2. Membuat Model di CI4

Model bertugas berkomunikasi dengan database. Buat file app/Models/ProdukModel.php

Penjelasan: $allowedFields wajib! Ini untuk keamanan biar tidak bisa insert field sembarangan.

3. Membuat Controller ProdukController

Buat file app/Controllers/Produk.php. Kita bikin 6 method untuk CRUD lengkap.

produkModel = new ProdukModel();
    }

    public function index() {
        $keyword = $this->request->getVar("keyword");
        if($keyword) {
            $data["produk"] = $this->produkModel->like("nama_produk", $keyword)->paginate(5, "produk");
        } else {
            $data["produk"] = $this->produkModel->paginate(5, "produk");
        }
        $data["pager"] = $this->produkModel->pager;
        return view("produk/index", $data);
    }

    public function create() { return view("produk/create"); }
    
    public function store() {
        $this->produkModel->save($this->request->getPost());
        return redirect()->to("/produk")->with("success", "Data berhasil ditambah");
    }

    public function edit($id) {
        $data["produk"] = $this->produkModel->find($id);
        return view("produk/edit", $data);
    }

    public function update($id) {
        $this->produkModel->update($id, $this->request->getPost());
        return redirect()->to("/produk")->with("success", "Data berhasil diupdate");
    }

    public function delete($id) {
        $this->produkModel->delete($id);
        return redirect()->to("/produk")->with("success", "Data berhasil dihapus");
    }
}

Catatan: Di method index ada fitur Search dan Pagination. paginate(5) artinya 1 halaman isi 5 data.

4. Membuat View dengan Bootstrap 5

Biar rapi kita pakai Bootstrap 5 via CDN. Buat 3 file: index, create, edit.

View: app/Views/produk/index.php

Isinya: Navbar, Form Search, Tabel Data, Tombol Tambah, Edit, Hapus, dan Link Pagination links() ?>

View: app/Views/produk/create.php

Isinya: Form input nama_produk, harga, stok, deskripsi. Action ke /produk/store

View: app/Views/produk/edit.php

Sama seperti create, tapi value input diisi data lama dan action ke /produk/update/

5. Mengatur Routing

Buka app/Config/Routes.php tambahkan: $routes->resource("produk"); 1 baris ini otomatis bikin route untuk index, create, store, edit, update, delete. Mantap!

6. Kelebihan Pakai Bootstrap 5 di CI4

•  
• Responsif: Otomatis bagus di HP dan Desktop
•  
• Komponen Lengkap: Ada Modal, Alert, Card, Table
•  
• Hemat Waktu: Tidak perlu bikin CSS dari nol
•  

Kesimpulan

Selamat! Aplikasi CRUD kamu sudah jadi dan siap dipakai. Ini pondasi untuk bikin aplikasi kasir, inventory, dll. Di #Part 4: Validasi Form dan Upload Gambar kita akan amankan form ini agar tidak bisa diisi data kosong.

FAQ

Apa itu $allowedFields?

Fitur keamanan CI4. Hanya field yang ada di sini yang boleh diisi via form. Mencegah Mass Assignment.

Bagaimana cara ganti jumlah data per halaman?

Ubah angka di paginate(5) jadi paginate(10)

Apakah $routes->resource wajib?

Tidak, tapi sangat memudahkan. 1 baris ganti 6 baris route manual.