Instal dan Konfigurasi Server Side Inertiajs

Ineria.js memiliki 2 adaptor yaitu Laravel dan Rails akan tetapi disini Anda hanya perlu memilih adaptor untuk Laravel saja. Disini Anda akan melakukan beberapa instalasi dan konfigurasi yang mana Anda akan menemukan Ziggy sebuah pustaka yang cocok buat perutean Laravel pada JavaScript. Sangat penasaran mengenali Ziggy? Ayo langsung saja.

Daftar isi:

Langkah 1 - Instal InertiaJS - Server Side

Silakan langsung saja melakukan instalasi adaptor Inertia Laravel dengan jalankan baris perintah di bawah ini.

composer require inertiajs/inertia-laravel

Langkah 2 - Instal Ziggy

Ziggy adalah pustaka perutean Laravel yang digunakan di JavaScript untuk memudahkan perutean bernama pada Laravel, hal ini akan memudahkan semua perutean layaknya Anda menggunakan Blade Laravel. Silakan jalankan skrip di bawah ini untuk menginstal Ziggy.

composer require tightenco/ziggy

Catatan: Ziggy adalah pustaka khusus buat Laravel dan tidak akan pernah bisa digunakan pada kerangka kerja lain. Tentunya Anda tidak perlu melakukan konfigurasi yang sulit.

Langkah 3 - Konfigurasi Middleware

Setelah selesai melakukan instalasi Inertia adaptor Laravel maka Anda bisa langsung membuat berkas baru HandleInertiaRequests.php dengan menjalankan skrip di bawah ini pada terminal Anda.

php artisan inertia:middleware

Setelah berhasil membuat berkas middleware tersebut, sekarang tambahkan skrip yang bisa Anda sesuaikan pada skrip di bawah ini. Sebagai penjelasannya nanti Anda akan membuat notifikasi yang tampil pada sisi klien.

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'flash' => [
            'message' => fn () => $request->session()->get('message')
        ]
    ]);
}

Skrip diatas merupakan cara untuk membuat berbagi data secara global yang mana setiap perutean yang di render Inertia akan di bagikan. Hal ini bisa Anda manfaatkan untuk berbagi variabel data secara global, umumnya itu akan Anda temui nanti ketika sudah masuk ke CRUD yaaa!.

Silakan daftarkan middleware HandleInertiaRequests di berkas Kernel.php pada direktori app\Http, mohon sesuaikan pada contoh skrip di bawah ini.

'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
]

Langkah 4 - Templat Root InertiaJS

Seperti biasanya kalau Anda membuat CRUD dengan Laravel dan Vue.js maka Anda harus membuat berkas templat utama untuk dimuat pada kunjungan pertama kali. Hal ini akan memuat aset CSS dan JavaScript. Silakan buat berkas baru dengan nama app.blade.php pada direktori resources/views kemudian salin dan tempelkan skrip di bawah ini.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
        <script src="{{ mix('/js/app.js') }}" defer></script>

        <!-- Dari Ziggy-->
        @routes
        
    </head>
    <body>
        @inertia
    </body>
</html>

Pada baris skrip komentar diatas itu adalah konfigurasi Ziggy untuk menampilkan semua perutean Laravel yang bisa di manfaatkan di JavaScript.

Catatan: Sebagai penjelasan tambahan Anda bisa membuat nama kustom berkas app.blade.php sesuai keinginan Anda. Silakan cek kembali pada berkas middleware HandleInertiaRequests.php disitu ada settingan variabel $rootView yang bernilai asali app. Nanti silakan ubah jika berkenan untuk mengubah penamaan berkas bawaan.