Membuat Sendiri Fitur dan Formulir Login


Setelah tulisan fitur registrasi dipublikasikan, fitur selanjutnya yang akan dijabarkan adalah fitur login. Penjabaran pembuatan fitur  login ini sendiri mencakup beberapa hal, antara lain route, controller, dan view.

Khusus untuk pengecekan (autentikasi) pengguna, method-nya sudah disediakan oleh Laravel melalui facade Auth.

Pada tulisan ini, kita akan membuat fitur yang secara garis besar sama persis dengan yang sudah disediakan oleh Laravel. Ada beberapa fitur yang ditambahkan nantinya. Semisal, pengecekan untuk status user yang belum diaktifkan. Mengenai status user ini, sudah dibahas pada tulisan Membuat Fitur Verifikasi Email pada Formulir Registrasi.

Membuat View

Buat berkas Blade baru dengan nama form.blade.php pada direktori resources/views/signin.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Login</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ route('signin.attempt') }}">
                        {{ csrf_field() }}

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}">

                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label for="password" class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Login
                                </button>

                                <a class="btn btn-link" href="{{ route('password.request') }}">
                                    Forgot Your Password?
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Membuat Controller

Selanjutnya, membuat controller dengan nama SigninController yang berisi method untuk memuat view di atas dan method lain untuk melakukan pengecekan data pengguna (user).

Untuk percepatan, sekiranya lebih nyaman menggunakan Artisan console dalam pembuatan.

$ php artisan make:controller SigninController

Controller created successfully.
<?php

namespace App\Http\Controllers;

use Auth;
use Illuminate\Http\Request;

class SigninController extends Controller
{
    public function form()
    {
        return view('signin.form');
    }

    public function attempt(Request $request)
    {
        $this->validate($request, [
            'email' => 'email|exists:users,email',
            'password' => 'required',
        ]);

        $attempts = [
            'email' => $request->email,
            'password' => $request->password,
        ];

        if (Auth::attempt($attempts, (bool) $request->remember)) {
            return redirect()->intended('/home');
        }

        return redirect()->back();
    }
}

Mulai dari baris ke tujuh belas sampai dengan dua puluh, kita melakukan validasi masukan dari formulir (form) login.

Proses pengecekan data valid dimulai dari baris ke dua puluh dua menggunakan method attempt() dalam facade Auth.

Parameter pertama dari method attempt() berupa array berpasangan, attribute dan value. Bisa dilihat pada contoh skrip di atas, di mana saya memasangkan atribut email dengan properti email pada objek $request. Parameter kedua dari method tersebut berupa boolean, untuk menginstruksikan ke Laravel akan penggunaan fitur “remember me”.

Mengenai method attempt() tersebut, skripnya dapat kalian pelajari pada berkas /vendor/laravel/framework/src/Illuminate/Auth/SessionGuard.php. Sebagai bocoran, berikut isi skrip dari method tersebut.

/**
 * Attempt to authenticate a user using the given credentials.
 *
 * @param  array  $credentials
 * @param  bool   $remember
 * @return bool
 */
public function attempt(array $credentials = [], $remember = false)
{
    $this->fireAttemptEvent($credentials, $remember);

    $this->lastAttempted = $user = $this->provider->retrieveByCredentials($credentials);

    // If an implementation of UserInterface was returned, we'll ask the provider
    // to validate the user against the given credentials, and if they are in
    // fact valid we'll log the users into the application and return true.
    if ($this->hasValidCredentials($user, $credentials)) {
        $this->login($user, $remember);

        return true;
    }

    // If the authentication attempt fails we will fire an event so that the user
    // may be notified of any suspicious attempts to access their account from
    // an unrecognized user. A developer may listen to this event as needed.
    $this->fireFailedEvent($user, $credentials);

    return false;
}

Mendefinisikan Route

Tambahkan dua buah route yang merujuk ke controller di atas agar dapat diakses melalui peramban (browser).

Route::get('signin', 'SigninController@form')->name('signin.form');
Route::post('attempt', 'SigninController@attempt')->name('signin.attempt');

Ujicoba

Untuk mengujinya, kalian bisa menjalankan built-in web server denga perintah php artisan serve, kemudian mengaksesnya melalui peramban dengan URI /signin. Jika pos-el (email) belum terdaftar, kalian bisa meregistrasikannya terlebih dahulu pada URI /signup.

Formulir login

Formulir login

Ingat, tulisan ini berhubungan dengan dua tulisan sebelumnya soal registrasi, jadi jangan bingung soal URI baru yang saya sebutkan.

Cek Status Pengguna (User)

Di tulisan Membuat Fitur Verifikasi Email pada Formulir Registrasi, kita menambahkan field baru dengan nama status pada tabel users. Apabila pengguna mendaftar dan belum memverifikasi pos-el (email), maka seharusnya dia tidak bisa login. Di tabel users sendiri, nilai status adalah “pending” jika belum diverifikasi, dan bernilai “activated” jika sudah diverifikasi.

Tentunya, kita harus melakukan pengecekan data, di mana hanya status “activated” saja yang bisa login. Dengan memodifikasi sedikit skrip di atas, maka hasilnya adalah sebagai berikut.

$attempts = [
    'email' => $request->email,
    'password' => $request->password,
    'status' => 'activated'
];

Di baris ke empat, kita menambahkan array bari dengan key nama field status di tabel users dan nilainya statis dengan isian “activated”.

Kalian bisa menambahkan field lain sebanyak yang kalian butuhkan.

Contoh Aplikasi

Contoh aplikasi bisa kalian lihat pada repositori Github. Khusus untuk tulisan ini, tidak disediakan live demo.

Tak Berkategori

Yugo Purwanto

Pemrogram PHP dan JavaScript yang sedang sibuk mengembangkan aplikasi Glosarium Bahasa Indonesia.

1 comment

Tinggalkan Balasan