Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar membuat proses login menggunakan Inertia.js, sekarang kita lanjutkan untuk membuat halaman dashboardnya. Dimana di dalam halaman ini kita juga akan menampilkan data user yang sedang login.
Langkah 1 - Membuat Controller Dashboard
Pertama, kita akan membuat controller Dashboard terlebih dahulu. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.
php artisan make:controller DashboardController -i
Di atas, kita tambahkan flag -i yang artinya controller tersebut akan dijadikan sebagai single action controller. Atau controller yang memiliki 1 fungsi / method.
REFERENSI : https://laravel.com/docs/8.x/controllers#single-action-controllers
Jika perintah di atas berhasil dijalankan, maka kita akan mendpatkan 1 file controller baru dengan nama DashboardController.php yang berada di dalam folder app/Http/Controllers. Silahkan buka file tersebut dan ubah kode-nya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers;
use Inertia\Inertia;
use Illuminate\Http\Request;
class DashboardController extends Controller
{
/**
* Handle the incoming request.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function __invoke(Request $request)
{
return Inertia::render('Dashboard/Index');
}
}
Dari penambahan kode di atas. Pertama kita import Inertia terlebih dahulu.
use Inertia\Inertia;
Kemudian, di dalam method __invoke kita lakukan return menggunakan Inertia ke dalam view yang bernama Index yang berada di dalam folder Dashboard.
return Inertia::render('Dashboard/Index');
Langkah 2 - Menambahkan Route Dashboard
Setelah berhasil membuat controller, sekarang kita lanjutkan membuat route untuk menampilkan halaman dashboard-nya.
Silahkan buka file routes/web.php, kemudian uabh semua kode-nya menjadi seperti berikut ini :
<?php
use Illuminate\Support\Facades\Route;
//route index register
Route::get('/register', [\App\Http\Controllers\Auth\RegisterController::class, 'index']);
//route store register
Route::post('/register', [\App\Http\Controllers\Auth\RegisterController::class, 'store']);
//route index login
Route::get('/login', [\App\Http\Controllers\Auth\LoginController::class, 'index']);
//route store login
Route::post('/login', [\App\Http\Controllers\Auth\LoginController::class, 'store']);
//route logout
Route::post('/logout', [\App\Http\Controllers\Auth\LoginController::class, 'destroy'])->middleware('auth');
//route dashboard
Route::get('/dashboard', \App\Http\Controllers\DashboardController::class)->middleware('auth');
Di atas, kita menambahkan 1 route baru yaitu /dashboard dengan method GET dan kita berikan middleware('auth'), yang artinya route tersebut hanya bisa diakses jika user sudah melakukan proses login / authentication.
Langkah 3 - Membuat Halaman Dashboard
Kita lanjutkan membuat halaman dashboard-nya. Silahkan buat folder baru dengan nama Dashboard di dalam folder resources/js/Pages dan di dalam folder Dashboard tersebut, silahkan buat file baru dengan nama Index.vue, kemudian masukkan kode berikut ini di dalamnya.
<template>
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card border-0 rounded-3 shadow-sm">
<div class="card-body">
Selamat Datang <strong>{{ auth.user.name }}</strong>
</div>
</div>
</div>
</div>
</template>
<script>
//import layout App
import LayoutApp from '../../Layouts/App.vue';
export default {
//set layout
layout: LayoutApp,
//get props
props: {
auth: Object
},
}
</script>
<style>
</style>
Dari penambahan kode di atas. Pertama kita import Layout App terlebih dahulu.
//import layout App
import LayoutApp from '../../Layouts/App.vue';
Setelah itu, kita set layout-nya menggunakan LayoutApp yang sudah kita import di atas.
//set layout
layout: LayoutApp,
Kemudian kita get props yang bernama auth. Dimana isinya adalah object user yang sedang login.
//get props
props: {
auth: Object
},
Dan untuk menampilkan di dalam template, kita cukup memanggil nama props-nya, kurang lebih seperti berikut ini :
Selamat Datang <strong>{{ auth.user.name }}</strong>
Langkah 4 - Compile Assets
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
CATATAN : ketika menjalankan perintah npm run watch, jangan tutup terminal/CMD-nya.
Langkah 5 - Uji Coba Halaman Dashboard
Silahkan lakukan proses login dan jika berhasil maka kita akan diarahkan ke dalam halaman dashboard. Kurang lebih hasilnya seperti berikut ini :
Di atas, kita telah berhasil menampilkan data user yang sedang login. Dan jika kita perhatikan, menu REGISTR dan LOGIN akan di sembunyikan dan menu DASHBOARD dan LOGOUT akan ditampilkan.
Sampai disini pembahasan bagaimana cara menampilkan halaman dashboard saat user berhasil login di Inertia.js. Jika teman-teman mengalami kesulitan saat praktek atau mencoba-nya, silahkan bisa bertanya di kolom komentar atau bisa melalui group telegram dari SantriKoding.
Terima Kasih