CARA MENGGUNAKAN SWEET ALERT 2

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

Ditutorial ini akan berbagi cara menggunakan sweet alert, mungkin tidak selengkap dokumentasinya, saya hanya menampilkan sweet alert sesuai dengan kebutuhan saya saja, dimana sweet alert yang saya gunakan yaitu saat user berhasil menyimpan data atau menghapus data

maka sweet alert akan muncul, karena alert yang biasa sudah saya rasa membosankan, saya menggunakan sweet alert. dan berikut langkah-langkah nya.

Sebelum koding atau copy paste script sweet alert nya baik dari blok ini atau pun langsung dari situs resmi sweet alert anda harus memasukkan link css atau lin js yang disediakan oleh sweet alert. Berikut link nya jika ingin secara online :

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Kalian bisa download sweet alert melalui npm juga npm install sweetalert2 , setelah selesai download nya kalian bisa pindah sweet alert nya ke dalam projek anda atau ke folder yang inginkan. lalu panggi seewt alertnya dengan kode yang biasa kalian lakukan contoh seperti ini :

<script src="sweetalert2.all.min.js"></script>

letakkan kode sweet alert diatas sendiri atau dibawah sendiri dari script anda.

Selanjutnya adalah cara menggunakan sweet alert yang mungkin akan biasa diguanakan seperti contoh diatas yang sudah saya sebutkan, dimana sweet alert akan muncul jika aplikasi telah berhasil menyimpan, mengubah data atau menghapus data.

Berikut ini hanya contoh dari kode sweet alert yang sederhana. Kalian bisa mengembangakannya sendiri.

<button class="btn btn-warning" onclick="warning()">Sweet Alert Warning</button>
 
<script type="text/javascript">
 
    function warning(){
        Swal.fire({
          position: 'center',
          icon: 'warning',
          title: 'Data Tidak Terdaftar',
          showConfirmButton: true,
          confirmButtonColor: '#3085d6'
        })  
    }
</script>

Hasilnya akan seperti gambar dibawah, dimana saat menekan tombol nya sweet alert akan menampilkan alert atau notif seperti gambar dibawah ini.

Sekarang kita coba sweet alert yang lain, seperti saat user menekan tombol delete maka akan sweet alert akan menampilkan notif persetujuan terlebih dahulu. berikut script pada sweet alert nya :

<button class="btn btn-danger" onclick="deleted()">Sweet Alert Warning</button><br>
 
<script type="text/javascript">
    function deleted(){
        Swal.fire({
          title: 'Apakah Anda Yakin ?',
          text: "Data Anda Tidak Dapat di Kembalikan ..",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Ya, Hapus Data ini!',
          cancelButtonText: 'Tidak..',
        }).then((result) => {
          if (result.isConfirmed) {
            Swal.fire(
              'Deleted!',
              'Berhasil Dihapus.',
              'success'
            )
          }else{
            Swal.fire(
              'Warning..!',
              'Gagal Dihapus.',
              'warning'
            )             
          }
        })      
    }
</script>

script sweet alert diatas akan menampilkan seperti gambar dibawah ini :

jika user memilih tombol Ya Hapus Data ini! maka sweet alert akan menampilkan notif lagi serperti gambar dibawah ini :

Jika user memilih tombol Tidak maka sweet alert akan menampilkan notif lagi seperti gambar dibawah ini.

Terima Kasih
Thank's

TAG TAGS :

sweet alert || sweetalert || cara menggunakan sweet alert || how to use sweet alert in php || sweet alert bahasa indonesia || sweetalert2 || how to custom sweet alert || how to custom color button confirm sweet alert || how to custom color button cancel in sweet alert langsungkoding.blogspot.com | langsungkoding |

BACA JUGA :

• C.R.U.D AJAX dengan php

SOURCE :

- https://sweetalert2.github.io/#examples