Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP – Pada postingan kali ini saya akan membahas tentang SweetAlert atau dialog custom karena dalam pembuatan aplikasi jika menggunakan alert bawaan tentunya akan sangat membosankan dan terkesan jadul. SweetAlert yang saya gunakan adalah SweetAlert2 karena tentunya kalo membuat sebuah aplikasi terutama di dunia nyata sobat selalu diminta untuk menggunakan versi yang paling baru jadi makanya saya langsung saja ke SweetAlert2 saja. Oleh karena itu sobat bisa menyesuaikannya saja. Ada banyak macam sweetalert yang bisa digunakan dan kebanyakan saya mengambil dari website resminya.

Baca juga :

Membuat Bootstrap Modal dan Animasinya pada PHP

Cara Membuat SweetAlert

Karena saya tidak suka basa basi maka langsung saja saya berikan contoh penggunaan sweetalert. Caranya adalah :

1. Pertama yaitu memasukkan library boostrap, sweetalert, dan fontawesome pada tag <head> seperti contoh dibawah

 

2. Kemudian tambahkan juga library javascriptnya pada tag <body> seperti contoh dibawah

Karena untuk keperluan demo maka saya menggunakan librari online. Jika untuk kepentingan development tentunya sobat harus mendownloadnya terlebih dahulu dan ganti src=”” ke path file tempat sobat menyimpannya atau sobat bisa melihatnya dengan download project di akhir tutorial.

 

3. Kemudian pada tag <body> paling bawah tambah <script type=”text/javascript”></script> dan isikan contoh

maka akan menghasilkan

Macam-macam SweerAlert

1. Icon dan Text – ada 5 macam icon pada sweetalert2 ini yaitu success, error, warning, info, question. Gambarnya adalah sebagai berikut

Cara menggunakannya adalah pada tag javascript tadi isikan dengan kode dibawah

Hasil :

 

2. SweetAlert dengan Footer – cara membuat sweetalert dengan footer adalah sebagai berikut

Hasil :

 

3. SweetAlert Confirm Dialog – sweetalert ini biasa digunakan untuk meyakinkan usernya dan terdapat 2 pilihan nantinya yaitu yes or no. Biasanya digunakan saat akan menghapus sebuah file atau saat akan logout. Jika klik No/Cancel maka tidak terjadi apa-apa namun jika klik yes nanti akan muncul dialog lagi. Cara membuat sweeralert confirm dialog adalah sebagai berikut

Hasil :

Jika klik Yes maka akan muncul

 

4. SweetAlert Custom Confirm Dialog – sweetalert ini hampir sama seperti diatas namun pada sweetalert ini kita bisa custom menggunakan tombol bootstrap. Jika klik No maka akan muncul dialog lagi dan jika klik yes maka juga akan muncul dialog. Cara penggunaannya adalah sebagai berikut :

Hasil :

Jika klik No, cancel!

Jika klik Yes, delete it!

 

5. SweetAlert dengan Custom HTML – Sweetalert ini isinya dibuat menggukan HTML jadi akan lebih mudah untuk customnya. Cara membuatnya adalah sebagai berikut :

Hasil :

 

6. SweetAlert dengan Gambar – Sebenarnya ini sama saja dengan sweetalert icon dan text namun pada sweetalert ini kita membuatnya dengan gambar custom jadi sobat nanti bisa menggantinya dengan gambar apa saja. Cara penggunaannya adalah sebagai berikut :

Hasil :

 

7. SweetAlert dengan Gambar dan Backdrop Custom – pada sweetalert ini bisa mengganti background pada dialog box dan juga pada backdrop tentunya. Cara penggunaannya adalah sebagai berikut

Hasil :

 

8. SweetAlert Chain – Sweetalert ini merupakan dialog yang saling berhubungan dengan kita mengklik next, cara penggunaannya adalah sebagai berikut

Hasil :

 

9. Mixin – Sweetalert yang satu ini merupakan dialog kecil yang posisinya bisa diubah dimana saja. Dialog ini mirip dengan alert pada bootstrap. Untuk posisi bisa top, bottom, top-end, top-start, bottom-end, bottom-start, cara penggunaannya

Hasil :

 

10. Timer – Dialog akan secara otomatis tertutup sesuai waktu yang telah ditentukan. Cara membuat sweetalert timer adalah sebagai berikut :

Untuk jenisnya sebenarnya bisa seweetaler apa saja hanya saja ditambah timer:1500 (untuk mengganti lamanya ganti angka 1500).

Hasil :

 

11. SweetAlert + Animate.css – tidak hanya modal saja yang bisa dipadukan dengan animate.css, sweetalert juga bisa lhoo…. cara membuat sweetalert dengan animasi adalah sebagai berikut

Untuk jenis dialog bisa yang mana saja hanya saja ditambah customClass: ‘animated tada’ dengan kata lain kita membuat menggukan animasi yang mempunyai class .tada pada animate.css. Untuk macam-macam animasinya sobat bisa lihat pada demonya.

Itu hanya sedikit dari jenis sweetalert karena sobat bisa custom den gabung-gabungkan sesuai keinginan dan kebutuhan sobat. Cara diatas saya ambil dari website resminya. Jika sobat ingin melihatnya lebih banyak maka sobat bisa melihat disini.

Bagaimana mudah bukan? namun cara diatas hanya menampilkannya saja. Jika penggunaan yang dipadukan dengan form maka sobat bisa lihat pada postingan saja yang lain. Sekian postingan saya tentang Cara Membuat SweetAlert dan Macam-macamnya pada PHP. Jika ada salah saya mohon maaf dan apabila sobat mempunyai pertanyaan maka bisa sobat tinggalkan pada kolom komentar dibawah.

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

7 thoughts on “Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

  1. Bang, cara menerapkan codingnya ke php, gimana ya, kalo cuman gitu doang mah, saya bisa liat langsung ke sweetalertnya, kirain disini ada cara nerapkan gitu ke project php

    1. pakai Ajax mas,
      Sepertinya blum pernah saya posting CRUD yang pake sweetalert karena masih blum sempet
      contoh ajaxnya :
      let formData = new FormData();
      formData.append(‘id’, id);
      formData.append(‘nama_kelurahan’, nama_kelurahan);

      $.ajax({
      type: ‘POST’,
      url: “/tambah_kelurahan.php”,
      data: formData,
      cache: false,
      processData: false,
      contentType: false,
      beforeSend: () => {
      Swal.fire({
      html: ‘Proses…’,
      onBeforeOpen: () => {
      Swal.showLoading()
      },
      allowOutsideClick: () => !Swal.isLoading()
      });
      },
      success: function(hasil) {
      Swal.fire({
      title: “Berhasil”,
      text: “Data Berhasil Disimpan”,
      type: “success”
      }).then(function() {
      $(‘#tabelData’).DataTable().ajax.reload();
      });
      },
      error: function (hasil) {
      console.log(hasil.responseText)
      Swal.fire(“Kesalahan pada Sistem”, “”, “error”);
      }
      });

Leave a Reply

Your email address will not be published. Required fields are marked *

seventeen − 14 =