- Langkah 1 - Installasi Dependensi
- Langkah 2 - Menambahkan Root Template
- Langkah 3 - Setup Middleware
- Langkah 4 - Konfigurasi Shared Data
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:2.0.11
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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
@vite('resources/js/app.js')
@inertiaHead
<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. Silahkan buka file bootstrap/app.php, kemudian tambahkan kode berikut ini di dalam ->withMiddleware.
->withMiddleware(function (Middleware $middleware): void {
$middleware->web(append: [
App\Http\Middleware\HandleInertiaRequests::class,
]);
})
Jika ditulis dengan lengkap kurang lebih seperti berikut ini :
<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
return Application::configure(basePath: dirname(__DIR__))
->withRouting(
web: __DIR__.'/../routes/web.php',
commands: __DIR__.'/../routes/console.php',
health: '/up',
)
->withMiddleware(function (Middleware $middleware): void {
$middleware->web(append: [
App\Http\Middleware\HandleInertiaRequests::class,
]);
})
->withExceptions(function (Exceptions $exceptions): void {
//
})->create();
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): array
{
return [
...parent::share($request),
//
];
}
Dan ubah menjadi seperti berikut ini :
public function share(Request $request): array
{
return [
...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
Artikel ini dibaca sebanyak 17.678 kali
SAWERIA
Memuat komentar...