Ajax (Asynchronous JavaScript and XML) merupakan teknologi yang memungkinkan pengguna untuk melakukan permintaan data tanpa harus memuat ulang halaman web. Salah satu kegunaan Ajax adalah untuk menyimpan data ke database MySQL secara asinkron tanpa perlu memuat ulang halaman web.


Pada artikel ini, kita akan membahas cara menginsert data ke database MySQL menggunakan Ajax.

Langkah pertama adalah membuat form HTML untuk input data. Berikut contoh kodenya:

php
<form id="formInsert" method="post"> 
    <label for="name">Nama:</label> 
    <input type="text" id="name" name="name"> <br>
    <label for="email">Email:</label> 
    <input type="email" id="email" name="email"> <br> 
    <button type="submit">Simpan</button>
</form>

Setelah itu, kita akan membuat fungsi JavaScript untuk mengambil data dari form dan mengirimkannya ke server menggunakan Ajax. Berikut contoh kodenya:

javascript
$(document).ready(function() 
{

 $('#formInsert').submit(function(e) 
{
        e.preventDefault();  
$.ajax({
            
url: 'insert.php',  
type: 'POST',
            
data: $(this).serialize(),  
success: function(response) {
                
alert('Data berhasil disimpan!');

 },
            
error: function(xhr, status, error) {
                
alert(xhr.responseText);

 }

 });

 });

});

Keterangan kode di atas:

  • $(document).ready(function() {...}: fungsi ini akan dijalankan ketika halaman web telah selesai dimuat.
  • $('#formInsert').submit(function(e) {...}: fungsi ini akan dijalankan ketika form dengan ID formInsert disubmit.
  • e.preventDefault();: menghentikan submit form agar halaman tidak dimuat ulang.
  • $.ajax({...});: melakukan request Ajax ke file PHP insert.php.
  • url: 'insert.php': menentukan file PHP untuk insert data ke database.
  • type: 'POST': menentukan metode HTTP untuk mengirim data ke server.
  • data: $(this).serialize(): mengambil data dari form dengan fungsi .serialize().
  • success: function(response) {...}: fungsi ini akan dijalankan jika data berhasil disimpan ke database.
  • error: function(xhr, status, error) {...}: fungsi ini akan dijalankan jika terjadi kesalahan dalam request Ajax.

Langkah terakhir adalah membuat file PHP untuk insert data ke database MySQL. Berikut contoh kodenya:

php
<?php 
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "database_name"; // membuat koneksi ke database 
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
} // mengambil data dari form 
$name = $_POST['name'];
$email = $_POST['email']; // query untuk insert data ke database 
$sql = "INSERT INTO tabel_name (name, email) VALUES ('$name', '$email')";
if (mysqli_query($conn, $sql)) {
    echo "Data berhasil disimpan!";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>

Keterangan kode di atas:

  • $username, $password, dan $dbname: konfigurasi untuk koneksi ke database MySQL.
  • $conn = mysqli_connect(...): membuat koneksi ke database MySQL.
  • if (!$conn) {...}: mengecek apakah koneksi berhasil atau gagal. Jika gagal, maka script akan berhenti dan menampilkan pesan error.
  • $name = $_POST['name'] dan $email = $_POST['email']: mengambil data dari form menggunakan metode POST.
  • $sql = "INSERT INTO tabel_name (name, email) VALUES ('$name', '$email')": query untuk insert data ke tabel tabel_name.
  • if (mysqli_query($conn, $sql)) {...}: mengecek apakah query berhasil dijalankan atau tidak. Jika berhasil, maka script akan menampilkan pesan sukses. Jika gagal, maka script akan menampilkan pesan error.

Dengan mengikuti langkah-langkah di atas, kita dapat menginsert data ke database MySQL menggunakan Ajax. Dalam prakteknya, tentu saja ada banyak hal yang perlu dipertimbangkan, seperti validasi data sebelum disimpan ke database, penggunaan prepared statement untuk mencegah serangan SQL injection, dan sebagainya.

Namun demikian, teknik insert data ke database MySQL menggunakan Ajax dapat membantu mempercepat proses pengiriman data ke server dan memberikan pengalaman yang lebih baik bagi pengguna website.