Cara Membuat Aplikasi TodoList Vue JS Part 10

02/01/2018    Ekky Ridyanto    646     Website

Halo teman teman semuanya kita masuk ketugas berikutnya yaitu cara menghapus data didatabase dengan library Vue Resource. Tentu biasanya yang sering kita lakukan dalam menghapus data yang kita inginkan adalah menghapus berdasarkan idnya karena kita tidak mau menghapus semua data kita mau spesifik id mana yang akan kita hapus. Jadi itu dia idenya. Maka dari itu kita akan mengirimkan todo.idnya didalam metode removeTodonya sebagai berikut

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part10-3-1-2017-1

Artinya ketika tombol linknya diklik maka kita akan memanggil metode removeTodo yang memiliki parameter id dari table todosnya. Jadi ada dua parameter didalam fungsi tersebut yang kita pisahkan dengan koma dan bila teman teman melakukan console log idnya seperti ini

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part10-3-1-2017-2

Jalankan lalu tekan tombol linknya maka dibagian console browsernya kita akan dapat hasil nilai id yang kita pilih atau id yang kita klik. Tentu sekarang kita sudah bisa melakukan request HTTP seperti sebelumnya didalam metode removeTodonya dengan menentukan URL -nya yang sama tapi dengan membawa variabel GET id dari nilai id_todonya seperti berikut

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part10-3-1-2017-3

Lalu akan ada method DELETE yang akan kita gunakan sebagai REQUEST METHOD nya. Bila tidak masalah kita akan sambungkan dengan metode then artinya jika success/berhasil dalam melakukan requestnya maka kita akan dapat hasil response dari server.

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part10-3-1-2017-4

Setelah itu kita akan menerima atau menampung nilainya didalam satu variabel. Tentu nilainya dari $_GET lalu nama keynya yaitu id.

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part10-3-1-2017-5

Kemudian sama seperti sebelumnya kita akan menjalankan perintah query DELETE dari table todosnya WHERE dimana idnya sesuai yang kita dapatkan.

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part10-3-1-2017-6

dan berikutnya bila hasil $result berhasil atau bernilai TRUE maka kita akan melakukan cetak tulisan atau pesan sebagai hasil responsenya

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part10-3-1-2017-7

Jadi teman teman sudah bisa mencoba menghapus salah satu list todosnya jika tidak ada kesalahan maka list todosnya akan berkurang atau terhapus. Oke bagus sekali tugas kita dalam menghapus data didatabase sudah berhasil. Pada bagian selanjutnya kita akan melakukan edit data tentu caranya hampir mirip. Jadi sampai jumpa pada artikel berikutnya. Terima kasih

Artikel, PHP, Javascript, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More