Cara Membuat Form Pencarian dengan ajax php mysql

By | November 25, 2021

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.

Pencarian dengan kategori

Sistem Requirement :

  • PHP Native
  • Database MySQL
  • Xampp / PHP 5.6

Panduan Instalasi Aplikasi :

  1. Ekstrak file menggunakan aplikasi WinRAR.
  2. Copy folder pencarian, lalu pastekan ke dalam folder htdocs.
  3. Aktifkan Apache dan MySQL pada
  4. Buka localhost/phpMyAdmin pada browser anda.
  5. Buat database baru dengan nama db_pencarian.
  6. Import database aplikasi ke dalam databse db_pencarian.
  7. 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

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.

tidak ada data ditemukan

 

Download Contoh

 

Form pencarian data dengan php – Mediafire

 

  

Form pencarian data dengan php ajax javascript – Drive

 

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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *