Membuat Halaman Login Menggunakan Vuetify & Inertia JS

Halaman login adalah hal yang sangat penting dalam pembuatan aplikasi website. Halaman ini yang menjadi facade aplikasi sebelum pengguna bisa melihat-lihat fitur lainnya yang dibatasi oleh sistem autentikasi.

Artikel ini akan membahas mengenai cara membuat halaman login pada Laravel menggunakan inertia dan vuetify, Langsung saja kita bahas cara pembuatannya.

Spesifikasi Halaman Login

Halaman login yang akan kita buat memiliki spesifikasi sebagai berikut:

• Memiliki ukuran lebar 300 piksel dengan posisi di tengah layar (screen) secara vertikal maupun horizontal.
• Memiliki dua buah field yaitu email dan password. Masing-masing field memiliki icon untuk memperindah tampilannya.
• Field password memiliki tombol untuk melihat atau menyembunyikan password
• Menampilkan error pada masing-masing field jika isiannya yang dikirim ke server tidak valid.
• Memiliki dua buah tombol. Sebelah kiri tombol Reset dan sebelah kanan tombol Masuk.

Membuat Komponen Vue

Kita awali pembahasan ini dengan membuat sebuah komponen vue dengan nama Login.vue di dalam directory resources/js/Pages. Kodingan yang dibuat kurang lebih seperti di bawah ini:

<template>
   <v-app>
    <v-card width="300" class="mx-auto my-auto">
        <v-card-text>
            <v-text-field density='compact' label='Email' prepend-icon="mdi-email" v-model="form.email" :error-messages="form.errors.email"/>
            <v-text-field density='compact' label='Password' prepend-icon="mdi-lock" :type="showPass?'text':'password'" 
            :append-inner-icon="showPass?'mdi-eye-off':'mdi-eye'"
            @click:append-inner="showPass=!showPass"
            v-model="form.password"
            :error-messages="form.errors.password"
            />
        </v-card-text>
        <v-card-actions>
            <v-btn>Reset</v-btn>
            <v-spacer></v-spacer>
            <v-btn :disabled="form.processing" :loading="form.processing" @click="form.post('/login')" color="success" variant="flat">Masuk</v-btn>
        </v-card-actions>
    </v-card>
   </v-app>
</template>
<script setup>
import { useForm } from '@inertiajs/vue3';
import { ref } from 'vue';
const showPass= ref(false)
const form = useForm({
    email:'',
    password:''
})
</script>

Buat Controller

Selanjutnya kita perlu membuat controller untuk menghandel request yang dikirim dari komponen vue di atas. Gunakan command php artisan make:controller NamaController untuk membuat controller. Contohnya adalah sebagai berikut:

php artisan make:controller AuthController

Command di atas akan membuat sebuah file controller dengan nama AuthController.php di dalam directory app/Http/Controllers. Buka file tersebut lalu tambahkan fungsi login di bawah ini:

public function login(Request $request)
    {
        $request->validate([
            'email' => 'required|email',
            'password' => 'required'
        ]);
        $credentials = $request->only(['email', 'password']);
        if (Auth::attempt($credentials)) {
            return redirect('/');
        }
        throw ValidationException::withMessages([
            'email' => 'credentials is not valid'
        ]);
    }

Perhatikan pada bagian $request->validate yang memiliki argumen berupa array. Penjelasannya sebagai berikut:

• email adalah key POST yang dikirim dari komponen vue. Sedangkan required|email menandakan bahwa field tersebut harus diisi dan isinya harus berupa format email yang valid.
• password adalah key POST yang dikirim dari komponen vue. Sedangkan required menandakan field tersebut harus diisi.

Variabel $credentials diisi dengan data yang diambil dari POST request. $request->only berguna untuk mengambil data yang hanya dibutuhkan saja. Misalnya saja andaikata dari client yang dikirim tidak hanya email dan password saja maka dengan cara ini sudah otomatis field lainnya diabaikan.

Bagian Auth::attempt($credentials) dimasukkan ke dalam statement digunakan untuk melakukan authentikasi. Jika email dan password yang dikirim valid maka akan dibuatkan sesi login dan diredirect ke kalaman home. Sebaliknya jika salah maka kita tampilkan pesan error menggunakan ValidationException.

Buat Route untuk Login

Kita perlu membuat dua buah route untuk menghandel proses login. Pertama adalah route dengan method get untuk menampilkan halaman login yang kita buat menggunakan komponen vue di atas. Kodenya seperti di bawah ini.

Route::get('login', function () {
    return Inertia::render('Login');
});

Perhatikan bagian Inertia::render(‘Login’);. Login adalah nama komponen yang mau kita gunakan yang terletak di dalam directory resources/js/Pages. Cukup ditulis nama filenya saja tanpa ekstensi .vue.

Route kedua menggunakan method post digunakan untuk mengirim data yang diinput user ketika tombol Masuk diklik. Kodenya seperti di bawah ini:

Route::post('login', [AuthController::class, 'login']);

Route::post di atas diisi dengan dua parameter yaitu url dan action dalam bentuk array.

• login digunakan untuk mengisi parameter url. Sehingga url yang dihasilkan menjadi http://domain.com/login
• [AuthController::class, 'login'] parameter kedua digunakan untuk mengisi action dalam bentuk array yang memiliki dua elemen. Elemen pertama AuthController::class adalah nama controllernya. Elemen kedua yaitu login adalah nama fungsi/method di dalam controller tersebut yang mau digunakan untuk menghandel ketika ada POST request ke url http://domain.com/login.

Kode lengkap pada web.php seperti di bawah ini:

<?php

use App\Http\Controllers\AuthController;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('login', function () {
    return Inertia::render('Login');
});

Route::post('login', [AuthController::class, 'login']);

Video Pembuatan Halaman Login

Video ini berisi penjelasan mengenai pembuatan halaman form login menggunakan vuetify. Outputnya hanya berupa halaman yang menampilkan form login dan belum bisa difungsikan.

Video Pembuatan Handel Login

Video ini berisi penjelasan untuk menghandel form login agar bisa digunakan. Termasuk pembuatan route POST login, validasi POST request, pengeceken kredensial, dll.

Pada video ini dijelaskan pula mengenai penambahan user untuk uji coba melalui seeder.

Output video ini adalah halaman login yang dibuat pada video sebelumnya bisa digunakan untuk login user yang telah dibuat melalui seeder.