Mengenal Dan implementasi Request Menggunakan Inertia JS

Request merupakan hal penting dalam membangun aplikasi, bayangkan saja jika aplikasi yang anda bangun saat ini tidak memiliki request ? tentu aplikasi anda tidak dapat digunakan sebagaimana mestinya.

Lalu apa saja method request yang ada
pada Inertia Js ?

Pada inertia js terdapat beberapa method Request antara lain :

• Visit
• Replace
• Reload
• Post
• Put
• Patch
• Delete

Masing-masing request diatas memiliki fungsi berbeda-beda, kali ini kita akan coba implementasikan Request Post kedepannya akan kita coba implementasikan seluruhnya secara bertahap ya.

Pertama kita buat dahulu form input baru kita beri nama form customer
dan didalam form customer ini memiliki 2 inputan yaitu input nama dan email dan 2 tombol simpan dan back codingnya sbb :

<template>
    <Layout>
        <div class="container">
            <div class="container-fluid">
                <form @submit.prevent="handleSubmit">
                <div class="row">  
                    <div class="col-md-12">  
                    <label for name="name"> Nama  </label>
                    <input type="text" v-model="customer.name" name="name">
                    </div>
                    <div class="col-md-12">
                    <label for email=""> Email  </label>
                    <input type="text" v-model="customer.email" name="email">
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <!--button simpan aktif jika nama customer sudah di input -->
                            <button class="btn btn-primary" :disabled="this.customer.name.length === 0" @:click.prevent="handleSubmit()"> Simpan </button>
                            <!--button back untuk kembali ke dashboard -->
                            <inertia-link class="btn btn-danger" href="dashboard"> Back TO Dashboard</inertia-link>
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </Layout>
</template>

Berikut tampilan Form Inputannya :

Dan Untuk Scriptnya sbb :

<script>
import Layout from './../../Shared/Layout' // import layout
export default {
    
    props : ['name','email'],
    components: {
        Layout,
    },
    
    data () {
        return {
            customer: {
                name: '',
                email: ''
            }
        }
    },
    computed:  {
    },
    methods : 
    {
    validForm () {
        if (this.customer.name.length === 0 || this.customer.email.length === 0) 
        {
            alert ('Form Isian Belum Lengkap')
            return true;
        } else{
            return false;
        }
    },
    handleSubmit () {
            // this.validForm()
            this.$inertia.post('/customer/post',this.customer, {
            })
            .then (() => {
            //clar form 
                this.customer.name = ''
                this.customer.email = ''
                alert ('Data Customer Berhasil Disimpan')      
            })
            .catch (() => {
            })
        },
        
        clearForm () {
            this.customer.name = ''
            this.customer.email = ''
        }
    }
}
</script>

Dimana pada saat tombol submit ditekan maka akan menjalankan method post maka di controller customer kita buat sebuah function post untuk menghandle request post dari frontend codingnya sbb :

public function post (Request $request) {
        //tangkap semua request yang dikirim oleh frontend
        $customer = $request->all();  
    //lakukan insert data ke tabel customer dimana datanya 
    //berasal dari frontend  
        Customer::create ([
            'nama'  => $customer['name'],
            'email' => $customer['email'],
        ]);
        //setelah di simpan lakukan redirect ke halaman customer kembali
        return redirect()->route('customer.index');
    }

terakhir kita buat sebuah route baru untuk request post codingnya sbb :

Route::post('/customer/post', 'CustomerController@post');

Kesimpulan :

Inertia js sudah menyediakan banyak method untuk menghandle request yang berasal dari frontend, salah satu method yang kita implementasikan pada artikel ini adalah method post kedepan kita akan implementasikan seluruh method yang ada pada inertia js. silahkan cek terus blog ini secara berkala agar tidak ketinggalan updatenya.

Salam
Adinata

#janganlupaberkarya