Membuat Javascript Alert : SweetAlert

Pada tutorial kali ini kita akan membahas lagi mengenai Javascript, khususnya pada utilitasnya yaitu Alert(). Alert pada javascript merupakan salah satu fitur yang banyak digunakan untuk menampilkan pesan interaktif kepada pembaca atau pengunjung situs. Alert yang biasa atau bawaan javascript merupakan alert sederhana dan klasik yang tampilannya masih kaku dan terntunya akan memperngaruhi user experience pengunjung.

Pernahkah teman teman melihat situs dengan alert yang mempunyai animasi yang bagus dan smooth ?, Ya kita dapat menggunakan beberapa pilihan yaitu:

Membuat alert sendiri dari awal
Menggunakan modal dari bootstrap
Menggunakan libarry alert pihak ke tiga
dan masih banyak lainnya

Dari semua cara membuat alert yang lebih bagus tampilannya maka cara e tiga yang akan kita praktekkan dalam tutorial kali ini yaitu menggunakan library pihak ke tiga . Dalam hal ini library yang akan kita gunakan adalah library SweetAlert.js.

Section Artikel

1 Pendahuluan
- 1.1 Instalasi
2 Cara pengunaan

Pendahuluan

SweetAlert merupakan salah satu library js pihak ketiga yang banyak digunakan pada situs untuk mempercantik poup atau alert dari JavaScript. SweetAlert atau swal memberikan banyak kemudahan dalam menggunakan nya yaitu hanya dengan membuat kode singkat yang mirip dengan alert bawaan dari javascript. Dalam sweetAlert terdapat berbagai alert yang dapat kita gunakan seperti alert biasa, alert konfirmasi, success alert, eror alert, dan lain-lain.

Instalasi

Untuk melakkan instalasi pada library SweetAlert kita dapat melakukan dengan 3 cara yaitu:

Melaui npm / yarn

Dengan menulisakan perintah npm install sweetalert --save

Library online CDN

Kita juga dapat menemukan SweetAlert pada unpkg dan jsDelivr, kemudian menggunakan variabel global swal untuk memanggilnya

Download manual

Untuk mendownload manual silahkan kunjungi halaman berikut SweetAlert Manual. Kemudian masukkan library ke halaman yang akan diberi alert dengan mengimport atau memasukkan alamat folder sebelum tag ></head>. Ukuran file nya kurang dari 110KB, jadi sangat ringan sekali.

Cara pengunaan

Selanjutnya, setelah kita mengetahui apa itu SweetAlert dan bagaimana cara penginstalan nya. Maka pada bagian ini akan membahas mengenai cara penggunaannya. Cara penggunaannya sangat sederhana yaitu dengan terlebih dahulu HARUS sudah menginstal library SweetAlert nya (untuk loading situs cepat pakai yang manual, kalau teman – teman tidak mau yang ribet pakai yang online CDN).

Ada banyak jenis alert yang dapat kita gunakan seperti beberapa contoh dibawah ini:

Alert Biasa

Pada alert default yang dimiliki asli jacascript kita memanggilnya dengan menggunakan Alert("ini alert"). Untuk membuat alert biasa yang berfungsi untuk memberikan informasi umum maka dengan SweetAlert kita mennggunakan perintah swal("ini Alert").

Dalam SweetAlert juga dapat diberi judul yaitu dengan menggunakan 2 aergumen perintah swal("judul","isi").

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
	<!--library alert --> 
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    
    <title>Contoh SweetAlert</title>
  </head>
  <body>
    <h1>Contoh Alert</h1>
    <div class="row">
      <div class="col-sm-5 text-center">
        Ini alert menggunakan SweetAlert       <button
            class="btn btn-primary sweet-1"
            onclick="swal ( 'Hai ini SweetAlert')"
          >
            Klik Aku
          </button>
        <br>
         Ini alert menggunakan bawaan JS <button
            class="btn btn-primary sweet-1"
            onclick="alert ( 'Hai ini alert biasa')"
          >
            Klik Aku
          </button>
        <br>
         Ini alert menggunakan 2 argumen  <button
            class="btn btn-primary sweet-1"
            onclick="swal ( 'Ini judul','Hai ini alert biasa dengan judul')"
          >
            Klik Aku
          </button>
        
      </div>
    </div>
  </body>
</html>

Di contoh program saya menggunakan satu tanda petik pada swal ( 'Ini judul','Hai ini alert biasa dengan judul') berbeda dengan swal("judul","isi"), mengapa hal ini bisa demikian ? karena saya menggunakan Inline JavaScript sehingga petik dua (“) harus diganti petik satu (‘) agar tidak terjadi eror atau crash dengan attribute HTML.

Kontektual SweetAlert

Yang dimaksud kontektual SweetAlert disini adalah alert yang mengandung suatu makna tertantu, seperti

alert sukses yang menyatakan kesuksesan pengerjaan suatu proses, dengan perintah dasar swal("judul", "pesan", "success")
alert eror yang menyatakan eror, dengan perintah dasar swal("judul", "pesan", "error");
alert warning yang menyatakan peringatan terhadap suatu tindakan, dengan perintah dasar swal("judul", "pesan", "warning");
alert info yang digunakan untuk menampilkan suatu informasi, dengan perintah dasar swal("judul", "pesan", "info");

contoh program dengan SweetAlert adalah:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
	<!--library alert --> 
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    
    <title>Contoh SweetAlert</title>
  </head>
  <body>
    <div class="container" style="width:500px;height:500px;">
    <h1>Contoh Alert</h1>
      <div class="row text-center">
        Ini alert Sukses:  <button class="btn btn-primary sweet-1" onclick="swal ( 'Berhasil','Hai ini SweetAlert sukses','success')" >
            Klik Aku
          </button>
      </div><br>
      <div class="row text-center">
        Ini alert Eror:  <button class="btn btn-primary sweet-1" onclick="swal ( 'Oops','Hai ini SweetAlert eror','error')" >
            Klik Aku
          </button>
      </div><br>
      <div class="row text-center">
        Ini alert warning:  <button class="btn btn-primary sweet-1" onclick="swal ( 'Peringatan','Hai ini SweetAlert warning','warning')" >
            Klik Aku
          </button>
      </div><br>
      <div class="row text-center">
        Ini alert Info:  <button class="btn btn-primary sweet-1" onclick="swal ( 'Pemberitahun','Hai ini SweetAlert Info','info')" >
            Klik Aku
          </button>
      </div>
    </div>
  </body>
</html>

Custom Alert

Selain membuat jenis alert seperti sebelumnya kita juga dapat membuat alert dengan kreasi kita sendiri, seperti menambahkan button atau memuat laert konfirmasi penghapusan sebuah file.

Langsung saja kita praktekkan.

Custom Button

Untuk melakukan hal ini kita hanya perlu menambahkan beberapa parameter seperti

swal({ title: "Ini judil", text: "Ini pesan", icon: "success", button: "text button",});

atau bisa juga kita padukan dengan kontektual alert sebelumnya seperti

swal("Berhasil!", "Ini berhasil bos ku", "success", {  button: "yoHo!",});

contoh programnya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
	<!--library alert --> 
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    
    <title>Contoh SweetAlert</title>
  </head>
  <body>
    <div class="container" style="width:500px;height:500px;">
    <h1>Contoh Alert</h1>
      <div class="row text-center">
        Ini alert Sukses dengan kustom button: <br> <button class="btn btn-primary sweet-1" onclick="swal({title:'Ini judul',  text: 'Ini pesan',  icon: 'success',  button: 'text button'})" >
            Klik Aku
          </button>
      </div><br>
      <div class="row text-center">
        Ini kontektual alert Sukses dengan kustom button: <br>  <button class="btn btn-primary sweet-1" onclick="swal('Berhasil!', 'Ini berhasil bos ku', 'success', {  button: 'yoHo',})" >
            Klik Aku
          </button>
      </div>
    </div>
  </body>
</html>

Kustom Warning alert

Kostom warning alert ini akan sangat berguna untuk memperingatkan pengunjung web sebelum mereka melakukan suatu tindakan yang berbahaya seperti meakukan penghapusan file. Nah di SweetAlert kita dapat melakukan beberapa penyesuaian agar peringatan terlihat lebih bagus seperti:

icon dapat diatur dengan definisi warning untuk menampilkan ikon peringatan yang lebih bagus
Dengan melakukan pengaturan button menjadi : true, maka SweetAlert akan menampilkan button cancel disebelah button button default.
Atur dangerMode menjadi true, maka fokus ikon akan tertuju pada button cancel dan button konfirmasi (default) akan berwarna merah untuk menandakan aksi berbahaya

contoh programnya

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
	<!--library alert --> 
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    
    <title>Contoh SweetAlert</title>
  </head>
  <body>
    <div class="container" style="width:500px;height:500px;">
    <h1>Contoh Alert</h1>
      <div class="row text-center">
        Ini kustom warning alert: <br> <button class="btn btn-primary sweet-1" onclick="swal({
  title: 'File akan dihapus ?',
  text: 'File yang dihapus tidak akan dapat dikembalikan',
  icon: 'warning',
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal('Berhasil dihapus', {
      icon: 'success',
    });
  } else {
    swal('File anda aman');
  }
});
" >
            Klik Aku
          </button>
      </div>
    </div>
  </body>
</html>

Sekian penjelasan dari saya mengenai salah satu kreasi Alert Javascript dengan menggunakan SweetAlert semoga bermanfaat terima kasih.

Alert JS Alert responsive SweetAlert JavaScript