Halo teman-teman semuanya, di artikel-artikel sebelumnya kita sudah belajar bagaimana cara installasi dan konfigurasi Inertia.js baik di sisi "server-side" maupun "client-side", sekarang kita lanjutkan belajar bagaimana cara menampilkan data dari database menggunakan Inertia.js dan Vue.js 3 Composition API.
Langkah 1 - Membuat Controller Post
Pertama, kita akan membuat controller terlebih dahulu, silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.
php artisan make:controller PostController
Jika perintah di atas berhasil, maka kita akan mendapatkan 1 file controller baru yang berada di dalam folder app/Http/Controllers/PostController.php. Silahkan buka file tersebut dan ubah kode-nya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Inertia\Inertia;
class PostController extends Controller
{
/**
* index
*
* @return void
*/
public function index()
{
//get all posts from database
$posts = Post::latest()->get();
//render with data "posts"
return Inertia::render('Post/Index', [
'posts' => $posts
]);
}
}
Dari perubahan kode di atas, pertama kita melakukan import Model Post terlebih dahulu.
use App\Models\Post;
Setelah itu, kita import Adapter atau Facades dari Inertia.js.
use Inertia\Inertia;
Dan di dalam class PostController, kita menambahkan 1 method baru yang bernama index, method inilah yang akan kita gunakan untuk menampilkan data. Di dalam method ini, pertaama kita melakukan get data dari database melalui Model.
//get all posts from database
$posts = Post::latest()->get();
Setelah itu, kita melakukan render menggunakan Inertia.js ke dalam view atau page Post/Index dan kita parsing juga sebuah props dengan key posts yang berisi variable $posts.
//render with data "posts"
return Inertia::render('Post/Index', [
'posts' => $posts
]);
Langkah 2 - Menambahkan Route Resource
Setelah berhasil membuat controller baru, sekaranf kita lanjutkan untuk membuat sebuah route baru agar controller beserta method yang akan kita buat nanti bisa berjalan dengan baik.
Silahkan buka file routes/web.php dan ubah semua kode-nya menjadi seperti berikut ini :
<?php
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Route;
Route::get('/', [\App\Http\Controllers\PostController::class, 'index']);
Route::resource('/posts', \App\Http\Controllers\PostController::class);
Dari perubahan kode route di atas, pertama kita setting default route-nya ke dalam controller PostController dan method index .
Route::get('/', [\App\Http\Controllers\PostController::class, 'index']);
Dan selanjutnya kita membuat route dengan jenis Resource, dengan menggunakan route jenis ini maka kita tidak perlu mendefinisikan route secara manual satu persatu untuk proses CRUD, karena semua sudah dibuatkan oleh Laravel secara otomatis.
Route::resource('/posts', \App\Http\Controllers\PostController::class);
Untuk memverifikasi route yang ada di dalam project kita, silahkan jalankan perintah berikut ini di dalam terminal/CMD :
php artisan route:list
Langkah 3 - Membuat Layout Frontend
Sekarang kita lanjutkan untuk menambahkan layout terlebih dahulu, layout digunakan sebagai induk template yang berisi navbar dan footer.
Silahkan buat folder baru dengan nama Layouts di dalam folder resources/js/ dan di dalam folder Layouts silahkan buat file baru dengan nama App.vue dan masukkan kode berikut ini :
<template>
<div>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container">
<inertia-link class="navbar-brand" href="/">LARAVEL + INERTIA.JS</inertia-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<inertia-link class="nav-link" href="/posts/">POSTS</inertia-link>
</li>
<li class="nav-item">
<a class="nav-link" href="https://santrikoding.com/ebook" target="_blank">EBOOK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://santrikoding.com/tutorial-set" target="_blank">TUTORIAL SET</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<main class="container mt-5">
<slot />
</main>
</div>
</template>
<script>
//import Link dari inertia
import { Link } from '@inertiajs/inertia-vue3';
export default {
//register Link di component
components: {
Link
},
}
</script>
<style scoped>
.mt-5 {
margin-top: 100px!important;
}
</style>
Langkah 4 - Menampilkan Data
Setelah berhasil membuat Layout, sekarang kita lanjutkan untuk membuat sebuah view untuk menampilkan data, silahkan buat folder baru dengan nama Post di dalam folder resources/js/Pages dan di dalam folder Post silahkan buat file baru dengan nama Index.vue, kemudian masukkan kode berikut ini :
<template>
<div class="mt-5">
<!-- flash message -->
<div v-if="$page.props.flash.message" class="alert alert-success" role="alert">
{{ $page.props.flash.message }}
</div>
<!-- flash message -->
<div class="mb-3">
<inertia-link href="/posts/create" class="btn btn-md btn-primary">TAMBAH DATA</inertia-link>
</div>
<div class="card border-0 rounded shadow-sm">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">TITLE</th>
<th scope="col">CONTENT</th>
<th scope="col">ACTIONS</th>
</tr>
</thead>
<tbody>
<tr v-for="post in posts" :key="post.id">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
//import layout
import LayoutApp from '../../Layouts/App.vue'
//import Link dari inertia
import { Link } from '@inertiajs/inertia-vue3';
export default {
//layout
layout: LayoutApp,
//register Link di component
components: {
Link
},
//props
props: {
posts: Array // <- nama props yang dibuat di controller saat parsing data
}
}
</script>
<style>
</style>
Dari penambahan kode di atas, pertama kita melakukan import Layout yang sebelumnya sudah kita buat.
//import layout
import LayoutApp from '../../Layouts/App.vue'
Setelah itu, kita register Layout tersebut ke dalam properti layout.
//layout
layout: LayoutApp,
Dan selanjutnya, untuk menerima data yang di parsing dari conttroller, kita menggunakan props dan kita tinggal panggil nama props-nya dan jenis data-nya.
//props
props: {
posts: Array // <- nama props yang dibuat di controller saat parsing data
}
Di atas nama props-nya adalah posts, dimana nama tersebut kita definisikan saat parsing data di dalam method index di controller PostController.
Dan untuk menampilkan di template, kita tinggal menggunakan directive v-for dari Vue.js, kurang lebih seperti berikut ini :
<tr v-for="post in posts" :key="post.id">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center"></td>
</tr>
Dan untuk menampilkan flash message, kita menggunakan kode seperti berikut ini di dalam template.
<!-- flash message -->
<div v-if="$page.props.flash.message" class="alert alert-success" role="alert">
{{ $page.props.flash.message }}
</div>
<!-- flash message -->
Kode tersebut akan dijalankan nanti saat kita membuat proses insert, update dan delete data.
Langkah 5 - Compiling Assets dan Menjalankan Project
Ketika kita melakukan perubahan di dalam file folder resources/js maka kita perlu melakukan compile ulang agar kode assets-nya diperbarui.
Jalankan perintah berikut ini di dalam terminal/CMD :
npm run dev
Atau jika pengen otomatis melakukan compile saat kita melakukan perubahan di dalam file, kita bisa menjalankan perintah berikut ini di dalam terminal/CMD :
npm run watch
Setelah proses compiling selesai, sekarang kita bisa buka project-nya di URL http://localhost:8000/ dan jika berhasil maka kita akan mendapatkan hasil seperti berikut ini :
Di atas kita tidak menampilkan data apapun, karena memang di dalam database kita belum memiliki data dan di artikel selanjutnya kita akan belajar bagaimana cara memasukkan atau insert data ke dalam database menggunakan Inertia.js.
Terima Kasih