- Langkah 1 - Membuat Controller Post
- Langkah 2 - Menambahkan Route Resource
- Langkah 3 - Membuat Layout Frontend
- Langkah 4 - Menampilkan Data
- Langkah 5 - Uji Coba Menampilkan Data
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 :
<script setup>
//import Link dari inertia
import { Link } from '@inertiajs/vue3';
</script>
<template>
<div>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container">
<Link class="navbar-brand" href="/">LARAVEL + VUE + INERTIA.JS</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">
<Link class="nav-link" href="/posts/">POSTS</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>
<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 :
<script setup>
// import layout app
import Layout from '../../Layouts/App.vue'
// import Link
import { Link } from '@inertiajs/vue3';
// get props "posts" dari controller
defineProps({
posts: Array
});
</script>
<template>
<Layout>
<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">
<Link href="/posts/create" class="btn btn-md btn-primary">TAMBAH DATA</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>
</Layout>
</template>
Dari penambahan kode di atas, pertama kita melakukan import Layout yang sebelumnya sudah kita buat.
// import layout app
import Layout from '../../Layouts/App.vue'
Setelah itu kita import Link dari Inertia.
// import Link
import { Link } from '@inertiajs/vue3';
Selanjutnya, untuk menerima data yang di parsing dari controller, kita menggunakan defineProps dan kita tinggal panggil nama props-nya dan jenis data-nya.
// get props "posts" dari controller
defineProps({
posts: Array
});
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 - Uji Coba Menampilkan Data
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
Artikel ini dibaca sebanyak 20.150 kali
SAWERIA
Memuat komentar...