by – Muhammad Galid Avero
LARAVEL AUTH, CRUD Multi Level User
untuk menunjukkan kepada para pengguna tentang lebih banyak cara menginstal dan membuat proyek Laravel dengan Composer dan mengatur konfigurasi database dengan benar. Tujuan dari latihan praktikum adalah untuk mengajarkan pengguna bagaimana membuat sistem autentikasi, seperti masuk dan log in menggunakan Laravel UI. Mereka juga akan diajarkan untuk mengubah struktur tabel pengguna sesuai kebutuhan, menambahkan data admin dengan seeder, dan mengintegrasikan template Bootstrap untuk meningkatkan antarmuka menggunakan engine templating Blade di dalam Laravel.
Membuat proyek Laravel baru dapat dilakukan dengan beberapa cara, seperti menginstal installer Laravel secara globat atau menggunakan composer.
- Menggunakan Laravel global installer
- Pertama buat folder / workspace terlebih dahulu didalam folder yang diinginkan, disini saya membuat dengan nama laravel
- Selanjutnya buka terminal / cmder dan masuk kedalam workspace
- Setelah masuk kedalam workspace ketikkan perintah berikut untuk melakukan installasi.
composer global require "laravel/installer"- Setelah selesai instalasi, selanjutnya buat project laravel dengan mengetikkan perintah berikut:
laravel new laravel-sisfo 2. Menggunakan Composer
- Cara kedua yang dapat digunakan untuk membuat project Laravel adalah menggunakan composer, ketikkan perintah berikut pada workspace.
composer create-project laravel/laravel=^12.0 laravel-sisfo --prefer-dist
- untuk menjalankan project dapat menggunakan perintah seperti dibawah ini.
php artisan servebukalah file .env kemudian sesuaikan dengan gambar dibawah ini berikut ini.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-sisfo
DB_USERNAME=root
DB_PASSWORD=User authentication ini menggunakan fitur authentication bawaan Laravel dengan langkah langkahnya adalah :
- Install package Laravel/ui
Buka CMDER lalu ketikkan kode ini
composer require laravel/ui
Kemudian, instal fitur Authentication dengan menginstal menggunakan command berikut :
ketikkanlah “yes” agar program bisa dijalankan
- Install dan compile menggunakan node.js dan npm
npm install && npm run devapabila bisa maka akan menunjukkan seperti gambar berikut ini
Fungsi menginstall menggunakan node.js dan npm adalah untuk menginstall dan compile file asset bawaan. Dengan perintah di atas, file-file yang dibutuhkan untuk autentikasi, seperti halaman login, registrasi, dan lupa password, akan dibuat secara otomatis. Selain itu, controller autentikasi akan dibuat seperti gambar berikut:
Selain controller, juga degenerate view untuk authenctication seperti gambar berikut
Setelah semua bahan terinstal, kita perlu migrasi database/buat database baru sehingga project kita terhubung ke MySQL. Caranya dengan command berikut:
php artisan migrate
Setelah berhasil melakukan hal tersebut, selanjutnya mengecek halaman login dan register. Berikut cara mengakses laman login dengan menggunakan kode ini
php artisan serveberikut gambar untuk lamannya
langkah selanjutnya adalah mengakses laman register, dengan cara mengakses http://127.0.0.1:8000/register
apabila melakukan registrasi akan masuk ke laman home, akan terlihat seperti ini
Dengan fitur autentikasi Laravel, controller, model, tampilan, dan rute autentikasi akan dibuat secara otomatis. Selain itu, tampilan tampilan jugas sudah menggunakan framework boostrap, sehingga menjadi lebih mudah untuk membuat fitur autentikasi pada aplikasi.
Authentication Laravel secara otomatis akan mengenerate table Users yang berisi tentang informasi data user, berikut struktur table users.
Untuk menambahkan beberapa field, seperti username, level, dan status, Anda perlu membuat migration dengan mengetikkan perintah berikut pada terminal atau cmder :
php artisan make:migration costum_table_usersjika sudah memasukkan perintah tersebut, maka akan terlihat seperti gambar berikut ini
setelah selesai, lihat ke folder database/migration/ dan pastikan struktur nya seperti ini :
langkah selanjutnya adalah membuka file yang baru dibuat tadi, jika pada ss an di atas adalah file yg berawalan 2025_….., lalu ketikkanlah kode untuk membuat atribut baru yaitu Username, level, dan status sebagai enum (active, inactive). Masukkan ke method Up untuk kode berikut :
public function up()
{
Schema::table('users', function (Blueprint $table) { // Ini artinya mengubah struktur tabel users
$table->string("username")->unique(); //Menambahkan kolom baru bernama username bertipe string
$table->string("level"); //Menambahkan kolom baru bernama level dengan tipe teks (string).
$table->enum("status", ["ACTIVE", "INACTIVE"]); Menambahkan kolom baru bernama status dengan tipe enum, (hanya boleh berisi salah satu dari dua nilai (aktif dan inactive))
});
}
lalu dilanjutkan dengan membuat kode untuk method down
{
Schema::table('users', function (Blueprint $table) { //mengubah struktur tabel users.
$table->dropColumn("username"); // Menghapus kolom username dari tabel users.
$table->dropColumn("level"); // Menghapus kolom level dari tabel users.
$table->dropColumn("status"); // Menghapus kolom status dari tabel users.
});
}
Kode ini digunakan untuk menghapus kolom dari tabel users di database. Biasanya bagian ini diletakkan dalam method down() pada migration Laravel, yaitu ketika kita ingin membatalkan perubahan yang sudah dilakukan di method up().
setelah selesai maka, ketikannlah kode ini pada terminal code editornya
apabila sudah selesai dan berhasil, maka pada database akan berubah dengan sendirinya, yaitu menjadi seperti gambar ini :
Setelah menambahkan atribut di database, kita akan menambahkan user yang mana sekarang akan menjadi admin dengan menggunakan fitur seeder dari Laravel. Caranya dengan membuat file seeder dengan command berikut. Jangan lupa menjalankannya di terminal:
php artisan make:seeder AdminSeederapabila telah selesai akan terlihat seperti gambar di bawah
setelah dibuat maka langkah selanjutnya adalah pergi ke database/seeders kemudian pergi ke AdminSeeder.php. lalu ketikkanlah perintah berikut ini :
public function run()
{
$admin = new \App\Models\User; // Membuat objek user baru dari model User.
$admin->username = "admin"; // Mengisi kolom username dengan nilai "admin".
$admin->name = "Admin Aplikasi"; // Mengisi kolom name dengan "Admin Aplikasi".
$admin->email = "admin@sisfo.com"; // Mengisi kolom email dengan "admin@sisfo.com".
$admin->level = json_encode(["ADMIN"]); //Mengisi kolom level dengan nilai "ADMIN" dalam format JSON.
$admin->password = \Hash::make("12345678"); //Mengenkripsi password "12345678" menggunakan hash (bcrypt)
$admin->save(); // Menyimpan data user admin ke dalam database.
$this->command->info("User Admin berhasil ditambahkan"); // Menampilkan pesan di terminal bahwa user admin berhasil ditambahkan.
} 
Selanjutnya jalankan seeding dengan cara mengetikkan perintah berikut:
php artisan db:seed --class=AdminSeeder
apabila ini sudah selesai, maka bisa melakukan login menggunakan akun yang dibuat pada kodingan tersebut yaitu admin.
Setelah itu, kita akan melakukan layout dan templating. Verification Laravel secara otomatis membuat tampilan dashboard aplikasi. Langkah selanjutnya adalah mengkonfigurasi tampilan aplikasi sesuai dengan template yang kita pilih. Dalam kasus ini, kita akan menggunakan template SB Admin 2 dengan framework bootstrap. Anda dapat mengunduh template ini di sini: https://startbootstrap.com/theme/sb-admin-2, kemudian ekstrak, buat folder dengan nama sb_admin di public project Laravel, dan copy paste semua aset ke dalam folder tersebut.
selanjutnya adalah melakukan perubahan pada desain dikarenakan telah ditambahkannya folder sb admin 2 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('sb_admin/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('sb_admin/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" 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('sb_admin/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('sb_admin/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- Core plugin JavaScript-->
<script src="{{ asset('sb_admin/vendor/jquery-easing/jquery.easing.min.js') }}"></script>
<!-- Custom scripts for all pages-->
<script src="{{ asset('sb_admin/js/sb-admin-2.min.js') }}"></script>
</body>
</html>
apabila sudah dimasukkan, maka tampilan dari website laman loginnya akan terlihat seperti gambar ini :
Selanjutnya, kita akan membuat layout global. Layout ini akan digunakan sebagai layout utama aplikasi dan resource untuk view-view lainnya akan diambil disini. Karena app.blade.php sudah digunakan untuk login view, kita harus membuat file dengan nama main.blade.php di folder view/layouts dan kemudian mengisinya 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('sb_admin/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>
<!-- 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>
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).
Kemudian kita akan membuat menu sidebar di folder layout. Beri nama file sidebar.blade.php. 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>langkah selanjutnya adalah membuat topbar pada website. Caranya dengan membuat file topbar.blade.php di folder layout. 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>
@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>
Untuk menggunakan semua tampilan di atas, kita dapat memanggilnya dengan cara menggunakan view home.blade.php dan mengisi dengan kode program berikut:
@extends("layouts.main")
@section("judul") Dashboard @endsection
@section("konten")
<p>Dashboard</p>
@endsectionuntuk hasil akhir dari praktikum kali ini adalah sebagai berikut :
© 2025 Muhammad Galid Avero. All rights reserved.