Authentication Laravel

Salah satu fitur laravel adalah Authorization, fitur ini membantu kita untuk membuat fungsi authentication seperti register dan login menjadi lebih mudah. Langsung saja kita buat dengan membuat terminal dan ketikkan perintah berikut.

php artisan make:auth

Tekan enter, dan kalau ada konfirmasi tekan huruf "y".

Setelah proses selesai, maka di dalam folder controller akan ada 1 buah folder baru dengan nama Auth yang berisi beberapa file.

Sekarang kita coba dulu akses halaman http://localhost:8000/login maka akan tampil halaman seperti berikut.

Ketika kita klik menu Register maka akan tampil form register.

Tampilan login dan register nanti akan kita edit agar sesuai dengan template yang telah kita buat sebelumnya. Untuk saat ini kita edit aja dulu menu biar bisa nyambung ke halaman login.

# Edit menu

Buka file layouts/menu.blade.php kemudian edit bagian Login menjadi seperti berikut.

Yang tadinya

<li class="nav-item">
      <a class="nav-link" href="#">Login</a>
</li>

Menjadi

<li class="nav-item">
      <a class="nav-link" href="{{ URL::to('login') }}">Login</a>
</li>

Sekarang kita akan mengubah tampilan login menjadi sesuai dengan template yang telah kita buat.

# Edit LoginController.php

Buka file Auth/LoginController.php dan pada bagian bawah function construct kita tambahkan 1 buah function baru.

Sehingga lengkapnya akan menjadi seperti ini.

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    public function showLoginForm()
    {
        $data = array('title' => 'Login');
        return view('auth.login', $data);
    }
}

Setelah controller selesai kita edit, selanjutnya kita ubah viewsnya.

# Edit login.blade.php

Pada folder views juga ada folder baru dengan nama auth. Buka file dengan nama login.blade.php di folder auth tadi dan ubah menjadi seperti berikut.

@extends('layouts.template')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">{{ __('Login') }}</div>

                <div class="card-body">
                    @if(count($errors) > 0)
                    @foreach($errors->all() as $error)
                        <div class="alert alert-warning">{{ $error }}</div>
                    @endforeach
                    @endif
                    @if ($message = Session::get('error'))
                        <div class="alert alert-warning">
                            <p>{{ $message }}</p>
                        </div>
                    @endif
                    @if ($message = Session::get('success'))
                        <div class="alert alert-success">
                            <p>{{ $message }}</p>
                        </div>
                    @endif
                    <form method="POST" action="{{ route('login') }}">
                        @csrf
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="text" name="email" id="email" required class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" name="password" id="password" required class="form-control">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary mb-4">Login</button>
                            <p>Don't have an account? <a href="{{ route('register') }}" class="text-decoration-none">Sign up</a></p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Kalau sudah coba akses lagi menu login. Maka tampilannya akan berubah menjadi seperti ini.

# Edit RegisterController.php

Kembali lagi ke folder Auth di dalam folder controller, buka file RegisterController.php, kemudian di bagian bawah function create(array $data) tambahkan 1 buah function baru. Sehingga keseluruhan kodenya menjadi seperti berikut.

<?php

namespace App\Http\Controllers\Auth;

use App\User;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Illuminate\Foundation\Auth\RegistersUsers;

class RegisterController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Register Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles the registration of new users as well as their
    | validation and creation. By default this controller uses a trait to
    | provide this functionality without requiring any additional code.
    |
    */

    use RegistersUsers;

    /**
     * Where to redirect users after registration.
     *
     * @var string
     */
    protected $redirectTo = '/home';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest');
    }

    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }

    public function showRegistrationForm()
    {
        $data = array('title'=> 'Register');
        return view('auth.register', $data);
    }
}

Controller registernya udah kita ubah, selanjutnya ubah juga file views registernya.

# Edit register.blade.php

Selanjutnya kita akan mengubah tampilan dari halaman register. Masih di folder auth yang di views, buka file register.blade.php dan ubah menjadi seperti ini.

@extends('layouts.template')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">{{ __('Register') }}</div>

                <div class="card-body">
                    @if(count($errors) > 0)
                    @foreach($errors->all() as $error)
                        <div class="alert alert-warning">{{ $error }}</div>
                    @endforeach
                    @endif
                    @if ($message = Session::get('error'))
                        <div class="alert alert-warning">
                            <p>{{ $message }}</p>
                        </div>
                    @endif
                    @if ($message = Session::get('success'))
                        <div class="alert alert-success">
                            <p>{{ $message }}</p>
                        </div>
                    @endif
                    <form method="POST" action="{{ route('register') }}">
                        <div class="row">
                            <div class="col">
                                @csrf
                                <div class="form-group">
                                    <label for="name">Nama</label>
                                    <input type="text" name="name" id="name" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="text" name="email" id="email" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="password">Password</label>
                                    <input type="password" name="password" id="password" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="password_confirmation">Confirm Password</label>
                                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control">
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary mb-4">Register</button>
                                    <p>Sudah punya akun? Login <a href="{{ route('login') }}" class="text-decoration-none">disini</a></p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Sampai sini, selesai desain untuk tampilan toko online kita. Pada tutorial selanjutnya kita akan membuat databasenya.

Mau Bikin Aplikasi Web & Aplikasi Android?

Saya membuka jasa pembuatan aplikasi web dan android untuk aplikasi seperti toko online, monitoring (IoT), interface mesin absensi atau kasir

Silahkan kontak link di bawah ini untuk teknis dan harganya