Hosting Unlimited Indonesia

Recent Comment

Navigation

Cara Membuat Notifikasi Simpan Data di PHP dengan Sweet Alert

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

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

<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
Download sweet alert disini dan jquery disini
Langkah kedua
Extract hasil download ke folder root server local sobat, kalau saya di c:\xampp\htdocsc\php7\sweetalert, sesuaikan dengan folder root server local sobat.
Langkah ketiga
Buatlah database baru dengan nama alert atau sesuai dengan yang sobat inginkan, kemudian buatlah tabel dengan nama subscribe

CREATE TABLE `subscribe` (
  `subscribe_id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`subscribe_id`)
) ENGINE=InnoDB AUTO_INCREMENT=91 DEFAULT CHARSET=latin1;

Langkah Keempat
Ketiklah kode sweet alert dibawah ini, code dibawah merupakan kode untuk menampung email subscribe dengan php. Simpan dengan nama index.php
<!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" action=”subscribe_act.php”>
<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>
</body>
</html>

Selanjutnya ketik kode dibawah ini, simpan dengan nama subscribe_act.php
<!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 >
<?php
$mysqli=new mysqli('localhost', 'root', '', 'dbalert');
$mysqli->query("SET NAMES 'utf8'");
$email = $_POST['email'];
$sql="SELECT * FROM subscribe WHERE email = '$email'";
$result=mysqli_query($mysqli,$sql);

if (mysqli_num_rows($result)>0){ 

  echo "
<script type='text/javascript'>
 setTimeout(function () { 
 swal({
            title: 'Already Email',
            text:  '$email',
            type: 'success',
            timer: 3000,
            showConfirmButton: true
        });  
 },10); 
 window.setTimeout(function(){ 
  window.location.replace('index.php');
 } ,3000); 
</script>";
}else{
 $save = $mysqli->real_query("INSERT INTO subscribe (email) VALUES ('$email')");
 if($save) { 
 echo "
 <script type='text/javascript'>
  setTimeout(function () {  
   swal({
    title: 'Subscribe Added',
    text:  'For $email',
    type: 'success',
    timer: 3000,
    showConfirmButton: true
   });  
  },10); 
  window.setTimeout(function(){ 
   window.location.replace('index.php');
  } ,3000); 
 </script>"; 
 }else{
 echo "
 <script type='text/javascript'>
  setTimeout(function () {  
   swal({
    title: 'Subscribe Failed',
    text:  'For $email',
    type: 'success',
    timer: 3000,
    showConfirmButton: true
   });  
  },10); 
  window.setTimeout(function(){ 
   window.location.replace('index.php');
  } ,3000); 
 </script>";  
 }
}
?>

<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>
</body>
</html>

Hasil eksekusi script diatas adalah seperti gambar dibawah ini .



Dan jika email sobat sudah terdaftar maka hasilnya akan terlihat seperti gambar dibawah ini .


NB: Code diatas saya tulis menggunakan php 7.

sampai disini dulu tutorial dari saya untuk sweet alert edit dan delete data akan saya bahas pada postingan selanjutnya, 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.


Share
Hosting Unlimited Indonesia

agus ribudi

Programmer, Web Developer, Android Developer and Blogger

Post A Comment:

7 comments:

Rekomendasi Untuk Anda × +