Tutorial CRUD Codeigniter 4 dengan Modal Bootstrap

Tutorial CRUD Codeigniter 4 dengan Modal Bootstrap

Pada tutorial ini Anda akan belajar tentang:

Bagaimana membuat CRUD menggunakan Codeigniter 4 dengan modal Bootstrap.

Jika Anda pemula di Codeigniter 4, saya sarankan terlebih dahulu untuk mempelajari “Tutorial lengkap Codeigniter 4 untuk pemula”.

Jika Anda merasa sudah familiar dengan Codeigniter 4, maka Anda berada di tempat yang tepat.

Pada tutorial ini, Anda juga akan belajar bagaimana menggunakan query join dari 2 table menggunakan query builder Codeigniter 4.

Step-by-Step

Mari kita mulai.

 

Step #1. Persiapan

Untuk membuat CRUD dengan Codeigniter dan Modal Bootstrap, inilah yang perlu Anda persiapkan:

1. Codeigniter 4

2. JQuery

5. Bootstrap

Pada tutorial ini saya menggunakan Codeigniter v4.0.2, JQuery v3.4.1, Bootstrap v4.4.x.

 

Step #2. Membuat Database dan Table

Buat database baru dengan nama “pos_db”.

Jika Anda membuat database dengan nama yang sama itu lebih baik.

Untuk membuat database “pos_db” pada MySQL, dapat dilakukan dengan mengeksekusi query berikut:

CREATE DATABASE pos_db;

Perintah SQL diatas, akan membuat sebuah database dengan nama “pos_db” pada MySQL.

Selanjutnya, buat table baru di dalam database “pos_db”.

Pada tutorial ini, dibutuhkan 2 table, yaitu table “category” dan table “product”.

Untuk membuat table “category” dapat dilakukan dengan mengeksekusi query berikut:

CREATE TABLE category(
category_id INT PRIMARY KEY AUTO_INCREMENT,
category_name VARCHAR(50)
)ENGINE=INNODB; 

Perintah SQL diatas, akan membuat sebuah table bernama “category” dengan fields: category_id dan category_name.

Selanjutnya, untuk membuat table “product” dapat dilakukan dengan mengeksekusi query berikut:

CREATE TABLE product(
product_id INT PRIMARY KEY AUTO_INCREMENT,
product_name VARCHAR(100),
product_price INT,
product_category_id INT
)ENGINE=INNODB;

Perintah SQL diatas, akan membuat sebuah table bernama “product” dengan fields: product_id, product_name, product_price, dan product_category_id.

Jika Anda masih bingung bagaimana membuat database dan table pada MySQL, saya sarankan untuk mempelajari “Data Definition Language (DDL)” pada MySQL.

 

Step #3. Insert data ke table Category dan Product

Ini penting.

Insert beberapa data pada table “category” dan table “product” sebagai data sample.

Insert beberapa data pada table “category” dengan mengeksekusi query berikut:

INSERT INTO category(category_name) 
VALUES ('Books'),('Electronics'),('Fashions');

Query diatas akan meng-insert data sebanyak 3 records kedalam table “category”.

Selanjutnya, insert beberapa data pada table “product” dengan mengeksekusi query berikut:

INSERT INTO product(product_name,product_price,product_category_id) 
VALUES ('The 4 Hour Workweek','76000','1'),('CodeIgniter Cheat Sheet','50000','1');

Query diatas akan meng-insert data sebanyak 2 records kedalam table “product”.

Jika Anda masih bingung bagaimana meng-insert data kedalam table pada MySQL, saya sarankan untuk mempelajari “Data Manipulation Language (DML)” pada MySQL.

 

Step #4. Instalasi Codeigniter 4

Untuk menginstal Codeigniter 4 dapat dilakukan dengan 2 cara yaitu: Instalasi manual dan Instalasi melalui composer.

Pada tutorial ini, saya akan menggunakan installasi manual.

Instalasi manual, persis sama dengan menginstal Codeigniter 3.

Download file Codeigniter 4 pada link berikut, kemudian extract di web server Anda.

https://codeigniter.com

Jika Anda menggunakan WAMPSERVER, extract di folder:

C:\wamp64\www

Jika Anda menggunakan XAMPP, extract di folder:

C:\xampp\htdocs

Pada tutorial ini, saya menggunakan XAMPP.

Kemudian rename (ganti nama) menjadi “pos” seperti gambar berikut:

Kemudian, open folder project “pos” menggunakan code editor.

Pada tutorial ini, saya menggunakan “Visual Studio Code”, Anda dapat menggunakan Sublime Text, PHP Storm, atapun code editor lainnya.

Jika Anda juga menggunakan Visual Studio Code, Anda akan menyukai tutorial ini.

Untuk memastikan instalasi codeigniter 4 berhasil, ketikan perintah berikut pada Terminal / Command Prompt:

php spark serve

Seperti gambar berikut:

Jika Anda menggunakan Visual Studio Code, Anda dapat mengetikan perintah diatas langsung pada terminal di Visual Studio Code.

Kemudian buka browser Anda dan kunjungi url berikut:

http://localhost:8080

Jika instalasi berhasil, maka akan terlihat seperti gambar berikut:

Selanjutnya, extract file bootstrap yang telah di persiapkan sebelumnya kedalam folder “pos/public” seperti gambar berikut:

Setelah itu buka folder “public/js”, kemudian buat sebuah file bernama “jquery.min.js”, kemudian open file tersebut menggunakan code editor.

Lalu kunjungi URL berikut:

https://code.jquery.com/jquery-3.4.1.min.js

Kemudian, pilih semua kodenya (Ctrl + A) dan copy (Ctrl + C) lalu paste (Ctrl + V) pada file “jquery.min.js” dan simpan (Ctrl + S).

 

Step #5. Membuat koneksi ke database

Buka file “Database.php” yang terdapat pada folder “app/Config”, kemudian temukan kode berikut:

    public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => '',
        'password' => '',
        'database' => '',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'production'),
        'cacheOn'  => false,
        'cacheDir' => '',
        'charset'  => 'utf8',
        'DBCollat' => 'utf8_general_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
    ];

Kemudian ubah menjadi seperti berikut:

    public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'pos_db',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'production'),
        'cacheOn'  => false,
        'cacheDir' => '',
        'charset'  => 'utf8',
        'DBCollat' => 'utf8_general_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
    ];

Selanjutnya, Ini penting!

Agar Anda memiliki interface yang baik untuk menangani error, temukan file env pada root project, kemudian rename (ganti nama) menjadi .env dan open file tersebut.

Kemudian temukan kode berikut:

# CI_ENVIRONMENT = production

Kemudian ubah menjadi seperti berikut:

CI_ENVIRONMENT = development

Itu artinya Anda masuk ke mode development, mode ini akan membantu Anda mempermudah melacak error saat Anda membangun project.

Setelah project Anda selesai, jangan lupa kembalikan lagi ke mode production!

 

Step #6. Membuat file Model

Buat sebuah file model bernama “Product_model.php” pada folder “app/Models”, kemudian ketikan kode berikut:

<?php namespace App\Models;

use CodeIgniter\Model;

class Product_model extends Model
{
    
    public function getCategory()
    {
        $builder = $this->db->table('category');
        return $builder->get();
    }

    public function getProduct()
    {
        $builder = $this->db->table('product');
        $builder->select('*');
        $builder->join('category', 'category_id = product_category_id','left');
        return $builder->get();
    }

    public function saveProduct($data){
        $query = $this->db->table('product')->insert($data);
        return $query;
    }

    public function updateProduct($data, $id)
    {
        $query = $this->db->table('product')->update($data, array('product_id' => $id));
        return $query;
    }

    public function deleteProduct($id)
    {
        $query = $this->db->table('product')->delete(array('product_id' => $id));
        return $query;
    } 

  
}

 

Step #7. Membuat file Controller

Buat sebuah file controller bernama “Product.php” pada folder “app/Controllers”, kemudian ketikan kode berikut:

<?php namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\Product_model;

class Product extends Controller
{
    public function index()
    {
        $model = new Product_model();
        $data['product']  = $model->getProduct()->getResult();
        $data['category'] = $model->getCategory()->getResult();
        echo view('product_view', $data);
    }

    public function save()
    {
        $model = new Product_model();
        $data = array(
            'product_name'        => $this->request->getPost('product_name'),
            'product_price'       => $this->request->getPost('product_price'),
            'product_category_id' => $this->request->getPost('product_category'),
        );
        $model->saveProduct($data);
        return redirect()->to('/product');
    }

    public function update()
    {
        $model = new Product_model();
        $id = $this->request->getPost('product_id');
        $data = array(
            'product_name'        => $this->request->getPost('product_name'),
            'product_price'       => $this->request->getPost('product_price'),
            'product_category_id' => $this->request->getPost('product_category'),
        );
        $model->updateProduct($data, $id);
        return redirect()->to('/product');
    }

    public function delete()
    {
        $model = new Product_model();
        $id = $this->request->getPost('product_id');
        $model->deleteProduct($id);
        return redirect()->to('/product');
    }

}

 

Step #8. Membuat file View

Buat sebuah file view bernama “product_view.php” pada folder “app/Views”, kemudian ketikan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Product Lists</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
    <h3>Product Lists</h3>
    <button type="button" class="btn btn-success mb-2" data-toggle="modal" data-target="#addModal">Add New</button>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Category</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            <?php foreach($product as $row):?>
                <tr>
                    <td><?= $row->product_name;?></td>
                    <td><?= $row->product_price;?></td>
                    <td><?= $row->category_name;?></td>
                    <td>
                        <a href="#" class="btn btn-info btn-sm btn-edit" data-id="<?= $row->product_id;?>" data-name="<?= $row->product_name;?>" data-price="<?= $row->product_price;?>" data-category_id="<?= $row->product_category_id;?>">Edit</a>
                        <a href="#" class="btn btn-danger btn-sm btn-delete" data-id="<?= $row->product_id;?>">Delete</a>
                    </td>
                </tr>
            <?php endforeach;?>
            </tbody>
        </table>

    </div>
    
    <!-- Modal Add Product-->
    <form action="/product/save" method="post">
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add New Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            
                <div class="form-group">
                    <label>Product Name</label>
                    <input type="text" class="form-control" name="product_name" placeholder="Product Name">
                </div>
                
                <div class="form-group">
                    <label>Price</label>
                    <input type="text" class="form-control" name="product_price" placeholder="Product Price">
                </div>

                <div class="form-group">
                    <label>Category</label>
                    <select name="product_category" class="form-control">
                        <option value="">-Select-</option>
                        <?php foreach($category as $row):?>
                        <option value="<?= $row->category_id;?>"><?= $row->category_name;?></option>
                        <?php endforeach;?>
                    </select>
                </div>
            
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            </div>
        </div>
        </div>
    </form>
    <!-- End Modal Add Product-->

    <!-- Modal Edit Product-->
    <form action="/product/update" method="post">
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            
                <div class="form-group">
                    <label>Product Name</label>
                    <input type="text" class="form-control product_name" name="product_name" placeholder="Product Name">
                </div>
                
                <div class="form-group">
                    <label>Price</label>
                    <input type="text" class="form-control product_price" name="product_price" placeholder="Product Price">
                </div>

                <div class="form-group">
                    <label>Category</label>
                    <select name="product_category" class="form-control product_category">
                        <option value="">-Select-</option>
                        <?php foreach($category as $row):?>
                        <option value="<?= $row->category_id;?>"><?= $row->category_name;?></option>
                        <?php endforeach;?>
                    </select>
                </div>
            
            </div>
            <div class="modal-footer">
                <input type="hidden" name="product_id" class="product_id">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
            </div>
        </div>
        </div>
    </form>
    <!-- End Modal Edit Product-->

    <!-- Modal Delete Product-->
    <form action="/product/delete" method="post">
        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            
               <h4>Are you sure want to delete this product?</h4>
            
            </div>
            <div class="modal-footer">
                <input type="hidden" name="product_id" class="productID">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                <button type="submit" class="btn btn-primary">Yes</button>
            </div>
            </div>
        </div>
        </div>
    </form>
    <!-- End Modal Delete Product-->

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function(){

        // get Edit Product
        $('.btn-edit').on('click',function(){
            // get data from button edit
            const id = $(this).data('id');
            const name = $(this).data('name');
            const price = $(this).data('price');
            const category = $(this).data('category_id');
            // Set data to Form Edit
            $('.product_id').val(id);
            $('.product_name').val(name);
            $('.product_price').val(price);
            $('.product_category').val(category).trigger('change');
            // Call Modal Edit
            $('#editModal').modal('show');
        });

        // get Delete Product
        $('.btn-delete').on('click',function(){
            // get data from button edit
            const id = $(this).data('id');
            // Set data to Form Edit
            $('.productID').val(id);
            // Call Modal Edit
            $('#deleteModal').modal('show');
        });
        
    });
</script>
</body>
</html>

 

Step #9. Testing

Untuk memastikan apakan aplikasi CRUD yang dibangun berjalan dengan baik, lakukan uji coba dengan mengunjungi URL berikut:

http://localhost:8080/product

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

#1. Add New Product

Klik tombol “Add New” untuk menambah product baru, maka akan tampil form seperti berikut:

Masukkan product name, price, dan pilih category, kemudian klik tombol “Save”.

Jika insert berhasil, maka akan terlihat seperti gambar berikut:

#2. Update Product

Klik tombol “Edit” untuk mengupdate product, maka akan tampil form seperti berikut:

Edit data sesuai dengan yang Anda inginkan, kemudian klik tombol “Update” untuk mengupdate data.

#3. Delete Product

Klik tombol “Delete” pada product list untuk menghapus product, maka akan tampil konfirmasi seperti berikut:

Kemudian klik tombol “Yes” untuk menghapus data.

 

Kesimpulan

Pembahasan kali ini adalah bagaimana membuat aplikasi Create-Read-Update-Delete (CRUD) sederhana dengan Codeigniter 4 dan Modal Bootstrap.

Tidak hanya itu, Anda juga telah belajar menggunakan query join menggunakan query builder pada Codeigniter 4.

Ini adalah fondasi yang bagus bagi Anda untuk membuat aplikasi yang lebih kompleks dengan codeigniter 4 dan bootstrap.

Jadi tunggu apalagi, Let’s Coding!

Download Source Code

Share:




LAINNYA UNTUK ANDA


Komentar (0)

Leave a Comment