Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Codeigniter 4 / Framework

Tutorial Pembuatan Halaman Kategori Menggunakan CodeIgniter

Oleh Indrawati 17 komentar
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

17 komentar untuk "Tutorial Pembuatan Halaman Kategori Menggunakan CodeIgniter "

  1. Jajang Nurjaman4 November 2024 pukul 13.31

    Jawablah Pertanyaan ini pada kolom komentar :
    1. Apa fungsi dari Controller?
    2. Apa fungsi dari Model?
    3. Apa Fungsi dari View?
    Jawab di Kolom Komentar dan jangan lupa berikan nama.

    BalasHapus
  2. Sebrina4 November 2024 pukul 13.40

    1.Controller berfungsi sebagai penghubung antara Model dan View. Tugas utama Controller adalah menerima input dari pengguna (user input), mengolahnya, dan menentukan aksi atau logika yang harus dijalankan dalam aplikasi.

    2.Fungsi Model adalah untuk melakukan operasi CRUD (Create, Read, Update, Delete) terhadap data dan memastikan bahwa data yang ditampilkan di View selalu up-to-date.

    3. View berfungsi mengambil data dari Model melalui Controller dan menyajikannya dalam format yang mudah dipahami oleh pengguna

    BalasHapus
  3. Evan fabiano4 November 2024 pukul 13.41

    Bagian Model yang bertugas untuk menyiapkan, mengatur, memanipulasi, dan mengorganisasikan data yang ada di database.
    Bagian View yang bertugas untuk menampilkan informasi dalam bentuk Graphical User Interface (GUI).
    Bagian Controller yang bertugas untuk menghubungkan serta mengatur model dan view agar dapat saling terhubung.

    BalasHapus
  4. Willi pradanda4 November 2024 pukul 13.49

    1. Controller
    Mengatur dan mengelola permintaan dan respon antara aplikasi web dan pengguna. Controller juga menjadi perantara antara front-end dengan data dari database atau static data.

    2. Model
    Merepresentasikan struktur data dan mengandung fungsi kode yang membantu proses database, seperti memasukkan, mengedit, dan menghapus data.

    3. View
    Mengatur tampilan atau output yang tampil di layar, termasuk data, gambar, video, dan diagram.

    BalasHapus
  5. Mardhiyyah Hayati4 November 2024 pukul 13.51

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. Mardhiyyah Hayati4 November 2024 pukul 13.53

    1.Controller berfungsi untuk menerima permintaan dari pengguna, memprosesnya, dan kemudian memanggil model yang sesuai untuk mengambil data atau melakukan operasi. Setelah data diperoleh, controller akan memilih view yang tepat untuk menampilkan data tersebut kepada pengguna.


    2.Model berfungsi untuk menyimpan dan mengelola data aplikasi. Model juga bertanggung jawab untuk melakukan operasi pada data, seperti menambahkan, menghapus, atau memperbarui data.

    3.View berfungsi untuk menampilkan data kepada pengguna. View menerima data dari controller dan menampilkannya dalam format yang mudah dipahami oleh pengguna. View tidak boleh mengandung logika bisnis, hanya menampilkan data yang diberikan oleh controller.

    BalasHapus
  7. Sy. Nurfazilah4 November 2024 pukul 13.55

    1. Fungsi dari Controller adalah untuk mengelola interaksi antara Model dan View, dan memproses input pengguna untuk memperbarui Model. Controller bertanggung jawab untuk menerima input pengguna dari View, memproses data tersebut, dan memperbarui Model sesuai. Kemudian, Controller meminta Model untuk mengembalikan data yang diperbarui ke View untuk ditampilkan kepada pengguna.
    2. Fungsi dari Model adalah untuk menyimpan data dan logika bisnis aplikasi. Model bertanggung jawab untuk menyimpan data aplikasi dan mengelola logika bisnis. Model tidak tahu bagaimana data ditampilkan kepada pengguna atau bagaimana pengguna berinteraksi dengan aplikasi. Model hanya tahu bagaimana data harus disimpan dan diproses.
    3. Fungsi dari View adalah untuk menampilkan informasi kepada pengguna dan mengumpulkan input pengguna. View bertanggung jawab untuk menampilkan data dari Model kepada pengguna dalam format yang dapat dibaca dan dipahami. View juga mengumpulkan input pengguna dan mengirimkannya ke Controller untuk diproses.

    BalasHapus
  8. Riki apriadi4 November 2024 pukul 13.57

    1.Controller: Mengatur alur aplikasi dengan menerima input dari pengguna, memprosesnya, dan menentukan view yang sesuai untuk ditampilkan.

    2.Model: Mengelola data dan logika bisnis, berfungsi sebagai penghubung antara data, aturan bisnis, dan database.

    3.View: Menyajikan data kepada pengguna melalui antarmuka, menerima input, dan mengirimkan masukan tersebut ke controller, tanpa menyimpan logika

    BalasHapus
  9. Maulana mefa4 November 2024 pukul 13.58

    1.Controller berfungsi mengelola alur data dan logika bisnis, memastikan bahwa View hanya menampilkan informasi yang sesuai.
    2.Model berfungsi mengambil, menyimpan, memperbarui, dan menghapus data dalam aplikasi, biasanya dengan berinteraksi dengan basis data
    3.View berfungsi menerima data dari Controller dan menyajikannya dalam format yang dapat dipahami pengguna, seperti tampilan halaman web, form, atau tabel.

    BalasHapus
  10. Ryeizhen-Einzward4 November 2024 pukul 13.59

    M.Ardian Syahputra.
    —————————————————
    1. Controller: Berfungsi sebagai penghubung antara Model dan View. Controller menerima input dari pengguna, memproses permintaan, dan mengarahkan Model untuk mengelola data yang diperlukan, serta menentukan View yang akan ditampilkan.
    2. Model: Mengelola data dan logika bisnis aplikasi. Model berinteraksi langsung dengan basis data untuk mengambil, memodifikasi, dan menyimpan data yang diperlukan oleh Controller.
    3. View: Menyajikan data kepada pengguna dalam format yang mudah dipahami. View bertanggung jawab untuk antarmuka pengguna, menampilkan informasi yang disediakan oleh Controller.

    BalasHapus
  11. reyhan novriwendri4 November 2024 pukul 13.59

    1.Fungsi dari Controller adalah untuk mengelola interaksi antara Model dan View, dan memproses input pengguna untuk memperbarui Model. Controller bertanggung jawab untuk menerima input pengguna dari View, memproses data tersebut, dan memperbarui Model sesuai. Kemudian, Controller meminta Model untuk mengembalikan data yang diperbarui ke View untuk ditampilkan kepada pengguna.

    2.Model dimaksudkan untuk menangani semua logika dan representasi data, mengembalikan data yang sudah dimuat ke dalam tampilan.

    3.View
    Mengatur tampilan atau output yang tampil di layar, termasuk data, gambar, video, dan diagram.

    BalasHapus
  12. Muhammad Azis4 November 2024 pukul 14.04

    1.Fungsi Controller:

    -Menangani permintaan (request) dari user

    -Mengatur alur aplikasi dan logika program

    -Menghubungkan Model dan View

    -Memproses data dari Model dan mengirimkannya ke View

    -Mengontrol akses dan validasi input dari user

    2.Fungsi Model:

    -Mengelola dan memproses data

    -Berinteraksi dengan database

    -Menerapkan aturan bisnis (business logic)

    -Menyimpan struktur data aplikasi

    -Memvalidasi data sesuai aturan yang ditetapkan

    3.Fungsi View:

    -Menampilkan data kepada pengguna

    -Mengatur tampilan antarmuka (interface)

    -Menerima data dari Controller untuk ditampilkan

    -Menangani presentasi visual aplikasi

    -Tidak berisi logika pemrosesan data

    BalasHapus
  13. NURUL SHEREN FAZIRA4 November 2024 pukul 14.15

    Controller bertanggung jawab untuk menangani input dari pengguna dan menentukan respons yang sesuai.

    Model bertugas mengelola data, baik itu menyimpan, memperbarui, maupun menghapus data.

    View bertanggung jawab untuk menampilkan antarmuka pengguna dan menyajikan data dengan cara yang dapat dipahami oleh pengguna.

    BalasHapus
  14. Fares Maulidda Magruf4 November 2024 pukul 14.26

    1.Fungsi Controller:
    -Pengendali Alur Program
    -Menerima request/input dari user
    -Menentukan apa yang harus dilakukan dengan request tersebut
    -Mengarahkan alur aplikasi
    -Penghubung antara Model dan View
    -Berkomunikasi dengan Model untuk mengakses/manipulasi data
    -Meneruskan data dari Model ke View untuk ditampilkan
    -Memastikan View mendapat data yang sesuai
    -Pemroses Business Logic
    -Menangani validasi input
    -Melakukan perhitungan atau -pemrosesan data
    -Mengatur session dan autentikasi

    2.Fungsi Model :
    mengatur interaksi antara aplikasi dengan database, serta mengelola informasi dan aturan yang diperlukan oleh aplikasi

    3.Fungsi View :
    mengubah tampilan dokumen, seperti web layout, print layout, fullscreen layout, draft, dan outline

    BalasHapus
  15. Panji kukuh pribadi4 November 2024 pukul 14.28

    controller : berfungsi mengatur dan mengelola permintaan dan respons antara pengguna dan aplikasi web.

    Model : Mendefinisikan hubungan antara elemen data dan bagaimana elemen tersebut diatur, disimpan, dan diambil.

    View : berfungi untuk mengatur tampilan atau output yang tampil di layar, tidak hanya berupa data, namun juga termasuk komponen lain, seperti gambar, video, diagram, dan sebagainya.

    BalasHapus
  16. Haikal Fazly4 November 2024 pukul 14.30

    1.Controller berfungsi untuk menerima dan mengelola input dari pengguna, baik melalui klik tombol, formulir, atau tindakan lain yang memicu permintaan ke aplikasi.

    2.Model bertanggung jawab untuk menyimpan dan mengatur data yang digunakan oleh aplikasi.
    Data ini bisa berupa informasi pengguna, produk, transaksi, atau apa pun yang menjadi kebutuhan dari aplikasi.

    3.View berfungsi untuk menerima data dari Controller atau langsung dari Model, lalu menampilkannya dalam bentuk yang mudah dimengerti pengguna.
    Misalnya, dalam aplikasi e-commerce, View akan menampilkan daftar produk, detail produk, atau informasi harga kepada pengguna.

    BalasHapus
  17. Cantika sholeha11 November 2024 pukul 13.48

    Controller : berfungsi untuk mengatur menerima input dan menjalankan beberapa perintah untuk dijalankan di model.

    Model : berfungsi untuk mengatur data, fungsi dan aturan dari aplikasi.

    View : berfungsi untuk mengatur tampilan atau output yang tampil di layar, tidak hanya berupa data, namun juga termasuk komponen lain, seperti gambar, video, diagram, dan sebagainya.

    BalasHapus