Iklan

Membuat Tombol Konfirmasi Hapus Dengan SweetAlert

Salam semua sahabat ngodingpak, kali ini saya akan membagikan tutor membuat tombol konfirmasi hapus dengan sweetalert

SweetAlert adalah plugin yang me replace tampilan bawaan dari alert asli javascript, pasti pada tau kan alert javascript itu apa ? itu loh yang tampilan nya kurang memuaskan. Mengapa kita ga ubah aja tampilannya sendiri ? Yang jadi permasalahannya adalah alert pada bawaan javascript sulit untuk diubah karena alert pada javascript tidak menggunakan element element HTML pada umumnnya dan kita juga bakal kesulitan untuk mengubah nya. Tampilan pada alert javasript juga akan berubah ubah sesuasi dengan browser nya dan css apa yang anda gunakan.


TERUS KITA BAKAL MAKE APA ?

SweetAlert adalah jawabannya. SweetAlert akan mengubah tampilan asli alert javascript menjadi tampilan yang menarik dan ber animasi

 CARA MENGGUNAKANNYA ?


  1. Downlaod dulu source code nya di https://lipis.github.io/bootstrap-sweetalert/
  2. Ekstrak hasil download 
  3. Buka folder dist 
  4. Ambil sweetalert.css dan sweetalert.min.js
  5. copy dan paste kan ke project yang akan kamu buat, dan jangan lupa bootstrap.css dan jQuery sudah ada di project kamu

Kita akan membuat tombol konfirmasi hapus sederhana menggunakan SweetAlert


Setelah sudah dicopy kan atau diketik silahkan ganti href dengan link yang akan kamu tuju

Saya akan jelaskan sedikit menganai kode diatas
Pada baris 18 : Jika tombol maka akan menjalankan sweealert
Pada baris 19 : Akan mengambil link dari href
Pada baris 27 : Jika anda mengklik tombol OK pada alert nya maka akan menghapus data

Kamu bisa memodifikasi dengan mengganti title, text. Masih banyak contoh contoh kode pada web https://lipis.github.io/bootstrap-sweetalert/

Ok, sekian dulu tutorial dari saya. Jika anda masih bingung atau error bisa tulis di kolom komentar dan bisa menghubungi saya. Terimakasih

3 Responses to "Membuat Tombol Konfirmasi Hapus Dengan SweetAlert"

  1. mau tanya kak, kalo setelah hapus dan datanya berhasil dihapus muncul notif sweetalertnya kalo data berhasil dihapus gimana ya caranya?

    BalasHapus
    Balasan
    1. itu bisa dilakuin pake ajax, jika data yang dikirimkan ada balikan sukses maka bisa tampilin sweetAlert nya

      Hapus
  2. Bro, gimana caranya biar di sweetalert munculin data yang di db? Misal di tabel A ada data "Alex". Jadi pas sweetalert muncul, keluar "Selamat datang Alex"

    BalasHapus