Hai, Sobat Jagoan! Sebelum mengikuti artikel ini, pastikan kamu telah mengikuti pembahasan seri Laravel bagian CRUD Laravel dengan Query Builder atau CRUD Data dengan Eloquent Laravel sebagai produk aplikasi yang akan dikembangkan fiturnya. Kalau pun kamu tidak mengikuti seri tersebut, kamu bisa menggunakan proyek aplikasi Laravel milik kamu sendiri untuk dilengkapi fiturnya. Artikel kali ini cocok untuk kamu yang ingin belajar membuat fitur login dan logout menggunakan Laravel. Yuk, langsung simak caranya di bawah ini.
1) Membuat Fitur Login
Fitur login memastikan user masuk ke website kamu menggunakan kredensial yang telah didaftarkan.
Step 1: Membuat Model dan Migration Data
Laravel sudah menyediakan model dan migration data untuk membuat fitur login dengan kolom name, email, dan password.
Struktur migration ini berada di tabel users pada folder database/migration/xxx_xx_xx_xxxxxx_create_users_table.php
Struktur model dari tabel user di atas berada di folder App/Models/ dengan nama User.php
Step 2: Membuat Controller Login
Buat controller bernama ‘LoginController’ untuk memproses input pengguna pada form ketika akan login ke dalam website.
Buka terminal lalu silahkan kamu menjalankan perintah perintah berikut:
php artisan make:controller LoginController
Setelah controller berhasil dibuat, buka file LoginController.php dan edit isinya dengan menambahkan kode di bawah ini.
- Tambahkan function index() untuk menampilkan form login ke pengguna.
public function index() {
return view('formLogin');
}
- Tambahkan function login() untuk memproses input data (di sini menggunakan email dan password) sebagai kredensial login pengguna.
public function login(Request $request) {
// Validasi Input
$request->validate([
'email' => 'required|email',
'password' => 'required',
]);
// Periksa Kredensial
if (Auth::attempt([
'email' => $request->email,
'password' => $request->password,
])) {
// Kalau Kredensial Cocok Arahkan ke Halaman Pengumuman
return redirect()->intended('/pengumuman');
}
return back()->withErrors([
'email' => 'Email atau password salah. Silahkan coba lagi.'
]);
}
Kamu dapat menyesuaikan controller login, sehingga setelah user login dapat diarahkan ke halaman tertentu sesuai dengan kebutuhan website kamu.
- Tambahkan dibagian atas untuk import libarary yang mengarah ke model User.php.
use Illuminate\Support\Facades\Auth;
use App\Models\User;
Step 3: Menjalankan Migrate Data
Apabila kamu belum menjalankan migrasi sebelumnya, silakan jalankan perintah berikut agar tabel-tabel bawaan Laravel, termasuk tabel users, terbentuk secara otomatis di dalam database:
php artisan migrate
Jika kamu hanya ingin menjalankan migrasi untuk satu file tertentu, gunakan perintah berikut:
php artisan migrate --path=database/migrations/xxxx_xx_xx_xxxxxx_nama_migrasi_table.php
Catatan: Pastikan tabel users sudah berhasil dimigrasi ya, Sob. Karena dalam artikel ini akan menggunakan tabel tersebut untuk menyimpan data pengguna (user) yang login ke aplikasi.
Step 4: Menambahkan Route untuk Login
Tambahkan rute untuk menampilkan halaman login du dalam file routes/web.php.
Route::get('/login', [LoginController::class, 'index']);
Route::post('login', [LoginController::class, 'login'])->name('login');
Jangan lupa tambahkan import yang mengarah ke LoginController.php.
use App\Http\Controllers\LoginController;
Step 5: Membuat Seeder Data User
Selanjutnya, buat data users dummy menggunakan fitur Seeder Laravel yang ada pada folder database/seeders/DatabaseSeeder.php dengan isi sebagai berikut.
<?php
namespace Database\Seeders;
use App\Models\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*/
public function run(): void
{
User::create([
'name' => 'Admin',
'email' => 'admin@admin.com',
'password' => Hash::make('admin123'),
]);
}
}
Kemudian jalankan perintah di bawah ini untuk mengirimkan data ke database.
php artisan db:seed
Output:
Step 6: Membuat View Login
Bagian selanjutnya membuat jembatan interaksi pengguna dengan sistem yaitu tampilan halaman Login sebagai tempat user menginputkan email dan password sebelum masuk ke aplikasi. Di sini, berarti kamu harus menyediakan file bernama formLogin.blade.php dalam folder resources/views/.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Login</title>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container d-flex justify-content-center align-items-center vh-100″>
<div class=”card p-4 shadow” style=”width: 400px;”>
<h3 class=”text-center mb-4″>Login</h3>
<form action=”{{ route(‘login’) }}” method=”POST”>
@csrf
<div class=”mb-3″>
<label for=”email” class=”form-label”>Email</label>
<input type=”email” name=”email” class=”form-control” id=”email” required>
@error(‘email’)
<div class=”text-danger”>{{ $message }}</div>
@enderror
</div>
<div class=”mb-3″>
<label for=”password” class=”form-label”>Password</label>
<input type=”password” name=”password” class=”form-control” id=”password” required>
@error(‘password’)
<div class=”text-danger”>{{ $message }}</div>
@enderror
</div>
<button type=”submit” class=”btn btn-primary w-100″>Login</button>
</form>
</div>
</div>
</body>
</html>
Step 7: Uji Coba
Untuk menguji fitur login berhasil, silahkan akses halaman website kamu dan login menggunakan kredensial yang sudah dibuat.
Fungsi login dalam Laravel memberikan akses kepada pengguna ke dalam sistem dengan memasukkan kredensial yang sah berupa email dan password. Tahapan proses mencakup validasi data yang dimasukkan, verifikasi kredensial menggunakan Auth::attempt(), serta pengaturan sesi pengguna. Jika otentikasi berhasil, pengguna akan dialihkan ke halaman yang ditentukan. Sebaliknya, jika gagal, pengguna akan kembali ke halaman form login awal.
Sampai sini kamu sudah berhasil membuat fitur login, Sob tapi kamu masih bisa mengakses halaman http://127.0.0.1/pengumuman tanpa login. Nah, untuk mengatasi ini kamu perlu menambahkan middleware auth yang berfungsi untuk membatasi akses halaman tertentu hanya untuk pengguna yang sudah login. Jadi tanpa middleware ini, route akan tetap terbuka untuk siapa pun, asalkan mereka tahu URL-nya.
Solusinya tambahkan middleware auth seperti ini:
Route::get('/pengumuman', [PengumumanController::class, 'index'])->middleware('auth');
Atau jika kamu punya banyak route yang ingin diamankan, bisa mengelompokkan route menjadi:
Route::middleware(['auth'])->group(function () {
Route::get('/pengumuman', [PengumumanController::class, 'index']);
// Tambahkan route lainnya di sini
});
2) Membuat Fitur Logout
Setelah kamu berhasil menambahkan fitur login, tentu akan lebih lengkap jika juga disediakan fitur logout pada website. Logout berfungsi untuk mengakhiri sesi pengguna yang sedang aktif, sehingga penggunaan sistem menjadi lebih aman. Dengan adanya fitur ini, pengguna dapat keluar dari aplikasi dengan aman setelah selesai mengaksesnya.
Selain itu, logout juga penting untuk mencegah akses tidak sah, terutama ketika perangkat digunakan secara bergantian oleh banyak orang. Laravel sendiri menyediakan dukungan untuk logout otomatis berdasarkan waktu tidak aktif (idle), yang semakin memperkuat aspek keamanan aplikasi.
Di Laravel, fitur logout bisa diterapkan menggunakan sistem autentikasi bawaan seperti Breeze, Passport, atau Jetstream. Proses logout umumnya melibatkan penghapusan sesi pengguna dan pengalihan ke halaman tertentu, misalnya halaman login atau halaman utama.
Step 1: Menambahkan function logout() pada Controller
Modifikasi LoginController.php sebelumnya dengan menambahkan function logout() seperti berikut:
public function logout(Request $request) {
// Proses Logout
Auth::logout();
// Menghapus session
$request->session()->invalidate();
$request->session()->regenerateToken();
// Arahkan ke halaman login
return redirect('/login')->with('status', 'Kamu telah berhasil logout.');
}
Step 2: Menambahkan Tombol Logout
Tambahkan tombol logout di halaman pengumuman pada website kamu. Sesuaikan dengan kebutuhan kamu.
<form action="{{ route('logout') }}" method="POST" style="display:inline;">
@csrf
<button type="submit">Logout</button>
</form>
Step 3: Membuat Route Logout
Kemudian tambahkan route logout untuk mengatur rute proses logout.
Route::post('/logout', [LoginController::class, 'logout'])->name('logout');
Step 4: Uji Coba
Login ke website kamu menggunakan kredensial email dan password yang sudah dibuat sebelumnya untuk dapat masuk ke halaman utama pengumuman. Lalu coba klik logout untuk menguji apakah dapat berjalan sesuai harapan.
Oke, Sob demikian cara menambahkan fitur login dan logout menggunakan Laravel. Kalau ada yang masih bikin bingung, jangan ragu hubungi Tim Support Jagoan Hosting via Live Chat atau Open Ticket, Sob!
Ke depannya kamu bisa mengembangkan fitur login ini dengan mengelompokkan pengguna berdasarkan peran atau disebut sebagai login multiuser. Sampai jumpa!