Mengedit Data Eloquent Laravel

Jangan heran jika tutorial ini sedikit ribet, karena saya memutuskan untuk menambahkan Javascript didalamnya. Hal ini saya lakukan untuk menambahkan opsi untuk memilih ganti kata sandi atau tetap menggunakan sandi yang sebelumnya. Jangan lupa gunakan rumus ATM (Amati Tiru Modifikasi) yaaa! 😁.

Daftar isi:

1. Menampilkan data user

Silakan buka berkas UserController.php dan sesuaikan skrip dibawah ini, skrip ini digunakan untuk menampilkan data pengguna yang akan di edit. Dimana-mana pasti menampilkan data user dulu baru akan melihat hal apa saja yang perlu melakukan perubahan data pengguna atau tidak.

public function edit($id)
{
    $user = User::findOrFail($id);

    return view('users.edit', compact('user'));
}

Catatan: Jika Anda pernah mendengar menggunakan metode find() bukan berarti Anda tidak boleh untuk menggunakan metode tersebut. Bedanya metode findOrFail() ketika id pengguna tidak ketemu maka akan menampilkan halaman 404 (atau halaman tidak ditemukan).

2. Skrip edit.blade.php

Buatlah berkas edit.blade.php pada direktori users kemudian salin dan tempelkan skrip dibawah ini:

@extends('layouts.default', [
    'title' => 'Edit user'
])

@section('content')
<div class="level">
    <div class="level-left">
        <div class="level-item">
            <h1 class="title is-4">Edit user</h1>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <a href="#" class="button is-light">Detail</a>
        </div>
        <div class="level-item">
            <a href="{{ route('users.index') }}" class="button is-light">Kembali</a>
        </div>
    </div>
</div>

<hr>

<form action="#" method="post">
    @csrf
    @method('PUT')
    
    <div class="field">
        <label for="name" class="label">Nama Lengkap</label>
        <div class="control">
            <input type="text" name="name" id="name" class="input" value="{{ old('name') }}">
        </div>
    </div>

    <div class="field">
        <label for="email" class="label">Alamat E-Mail</label>
        <div class="control">
            <input type="email" name="email" id="email" class="input" value="{{ old('email') }}">
        </div>
    </div>

    <div class="field">
        <label for="password" class="label">Kata Sandi</label>
        <div class="control">
            <input type="password" name="password" id="password" class="input">
        </div>
    </div>

    <div class="field">
        <label for="password_confirmation" class="label">Konfirgurasi Kata Sandi</label>
        <div class="control">
            <input type="password" name="password_confirmation" id="password_confirmation" class="input">
        </div>
    </div>

    <div class="field">
        <button type="submit" class="button is-success">Simpan Perubahan</button>
    </div>

</form>
@endsection

3. Perbarui skrip blade

Silakan untuk melakukan beberapa konfirgurasi perubahan skrip di beberapa berkas yang ada.

Perbarui skrip berkas index.blade.php

<a href="#" class="button is-small is-info">Edit</a>
// menjadi
<a href="{{ route('users.edit', $user->id) }}" class="button is-small is-info">Edit</a>

Perbarui skrip edit.blade.php

<form action="#" method="post">
// menjadi
<form action="{{ route('users.update', $user->id) }}" method="post">

Catatan: nama rute users.update akan di ahlikan pada fungsi update() yang mewajibkan memberikan parameter id user yang akan diperbarui datanya.

Perbarui skrip edit.blade.php

old('name') /* menjadi */ old('name', $user->name)
old('email') /* menjadi */ old('email', $user->email)

Catatan: Hal ini dilakukan karena argumen kedua adalah nilai bawaan, jadi nilai bawaanya di sesuaikan dengan data pengguna.

Catatan: Khusus buat kata sandi tidak perlu dikeluarkan nilainya dan tidak akan bisa ditampilkan dengan bentuk asli kata sandi.

4. Opsi tidak ganti kata sandi

Tahapan ini mohon diperhatikan agar opsi ini berjalan dengan baik, silakan ikuti tahapan berikut:

Perbarui skrip edit.blade.php

Silakan ganti bagian kata sandi dengan menambahkan skrip ini sebagai gantinya, skrip dibawah sudah di modifikasi untuk opsi yang telah ditentukan.

<div class="field">
    <label class="checkbox">
        <input type="checkbox" id="onCheckbox" onclick="clickPassword()">
        Tidak ganti kata sandi
    </label>
</div>

<div class="field" id="hiddenpassword">
    <div class="field">
        <label for="password" class="label">Kata Sandi</label>
        <div class="control">
            <input type="password" name="password" id="password" class="input">
        </div>
    </div>

    <div class="field">
        <label for="password_confirmation" class="label">Konfirgurasi Kata Sandi</label>
        <div class="control">
            <input type="password" name="password_confirmation" id="password_confirmation" class="input">
        </div>
    </div>
</div>

Lihat gambar dibawah ini agar lebih jelas dimana skrip akan digunakan:

gambar 1

Tambahkan skrip edit.blade.php

Tambahkan skrip dibawah ini sebagai baris baru dan kode skrip ini akan digunakan untuk menampilkan dan menyembunyikan input.

@section('script')
<script>
    function clickPassword() {
        var checkBox = document.getElementById("onCheckbox");
        var hidden = document.getElementById("hiddenpassword");

        if (!checkBox.checked){
            hidden.style.display = "block";
        } else {
            hidden.style.display = "none";
        }
    }
</script>
@endsection

5. Memproses edit data user

Sekarang waktunya untuk menambahkan skrip ini pada berkas UserController.php pada fungsi update():

public function update(Request $request, $id)
{
    $user = User::findOrFail($id);

    if (is_null($request->password)) {
        $request->replace($request->except(['password']));
    }

    $user->update($request->all());

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

Perlu diketahui jika variabel password bernilai kosong maka akan menghapus variabel password dari request. Maka hasil dari $request->all() akan menampilkan semua variabel kecuali password. Bagaimana jika password terdapat nilai? maka penghapuskan variabel akan di abaikan.

Catatan: Proses password hash ada pada tutorial Menambahkan Data Eloquent Laravel

Selamat bagi Anda telah sampai pada tutorial ini dan selanjutnya masih ada beberapa tutorial yang menarik yang pastinya akan di bahas.