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:
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 PendahuluanSweetAlert 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. InstalasiUntuk melakkan instalasi pada library SweetAlert kita dapat melakukan dengan 3 cara yaitu:
Dengan menulisakan perintah
Kita juga dapat menemukan SweetAlert pada unpkg dan jsDelivr, kemudian menggunakan variabel global
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 > Cara pengunaanSelanjutnya, 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 BiasaPada alert default yang dimiliki asli jacascript kita memanggilnya dengan menggunakan Dalam SweetAlert juga dapat diberi judul yaitu dengan menggunakan 2 aergumen perintah <!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>0. <!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 <!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>1 berbeda dengan <!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>0, 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 SweetAlertYang dimaksud kontektual SweetAlert disini adalah alert yang mengandung suatu makna tertantu, seperti
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 AlertSelain 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 ButtonUntuk melakukan hal ini kita hanya perlu menambahkan beberapa parameter seperti <!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>7 atau bisa juga kita padukan dengan kontektual alert sebelumnya seperti
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 alertKostom 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:
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. |