Tutorial Insert Data Menggunakan Ajax jQuery

Share:
Hello Worlds! Sebelum kita masuk ke inti, mungkin ada yang belum tahu mengenai ajax ini. Apa itu Ajax? Ajax (singkatan dari Asynchronous Javascript And XML) adalah suatu teknik yang dipakai untuk mengirim atau menerima data yang berhubungan dengan database tanpa meload halaman lagi. Dengan memakai Ajax ini, aktivitas pengguna web akan menjadi lebih cepat, karena dia tidak ngeload halaman secara keseluruhan.

Dalam mengirim data, Ajax ini memiliki 2 method seperti umumnya, yaitu Post dan Get. Tapi di kasus ini pakai Post saja, nggak ada bedanya kok. Untuk awalnya, kita rancang terlebih dahulu database-nya. Masuk ke PhpMyAdmin, buat database dengan nama "ajax", dan buatlah tabel dengan struktur seperti ini.


Jika Database udah terbuat, maka langkah selanjutnya ialah membuat koneksi dengan database. Buatlah file "konfig.php" dan ketik script di bawah ini.

<?php

$host = "localhost"; // Host DB MySQL
$user = "root"; // Username DB MySQL
$pass = ""; // Password DB MySQL
$nama = "ajax"; // Nama Database

$konek = mysqli_connect($host,$user,$pass,$nama);
if(!$konek) {
     die('Gagal terhubung dengan database');
}

?>

Setelah script di atas berhasil terhubung dengan Database, buatlah file "index.php" sebagai interface pengguna dengan script seperti ini.

<!DOCTYPE html>
<html>
<head>
     <title>Tutorial Insert Data Ajax</title>
     <script type="text/javascript" src="http://belajarnge.web.id/alat/jquery-3.1.1.js"></script>
     <script type="text/javascript" src="http://belajarnge.web.id/alat/framework.jquery.js"></script>
     <script type="text/javascript">
          $("document").ready(function() {
               $("#insert").click(function() {
                    var nama = $("#nama").val();
                    var email = $("#email").val();
                    var data = 'nama='+nama+'&email='+email;
                    ajax("aksi.php", data);
               });
          });
     </script>
</head>
<body>

<input type="text" id="nama" placeholder="Nama..."><br />
<input type="email" id="email" placeholder="Email"><br />
<button id="insert">Masukkan</button>

</body>
</html>

Interface untuk submit data sudah jadi. Sekarang, tinggal membuat pemroses-nya. Buat file "aksi.php" (tergantung pada nama file di fungsi ajax() sih) dan ketikkan script di bawah ini.

<?php

include 'konfig.php';

$id = rand(1,999);
$nama = $_POST['nama'];
$email = $_POST['email'];

$masuk = mysqli_query($konek, "INSERT INTO user VALUES('$id','$nama','$email')");

?>

?>

Simpan dan coba submit nama dan email, terserah isinya. Kalau work, maka akan muncul seperti ini


Kalau sudah muncul alert "Data Terkirim" berarti itu sudah dimasukkan ke Database. Kalau misalkan muncul alert tetapi isi belum nambah, mungkin penulisan SQL query Anda salah, kurang tanda petik, atau koma. Atau juga bisa file "konfig.php" belum terhubung dengan database. Semoga bermanfaat.....

2 comments: