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

1<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

12345CREATE 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

123456789101112131415161718<!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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475<!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.