Tutorial Laravel & Inertia.js #3 : Installasi dan Konfigurasi Inertia.js "server-side"


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Halo teman-teman semuanya, sekarang kita akan lanjutkan belajar bagaimana melakukan installasi dan konfigurasi Inertia.js "server-side" di dalam project Laravel. Konsepnya untuk menggunakan Inertia.js di dalam Laravel kita harus melakukan 2 konfiguras, yaitu secara "server-side" dan "client-side".

Langkah 1 - Installasi Dependensi

Sekarang kita akan belajar bagaimana cara melakukan installasi Inertia "server-side" adapter, silahkan jalankan perintah berikut ini di dalam terminal/CMD :

composer require inertiajs/inertia-laravel

Silahkan tunggu proses installasinya sampai selesai.

Langkah 2 - Menambahkan Root Template

Selanjutnya, kita akan membuat sebuah layout atau root template dimana halaman ini akan di akses pertama kali saat website dijalankan. Di dalam file ini kita akan menambahkan file-file CSS dan JavaScript dari hasil compile.

Silahkan buat file baru dengan nama app.blade.php di dalam folder resources/views dan di dalam file tersebut silahkan tambahkan kode berikut 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" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="{{ mix('/js/app.js') }}" defer></script>
    <style>
      body {
        background-color: lightgray
      }
    </style>
  </head>
  <body>
      @inertia
  </body>
</html>

Langkah 3 - Setup Middleware

Selanjutnya kita akan melakukan publish dan konfigurasi Middleware dair Inertia.js, silahkan jalankan perintah berikut ini di dalam terminal/CMD :

php artisan inertia:middleware

Jika perintah di atas berhasil dijalanakan, maka kita akan mendapatkan 1 file Middleware baru dari Inertia yang berada di dalam folder app/Http/Middleware/handleInertiaRequest.php.

Setelah file Middleware berhasil dibuat, maka sekarang kita akan lanjutkan untuk melakukan register Midlleware tersebut di dalam Kernel. Silahkan buka file app/Http/Kernel.php, kemudian tambahkan kode berikut ini di dalam $middlewareGroups dan di dalam array web.

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

Jika ditulis dengan lengkap kurang lebih seperti berikut ini :

protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        // \Illuminate\Session\Middleware\AuthenticateSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\VerifyCsrfToken::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
        \App\Http\Middleware\HandleInertiaRequests::class,	// <-- inertia middleware
    ],

    'api' => [
        'throttle:api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],
];

Langkah 4 - Konfigurasi Shared Data

Disini kita akan menambahkan sebuah konfigurasi tambahan agar kita dapat menggunakan session flash di Inertia.js, sekarang silahkan buka file app/Http/Middleware/handleInertiaRequest.php, kemudian cari kode berikut ini :

public function share(Request $request)
{
   return array_merge(parent::share($request), [
     //
   ]);
}

Dan ubah menjadi seperti berikut ini :

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

Di atas, kita menambahkan key flash yang isinya adalah sebuah request session message, nantinya akan kita gunakan untuk menampilkan flash data/alert.

Sampai disini cara bagaimana installasi dan konfigurasi Inertia.js "server-side", di artikel selanjutnya kita akan belajar bagaimana cara melakukan installasi dan konfigurasi Inertia.js disisi "client-side".

Terima Kasih



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR