Tutorial Inertia.js Authentication #6 : Menampilkan Halaman Dashboard

• Langkah 1 - Membuat Controller Dashboard
• Langkah 2 - Menambahkan Route Dashboard
• Langkah 3 - Membuat Halaman Dashboard
• Langkah 4 - Uji Coba Halaman Dashboard

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/12.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.

<script setup>
//import layout App
import Layout from '../../Layouts/App.vue';

//get props
defineProps({
    auth: Object
});
</script>

<template>
    <Layout>
        <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>
    </Layout>
</template>

Dari penambahan kode di atas. Pertama kita import Layout App terlebih dahulu.

//import layout App
import Layout from '../../Layouts/App.vue';

Kemudian kita get props yang bernama auth. Dimana isinya adalah object user yang sedang login.

//get props
defineProps({
    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 - 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

• Membangun Aplikasi Kasir (Point of Sales) dengan Laravel, Inertia.js dan Vue.js
• Membangun Aplikasi Ujian Online (CBT) Dengan Laravel, Inertia.js & Vue.js
• Membangun Website Toko Online Dengan Laravel, Inertia.js & React.js