Cara Membuat Form Pencarian dengan php mysql tanpa refresh Halaman – Filter pencarian sangatlah dibutuhkan untuk sebuah aplikasi, fitur ini berfungsi untuk mencari data berdasarkan kata kunci yang dimasukan. Kali ini saya akan membagikan bagaimana membuat fitur penacarian dengan php ajax tanpa loading.
Pada tutorial kali ini adalah standar kita membuat filter dan search yang akan dipanggil saat user mengeklik tombol cari. Cara membuatnya sangat mudah tinggal sobat ikuti cara dibawah.
Sistem Requirement :
- PHP Native
- Database MySQL
- Xampp / PHP 5.6
Panduan Instalasi Aplikasi :
- Ekstrak file menggunakan aplikasi WinRAR.
- Copy folder pencarian, lalu pastekan ke dalam folder htdocs.
- Aktifkan Apache dan MySQL pada
- Buka localhost/phpMyAdmin pada browser anda.
- Buat database baru dengan nama db_pencarian.
- Import database aplikasi ke dalam databse db_pencarian.
- Jalankan alikasi dengan nama localhost/pencarian/index.php, pada browser anda.
Baca juga :
Tutorial Membuat Form tanggal dengan datepicker
Cara Membuat Reminder atau Tanggal Jatuh Tempo dengan PHP
Daftar Isi
Cara Membuat Pencarian Filter dengan Php dan Ajax
sebelum kita mulai membuat form pencarian data dengan php ajax Kita akan membuat 3 file .PHP diantaranya :
- php
- php
- php
Koneksi.php
<?php
define('HOST', 'localhost');
define('USER', 'root');
define('PASS', '');
define('DB1', 'db_pencarian');
// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>
Index.php
<?php
//menghubungkan dengan file koneksi yang telah kita buat
include 'koneksi.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
< <title>Pencarian Data dengan PHP </title>
<!-- Bootstrap -->
<link href="ccss/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="ccss/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-dark bg-success">
<div class="subnavbar">
<div class="subnavbar-inner">
<div class="container">
<h3>Pemulungkode</h3>
</div>
<!-- /container -->
</div>
<!-- /subnavbar-inner -->
</div>
</nav>
<div class="container">
<h2 align="center" style="margin: 30px;"> Data Stok Barang Sparepart</h2>
<div class="row mb-3">
<div class="col-sm-12">
<h4>Cari</h4>
</div>
<div class="col-sm-3">
<div class="form-group form-inline">
<label>Kategori </label>
<select name="s_kategori" id="s_kategori" class="form-control">
<option value=""></option>
<option value="Onderdil">Onderdil</option>
<option value="Aksesosris">Aksesosris</option>
<option value="Pelumas">Pelumas</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group form-inline">
<label>Keyword</label>
<input type="text" name="s_keyword" id="s_keyword" class="form-control">
</div>
</div>
<div class="col-sm-4">
<button id="search" name="search" class="btn btn-success">Cari</button>
</div>
</div>
<div class="data"></div>
</div>
</br>
<div class="text-center"> <a href="https://pemulungkode.com/"> Aziz husen</a> © <?php echo date('Y'); ?> Copyright:
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.data').load("data.php");
$("#search").click(function() {
var kategori = $("#s_kategori").val();
var keyword = $("#s_keyword").val();
$.ajax({
type: 'POST',
url: "data.php",
data: {
kategori: kategori,
keyword: keyword
},
success: function(hasil) {
$('.data').html(hasil);
}
});
});
});
</script>
</body>
</html>
Sedikit penjelasan :
var kategori = $(“#s_kategori”).val();
variable kategori ini pemanggilan pencarian berdasarkan kategori yang ada di table database
var keyword = $(“#s_keyword”).val();
variable keyword ini pemanggilan pencarian berdasarkan kata kunci
$.ajax({
type: ‘POST’,
url: “data.php”,
data: {
kategori: kategori,
keyword: keyword
},
Untuk mengirim data saya menggunakan “POST” dan akan di arahkan ke data.php untuk di proses
Data.php
<table class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<td>No</td>
<td>Nama Sparepart</td>
<td>Stock</td>
<td>Kategori</td>
<td>Harga</td>
</tr>
</thead>
<tbody>
<?php
include 'koneksi.php';
$s_kategori = "";
$s_keyword = "";
if (isset($_POST['kategori'])) {
$s_kategori = $_POST['kategori'];
$s_keyword = $_POST['keyword'];
}
$search_kategori = '%' . $s_kategori . '%';
$search_keyword = '%' . $s_keyword . '%';
$no = 1;
$query = "SELECT * FROM 213_sparepart WHERE kategori LIKE ? AND (sparepart LIKE ? OR stock LIKE ? OR kategori LIKE ? OR harga LIKE ?) ORDER BY id_sparepart DESC LIMIT 15";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param('sssss', $search_kategori, $search_keyword, $search_keyword, $search_keyword, $search_keyword);
$dewan1->execute();
$res1 = $dewan1->get_result();
if ($res1->num_rows > 0) {
while ($row = $res1->fetch_assoc()) {
$id_sparepart = $row['id_sparepart'];
$sparepart = $row['sparepart'];
$stock = $row['stock'];
$kategori = $row['kategori'];
$harga = $row['harga'];
?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $sparepart; ?></td>
<td><?php echo $stock; ?></td>
<td><?php echo $kategori; ?></td>
<td><?php echo $harga; ?></td>
</tr>
<tr>
<?php }
} else { ?>
<tr>
<td colspan='7'>Tidak ada data ditemukan</td>
</tr>
<?php } ?>
</tbody>
</table>
Sedikit penjelasan :
$query = "SELECT * FROM 213_sparepart WHERE kategori LIKE ? AND (sparepart LIKE ? OR stock LIKE ? OR kategori LIKE ? OR harga LIKE ?) ORDER BY id_sparepart DESC LIMIT 15";
Memilih semua data dari table 213_sparepart dari colom kategori , sparepart, stock, harga Order By id_sparepart .
if ($res1->num_rows > 0) {
while ($row = $res1->fetch_assoc()) {
$id_sparepart = $row['id_sparepart'];
$sparepart = $row['sparepart'];
$stock = $row['stock'];
$kategori = $row['kategori'];
$harga = $row['harga'];
?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $sparepart; ?></td>
<td><?php echo $stock; ?></td>
<td><?php echo $kategori; ?></td>
<td><?php echo $harga; ?></td>
</tr>
<tr>
<?php }
} else { ?>
<tr>
Menampilkan data dari table database
<?php }
} else { ?>
<tr>
<td colspan=’7′>Tidak ada data ditemukan</td>
</tr>
<?php } ?>
Jika kategori atau keyword yang di masukkan tidak ada maka aka ada pesan error “tidak ada data ditemukan” Anda bisa mengedit sesuai dengan keinginan anda.
Download Contoh
Sekian Postingan saya kali ini tentang Cara mudah Membuat Form Pencarian dengan ajax javascript php mysql Semoga bermanfaat, jika ada pertanyaan jangan sungkan-sungkun untuk corat-coret dalam kolom komentar, dan sekiranya membantu anda jangan lupa untuk berbagi ke temen-temen anda yang sedang membutuhkan, bantu support juga dengan mengklik iklan. Terima kasih.