Tentu, ini artikel yang Anda minta:
Dalam pengembangan web modern, pengalaman pengguna (UX) yang mulus sangat penting. Salah satu cara untuk mencapainya adalah dengan mengirim data formulir ke server tanpa memuat ulang halaman (page reload). Teknik ini dikenal sebagai AJAX (Asynchronous JavaScript and XML). Dengan JQuery, proses ini menjadi sangat sederhana.
Dalam tutorial JQuery ke-14 ini, kita akan membahas cara mengirim data dari formulir HTML ke server (PHP) dan menyimpannya di database menggunakan AJAX JQuery.
1. Persiapan Sisi Server (PHP)
Sebelum kita membuat formulir, kita perlu menyiapkan skrip PHP yang akan menerima data dari JQuery. Skrip ini akan melakukan validasi dan memasukkan data ke database.
Koneksi Database
Buat file koneksi.php untuk mengelola koneksi ke database Anda.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "nama_database";
// Membuat koneksi
$conn = new mysqli($servername, $username, $password, $dbname);
// Memeriksa koneksi
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
?>
Skrip PHP untuk Memproses Data
Buat file simpan_data.php. Skrip ini akan menerima data POST dari AJAX.
<?php
include 'koneksi.php';
// Menyiapkan array respons
$response = ['success' => false, 'message' => ''];
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Mengambil data dari form
$nama = $conn->real_escape_string($_POST['nama']);
$email = $conn->real_escape_string($_POST['email']);
// Validasi sederhana
if (empty($nama) || empty($email)) {
$response['message'] = 'Nama dan email tidak boleh kosong.';
} else {
// Query untuk menyimpan data
$sql = "INSERT INTO users (nama, email) VALUES ('$nama', '$email')";
if ($conn->query($sql) === TRUE) {
$response['success'] = true;
$response['message'] = 'Data berhasil disimpan!';
} else {
$response['message'] = 'Error: ' . $sql . '<br>' . $conn->error;
}
}
} else {
$response['message'] = 'Permintaan tidak valid.';
}
$conn->close();
// Mengembalikan respons dalam format JSON
header('Content-Type: application/json');
echo json_encode($response);
?>
Skrip ini akan mengembalikan respons dalam format JSON, yang sangat mudah diproses oleh JQuery di sisi klien.
2. Persiapan Sisi Klien (HTML & JQuery)
Sekarang kita akan membuat formulir dan kode JQuery untuk mengirim data.
Formulir HTML
Buat file index.html dengan formulir sederhana.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Data dengan AJAX</title>
</head>
<body>
<h1>Formulir Pendaftaran</h1>
<div id="status"></div>
<form id="myForm">
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<button type="submit">Kirim Data</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// Kode JQuery akan diletakkan di sini
</script>
</body>
</html>
Kode JQuery
Sekarang tambahkan kode JQuery di dalam tag <script>.
$(document).ready(function() {
// Menangani pengiriman formulir saat event 'submit'
$('#myForm').submit(function(e) {
e.preventDefault(); // Mencegah form melakukan submit standar (page reload)
var form = $(this);
var url = form.attr('action') || 'simpan_data.php';
var data = form.serialize(); // Mengambil data form
$.ajax({
type: "POST", // Metode pengiriman data
url: url, // URL tujuan
data: data, // Data yang akan dikirim
dataType: 'json', // Tipe data yang diharapkan dari server
success: function(response) {
// Fungsi yang dijalankan jika permintaan berhasil
if (response.success) {
$('#status').text(response.message).css('color', 'green');
form[0].reset(); // Mengosongkan formulir setelah berhasil
} else {
$('#status').text(response.message).css('color', 'red');
}
},
error: function(xhr, status, error) {
// Fungsi yang dijalankan jika terjadi error
$('#status').text('Terjadi kesalahan: ' + error).css('color', 'red');
console.log(xhr.responseText);
}
});
});
});
Pada kode di atas:
e.preventDefault(): Ini adalah baris kode terpenting. Ini akan menghentikan formulir dari perilaku aslinya, yaitu memuat ulang halaman setelah tombol submit diklik.form.serialize(): Metode ini mengumpulkan semua data dari elemen input di dalam formulir dan mengubahnya menjadi string format URL-encoded yang siap dikirim.$.ajax({ ... });: Ini adalah metode inti JQuery untuk melakukan permintaan AJAX.type: "POST": Mengatur metode HTTP ke POST.url: url: Menentukan alamat skrip PHP yang akan menerima data.data: data: Meneruskan data formulir yang sudah di-serialize.dataType: 'json': Memberitahu JQuery untuk mengharapkan respons dalam format JSON dari server.
successdanerror: Ini adalah callback function.successakan dijalankan jika permintaan berhasil, danerrorjika ada masalah, seperti server tidak merespons atau status HTTP error.
Kesimpulan
Menggunakan AJAX JQuery untuk mengirim data formulir ke database adalah teknik yang kuat untuk meningkatkan interaktivitas dan pengalaman pengguna. Dengan pendekatan ini, Anda dapat memvalidasi data, menyimpan ke database, dan menampilkan respons kepada pengguna secara real-time, semuanya tanpa mengganggu alur kerja mereka dengan memuat ulang halaman.
