[TUTORIAL] Submit Form PHP, MySQL, Bootstrap Tanpa Refresh dengan AJAX jQuery

Hello World!
Hari ini saya mau coba sedikit share tutorial / source code buat latihan bagaimana cara submit form PHP, MySQL, Bootstrap dengan AJAX jQuery. Submit form dengan menggunakan AJAX tentunya memiliki banyak keuntungan. Selain membuat data terkirim secara asyncronous di balik layar, tentunya juga membuat user merasa lebih nyaman karena prosesnya menjadi lebih cepat.

Baik kita mulai saja.

Pertama, download dulu file yang dibutuhkan seperti bootstrap dan jquery.
lalu buat sebuah database dengan nama bebas dan buat sebuah table biodata

CREATE TABLE `biodata` (
  `id` int(11) NOT NULL,
  `fname` varchar(25) NOT NULL,
  `lname` varchar(25) NOT NULL,
  `email` varchar(50) NOT NULL,
  `phone` varchar(12) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Selanjutnya dumping data berikut

INSERT INTO `biodata` (`id`, `fname`, `lname`, `email`, `phone`) VALUES
(1, 'Azhari', 'Marzan', 'azhari@marzan.com', '2147483647'),
(2, 'Pevita', 'Pearce', 'pevpearce@gmail.com', '2147483647'),
(3, 'Rangsang', 'Kumuda', 'sangkumuda@gmail.com', '2147483647'),
(4, 'Raden', 'Kudamerta', 'kudamerta@gmail.com', '2147483647'),
(5, 'Raden', 'Cakradara', 'cakradara@gmail.com', '2147483647'),
(6, 'Monkey D', 'Luffy', 'luffy@mugiwara.com', '2147483647'),
(7, 'Lembu', 'Anabrang', 'lembuanabrang@gmail.com', '2147483647'),
(8, 'Wirota', 'Wiragati', 'wirowira@gmail.com', '2147483647'),
(9, 'Wiro', 'Sableng', 'sableng@gmail.com', '2147483647'),
(10, 'Ebiet ', 'Kaka', 'ebiet@gmail.com', '2147483647'),
(11, 'God', 'Usopp', 'usop@gmail.com', '2147483647'),
(12, 'Tony', 'Chopper', 'chopper@gmail.com', '2147483647'),
(13, 'Hello', 'There', 'hi@there.com', '085674837456'),
(14, 'Nico', 'Robin', 'nirobin@mugiwara.com', '085674837465'),
(15, 'lklkdalk', 'lkldkgnalkn', 'knlkgnaln', 'lnalgknlg'),
(16, 'aklkalg', 'lnalgna', 'lnadlganlnl', 'lknalglakgd'),
(18, 'Johnathan', 'Saputra', 'saputra@gmail.com', '087762536478'),
(19, 'lakdglk', 'lkndlkasl', 'lkandsdlkan', 'lkadsnlkbal'),
(20, 'dsgasd', 'adgag', 'adgadg', 'adgasd'),
(21, 'dgasdg', 'dgasdga', 'dgagag', 'adgad'),
(22, 'dasgsd', 'dagdasgdg', 'adgdag', 'adgasdgsdgd'),
(23, 'dasgsdgsa', 'adgadga', 'adgag', 'adgadggga');

Setelah itu buka text editor teman-teman lalu buat sebuah file dengan nama index.php
didalamnya buat code seperti berikut:

<!DOCTYPE html>
<html>
<head>
 
 
 Submit PHP Forms Without Refresh Using jQuery and AJAX
 
 
</head>
<body>


 


   Sangkumuda
  

  



    
   








    AJAX Form Submit
   









      


      


      


      



      






</body>
</html>

Lalu diatas tag </body> masukan kode berikut :

Kode diatas merupakan script ajax jquery yang dipakai untuk mensubmit data.

Selanjutnya buat lagi sebuah file untuk targetnya. Beri nama filenya submit.php

<?php

 $dbhost = 'localhost';
 $dbuser = 'root';
 $dbpass = '';
 $dbname = 'ajax-jquery-php';


 $conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname);

 if($conn->connect_error){
  die('Connection Error :'.$conn->connect_error);
 }
 
if($_POST){
 $fname = $_POST['txt_fname'];
 $lname = $_POST['txt_lname'];
 $email = $_POST['txt_email'];
 $phno = $_POST['txt_contact'];


 $sql = "INSERT INTO biodata (fname, lname, email, phone) VALUES('$fname', '$lname', '$email','$phno')";

 if($conn->query($sql)){

  ?>
  
   Data Submitted Successfully
  
  <?php
 }else{

  ?>
  
   Failed Submit Data
  

  <?php
 }
}
$conn->close();


?>



?>

Viola Done!
Kalau teman-teman merasa kebingungan silakan download projectnya disini