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