Cara Mudah Mempercantik Alert javascript Dengan Sweet Alert

Disaat kalian sedang membuat sebuah project untuk client pasti kalian pernah membuat sebuah notifikasi peringatan dengan menggunakan javascript atau jquery secara default untuk memberikan informasi bahwa terjadi suatu kesalahan, peringatan ataupun perintah lainnya, cara paling mudah yang sering dilakukan adalah dengan menuliskan script alert(‘Terjadi kesalahan ..!’);

Percantik Alert javascript Dengan Sweet Alert

Dari segi tampilannya menurut saya standar, namun kadang tiap browser akan berbeda-beda hasilnya, jika kalian sudah terbiasa menggunakan Bootstrap mungkin akan sedikit lebih menarik dengan menampilkan modal sebagai notifikasi peringatan. tetapi pada tutorial ini saya akan menggunakan plugin SweetAlert2 untuk menampilkan pesan peringatan agar lebih interaktif dengan para user. untuk tutorialnya kalian bisa mengikuti langkah-langkah di bawah ini:

Langkah-langkah Mempercantik Alert javascript Menggunakan Sweet Alert

1. Download SweetAlert2 Plugin

2 Extract plugin SweetAlert ke folder project kalian masing-masing.

3. Lalu kalian buatlah script seperti di bawah ini.

<html>
<head>
<title>Page Loading</title>
   <link rel="stylesheet" href="sweetalert2.min.css" />
   <script src="jquery-2.2.3.min.js"></script>
   <script src="sweetalert2.min.js"></script>
</head>
<body>
 <button type="button" id="alert1">Alert 1</button>
 <button type="button" id="alert2">Alert 2</button>
 <button type="button" id="alert3">Alert 3</button>
 <button type="button" id="alert4">Alert 4</button>
 <button type="button" id="alert5">Alert 5</button>
 <button type="button" id="alert6">Alert 6</button>
</body>
</html>

4. Lalu kalian buat config untuk tampilan alert nya.

$('#alert1').click(function() {
 swal('Hello saya menggunakan SweetAlert plugin js')
});

$('#alert2').click(function() {
 swal(
   'Apa itu SweetAlert?',
   'Sebuah plugin js untuk merpercantik Notifikasi Alert',
   'question'
 ) 
}); 

$('#alert3').click(function() {
 swal(
   'Good job!',
   'Pilihan anda benar!',
   'success'
 ) 
}); 

$('#alert4').click(function() {
 swal({
   title: 'Automotasi Exit Alert!',
   text: 'Saya akan close setelah 2 detik.',
   timer: 2000
 }).then(
   function () {},
   function (dismiss) {
  if (dismiss === 'timer') {
    console.log('I was closed by the timer')
  }
   }
 ) 
}); 

$('#alert5').click(function() {
 swal({
   title: 'HTML example',
   type: 'info',
   html:
  'Anda bisa menggunakan Tag HTML seperti bold text, ' +
  'links ' +
  'dan HTML Tag lainnya',
   showCloseButton: true,
   showCancelButton: true,
   confirmButtonText:
  ' Great!',
   cancelButtonText:
  ''
 }) 
}); 

$('#alert6').click(function() {
 swal({
   title: 'Apakah anda yakin?',
   text: "Anda akan keluar dari Form ini!",
   type: 'warning',
   showCancelButton: true,
   confirmButtonColor: '#3085d6',
   cancelButtonColor: '#d33',
   confirmButtonText: 'Yes ',
   cancelButtonText: 'No',
   confirmButtonClass: 'btn btn-success',
   cancelButtonClass: 'btn btn-danger',
   buttonsStyling: false
 }).then(function () {
   swal(
  'Logout!',
  'Anda telah berhasil logout.',
  'success'
   )
 }, function (dismiss) {
   if (dismiss === 'cancel') {
  swal(
    'Cancelled',
    'Anda tidak dapat logout :)',
    'error'
  )
   }
 })
});

5. Jika sudah coba jalankan dan bila berhasil maka tampilannya akan seperti berikut.

Cukup mudah bukan prosesnya dan hasilnya pun sangat menarik sekali. Kalian bisa menggunakan plugin ini sesuai kebutuhan kalian masing-masing, Karena plugin ini berlisensi MIT License anda bisa menggunakannya untuk web komersil kalian.

Semoga Bermanfaat