2. Setelah membuat project baru, siapkan databasenya terlebih dahulu. Buat database baru dengan
db_anisa, terserah Anda menggunakan phpMyAdmin
4. Selanjutnya membuat tabel users yang akan kita gunakan untuk login yang berisi username, email,
password dan field lainnya yang dibutuhkan. Laravel mempunyai fitur migration dengan
menyediakan Schema table users yang bisa langsung kita pakai, kemudian Model untuk tabel users
juga sudah disediakan, sehingga tidak perlu dibuat lagi.
Untuk menggunakan Fitur Migration Laravel kita gunakan perintah berikut:
php artisan migrate
Coba buka database Anda. Sekarang table-table sudah terbentuk.
5. Selanjutnya kita akan membuat Route. Buka file web.php yang ada di dalam direktori routes.
Tambahkan Route seperti berikut ini:
1. <?php
2.
3. use Illuminate\Support\Facades\Route;
4. use App\Http\Controllers\LoginController;
5. use App\Http\Controllers\HomeController;
6.
7. /*
8. |-------------------------------------------------------------------------
-
9. | Web Routes
10.|-------------------------------------------------------------------------
-
11.|
12.| Here is where you can register web routes for your application. These
13.| routes are loaded by the RouteServiceProvider and all of them will
14.| be assigned to the "web" middleware group. Make something great!
15.|
16.*/
17.
18.Route::get('/', [LoginController::class, 'login'])->name('login');
19.Route::post('actionlogin', [LoginController::class, 'actionlogin'])-
>name('actionlogin');
20.
21.Route::get('home', [HomeController::class, 'index'])->name('home')-
>middleware('auth');
22.Route::get('actionlogout', [LoginController::class, 'actionlogout'])-
>name('actionlogout')->middleware('auth');
23.
Perhatikan kode di atas, pada bagian kode program Route::get('/', [LoginController::class, 'login'])-
>name('login'); berfungsi untuk menampilkan form login.
Pada bagian kode program Route::post('actionlogin', [LoginController::class, 'actionlogin'])-
>name('actionlogin'); berfungsi untuk mengirim data login berupa username dan password ketika
diklik tombol login.
Pada bagian kode program Route::get('home', [HomeController::class, 'home'])->name('home')-
>middleware('auth'); bertujuan untuk menampilkan halaman home jika berhasil login, kemudian
dilengkapi dengan middleware auth agar halaman home hanya bisa diakses ketika sudah melakukan
login.
Pada bagian kode program Route::post('actionlogout', [LoginController::class, 'actionlogout'])-
>name('actionlogout')->middleware('auth'); bertujuan untuk mengirim aksi ketika
tombol logout diklik, kemudian dilengkapi dengan middleware auth agar perintah logout hanya bisa
diakses ketika sudah melakukan login.
6. Selanjutnya kita membutuhkan dua buah controller yaitu Login Controller dan Home Controller.
Sekarang buat Login Controller dengan perintah berikut:
php artisan make:controller LoginController
Isi dari LoginController.php adalah sebagai berikut:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Session;
if (Auth::Attempt($data)) {
return redirect('home');
} else {
Session::flash('error', 'Email atau Password Salah');
return redirect('/');
}
}
namespace App\Http\Controllers;
use Illuminate\Http\Request;
Perhatikan kode di atas, cukup jelas ya function index akan me-return view home.
8. Selanjutnya kita akan membuat view untuk tampilan halaman form login. Buat file view baru
dengan nama login.blade.php simpan di dalam direktori resources/views.
Berikut kode program login.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>Login - Aplikasi Nilai Santri</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container"><br>
<div class="col-md-4 col-md-offset-4">
<h2 class="text-center"><b>ANISIS</b><br>Aplikasi Nilai
Siswa</h3>
<hr>
@if(session('error'))
<div class="alert alert-danger">
<b>Opps!</b> {{session('error')}}
</div>
@endif
<form action="{{ route('actionlogin') }}" method="post">
@csrf
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control"
placeholder="Email" required="">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-
control" placeholder="Password" required="">
</div>
<button type="submit" class="btn btn-primary btn-block">Log
In</button>
<hr>
<p class="text-center">Belum punya akun? <a
href="#">Register</a> sekarang!</p>
</form>
</div>
</div>
</body>
</html>
Perhatikan form di atas, pada form di atas kita membuat @csrf. CSRF adalah singkatan dari Cross-
site request forgery yang merupakan sebuah serangan yang dilakukan oleh pengguna yang tidak
terautentikasi untuk mengeksekusi perintah. Untuk mengatasi ini, Laravel sudah menyediakan CSRF
Token. Nantinya token inilah yang melakukan verifikasi apakah request yang diberikan memang
berasal dari user yang bersangkutan.
Dengan membuat kode @csrf artinya kita telah membuat sebuah input dengan type
hidden dan name _token, seperti berikut ini:
<input type="hidden" name="_token" value="QQtzCXZYXGeWiPHoK4MJ62rtfSlex9gPqQganbv2">
Pada form yang sudah kita buat di atas, pada bagian action="{{ route('actionlogin') }}"
method="post" kita mengatur actionnya ke actionlogin dengan method post sesuai route yang ada
di file web.php.
Berikut ini adalah tampilan halaman login:
9. Kemudian kita membutuhkan satu lagi view baru untuk halaman home. Buat view dengan nama
home.blade.php simpan di dalam direkotori resources/views.
Disini kita akan menggunakan Sistem Blade Template Laravel, maka kita buat dulu template
masternya dengna nama master.blade.php.
Isi dari file master.blade.php sebagai berikut:
<!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>Aplikasi Nilai Santri</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></
script>
</head>
<body>
<div class="container">
<div class="col-md-12">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{route('home')}}">ANISA -
Aplikasi Nilai Siswa</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling
-->
<div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-
user"></i> {{Auth::user()->email}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a>Level: {{Auth::user()->role}}</a></li>
<li role="separator" class="divider"></li>
<li><a href="{{route('actionlogout')}}"><i class="fa fa-
power-off"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
@yield('konten')
</div>
</div>
</div>
</body>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</html>
@section('konten')
<h4>Selamat Datang <b>{{Auth::user()->name}}</b>, Anda Login sebagai
<b>{{Auth::user()->role}}</b>.</h4>
@endsection
Perhatikan kode pada view home di atas, pada pagian kode program {{Auth::user()-
>name}} dan {{Auth::user()->role}} berfungsi untuk menampilkan data nama dan role sesuai user
yang login. Fitur session Auth ini sudah disediakan Laravel dan session akan di generate saat user
berhasil login, kita dapat menggunakan kapanpun dan bisa tampilkan di semua file view.
Berikut ini adalah tampilan halaman home ketika user berhasil login: