Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

January 22, 2019

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

Membuat CRUD Expert & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP – PART 1 MENAMPILKAN DATA

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.min.js"></script>

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

Swal.fire('Ini adalah sweetalert Basic');

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

Swal.fire(
  'Ini adalah judulnya',
  'Ini adalah teksnya',
  'success'
)

Hasil :

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

Swal.fire({
  type: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  footer: '<a href="https://dewankomputer.com/">Why do I have this issue?</a>'
});

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

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

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 :

const swalWithBootstrapButtons = Swal.mixin({
  confirmButtonClass: 'btn btn-success',
  cancelButtonClass: 'btn btn-danger',
  buttonsStyling: false,
})

swalWithBootstrapButtons.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, cancel!',
  reverseButtons: true
}).then((result) => {
  if (result.value) {
    swalWithBootstrapButtons.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  } else if (
    result.dismiss === Swal.DismissReason.cancel
  ) {
    swalWithBootstrapButtons.fire(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

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 :

Swal.fire({
  title: '<strong>HTML <u>example</u></strong>',
  type: 'info',
  html:
    'You can use <b>bold text</b>, ' +
    '<a href="//github.com">links</a> ' +
    'and other HTML tags',
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText:
    '<i class="fa fa-thumbs-up"></i> Great!',
  confirmButtonAriaLabel: 'Thumbs up, great!',
  cancelButtonText:
    '<i class="fa fa-thumbs-down"></i>',
  cancelButtonAriaLabel: 'Thumbs down',
})

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 :

Swal.fire({
  title: 'Sweet!',
  text: 'Modal with a custom image.',
  imageUrl: 'https://unsplash.it/400/200',
  imageWidth: 400,
  imageHeight: 200,
  imageAlt: 'Custom image',
  animation: false
})

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

Swal.fire({
  title: 'Custom width, padding, background.',
  width: 600,
  padding: '3em',
  background: '#fff url(trees.png)',
  backdrop: `
    rgba(0,0,123,0.4)
    url("nyan-cat.gif")
    center left
    no-repeat
  `
})

Hasil :

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

Swal.mixin({
  input: 'text',
  confirmButtonText: 'Next &rarr;',
  showCancelButton: true,
  progressSteps: ['1', '2', '3']
}).queue([
  {
    title: 'Question 1',
    text: 'Chaining swal2 modals is easy'
  },
  'Question 2',
  'Question 3'
]).then((result) => {
  if (result.value) {
    Swal.fire({
      title: 'All done!',
      html:
        'Your answers: <pre><code>' +
          JSON.stringify(result.value) +
        '</code></pre>',
      confirmButtonText: 'Lovely!'
    })
  }
})

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

const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000
});

Toast.fire({
  type: 'success',
  title: 'Signed in successfully'
})

Hasil :

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

let timerInterval
Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in <strong></strong> seconds.',
  timer: 2000,
  onBeforeOpen: () => {
    Swal.showLoading()
    timerInterval = setInterval(() => {
      Swal.getContent().querySelector('strong')
        .textContent = Swal.getTimerLeft()
    }, 100)
  },
  onClose: () => {
    clearInterval(timerInterval)
  }
}).then((result) => {
  if (
    result.dismiss === Swal.DismissReason.timer
  ) {
    console.log('I was closed by the timer')
  }
})

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

Swal.fire({
  title: 'Custom animation with Animate.css',
  animation: false,
  customClass: 'animated tada'
})

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..