Contoh Aplikasi

الصفحة الرئيسية
Codeigniter 4

Tutorial Pembuatan Halaman Kategori Menggunakan CodeIgniter

Artikel berikut membahas mengenai Tutorial Pembuatan Halaman Kategori Menggunakan CodeIgniter
Tutorial Pembuatan Halaman Kategori Menggunakan CodeIgniter

Dalam artikel ini, kita akan membahas cara membuat halaman kategori menggunakan framework CodeIgniter 4. Proses ini mencakup pembuatan model, controller, dan view untuk mengelola data kategori. Kita juga akan menggunakan XAMPP sebagai server lokal untuk menguji aplikasi kita.

Langkah-langkah Pembuatannya

1. Persiapan Lingkungan

Sebelum memulai, pastikan Anda telah menginstal XAMPP dan mengonfigurasikan Apache serta MySQL. Setelah itu, buat database baru untuk aplikasi kita.

  1. Buka phpMyAdmin melalui browser Anda dengan mengunjungi http://localhost/phpmyadmin.

  2. Buat database baru, misalnya kategori_db.

  3. Buat tabel categories menggunakan query SQL berikut:

    CREATE TABLE categories (
    id INT AUTO_INCREMENT PRIMARY KEY,
    category_name VARCHAR(100) NOT NULL,
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

2. Membuat Model

Model bertanggung jawab untuk berinteraksi dengan database. Mari kita buat model KategoriModel.

  1. Buka folder app/Models/.

  2. Buat file baru bernama KategoriModel.php dan masukkan kode berikut:

    <?php

namespace App\Models;
use CodeIgniter\Model;

class KategoriModel extends Model {
    protected $table = 'categories';
    protected $primaryKey = 'id';
    protected $returnType = 'object';
    protected $allowedFields = ['category_name', 'description'];
    protected $useTimestamps = true;
    protected $createdField  = 'created_at';
    protected $updatedField  = 'updated_at';
}

3. Membuat Controller

Controller mengelola logika aplikasi. Kita akan membuat controller Kategori untuk mengelola operasi CRUD.

  1. Buka folder app/Controllers/.

  2. Buat file baru bernama Kategori.php dan masukkan kode berikut:

    <?php

namespace App\Controllers;

use App\Models\KategoriModel;

class Kategori extends BaseController
{
    protected $kategoriModel;

    public function __construct()
    {
        $this->kategoriModel = new KategoriModel();
    }

    public function index()
    {
        $data['kategori'] = $this->kategoriModel->findAll();
        return view('kategori/index', $data);
    }

    public function create()
    {
        return view('kategori/create');
    }

    public function store()
    {
        $this->kategoriModel->save([
            'category_name' => $this->request->getVar('category_name'),
            'description' => $this->request->getVar('description')
        ]);

        return redirect()->to('/kategori')->with('success', 'Kategori berhasil ditambahkan.');
    }

    public function edit($id)
    {
        $data['kategori'] = $this->kategoriModel->find($id);
        return view('kategori/edit', $data);
    }

    public function update($id)
    {
        $this->kategoriModel->update($id, [
            'category_name' => $this->request->getVar('category_name'),
            'description' => $this->request->getVar('description')
        ]);

        return redirect()->to('/kategori')->with('success', 'Kategori berhasil diperbarui.');
    }

    public function delete($id)
    {
        $this->kategoriModel->delete($id);
        return redirect()->to('/kategori')->with('success', 'Kategori berhasil dihapus.');
    }
}

4. Membuat View

View bertanggung jawab untuk menampilkan data. Kita akan membuat tiga view: index, create, dan edit.

a. View index.php

  1. Buka folder app/Views/kategori/.

  2. Buat file baru bernama index.php dan masukkan kode berikut:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Kategori</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
    <h1>Daftar Kategori</h1>
    <a href="/kategori/create" class="btn btn-primary mb-3">Tambah Kategori</a>
    
    <?php if(session()->getFlashdata('success')): ?>
        <div class="alert alert-success">
            <?= session()->getFlashdata('success') ?>
        </div>
    <?php endif; ?>
    
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Nama Kategori</th>
                <th>Deskripsi</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($kategori as $k): ?>
                <tr>
                    <td><?= $k->id ?></td>
                    <td><?= $k->category_name ?></td>
                    <td><?= $k->description ?></td>
                    <td>
                        <a href="/kategori/edit/<?= $k->id ?>" class="btn btn-warning">Edit</a>
                        <a href="/kategori/delete/<?= $k->id ?>" class="btn btn-danger" onclick="return confirm('Yakin ingin menghapus kategori ini?');">Hapus</a>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

</body>
</html>

b. View create.php

  1. Buat file baru bernama create.php dan masukkan kode berikut:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tambah Kategori</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
    <h1>Tambah Kategori</h1>
    
    <form action="/kategori/store" method="post">
        <div class="form-group">
            <label for="category_name">Nama Kategori:</label>
            <input type="text" class="form-control" id="category_name" name="category_name" required>
        </div>
        <div class="form-group">
            <label for="description">Deskripsi:</label>
            <textarea class="form-control" id="description" name="description"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Simpan</button>
        <a href="/kategori" class="btn btn-secondary">Kembali</a>
    </form>
</div>

</body>
</html>

c. View edit.php

  1. Buat file baru bernama edit.php dan masukkan kode berikut:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Kategori</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
    <h1>Edit Kategori</h1>
    
    <form action="/kategori/update/<?= $kategori->id ?>" method="post">
        <div class="form-group">
            <label for="category_name">Nama Kategori:</label>
            <input type="text" class="form-control" id="category_name" name="category_name" value="<?= $kategori->category_name ?>" required>
        </div>
        <div class="form-group">
            <label for="description">Deskripsi:</label>
            <textarea class="form-control" id="description" name="description"><?= $kategori->description ?></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Update</button>
        <a href="/kategori" class="btn btn-secondary">Kembali</a>
    </form>
</div>

</body>
</html>

5. Menambahkan Routing

Terakhir, kita perlu menambahkan routing untuk mengarahkan permintaan ke controller Kategori.

  1. Buka file app/Config/Routes.php.

  2. Tambahkan kode berikut:

    $routes->get('/kategori', 'Kategori::index');
$routes->get('/kategori/create', 'Kategori::create');
$routes->post('/kategori/store', 'Kategori::store