Laravel + Inertia.js: Membangun Aplikasi Modern Tanpa Meninggalkan Laravel

Dalam dunia pengembangan web modern yang serba cepat, pengembang terus mencari cara untuk menyederhanakan alur kerja mereka, meningkatkan produktivitas, dan memberikan pengalaman pengguna yang luar biasa. Laravel, kerangka kerja PHP yang populer, telah lama menjadi pilihan utama bagi banyak orang. Namun, untuk membangun antarmuka pengguna yang dinamis dan interaktif, pengembang sering kali beralih ke kerangka kerja JavaScript seperti React, Vue.js, atau Angular. Di sinilah Inertia.js masuk.

Inertia.js adalah jembatan yang memungkinkan Anda membangun aplikasi front-end modern menggunakan Vue.js, React, atau Svelte tanpa meninggalkan kenyamanan dan familiaritas Laravel. Dalam panduan lengkap ini, kita akan menjelajahi Inertia.js secara mendalam, memahami manfaatnya, dan mempelajari cara menggunakannya untuk membangun aplikasi web yang kuat dan efisien.

Mengapa Memilih Laravel dan Inertia.js?

Sebelum kita masuk ke detail teknis, mari kita pahami mengapa kombinasi Laravel dan Inertia.js begitu menarik:

1. Pengembangan Full-Stack yang Disederhanakan: Inertia.js memungkinkan Anda untuk tetap berada di ekosistem Laravel yang sudah dikenal, menggunakan Blade untuk rendering sisi server awal dan mengandalkan JavaScript untuk interaktivitas sisi klien. Ini menghilangkan kebutuhan untuk membangun API terpisah dan memelihara dua codebase yang berbeda.
2. Pengalaman Pengembang yang Lebih Baik: Inertia.js menyederhanakan alur kerja pengembangan Anda dengan menghilangkan kompleksitas routing API dan pengambilan data sisi klien. Anda dapat fokus pada logika bisnis dan antarmuka pengguna, menyerahkan detail implementasi ke Inertia.js.
3. Performa yang Lebih Baik: Inertia.js menggunakan pendekatan “tanpa API” yang unik. Sebagai gantinya, server Anda merender komponen front-end sebagai respons terhadap permintaan. Ini menghasilkan pengalaman pengguna yang lebih cepat dan lebih responsif dibandingkan dengan aplikasi SPA tradisional.
4. SEO-Friendly: Karena Inertia.js mengandalkan rendering sisi server awal, aplikasi Anda mudah diindeks oleh mesin pencari, yang mengarah pada peringkat SEO yang lebih baik.
5. Reusable Components: Inertia.js memungkinkan Anda untuk membangun komponen front-end yang dapat digunakan kembali di seluruh aplikasi Anda, mempromosikan konsistensi dan mengurangi duplikasi kode.

Memahami Konsep Inertia.js

Untuk memahami cara kerja Inertia.js, penting untuk memahami konsep intinya:

1. Komponen: Seperti kerangka kerja JavaScript modern lainnya, Inertia.js dibangun di atas komponen. Komponen adalah blok bangunan antarmuka pengguna Anda.
2. Props: Data yang diteruskan dari server ke komponen front-end Anda disebut props.
3. Pages: Inertia.js memperkenalkan konsep “pages”, yang merupakan komponen root yang merender tampilan tertentu dalam aplikasi Anda.
4. Visits: Inertia.js menggunakan “visits” untuk menavigasi antara halaman. Visits adalah permintaan AJAX yang memperbarui DOM tanpa memuat ulang halaman penuh.
5. Shared Data: Inertia.js memungkinkan Anda untuk berbagi data antara server dan client secara otomatis, seperti informasi pengguna yang diautentikasi atau pengaturan konfigurasi.

Menyiapkan Proyek Laravel dengan Inertia.js

Sekarang, mari kita mulai dengan menyiapkan proyek Laravel dengan Inertia.js. Kami akan menggunakan Vue.js sebagai kerangka kerja front-end kami, tetapi prosesnya serupa untuk React dan Svelte.

Prasyarat

1. PHP (versi 8.0 atau lebih tinggi)
2. Composer
3. Node.js dan npm
4. Database (MySQL, PostgreSQL, atau SQLite)

Langkah-langkah Instalasi

1. Buat Proyek Laravel Baru:

   Buka terminal Anda dan jalankan perintah berikut untuk membuat proyek Laravel baru:

   composer create-project laravel/laravel inertia-app

2. Masuk ke Direktori Proyek:

   cd inertia-app

3. Instal Inertia.js:

   Jalankan perintah berikut untuk menginstal Inertia.js dan adapter Vue.js:

   composer require inertiajs/inertia-laravel
   npm install @inertiajs/vue3 vue3

4. Instal Vite:

   Vite adalah bundler build yang sangat cepat untuk aplikasi front-end modern.

   npm install vite @vitejs/plugin-vue --save-dev

5. Konfigurasi Vite:

   Buat file vite.config.js di root proyek Anda dengan konten berikut:

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import vue from '@vitejs/plugin-vue';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/js/app.js'],
               refresh: true,
           }),
           vue({
               template: {
                   transformAssetUrls: {
                       base: null,
                       includeAbsolute: false,
                   },
               },
           }),
       ],
       resolve: {
           alias: {
               '@': '/resources/js',
           }
       }
   });
   

6. Konfigurasi Inertia Middleware:

   Buka app/Http/Kernel.php dan tambahkan \Inertia\Middleware ke grup middleware web:

   protected $middlewareGroups = [
       'web' => [
           \App\Http\Middleware\EncryptCookies::class,
           \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
           \Illuminate\Session\Middleware\StartSession::class,
           \Illuminate\View\Middleware\ShareErrorsFromSession::class,
           \App\Http\Middleware\VerifyCsrfToken::class,
           \Illuminate\Routing\Middleware\SubstituteBindings::class,
           \Inertia\Middleware::class, // Tambahkan middleware Inertia
       ],
   
       'api' => [
           'throttle:api',
           \Illuminate\Routing\Middleware\SubstituteBindings::class,
       ],
   ];
   

7. Buat Root Template:

   Buat file resources/views/app.blade.php dengan konten berikut:

   <!DOCTYPE html>
   <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
       <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
   
           <title>{{ config('app.name', 'Laravel') }}</title>
   
           <!-- Fonts -->
           <link rel="preconnect" href="https://fonts.bunny.net">
           <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
   
           <!-- Scripts -->
           @vite(['resources/js/app.js'])
           @inertiaHead
       </head>
       <body class="font-sans antialiased">
           @inertia
       </body>
   </html>
   

8. Inisialisasi Inertia di JavaScript:

   Buka resources/js/app.js dan modifikasi seperti berikut:

   import './bootstrap';
   
   import { createApp, h } from 'vue';
   import { createInertiaApp } from '@inertiajs/vue3';
   import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
   
   createInertiaApp({
       resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
       setup({ el, App, props, plugin }) {
           return createApp({ render: () => h(App, props) })
               .use(plugin)
               .mount(el)
       },
   });
   

9. Jalankan Migrasi Database dan Server Pengembangan:

   Pastikan Anda telah mengkonfigurasi koneksi database Anda di file `.env`. Kemudian, jalankan:

   php artisan migrate
   npm run dev

Sekarang, Anda telah berhasil menyiapkan proyek Laravel dengan Inertia.js dan Vue.js. Anda dapat mulai membangun antarmuka pengguna Anda menggunakan komponen Vue.js dan menggunakan Inertia.js untuk mengelola routing dan pengambilan data.

Membuat Halaman Pertama Anda dengan Inertia.js

Mari kita buat halaman sederhana untuk menunjukkan cara kerja Inertia.js. Kita akan membuat halaman “Selamat Datang” yang menampilkan pesan selamat datang.

1. Buat Komponen Vue.js:

   Buat file resources/js/Pages/Welcome.vue dengan konten berikut:

   <template>
     <div>
       <h1>Selamat Datang!</h1>
       <p>Selamat datang di aplikasi Inertia.js pertama Anda!</p>
       <p>Pesan: {{ message }}</p>
     </div>
   </template>
   
   <script>
   export default {
     props: {
       message: {
         type: String,
         required: true,
       },
     },
   };
   </script>
   

2. Buat Route Laravel:

   Buka routes/web.php dan tambahkan route berikut:

   use Inertia\Inertia;
   use Illuminate\Support\Facades\Route;
   
   Route::get('/', function () {
       return Inertia::render('Welcome', [
           'message' => 'Hello dari Laravel!',
       ]);
   });
   

3. Akses Halaman di Browser:

   Buka browser Anda dan kunjungi http://localhost:8000. Anda akan melihat halaman “Selamat Datang” yang menampilkan pesan selamat datang dan pesan yang diteruskan dari Laravel.

Bekerja dengan Data dan Formulir

Inertia.js menyederhanakan bekerja dengan data dan formulir. Mari kita lihat beberapa contoh:

Mengambil Data dari Database

Untuk mengambil data dari database, Anda dapat menggunakan Eloquent ORM Laravel seperti biasa. Kemudian, Anda dapat meneruskan data ke komponen front-end Anda sebagai props.

1. Buat Model dan Migrasi:

   Buat model Product dan migrasi terkait:

   php artisan make:model Product -m

   Modifikasi file migrasi untuk menambahkan kolom yang sesuai ke tabel products.

2. Implementasikan Model:

   Buka app/Models/Product.php dan implementasikan model Product.

3. Ambil Data di Controller:

   Buat controller untuk mengelola data produk:

   php artisan make:controller ProductController

   Buka app/Http/Controllers/ProductController.php dan tambahkan metode index untuk mengambil semua produk dari database dan meneruskannya ke komponen Vue.js:

   use App\Models\Product;
   use Inertia\Inertia;
   
   class ProductController extends Controller
   {
       public function index()
       {
           $products = Product::all();
   
           return Inertia::render('Products/Index', [
               'products' => $products,
           ]);
       }
   }
   

4. Buat Komponen Vue.js:

   Buat file resources/js/Pages/Products/Index.vue untuk menampilkan daftar produk:

   <template>
     <div>
       <h1>Daftar Produk</h1>
       <ul>
         <li v-for="product in products" :key="product.id">
           {{ product.name }} - {{ product.price }}
         </li>
       </ul>
     </div>
   </template>
   
   <script>
   export default {
     props: {
       products: {
         type: Array,
         required: true,
       },
     },
   };
   </script>
   

5. Tambahkan Route:

   Tambahkan route ke routes/web.php untuk mengakses halaman daftar produk:

   use App\Http\Controllers\ProductController;
   
   Route::get('/products', [ProductController::class, 'index']);
   

Menangani Formulir

Inertia.js menyederhanakan penanganan formulir. Anda dapat mengirim data formulir ke server menggunakan metode Inertia.post(), Inertia.put(), atau Inertia.delete().

1. Buat Komponen Vue.js untuk Formulir:

   Buat file resources/js/Pages/Products/Create.vue untuk menampilkan formulir pembuatan produk:

   <template>
     <div>
       <h1>Buat Produk Baru</h1>
       <form @submit.prevent="handleSubmit">
         <div>
           <label for="name">Nama:</label>
           <input type="text" id="name" v-model="form.name">
           <div v-if="errors.name" class="error">{{ errors.name[0] }}</div>
         </div>
         <div>
           <label for="price">Harga:</label>
           <input type="number" id="price" v-model="form.price">
           <div v-if="errors.price" class="error">{{ errors.price[0] }}</div>
         </div>
         <button type="submit">Buat</button>
       </form>
     </div>
   </template>
   
   <script>
   import { useForm } from '@inertiajs/vue3';
   
   export default {
     setup() {
       const form = useForm({
         name: '',
         price: '',
       });
   
       const handleSubmit = () => {
         form.post('/products');
       };
   
       return { form, handleSubmit };
     },
     props: {
       errors: Object,
     },
   };
   </script>
   

2. Buat Route dan Controller:

   Tambahkan route ke routes/web.php untuk menampilkan formulir dan memproses data formulir:

   use App\Http\Controllers\ProductController;
   use Illuminate\Support\Facades\Route;
   
   Route::get('/products/create', [ProductController::class, 'create']);
   Route::post('/products', [ProductController::class, 'store']);
   

   Buka app/Http/Controllers/ProductController.php dan tambahkan metode create dan store:

   use App\Models\Product;
   use Illuminate\Http\Request;
   use Inertia\Inertia;
   
   class ProductController extends Controller
   {
       public function create()
       {
           return Inertia::render('Products/Create');
       }
   
       public function store(Request $request)
       {
           $request->validate([
               'name' => 'required',
               'price' => 'required|numeric',
           ]);
   
           Product::create($request->all());
   
           return redirect('/products');
       }
   }
   

Shared Data

Inertia.js memungkinkan Anda untuk berbagi data antara server dan client secara otomatis. Ini berguna untuk berbagi data yang sering digunakan di seluruh aplikasi Anda, seperti informasi pengguna yang diautentikasi, pengaturan konfigurasi, atau pesan flash.

1. Konfigurasi Shared Data:

   Buka app/Providers/AppServiceProvider.php dan tambahkan kode berikut ke metode boot:

   use Illuminate\Support\Facades\Session;
   use Inertia\Inertia;
   
   public function boot()
   {
       Inertia::share([
           'errors' => function () {
               return Session::get('errors')
                   ? Session::get('errors')->getBag('default')->getMessages()
                   : (object) [];
           },
           'flash' => function () {
               return [
                   'success' => Session::get('success'),
                   'error' => Session::get('error'),
               ];
           },
           'auth' => [
               'user' => auth()->user() ? [
                   'id' => auth()->user()->id,
                   'name' => auth()->user()->name,
                   'email' => auth()->user()->email,
               ] : null,
           ],
       ]);
   }
   

2. Akses Shared Data di Komponen Vue.js:

   Anda dapat mengakses shared data di komponen Vue.js Anda menggunakan properti $page.props:

   <template>
     <div>
       <h1>Halo, {{ $page.props.auth.user.name }}!</h1>
     </div>
   </template>
   

Keuntungan Menggunakan Inertia.js

Berikut adalah beberapa keuntungan utama menggunakan Inertia.js:

1. Produktivitas yang Ditingkatkan: Inertia.js menyederhanakan alur kerja pengembangan Anda, memungkinkan Anda untuk fokus pada logika bisnis dan antarmuka pengguna tanpa terbebani oleh kompleksitas routing API dan pengambilan data sisi klien.
2. Performa yang Lebih Baik: Pendekatan “tanpa API” dari Inertia.js menghasilkan pengalaman pengguna yang lebih cepat dan lebih responsif.
3. SEO-Friendly: Rendering sisi server awal memastikan bahwa aplikasi Anda mudah diindeks oleh mesin pencari.
4. Kode yang Lebih Bersih dan Lebih Mudah Dipelihara: Inertia.js mendorong arsitektur yang bersih dan terstruktur, yang mengarah pada kode yang lebih mudah dipelihara dan dikembangkan.
5. Reusable Components: Inertia.js memungkinkan Anda untuk membangun komponen front-end yang dapat digunakan kembali di seluruh aplikasi Anda, mempromosikan konsistensi dan mengurangi duplikasi kode.

Kesimpulan

Inertia.js adalah alat yang ampuh yang dapat membantu Anda membangun aplikasi web modern dan interaktif dengan Laravel. Dengan menyederhanakan alur kerja pengembangan Anda, meningkatkan performa, dan mempromosikan kode yang bersih dan mudah dipelihara, Inertia.js dapat membantu Anda untuk memberikan pengalaman pengguna yang luar biasa.

Dalam panduan ini, kita telah menjelajahi Inertia.js secara mendalam, memahami konsep intinya, dan mempelajari cara menggunakannya untuk membangun aplikasi web yang kuat dan efisien. Kami telah membahas cara menyiapkan proyek Laravel dengan Inertia.js, membuat halaman pertama Anda, bekerja dengan data dan formulir, dan berbagi data antara server dan client.

Dengan pengetahuan ini, Anda siap untuk mulai membangun aplikasi web modern Anda sendiri dengan Laravel dan Inertia.js!