animasi hapus data menggunakan jQuery

   
penjelasan singkat mengenai postingan ini yaitu:
  1. postingan ini membahas sedikit penerapan ajax menggunakan jQuery.
  2. postingan ini juga akan membahas tentang bagaimana menambahkan animasi (fadeOut) pada aksi hapus data.
  3. script yang dibahas disini sangat mungkin untuk di percantik menggunakan lightbox untuk konfirmasi deletenya. contoh plugin yang bisa dipakai yaitu: thickbox, facebox, fancybox dan lainnya.

masuk pada sesi pembahasan, persiapan yang harus dilakukan yaitu:
  1. download jQuery.
  2. buat database dan tabel, kita pakai contoh untuk tabel user.
  3. buat file index.php, ini adalah file untuk menampilkan data dari database.
  4. buat file koneksi.php untuk koneksi ke database (mysql).
  5. buat file hapus.php untuk query penghapusan data.
 sedikit penjelasan untuk potongan script pada file index.php

  1. pada kotak yang berwarna hijau adalah syntax untuk menentukan id pada komponen tabel (tr), yang nantinya akan digunakan untuk memilih (tr) mana yang akan di berikan efek fadeOut().
  2. pada kotak yang berwarna merah itu adalah syntax untuk memanggil fungsi javascript "hapus", dimana fungsi hapus itu akan diberi nilai, nilai disini adalah nilai id user (idUser) yang ada pada tabel user dan tentunya nilai ini pula harus unik.
pejelasan pada gambar kedua:
  1. kotak yang berwarna hijau itu adalah syntax untuk menentukan file .php mana yang akan digunakan untuk melakukan query penghapusan data. sedangkan idDelete itu adalah nama yang akan dikirimkan ke file tersebut.
  2. kotak yang berwarna biru itu adalah fungsi/function response bawaan jQuery, fungsi ini berfungsi untuk mengembalikan nilai yang ada pada hasil pengiriman data. 
  3. Jika response berupa teks/kata 'sukses' maka 'tr' yang mempunyai id tersebut akan disisipkan background warna merah(#ffebe8). selanjutnya id tersebut pula akan diberikan efek fadeOut(). Jika response memberikan nilai/teks selain sukses, maka akan tampil peringatan 'Delete gagal!'
Mudah bukan? untuk atachment script ini belum sempat saya upload, inti dari script ini yaitu penggunaan ajax, .css() dan .fadeOut() pada jquery. lebih dari itu untuk query hapus data ya mesti menggunakan bahasa pada sisi server seperti php.

sudah dulu akh, mau mandi, bau euy!

Post Terkait animasi hapus data menggunakan jQuery

Popular Posts