Hallo teman-teman semuanya kembali lagi bersama dengan saya di blog kita bersama, kali ini saya ingin berbagi tutorial bagaimana membuat fitur login di framework laravel. Hampir semua website di seluruh dunia ini membutuhkan yang namanya fitur login, ini disebabkan untuk para pemilik website dapat melakukan perubahan dan penambahan data di dalam websitenya.
oke tanpa berlama-lama langsung saja kita masuk ke dalam tutorial bagaimana cara menambahkan fitur login menggunakan laravel.
sebelumnya pastikan teman-teman memiliki tools dibawah ini :
1. Visual Studio code / sublime atau jenis editor lainya
2. Command Line Interface (CMD) atau Git Bash
3. Xampp , Lamp atau tools sejenisnya
jika tools diatas sudah terpasang di komputer teman-teman semuanya, silahkan ikuti langkah-langkah dibawah ini :
Langkah 1. Instalasi dan konfigurasi Environtment Laravel
untuk melakukan instalasi laravel, silahkan jalankan perintah dibawah ini dan jalankan melalui command line (CMD) / terminal teman-teman semuanya
composer create-project laravel/laravel fitur-login-laravel
setelah melakukan instalasi projek laravel, selanjutnya kita akan menggunakan visual studio code dan membuka projek laravel didalamnya, dengan cara klik file > Buka Folder > Pilih Folder fitur-login-laravel yang dimana fitur-login-laravel merupakan folder aplikasi yang baru saja kita download, sehingga tampilanya akan tampak seperti gambar dibawah ini :
selanjutnya kita akan melakukan konfigurasi laravel, dengan cara silahkan teman-teman buka file .env yang terdapat pada editor visual studio code kita, dan selanjtunya silahkan konfigurasi seperti berikut ini :
a. Konfigurasi Base URL
silahkan ganti APP_URL menjadi http://localhost:8000 yang dapat dilihat seperti pada gambar diatas
b. Konfigurasi Database
c. jika teman-teman sudah membuat database dengan nama laravel selanjutnya buka kembali visual studio code teman-teman semuanya dan silahkan klik menu terminal > new terminal lalu jalankan perintah berikut ini :
php artisan migrate
Langkah 2. Membuat Controller Login
selanjutnya kita akan membuat controller baru menggunakan perintah artisan laravel, silahkan buka visual studio code lalu pilih menu terminal > new terminal, selanjutnya jalankan perintah berikut ini :
php artisan make:controller LoginController
buka file LoginController yang terdapat pada folder app > HTTP > LoginController.php selanjutnya copy source code dibawah ini kedalamnya :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class LoginController extends Controller
{
// membuat halaman login
public function login()
{
return view("login");
}
}
Langkah 3. Membuat Controller Admin
untuk cara membuat controller admin itu sama dengan langkah 2 pada saat kita ingin membuat controller login, yakni menggunakan perintah artisan :
php artisan make:controller AdminController
lalu copy source code dibawah ini kedalam file AdminController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AdminController extends Controller
{
// membuat function login
public function index()
{
return view('dashboard');
}
}
Langkah 4. Membuat View untuk halaman login
silahkan buat file di folder resource / view dengan nama login.blade.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/
dAiS6JXm" crossorigin="anonymous">
<title>Halaman Login</title>
</head>
<body>
<div class="container">
<div class="text-center mt-3">
<h1>Halaman Login</h1>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form method="POST" action="{{ url('') }}/login/authenticate">
@csrf
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email" name="email">
<small id="emailHelp" class="form-text text-muted">
We'll never share your email with anyone
else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"
name="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/
Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/
dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/
ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/
js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/
JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</body>
</html>
Langkah 5. Membuat View untuk halaman dashboard admin
silahkan buat file di folder resource / view dengan nama dashboard.blade.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0
/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWv
TNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Admin | Dashboard </title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="display-4">Welcome Back,</h1>
<p class="lead">This is a simple hero unit,
a simple jumbotron-style component for calling extra attention
to
featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography
and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Logout</a>
</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9
/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9
/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K
/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0
/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe
/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</body>
</html>
Langkah 6. Membuat Routes dan Middleware
selanjutnya silahkan anda buka folder routes > web.php selanjutnya pastekan route dibawah ini ke dalamnya :
<?php
use App\Http\Controllers\AdminController;
use App\Http\Controllers\LoginController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
// halaman dashboard admin
Route::get('/', [AdminController::class, 'index'])->middleware('auth');
// halaman login
Route::get("/login", [LoginController::class, 'login'])->name('login')
->middleware('guest');
Route::post('/login/authenticate', [LoginController::class, 'authenticate']);
Route::get('/logout', [AdminController::class, 'logout'])->middleware('guest');
dapat dilihat pada script routes diatas bahwa, untuk halaman dashboard kita sudah batasi dengan middleware auth, yang artinya merupakan middleware bawaan dari laravel yang berfungsi untuk membatasi user lain untuk masuk ke halaman dashboard admin, dan selain itu kita juga dapat melihat middleware guest yang dimana middleware ini juga bawaan dari laravel yang berfungsi untuk menyatakan bahwa halaman tersebut dapat diakses oleh siapa saja.
Langkah 7. Membuat logika login
selanjutnya disini kita akan membuat script untuk login ke dalam halaman dashboard, dengan cara copy source di bawah ini dan pastekan tepat dibawah script login yang terdapat pada file LoginController.php
// logika login
public function authenticate(Request $request)
{
// validasi email dan password
$message = [
"email.required" => "Email Wajib Di isi",
"email.email" => "Email Tidak Valid",
"password.required" => "Password Wajib Di isi"
];
$credential = $request->validate([
'email' => "required|email",
'password' => 'required'
], $message);
// login ke dashboard
if (Auth::attempt($credential)) {
// generate session
$request->session()->regenerate();
// redirecr ke halaman dashboard admin
return redirect()->intended("/");
}
// redirect login gagal
return redirect('/login')
->withErrors(['message1' => "Username / Password Salah"]);
}
Langkah 8. Menambahkan User baru ke dalam database user
Sebelum kita menguji coba sistem login yang sudah kita buat disini kita harus membuat user baru terlebih dahulu masuk ke dalam database user, untuk mempermudah disini kita akan membuat user baru tersebut melalui seeder, antara lain sebagai berikut :
> masuk ke folder database > seeder > DatabaseSeeder.php dan copy source code ini ke dalamnya
<?php
namespace Database\Seeders;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\User;
use Illuminate\Support\Str;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
// \App\Models\User::factory(10)->create();
// \App\Models\User::factory()->create([
// 'name' => 'Test User',
// 'email' => 'test@example.com',
// ]);
// membuat user baru ke database
User::create([
'name' => "Cakdun",
'email' => "cakdun@blog.com",
'email_verified_at' => now(),
'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/
igi', // password
'remember_token' => Str::random(10),
]);
}
}
selanjutnya buka kembali visual studio code dan pilih menu terminal > new terminal dan jalankan perintah berikut ini :
php artisan db:seed
Langkah 9. Uji Coba Sistem Aplikasi
selanjutnya kita akan melakukan uji coba sistem, sebelum melakukan uji coba sistem disini kita diharuskan untuk menjalankan aplikasi laravel terlebih dahulu, silahkan jalankan perintah berikut ini untuk menjalankan aplikasi laravel
php artisan serve
Selanjutnya buka web browser anda dan buka http://localhost:8000, dan silahkan masukkan email dan password sesuai dengan user yang kita tambahkan ke dalam database (langkah 8)
sekian tutorial bagaimana cara membuat fitur login pada laravel, jika terdapat kesulitan silahkan tinggalkan pesan di kolom komentar
0 Komentar