Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial Membuat Fitur Auth Sederhana di Laravel 8

7 min read

Tutorial Simple Auth Laravel 8
Loading...

Tutorial Membuat Fitur Auth Sederhana di Laravel 8 – Step by step membuat fitur login, register dan logout di Laravel 8 tanpa library tambahan.

Laravel 8 hadir dengan pembaruan fitur yang canggih. Untuk masalah Authentication saja sudah ada Laravel UI, Jetstream dan lain-lain.

Fiturnya pun sangat melimpah ruah dan sangat memudahkan siapa saja yang ingin membangun web menggunakan Laravel.

… bahkan dapat dikombinasikan dengan React Js, Vue Js dan Bootstrap.

Meski sangat melimpah, terkadang kita perlu memahaminya secara manual dan membuat custom auth Laravel 8.

Tujuannya agar kita dapat memahami dan berani mencoba hal baru.

… dan yang paling penting adalah kita ga sekedar memakai Library tanpa tahu alur codingnya.

Loading...

Nah, dengan mengikuti tutorial ini sampai selesai, minimal kita dapat memahaminya tanpa menggunakan library atau node modules.

Siap?

Baca Juga: Tutorial CRUD Laravel 8 untuk Pemula

Step By Step Membuat Fitur Auth di Laravel 8

Sebagai tahap persiapan, ada beberapa hal perlu kita ketahui.

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

Kedua, selesai 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.

Loading...

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 8 melalui composer yang sudah terinstall.

Loading...

Step 2 – Install Laravel 8 Melalui Composer

Cara install Laravel 8 sangat mudah apabila menggunakan Composer.

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

composer create-project --prefer-dist laravel/laravel laravel8_auth

Done.

Tapi sebelum itu, internet kamu harus stabil ya.

Silahkan tunggu sampai proses installasinya selesai.

Step 3 – Uji Coba Menjalankan Laravel 8

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

Silahkan masuk ke dalam direktori project.

Loading...

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 laravel8_auth
// then
php artisan serve

Done.

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

http://127.0.0.1:8000

Hasilnya:

Install Laravel 8

Step 4 – Menyiapkan Database

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

Loading...

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.

Biasanya file .env ini ada di dalam direktory root laravel8_auth/.env ya.

Mantap ya!

Tinggal pakai aja ni.

Kalau begitu, kita buat database bernama laravel8_auth.

Loading...

Terserah di PHP Myadmin atau tools lainnya.

Kalau sudah menulis nama databasenya, silahkan klik tombol create.

Selanjutnya, buka file .env dan kita setting konfigurasi databasenya.

Cari kode berikut ini:

DB_DATABASE=laravel

Ubah menjadi:

DB_DATABASE=laravel8_auth

Tak lupa untuk atur username, password dan port-nya ya.

Jika semua konfigurasi .env sudah selesai, mari kita lanjutkan …

Loading...

Step 5 – Menyiapkan Table

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

Pakai ctrl + c aja.

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.

Loading...

Tambahkan kode berikut ini:

Loading...
<?php

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

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

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

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

});

Penjelasan:

Kode program di atas (baris 6 – 10) dibuat untuk menampilkan form login, proses login, form register, proses register.

Kemudian dilengkapi dengan middleware auth (baris ke 12) agar home dan logout hanya bisa diakses ketika sudah melakukan login.

Ibaratnya kalau kita mau masuk ke dalam rumah orang, mesti ada izin terlebih dahulu.

Paham ya.

Step 7 – Membuat Controller Auth

Ketik command berikut ini pada terminal untuk membuat AuthController.php:

php artisan make:controller AuthController

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

Loading...

Berikut kodenya:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use Illuminate\Support\Facades\Auth;
use Validator;
use Hash;
use Session;
use App\Models\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 kode di bawah ini kita gunakan untuk memeriksa apakah user sudah login atau belum.

Loading...

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 Succes
    return redirect()->route('home');
}

Kemudian tak lupa kita menggunakan Validator standart saat terjadi proses login dan register.

… dan yang perlu dicatat saat kita membuat Auth secara manual adalah baris kode ini:

Auth::attempt($data);

Fungsing buat apa sih?

Banyak.

… di antaranya baris kode tersebut dapat melakukan proses pengecekan validasi login langsung ke table users dan memberikan fasilitasi session jika berhasil login.

Singkat kodenya, besar manfaatnya.

Loading...

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.

Loading...

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>

Simpan dulu ya.

Butuh penjelasan?

Saya rasa teman-teman sudah banyak tahu tentang html, bootstrap 4 dan session ya.

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>

Sama seperti login, rasanya kode di atas hanya berupa html, bootstrap 4 dan session yang teman-teman sudah banyak tahu tentangnya.

Loading...

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>

Simpan ya.

Step 12 – Testing Laravel 8 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:

form login laravel 7 auth sederhana
Form Login

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

Loading...

Klik link register tersebut, maka ini hasilnya:

halaman register laravel 7 auth sederhana
Form Register

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

halaman dashboard laravel 7 auth sederhana
Halaman Dashboard

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 8.

Lalu, apa selanjutnya?

Masih ada artikel lainnya yang akan saya tulis.

Itu sebabnya, ini bukan penutup.

Loading...

Insya Allah akan terus berlanjut.

Selamat belajar …

Catatan:

Silahkan download source code project ini melalui link Github di bawah ini:

Link Download

Loading...

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

2 Replies to “Tutorial Membuat Fitur Auth Sederhana di Laravel 8”

  1. Min misalkan kita pake Tabel buatan sendiri yang strukturnya beda dari bawaan Migration Laravel.
    Itu gimana ? kan ada yang ngk pake kolom ‘id’ atau kolom password bukan ‘password’.

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.