Tutorial Laravel #18 : Membuat Login dan Register pada Laravel

Pada tutorial ini kita akan membahas cara Membuat Login dan Register User pada Laravel.

Membuat Login Laravel

1. Kita membuat projectnya terlebih dahulu, disini kita akan membuat project dengan nama latihan_laravel. Buat Project baru dengan perintah berikut :

   composer create-project --prefer-dist laravel/laravel latihan_laravel

2. Jalankan project pada browser dengan alamat localhost:8000. Muncul halaman default Laravel seperti di bawah ini :
3. Setelah membuat project baru, siapkan databasenya terlebih dahulu. Pada tutorial ini menggunakan nama database datasekolah
4. Kemudian lakukan Konfigurasi Database pada file .env seperti berikut :

   DB_CONNECTION=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=datasekolah
   DB_USERNAME=root
   DB_PASSWORD=

5. 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. Untuk menggunakan Fitur Migration Laravel kita gunakan perintah berikut :

   php artisan migrate

   Coba buka database datasekolah, sekarang table-table sudah terbentuk, struktur dari tabel Users sebagai brikut : Pengaturan Tambahan (Optional) :
   Pada aplikasi project ini akan ada beberapa level user atau hak akses user yang akan kita gunakan. Hak akses user bisa juga kita sebut sebagai role user. Maka kita tambahkan satu field pada tabel users dengan nama role, sehingga tabel users akan menjadi seperti berikut :

   

   Catatan Penting:
   Migration tabel Users Laravel tidak menyediakan data record di dalamnya, sehingga kita perlu melakukan generate data Users dengan cara seeding. Berikut contoh untuk membuat seeding dengan nama UserSeeder, pada cmd/terminal ketik dengan perintah :

   php artisan make:seeder UserSeeder

   Jika sudah dibuat, tambahkan sintak pada UserSeeder.php tersebut yang terletak pada folder database/seeders seperti berikut :

   <?php
   
   namespace Database\Seeders;
   
   use Illuminate\Support\Facades\Hash;
   use App\Models\User;
   use Illuminate\Database\Console\Seeds\WithoutModelEvents;
   use Illuminate\Database\Seeder;
   
   class UserSeeder extends Seeder
   {
       /**
        * Run the database seeds.
        *
        * @return void
        */
       public function run()
       {
           User::create([
               'name'=>'Admin',
               'email'=>'admin@gmail.com',
               'password'=>Hash::make('admin123'),
           ]);
       }
   }

   Perhatikan sintak di atas, karena kita akan melakukan seeder kita diharuskan memanggil dulu use Illuminate\Database\Seeder;. Karena kita menggunakan model User, kita juga diharuskan memanggil modelnya dengan use App\Models\User;. Untuk insert datanya pada method/fungsi run() kita akan memasukan data berupa password, untuk password kita harus menggunakan Hash, maka kita harus panggil dulu Hash dengan sintak use Illuminate\Support\Facades\Hash;, materi tentang hash silahkan baca di tutorial Hashing Pada Laravel. Perhatikan pada method run() :

   public function run()
   {
       User::create([
           'name'=>'Admin',
           'email'=>'admin@gmail.com',
           'password'=>Hash::make('admin123'),
       ]);
   }

   Artinya kita akan memasukan string Admin ke dalam field name pada table users di database. Kita juga akan memasukan string admin@gmail.com ke dalam field email pada table users di database. Dan kita juga akan memasukan string admin123 ke dalam field password pada table users di database, tetapi password tersebut di enkripsi menggunakan hash. Sekarang kita jalankan seedernya dengan perintah :

   php artisan db:seed --class=UserSeeder

   Hasilnya pada table users akan terisi seperti berikut :

6. Selanjutnya kita akan membuat route, buka file web.php yang ada di dalam direktori routes. Tambahkan route seperti berikut ini :

   <?php
   
   use Illuminate\Support\Facades\Route;
   
   Route::get('/', 'LoginController@login')->name('login');
   Route::post('loginaksi', 'LoginController@loginaksi')->name('loginaksi');
   Route::get('home', 'HomeController@index')->name('home')->middleware('auth');
   Route::get('logoutaksi', 'LoginController@logoutaksi')->name('logoutaksi')->middleware('auth');

   Perhatikan kode di atas, pada bagian kode program di atas :

   Route::get('/', 'LoginController@login')->name('login');

   berfungsi untuk memanggil controller dengan nama LoginController.php dan menjalankan method login, dimana method login tersebut akan memanggil view untuk menampilkan form login.

   Pada bagian kode program :

   Route::post('loginaksi', 'LoginController@loginaksi')->name('loginaksi');

   berfungsi untuk mengirim data login berupa username dan password ketika pada form login tombol login diklik.

   Pada bagian kode program :

   Route::get('home', 'HomeController@home')->name('home')->middleware('auth');

   bertujuan untuk memanggil controller dengan nama HomeController.php dan menjalankan method home, dimana method home tersebut akan memanggil view 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('logoutaksi', 'LoginController@logoutaksi')->name('logoutaksi')->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.

7. Selanjutnya kita membutuhkan dua buah controller yaitu LoginController dan HomeController. Sekarang buat LoginController 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;
   
   class LoginController extends Controller
   {
       public function login()
       {
           if (Auth::check()) 
           {
               return redirect('home');
           }
           else
           {
               return view('login');
           }
       }
   
       public function loginaksi(Request $request)
       {
           $data = [
               'email' => $request->input('email'),
               'password' => $request->input('password'),
           ];
   
           if (Auth::Attempt($data)) 
           {
               return redirect('home');
           }
           else
           {
               Session::flash('error', 'Email atau Password Salah');
               return redirect('/');
           }
       }
   
       public function logoutaksi()
       {
           Auth::logout();
           return redirect('/');
       }
   }

   Perhatikan kode di atas, pada bagian kode program

   use Illuminate\Support\Facades\Auth;

   merupakan Library Laravel yang dapat menghandle Authentication.

   Pada bagian kode program use Session; bertujuan untuk mengirim pesan session error ke halaman form login.blade.php ketika terjadi kesalahan saat login. Kemudian cara penulisan pesannya seperti pada bagian kode ini Session::flash(‘error’, ‘Email atau Password Salah’);

   Pada bagian kode program Auth::check() digunakan untuk memeriksa apakah user sudah login atau belum. Jika sudah, maka user akan kita arahkan ke halaman utama yaitu halaman home.

   Pada bagian kode program Auth::Attempt($data) berfungsi untuk melakukan proses pengecekan validasi login langsung ke table users dan memberikan fasilitasi session jika berhasil login.

   Pada bagian kode program function logoutaksi() berfungsi untuk menghapus session yang aktif ketika di klik tombol logout dengan perintah Auth::logout();, kemudian setelah logout arahkan kembali halaman ke form login dengan perintah return redirect(‘/’);.

   Perlu dicatat saat kita membuat Auth secara manual adalah baris kode ini Auth::attempt($data);

8. Kemudian buat Home Controller dengan perintah berikut :

   php artisan make:controller HomeController

   Isi dari HomeController.php adalah sebagai berikut :

   <?php
   
   namespace App\Http\Controllers;
   
   use Illuminate\Http\Request;
   
   class HomeController extends Controller
   {
       public function index()
       {      
           return view('home');
       }
   }

   Perhatikan kode di atas, fungsi/method index akan me-return ke view yang bernama home.blade.php.

9. 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>Tutorial Login Laravel</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">Tutorial Login Laravel</h2>
                   <hr>
                   @if (session('error'))
                       <div class="alert alert-danger">
                           <b>Opps!</b> {{ session('error') }}
                       </div>
                   @endif
   
                   <form action="{{ route('loginaksi') }}" 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(‘loginaksi’) }}” method=”post” kita mengatur actionnya ke loginaksi dengan method post sesuai route yang ada di file web.php. Berikut ini adalah tampilan halaman login :

10. 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>Tutorial Login Laravel</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') }}">Home</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('logoutaksi') }}">
                                                    <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>
        </body>
    
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        
    </html>

    Isi dari file view home.blade.php seperti di bawah ini :

    @extends('master')
    
    @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.blade.php 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 digenerate 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 :

Sampai disini Login pada laravel sudah berhasil kita buat. Setelah belajar Membuat Login Laravel, selanjutnya kita akan belajar Membuat Register User pada Laravel. Tutorial dibuat ke dalam artikel yang berbeda agar pada bagian ini tidak terlalu panjang. Tutorial bisa dilihat pada link berikut Membuat Register Laravel