Fitur edit user ~4 - Licensed to Riva Pebrian at 22/10/ :37:58. 1 of 343

Fitur form edit users akan menggunakan url http://larashop.test/users/{user}/edit untuk menampilkan form, dan url http://larashop.test/users/{user} dengan method PUT untuk mengirim data edit.

Pertama kita buat sebuah tombol di tampilan list user yang sudah kita buat. Buka kembali file users/index.blade.php yang baru saja kita selesaikan. Tambahkan kode berikut ini:

Menggantikan baris ini

[TODO: actions]

1 2 3 4 5 6

Sehingga jika kamu buka daftar user kamu akan melihat tombol edit di masing-masing baris, seprti ini:

Kode link yang baru saja kita tambahkan tadi lah yang berfungsi untuk membuat tombol itu, kalo diperhatikan attribute href kita menggunakan helper route() seperti ini:

route('users.edit', [$user->id])

Kode di atas menghasilkan string seperti ini http://larashop.test/users/{user}/edit, di mana {user} nilainya berasal dari $user->id yaitu ID dari masing-masing user. users.edit merupakan named route dari /users/{user}/edit, telah kita jelaskan di tabel saat mendefinisikan route resource untuk UserController.

Jika kamu klik salah satu tombol edit, maka kamu akan diarahkan ke halaman baru, halaman tersebut masih kosong, di halaman itulah kita akan membuat edit form.

Mengambil data user yang akan diedit lalu lempar ke view ~5

Fitur edit kita yang menggunakan path users/{user}/edit dihandle oleh UserController@edit untuk itu pertama kita perlu mencari User yang akan diedit berdasarkan route parameter user lalu lempar ke view.

Kita melakukannya di UserController@edit

Buka file UserController.php lalu ubah action edit() agar menjadi seperti ini:

public function edit($id) {

$user = \App\User::findOrFail($id);

return view('users.edit', ['user' => $user]);

}

Kode tersebut mencari user dengan id bernilai sesuai variabel $id, variabel tersebut berasal dari route parameter {user}. Kita menggunakan method findOrFail() bukan find() agar seandainya user tidak ditemukan, Laravel akan otomatis memberikan tampilan error model not found.

1 2 3 4 5 6 7

Setelah itu jika user ditemukan, kita lempar view user.edit dengan data user yang bernilai data user yang tadi kita cari dengan findOrFail()

Membuat form edit ~5

Selanjutnya kita perlu buat sebuah file view baru untuk meletakkan form edit kita. View ini kita beri nama edit.blade.php dan kita letakkan di direktori resources/views/users/. Buka file tersebut dan seperti biasa kita isikan kerangka view seperti ini:

File resources/views/users/edit.blade.php

@extends('layouts.global')

@section('title') Edit User @endsection

@section('content')

user yang akan diedit adalah {{$user->email}}

@endsection

Jika sudah, silahkan coba kembali ke halaman list users dan klik salah satu tombol edit, misalnya kamu mengeklik user dengan id 1, maka kamu akan diarahkan ke halaman http://larashop.test/users/1/edit dan kamu akan melihat tampilan seperti ini:

Kita telah berhasil membaca email dari user yang akan diedit menggunakan kode

Ini karena sebelumnya kita telah melempar data user dari action controller yang menggunakan view ini.

1 2 3 4 5

1 2 3 4 5 6 7

Selanjutnya kita tinggal buat form untuk mengedit field-field user, mirip dengan create form, bedanya adalah setiap input sudah diisi dengan data dari user yang akan diedit.

Pertama kita buat kerangka dasar dari form edit seperti ini:

<form enctype="multipart/form-data" class="bg-white shadow-sm p-3"

action="{{route('users.update', [$user->id])}}" method="POST">

@csrf

</form>

Form ini akan dikirimkan ke url http://larashop.test/users/{user} dengan method PUT. Untuk itu pertama kita set url tersebut sebagai action dari form html kita. Kita tidak menuliskan secara langsung urlnya, akan tetapi menggunakan helper route() dengan mengisikan named route untuk url di atas yaitu users.update dan mengisikan route parameter id dengan nilai id dari user yang akan diedit

$user->edit seperti ini:

route('users.update', [$user->id])

Kamu mungkin bertanya, katanya kita akan menggunakan method "PUT" kok di formnya ditulis method

"POST"??? Penjelasannya adalah begini:

Untuk menggunakan method selain GET dan POST, maka kita harus memberikan nilai method pada form sebagai POST, lalu kita tambahkan input bertipe hidden dengan nama _method bernilai nama method yang akan digunakan. Misalnya untuk mengirim data dengan method PUT kita menggunakan input hidden ini:

Dan untuk menggunakan method DELETE tinggal kita ganti valuenya menjadi seperti ini:

Setelah itu kita perlu kembali menggunakan helper @csrf supaya request kita bisa diterima oleh Laravel.

Setelah ini kita buat kode html input untuk properti yang bisa diedit. Field yang bisa diedit adalah name, roles, phone, avatar dan address.

Pada setiap input kita isikan value sesuai dengan data dari variabel $user misalnya field name kita set value {{$user->name}} seperti ini:

<input

value="{{$user->name}}"

class="form-control"

placeholder="Full Name"

type="text"

name="name"

id="name"/>

Untuk form edit kita juga menambahkan fitur untuk mengubah status user dari ACTIVE menjadi INACTIVE atau sebaliknya. Kita tidak melakukannya di form create user karena secara default user yang dibuat kita

anggap sebagai user ACTIVE sehingga di database pun defaultnya ACTIVE. Akan tetapi selanjutnya kita bisa mengubah status dari user melalui menu edit ini, itulah kenapa kita menambahkan kode html berikut ini:

<label for="">Status</label>

<br/>

<input {{$user->status == "ACTIVE" ? "checked" : ""}}

value="ACTIVE" type="radio"

class="form-control"

id="active"

name="status">

<label for="active">Active</label>

<input {{$user->status == "INACTIVE" ? "checked" : ""}}

value="INACTIVE"

type="radio"

class="form-control"

id="inactive"

name="status">

<label for="inactive">Inactive</label>

Untuk field username dan email tetap kita tampilkan tapi disabled. Tidak bisa diubah.

Untuk roles kita akan mencentang input checkbox di tiap-tiap role yang dimiliki user, kita melakukannya bantuan php function in_array() seperti ini:

in_array('ADMIN', json_encode($user->roles));

Kode di atas mengecek apakah $user->roles didalamnya terdapat string "ADMIN". Kita menggunakan json_decode() untuk mengubah dari string JSON Array kembali ke PHP Array.

Kita implementasikan pengecekkan di atas di masing-masing checkbox role seperti ini:

<input

type="checkbox"

{{in_array("ADMIN", json_decode($user->roles)) ? "checked" : ""}}

name="roles[]"

id="ADMIN"

value="ADMIN">

<label for="ADMIN">Administrator</label>

<input

type="checkbox"

{{in_array("STAFF", json_decode($user->roles)) ? "checked" : ""}}

name="roles[]"

id="STAFF"

value="STAFF">

<label for="STAFF">Staff</label>

<input

type="checkbox"

{{in_array("CUSTOMER", json_decode($user->roles)) ? "checked" : ""}}

name="roles[]"

21 22 23

1 2 3 4 5

1 2 3 4 5 6

1 2 3 4 5

1 2 3 4

id="CUSTOMER"

value="CUSTOMER">

<label for="CUSTOMER">Customer</label>

Jangan bingung ya, kode di atas menggunakan ternary operator yaitu bentuk singkat dari if else seperti ini:

in_array("ADMIN", json_decode($user->roles)) ? "checked" : ""

Kode di atas logikanya sama saja if else di PHP seperti ini:

if(in_array("ADMIN", json_decode($user->roles))){

// tampilkan "checked"

} else {

// tampilkan "" (empty string) }

Khusus untuk menampilkan avatar kita lakukan pengecekkan, jika user memiliki avatar kita tampilkan image avatarnya, jika tidak ada avatar kita tampilkan teks "No avatar"

@if($user->avatar)

<img src="{{asset('storage/'.$user->avatar)}}" width="120px" />

<br>

@else No avatar @endif

Selain itu pada input file avatar kita berikan keterangan untuk mengabaikan field input ini jika tidak ingin mengubah avatar

<small class="text-muted">Kosongkan jika tidak ingin mengubah avatar</small>

Kemudian kita perlu tambahkan juga kode untuk membaca apakah ada pesan session dengan nama status, jika ada tampilkan menggunakan kode ini:

@if(session('status'))

</div>

@endif

Kode tersebut untuk menampilkan flash message yang nanti akan kita kirim dari controller saat update user berhasil.

Kini kode view users/edit.blade.php kita terlihat seperti ini:

@extends('layouts.global')

@section('title') Edit User @endsection

@if(session('status'))

</div>

@endif

<form

enctype="multipart/form-data"

class="bg-white shadow-sm p-3"

action="{{route('users.update', [$user->id])}}" method="POST">

@csrf

<input

type="hidden"

value="PUT"

name="_method">

<input

<label for="username">Username</label>

<input

<label for="">Status</label>

<br/>

<input {{$user->status == "ACTIVE" ? "checked" : ""}}

value="ACTIVE"

type="radio"

class="form-control"

id="active"

name="status">

<label for="active">Active</label>

<input {{$user->status == "INACTIVE" ? "checked" : ""}}

value="INACTIVE"

<label for="inactive">Inactive</label>

<label for="">Roles</label>

<br>

<input

type="checkbox" {{in_array("ADMIN", json_decode($user->roles)) ?

"checked" : ""}}

name="roles[]"

id="ADMIN"

value="ADMIN">

<label for="ADMIN">Administrator</label>

<input

type="checkbox" {{in_array("STAFF", json_decode($user->roles)) ?

"checked" : ""}}

name="roles[]"

id="STAFF"

value="STAFF">

<label for="STAFF">Staff</label>

<input

type="checkbox" {{in_array("CUSTOMER", json_decode($user->roles))

? "checked" : ""}}

name="roles[]"

id="CUSTOMER"

value="CUSTOMER">

<label for="CUSTOMER">Customer</label>

<br>

<label for="phone">Phone number</label>

<br>

<label for="address">Address</label>

<textarea

name="address"

id="address"

class="form-control">{{$user->address}}

</textarea>

<br>

<label for="avatar">Avatar image</label>

113

class="text-muted">Kosongkan jika tidak ingin mengubah avatar</small>

<hr

class="my-3">

<label for="email">Email</label>

<input

Menangkap request edit dan mengupdate ke database ~5

Form edit user sudah bisa digunakan, akan tetapi jika kamu mencoba untuk submit kamu akan mendapati blank page. Itu karena kita belum menulis kode untuk menangkap data dari form edit. Form edit mengirimkan data ke name route users.update alias path /users/{user} dengan method PUT, route tersebut menggunakan UserController@update untuk itu kita perlu edit action update tersebut.

Pertama, kita cari terlebih dahulu user yang akan diedit dengan kode ini:

$user = \App\User::findOrFail($id);

Lalu kita ubah nilai properti user di atas dengan nilai yang berasal dari form seperti ini:

1 2 3 4 5

1 2 3 4 5 6 7

1 2 3

$user->name = $request->get('name');

$user->roles = json_encode($request->get('roles'));

$user->address = $request->get('address');

$user->phone = $request->get('phone');

$user->status = $request->get('status');

Untuk field roles sebelum menyimpan ke database kita ubah dulu dari PHP Array menjadi JSON Array menggunakan fungsi json_encode() agar dapat disimpan ke database.

Lalu kita UserController@update kita tambahkan kode untuk menangkap

Setelah itu kita cek jika terdapat request bertipe file dengan nama 'avatar', kita handle file tersebut:

if($request->file('avatar')){

if(>avatar && file_exists(storage_path('app/public/' .

$user->avatar))){

\Storage::delete('public/'.$user->avatar);

}

$file = $request->file('avatar')->store('avatars', 'public');

$user->avatar = $file;

}

Jika terdapat file upload 'avatar' maka kita cek lagi, apakah user yang akan diedit ini memiliki file avatar dan apakah file tersebut ada di server kita, jika ada maka kita hapus file tersebut.

if(>avatar && file_exists(storage_path('app/public/' .

$user->avatar))){

\Storage::delete('public/'.$user->avatar);

}

Untuk menghapus file kita gunakan \Storage::delete() argument yang dimasukan adalah path relatif dari storage/app tidak perlu full path. Maka dari itu kita menggunakan 'public/' .

$user->avatar yang akan menghapus file di folder storage/app/public/avatars/fileavataruser.png misalnya.

Setelah itu kita simpan file yang diupload ke folder "avatars" seperti sebelumnya menggunakan method store() seperti ini:

$file = $request->file('avatar')->store('avatars', 'public');

Lalu kita set field 'avatar' user dengan path baru dari image yang diupload tadi

$user->avatar = $file;

Kemudian kita update ke database dengan method save() seperti ini:

$user->save();

Setelah itu kita redirect ke form edit user dengan status bahwa berhasil melakukan update dengan kode ini:

return redirect()->route('users.edit', [$id])->with('status', 'User succesfully updated');

Sehingga hasil akhir dari kode action UserController@update adalah seperti ini:

public function update(Request $request, $id) {

$user = \App\User::findOrFail($id);

$user->name = $request->get('name');

$user->roles = json_encode($request->get('roles'));

$user->address = $request->get('address');

$user->phone = $request->get('phone');

if(>avatar && file_exists(storage_path('app/public/' .

$user->avatar))){

\Storage::delete('public/'.$user->avatar);

$file = $request->file('avatar')->store('avatars', 'public');

$user->avatar = $file;

}

$user->save();

return redirect()->route('users.edit', [$id])->with('status', 'User succesfully updated');

}

Sekarang fitur edit user telah siap kita gunakan. Silahkan coba mengedit salah satu user yang ada.

Dalam dokumen Licensed to Riva Pebrian at 22/10/ :37:58. 1 of 343 (Halaman 170-180)