Hal yang juga sangat mendasar untuk membuat aplikasi adalah adanya fungsi edit dan hapus data, dalam catatan kali ini akan di tulis sebuah cara untuk mengganti dan menghapus data menggunakan Single Page Application (SPA) atau satu halaman tunggal melalu Laravel dan Vue JS, sekaligus melanjutkan catatan kemarin tentang menambah data yang juga mengguanakan SPA Laravel dan Vue JS. bagaimana caranya yuk ikuti tahapan langkah-langkah dari catatan berikut ini.
Baca Sebelumnya:
buka kembali file Items.vue
lalu tambahkan 1 buah tombol pada form yaitu tombol Edit Item, yang apabila di klik akan menjalankan fungsi editItem dengan membawa sebuah id yang kegunaanya untuk mengedit data.
kemudian pada tabel tambahkan 2 buah aksi yaitu berupa tombol edit dan remove tombol edit berguna untuk menampilkan data yang akan di edit pada form. dan tombol remove untuk menghapus data dengan menjalankan fungsi removeItem dengan membawa id dari item yang akan dihapus.
dan juga tambahkan juga beberapa fungsi-fungsi seperti berikut ini dan letakan ditempat yang tepat.
berikut ini script lengkap dari Items.vue
maka tampilan dari form dan table adalah seperti ini
dan apabila tombol Edit di tekan disalah satu data, maka datanya akan ditampilkan pada form dan tombol Add New Item akan berubah menjadi Edit Item yang berfungsi untuk mengganti data.
selanjutnya pada Router file api.php
tambahkan route-route berikut ini.
berikut ini file router api.php script lengkapnya
dan yang terakhir buka file ItemController.php
tambahkan ketiga fungsi berikut ini yaitu untuk menampilkan data ke form, mengedit data dan menghapus data.
berikut ini script lengkap dari file ItemController.php
setelah selesai menyematkan kode-kode diatas, jalankan aplikasi pada browser maka hasilnya akan seperti video dibawah ini.
Baca Selanjutnya:
Tidak ada komentar:
Posting Komentar