Selamat datang di blog mari belajar coding. Pada tutorial kali ini kita akan belajar membuat sebuah form simpan data menggunakan teknologi ajax untuk mengirim datanya. Dengan menggunakan teknologi ajax ini kita tidak perlu berpindah halaman atau merefresh halaman untuk mengirim data yang nantinya akan disimpan ke database.
Membuat Submit Form dengan Ajax
Pertama-tama buat database mysql terlebih dahulu. Contoh disini kita akan membuat database akademik dengan satu tabel bernama mahasiswa.
Membuat Submit Form dengan Ajax
-- Buat database akademik
CREATE DATABASE `akademik`;
USE `akademik`;
-- buat tabel mahasiswa
CREATE TABLE `mahasiswa` (
`nim` varchar(15),
`nama` varchar(40),
`alamat` text,
PRIMARY KEY (`nim`)
);
Selanjutnya buat form untuk simpan data mahasiswa.
<form id="formMhs" method="POST">
<table>
<tr>
<td>NIM</td>
<td><input type="text" name="nim" id="nim"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" id="nama"></td>
</tr>
<tr>
<td>Alamat</td>
<td><textarea name="alamat" id="alamat"></textarea></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<label><input type="radio" name="jeniskelamin" value="Laki-laki">Laki-laki</label>
<label><input type="radio" name="jeniskelamin" value="Perempuan">Perempuan</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="simpan" id="simpan" value="Simpan">
</td>
</tr>
</table>
</form>
Buat fungsi submit form menggunakan jquery ajax.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#formMhs").submit(function(e) {
e.preventDefault();
$.ajax({
url: 'simpan-data.php',
type: 'post',
data: $(this).serialize(),
success: function(data) {
}
});
});
})
</script>
Kode lengkapnya seperti dibawah ini. Teman-teman bisa menyimpannya dengan nama file latihanajax.php
<!DOCTYPE html>
<html>
<head>
<title>maribelajarcoding.com</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#formMhs").submit(function(e) {
e.preventDefault();
$.ajax({
url: 'simpan-data.php',
type: 'post',
data: $(this).serialize(),
success: function(data) {
document.getElementById("formMhs").reset();
$('#status').html(data);
}
});
});
})
</script>
</head>
<body>
<form id="formMhs" method="POST">
<table>
<tr>
<td>NIM</td>
<td><input type="text" name="nim" id="nim"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" id="nama"></td>
</tr>
<tr>
<td>Alamat</td>
<td><textarea name="alamat" id="alamat"></textarea></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<label><input type="radio" name="jeniskelamin" id="jeniskelamin" value="Laki-laki">Laki-laki</label>
<label><input type="radio" name="jeniskelamin" id="jeniskelamin" value="Perempuan">Perempuan</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="simpan" id="simpan" value="Simpan">
</td>
</tr>
</table>
</form>
<div id="status"></div>
</body>
</html>
Lihat bagian baris yang diberi highlight diatas. Data dari form akan dikirim ke url simpan-data.php. Buat file simpan-data.php untuk mengekseskusi data untuk disimpan ke database.
<?php
//koneksi database
mysql_connect("localhost","root","root");
mysql_select_db("akademik");
//data yang diperoleh dari form mahasiswa
$nim=$_POST['nim'];
$nama=$_POST['nama'];
$alamat=$_POST['alamat'];
$jeniskelamin=$_POST['jeniskelamin'];
//simpan data kedalam database
$sql=mysql_query("INSERT INTO mahasiswa(nim, nama, alamat, jenis_kelamin) VALUES('".$nim."','".$nama."','".$alamat."','".$jeniskelamin."')") or die(mysql_error());
if ($sql) {
echo "<div style='color:green'>Data berhasil disimpan!</div>";
}else{
echo "<div style='color:red'>Data gagal disimpan!</div>";
}
?>
Tutorial membuat submit form dengan ajax telah selesai. Jalankan program untuk menguji simpan data. Sekian, semoga bermanfaat.
Related Search:
Membuat Submit Form dengan Ajax
Submit Form Dengan Ajax Menggunakan jQuery
Ajax Form Submit PHP