Menghapus Data Laravel dan Vue.js

Pada tutorial ini sedikit berbeda karena Anda harus menginstal paket yang dimana paket tersebut untuk membuat konfigurasi notifikasi sebelum melakukan penghapusan data pengguna.

Daftar isi:

Instal paket

Paket tersebut ialah sweetalert2 yang bisa Anda pelajari secara mandiri, silakan instal paket sweetalert2 lewat terminal Anda.

npm install sweetalert2

atau bisa menggunakan yarn:

yarn add sweetalert2

Mengimpor paket

Berikut ini cara mengimpor paket sweetalert2 pada Vue, silakan tambahkan skrip dibawah ini di berkas index.vue.

import Swal from 'sweetalert2'

Lihat gambar dibawah ini biar lebih jelas.

gambar 1

Menambahkan fungsi baru

Tambahkan skrip dibawah ini di bagian method berkas index.vue.

clickDelete(id) {
    Swal.fire({
        icon: 'warning',
        title: 'Peringatan',
        text: 'Apakah Anda yakin ingin menghapus data tersebur?',
        showCancelButton: true,
        confirmButtonText: 'Saya yakin!',
        cancelButtonText: 'Tidak'
    }).then((result) => {
        if (result.isConfirmed) {
            axios.delete(`/api/users/${id}`)
            .then(() => {
                Swal.fire(
                    'Pemberitahuan!',
                    'Anda telah berhasil menghapus data yang dipilih!',
                    'success'
                )
            })
            .finally(() => {
                this.fetchData()
            })
        }
    })
}

Saya sudah membuat beberapa konfigurasi seperti skrip diatas untuk memperindah tampilan notifikasi validasi sebelum melakukan penghapusan data pengguna. Anda bisa mengubahnya sesuka Anda dengan kata-kata yang disukai. Perlu diketahui juga kalau setelah penghapusan berhasil akan menampilkan notifikasi bawasannya penghapusan berhasil dilakukan.

Catatan: Kalau Anda melakukan penghapusan data pengguna dan berhasil maka akan melakukan penyegaran data dengan memanggial fungsi fetchData() pada metode finally.

Lihat gambar berikut:

gambar 2

Sisipkan skrip tombol

Sebelumnya pada tabel tidak ada tombol hapus dan sekarang Anda harus menambahkannya seperti skrip dibawah ini atau lihat gambar dibawah dimana skrip ini disisipkan.

<a @click="clickDelete(user.id)" class="button is-small is-rounded is-danger">Hapus</a>

Jadi ketika Anda mengklik tombol hapus maka akan memanggil fungsi clickDelete() yang memiliki parameter untuk menyisipkan id pengguna yang akan dihapus.

Lihat gambar berikut:

gambar 3

Menghapus pengguna

Tambahkan juga skrip dibawah ini pada berkas UserController.php, skrip ini digunakan untuk menghapus pengguna berdasarkan id pengguna yang akan dihapus. Lalu mengembalikan data pengguna pada REST API yang telah ditetapkan.

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

    $user->delete();

    return response()->json($user);
}

Sekarang Anda bisa melihat hasilnya seperti gambar dibawah ini dan bagaimana pun ini merupakan hasil yang cukup baik yang bisa Anda pelajari dari sekarang.

hasil

Maka dari sini Anda sudah berhasil membuat CRUD Laravel dan Vue.js adapun tutorial yang akan mendatang adalah tutorial bonus yang bisa Anda manfaatkan.