Cara menggunakan vanilla javascript vs framework

No job experience

I’m teaching myself web development during the summer before going to the uni to study Computer Science. I’m slowly working on the website portfolio project that’s focused on the games I make with JavaScript canvas.

I use Asp.Net Core framework as backend which I still learn.

I’m kinda new to front-end languages with just few months of "experience".

Until this point, I’ve been coding in vanilla JavaScript and only wrote ~1000+ lines of (kinda?) maintainable code for this very project. I have good understanding of ES6, promises, callbacks, prototypes. Now I wonder when should I start trying to integrate a framework/library, or should I at all?

I was told that it’s a good practice to learn js vanilla first, but how much should I really know before I can play with framework or a library? Should I just write the entire thing in vanilla, and use a front-end tool in my next project? I will use this project in my portfolio in order to apply for the job, so I want to make it count to pass the interview, but I don’t know if this will hurt my understanding of JavaScript. Any tips?

Cara menggunakan vanilla javascript vs framework

Mengenal apa itu VanillaJS atau Vanilla JS. Sebuah library JavaScript.

Sekarang ini dunia JavaScript berkembang cukup pesat. Banyak sekali framework dan library di luar sana. Ada jQuery, Angular, Vue, dan lain-lain. Lalu, apa lagi itu VanillaJS ?

Hanya Sebuah Lelucon

VanillaJS hanyalah sebuah lelucon. Sebuah satire dimana saat ini developer / programmer itu terlalu bergantung dengan library JavaScript, walau hanya untuk melakukan hal-hal dasar. Misal-nya, untuk mengakses atau memanipulasi elemen HTML.

Sebagai contoh, jQuery bisa dibilang library yang umum digunakan. Apalagi fitur jQuery Ajax yang mudah digunakan.

$("#tag-id").something();

Kode diatas terasa lebih mudah daripada kode:

let x = document.getElementById('tag-id');
x.dosomething();

VanillaJS = JavaScript

Pada inti-nya seperti itu. Vanilla JS adalah JavaScript standard yang sudah tersedia di semua browser.

Cara menggunakan vanilla javascript vs framework

Apakah Perlu Pakai Library JavaScript ?

Hal ini tinggal dicocokan saja tergantung kebutuhan. Kalau memang diperlukan, dipakai saja. Kalau JavaScript standard dirasa kurang mumpuni, baru deh pakai JavaScript library yang cocok.

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:

Cara menggunakan vanilla javascript vs framework

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:

Cara menggunakan vanilla javascript vs framework

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//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//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//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:

Cara menggunakan vanilla javascript vs framework

Selanjutnya kunjungi URL berikut:

http://localhost:8080/product

Jika berjalan dengan baik, maka akan tampil seperti berikut:

Cara menggunakan vanilla javascript vs framework

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

Cara menggunakan vanilla javascript vs framework

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

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

Cara menggunakan vanilla javascript vs framework

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

Cara menggunakan vanilla javascript vs framework

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

Jika update berhasil, maka akan tampil seperti gambar berikut:

Cara menggunakan vanilla javascript vs framework

Untuk menghapus data, klik tombol “Delete”.

Jika delete berhasil, maka data akan hilang dari list.

Cara menggunakan vanilla javascript vs framework

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