Pada pertemuan kali ini, kita akan melanjutkan pekerjaan yang sudah dimulai pada pertemuan ke-8 sebelumnya. Fokus utama masih pada pengembangan aplikasi web menggunakan Laravel, khususnya dalam memperdalam pemahaman dan implementasi fitur CRUD serta pengelolaan data yang lebih kompleks. Selain itu, kita juga akan menambahkan beberapa komponen pendukung seperti tampilan antarmuka yang lebih rapi dan fungsional, serta memperbaiki flow autentikasi dan manajemen user agar aplikasi yang dibuat menjadi lebih lengkap dan siap digunakan
Selanjutnya, kita akan membuat fitur manajemen user dengan menggunakan seluruh fungsi CRUD. Untuk itu, kita akan membuat Controller Resource. Pertama, buka terminal yang ada di code editor, lalu ketik perintah berikut:
php artisan make:controller UserController --resource
Setelah itu, tambahkan kode berikut pada file route web (web.php):
use App\Http\Controllers\UserController;
Route::resource('users', UserController::class);
Untuk memastikan route sudah terdaftar dengan benar, kita bisa cek menggunakan perintah berikut di terminal:
php artisan route:list
Hasilnya akan menampilkan daftar route yang tersedia, termasuk route untuk resource users :
Selanjutnya, kita akan melakukan pengeditan pada file UserController yang bertipe Resource. Berikut adalah kode dasar yang digunakan:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UserController extends Controller
{
public function index()
{
//
}
public function create()
{
}
public function store(Request $request)
{
//
}
public function show($id)
{
//
}
public function edit($id)
{
//
}
public function update(Request $request, $id)
{
//
}
public function destroy($id)
{
//
}
}
Kemudian, pada fungsi create(), kita tambahkan kode berikut untuk menampilkan halaman form tambah data user dengan route users/create:
return view('user.create');
Kode return view('user.create') ini berfungsi untuk memanggil tampilan view create yang berada di dalam folder user. Selanjutnya, buat folder user di dalam folder views, kemudian buat file create.blade.php dan isi dengan kode berikut:
@extends('layouts.main')
@section('judul') Create User @endsection
@section('konten')
<p>Konten</p>
@endsection
Setelah itu, tambahkan file CSS dan JavaScript Select2 ke dalam layout main.blade.php dengan menambahkan kode berikut:
Pada bagian <head>:
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
Pada bagian bawah sebelum </body>:
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('.select2-multiple').select2({
placeholder: "Pilih",
allowClear: true
});
});
</script>
Selanjutnya, buat tampilan form sederhana untuk menambah user dengan kode berikut pada file create.blade.php:
@extends('layouts.main')
@section('judul') Create User @endsection
@section('konten')
<div class="card shadow mb-4">
<div class="card-header py-3"></div>
<div class="card-body">
<div class="row">
<div class="col-lg-9">
<form method="POST" action="{{ route('users.store') }}">
@csrf
<div class="form-group row">
<label class="col-sm-3 col-form-label text-center">Nama</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="nama" name="nama">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label text-center">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label text-center">Username</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="username" name="username">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label text-center">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="password" name="password">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label text-center">Level</label>
<div class="col-sm-4 mr-2">
<select class="form-control select2-multiple" name="level[]" multiple="multiple">
<option value="ADMIN">ADMIN</option>
<option value="GURU">GURU</option>
<option value="STAFF">STAFF</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-9 offset-sm-3">
<button type="reset" class="btn btn-warning btn-sm">Batal</button>
<button type="submit" class="btn btn-primary btn-sm">Simpan</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
Jika semua proses di atas dilakukan dengan benar, maka tampilan form tambah user akan muncul tampilan seperti ini :
Selanjutnya, tambahkan kode berikut pada fungsi store di UserController:
public function store(Request $request)
{
$user = new \App\Models\User;
$user->name = $request->get('nama');
$user->username = $request->get('username');
$user->email = $request->get('email');
$user->password = \Hash::make($request->get('password'));
$user->level = json_encode($request->get('level'));
$user->save();
return redirect()->route('users.index')->with('status', 'User baru berhasil ditambahkan');
}
Pada form create user, method yang digunakan adalah POST yang akan mengirimkan data ke action store dengan route users.store. Di dalam action store, data dari form tersebut diambil menggunakan $request->get('nama_input'), lalu disimpan ke dalam tabel users dengan membuat instance model User menggunakan $user = new \App\Models\User, kemudian data diassign ke atribut sesuai field pada tabel. Untuk menyimpan data ke database, digunakan $user->save(). Setelah data berhasil disimpan, pengguna akan diarahkan kembali ke route users.index dengan membawa session berisi pesan status.
Selanjutnya, untuk menampilkan data user, kita akan menggunakan method GET pada route http://localhost/users yang merupakan action index di UserController. Edit fungsi index seperti berikut:
public function index()
{
$user = \App\Models\User::all();
return view('user.index', ['user' => $user]);
}
Setelah itu, buat file view bernama index.blade.php di folder views/user dengan isi seperti berikut:
@extends('layouts.main')
@section('judul')
Users
@endsection
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
@section('konten')
<div class="card shadow mb-4">
<div class="card-header py-3">Create User</div>
<div class="card-body">
<div class="row">
<div class="table-responsive">
<p>
<a href="{{ route('users.create') }}" class="btn btn-primary btn-sm">Tambah User</a>
</p>
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($user as $users)
<tr>
<td>{{ $users->name }}</td>
<td>{{ $users->username }}</td>
<td>{{ $users->email }}</td>
<td>
[action]
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
@endsection
Karena menggunakan DataTables, tambahkan file CSS DataTables di bagian <head> layout main.blade.php dan file JavaScript DataTables di bagian bawah sebelum </body>, seperti berikut:
Pada bagian <head>:
<link href="{{ asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
Pada bagian bawah sebelum </body>:
<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>
Jika semua langkah sudah benar, maka tampilan daftar user akan muncul seperti yang diharapkan dengan fitur tabel interaktif dari DataTables seperti gambar :
Selanjutnya, untuk melakukan proses update data user, kita perlu membuat tombol aksi yang mengarahkan ke route users.edit dengan parameter ID user, atau action edit di UserController. Route ini berfungsi untuk menampilkan form edit data user. Selain itu, kita juga menggunakan route users.update dengan method PUT untuk proses penyimpanan perubahan data.
Pertama, buat tombol edit di tampilan daftar user. Buka file user/index.blade.php, lalu pada kolom aksi (bagian [action]) ganti dengan kode berikut:
<a href="{{ route('users.edit', $users->id) }}" class="btn btn-sm btn-success">Edit</a>
Kode tersebut akan mengambil data user berdasarkan ID yang ada pada variabel $users->id, lalu mengirimkan data tersebut ke view user.edit. Selanjutnya, buat file view bernama edit.blade.php di dalam folder user, dan isi dengan kode berikut:
@extends('layouts.main')
@section('judul')
Edit User
@endsection
@section('konten')
<div class="card shadow mb-4">
<div class="card-header py-3"></div>
<div class="card-body">
<div class="row">
<div class="col-lg-9">
<form method="POST" action="{{ route('users.update', [$user->id]) }}">
<input type="hidden" name="_method" value="PUT">
@csrf
<div class="form-group row">
<label class="col-sm-3 col-form-label text-center">Nama</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="nama" name="nama" value="{{ $user->name }}">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label text-center">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email" value="{{ $user->email }}">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label text-center">Username</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="username" name="username" value="{{ $user->username }}">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label text-center">Level</label>
<div class="col-sm-4 mr-2">
<select class="form-control select2-multiple" name="level[]" multiple="multiple">
<option value="ADMIN" {{ in_array("ADMIN", json_decode($user->level)) ? "selected" : "" }}>ADMIN</option>
<option value="GURU" {{ in_array("GURU", json_decode($user->level)) ? "selected" : "" }}>GURU</option>
<option value="STAFF" {{ in_array("STAFF", json_decode($user->level)) ? "selected" : "" }}>STAFF</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 text-center">
<a href="{{ route('users.index') }}" class="btn btn-warning btn-sm">Batal</a>
<button type="submit" class="btn btn-primary btn-sm">Simpan</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
Dengan kode tersebut, form edit user akan tampil sesuai dengan data user yang dipilih, seperti tampilan pada gambar berikut ini.
Selanjutnya, buka method update pada UserController lalu isi dengan kode berikut:
phpCopyEditpublic function update(Request $request, $id)
{
$user = \App\Models\User::findOrFail($id);
$user->name = $request->get('nama');
$user->level = json_encode($request->get('level'));
$user->save();
return redirect()->route('users.index', [$id])->with('status', 'User berhasil diubah');
}
Setelah itu, kita coba mengubah nama salah satu user yang sudah terdaftar, misalnya dari “Admin” menjadi “Ghazi”.
Selanjutnya, kita buat tombol delete di kolom aksi. Untuk itu, buka view user/index.blade.php dan tambahkan kode berikut tepat di bawah tombol edit:
<form onsubmit="return confirm('Hapus Data User?')" class="d-inline" action="{{ route('users.destroy', [$users->id]) }}" method="POST">
@csrf
<input type="hidden" name="_method" value="DELETE">
<input type="submit" value="Hapus" class="btn btn-danger btn-sm">
</form>
Lalu, buka method destroy di UserController dan isi dengan kode berikut:
public function destroy($id)
{
$user = \App\Models\User::findOrFail($id);
$user->delete();
return redirect()->route('users.index')->with('status', 'User berhasil dihapus');
}
Jika sudah benar, tombol hapus akan tampil seperti ini pada halaman daftar user seperti gambar :
ika kita klik tombol hapus, akan muncul pop up seperti berikut:
Jika kita klik OK, user akan terhapus
Terakhir, kita akan menambahkan menu Users di sidebar. Caranya, buka file layouts/sidebar.blade.php lalu tambahkan kode berikut:
<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>
Kalau sudah benar, maka menu Users akan muncul di sidebar seperti pada tampilan berikut.
KESIMPULAN
Pada praktikum ini, kami telah mempelajari dan mengimplementasikan fitur manajemen user dalam aplikasi berbasis Laravel dengan konsep CRUD (Create, Read, Update, Delete). Dimulai dari pembuatan controller resource untuk mengatur alur data user, pembuatan form input dan tampilan list user menggunakan blade template, serta penambahan fitur edit dan hapus data user.
Selain itu, dilakukan juga integrasi dengan plugin Select2 untuk mempermudah pemilihan data level user dan penggunaan DataTables agar tampilan tabel menjadi lebih interaktif dan mudah digunakan. Layout aplikasi juga dikembangkan dengan membuat template utama yang mengakomodasi sidebar, topbar, dan footer sehingga aplikasi menjadi lebih terstruktur dan user friendly.
Secara keseluruhan, praktikum ini memberikan pemahaman penting mengenai bagaimana mengelola data secara efektif pada aplikasi web menggunakan Laravel, termasuk bagaimana membuat tampilan yang rapi dan fungsional serta bagaimana menghubungkan frontend dengan backend secara baik melalui routing dan controller.