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-logoutSetelah selesai, gunakan perintah berikut untuk membuka projek dengan vscode:
cd login-logout
code .Jika selesai, maka akan tampak seperti ini:
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 serveAkses 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 migrateJika 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 UserSeederKemudian, 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' => 'superadmin@example.com',
'role' => 'superadmin',
'password' => Hash::make('123456'),
]);
// User Admin
DB::table('users')->insert([
'name' => 'Admin',
'email' => 'admin@example.com',
'role' => 'admin',
'password' => Hash::make('123456'),
]);
// User Biasa
DB::table('users')->insert([
'name' => 'User Biasa',
'email' => 'user@example.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=UserSeederSetelah 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
<!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 UserControllerDalam 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 serveSetelah lokal server aktif, sekarang jalankan websitenya dengan alamat:
http://127.0.0.1:8000/loginMaka akan muncul seperti berikut:
Silahkan isi dengan:
- Superadmin
email : superadmin@example.com
pass: 123456 - Admin
email: admin@example.com
pass: 123456 - User
email: user@example.com
pass: 123456
Maka hasilnya adalah sebagai berikut:
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!
