Kelasprogrammer.com – Kembali lagi kali ni saya akan membagikan tutorial bagaimana cara submit form tanpa refresh halaman dengan ajax. Sebelumnya saya telah menulis tentang input data ke database dengan php namun pada tutorial tersebut kita tidak menggunakan ajax, sehingga proses submit form masih perlu di reload atau pindah halaman. Nah pada kesempatan ini kita akan belajar bagaimana submit form tanpa perlu reload atau pindah halaman. Jadi ketika pengguna menginput data prosesnya akan dikerjakan dibelakang layar pengguna. Proses ini dapat kita kerjakan dengan teknik AJAX.
Ajax merupakan suatu teknik pengembangan web yang banyak dipakai saat ini. Teknik ini sangat diminati karena akan meningkatkan pengalaman user yang lebih pada aplikasi web yang kita buat. Web kita akan menjadi interaktif dan efisien. Ketika melakukan pengiriman atau menerima data dari server pengguna tidak harus berpindah atau reload keseluruhan halaman yang diakses.
Daftar Isi
Hal-hal yang perlu dipersiapkan
- Xampp untuk mengaktifkan web server dan database mysql
- Aplikasi editor
- Library JQuery
- Library Bootstrap (Optional)
Kita akan belajar php untuk cara submit form tanpa refresh dengan ajax menggunakan database mysql dan untuk tampilan layoutnya saya menggunakan bootstrap. Kalian bisa tidak menggunakan bootstrap jika kalian sudah membuat style css sendiri.
Artikel Lainnya : Cara membuat autocomplete di PHP
Selain itu kita juga memerlukan JQuery, kalian bisa mendownload secara langsung pada situs resminya, klik disini. Versi yang saya gunakan adalah versi 3.4.1
Saat kalian mengklik link diatas akan muncul source code jquery nya, copy semua source code tersebut pada aplikasi text editor yang kalian punya, lalu simpan didalam folder projek kalian dengan nama jquery-3.4.1.js
Konfigurasi Database
Buatlah sebuah database dengan nama db_penjualan
create database db_penjualan;
Buat tabel dengan nama barang
create table barang (
id_barang int not null auto_increment primary key,
nama_barang varchar(20) not null,
harga int,
stok int
);
File Koneksi Database
Buat sebuah file PHP dengan nama koneksi.php untuk mengkoneksikan ke database mysql.
<?php
$host="localhost";
$user="root";
$password="";
$db="db_penjualan";
$kon = mysqli_connect($host,$user,$password,$db);
if (!$kon){
die("Koneksi gagal:".mysqli_connect_error());
}
?>
Buat file index.php
Tahap pertama kita buat dulu file index.php, file ini akan menjadi halaman utama untuk menampilkan form data barang yang akan diinputkan kedatabase dengan ajax.
<!DOCTYPE html>
<html>
<head>
<!-- Load file CSS Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Load file JS -->
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="container">
<br>
<h4>Submit Form dengan AJAX</h4>
<form id="form" method="post">
<div class="form-group">
<label>Nama Barang:</label>
<input type="text" name="nama_barang" class="form-control" placeholder="Masukan nama barang" required />
</div>
<div class="form-group">
<label>Harga:</label>
<input type="number" name="harga" class="form-control" placeholder="Masukan harga" required />
</div>
<div class="form-group">
<label>Stok:</label>
<input type="number" name="stok" class="form-control" placeholder="Masukan stok" required />
</div>
<button type="button" id="Submit" name="submit" class="btn btn-primary">Submit</button>
</form>
<div id="tampil">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#tampil').load("tampil.php");
$("#Submit").click(function(){
var data = $('#form').serialize();
$.ajax({
type : 'POST',
url : "insert.php",
data: data,
cache : false,
success : function(data){
$('#tampil').load("tampil.php");
}
});
});
});
</script>
</div>
</body>
</html>
Perhatikan pada bagian <head> saya meload file CSS Bootstrap dan Jquery yang telah saya download sebelumnya. Pastikan kedua file tersebut telah kalian download atau minimal file Jquerynya harus ada. Mohon diperhatikan pada direktori penyimpanan filenya pastikan path nya sesuai ya.
Masuk ke bagian <body> terdapat form input barang terdapat tiga field text yaitu nama barang, harga dan stok serta sebuah button, yang harus kalian perhatikan disini adalah pada atribut name untuk masing-masing field tersebut. Karena nantinya data akan dikirim berdasarkan name yang kita buat pada masing-masing field tersebut.
Baca juga : Membuat combobox bertingkat di PHP dengan Ajax
Selain itu kalian bagian penting lainnya ada pada atribut id pada tag <form> dan <button>. Nantinya akan dipanggil melalui selector jquery dan events untuk memicu kedua elemen tersebut.
<div id="tampil">
</div>
Perhatikan sintak diatas, disini kita membuat sebuah elemen div dengan atribut id=”tampil” nantinya kita akan menampilkan hasil inputan pengguna di bagian ini.
<script type="text/javascript">
$(document).ready(function(){
$('#tampil').load("tampil.php");
$("#Submit").click(function(){
var data = $('#form').serialize();
$.ajax({
type : 'POST',
url : "insert.php",
data : data,
cache : false,
success : function(data){
$('#tampil').load("tampil.php");
}
});
});
});
</script>
Bagian sintak diatas merupakan bagian penting untuk tutorial kali ini, disinilah proses mengirim dan menerima data lewat server dilakukan.
$('#tampil').load("tampil.php");
Tahap awal kita menampilkan data dari file tampil.php dengan fungsi load.
$("#Submit").click(function()
Disini kita juga membuat event pada button submit dengan jenis event click. Jadi fungsi event ini adalah ketika button tersebut diklik maka akan memicu event ini berjalan.
var data = $('#form').serialize();
Untuk mengambil nilai yang dikirim dari form kita gunakan fungsi serialize() lalu disimpan pada variabel data.
$.ajax({
type : 'POST',
url : "insert.php",
data : data,
cache : false,
success : function(data){
$('#tampil').load("tampil.php");
}
});
Perhatikan pada sintak diatas merupakan fungsi ajax, type pengiriman data yang kita gunakan adalah post dan url yang dituju yaitu insert.php (akan kita buat selanjutnya), dengan mengirim data yang diinput melalui form input barang. Ketika proses berjalan dengan sukses maka data akan diload kembali dan ditampilkan pada elemen tampil.
Buat file insert.php
Buat sebuah file baru dengan nama insert.php fungsi dari file ini adalah untuk menerima inputan dari form input barang pada file index.php lalu kemudian nilainya di insert kedalam tabel barang.
<?php
//Include file koneksi ke database
include "koneksi.php";
//menerima nilai dari kiriman form input-barang
$nama_barang=$_POST["nama_barang"];
$harga=$_POST["harga"];
$stok=$_POST["stok"];
//Query input menginput data kedalam tabel barang
$sql="insert into barang (nama_barang,harga,stok) values('$nama_barang','$harga','$stok')";
//Mengeksekusi/menjalankan query diatas
$hasil=mysqli_query($kon,$sql);
?>
Buat file tampil.php
Pada file tampil.php berfungsi untuk menampilkan data yang di load dari database dan disajikan kedalam bentuk tabel. Struktur tabel yang saya gunakan disini menggunakan bootstrap.
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Harga</th>
<th>Stok</th>
</tr>
</thead>
<?php
include "koneksi.php";
$sql="select * from barang order by id_barang desc";
$hasil=mysqli_query($kon,$sql);
$no=0;
while ($data = mysqli_fetch_array($hasil)) {
$no++;
?>
<tbody>
<tr>
<td><?php echo $no;?></td>
<td><?php echo $data["nama_barang"]; ?></td>
<td><?php echo $data["harga"]; ?></td>
<td><?php echo $data["stok"]; ?></td>
</tr>
</tbody>
<?php
}
?>
</table>
Uji Coba
Setelah kalian mengikuti langkah-langkah yang dipaparakan diatas, sekarang mari kita coba menjalankannya. Buka project aplikasi kalian melalui browser. Jika berhasil seharusnya akan berjalan seperti pada gambar dibawah ini:
Demikian pembahasan kita kali ini mengenai submit form tanpa refresh halaman dengan menggunakan teknik Ajax dan JQuery. Semoga bisa bermanfaat buat kalian, terus tingkatkan skill programming web kalian dengan cara latihan dan terus mencoba hal-hal baru yang sebelumnya belum kalian ketahui. Dengan demikian pengalaman akan semakin bertambah dan membuat kalian semakin mahir dalam dunia programming. Silahkan sampaikan pesan melalui kolom komentar dibawah ini bila ada pertanyaan yang ingin disampaikan terkait artikel ini. Sampai jumpa pada artikel berikutnya.
Download Source Code
Jika teman-teman mengalami kesulitan untuk mengikuti tutorial di atas, sudah saya siapkan source code yang bisa kalian download di bawah ini:
[sociallocker id=”5349″] [/sociallocker]
sangat bermanfaat dan mudah dipahami