Membuat Controller User

 Langkah 1 - Membuat Controller User

 Langkah 2 - Membuat Route Users

Sekarang kita akan lanjutkan membuat proses CRUD data users, dan untuk materi
kali ini kita akan belajar membuat controller beserta route-nya terlebih dahulu.

Langkah 1 - Membuat Controller User

Silahkan jalankan perintah berikut ini di dalam terminal/CMD untuk

membuat controller baru :
php artisan make:controller Apps/UserController

Perintah di atas akan membuat controller baru dengan nama UserController.php di

dalam folder app/Http/Controllers/Apps. Sekarang kita akan ubah seluruh kode-
nya agar bisa digunakan untuk melakukan operasi CRUD. Silahkan
buka file app/Http/Controllers/Apps/UserController.php dan ubah semua kode-
nya menjadi seperti berikut ini :
<?php

namespace App\Http\Controllers\Apps;

use App\Models\User;
use Inertia\Inertia;
use Illuminate\Http\Request;
use Spatie\Permission\Models\Role;
use App\Http\Controllers\Controller;

class UserController extends Controller

{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//get users
$users = User::when(request()->q, function($users) {
$users = $users->where('name', 'like', '%'. request()->q .
'%');
})->with('roles')->latest()->paginate(5);

//return inertia
return Inertia::render('Apps/Users/Index', [
'users' => $users
]);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//get roles
$roles = Role::all();

//return inertia
return Inertia::render('Apps/Users/Create', [
'roles' => $roles
]);
}

/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
/**
* Validate request
*/
$request->validate( [
'name' => 'required',
'email' => 'required|unique:users',
'password' => 'required|confirmed'
]);

/**
* Create user
*/
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => bcrypt($request->password)
]);

//assign roles to user

$user->assignRole($request->roles);

//redirect
return redirect()->route('apps.users.index');
}

/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//get user
$user = User::with('roles')->findOrFail($id);

//get roles
 $roles = Role::all();

//return inertia
return Inertia::render('Apps/Users/Edit', [
'user' => $user,
'roles' => $roles
]);
}

/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, User $user)
{
// dd($user->id);
/**
* validate request
*/
$request->validate([
'name' => 'required',
'email' => 'required|unique:users,email,'.$user->id,
'password' => 'nullable|confirmed'
]);

/**
* check password is empty
*/
if($request->password == '') {

$user->update([
'name' => $request->name,
'email' => $request->email
]);

} else {

$user->update([
'name' => $request->name,
'email' => $request->email,
'password' => bcrypt($request->password)
]);

//assign roles to user

$user->syncRoles($request->roles);

//redirect
return redirect()->route('apps.users.index');
}

/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
 public function destroy($id)
{
//find user
$user = User::findOrFail($id);

//delete user
$user->delete();

//redirect
return redirect()->route('apps.users.index');
}
}

Dari penambahan kode di atas, pertama kita import Model User terlebih dahulu.
use App\Models\User;

Setelah itu, kita juga import Inertia adapter.

use Inertia\Inertia;

Dan terakhir kita import Model Role dari Laravel Spatie Permission.
use Spatie\Permission\Models\Role;

Di dalam class UserController, kita menambahkan 6 method baru, yaitu :

1. function index
2. function create
3. function store
4. function edit
5. function update
6. function destroy

Function Index

Method ini akan kita gunakan untuk menampilkan

data users dari database menggunakan Eloquent.
$users = User::when(request()->q, function($users) {
$users = $users->where('name', 'like', '%'. request()->q . '%');
})->with('roles')->latest()->paginate(5);

Di atas, kita tambahkan method when, method ini digunakan untuk memeriksa
kondisi tertentu di dalam Eloquent. Jika ada sebuah request dengan nama q, maka
kita akan melakukan proses pencarian data berdasarkan attribute name yang sesuai
dengan isi dari request q tersebut.
Setelah itu, kita panggil method with atau biasa disebut dengan Eager Loading,
yaitu digunakan untuk memanggil sebuah relasi. Di atas kita memanggil relasi
yang bernama roles.

Kemudian kita urutkan data yang ditampilkan berdasarkan yang paling terbaru
menggunakan method latest dan kita batasi data yang ditampilkan per-halaman
menggunakan method paginate.

Setelah itu, kita render ke dalam view/component yang berada di

dalam folder Apps/Users/Index dengan mengirimkan data users sebagai props.
return Inertia::render('Apps/Users/Index', [
'users' => $users
]);

Function Create

Method ini akan kita gunakan untuk menampilkan halaman form tambah data user.
Disini kita juga akan mengirimkan data roles ke dalam form tersebut, karena saat
proses insert data user nanti, kita bisa memberikan hak akses kepada user.
//get roles
$roles = Role::all();

Di atas, kita mengambil semua list data roles dari database melalui Model Role.
Kemudian kita parsing atau kirimkan datanya dalam bentuk props ke
dalam view/vomponent yang bernama Apps/Users/Create.
return Inertia::render('Apps/Users/Create', [
'roles' => $roles
]);

Function Store

Method ini digunakan untuk memproses data yang dikirimkan oleh form untuk
disimpan/insert ke dalam database. Tapi sebelum data tersebut disimpan, kita akan
melakukan pengecekan / validasi terlebih dahulu.
$request->validate([
'name' => 'required',
'email' => 'required|unique:users',
'password' => 'required|confirmed'
]);

Dari penambahan validasi di atas, kurang lebih seperti berikut ini.

KEY VALIDATION DESCRIPTION

name required field wajib diisi.
email required field wajib diisi.
 KEY VALIDATION DESCRIPTION
unique:users
field bersifat unik dan tidak boleh ada yang sama di
dalam table users.
password required field wajib diisi.
confirmed field wajib sama dengan isi password.

Jika data yang dikirimkan oleh form sudah sesuai dengan validasi di atas, maka
kita lanjutkan untuk proses insert data user ke
dalam database menggunakan Eloquent.
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => bcrypt($request->password)
]);

Di atas, untuk attribute password kita tambahkan method bcrypt, Tujuannya

agar password yang disimpan ke dalam database di hash / random.

Setelah user berhasil disimpan, sekarang kita tinggal melakukan assign role user-
nya menggunakan method assignRole.
$user->assignRole($request->roles);

Kemudian kita redirect / arahkan ke dalam route yang bernama apps.users.index.

return redirect()->route('apps.users.index');

Function Edit

Method ini kita gunakan untuk menampilkan halaman form edit data user. Di
dalam method ini kita akan mencari data user berdasarkan ID yang diambil
dari URL menggunakan method findOrFail.
//get user
$user = User::with('roles')->findOrFail($id);

Setelah itu, kita melakukan get

data roles dari database menggunakan Model dan Eloquent.
//get roles
$roles = Role::all();

Kemudian kita akan kirimkan kedua data di atas ke dalam view/component dalam
bentuk props.
return Inertia::render('Apps/Users/Edit', [
'user' => $user,
'roles' => $roles
]);
Function Update

Method ini akan digunakan untuk melakukan proses update data user. Dimana
sebelum data diupdate kita akan tambahkan sebuah validasi terlebih dahulu.
$request->validate([
'name' => 'required',
'email' => 'required|unique:users,email,'.$user->id,
'password' => 'nullable|confirmed'
]);

Dari validisi di atas, kurang lebih penjelasan detailnya seperti berikut ini.

KEY VALIDATION DESCRIPTION

name required field wajib diisi.
email required field wajib diisi.
Field bersifat unik dan tidak boleh ada yang
sama di dalam table users. Karena bersifat
unique:users,email,'.$user-
>id unik, maka untuk proses update kita
tambahkan email,'.$user->id, yang artinya
kusus ID user yang diupdate akan dikecualikan.
password nullable field tidak wajib diisi.
confirmed field wajib sama dengan isi password.

Jika data yang dikirimkan sudah sesuai, sekarang kita akan lanjutkan untuk
proses update data user. Tapi sebelum itu, kita menambahkan sebuah kondisi lagi,
untuk memeriksa apakah password-nya diubah atau tidak.
/**
* check password is empty
*/
if($request->password == '') {

//update data tanpa password

} else {

//update data dengan password baru

Di atas, jika request yang bernama password tidak memiliki nilai/null, maka kita
akan melakukan update data user tanpa perlu meng-update attribute password-
nya.
$user->update([
'name' => $request->name,
'email' => $request->email
]);
Tapi, jika request yang bernama password memiliki value, maka kita akan
melakukan update data user sekaligus meng-update attribute password-nya.
$user->update([
'name' => $request->name,
'email' => $request->email,
'password' => bcrypt($request->password)
]);

Setelah data user berhasil diupdate, sekarang kita juga akan

melakukan update untuk role dari user tersebut menggunakan method syncRole.
$user->syncRoles($request->roles);

Dan kita redirect/arahkan ke dalam route yang bernama apps.users.index.

return redirect()->route('apps.users.index');

Function Destroy

Method ini akan kita gunakan untuk melakukan proses hapus data user
dari database menggunakan Model dan Eloquent berdasarkan ID yang di dapatkan
dari URL browser.
$user = User::findOrFail($id);

Jika data user ditemukan, maka kita akan melakukan hapus data
menggunakan method delete.
$user->delete();

Dan setelah data user berhasil dihapus, sekarang kita arahkan/redirect ke

dalam route yang bernama apps.users.index.
return redirect()->route('apps.users.index');

Langkah 2 - Membuat Route Users

Setelah berhasil membuat controller untuk user, sekarang kita lanjutkan untuk
membuatkan route-nya. Silahkan buka file routes/web.php, kemudian ubah kode-
nya menjadi seperti berikut ini.
<?php

use Illuminate\Support\Facades\Route;

//route home
Route::get('/', function () {
return \Inertia\Inertia::render('Auth/Login');
})->middleware('guest');
//prefix "apps"
Route::prefix('apps')->group(function() {

//middleware "auth"
Route::group(['middleware' => ['auth']], function () {

//route dashboard
Route::get('dashboard', App\Http\Controllers\Apps\
DashboardController::class)->name('apps.dashboard');

//route permissions
Route::get('/permissions', \App\Http\Controllers\Apps\
PermissionController::class)->name('apps.permissions.index')
->middleware('permission:permissions.index');

//route resource roles

Route::resource('/roles', \App\Http\Controllers\Apps\
RoleController::class, ['as' => 'apps'])
->middleware('permission:roles.index|roles.create|roles.edit|
roles.delete');

//route resource users

Route::resource('/users', \App\Http\Controllers\Apps\
UserController::class, ['as' => 'apps'])
->middleware('permission:users.index|users.create|users.edit|
users.delete');

});
});

Di atas, kita menambahkan 1 route baru untuk user /users menggunakan

jenis resource. Dan kita juga berikan middleware tambahan untuk
memeriksa user apakah mempunyai hak akses terhadap route ini.
middleware('permission:users.index|users.create|users.edit|users.delete')

Menampilkan Data Users

 Langkah 1 - Membuat View Users

 Langkah 2 - Uji Coba Menampilkan Data User
 Langkah 3 - Membuat Fitur Pencarian
 Langkah 4 - Uji Coba Fitur Pencarian

Kita lanjutkan untuk proses menampilkan data users di dalam Vue.js-nya. Yang
mana data users tersebut dikirimkan oleh controller dalam bentuk props dan kita
tinggal memanggilnya saja untuk ditampilkan.
Disini sama seperti sebelumnya, yaitu kita akan belajar untuk menampilkan
pagination halaman dan membuat fitur untuk pencarian data user yang dilakukan
secara server side.

Langkah 1 - Membuat View Users

Sekarang silahkan buat folder baru dengan nama Users di

dalam folder resources/js/Pages/Apps dan di dalam folder Users tersebut, silahkan
buat file baru dengan nama Index.vue, kemudian masukkan kode berikut ini di
dalamnya.
<template>
<Head>
<title>Users - Aplikasi Kasir</title>
</Head>
<main class="c-main">
<div class="container-fluid">
<div class="fade-in">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded-3 shadow border-top-purple">
<div class="card-header">
<span class="font-weight-bold"><i class="fa fa-users"></i> USERS</span>
</div>
<div class="card-body">
<form>
<div class="input-group mb-3">

<Link href="/apps/users/create" v-
if="hasAnyPermission(['users.create'])" class="btn btn-primary input-group-
text"> <i class="fa fa-plus-circle me-2"></i> NEW</Link>

<input type="text" class="form-control" placeholder="search by

user name...">

<button class="btn btn-primary input-group-text" type="submit">

<i class="fa fa-search me-2"></i> SEARCH</button>

</div>
</form>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">Full Name</th>
<th scope="col">Email Address</th>
<th scope="col">Roles</th>
<th scope="col" style="width:20%">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users.data" :key="index">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<span v-for="(role, index) in user.roles" :key="index"
class="badge badge-primary shadow border-0 ms-2 mb-2">
{{ role.name }}
 </span>
</td>
<td class="text-center">
<Link href="#" v-if="hasAnyPermission(['users.edit'])"
class="btn btn-success btn-sm me-2"><i class="fa fa-pencil-alt me-1"></i>
EDIT</Link>
<button v-if="hasAnyPermission(['users.delete'])"
class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> DELETE</button>
</td>
</tr>
</tbody>
</table>
<Pagination :links="users.links" align="end"/>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</template>

<script>
//import layout
import LayoutApp from '../../../Layouts/App.vue';

//import component pagination

import Pagination from '../../../Components/Pagination.vue';

//import Heade and Link from Inertia

import { Head, Link } from '@inertiajs/vue3';

export default {
//layout
layout: LayoutApp,

//register component
components: {
Head,
Link,
Pagination
},

//props
props: {
users: Object,
}
}
</script>

<style>

</style>

Dari penambanan kode di atas, pertama kita import layout App terlebih dahulu.
//import layout
import LayoutApp from '../../../Layouts/App.vue';

Kemudian kita import component Pagination.

//import component pagination
import Pagination from '../../../Components/Pagination.vue';

Setelah itu, kita import 2 component dari Inertia.js, yaitu Head dan Link.
//import Heade and Link from Inertia
import { Head, Link } from '@inertiajs/vue3';

Dan setelah semua berhasil di import, sekarang kita lanjutkan untuk me-
register layout dan component di atas.
//layout
layout: LayoutApp,

//register component
components: {
Head,
Link,
Pagination
},

Dan untuk data users, kita ambil di dalam props yang bernama users dengan data
berupa Object. Data props tersebut merupakan data yang dikirimkan
oleh controller.
//props
props: {
users: Object,
}

Di dalam template, kita tinggal menampilkan data users tersebut menggunakan

perulangan / directive yang bernama v-for.
<tr v-for="(user, index) in users.data" :key="index">

//...

</tr>

Di dalam perulangan data tersebut, kita juga akan melakukan perulangan lagi
untuk menampilkan nama roles yang terkait dengan user tersebut.
<span v-for="(role, index) in user.roles" :key="index" class="badge badge-
primary shadow border-0 ms-2 mb-2">
{{ role.name }}
</span>

Dan untuk menampilkan pagination, kita cukup

memanggil component Pagination dengan mengirimkan 2 data props yang
bernama :links dan align.
<Pagination :links="users.links" align="end"/>
Langkah 2 - Uji Coba Menampilkan Data User

Sekarang, silahkan klik menu USERS yang ada di sidebar sebelah kiri, atau teman-
teman bisa ke URL berikut ini http://localhost:8000/apps/users, jika berhasil maka kita
akan mendapatkan hasil seperti ini.

Langkah 3 - Membuat Fitur Pencarian

Setelah berhasil menampilkan data users, sekarang kita akan lanjutkan untuk
membuat fitur pencarian data. Silahkan
buka file resources/js/Pages/Apps/Users/Index.vue, kemudian ubah semua kode-
nya menjadi seperti berikut ini.
<template>
<Head>
<title>Users - Aplikasi Kasir</title>
</Head>
<main class="c-main">
<div class="container-fluid">
<div class="fade-in">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded-3 shadow border-top-purple">
<div class="card-header">
<span class="font-weight-bold"><i class="fa fa-users"></i> USERS</span>
</div>
<div class="card-body">
<form @submit.prevent="handleSearch">
<div class="input-group mb-3">
 <Link href="/apps/users/create" v-
if="hasAnyPermission(['users.create'])" class="btn btn-primary input-group-
text"> <i class="fa fa-plus-circle me-2"></i> NEW</Link>

<input type="text" class="form-control" v-model="search"

placeholder="search by user name...">

<button class="btn btn-primary input-group-text" type="submit">

<i class="fa fa-search me-2"></i> SEARCH</button>

</div>
</form>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">Full Name</th>
<th scope="col">Email Address</th>
<th scope="col">Roles</th>
<th scope="col" style="width:20%">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users.data" :key="index">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<span v-for="(role, index) in user.roles" :key="index"
class="badge badge-primary shadow border-0 ms-2 mb-2">
{{ role.name }}
</span>
</td>
<td class="text-center">
<Link href="#" v-if="hasAnyPermission(['users.edit'])"
class="btn btn-success btn-sm me-2"><i class="fa fa-pencil-alt me-1"></i>
EDIT</Link>
<button v-if="hasAnyPermission(['users.delete'])"
class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> DELETE</button>
</td>
</tr>
</tbody>
</table>
<Pagination :links="users.links" align="end"/>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</template>

<script>
//import layout
import LayoutApp from '../../../Layouts/App.vue';

//import component pagination

import Pagination from '../../../Components/Pagination.vue';

//import Heade and Link from Inertia

import { Head, Link, router } from '@inertiajs/vue3';
//import ref from vue
import { ref } from 'vue';

export default {
//layout
layout: LayoutApp,

//register component
components: {
Head,
Link,
Pagination
},

//props
props: {
users: Object,
},

setup() {

//define state search

const search = ref('' || (new
URL(document.location)).searchParams.get('q'));

//define method search

const handleSearch = () => {
router.get('/apps/users', {

//send params "q" with value from state "search"

q: search.value,
});
}

//return
return {
search,
handleSearch,
}

}
}
</script>

<style>

</style>

Dari perubahan kode di atas, pertama kita import Reactivity API ref dari Vue.js.
Ini akan kita manfaatkan untuk membuat state baru.
//import ref from vue
import { ref } from 'vue';

Setelah itu, kita import router dari Inertia.js. Ini akan kita gunakan untuk
melakukan HTTP request ke dalam server.
//import Heade and Link from Inertia
import { Head, Link, router } from '@inertiajs/vue3';

Kemudian kita define composition API menggunakan method setup.

setup() {

//...

Di dalam composition API, pertama kita buat sebuah state baru dengan
nama search dengan jenis ref dan untuk default value-nya kita
berikan string kosong dan value q dari URL browser.
//define state search
const search = ref('' || (new
URL(document.location)).searchParams.get('q'));

Setelah itu, kita buat method baru dengan nama handleSearch, method tersebut
yang nanti kita panggil ketika form di dalam template di submit.
<form @submit.prevent="handleSearch">

//...

</form>
//define method search
const handleSearch = () => {

//...

Di dalam method handleSearch, kita melakukan HTTP request ke

dalam URL /apps/users menggunakan method GET. Dan kita juga mengirimkan
data dalam bentuk parameter yang bernama q, dimana isinya adalah nilai yang
diambil dari state search.
router.get('/apps/users', {

//send params "q" with value from state "search"

q: search.value,
});

Agar state search dan method handleSearch dapat digunakan di dalam template,
maka kita perlu melakukan return terlebih dahulu.
//return
return {
search,
handleSearch,
}

Langkah 4 - Uji Coba Fitur Pencarian

Sekarang, silahkan reload halaman users dan lakukan pencarian dengan cara
memasukkan kata kunci di dalam input pencarian dan klik enter. Jika berhasil
kurang lebih seperti berikut ini.

Di atas, saya mencoba melakukan pencarian data menggunakan kata kunci xxx dan
karena tidak ada data user dengan nama tersebut, maka hasilnya adalah kosong.

Membuat Proses Insert Data User

 Langkah 1 - Membuat View Create User

 Langkah 2 - Uji Coba Proses Insert Data User

Setelah berhasil menampilkan data users, sekarang kita akan lanjutkan belajar
bagaimana cara membuat proses insert data user ke dalam database.

Langkah 1 - Membuat View Create User

Sekarang kita akan membuat sebuah view yang digunakan untuk menampilkan
halaman form tambah data user. Tidak hanya menambahkan form, kita juga akan
membuat method yang digunakan untuk proses insert data.
Silahkan buat file baru dengan nama Create.vue di
dalam folder resources/js/Pages/Apps/Users, kemudian masukkan kode berikut
ini di dalamnya.
<template>
<Head>
<title>Add New User - Aplikasi Kasir</title>
</Head>
<main class="c-main">
<div class="container-fluid">
<div class="fade-in">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded-3 shadow border-
top-purple">
<div class="card-header">
<span class="font-weight-bold"><i class="fa
fa-user"></i> ADD NEW USER</span>
</div>
<div class="card-body">

<form @submit.prevent="submit">

<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="fw-bold">Full
Name</label>
<input class="form-control"
v-model="form.name" :class="{ 'is-invalid': errors.name }" type="text"
placeholder="Full Name">
</div>
<div v-if="errors.name"
class="alert alert-danger">
{{ errors.name }}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="fw-
bold">Email Address</label>
<input class="form-control"
v-model="form.email" :class="{ 'is-invalid': errors.email }" type="email"
placeholder="Email Address">
</div>
<div v-if="errors.email"
class="alert alert-danger">
{{ errors.email }}
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="fw-
bold">Password</label>
<input class="form-control"
v-model="form.password" :class="{ 'is-invalid': errors.password }"
type="password" placeholder="Password">
</div>
 <div v-if="errors.password"
class="alert alert-danger">
{{ errors.password }}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="fw-
bold">Password Confirmation</label>
<input class="form-control"
v-model="form.password_confirmation" type="password" placeholder="Password
Confirmation">
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="mb-3">
<label class="fw-
bold">Roles</label>
<br>
<div class="form-check
form-check-inline" v-for="(role, index) in roles" :key="index">
<input class="form-
check-input" type="checkbox" v-
model="form.roles" :value="role.name" :id="`check-${role.id}`">
<label class="form-
check-label" :for="`check-${role.id}`">{{ role.name }}</label>
</div>
</div>
<div v-if="errors.roles"
class="alert alert-danger">
{{ errors.roles }}
</div>
</div>
</div>

<div class="row">
<div class="col-12">
<button class="btn btn-primary
shadow-sm rounded-sm" type="submit">SAVE</button>
<button class="btn btn-warning
shadow-sm rounded-sm ms-3" type="reset">RESET</button>
</div>
</div>
</form>

</div>
</div>
</div>
</div>
</div>
</div>
</main>
</template>

<script>
//import layout
import LayoutApp from '../../../Layouts/App.vue';
//import Heade and useForm from Inertia
import { Head, Link, router } from '@inertiajs/vue3';

//import reactive from vue

import { reactive } from 'vue';

//import sweet alert2

import Swal from 'sweetalert2';

export default {
//layout
layout: LayoutApp,

//register component
components: {
Head,
Link
},

//props
props: {
errors: Object,
roles: Array,
},

//composition API
setup() {

//define form with reactive

const form = reactive({
name: '',
email: '',
password: '',
password_confirmation: '',
roles: []
});

//method "submit"
const submit = () => {

//send data to server

router.post('/apps/users', {
//data
name: form.name,
email: form.email,
password: form.password,
password_confirmation: form.password_confirmation,
roles: form.roles
}, {
onSuccess: () => {
//show success alert
Swal.fire({
title: 'Success!',
text: 'User saved successfully.',
icon: 'success',
showConfirmButton: false,
timer: 2000
});
},
});
 }

return {
form,
submit,
};

}
}
</script>

<style>

</style>

Dari penambahan kode di atas, pertama kita import layout App terlebih dahulu.
//import layout
import LayoutApp from '../../../Layouts/App.vue';

Setelah itu, kita import 3 component dri Inertia.js. Yaitu Head, Link dan router.
//import Heade and useForm from Inertia
import { Head, Link, router } from '@inertiajs/vue3';

Dan jika juga import Reactivity API reactive dari Vue.js. Ini akan kita gunakan
untuk mendefinisikan sebuah state di dalam Vue.js.
//import reactive from vue
import { reactive } from 'vue';

Kemudian kita import package Sweet Alert2.

//import sweet alert2
import Swal from 'sweetalert2';

Dan setelah layout dan component kita import, maka sekarang kita
akan register terlebih dahulu. Biar component tersebut dapat digunakan di
dalam template.
//layout
layout: LayoutApp,

//register component
components: {
Head,
Link
},

Kemudian kita define 2 props, yaitu errors dan roles.

Untuk props errors nantinya akan dikirimkan oleh controller ketika validasi
di form tidak terpenuhi.
Sedangkan props roles merupakan list data roles yang dikirimkan oleh controller.
Karena saat proses insert data user, kita bisa memilih role untuk si user tersebut.
//props
props: {
errors: Object,
roles: Array,
},

Dan kita define componention API menggunakan method setup.

//composition API
setup() {

//...

Di dalam composition API, pertama kita buat state baru dengan nama form, yang di
dalamnya ada beberapa object, yaitu
 name
 email
 password
 password_confirmation
 roles

Untuk state roles kita berikan default value array kosong, karena nantinya kita
bisa memasukkan lebih dari 1 nilai/value.
//define form with reactive
const form = reactive({
name: '',
email: '',
password: '',
password_confirmation: '',
roles: []
});

Setelah itu, kita buat method baru dengan nama submit. Method tersebut akan
dijalankan ketika form di submit. Dan method tersebut yang digunakan untuk
mengirimkan data ke server untuk disimpan ke database.
<form @submit.prevent="submit">

//...

</form>
//method "submit"
const submit = () => {

//...

}
Di dalam method submit, kita melakukan HTTP request ke
dalam URL /apps/users menggunakan method POST. Dan sekaligus mengirimkan
beberapa data.
//send data to server
router.post('/apps/users', {
//data
name: form.name,
email: form.email,
password: form.password,
password_confirmation: form.password_confirmation,
roles: form.roles
}

Jika proses insert data berhasil dilakukan di dalam controller, maka kita akan
menampilkan sebuah notifikasi yang berisi informasi data berhasil disimpan
menggunakan Sweet Alert 2.
Swal.fire({
title: 'Success!',
text: 'User saved successfully.',
icon: 'success',
showConfirmButton: false,
timer: 2000
});

Dan agar state form dan method submit dapat digunakan di dalam template, maka
kita perlu melakukan return terlebih dahulu.
return {
form,
submit,
}

Di dalam template, untuk mendapatkan value dari input, kita bisa

menggunakan directive v-model.
<input class="form-control" v-model="form.name" :class="{ 'is-invalid':
errors.name }" type="text" placeholder="Full Name">

Dan untuk menampilkan jika ada error validasi, kurang lebih seperti berikut ini.
<div v-if="errors.name" class="alert alert-danger">
{{ errors.name }}
</div>

Langkah 2 - Uji Coba Proses Insert Data User

Sekarang silahkan klik ADD NEW atau bisa ke

URL http://localhost:8000/apps/users/create. Jika berhasil maka akan menampilkan
halaman seperti berikut ini.
Sekarang, silahkan klik button SAVE tanpa mengisi data apapun, maka kita akan
mendapatkan sebuah error validasi yang dikirimkan oleh controller melalui props.
Dan sekarang, silahkan masukkan data user yang teman-teman inginkan, kemudian
klik button SAVE dan jika berhasil maka akan mendapatkan hasil seperti berikut ini.

Membuat Proses Edit dan Update Data User

 Langkah 1 - Menambahkan Link Edit Data

 Langkah 2 - Membuat View Edit dan Proses Update User
 Langkah 3 - Uji Coba Proses Edit Data User

Sebelumnya kita sudah belajar bagaimana cara melakukan proses insert data ke
dalam database. Sekarang kita akan lanjutkan belajar bagaimana cara membuat
proses edit kemudian meng-update-nya ke dalam database.

Langkah 1 - Menambahkan Link Edit Data

Pertama, kita akan menambahkan sebuah link untuk proses edit data. Dimana
ketika link tersebut diklik maka akan menuju ke dalam halaman edit data, sehingga
kita bisa mengubah datanya dan melakukan proses update.

Silahkan buka file resources/js/Pages/Apps/Users/Index.vue, kemudian cari kode

berikut ini.
<Link href="#" v-if="hasAnyPermission(['users.edit'])" class="btn btn-
success btn-sm me-2"><i class="fa fa-pencil-alt me-1"></i> EDIT</Link>

Dan ubahlah menjadi seperti berikut ini.

<Link :href="`/apps/users/${user.id}/edit`" v-
if="hasAnyPermission(['users.edit'])" class="btn btn-success btn-sm me-
2"><i class="fa fa-pencil-alt me-1"></i> EDIT</Link>

Di atas, kita menambahkan sebuah link yang digunakan untuk melakukan

proses edit data berdasarkan ID user.
/apps/users/${user.id}/edit

Langkah 2 - Membuat View Edit dan Proses Update User

Setelah berhasil menambahkan link untuk proses edit data, sekarang kita akan
lanjutkan untuk membuat sebuah view untuk menampilkan halaman edit data user.

Silahkan buat file baru dengan nama Edit.vue di dalam

folder resources/js/Pages/Apps/Users, kemudian masukkan kode berikut ini di
dalamnya.
<template>
<Head>
<title>Edit User - Aplikasi Kasir</title>
</Head>
<main class="c-main">
<div class="container-fluid">
<div class="fade-in">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded-3 shadow border-
top-purple">
<div class="card-header">
<span class="font-weight-bold"><i class="fa
fa-user"></i> EDIT USER</span>
</div>
<div class="card-body">

<form @submit.prevent="submit">

<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="fw-bold">Full
Name</label>
<input class="form-control"
v-model="form.name" :class="{ 'is-invalid': errors.name }" type="text"
placeholder="Full Name">
</div>
<div v-if="errors.name"
class="alert alert-danger">
{{ errors.name }}
</div>
</div>
 <div class="col-md-6">
<div class="mb-3">
<label class="fw-
bold">Email Address</label>
<input class="form-control"
v-model="form.email" :class="{ 'is-invalid': errors.email }" type="email"
placeholder="Email Address">
</div>
<div v-if="errors.email"
class="alert alert-danger">
{{ errors.email }}
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="fw-
bold">Password</label>
<input class="form-control"
v-model="form.password" :class="{ 'is-invalid': errors.password }"
type="password" placeholder="Password">
</div>
<div v-if="errors.password"
class="alert alert-danger">
{{ errors.password }}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="fw-
bold">Password Confirmation</label>
<input class="form-control"
v-model="form.password_confirmation" type="password" placeholder="Password
Confirmation">
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="mb-3">
<label class="fw-
bold">Roles</label>
<br>
<div class="form-check
form-check-inline" v-for="(role, index) in roles" :key="index">
<input class="form-
check-input" type="checkbox" v-
model="form.roles" :value="role.name" :id="`check-${role.id}`">
<label class="form-
check-label" :for="`check-${role.id}`">{{ role.name }}</label>
</div>
</div>
<div v-if="errors.roles"
class="alert alert-danger">
{{ errors.roles }}
</div>
</div>
</div>
 <div class="row">
<div class="col-12">
<button class="btn btn-primary
shadow-sm rounded-sm" type="submit">UPDATE</button>
<button class="btn btn-warning
shadow-sm rounded-sm ms-3" type="reset">RESET</button>
</div>
</div>
</form>

</div>
</div>
</div>
</div>
</div>
</div>
</main>
</template>

<script>
//import layout
import LayoutApp from '../../../Layouts/App.vue';

//import Heade and Link from Inertia

import { Head, Link, router } from '@inertiajs/vue3';

//import reactive from vue

import { reactive } from 'vue';

//import sweet alert2

import Swal from 'sweetalert2';

export default {
//layout
layout: LayoutApp,

//register component
components: {
Head,
Link
},

//props
props: {
errors: Object,
user: Object,
roles: Array,
},

//composition API
setup(props) {

//define form with reactive

const form = reactive({
name: props.user.name,
email: props.user.email,
password: '',
password_confirmation: '',
roles: props.user.roles.map(obj => obj.name),
});
 //method "submit"
const submit = () => {

//send data to server

router.put(`/apps/users/${props.user.id}`, {
//data
name: form.name,
email: form.email,
password: form.password,
password_confirmation: form.password_confirmation,
roles: form.roles
}, {
onSuccess: () => {
//show success alert
Swal.fire({
title: 'Success!',
text: 'User updated successfully.',
icon: 'success',
showConfirmButton: false,
timer: 2000
});
},
});

return {
form,
submit,
};

}
}
</script>

<style>

</style>

Dari penambahan kode di atas, pertama-tama kita import layout App terlebih
dahulu.
//import layout
import LayoutApp from '../../../Layouts/App.vue';

Setelah itu, kita import 3 component dari Inertia.js.

//import Heade and Link from Inertia
import { Head, Link, router } from '@inertiajs/vue3';

Dan kita import Reactivity API reactive dari Vue.js.

//import reactive from vue
import { reactive } from 'vue';

Kemudian kita import package Sweet Alert 2.

//import sweet alert2
import Swal from 'sweetalert2';

Setelah layout dan component berhasi di import, sekarang kita lanjutkan untuk
melakukan register. Tujuannya agar kita bisa menggunakannya di dalam template.
//layout
layout: LayoutApp,

//register component
components: {
Head,
Link
},

Kemudian kita define 3 props, yaitu errors, user dan roles. Ketiga props tersebut
datanya dikirimkan oleh controller.

Untuk props errors akan berisi validasi dari form validation. Untuk
props user merupakan data user yang akan di edit. Sedangkan
untuk prop roles merupakan list data roles.
//props
props: {
errors: Object,
user: Object,
roles: Array,
},

Setelah berhasil mendefinisikan props, sekarang kita lanjutkan untuk

mendefinisikan composition API menggunakan method setup.
//composition API
setup(props) {

//...

Jika kita perhatikan, di dalam method setup kita tambahkan parameter props.
Fungsinya agar kita bisa mengambil nilai / data yang ada di dalam props ke
dalam composition API.

Di dalam method setup, pertama-tama kita akan membuat state baru dengan
nama form, dimana di dalam state tersebut akan berisi beberapa obejct.
//define form with reactive
const form = reactive({
name: props.user.name,
email: props.user.email,
password: '',
password_confirmation: '',
roles: props.user.roles.map(obj => obj.name),
});

Di atas, untuk object dari state-nya kita berikan default value yang diambil
dari props.

Kemudian kita buat method baru dengan nama submit, method tersebut akan
dijalankan ketika form disubmit.
<form @submit.prevent="submit">

//...

</form>
//method "submit"
const submit = () => {

//...

Di dalam method submit, kita melakukan HTTP request ke

dalam URL /apps/users/:id menggunakan method PUT dan kita juga mengirimkan
beberapa data.
//send data to server
router.put(`/apps/users/${props.user.id}`, {
//data
name: form.name,
email: form.email,
password: form.password,
password_confirmation: form.password_confirmation,
roles: form.roles
}

Jika proses update data berhasil dilakukan, maka kita tampilkan notifikasi yang
berisi alert / informasi data berhasil diupdate menggunakan Sweet Alert2.
Swal.fire({
title: 'Success!',
text: 'User updated successfully.',
icon: 'success',
showConfirmButton: false,
timer: 2000
});

Agar state form dan method submit bisa digunakan di dalam template, maka kita
perlu melakukan return.
return {
form,
submit,
}

Langkah 3 - Uji Coba Proses Edit Data User

Sekarang silahkan klik EDIT di salah satu data user yang teman-teman miliki, jika
berhasil maka akan menampilkan halaman / form edit yang kurang lebih seperti
berikut ini.

Silahkan sesuai data yang ingin teman-teman ubah, kemudian klik button UPDATE.
Jika berhasil maka akan mendapatkan hasil seperti berikut ini.
Membuat Proses Hapus Data User

 Langkah 1 - Menambahkan Method Destroy

 Langkah 2 - Uji Coba Delete Data User

Setelah belajar menampilkan, insert, edit dan juga update. Maka sekarang kita
akan lanjutkan untuk membuat proses hapus data dari database. Disini kita hanya
menambahkan 1 method aja di dalam view users index dan kita akan kombinasikan
menggunakan Sweet Laert 2 untuk menampilkan jendela konfirmasi sebelum data
tersebut dihapus.

Langkah 1 - Menambahkan Method Destroy

Sekarang, silahkan buka file resources/js/Pages/Apps/Users/Index.vue, kemudian

ubah semua kode-nya menjadi seperti berikut ini.
<template>
<Head>
<title>Users - Aplikasi Kasir</title>
</Head>
<main class="c-main">
 <div class="container-fluid">
<div class="fade-in">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded-3 shadow border-
top-purple">
<div class="card-header">
<span class="font-weight-bold"><i class="fa
fa-users"></i> USERS</span>
</div>
<div class="card-body">
<form @submit.prevent="handleSearch">
<div class="input-group mb-3">

<Link href="/apps/users/create" v-
if="hasAnyPermission(['users.create'])" class="btn btn-primary input-group-
text"> <i class="fa fa-plus-circle me-2"></i> NEW</Link>

<input type="text" class="form-

control" v-model="search" placeholder="search by user name...">

<button class="btn btn-primary

input-group-text" type="submit"> <i class="fa fa-search me-2"></i>
SEARCH</button>

</div>
</form>
<table class="table table-striped table-
bordered table-hover">
<thead>
<tr>
<th scope="col">Full Name</th>
<th scope="col">Email
Address</th>
<th scope="col">Roles</th>
<th scope="col"
style="width:20%">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in
users.data" :key="index">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<span v-for="(role, index)
in user.roles" :key="index" class="badge badge-primary shadow border-0 ms-2
mb-2">
{{ role.name }}
</span>
</td>
<td class="text-center">
<Link :href="`/apps/users/$
{user.id}/edit`" v-if="hasAnyPermission(['users.edit'])" class="btn btn-
success btn-sm me-2"><i class="fa fa-pencil-alt me-1"></i> EDIT</Link>
<button
@click.prevent="destroy(user.id)" v-if="hasAnyPermission(['users.delete'])"
class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> DELETE</button>
</td>
</tr>
</tbody>
 </table>
<Pagination :links="users.links"
align="end"/>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</template>

<script>
//import layout
import LayoutApp from '../../../Layouts/App.vue';

//import component pagination

import Pagination from '../../../Components/Pagination.vue';

//import Heade and Link from Inertia

import { Head, Link, router } from '@inertiajs/vue3';

//import ref from vue

import { ref } from 'vue';

//import sweet alert2

import Swal from 'sweetalert2';

export default {
//layout
layout: LayoutApp,

//register component
components: {
Head,
Link,
Pagination
},

//props
props: {
users: Object,
},

setup() {

//define state search

const search = ref('' || (new
URL(document.location)).searchParams.get('q'));

//define method search

const handleSearch = () => {
router.get('/apps/users', {

//send params "q" with value from state "search"

q: search.value,
});
}

//method destroy
const destroy = (id) => {
 Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
})
.then((result) => {
if (result.isConfirmed) {

router.delete(`/apps/users/${id}`);

Swal.fire({
title: 'Deleted!',
text: 'User deleted successfully.',
icon: 'success',
timer: 2000,
showConfirmButton: false,
});
}
})
}

//return
return {
search,
handleSearch,
destroy
}

}
}
</script>

<style>

</style>

Dari perubahan kode di atas, pertama kita import package Sweet Alert 2.
//import sweet alert2
import Swal from 'sweetalert2';

kemudian, di dalam template pada bagian button DELETE, kita

tambahkan event @click yang mengarah ke dalam method yang
bernama destroy dan di dalam method tersebut kita berikan parameter berupa ID
dari user.
<button @click.prevent="destroy(user.id)" v-
if="hasAnyPermission(['users.delete'])" class="btn btn-danger btn-sm"><i
class="fa fa-trash"></i> DELETE</button>

Setelah itu, di dalam composition API / method setup, kita

tambahkan method destroy tersebut.
//method destroy
const destroy = (id) => {

//...

Di dalam method tersebut, pertama kita akan menjalankan Sweet Alert 2 untuk
menampilkan halaman konfirmasi.
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
})

Jika button Yes, delete it!, di klik, maka akan masuk ke dalam promise then,
yang mana di dalamnya akan
mekaukan HTTP request ke URL /apps/users/:id menggunakan method DELETE.
router.delete(`/apps/users/${id}`);

Setelah data berhasil dihapus, kita akan tampilkan notifikasi / informasi

menggunakan Sweet Alert 2.
Swal.fire({
title: 'Deleted!',
text: 'User deleted successfully.',
icon: 'success',
timer: 2000,
showConfirmButton: false,
});

Agar method destroy dapat digunakan di dalam template, maka kita perlu
melakukan return.
return {
search,
handleSearch,
destroy // <-- method "destroy"
}

Langkah 2 - Uji Coba Delete Data User

Sekarang silahkan klik DELETE di salah satu data user yang teman-teman miliki, jika
berhasil maka akan menampilkan jendela konfirmasi. Kurang lebih seperti berikut
ini.
Jika kita klik button Yes, delete it!, maka proses delete akan dilakukan dan kita
akan mendapatkan hasil seperti berikut ini.