Berikan support Anda dengan cara mentrakteer saya kopi!

Trakteer Sekarang.!

Tutorial CRUD Menggunakan CodeIgniter 4 dan Vanilla Js

Tutorial CRUD Menggunakan CodeIgniter 4 dan Vanilla Js

Pada tutorial ini Anda akan belajar bagaimana membuat aplikasi Create-Read-Update-Delete (CRUD ) menggunakan CodeIgniter 4 dan Vanilla Javascript.

Tidak hanya itu,

Saya juga akan berbagi kepada Anda bagaimana penggunaan Bulma CSS untuk style User Interface (UI).

Dengan begitu, aplikasi yang dibangun menjadi lebih elegan, responsive, dan user friendly.

Mari kita mulai.

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!

 

Apa Itu Vanilla JavaScript?

Vanilla Javascript bukanlah framework atau library seperti Vue.js, JQuery, Angular, React, atau sejenisnya.

Melainkan, Vanilla Javascript adalah lelucon yang di istilahkan oleh para web developer untuk Javascript.

Dengan kata lain, Vanilla Javascript adalah Javascript.

Sebenarnya, untuk membuat aplikasi yang dibangun menggunakan jQuery dapat dilakukan dengan mudah tanpa jQuery.

Cukup dengan hanya dengan menggunakan JavaScript.

Anda dapat memanipulasi DOM (Document Object Models) tanpa jQuery dan Anda juga dapat melakukan AJAX Request tanpa jQuery.

Keren bukan?

 

Step #1. Install 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.

Silahkan download file CodeIgniter 4 pada link berikut:

https://codeigniter.com

Kemudian extract pada web server Anda.

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 “crud” seperti gambar berikut:

project-folder

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

Pada tutorial ini, saya menggunakan “Visual Studio Code”.

Jika Anda juga menggunakan Visual Studio Code itu lebih baik.

Anda juga dapat menggunakan Sublime Text, PHP Storm, atapun code editor lainnya.

 

Step #2. Buat Database dan Table

Buat sebuah database baru pada MySQL, Anda dapat menggunakan tools seperti SQLyog, PHPMyAdmin atau sejenisnya.

Disini saya membuat database dengan nama “crud_db”.

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

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

CREATE DATABASE crud_db;

Perintah SQL diatas akan membuat sebuah database dengan nama “crud_db”.

Selanjutnya, buat koneksi antara database dengan project codeigniter.

Temukan file env pada root project, kemudian rename (ganti nama) menjadi .env dan open file tersebut.

Kemudian temukan kode berikut:

# database.default.hostname = localhost
# database.default.database = ci4
# database.default.username = root
# database.default.password = root
# database.default.DBDriver = MySQLi

Ubah menjadi seperti berikut:

database.default.hostname = localhost
database.default.database = crud_db
database.default.username = root
database.default.password = 
database.default.DBDriver = MySQLi

Selanjutnya adalah pembuatan table pada database “crud_db”.

Pada tutorial ini, saya akan menggunakan fitur migration pada CodeIgniter 4 untuk pembuatan table.

Ketikan perintah berikut pada Terminal/Command Prompt:

php spark migrate:create product

Kemudian Enter, maka CodeIgniter akan membuat sebuah file berinisial “product” pada folder “app/Database/Migrations”.

Seperti gambar berikut:

migrations

Buka file tersebut, kemudian ketikan kode berikut:

<?php namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Product extends Migration
{
    public function up()
    {
        //
        $this->forge->addField([
            'product_id'          => [
                    'type'           => 'INT',
                    'constraint'     => 5,
                    'unsigned'       => true,
                    'auto_increment' => true,
            ],
            'product_name'       => [
                    'type'           => 'VARCHAR',
                    'constraint'     => '100',
            ],
            'product_price' => [
                    'type'           => 'INT',
                    'constraint'     => 11,
            ],
        ]);
        $this->forge->addKey('product_id', true);
        $this->forge->createTable('product');
    }

    //--------------------------------------------------------------------

    public function down()
    {
        //
    }
}

Pada kode diatas, kita hanya menambahkan kode pada function up().

Function up(), berfungsi untuk membuat table di database dengan field yang ditetapkan.

Pada kasus diatas, kita membuat sebuah table dengan nama “product” dengan field product_id, product_name, dan product_price beserta type data dan atribut lainnya.

Jika Anda tidak terbiasa dengan migration, mungkin terlihat rumit, tapi sebenarnya tidak.

Selanjutnya, ketikan perintah berikut pada Terminal/Command Prompt:

php spark migrate

Kemudian Enter, maka CodeIgniter akan otomatis membuat table “product” dengan field product_id, product_name, dan product_price di dalam database “crud_db”.

 

Step #3. Models

Pada tutorial ini, hanya dibutuhkan satu file model yaitu “ProductModel.php”.

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

<?php namespace App\Models;

use CodeIgniter\Model;

class ProductModel extends Model
{
    protected $table = 'product';
    protected $primaryKey = 'product_id';
    protected $allowedFields = ['product_name','product_price'];
}

 

Step #4. Controllers

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\ProductModel;

class Product extends Controller
{
    public function index()
    {
        // Call view "Product View"
        echo view('product_view');
    }

    // Get All Products
    public function getProduct()
    {
        $model = new ProductModel();
        $data = $model->findAll();
        return json_encode($data);
    }

    // Create product
    public function create(){
        $method = $this->request->getMethod(true);
        // Insert data to database if method "POST"
        if($method == 'POST'){
            $model = new ProductModel();
            $json = $this->request->getJSON();
            $data = [
                'product_name'  => $json->product_name,
                'product_price' => $json->product_price
            ];
            $model->insert($data);
        }else{
            // Call View "Add Product" if method "GET"
            echo view('add_product_view');
        } 
    }

    // Update product
    public function update($id = null){
        $method = $this->request->getMethod(true);
        $model = new ProductModel();
        // Insert data to database if method "PUT"
        if($method == 'PUT'){
            $json = $this->request->getJSON();
            $data = [
                'product_name' => $json->product_name,
                'product_price' => $json->product_price
            ];
            $model->update($id, $data);
        }else{
            // Call View "Edit Product" if method "GET"
            $data['data'] = $model->find($id);
            echo view('edit_product_view', $data);
        } 
    }

    // Delete product
    public function delete($id = null){
        $model = new ProductModel();
        $model->delete($id);
    }

}

 

Step #5. Buat file View “product_view.php”

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">
    <title>Product List</title>
    <!-- Include Bulma CSS CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</head>
<body>
    
    <section class="section">
        <div class="container">
        <!-- Add New Product Button -->
        <a href="/product/create" class="button is-primary mb-3">Add New</a>
        <!-- Product List Table -->
        <table class="table is-bordered is-fullwidth">
            <thead>
                <tr>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            
            </tbody>    
        </table>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Call function showData on loaded content
            showData();
        });

        // show data from database
        const showData = async () => {
            try {
                const response = await fetch('/product/getProduct', {
                    headers: {
                        "Content-Type": "application/json",
                        "X-Requested-With": "XMLHttpRequest"
                    }
                });
                const data = await response.json();
                
                const table = document.querySelector('table tbody');
                let rowData = "";
                data.forEach(({ product_id, product_name, product_price }) => {
                    rowData += `<tr>`;
                    rowData += `<td>${product_name}</td>`;
                    rowData += `<td>${product_price}</td>`;
                    rowData += `<td>`;
                    rowData += `<a href="/product/update/${product_id}" class="button is-info is-small">Edit</a>`;
                    rowData += `<a class="button is-danger is-small" data-id="${product_id}">Delete</a>`;
                    rowData += `</td>`;
                    rowData += `</tr>`;
                });
                table.innerHTML = rowData;
            } catch (err) {
                console.log(err);
            }
        }

        // Delete product method
        document.querySelector('table tbody').addEventListener('click', async (event) => {
            const id = event.target.dataset.id;
            try {
                await fetch(`/product/delete/${id}`, {
                    method: "DELETE",
                    headers: {
                        "Content-Type": "application/json",
                        "X-Requested-With": "XMLHttpRequest"
                    }
                }); 
                showData();
            } catch (err) {
                console.log(err);
            }
        });

    </script>
</body>
</html>

 

Step #6. Buat file View “add_product_view.php”

Buat sebuah file View lagi bernama “add_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">
    <title>Add Product</title>
    <!-- Include Bulma CSS CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</head>
<body>
    <section class="section">
        <div class="container">
        <form>
            <div class="field">
                <label class="label">Product Name</label>
                <div class="control">
                    <input class="input" name="productName" type="text" placeholder="Product Name">
                </div>
            </div>

            <div class="field">
                <label class="label">Price</label>
                <div class="control">
                    <input class="input" name="productPrice" type="text" placeholder="Price">
                </div>
            </div>

            <div class="control">
                <button class="button is-primary">SAVE</button>
            </div>

        </form>
        </div>
    </section>
    <script>
        const form = document.querySelector('form');
        
        // save product to database 
        form.addEventListener('submit', async (e) => {
            e.preventDefault();

            const product_name = form.productName.value;
            const product_price = form.productPrice.value;

            try {
                await fetch('/product/create', {
                    method: "POST",
                    body: JSON.stringify({ product_name, product_price }),
                    headers: {
                        "Content-Type": "application/json",
                        "X-Requested-With": "XMLHttpRequest"
                    }
                }); 
                location.assign('/product');
            } catch (err) {
                console.log(err);
            }
        });
        
    </script>
</body>
</html>

 

Step #7. Buat file View “edit_product_view.php”

Buat sebuah file view lagi bernama “edit_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">
    <title>Update Product</title>
    <!-- Include Bulma CSS CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</head>
<body>
    <section class="section">
        <div class="container">
        <form>
            <div class="field">
                <label class="label">Product Name</label>
                <div class="control">
                    <input class="input" name="productName" type="text" value="<?= esc($data['product_name'])?>" placeholder="Product Name">
                </div>
            </div>

            <div class="field">
                <label class="label">Price</label>
                <div class="control">
                    <input class="input" name="productPrice" type="text" value="<?= esc($data['product_price'])?>" placeholder="Price">
                </div>
            </div>

            <div class="control">
                <!-- Input Hidden ID -->
                <input type="hidden" name="productId" value="<?= esc($data['product_id'])?>">
                <button class="button is-primary">UPDATE</button>
            </div>

        </form>
        </div>
    </section>
    <script>
        const form = document.querySelector('form');

        // update product to database
        form.addEventListener('submit', async (e) => {
            e.preventDefault();

            const product_id = form.productId.value;
            const product_name = form.productName.value;
            const product_price = form.productPrice.value;

            try {
                await fetch(`/product/update/${product_id}`, {
                    method: "PUT",
                    body: JSON.stringify({ product_name, product_price }),
                    headers: {
                        "Content-Type": "application/json",
                        "X-Requested-With": "XMLHttpRequest"
                    }
                }); 
                location.assign('/product');
            } catch (err) {
                console.log(err);
            }
        });
        
    </script>
</body>
</html>

 

Step #8. Testing

Untuk memastikan apakah aplikasi yang dibangun berjalan dengan baik, lakukan pengujian dengan mengetikan perintah berikut pada Terminal/Command Prompt:

php spark serve

Seperti gambar berikut:

php-spark-serve

Selanjutnya kunjungi URL berikut:

http://localhost:8080/product

Jika berjalan dengan baik, maka akan tampil seperti berikut:

product-list

Klik tombol “Add New”, maka akan tampil form add new product seperti gambar berikut:

add-product

Input product name dan price, kemudian klik tombol “SAVE”.

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

product-list-added

Untuk edit data, klik tombol “Edit”, maka akan tampil form untuk edit data seperti gambar berikut:

edit-product

Edit product name atau price, kemudian klik tombol “UPDATE” untuk update data.

Jika update berhasil, maka akan tampil seperti gambar berikut:

product-list-edited

Untuk menghapus data, klik tombol “Delete”.

Jika delete berhasil, maka data akan hilang dari list.

product-deleted

Related: Tutorial CRUD CodeIgniter 4 dan Vue JS (Full-Stack)

Kesimpulan:

Pembahasan kali ini adalah bagaimana membuat aplikasi CRUD (Create-Read-Update-Delete) menggunakan CodeIgniter 4 dan Vanilla Javascript.

Tidak hanya itu, Anda juga telah belajar bagaimana menggunakan Bulma CSS untuk style User Interface (UI).

Jadi tunggu apalagi, Let’s Coding!

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!
Download Source Code

Artikel Terbaru

Artikel Terkait

Video Tutorial Terbaru:

Mern Stack CRUD MySQL Tutorial
Tutorial CRUD Realtime dengan Node, Express, React, MySQL (Prisma + SWR)

Mern Stack Tutorial
Login Multi Role dengan Node JS, Express, MySQL, dan React JS (LENGKAP)

Mern Stack Infinite Scroll
Cara Membuat Infinite Scroll dengan Node JS, Express, React JS, MySQL (Full Stack)

Mern Stack Pagination
Search & Pagination dengan Node, Express, React, MySQL (Best Practice)

Mern Stack Upload Image MySQL Tutorial
Tutorial CRUD + Image dengan Node JS, Express, React JS, dan MYSQL (MERN STACK)

Anda Akan Menyukai Video Ini:

Mern Stack CRUD Tutorial
1:14:22
Tutorial CRUD Realtime dengan Node, Express, React, MySQL (Prisma + SWR)

Mern Stack Login
3:41:16
Login Multi Role dengan Node JS, Express, MySQL, dan React JS (LENGKAP)

Mern Stack Infinite Scroll
49:42
Cara Membuat Infinite Scroll dengan Node JS, Express, React JS, MySQL (Full Stack)

Mern Stack Pagination
1:08:55
Search & Pagination dengan Node, Express, React, MySQL (Best Practice)

Mern Stack Upload Image MySQL Tutorial
1:22:51
Tutorial CRUD + Image dengan Node JS, Express, React JS, dan MYSQL (MERN Stack)

Mern Stack MySQL Tutorial
1:03:00
Tutorial LENGKAP CRUD dengan Node JS, Express, React JS, dan MySQL (Full Stack)

Komentar (0)

Leave a Comment