Dokumen ini membahas cara membuat, mengimpor, dan merender layout menggunakan Inertia.js dalam pengembangan aplikasi web. Penjelasan mencakup bagaimana menyiapkan menu navigasi dan menggunakan layout dalam halaman dengan contoh kode. Kesimpulannya, pemahaman ini penting untuk mempercepat proses pengembangan aplikasi di masa depan.

1. Cara mudah membuat layout,import
layout dan render layout Pada Inertia
JsWebsite Flat Desig n . UI Wi ndow. Sampl e Web Page D esign. Illustration
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
:
Resourcesviewslayoutsapp.blade.php
PHP
Copy

2. 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">

3. <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');
}
}
}

4. </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 :

5. 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 AppHttpControllers;
use IlluminateHttpRequest;
use InertiaInertia;
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 :

6. use InertiaInertia;
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.

7. bagaimana apakah anda tertarik menerapkan inertia js di projects anda selanjutnya
? jawab di kolom komentar ya..!!
Sumber : https://adinata.id/inertia-js/cara-mudah-membuat-layoutimport-layout-dan-render-
layout-pada-inertia-js/
Salam Sukses,
Adinata
# JanganLupaBerkarya