Buat Login Logout Laravel Multi User

Laravel adalah salah satu framework PHP yang sangat populer untuk mengembangkan aplikasi web. Dalam artikel ini, kita akan memandu Anda langkah demi langkah untuk membuat sistem login, logout multi user menggunakan Laravel. Ini adalah tutorial yang cocok untuk pemula yang ingin belajar cara mengembangkan aplikasi web dengan Laravel.



1. Instalasi Laravel

Pertama, kita akan memulai dengan menginstal Laravel. Pastikan Anda sudah memiliki Composer terinstal di komputer Anda. Buka terminal dan jalankan perintah berikut untuk membuat projek Laravel baru:

composer create-project laravel/laravel login-logout

Setelah selesai, gunakan perintah berikut untuk membuka projek dengan vscode:

cd login-logout
code .

Jika selesai, maka akan tampak seperti ini:

Buat Login Logout Laravel Multi User


2. Instalasi Ekstensi

Untuk meningkatkan produktivitas dalam pengembangan Laravel, kita akan menginstal dua ekstensi yang berguna, yaitu “PHP Intelephense” oleh Ben Mewburn dan “Laravel Blade Snippets” oleh Winnie Lin pada editor kode Anda.



3. Menjalankan Server Lokal

Anda dapat menjalankan server Laravel secara lokal dengan perintah berikut:

php artisan serve

Akses aplikasi Anda melalui http://localhost:8000 pada browser Anda.



4. Membuat Database di phpMyAdmin

Anda perlu membuat database di phpMyAdmin atau alat manajemen database lainnya sesuai dengan preferensi Anda. Katakan saja, kita akan membuat database dengan nama login_logout, sehingga akan tampak seperti ini:



5. Konfigurasi Koneksi Database

Buka file .env pada direktori projek Laravel Anda dan sesuaikan pengaturan koneksi database dengan informasi yang sesuai:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=login_logout
DB_USERNAME=root
DB_PASSWORD=


6. Membuat File Migrasi

Laravel secara default telah menyediakan migrasi di database > migrations untuk user dengan nama create_user_table (1) dan telah memiliki baris kode defaultnya, namun kita akan menambahkan sebuah “role” dengan tipe ENUM (2):

$table->enum('role', ['superadmin', 'admin', 'user'])->default('user');

Tambahkan baris kode berikut ke file migrasi user, sehingga akan tampak sebagai berikut:



7. Melakukan Migrate

Jalankan perintah migrate untuk membuat tabel baru:

php artisan migrate

Jika berhasil, dapat anda lihat di phpmyadmin akan terbuat tabel baru dengan nama users (1) dan kolom-kolomnya (2) seperti ini:



8. Membuat Seeder User

Seeder digunakan untuk mengisi data awal ke dalam tabel. Kita akan membuat tiga user dengan peran (role) yang berbeda disertai dengan password. Untuk membuat sebuah seeder dengan perintah:

php artisan make:seeder UserSeeder

Kemudian, edit file seeder yang baru dibuat dan tambahkan data untuk user superadmin, admin, dan user dengan kata sandi yang dienkripsi menggunakan bcrypt. Berikut contoh isi file seeder:

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Hash;

class UserSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        // User Superadmin
        DB::table('users')->insert([
            'name' => 'Superadmin',
            'email' => 'su********@ex*****.com',
            'role' => 'superadmin',
            'password' => Hash::make('123456'),
        ]);

        // User Admin
        DB::table('users')->insert([
            'name' => 'Admin',
            'email' => 'ad***@ex*****.com',
            'role' => 'admin',
            'password' => Hash::make('123456'),
        ]);

        // User Biasa
        DB::table('users')->insert([
            'name' => 'User Biasa',
            'email' => 'us**@ex*****.com',
            'role' => 'user',
            'password' => Hash::make('123456'),
        ]);
    }
}


9. Menjalankan Seeder User

Jalankan seeder untuk mengisi data user ke dalam tabel users:

php artisan db:seed --class=UserSeeder

Setelah seeder dijalankan, maka data-data user yang telah kita buat sebelumnya akan masuk ke tabel user di database seperti yang ditunjukkan pada gambar berikut:



10. Membuat Form Login

Silahkan buatkan file view yang berisi form login di resources > views > login.blade.php. Lalu isikan kode berikut didalamnya:

<!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>
</head>

<body>
    <form method="POST" action="{{ route('login') }}">
        @csrf

        <label for="email">Email</label>
        <input id="email" type="email" name="email" required autofocus>

        <label for="password">Password</label>
        <input id="password" type="password" name="password" required>

        <button type="submit">Login</button>
    </form>
</body>

</html>


11. Membuat View Dashboard

Ketika sukses login, akan menuju halaman dashboard dengan nama file resources > views > dashboard.blade.php, berikut adalah kodenya:

<!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>
</head>

<body>
    <h1>Ini adalah halaman dashboard!</h1>
    <h2>Selamat datang {{ Auth::user()->name }}</h2>
    <a href="/logout">Logout</a>
</body>

</html>

Pada kedua file view diatas, menggunakan format penulisan html berulang. Ada cara lain yang lebih mudah dilakukan dengan fitur laravel Blade Template Engine yang dapat anda baca disini.



12. Membuat Controller User

Buatlah controller User dengan perintah:

php artisan make:controller UserController

Dalam controller user, Anda dapat menambahkan fungsi index untuk menampilkan halaman login, dan fungsi login untuk memproses data dari form login, melakukan validasi, dan memeriksa data masukan dengan database menggunakan auth attempt. Jika data valid, Anda akan dialihkan ke halaman tertentu. Berikut contoh isi controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class UserController extends Controller
{
    public function index()
    {
        return view('login');
    }

    public function login(Request $request)
    {
        $credential = $request->validate([
            'email' => ['required', 'email'],
            'password' => ['required'],
        ]);


        if (Auth::attempt($credential)) {
            return redirect()->route('dashboard');
        }

        return back()->withErrors(['email' => 'Login gagal. Periksa email dan password Anda.']);
    }

    public function logout()
    {
        Auth::logout();
        return redirect()->route('login');
    }
}


13. Membuat Route

Buatlah route yang mengarahkan ke controller User. Jika memungkinkan, Anda dapat menggunakan middleware untuk memproteksi rute tertentu. Berikut contoh isi file routes/web.php:

<?php

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

//Jika belum login
Route::middleware(['guest'])->group(function () {
    Route::get('/login', [UserController::class, 'index'])->name('login');
    Route::post('/login', [UserController::class, 'login']);
});

//Jika sudah login dan melakukan akses ke "/login"
Route::get('/home', function () {
    return redirect('/dashboard');
});

//Jika sudah login
Route::middleware(['auth'])->group(function () {
    Route::view('/dashboard', 'dashboard')->name('dashboard');
    Route::get('/logout', [UserController::class, 'logout'])->name('logout');
});


14. Pengujian

Sebelum memulai pengujian, pastikan lokal server laravel aktif. Jika belum aktif, gunakan perintah:

php artisan serve

Setelah lokal server aktif, sekarang jalankan websitenya dengan alamat:

http://127.0.0.1:8000/login

Maka akan muncul seperti berikut:

Buat Login Logout Laravel Multi User

Silahkan isi dengan:

  • Superadmin
    email : su********@ex*****.com
    pass: 123456
  • Admin
    email: ad***@ex*****.com
    pass: 123456
  • User
    email: us**@ex*****.com
    pass: 123456


Maka hasilnya adalah sebagai berikut:

Buat Login Logout Laravel Multi User

Dengan mengikuti langkah-langkah di atas, Anda akan memiliki sistem login, logout, yang berfungsi dengan baik menggunakan Laravel. Pastikan untuk melakukan penyesuaian lebih lanjut sesuai dengan kebutuhan aplikasi Anda. Semoga tutorial ini membantu Anda memulai perjalanan pengembangan web dengan Laravel. Happy coding!

Scroll to Top