Pada pertemuan ini, kita akan membahas cara membuat tampilan CRUD sederhana dengan memanfaatkan template Bootstrap UI yang tersedia di Laravel.
Laravel adalah framework aplikasi web berbasis PHP yang dirancang untuk menyederhanakan proses pengembangan melalui sintaks yang rapi dan mudah dipahami. Salah satu keunggulan utama Laravel adalah kemampuannya dalam mengelola sistem autentikasi pengguna dengan efektif. Untuk mempercepat pembuatan antarmuka autentikasi, Laravel menyediakan paket Laravel UI yang memungkinkan pengembang menghasilkan komponen autentikasi secara otomatis. Dengan menjalankan perintah php artisan ui bootstrap --auth, developer dapat secara instan membuat tampilan login, registrasi, dan pengaturan ulang kata sandi yang sudah terintegrasi dengan CSS framework Bootstrap. Hal ini membantu mempercepat proses pengembangan sekaligus memastikan tampilan yang konsisten, responsif, dan memenuhi standar keamanan serta praktik terbaik dalam pengembangan aplikasi web masa kini.
LANGKAH-LANGKAH
Langkah pertama adalah melakukan instalasi proyek Laravel, seperti yang telah dibahas pada pertemuan sebelumnya. Karena instalasi sebelumnya menggunakan Laravel Installer, maka untuk membuat proyek baru, gunakan perintah berikut:
laravel new nama_project
Pastikan Anda berada di direktori tujuan sebelum menjalankan proses instalasi agar struktur folder proyek tertata dengan baik. Instalasi dianggap berhasil apabila hasilnya tampak seperti berikut:
Selanjutnya, buka direktori proyek menggunakan code editor pilihan Anda. Setelah itu, periksa file .env untuk memastikan konfigurasi database sudah sesuai. Jika menggunakan localhost, pengaturannya kurang lebih akan tampak seperti berikut:
Lalu, instal fitur authentication bawaan Laravel dengan command berikut:
composer require laravel/uiJika berhasil maka akan seperti berikut:
Setelah itu, kita akan menambahkan fitur Authentication ke dalam proyek dengan menjalankan perintah berikut:
php artisan ui bootstrap --auth
Jika proses instalasi berhasil, maka tampilan yang muncul akan terlihat seperti ini:
Selanjutnya, kita harus menginstal dependensi dan melakukan proses compile menggunakan Node.js dan npm. Jalankan perintah berikut:
npm install && npm run dev
Jika proses ini berhasil, hasilnya akan tampak seperti berikut:
Fungsi dari instalasi menggunakan Node.js dan npm adalah untuk memasang serta mengompilasi berkas-berkas aset bawaan. Dengan menjalankan perintah tersebut, file-file yang diperlukan untuk fitur autentikasi akan dibuat secara otomatis, seperti halaman login, registrasi, dan lupa kata sandi. Selain itu, controller autentikasi juga akan digenerate, seperti yang ditunjukkan pada gambar berikut:
Setelah semua komponen terpasang, langkah selanjutnya adalah melakukan migrasi database atau membuat database baru agar proyek dapat terhubung dengan MySQL. Jalankan perintah berikut:
php artisan migrate
Jika proses migrasi berhasil, hasilnya akan terlihat seperti berikut:
Setelah proses tersebut berhasil, langkah berikutnya adalah memeriksa halaman login dan registrasi. Contohnya, halaman login dapat diakses melalui alamat berikut:
http://127.0.0.1:8000/login.
Ini adalah tampilan halaman registrasi yang bisa diakses melalui alamat berikut:
http://127.0.0.1:8000/register.
Selanjutnya silahkan coba registrasi dan lakukan login ke aplikasi, jika berhasil maka akan tampil seperti gambar berikut.
Fitur autentikasi di Laravel secara otomatis membuat controller, model, view, dan route yang berkaitan dengan autentikasi. Selain itu, tampilan view sudah menggunakan framework Bootstrap, sehingga memudahkan dalam pembuatan fitur autentikasi pada aplikasi.
Laravel juga secara otomatis membuat tabel users yang menyimpan informasi data pengguna. Berikut adalah struktur dari tabel users tersebut.
Dari struktur tabel users yang ada, kita perlu menambahkan beberapa kolom baru yaitu username, level, dan status. Untuk itu, kita harus membuat migration baru dengan perintah berikut di terminal atau cmd:
php artisan make:migration costum_table_users
dan hasilnya akan seperti berikut
Setelah menjalankan perintah migrasi, buka folder database/migrations/ seperti pada gambar.
Buka file migration yang sudah dibuat sebelumnya, lalu tambahkan atribut baru yaitu username, level, dan status (dengan tipe enum berisi nilai “ACTIVE” dan “INACTIVE”) pada method up() seperti ini:
Schema::table('users', function (Blueprint $table) {
$table->string("username")->unique();
$table->string("level");
$table->enum("status", ["ACTIVE", "INACTIVE"]);
});
Selanjutnya, pada method down() tambahkan kode untuk menghapus kolom-kolom tersebut jika migrasi di-rollback:
Schema::table('users', function (Blueprint $table) {
$table->dropColumn("username");
$table->dropColumn("level");
$table->dropColumn("status");
});
Setelah kode tersebut sudah ditambahkan, jalankan perintah berikut di terminal:
nginxCopyEditphp artisan migrate
Jika berhasil, maka tabel users di database akan bertambah kolom username, level, dan status sesuai dengan yang ada digambar
Setelah menambahkan atribut baru di database, selanjutnya kita akan menambahkan data user menggunakan fitur seeder dari Laravel. Untuk membuat file seeder, jalankan perintah berikut di terminal:
php artisan make:seeder AdminSeeder
Jika perintah berhasil, maka file seeder baru akan dibuat di folder database/seeders dengan nama AdminSeeder.php. seperti berikut
Buka file AdminSeeder.php yang ada di folder database/seeders, lalu masukkan kode berikut ke dalam method run():
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");
}
Kode di atas membuat user baru dengan username admin, level sebagai admin, dan password yang sudah di-hash.
Setelah itu, jalankan perintah berikut di terminal untuk menjalankan seeder:
php artisan db:seed --class=AdminSeeder
Jika berhasil, maka akan muncul pesan konfirmasi bahwa user admin berhasil ditambahkan
Kalau kita coba login menggunakan akun yang baru saja di-seeding, maka login akan berhasil karena data usernya sudah masuk ke database.
Selanjutnya, kita akan mengatur tampilan dan layout aplikasi. Laravel Authentication secara otomatis sudah membuat tampilan dashboard bawaan. Tapi supaya tampilan lebih menarik dan sesuai kebutuhan, kita bisa menggantinya dengan template yang kita pilih.
Dalam studi kasus ini, kita akan menggunakan template SB Admin 2 yang berbasis Bootstrap. Untuk itu, kamu bisa download template tersebut di link ini:
https://startbootstrap.com/theme/sb-admin-2
Setelah download, ekstrak filenya. Kemudian buat folder baru di dalam folder public pada project Laravel kamu dengan nama sb_admin. Selanjutnya, copy semua file dan folder aset dari template SB Admin 2 ke folder public/sb_admin yang sudah dibuat tadi.
Dengan begitu, kamu sudah siap untuk mulai menghubungkan tampilan aplikasi Laravel kamu dengan template SB Admin 2 tersebut.
<!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>
<!-- Fonts -->
<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">
<link href="{{asset('sbadmin/css/sb-admin-2.min.css')}}" rel="stylesheet">
</head>
<body class="bg-gradient-primary">
<div class="container">
<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">
<div class="row">
<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 action="{{ route('login') }}" method="POST" class="user">
@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('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<button type="submit" class="btn btn btn-primary btn-user btn-block">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{asset('sbadmin/vendor/jquery/jquery.min.js')}}"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{{asset('sbadmin/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
<script src="{{asset('sbadmin/js/sb-admin-2.min.js')}}"></script>
</body>
</html>buka halaman login dan Halaman akan tampil seperti gambar ini
Selanjutnya, saya membuat layout utama yang akan digunakan sebagai kerangka dasar untuk seluruh halaman aplikasi selain halaman login. Karena file app.blade.php sudah dipakai untuk halaman login, maka dibuat file baru dengan nama main.blade.php di folder views/layouts. File ini berisi struktur HTML lengkap dengan pemanggilan file sidebar dan topbar menggunakan directive @include, sehingga kedua bagian tersebut bisa tampil di layout utama. Di dalam main.blade.php juga disiapkan tempat untuk konten halaman dan judul halaman yang nantinya akan diisi oleh view lain dengan menggunakan @yield.
<!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>
<!-- Fonts -->
<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">
<link href="{{ asset('sbadmin/css/sb-admin-2.min.css') }}" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
@include('layouts.sidebar')
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
@include('layouts.topbar')
<div class="container-fluid">
@yield('konten')
</div>
</div>
<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>
</div>
</div>
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<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 ingin keluar?</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">Batal</button>
<form action="{{ route('logout') }}" method="POST">
@csrf
<button class="btn btn-primary" style="cursor: pointer;">Logout</button>
</form>
</div>
</div>
</div>
</div>
<script src="{{ asset('sbadmin/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('sbadmin/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('sbadmin/vendor/jquery-easing/jquery.easing.min.js') }}"></script>
<script src="{{ asset('sbadmin/js/sb-admin-2.min.js') }}"></script>
</body>
</html>
Setelah itu, dibuat file sidebar.blade.php di folder layouts yang berisi menu navigasi sidebar dengan styling dari template SB Admin 2. Menu ini berisi link ke dashboard dan branding aplikas
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<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>
<hr class="sidebar-divider my-0">
<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>
<hr class="sidebar-divider d-none d-md-block">
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
Kemudian dibuat juga file topbar.blade.php yang berfungsi sebagai navbar atas, menampilkan nama user yang sedang login serta menu dropdown untuk profil, pengaturan, dan logout
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-block"></div>
<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
<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>
<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 memanfaatkan layout ini, dibuat sebuah view home.blade.php yang memanggil layout main dan mengisi bagian judul dan konten. Dengan pengaturan ini, setelah login dengan akun admin hasil seeding, halaman dashboard akan tampil dengan tampilan lengkap yang sudah menggunakan sidebar dan topbar sesuai template SB Admin 2.
@extends('layouts.main')
@section('judul')
Dashboard
@endsection
@section('konten')
<p>Dashboard</p>
@endsection
Intinya, langkah ini mengatur struktur tampilan aplikasi agar lebih modular dan mudah dikelola, memisahkan bagian-bagian penting seperti sidebar dan topbar ke file terpisah dan memanfaatkan layout sebagai kerangka utama untuk tampilan aplikasi.
KESIMPULAN
Laporan praktikum pemrograman web pada pertemuan ke-8 ini membahas penerapan operasi dasar pengelolaan data, yaitu CRUD (Create, Read, Update, Delete), dalam pembuatan aplikasi web yang modern dan responsif. Praktikum ini fokus pada bagaimana membangun antarmuka pengguna yang tidak hanya menarik secara visual, tetapi juga mudah digunakan dan mampu menjalankan fungsi-fungsi pengelolaan data dengan efisien.
Dalam prosesnya, kami menggunakan framework Laravel, sebuah framework PHP yang sangat populer di kalangan pengembang web. Laravel dipilih karena kemudahan penggunaannya, struktur yang terorganisir, serta berbagai fitur bawaan seperti routing, ORM (Eloquent), dan sistem templating Blade yang membantu mempercepat proses pengembangan aplikasi. Dengan Laravel, setiap operasi CRUD bisa diimplementasikan dengan lebih sederhana dan rapi tanpa harus menulis kode berulang-ulang.
Selain itu, praktikum ini juga menekankan pentingnya validasi data untuk memastikan input yang diterima dari pengguna sesuai dengan aturan yang telah ditentukan, sehingga aplikasi menjadi lebih aman dan stabil. Tidak ketinggalan, pengelolaan session dan autentikasi juga dibahas agar aplikasi dapat mengenali dan membatasi akses pengguna sesuai dengan peran atau level yang diberikan.
Secara keseluruhan, praktikum ini memberikan pengalaman langsung bagaimana membangun sebuah aplikasi web berbasis Laravel yang lengkap dengan fitur pengelolaan data, yang merupakan fondasi penting dalam pengembangan aplikasi web modern saat ini.