Pertama buat folder / workspace terlebih dahulu didalam folder htdocs, kita sepakati dengan nama Laravel
Selanjutnya buka terminal / command prompt / cmder dan masuk kedalam workspace (C:\xampp\htdocs\laravel)
composer global require "laravel/installer"Setalah masuk kedalam workspace ketikkan perintah berikut untuk melakukan installasi.
Setelah instalasi selesai, selanjutnya buat project laravel dengan cara mengetikkan perintah berikut.
laravel new laravel-sisfo
Cara kedua yang dapat digunakan untuk membuat project baru Laravel yaitu menggunakan comoposer, ketikkan perintah berikut pada workspace.
composer create-project laravel/laravel=^12.0 laravel-sisfo --prefer-distPenyusunan file dapat dilihat melalui .env yang telah diatur oleh Laravel
Terdapat hal yang perlu diperhatikan, ubah nama database menjadi laravel_sisinfo.
APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost
APP_LOCALE=en
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US
APP_MAINTENANCE_DRIVER=file
# APP_MAINTENANCE_STORE=database
PHP_CLI_SERVER_WORKERS=4
BCRYPT_ROUNDS=12
LOG_CHANNEL=stack
LOG_STACK=single
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_sisfo
DB_USERNAME=root
DB_PASSWORD=
SESSION_DRIVER=database
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null
BROADCAST_CONNECTION=log
FILESYSTEM_DISK=local
QUEUE_CONNECTION=database
CACHE_STORE=database
# CACHE_PREFIX=
MEMCACHED_HOST=127.0.0.1
REDIS_CLIENT=phpredis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
MAIL_MAILER=log
MAIL_SCHEME=null
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false
VITE_APP_NAME="${APP_NAME}"
Pertama-tama, pasang Laravel UI dengan perintah
composer require laravel/uiSetelah itu, buat template bootstrap dengan perintah
php artisan ui bootstrap --auth
Urus permasalahan dependencies dengan npm menggunakan perintah
npm install && npm run devKetikkan perintah
Jika instalasi berhasil maka aplikasi sisfo sudah memiliki fitur authentication bawaan dari Laravel, berikut tampilan fitur authentication dari Laravel. Akses url http://127.0.0.1:8000/login pada browser maka akan tampil halaman login seperi berikut.
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 berikut pada terminal atau cmd.
php artisan make:migration costum_table_usersAkan dibuat file custom_table_users.php di direktori Migration. Buatlah tabel level dan status.
<?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");
});
}
};
Jalankan
php artisan migrateSetelah berhasil melakukan costum table users selanjutnya membuat user menggunakan fitur seeding pada Laravel, buat seeder dengan nama AdminSeeder dengan perintah:
php artisan make:seeder AdminSeederSetelah seeder berhasil dibuat, buka file database/seeders/AdminSeeder.php dan tambahkan kode
berikut untuk membuat user admin:
<?php
namespace Database\Seeders;
use Illuminate\Support\Facades\Hash;
use Illuminate\Database\Seeder;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
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");
}
}
Jalankan perintah di bawah untuk melakukan seeding
php artisan db:seed --class=AdminSeederAuthentication 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 tombol di bawah dan ekstrak isinya.
Download ProgramSetelah diekstrak, buat folder pada public project Laravel dengan nama sbadmin dan copy paste kan seluruh asset template sbadmin kedalam folder tersebut.
Buka file app.blade.php pada folder view/layouts kemudian ganti dengan kode program dibawah 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 - Login</title>
<!-- Custom fonts for this template-->
<link href="{{ asset('sbadmin/vendor/fontawesome-
free/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="invalid-
feedback" 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="invalid-
feedback" 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>
Tampilan login akan berubah menjadi:
Screenshot 2025-05-28 225849.png
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>
<link href="{{ asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
<!-- Custom fonts for this template-->
<link
href="{{ asset('sbadmin/vendor/fontawesome-
free/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 © 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" data- dismiss="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" data- dismiss="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 src = "{{ asset('sbadmin/vendor/jquery-easing/jquery.easing.min.js') }}" >
</script>
<script>
$(document).ready(function() {
$('.select2-multiple').select2({
placeholder: "Pilih",
allowClear: true
});
});
</script>
<!-- Custom scripts for all pages-->
<script src="{{ asset('sbadmin/js/sb-admin-2.min.js') }}"></script>
<script src="{{ asset('sbadmin/vendor/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('sbadmin/js/demo/datatables-demo.js ') }}"></script>
</body>
</html>
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) -->
<li class="nav-item">
<a class="nav-link" href="{{ route('users.index') }}">
<i class="fas fa-fw fa-users"></i>
<span>Users</span></a>
</li>
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
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" aria- expanded="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>
@else
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@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>
Sebagai contoh kita akan menggunakan view home.blade.php, buka file tersebut dan isikan dengan kode program berikut. 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
@extends('layouts.main')
@section('judul')
Dasboard
@endsection
@section('konten')
<P>dashboard</P>
@endsection
Laravel merupakan sebuah framework yang berbasis bahasa pemrograman php. Laravel digunakan untuk mempermudah penyusunan dan skalabilitas dari perangkat lunak yang dibuat dengan fitur yang beragam. Salah satu fiturnya yaitu fitur autentikasi yang disediakan secara built in melalui beberapa perintah.