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 .



wah mainan script, melipir deh, berat buat aku hehe, keren!
ReplyDeleteala bisa krna terbiasa aja gan hehe
Delete