Menghapus Data

Jika semua tutorial berhasil di lewati dan sekarang adalah tutorial terakhir dari kelas ini, saya mengharapkan Anda untuk mendapatkan ilmu dan manfaat dari kelas ini. Pada tutorial ini Anda akan tetap bermain pada halaman utama atau berkas Index.vue, karena saya memisahkannya agar lebih mudah dipahami.

Daftar isi:

Langkah 1 - Tambahkan Skrip Index

Sekarang buatlah tombol Delete yang bisa Anda sesuaikan dengan skrip di bawah ini pada berkas Index.vue.

<td class="buttons">

    <!-- ... -->

    <a
        @click="deleteUser(user.id)"
        class="button is-small is-danger"
    >
        Delete
    </a>
</td>

Sedikit penjelasan kalau skrip diatas menggunakan event click dengan memberikan fungsinya atau bisa di kenal di Vue yaitu Method Event Handlers. Fungsi deleteUser() yang berisi parameter berupa nilai id dari data.

Selanjutkan Anda sesuaikan juga skrip di bawah ini untuk membuat fungsi deleteUser(). Saya juga sudah menambahkan notifikasi sebelum data di hapus, barang kali Anda salah pencet atau ingin membatalkan penghapusan data.

export default {
    // ...

    methods: {
        deleteUser(id) {
            if (!confirm('Are you sure to delete this user?')) {
                return;
            }

            this.$inertia.delete(this.route('users.destroy', id))
        }
    }
}

Langkah 2 - Menghapus Data

Selanjutnya Anda sesuaikan skrip di bawah ini pada berkas UserController.php yang mana akan memproses penghapusan data.

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

    $user->delete();

    $message = $user
        ? 'Successful, user deleted successfully.'
        : 'Failed, the user has not been deleted.';

    return redirect()
        ->route('users.index')
        ->with('message', $message);
}

Menggunakan find dan findOrFail itu berbeda yaaa!, apa sih bedanya? Kalau find jika id data tidak ada maka variabel $user akan mengembalikan nilai null, sedangkan findOrFail jika data tidak ada maka akan melemparkan kesalahan 404 yang saya ketahui hingga saat ini.

Terimakasih Anda sudah mengikuti tutorial ini dari awal hingga akhir 😊