Tutorial Laravel — Login, Register, Session, dan Validasi

Hilman Maulana Anhar

Published in

Komunitas Android CCIT-FTUI

5 min readJan 14, 2020

Tutorial Login, Register, Session, dan Validasi dengan Laravel 6.x

Assalamu’alaikum wr. wb.

Halo, pada kali ini gua mau share tutorial cara membuat Login, Register, dan sekaligus Validasi dengan Laravel 6.x (yang digunakan dalam tutorial ini adalah versi 6.8).

Sebelum mulai, tutorial ini adalah lanjutan dari Tutorial Laravel — Templating dan Tutorial Laravel — CRUD, lalu database yang dipakai adalah dari Web Development Introduction — Belajar Dasar PHP. Jadi sebelum ikutin tutorial ini, pastikan kalian ikuti tutorial yang di sebutkan diatas ya.

Langsung saja kita mulai!

Pertama kita buat modelnya dulu.

php artisan make:model ModelUser --migration

Jika sudah silahkan edit model bernama Users.php yang baru saja dibuat di folder app jadi seperti ini.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class ModelUser extends Model
{
    //
    protected $table = 'users';
}

Setelah itu masuk ke folder database -> migrations -> create_model_users_table.php, lalu edit filenya jadi seperti dibawah.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateModelUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('email',100)->unique();
            $table->string('password');
            $table->string('name');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

note: terdapat kata unique() pada $table->string(‘email’,100)->unique(); artinya setiap email yang sudah ada atau sudah didaftarkan tidak boleh sama dengan email yang akan dimasukkan.

Lalu kita masukkan perintah dibawah.

php artisan migrate

Jika sudah, lalu kita membuat file baru bernama base2.blade.php didalam folder resources -> view -> templates yang akan digunakan sebagai base template pada halaman login dan register nanti dan masukkan kode dibawah.

<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>@yield('title')</title>
</head>
<body>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
         <a class="navbar-brand" href="{{url('/')}}">Laravel Practice</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
               <ul class="navbar-nav">
                  <li class="nav-item active">
                    <a class="nav-link" href="{{url('/')}}">Home</a>
                  </li>
               </ul>
            </div>
      </div>
   </nav>
   <br>
   @yield('container')
   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
   </script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Lalu kita membuat file baru didalam folder resources -> view bernama login.blade.php dan masukkan kode dibawah.

@extends('templates/base2')
@section('title','Login')
@section('container')
<div class="container">
    <div class="card">
        <article class="card-body">
            <a href="{{url('register')}}" class="float-right btn btn-outline-primary">Sign up</a>
            <h4 class="card-title mb-4 mt-1">Sign in</h4>
            @if(\Session::has('alert'))
                <div class="alert alert-danger">
                    <div>{{Session::get('alert')}}</div>
                </div>
            @endif
            @if(\Session::has('alert-success'))
                <div class="alert alert-success">
                    <div>{{Session::get('alert-success')}}</div>
                </div>
            @endif
            <form action="{{ url('/loginPost') }}" method="post">
                {{ csrf_field() }}
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="Password"></input>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block">Login</button>
                </div>
            </form>
        </article>
    </div>
</div>
@endsection

Setelah itu buat register.blade.php sebagai halaman register.

@extends('templates/base2')
@section('title','Register')
@section('container')
<div class="container">
    <div class="card">
        <article class="card-body">
            <a href="{{url('login')}}" class="float-right btn btn-outline-primary">Sign In</a>
            <h4 class="card-title mb-4 mt-1">Sign Up</h4>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <form action="{{ url('/registerPost') }}" method="post">
                {{ csrf_field() }}
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="confirmation">Password Confirmation</label>
                    <input type="password" class="form-control" id="confirmation" name="confirmation" placeholder="Password Confirmation">
                </div>
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text"  class="form-control" id="name" name="name" placeholder="Name">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-md btn-primary">Submit</button>
                </div>
            </form>
        </article>
    </div>
</div>
@endsection

Jika sudah, kita tambahkan sedikit kode pada index.blade.php (halaman utama) setelah pembuka tag <div class="col-5"> dan sebelum tag <p class=”text-muted”>Apa saja yang kamu pelajari:</p>

<p>Hai, {{Session::get('name')}}. Selamat Datang.</p>

note: kode diatas berfungsi untuk mengambil session pada saat login, kita bisa mengambil session email dan status login juga yang akan dimasukkan fungsi nya pada controller nanti.

Setelah itu jangan lupa tambahkan kode dibawah ini untuk menambah tombol logout di navigasi pada base.blade.php didalam folder resources -> view -> templates.

<li class="nav-item">
  <a class="nav-link" href="{{url('/logout')}}">Logout</a>
</li>

Sekarang kita buat controller untuk user.

php artisan make:controller UserController

Lalu kita masukkan semua fungsi dibawah kedalam UserController.php.

<?phpnamespace App\Http\Controllers;use App\ModelUser;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Session;class UserController extends Controller
{
    public function index(){
        if(!Session::get('login')){
            return redirect('login')->with('alert','Anda belum login, silahkan login terlebih dahulu');
        }
        else{
            return view('index');
        }
    }public function login(){
        return view('login');
    }public function loginPost(Request $request){$email = $request->email;
        $password = $request->password;$data = ModelUser::where('email',$email)->first();
        if($data){ //apakah email tersebut ada atau tidak
            if(Hash::check($password,$data->password)){
                Session::put('name',$data->name);
                Session::put('email',$data->email);
                Session::put('login',TRUE);
                return redirect('/');
            }
            else{
                return redirect('login')->with('alert','Email atau Password anda salah!');
            }
        }
        else{
            return redirect('login')->with('alert','Email atau Password anda salah!');
        }
    }public function logout(){
        Session::flush();
        return redirect('login')->with('alert','Anda telah logout');
    }public function register(Request $request){
        return view('register');
    }public function registerPost(Request $request){
        $this->validate($request, [
            'name' => 'required|min:4',
            'email' => 'required|min:4|email|unique:users',
            'password' => 'required',
            'confirmation' => 'required|same:password',
        ]);$data =  new ModelUser();
        $data->name = $request->name;
        $data->email = $request->email;
        $data->password = bcrypt($request->password);
        $data->save();
        return redirect('login')->with('alert-success','Anda berhasil register');
    }
}

Nah terakhir kita akan atur routesnya, tambahkan kode dibawah ini.

Route::get('/', 'UserController@index');
Route::get('/login', 'UserController@login');
Route::post('/loginPost', 'UserController@loginPost');
Route::get('/register', 'UserController@register');
Route::post('/registerPost', 'UserController@registerPost');
Route::get('/logout', 'UserController@logout');

Lalu hapus kode dibawah .

Route::get('/', function () {
   return view('index');
});

Jika sudah, silahkan dijalankan.

Jika email dan password salah, pada halaman login

Sekian tutorial yang bisa gua sampaikan pada kali ini, sampai jumpa ditutorial selanjutnya!!

Happy Codding ^_^

Tutorial Laravel — Login, Register, Session, dan Validasi

Written by Hilman Maulana Anhar