Tutorial Membuat Fitur Auth Sederhana dengan Laravel 7

Tutorial Membuat Fitur Auth Sederhana dengan Laravel 7 – Step by step membuat Fitur Login, Register dan Logout sederhana dengan Laravel 7 + Bootstrap disertai contoh program dan source code.

Laravel telah menyediakan package UI yang dapat menghandle auth dengan brilian.

… pada versi ke 6 dan 7, mereka menyediakan artisan ui yang dapat digenerate dan bisa memilih 3 pilihan, yaitu Bootstrap, React Js atau Vue Js.

Namun, sekalipun sudah disediakan secanggih mungkin, pemula akan banyak kebingungan untuk menerapkannya.

Apalagi ada beberapa fitur yang mungkin tidak terpakai.

Oleh sebab itu, di kesempatan kali ini saya akan sharing bagaimana membuat fitur Auth sederhana di Laravel 7.

… dalam praktiknya, tutorial ini akan tetap dibantu oleh Library Auth milik Laravel.

Penasaran gimana caranya?

Baca Juga: Tutorial Custom Helper di Laravel 7

Yuk ikuti step by step cara membuat fitur auth di Laravel 7 + Bootstrap pada kesempatan kali ini.

Step By Step Membuat Fitur Auth di Laravel 7

Sebagai tahap persiapan, ada beberapa hal perlu kita ketahui.

Pertama, minimum PHP yang sudah terinstall di perangkat kita adalah versi 7.2.

Kedua, sudah menginstall web server yang mendukung seperti XAMPP, Laragon, Nginx dan lain-lain.

Ketiga, Editor Text. Kebetulan di sini saya menggunakan Visual Studio Code yang open source.

Mari kita mulai…

Step 1 – Install dan Cek Composer

Jika belum menginstall composer, silahkan download di sini.

Kemudian, pastikan composer sudah terinstall dengan baik.

Caranya, buka terminal / command line.

Ketik composer.

Jika sudah tersinstall dengan baik, akan muncul tampilan seperti di bawah ini:

Selanjutnya, kita akan install Laravel 7 melalui composer yang sudah terinstall.

Step 2 – Install Laravel 7 Melalui Composer

Cara install Laravel 7 sangat mudah apabila menggunakan Composer.

Kamu tinggal ketik beberapa baris perintah ini saja dan langsung tampak hasilnya.

composer create-project --prefer-dist laravel/laravel:^7.0 laravel_auth

Tapi sebelum itu, internet kamu harus stabil ya.

Silahkan tunggu sampai proses installasinya selesai.

Step 3 – Uji Coba Menjalankan Laravel 7

Sebelum masuk ke pembahasan utama, ada baiknya kita coba menjalankannya terlebih dahulu.

Silahkan masuk ke dalam direktori project.

Bisa melalui terminal atau Visual Studio Code.

… dan jangan lupa aktifkan web server yang kamu miliki.

Sekarang apabila sudah siap web servernya, kamu bisa menjalankan terminal dan ketik perintah berikut ini:

cd laravel_auth
// then
php artisan serve

… apabila menggunakan terminal di Visual Studio Code, langsung saja ketik perintah berikut ini:

Sekarang kita bisa memastikan hasilnya dengan mengetik URL berikut pada browser:

http://127.0.0.1:8000

Hasilnya:

Step 4 – Menyiapkan Database

Saat installasi, Laravel 7 sudah menyediakan Schema table users yang bisa kita langsung pakai.

Bahkan, modelnya pun sudah disediakan.

Jadi kita nggak perlu repot-repot lagi membuat schema dan modelnya.

… dan untuk mengatur itu semua akan kita terapkan di file .env.

Perhatikan gambar di bawah ini:

Mantap ya!

Tinggal pakai aja ni.

Kalau begitu, kita buat database bernama laravel7_auth.

Terserah di PHP Myadmin atau tools lainnya.

Kemudian buka file .env dan kita setting konfigurasi databasenya.

Cari kode berikut ini:

DB_DATABASE=laravel

Ubah menjadi:

DB_DATABASE=laravel7_auth

Menyiapkan database selesai.

Step 5 – Menyiapkan Table

Matikan dahulu php artisan servernya, kemudian jalankan kembali php artisan servenya.

Ini karena di Laravel 7 tidak otomatis terbaca ENV jika terjadi perubahan.

BTW, di Laravel 8 nantinya hal ini akan diatasi.

So, langsung saja kita migration table users yang sudah tersedia.

Ketik perintah berikut ini di terminal.

php artisan migrate

Oke, sekarang table-table sudah terbentuk.

Step 6 – Membuat Route Login, Register dan Logout

Silahkan buka file web.php yang ada di dalam direktori routes/web.php.

Tambahkan kode berikut ini:

<?php

use Illuminate\Support\Facades\Route; 

Route::get('/', 'AuthController@showFormLogin')->name('login');
Route::get('login', 'AuthController@showFormLogin')->name('login');
Route::post('login', 'AuthController@login');
Route::get('register', 'AuthController@showFormRegister')->name('register');
Route::post('register', 'AuthController@register');

Route::group(['middleware' => 'auth'], function () {

    Route::get('home', 'HomeController@index')->name('home');
    Route::get('logout', 'AuthController@logout')->name('logout');

});

Penjelasan:

Kode program di atas dibuat untuk menampilkan form login, proses login, form register, proses register.

Kemudian dilengkapi dengan middleware auth agar home dan logout hanya bisa diakses ketika sudah melakukan login.

Step 7 – Membuat Controller Auth

Ketik command berikut ini pada terminal untuk membuat AuthController:

php artisan make:controller AuthController

Kemudian buka file AuthController.php yang ada pada direktori app/Http/Controllers.

Berikut kodenya:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Auth;
use Validator;
use Hash;
use Session;
use App\User;


class AuthController extends Controller
{
    public function showFormLogin()
    {
        if (Auth::check()) { // true sekalian session field di users nanti bisa dipanggil via Auth
            //Login Success
            return redirect()->route('home');
        }
        return view('login');
    }

    public function login(Request $request)
    {
        $rules = [
            'email'                 => 'required|email',
            'password'              => 'required|string'
        ];

        $messages = [
            'email.required'        => 'Email wajib diisi',
            'email.email'           => 'Email tidak valid',
            'password.required'     => 'Password wajib diisi',
            'password.string'       => 'Password harus berupa string'
        ];

        $validator = Validator::make($request->all(), $rules, $messages);

        if($validator->fails()){
            return redirect()->back()->withErrors($validator)->withInput($request->all);
        }

        $data = [
            'email'     => $request->input('email'),
            'password'  => $request->input('password'),
        ];

        Auth::attempt($data);

        if (Auth::check()) { // true sekalian session field di users nanti bisa dipanggil via Auth
            //Login Success
            return redirect()->route('home');

        } else { // false

            //Login Fail
            Session::flash('error', 'Email atau password salah');
            return redirect()->route('login');
        }

    }

    public function showFormRegister()
    {
        return view('register');
    }

    public function register(Request $request)
    {
        $rules = [
            'name'                  => 'required|min:3|max:35',
            'email'                 => 'required|email|unique:users,email',
            'password'              => 'required|confirmed'
        ];

        $messages = [
            'name.required'         => 'Nama Lengkap wajib diisi',
            'name.min'              => 'Nama lengkap minimal 3 karakter',
            'name.max'              => 'Nama lengkap maksimal 35 karakter',
            'email.required'        => 'Email wajib diisi',
            'email.email'           => 'Email tidak valid',
            'email.unique'          => 'Email sudah terdaftar',
            'password.required'     => 'Password wajib diisi',
            'password.confirmed'    => 'Password tidak sama dengan konfirmasi password'
        ];

        $validator = Validator::make($request->all(), $rules, $messages);

        if($validator->fails()){
            return redirect()->back()->withErrors($validator)->withInput($request->all);
        }

        $user = new User;
        $user->name = ucwords(strtolower($request->name));
        $user->email = strtolower($request->email);
        $user->password = Hash::make($request->password);
        $user->email_verified_at = \Carbon\Carbon::now();
        $simpan = $user->save();

        if($simpan){
            Session::flash('success', 'Register berhasil! Silahkan login untuk mengakses data');
            return redirect()->route('login');
        } else {
            Session::flash('errors', ['' => 'Register gagal! Silahkan ulangi beberapa saat lagi']);
            return redirect()->route('register');
        }
    }

    public function logout()
    {
        Auth::logout(); // menghapus session yang aktif
        return redirect()->route('login');
    }


}

Penjelasan:

Laravel menyediakan library yang dapat menghandle Authentication.

Kita bisa menggunakan use Illuminate\Support\Facades\Auth untuk dapat memanfaatkan fasilitas tersebut.

Selain itu, kita pun menggunakan Library Hash yang sudah disediakan oleh Laravel untuk mengubah password yang kita daftarkan menjadi terenkripsi.

… ini diperlukan untuk alasan keamanan.

Lalu pada baris ini kita gunakan untuk memeriksa apakah user sudah login atau belum.

Jika sudah, maka user akan kita arahkan ke halaman utama.

if (Auth::check()) { // true sekalian session field di users nanti bisa dipanggil via Auth
    //Login Success
    return redirect()->route('home');
}

Step 8 – Membuat Controller Home

Silahkan ketik command berikut ini untuk membuat controller HomeController.php.

php artisan make:controller HomeController

Kemudian buka file HomeController.php yang ada pada direktori app/Http/Controllers.

Ketik kode berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        return view('home');
    }
}

Penjelasan:

Pada controller ini saya tidak membungkusnya dengan constructor, yang pada umumnya diisi dengan load middleware Auth.

Berhubung sudah kita terapkan filter di Route, jadi ini tidak perlu.

Step 9 – Membuat Halaman View Login

Silahkan buat file baru bernama login.blade.php dan simpan di dalam direktori resources/views.

Berikut kode programnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="col-md-4 offset-md-4 mt-5">
            <div class="card">
                <div class="card-header">
                    <h3 class="text-center">Form Login</h3>
                </div>
                <form action="{{ route('login') }}" method="post">
                @csrf
                <div class="card-body">
                    @if(session('errors'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            Something it's wrong:
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                            </ul>
                        </div>
                    @endif
                    @if (Session::has('success'))
                        <div class="alert alert-success">
                            {{ Session::get('success') }}
                        </div>
                    @endif
                    @if (Session::has('error'))
                        <div class="alert alert-danger">
                            {{ Session::get('error') }}
                        </div>
                    @endif
                    <div class="form-group">
                        <label for=""><strong>Email</strong></label>
                        <input type="text" name="email" class="form-control" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for=""><strong>Password</strong></label>
                        <input type="password" name="password" class="form-control" placeholder="Password">
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary btn-block">Log In</button>
                    <p class="text-center">Belum punya akun? <a href="{{ route('register') }}">Register</a> sekarang!</p>
                </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Step 10 – Membuat Halaman View Register

Silahkan buat file baru bernama register.blade.php dan simpan di dalam direktori resources/views.

Berikut kode programnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Register</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="col-md-4 offset-md-4 mt-5">
            <div class="card">
                <div class="card-header">
                    <h3 class="text-center">Form Register</h3>
                </div>
                <form action="{{ route('register') }}" method="post">
                @csrf
                <div class="card-body">
                    @if(session('errors'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            Something it's wrong:
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="form-group">
                        <label for=""><strong>Nama Lengkap</strong></label>
                        <input type="text" name="name" class="form-control" placeholder="Nama Lengkap">
                    </div>
                    <div class="form-group">
                        <label for=""><strong>Email</strong></label>
                        <input type="text" name="email" class="form-control" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for=""><strong>Password</strong></label>
                        <input type="password" name="password" class="form-control" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <label for=""><strong>Konfirmasi Password</strong></label>
                        <input type="password" name="password_confirmation" class="form-control" placeholder="Password">
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary btn-block">Register</button>
                    <p class="text-center">Sudah punya akun? <a href="{{ route('login') }}">Login</a> sekarang!</p>
                </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Step 11 – Membuat Halaman View Home

Silahkan buat file baru bernama home.blade.php dan simpan di dalam direktori resources/views.

Berikut kode programnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="col-md-12 mt-5">
            <div class="card">
                <div class="card-header">
                    <h3>Dashboard</h3>
                </div>
                <div class="card-body">
                    <h5>Selamat datang di halaman dashboard, <strong>{{ Auth::user()->name }}</strong></h5>
                    <a href="{{ route('logout') }}" class="btn btn-danger">Logout</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Step 12 – Testing Laravel 7 Auth Login, Register dan Logout

Silahkan ketik perintah berikut ini untuk menguji coba:

php artisan serve

Kemudian buka browser dan ketik URL berikut:

http://127.0.0.1:8000

Hasilnya:

… dan jika kamu belum memiliki akun, silahkan lakukan register terlebih dahulu.

Klik link register tersebut, maka ini hasilnya:

Kemudian jika sudah berhasil register dan melakukan login, maka akan diarahkan ke halaman Dashboard seperti gambar di bawah ini:

Sekarang jika kamu ingin keluar dari aplikasi, silahkan tekan tombol logout dan akan diarahkan ke halaman login lagi.

Kata Penerus

Alhamdulillah, sampai juga di akhir tutorial cara membuat fitur auth login, register dan logout sederhana menggunakan Laravel 7.

Lalu, apa selanjutnya?

Masih ada artikel lainnya yang akan saya tulis.

Itu sebabnya, ini bukan penutup.

Insya Allah akan terus berlanjut.

Selamat belajar …

Related posts:

Laravel Octane: Fitur dan Ulasan Terbaru

Tutorial Laravel 8 Socialite Login dan Register Facebook

Tutorial Kirim Email dengan Mailtrap dan Laravel 8