Tutorial Membuat Aplikasi CRUD Laravel + AdminLTE

Install Laravel - Untuk menginstall laravel pastikan composer & PHP sudah terinstall.

composer create-project laravel/laravel adminlte

Langkah selanjutnya adalah melakukan pengaturan database. Silahkan buat database

baru di MySQL (bisa menggunakan PHPMyAdmin atau SQL client lainnya) dengan
nama crud_laravel.

Kemudian ubah file .env yang ada di root project dan sesuaikan pengaturan database
menjadi seperti dibawah ini :

DB_CONNECTION=mysql

DB_HOST=localhost

DB_PORT=3306

DB_DATABASE=crud_laravel

DB_USERNAME=root

DB_PASSWORD=

Terakhir jalankan perintah php artisan migrate untuk melakukan migrasi database.
Sampai tahap ini proses instalasi laravel & database sudah selesai.

Untuk mencobanya silahkan jalankah perintah php artisan serve untuk menjalankan
laravel di localhost. Buka localhost/adminlte

Integrasi AdminLTE

Install laravel adminlte dengan menggunakan perintah :

composer require jeroennoten/laravel-adminlte

Selanjutnya jalankan juga perintah :

php artisan adminlte:install

Perintah diatas diperlukan untuk menginstall component-component yang ada di
package laravel adminlte.

Selanjutnya kita harus menginstall laravel UI, ini dibutuhkan karena package
menggunakan laravel UI untuk sistem authentikasinya. Jalankan perintah :

composer require laravel/ui

php artisan ui bootstrap --auth
php artisan adminlte:install --type=full
php artisan adminlte:plugins install
Jika muncul permintaan konfirmasi pada saat menjalankan perintah, silahkan ketik yes
saja. Silahkan Buka localhost/adminlte. Sudah ada menu login dan register.

Konfigurasi Halaman Admin

Langkah selanjutnya adalah melakukan konfigurasi dan pengaturan halaman admin.

Hal pertama yang akan kita lakukan adalah mengatur menu.

Konfigurasi Menu

Silahkan buka file config/adminlte.php kemudian cari blok :

'menu' => [
# ......
# kode lainnya
# ......
]

Kemudian ganti menjadi

'menu' => [
[
'text' => 'User',
'url' => '/users',
'icon' => 'fa fa-users',
],
],
Pada tahap ini kita menambahkan menu baru pada halaman admin yaitu menu User.

Konfigurasi plugins datatable

Selanjutnya adalah menginstall plugins datatable. Plugins ini nantinya digunakan

untuk menampilkan data user.
Silahkan cari blok ini (di file config/adminlte.php) :
'plugins' => [

# .... kode lainnya ....

'Datatables' => [
# .... kode lainnya ....
],
# .... kode lainnya ....
]
Kemudian Ganti Menjadi
'plugins' => [

# .... kode lainnya ....

'Datatables' => [
'active' => true,
'files' => [
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/datatables/js/jquery.dataTables.min.js',
],
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/datatables/js/dataTables.bootstrap4.min.js',
],
[
'type' => 'css',
'asset' => true,
'location' => '/vendor/datatables/css/dataTables.bootstrap4.min.css',
],
],
],
# .... kode lainnya ....
]

Konfigurasi plugins sweetalert2

Selanjutnya kita install plugins sweetalert2. Plugin ini digunakan untuk menampilkan
notifikasi.

Silahkan cari blok dibawah ini (masih di file config/adminlte.php) :

 'plugins' => [

# .... kode lainnya ....

'Sweetalert2' => [
# .... kode lainnya ....
],
# .... kode lainnya ....
]

kemudian ganti menjadi seperti dibawah ini :

'plugins' => [

# .... kode lainnya ....

'Sweetalert2' => [
'active' => true,
'files' => [
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/sweetalert2/sweetalert2.min.js',
],
[
'type' => 'css',
'asset' => true,
'location' => '/vendor/sweetalert2/sweetalert2.min.css',
],
],
],
# .... kode lainnya ....
]

Membuat CRUD Untuk Data User

Membuat Controller User

Jalankan perintah php artisan make:controller UserController --resource

Membuat Routing User

Tambahkan kode dibawah ini pada file routes/web.php

Route::resource('users', \App\Http\Controllers\UserController::class)
->middleware('auth');

Menampilkan User

Silahkan ubah file app/Http/Controllers/UserController.php, kemudian ganti method

index() dengan kode dibawah ini :

public function index()

{
$users = User::all();
return view('users.index', [
'users' => $users
]);
}

kode diatas untuk mengambil semua data user, kemudian mengirimnya ke view
users.index , pada laravel view users.index akan diarahkan ke file
resources/views/users/index.blade.php

masih pada file app/Http/Controllers/UserController.php silahkan tambahkan kode

dibawah ini dibawah nama namespace :
use App\Models\User;
use Illuminate\Http\Request;

Selanjutnya kita harus membuat view users.index. Buat file index.blade.php di direktori
resources/views/users/. (buat folder users di views terlebih dahulu) Isi dengan kode
dibawah ini :

@extends('adminlte::page')
@section('title', 'List User')
@section('content_header')
<h1 class="m-0 text-dark">List User</h1>
@stop
@section('content')
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<a href="{{route('users.create')}}" class="btn btn-primary mb-2">
Tambah
</a>
<table class="table table-hover table-bordered table-stripped"
id="example2">
<thead>
<tr>
<th>Nomor</th>
<th>Name</th>
<th>Email</th>
<th>Opsi</th>
</tr>
</thead>
<tbody>
@foreach($users as $key => $user)
<tr>
<td>{{$key+1}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td>
<a href="{{route('users.edit', $user)}}" class="btn btn-primary btn-
xs">
Edit
</a>
<a href="{{route('users.destroy', $user)}}"
onclick="notificationBeforeDelete(event, this)" class="btn btn-danger btn-xs">
Delete
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
@stop
@push('js')
 <form action="" id="delete-form" method="post">
@method('delete')
@csrf
</form>
<script>
$('#example2').DataTable({
"responsive": true,
});
function notificationBeforeDelete(event, el) {
event.preventDefault();
if (confirm('Apakah anda yakin akan menghapus data ? ')) {
$("#delete-form").attr('action', $(el).attr('href'));
$("#delete-form").submit();
}
}
</script>
@endpush

Menambah User

Selanjutnya adalah membuat fungsi untuk menambah user. Ubah method create() &
store () masih pada file app/Http/Controllers/UserController.php intinya tambahkan
koding berikut dibawah koding terakhir UserController :

public function create()

{
return view('users.create');
}
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'email' => 'required|email|unique:users,email',
'password' => 'required|confirmed'
]);
$array = $request->only([
'name', 'email', 'password'
]);
$array['password'] = bcrypt($array['password']);
$user = User::create($array);
return redirect()->route('users.index')
->with('success_message', 'Berhasil menambah user baru');
}
Method create() merupakan method untuk menampilkan form tambah. View yang
ditampilkan adalah view users.create (kita belum buat dan harus dibuat)

Method store() adalah method untuk menyimpan data yang diinput dari form. Oleh
karena itu, pada method store() ini kita melakukan validasi input dari form, kemudian
menyimpannya.

Selanjutnya view users.create ( file resources/views/users/create.blade.php) dan isi

dengan kode dibawah ini :

@extends('adminlte::page')
@section('title', 'Tambah User')
@section('content_header')
<h1 class="m-0 text-dark">Tambah User</h1>
@stop
@section('content')
<form action="{{route('users.store')}}" method="post">
@csrf
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="exampleInputName">Nama</label>
<input type="text" class="form-control @error('name') is-invalid
@enderror" id="exampleInputName" placeholder="Nama lengkap"
name="name" value="{{old('name')}}">
@error('name') <span class="text-danger">{{$message}}</span>
@enderror
</div>
<div class="form-group">
<label for="exampleInputEmail">Email address</label>
<input type="email" class="form-control @error('email') is-invalid
@enderror" id="exampleInputEmail" placeholder="Masukkan Email"
name="email" value="{{old('email')}}">
@error('email') <span class="text-danger">{{$message}}</span>
@enderror
</div>
<div class="form-group">
<label for="exampleInputPassword">Password</label>
<input type="password" class="form-control @error('password') is-
invalid @enderror" id="exampleInputPassword" placeholder="Password"
name="password">
 @error('password') <span
class="text-danger">{{$message}}</span> @enderror
</div>
<div class="form-group">
<label for="exampleInputPassword">Konfirmasi
Password</label>
<input type="password" class="form-control"
id="exampleInputPassword" placeholder="Konfirmasi Password"
name="password_confirmation">
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Simpan</button>
<a href="{{route('users.index')}}" class="btn btn-default">
Batal
</a>
</div>
</div>
</div>
</div>
@stop

Mengubah User

Masih pada file app/Http/Controllers/UserController.php tambahkan koding berikut

public function edit($id)

{
$user = User::find($id);
if (!$user) return redirect()->route('users.index')
->with('error_message', 'User dengan id'.$id.' tidak ditemukan');
return view('users.edit', [
'user' => $user
]);
}
 public function update(Request $request, $id)
{
$request->validate([
'name' => 'required',
'email' => 'required|email|unique:users,email,'.$id,
'password' => 'sometimes|nullable|confirmed'
]);
$user = User::find($id);
$user->name = $request->name;
$user->email = $request->email;
if ($request->password) $user->password = bcrypt($request->password);
$user->save();
return redirect()->route('users.index')
->with('success_message', 'Berhasil mengubah user');
}

Method edit() dan update() mirip dengan fungsi create() dan store(). Method edit untuk
menampilkan form edit, sedangkan method update untuk menyimpan hasil
perubahan.

Buat juga view users.edit (file resources/views/users/edit.blade.php) dengan isi dibawah ini :

@extends('adminlte::page')
@section('title', 'Edit User')
@section('content_header')
<h1 class="m-0 text-dark">Edit User</h1>
@stop
@section('content')
<form action="{{route('users.update', $user)}}" method="post">
@method('PUT')
@csrf
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="exampleInputName">Nama</label>
<input type="text" class="form-control @error('name') is-invalid
@enderror" id="exampleInputName" placeholder="Nama lengkap"
name="name" value="{{$user->name ?? old('name')}}">
@error('name') <span class="text-danger">{{$message}}</span>
@enderror
</div>
<div class="form-group">
 <label for="exampleInputEmail">Email address</label>
<input type="email" class="form-control @error('email') is-invalid
@enderror" id="exampleInputEmail" placeholder="Masukkan Email"
name="email" value="{{$user->email ?? old('email')}}">
@error('email') <span class="text-danger">{{$message}}</span>
@enderror
</div>
<div class="form-group">
<label for="exampleInputPassword">Password</label>
<input type="password" class="form-control @error('password')
is-invalid @enderror" id="exampleInputPassword" placeholder="Password"
name="password">
@error('password') <span
class="text-danger">{{$message}}</span> @enderror
</div>
<div class="form-group">
<label for="exampleInputPassword">Konfirmasi
Password</label>
<input type="password" class="form-control"
id="exampleInputPassword" placeholder="Konfirmasi Password"
name="password_confirmation">
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Simpan</button>
<a href="{{route('users.index')}}" class="btn btn-default">
Batal
</a>
</div>
</div>
</div>
</div>
@stop

Menghapus User

Bagian terakhir dari CRUD, yaitu menghapus user. Silahkan tambahkan koding masih
pada file app/Http/Controllers/UserController.php.

public function destroy(Request $request, $id)

{
$user = User::find($id);
if ($id == $request->user()->id) return redirect()->route('users.index')
 ->with('error_message', 'Anda tidak dapat menghapus diri sendiri.');
if ($user) $user->delete();
return redirect()->route('users.index')
->with('success_message', 'Berhasil menghapus user');
}