---

A. Buat Project Laravel Dengan Nama laravel-sisfo-A

B. Konfigurasi Database

Buka file .env kemudian isikan konfigurasi database berikut ini

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

Copy

C. User Authentication

• Install package laravel/ui

Ketikkan perintah composer require laravel/ui di terminal

• Authentication Fitur

Ketikkan perintah php artisan ui bootstrap --auth di terminal

• Install dan compile

Ketikkan perintah npm install && npm run dev di terminal untuk menginstall dan compile file-file asset bawaan. Dengan perintah tersebut maka file-file yang dibutuhkan untuk authentication akan di generate secara otomatis, seperti halaman login, register dan forgot password, selain itu juga akan di generate controller auth seperti gambar berikut.



Selain controller juga di-generate views untuk authentication seperti berikut



• Migration

Ketikkan perintah php artisan migrate maka Laravel akan membuat migration table authentication, jika sebelumnya belum terdapat database maka akana da konfirmasi dari larevel apakah akan dibuatkan databasenya atau tidak.

Jika instalasi berhasil, maka aplikasi sisfo sudah memiliki fitur authentication bawaan dari Laravel, berikut tampilan fitur authentication dari Laravel

• Halaman Login

Akses http://127.0.0.1:8000/login pada browser untuk menampilkan halaman login



• Halaman registrasi

Akses http://127.0.0.1:8000/register pada browser untuk menampilkan halaman login



Selanjutnya coba registrasi dan lakukan login ke aplikasi, jika berhasil maka akan tampil seperti gambar berikut



• Costum Table User

Authentication Laravel secara otomatis akan mengenerate table Users yang berisi tentang informasi data user, berikut struktur table users.



Dari stuktur table users diatas maka perlu ditambahken beberapa field yaitu username, level dan status, maka perlu membuat sebuah migration untuk menambahkan field-field diatas, ketikkan perintah php artisan make:migration costum_table_users pada terminal.

Kemudian isi file yang bernama diakhiri costum_table_users.php di database/migration dengan kode berikut

<?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     * 
     * @return void
     */
    public function up()
    {
        //
        Schema::table('users', function (Blueprint $table) {
            $table->string("username")->unique();
            $table->string("level");
            $table->enum("status", ["ACTIVE", "INACTIVE"]);
        });
    }

    /**
     * Reverse the migrations.
     * 
     * @return void
     */
    public function down()
    {
        //
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn("username");
            $table->dropColumn("level");
            $table->dropColumn("avatar");
            $table->dropColumn("status");
        });
    }
};

Copy

Kemudian jalankan perintah php artisan migrate, jika berhasil maka pada table users tadi akan bertambah kolom username, level, dan status.

• Seeding User

Setelah berhasil melakukan costum table users selanjutnya membuat user menggunakan fitur seeding pada Laravel, buat seeder dengan nama AdminSeeder dengan perintah php artisan make:seeder AdminSeeder. Maka secara otomatis file AdminSeeder.php akan dibuat pada folder database/Seeder. Kemudian buka file tersebut dan buat akun admin seperti kode program berikut.

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class AdminSeeder extends Seeder
{
    /**
     * Run the database seeds.
     * 
     * @return void
     */
    public function run()
    {
        //
        $admin = new \App\Models\User;
        $admin->username = "admin";
        $admin->name = "Admin Aplikasi";
        $admin->email = "admin@sisfo.com"; 
        $admin->level = json_encode(["ADMIN"]);
        $admin->password = \Hash::make("12345678"); 

        $admin->save(); 
        
        $this->command->info("User Admin berhasil ditambahkan");
    }
}

Copy

Selanjutnya untuk menjalankan seeding dengan cara menjalankan perintah berikut php artisan db:seed --class=AdminSeeder. Jika sudah berhasil menambahkan user maka dapat login ke aplikasi menggunakan akun tersebut.

D. Templating atau Layouting

Authentication Laravel secara otomatis mengenerate tampilan dashboard aplikasi, Langkah selannjutnya kita akan konfigurasi tampilan aplikasi sesuai dengan template yang kita pilih, ada studi kasus ini kita akan menggunakan template SB Admin 2 dengan framework bootstrap, silahkan downloah template pada link https://startbootstrap.com/theme/sb-admin-2 kemudian extrak, selanjutnya buat folder pada public project Laravel dengan nama sbadmin dan copy paste kan seluruh asset template sbadmin kedalam folder tersebut.

• Halaman Login Aplikasi

Buka file app.blade.php pada folder view/layouts kemudian ganti dengan kode program berikut

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
 
    <title>Sisfo - Login</title> 
 
    <!-- Custom fonts for this template--> 
    <link href="{{asset('sbadmin/vendor/fontawesomefree/css/all.min.css')}}" rel="stylesheet" type="text/css"> 
    <link 
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300, 300i,400,400i,600,600i,700,700i,800,800i,900,900i" 
        rel="stylesheet"> 
 
    <!-- Custom styles for this template--> 
    <link href="{{asset('sbadmin/css/sb-admin-2.min.css')}}" rel="stylesheet"> 
 
</head> 
 
<body class="bg-gradient-primary"> 
 
    <div class="container"> 
 
        <!-- Outer Row --> 
        <div class="row justify-content-center"> 
 
            <div class="col-xl-6 col-lg-6 col-md-9"> 
 
                <div class="card o-hidden border-0 shadow-lg my-5"> 
                    <div class="card-body p-0"> 
                        <!-- Nested Row within Card Body --> 
                        <div class="row"> 
                        <!-- <div class="col-lg-6 "></div> --> 
                            <div class="col-lg-12 text-center"> 
                                <div class="p-5"> 
                                    <div class="text-center"> 
                                        <h1 class="h4 text-gray-900 mb-4">Halaman Login</h1> 
                                    </div> 
                                    <form class="user" method="POST" action="{{ route('login') }}"> 
                                    @csrf 
                                        <div class="form-group"> 
                                            <input id="email" type="email" class="form-control form-control-user @error('email') is-invalid @enderror"  
                                            name="email" value="{{ old('email') }}" required autocomplete="email" autofocus/> 
                                             
                                            @error('email') 
                                                <span class="invalidfeedback" role="alert"> 
                                                    <strong>{{ $message }}</strong> 
                                                </span> 
                                            @enderror 
                                        </div> 
                                        <div class="form-group"> 
                                            <input id="password" type="password" class="form-control form-control-user @error('password') is-invalid @enderror"  
                                            name="password" value="{{ old('password') }}" required  /> 
                                             
                                            @error('password') 
                                                <span class="invalidfeedback" role="alert"> 
                                                    <strong>{{ $message }}</strong> 
                                                </span> 
                                            @enderror 
                                        </div> 
                                        
                                        <button type="submit" class="btn btn-primary btn-user btn-block"> 
                                            login 
                                        </button> 
                                    </form> 
 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
    <!-- Bootstrap core JavaScript--> 
    <script 
    src="{{asset('sbadmin/vendor/jquery/jquery.min.js')}}"></script> 
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> 
    <!-- Core plugin JavaScript--> 
    <script src="{{asset('sbadmin/vendor/jquery
    easing/jquery.easing.min.js')}}"></script> 
    <!-- Custom scripts for all pages--> 
    <script src="{{asset('sbadmin/js/sb-admin-2.min.js')}}"></script> 
    </body> 
</html> 

Copy

• Layout Global

Selanjutnya membuat layout global yang mana layout ini akan digunakan sebagai layout utama aplikasi dan view-view lain akan mengambil resource disini, karena app.blade.php sudah digunakan untuk view login, maka kita perlu membuat layout baru, silahkan buat file dengan nama main.blade.php pada folder view/layouts dan isikan dengan kode program berikut ini.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
        <meta name="description" content=""> 
        <meta name="author" content=""> 
    
        <title>Sisfo - @yield('judul')</title> 
    
        <!-- Custom fonts for this template--> 
        <link href="{{asset('sbadmin/vendor/fontawesomefree/css/all.min.css')}}" rel="stylesheet" type="text/css"> 
        <link 
            href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" 
            rel="stylesheet"> 
    
        <!-- Custom styles for this template--> 
        <link href="{{asset('sbadmin/css/sb-admin-2.min.css')}}" rel="stylesheet"> 
    
    </head> 
    <body id="page-top"> 
    
        <!-- Page Wrapper --> 
        <div id="wrapper"> 
    
            <!-- Sidebar --> 
            @include("layouts.sidebar") 
            <!-- End of Sidebar --> 
    
            <!-- Content Wrapper --> 
            <div id="content-wrapper" class="d-flex flex-column"> 
    
                <!-- Main Content --> 
                <div id="content"> 
    
                    <!-- Topbar --> 
                    @include('layouts.topbar') 
                    <!-- End of Topbar --> 
    
                    <!-- Begin Page Content --> 
                    <div class="container-fluid"> 
    
                        <!-- Page Heading --> 
                        <h1 class="h3 mb-4 text-gray-800">@yield("judul")</h1> 
                        @yield("konten") 
    
                    </div> 
                    <!-- /.container-fluid --> 
    
                </div> 
                <!-- End of Main Content --> 
    
                <!-- Footer --> 
                <footer class="sticky-footer bg-white"> 
                    <div class="container my-auto"> 
                        <div class="copyright text-center my-auto"> 
                            <span>Copyright &copy; Sisfo</span> 
                        </div> 
                    </div> 
                </footer> 
                <!-- End of Footer --> 
    
            </div> 
            <!-- End of Content Wrapper --> 
    
        </div> 
        <!-- End of Page Wrapper --> 
    
        <!-- Scroll to Top Button--> 
        <a class="scroll-to-top rounded" href="#page-top"> 
            <i class="fas fa-angle-up"></i> 
        </a> 
    
        <!-- Logout Modal--> 
        <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 
            aria-hidden="true"> 
            <div class="modal-dialog" role="document"> 
                <div class="modal-content"> 
                    <div class="modal-header"> 
                        <h5 class="modal-title" id="exampleModalLabel">Yakin akan keluar aplikasi ?</h5> 
                        <button class="close" type="button" datadismiss="modal" aria-label="Close"> 
                            <span aria-hidden="true">×</span> 
                        </button> 
                    </div> 
                    <div class="modal-body">Silahkan klik tombol logout untuk keluar aplikasi</div> 
                    <div class="modal-footer"> 
                        <button class="btn btn-secondary" type="button" datadismiss="modal">Cancel</button> 
                        <form action="{{route("logout")}}" method="POST"> 
                            @csrf 
                            <button class="btn btn-primary" style="cursor:pointer">Logout</button> 
                        </form> 
                    </div> 
                </div> 
            </div> 
        </div> 
    
        <!-- Bootstrap core JavaScript--> 
        <script src="{{asset('sbadmin/vendor/jquery/jquery.min.js')}}"></script> 
        <script src="{{asset('sbadmin/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script> 
    
        <!-- Core plugin JavaScript--> 
        <script src="{{asset('sbadmin/vendor/jqueryeasing/jquery.easing.min.js')}}"></script> 
    
        <!-- Custom scripts for all pages--> 
        <script src="{{asset('sbadmin/js/sb-admin-2.min.js')}}"></script> 
    
    </body> 
</html> 

Copy

Pada layouts main.blade.php diatas layout ini akan memanggil view sidebar.blade.php dan view topbar.blade.php kedalam layout main.blade.php dengan menggunakan perintah @include sehingga tampilan kedua view tersebut akan tampil pada layout main. Selanjutnya juga akan menampilkan data judul dan konten dari view yang akan menggunakan layouts main.blade.php dengan perintah @yeild(‘judul’) dan @yeild(‘konten).

• Sidebar

Buat file pada folder layouts dengan nama sidebar.blade.php dan isi dengan kode program berikut.

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"> 
 
    <!-- Sidebar - Brand --> 
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="#"> 
        <div class="sidebar-brand-icon rotate-n-15"> 
            <i class="fas fa-laugh-wink"></i> 
        </div> 
        <div class="sidebar-brand-text mx-3">Sisfo</div> 
    </a> 

    <!-- Divider --> 
    <hr class="sidebar-divider my-0"> 

    <!-- Nav Item - Dashboard --> 
    <li class="nav-item"> 
        <a class="nav-link" href="index.html"> 
            <i class="fas fa-fw fa-tachometer-alt"></i> 
            <span>Dashboard</span>
        </a> 
    </li> 

    
    <!-- Divider --> 
    <hr class="sidebar-divider d-none d-md-block"> 

    <!-- Sidebar Toggler (Sidebar) --> 
    <div class="text-center d-none d-md-inline"> 
        <button class="rounded-circle border-0" id="sidebarToggle"></button> 
    </div> 
</ul> 

Copy

• Topbar

Buat file pada folder layouts dengan nama topbar.blade.php dan isi dengan kode program berikut.

<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static
top shadow"> 
 
    <!-- Sidebar Toggle (Topbar) --> 
    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3"> 
        <i class="fa fa-bars"></i> 
    </button> 
    <!-- Topbar Navbar --> 
    <ul class="navbar-nav ml-auto"> 
        <div class="topbar-divider d-none d-sm-block"></div> 
        <!-- Nav Item - User Information --> 
        <li class="nav-item dropdown no-arrow"> 
            @if (\Auth::user()) 
                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" 
                    data-toggle="dropdown" aria-haspopup="true" ariaexpanded="false"> 
                    <span class="mr-2 d-none d-lg-inline text-gray-600 small">{{ Auth::user()->name }}</span> 
                    <img class="img-profile rounded-circle" 
                        src="{{ asset('sbadmin/img/undraw_profile.svg')}}"> 
                </a> 
            @endif 
             
            <!-- Dropdown - User Information --> 
            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" 
                aria-labelledby="userDropdown"> 
                <a class="dropdown-item" href="#"> 
                    <i class="fas fa-user fa-sm fa-fw mr-2 text-gray 400"></i> 
                    Profile 
                </a> 
                <a class="dropdown-item" href="#"> 
                    <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray 400"></i> 
                    Settings 
                </a> 
                <div class="dropdown-divider"></div> 
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal"> 
                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> 
                    Logout 
                </a> 
            </div> 
        </li> 
    </ul> 
</nav> 

Copy

• Cara penggunaan layouts main.blade.php

Sebagai contoh kita akan menggunakan view home.blade.php, buka file tersebut dan isikan dengan kode program berikut.

@extends('layouts.main')
@section("judul") Dasboard @endsection
@section('konten')
<P>dashboard</P>
@endsection

Copy

Untuk menggunakan layouts main menggunakan @extends(‘layouts.main’) sehingga seluruh tampilan main.blade.php akan ditampilkan pada view home, untuk menampilkan data judul pada layout main dengan perintah @section(‘judul’)Dashboard @endsection dan konten dengan cara @section(‘judul’)Dashboard @endsection

Jika konfigurasi layout berhasil maka akan tampil seperti gambar berikut.