Cara mudah membuat layout,import layout dan render layout Pada Inertia Js

Sebelumnya kita sudah berkenalan dengan inertia js dimana dengan menggunakan inertia js kita dapat membangun sebuah web single page application tanpa harus membangun API di backend sehingga proses develop aplikasi bisa di lakukan dengan cepat.

Bagi anda yang belum tahu Inertia JS silahkan klik baca disini

pada artikel kali ini saya tidak akan membahas bagaima cara melakukan setup project atau instalasi project lagi dikarenakan sudah saya bahas sebelumnya bagi anda yang belum paham cara setup & instalasinya silahkan baca disini

Yuk Kita bahas cara membuat menu navigasi dan templating layout di inertia js.

dimana kita sudah mengetahu bahwa laravel memiliki layout yang terdapat pada file :

Resources\views\layouts\app.blade.php

PHP

Copy

kita dapat menggunakan layout tersebut dan kita buat sebuah folder di dalam folder JS dan kita beri nama Layout.vue seperti ini :

Dan kita modifikasi coding di file Layout.vue menjadi seperti ini :

<template>
<div>
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <!-- <a class="navbar-brand" href="{{ url('/') }}"> -->
                    <inertia-link class="navbar-brand" href="dashboard">Home</inertia-link>
                    <inertia-link class="navbar-brand" href="customer">Customer</inertia-link>
                     <inertia-link class="navbar-brand" href="item">Items</inertia-link>
                <!-- </a> -->
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">
                    </ul>
                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        
                        <li class="nav-item dropdown">
                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Adinata <span class="caret"></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#" @click="handleLogout">Logout</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <main class="py-4">
            <slot />
        </main>
</div>
</template>
<script>
export default {
  methods: {
    handleLogout() {
      alert ('Ini Sudah Logout');
    }
  }
}
</script>

JavaScript

Copy

Setelah Layoutsnya jadi maka kita dapat melakukan import layout yang kita buat di atas pada setiap pages yang membutuhkannnya, sebagi contoh kita membuat sebuah pages dengan nama Dashboards Seperti di gambar dibawah ini :

buka file Index yang terdapat di dalam folder Dashboard dan modifikasi isinya menjadi seperti dibawah ini :

<template>
<Layout>
    <div>
        <h2> Hello ini Dari Dashboard </h2>
    </div>
</Layout>
</template>

<script>
import Layout from './../../Shared/Layout' //import layouts
export default {
  components: {
    Layout,
  }
}
</script>

JavaScript

Copy

pada coding diatas kita sudah berhasil membuat pages dashboard dan kita sudah implpementasikan bagaimana cara melakukan import layouts pada pages berikut potongan code import layout :

import Layout from './../../Shared/Layout' //import layouts

JavaScript

Copy

lalu kita buat sebuah controller yang fungsinya melakukan render ke pages dashboard

php artisan make:controller DashboardController

PHP

Copy

Dan ketikkan coding sbb :

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Inertia\Inertia;
class DashboardController extends Controller
{
    public function index () {
        $data = [
            'firstname' => 'adi',
            'lastname'      => 'nata',
        ];
        
        return Inertia::render('Dashboard/Index', $data);
    }
}

PHP

Copy

Penjelasan coding diatas kita melakukan import dahulu namespace inertia js :

use Inertia\Inertia;

PHP

Copy

lalu kita melakukan render Inertia dengan menggunakan Inertia Render :

return Inertia::render('Dashboard/Index', $data);

PHP

Copy

setelah selesai maka kita build projectnya dengan cara :

npm run dev

JavaScript

Copy

Dan agar setiap perubahan kita tidak perlu menjalankan run dev maka kita dapat menjalankan perintah

npm run watch atau dapat juga menjalankan npm run watch-poll

JavaScript

Copy

berikut tampilan halaman dashboard jiika di jalankan di browser :

Kesimpulan :

Pada seri artikel inertia ini kita sudah belajar bagaimana caranya membuat layout, import layout di pages dan melakukan render di inertia menggunakan Inertia render dengan memahami hal diatas kita akan sangat terbantu dalam membuat projects kedepannya dikarenakan pada saat membangun aplikasi kita akan selalu bersinggungan dengan hal diatas.

bagaimana apakah anda tertarik menerapkan inertia js di projects anda selanjutnya ? jawab di kolom komentar ya..!!

Salam Sukses,

www.adinata.id

# JanganLupaBerkarya