Alert adalah notifikasi javascript yang sering kita gunakan dalam memvalidasi suatu script atau kode yang kita jalankan, alert default javascript adalah seperti code dibawah ini
1 2 3 | <!--<script>window.alert('Selamat datang');</script>--> |
Hasilnya seperti gambar dibawah ini
Disini saya akan membahas bagaimana caranya untuk membuat alert dengan sweet alert agar mendapatkan tampilan seperti gambar dibawah ini :
Oke sobat langsung saja …..
Langkah pertama
Langkah kedua
Extract hasil download ke folder root server local sobat, kalau saya di c:\xampp\htdocs\php7\sweetalert, sesuaikan dengan folder root server local sobat.
Langkah ketiga
Ketiklah kode sweet alert dibawah ini
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!--<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"><title>Aguzrybudy.com | Sweet Alert</title><link rel="stylesheet" href="alert/css/sweetalert.css"></head><body ><form method="post" id="email"><p><input name="email" placeholder="Enter Your Email" type="text" id="inputemail"><input type="submit" value="Submit" ></p></form><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script src="alert/js/sweetalert.min.js"></script><script src="alert/js/qunit-1.18.0.js"></script><script type="text/javascript">$(document).ready(function(){ $('#email').on('submit',function(e) { $.ajax({ url:'subscribe_act.php', //nama action script php sobat data:$(this).serialize(), type:'POST', success:function(data){ console.log(data); swal("Success!", "Message sent!", "success"); }, error:function(data){ swal("Oops...", "Something went wrong :(", "error"); } }); e.preventDefault(); });});</script></body></html>--> |
Hasil eksekusi script diatas adalah seperti gambar dibawah ini .
sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran untuk file PDF -NYA download disini dan jika sobat ingin code dari aplikasi diatas download disini.
0 komentar:
Post a Comment