Laravel

(Part 4) Membuat Aplikasi POS (Point of Sales) Laravel 5.6 - Otentikasi User

(Part 4) Membuat Aplikasi POS (Point of Sales) Laravel 5.6 - Otentikasi User

1533 Dilihat

Pendahuluan

Bagian terpenting dari sebuah aplikasi yang memiliki data bersifat privasi adalah dengan membuat fitur otentikasi untuk memberikan sekat antara antar pengguna aplikasi. Sebagaimana yang telah diketahui, bahwa dalam schema database sebelumnya, kita telah memiliki table users, dimana table ini akan digunakan untuk menyimpan data user yang memiliki akses kedalam data yang akan dilindungi dengan fitur otentikasi tersebut.

Seiring berjalannya waktu, terjadi lagi penambahan informasi bahwasanya ada perubahan flow dari aplikasi yang sedang kita bangun, dimana user dapat dibekukan sehingga tidak bisa login kedalam aplikasi dan juga dapat diaktifkan kembali agar bisa login.

Jika dianalisa, berarti hanya ada Yes or No untuk melakukan penerapan tersebut, so, perubahan yang akan dilakukan di-table users adalah dengan menambahkan 1 field dengan nama status misalnya, dimana status ini kita berikan tipe data boolean karena hanya terdapat dua kondisi didalamnya.

Baca Juga: Membuat Aplikasi POS - Manajemen Produk

Add New Field to Users

Untuk menambahkan field tersebut, cukup dengan membuat migration baru dengan command:

php artisan make:migration add_status_to_users_table

Note: Nama migration sebaiknya mewakili apa yang akan dilakukan.

Kemudian tambahkan code berikut pada method Up:

Schema::table('users', function (Blueprint $table) {
    $table->boolean('status')->default(false)->after('password');
});

Jangan lupa jalankan command:

php artisan migrate

Make Authentication

Secara default, Laravel telah menyediakan command untuk men-generate authentication, dimana command ini seperti magic karena hanya dengan sebaris code dapat men-generate controller, view bahkan hingga routing-nya. Keren kan? Sebenarnya materi ini sudah pernah dibahas, kamu bisa membaca Mudahnya membuat fitur register dan login pada Laravel 5.4.

php artisan make:auth

pos - authentication

Tugas kita selanjutnya adalah menimpa function login, karena kita akan menambahkan parameter status sebagai persyaratan otentikasinya.

Buka file app/Http/Controllers/Auth/LoginController.php, kemudian tambahkan method login:

public function login(Request $request)
{
    $this->validate($request, [
        'email' => 'required|email',
        'password' => 'required|string'
    ]);
​
    if (auth()->attempt(['email' => $request->email, 'password' => $request->password, 'status' => 1])) {
        return redirect()->intended('home');
    }
    return redirect()->back()->with(['error' => 'Password Invalid / Inactive Users']);
}

 Note: Terdapat 3 parameter yang harus terpenuhi untuk proses otentikasi, yakni: email, password dan status. Dimana ketiganya harus bernilai true, dan apabila sebaliknya maka akan kembali ke halaman login dengan membuat flash message error.

Bersamaan dengan ini, kita juga akan melakukan modifikasi untuk layout login otentikasinya dengan menggunakan login yang telah disediakan oleh template yang kita gunakan. Buat file auth.blade.php di dalam folder resources/views/layouts, kemudian masukkan code berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    @yield('title')
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
​
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="{{ asset('dist/css/adminlte.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/iCheck/square/blue.css') }}">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page">
    <div class="login-box">
        <div class="login-logo">
            <a href="{{ url('/') }}"><b>Admin</b>DW</a>
        </div>
​
        @yield('content')
    </div>
​
    <script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('plugins/iCheck/icheck.min.js') }}"></script>
    <script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass   : 'iradio_square-blue',
            increaseArea : '20%' // optional
        })
    })
    </script>
</body>
</html>

Note: Code diatas hanya sebuah code kerangka dasar dari layouts otentikasi.

Kemudian buka file resources/views/auth/login.blade.php, lalu modifikasi menjadi:

@extends('layouts.auth')
​
@section('title')
    <title>Login</title>
@endsection
​
@section('content')
    <div class="card">
        <div class="card-body login-card-body">
            <p class="login-box-msg">Sign in to start your session</p>
​
            <form method="POST" action="{{ route('login') }}">
                @csrf
                @if (session('error'))
                    @alert(['type' => 'danger'])
                        {{ session('error') }}
                    @endalert
                @endif
                <div class="form-group has-feedback">
                    <input type="email"
                        name="email" 
                        class="form-control {{ $errors->has('email') ? ' is-invalid' : '' }}" 
                        placeholder="{{ __('E-Mail Address') }}"
                        value="{{ old('email') }}">
                    <span class="fa fa-envelope form-control-feedback"> {{ $errors->first('email') }}</span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" 
                        name="password"
                        class="form-control {{ $errors->has('password') ? ' is-invalid' : '' }} " 
                        placeholder="{{ __('Password') }}">
                    <span class="fa fa-lock form-control-feedback"> {{ $errors->first('password') }}</span>
                </div>
                <div class="row">
                    <div class="col-8">
                        <div class="checkbox icheck">
                            <label>
                                <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> {{ __('Remember Me') }}
                            </label>
                        </div>
                    </div>
                    <div class="col-4">
                        <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
                    </div>
                </div>
            </form>
​
            <div class="social-auth-links text-center mb-3">
                <p>- OR -</p>
                <a href="#" class="btn btn-block btn-primary">
                    <i class="fa fa-facebook mr-2"></i> Sign in using Facebook
                </a>
                <a href="#" class="btn btn-block btn-danger">
                    <i class="fa fa-google-plus mr-2"></i> Sign in using Google+
                </a>
            </div>
​
            <p class="mb-1">
                <a href="#">I forgot my password</a>
            </p>
            <p class="mb-0">
                <a href="#" class="text-center">Register a new membership</a>
            </p>
        </div>
    </div>
@endsection

Maka tampilannya kurang lebih akan tampak seperti ini

membuat aplikasi pos laravel

Seeder User Admin

Sampai pada tahap ini, belum terdapat record di dalam table users, sehingga kita tidak dapat login ke dalam aplikasi. Maka yang akan dilakukan adalah membuat sebuah dummy records yang akan bertindak sebagai admin (baca: meskipun role dan permission belum di-set, karena akan dibahas khusus pada seri selanjutnya) untuk menambahkan user lainnya.

php artisan make:seeder UsersTableSeeder

Buka file database/seeds/UsersTableSeeder.php, kemudian modifikasi menjadi:

<?php
​
use Illuminate\Database\Seeder;
use App\User;
​
class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        User::create([
            'name' => 'Daengweb',
            'email' => '[email protected]',
            'password' => bcrypt('secret'),
            'status' => true
        ]);
    }
}

Penjelasan: Code diatas akan menambahkan sebuah record ke dalam table users dengan value yang tertera.

Kemudian buka file database/seeds/DatabaseSeeder.php, kemudian tambahkan code berikut didalam method run:

...
​
public function run()
{
    $this->call(UsersTableSeeder::class);
}
    
...

Fungsi diatas akan memanggil class dari UsersTableSeeder.php dan menjalankan code yang terdapat didalamnya. Untuk mengeksekusinya, gunakan command:

php artisan db:seed

Protect Page With Authentication

Tujuan akhir dari fitur otentikasi adalah untuk melindungi page yang tidak diinginkan untuk dapat diakses secara publik. Namun sebelum itu, sebagaimana yang kita lihat, apabila proses otentikasi berhasil maka akan di-direct ke home, dimana page ini masih menggunakan layout dari template bawaan Laravel. So, kita akan melakukan modifikasi agar menggunakan layout yang seragam dengan page yang telah dibuat sebelumnya. Buka file resources/views/home.blade.php, kemudian modifikasi menjadi:

@extends('layouts.master')
​
@section('title')
    <title>Dashboard</title>
@endsection
​
@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Dashboard</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item active">Dashboard</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
​
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-3 col-6">
                        <div class="small-box bg-info">
                            <div class="inner">
                                <h3>0</h3>
                                <p>Products</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
​
                    <div class="col-lg-3 col-6">
                        <div class="small-box bg-success">
                            <div class="inner">
                                <h3>0<sup style="font-size: 20px">%</sup></h3>
                                <p>Orders</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-stats-bars"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <div class="small-box bg-warning">
                            <div class="inner">
                                <h3>0</h3>
                                <p>Customers</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-person-add"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <div class="small-box bg-danger">
                            <div class="inner">
                                <h3>0</h3>
​
                                <p>Users</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

Note: Masih berupa view yang menggambarkan dashboard, sedangkan untuk logicnya akan dikerjakan pada chapter yang membahas khusus mengenai dashboard.

Kembali lagi topik pembahasannya sesuai dengan sub heading ini, apabila kita mengakses page /produk dan /kategori tanpa login, maka page tersebut tetap akan terbuka tanpa di-direct ke page login. Maka tugas kita adalah membuat page tersebut tidak bisa diakses sebelum login. Buka file routes/web.php, kemudian modifikasi menjadi:

Route::get('/', function() {
    return redirect(route('login'));
});
Auth::routes();
Route::group(['middleware' => 'auth'], function() {
    Route::resource('/kategori', 'CategoryController')->except([
        'create', 'show'
    ]);
    Route::resource('/produk', 'ProductController');
    Route::get('/home', '[email protected]')->name('home');
    
});

Penjelasan: Route dari ketiga page /home, /kategori, /produk kita apit kedalam route group, dimana route group ini menggunakan middleware auth untuk mengecek authentication user. Middleware ini telah disediakan oleh Laravel, kamu dapat mengeceknya di \Illuminate\Auth\Middleware\Authenticate::class.

Apabila kamu nantinya memiliki page baru yang ingin di-protect dengan authentication maka letakkan route-nya ke dalam group yang telah dibuat. Cara lainnya, kamu bisa memanggil middleware tersebut disetiap controller, dengan menambahkan method __construct().

public function __construct()
{
    $this->middleware('auth);
}

Logout User

Tidak lengkap rasanya, jika kita sudah berhasil masuk kedalam aplikasi namun tidak memiliki jalan untuk keluar / logout. Maka tugas kita selanjutnya adalah membuat fitur tersebut. Sebenarnya fungsi logout telah dibuat saat menjalankan command make:auth, maka yang perlu dilakukanya tinggal memanggil route dari fungsi tersebut.

Tombol logout akan kita tambahkan pada sidebar menu, maka buka file resources/views/layouts/module/sidebar.blade.php, kemudian tambahkan code berikut:

<li class="nav-item has-treeview">
    <a class="nav-link" href="{{ route('logout') }}"
        onclick="event.preventDefault();
        document.getElementById('logout-form').submit();">
        <i class="nav-icon fa fa-sign-out"></i>
        <p>
            {{ __('Logout') }}
        </p>
    </a>
​
    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
        @csrf
    </form>
</li>

Maka tampilannya akan tampak seperti ini

membuat aplikasi pos laravel logout

Kenapa menggunakan method POST? Apabila kita lihat menggunakan php artisan route:list, maka yang diminta adalah method POST

membuat aplikasi pos laravel

Baca Juga: Membuat Aplikasi Chatting React Native

Kesimpulan

Dengan menggunakan Laravel , sebenarnya kita tidak perlu memilikirkan untuk membuat fitur otentikasi, karena telah disediakan dan siap untuk digunakan. Namun, lain persoalan apabila kondisinya berbeda dari yang telah disediakan, maka pada penjelasan diatas kita juga telah belajar bagaimana membuat manual authentication. Next chapter, kita akan memasuki manajemen user atau role & permission. Tergantung analisa kita selanjutnya, mana yang lebih dulu akan dikerjakan.

Ohya, kamu dapat melihat dokumentasi code-nya di Github.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Membuat Fitur Bulk Import Data CSV Laravel 5.6 Laravel

Membuat Fitur Bulk Import Data CSV Larav...

Mengelola data dalam jumlah banyak dapat dipecahkan dengan bulk import dan dikerjakan dari sisi server, maka pada artikel ini akan membahasa bagiamana cara membuat fitur bulk import dari file csv untu...

(Part 9) Membuat Aplikasi POS (Point of Sales Laravel 5.6 - Chart Laravel

(Part 9) Membuat Aplikasi POS (Point of...

Hal lain yang patut kita perhitungkan untuk melengkapi fitur laporan adalah dengan membuat chart penjualan. Dalam seri membuat aplikasi POS (Point of Sales) Laravel 5.6 kali ini kita akan membuat char...

Tips Menggunakan Eloquent Laravel Laravel

Tips Menggunakan Eloquent Laravel

Eloquent adalah salah satu fitur yang menarik yang dimiliki oleh Laravel, dengannya kita dapat berinteraksi dan memanipulasi database sesuai yang diinginkan. Pada artikel ini akan membahas tips mengg...

Komentar