Cara Membuat Menu Filter & Search dengan Ajax Tanpa Loading pada PHP

Cara Membuat Menu Filter & Search dengan Ajax Tanpa Loading pada PHP – Sesuai janji saya pada postingan sebelumnya, kali ini saya akan membagikan tentang cara membuat menu filter dan searching pada aplikasi berbasis php menggunakan ajax dengan begitu kita juga bisa membuatnya tanpa loading dan lebih cepat. Kita juga bisa menggabungkannya dengan pagination namun pada tutorial kali ini saya tidak membahas sampai pagination. Dengan cara ini juga bisa sangat ringan seperti menggunakan datatables. Seperti yang sobat tahu, jika menggunakan datatables kita bisa melakukan live search dan nanti kita akan bahas itu juga cara membuat live search menggunakan Ajax.

Pada tutorial kali ini adalah standar kita membuat filter dan search yang akan dipanggil saat user mengeklik tombol cari. Namun berbeda dengan tutorial sebelumnya yang loading setelah klik tombol cari, pada tutorial kal ini kita buat tanpa loading. Cara membuatnya sangat mudah tinggal sobat ikuti cara dibawah.

Baca juga :

Cara Membuat Menu Filter & Search ke Semua Kolom pada PHP

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

2. Buat tabel untuk mengetes nantinya apakah benar-benar terkoneksi atau belum dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATE TABLE `tbl_mahasiswa_search`  (
  `id` int(11) PRIMARY KEY NOT NULL AUTO_INCREMENT,
  `nama_mahasiswa` varchar(255) NOT NULL,
  `alamat` text NOT NULL,
  `jenis_kelamin` varchar(255) NOT NULL,
  `tgl_masuk` date NOT NULL,
  `jurusan` varchar(255) NOT NULL
)

 

3. Isikan data pada tbl_mahasiswa_search dengan mengetikkan query dibawah ini

INSERT INTO `tbl_mahasiswa_search` VALUES (1, 'Dewan Komputer', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (2, 'Sule', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (3, 'Maemunah', 'Yogyakarta', 'Perempuan', '2019-01-01', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (4, 'Siti', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (5, 'Andre', 'Purwokerto', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (6, 'John Smith', 'Njojog', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (7, 'Adam Levine', 'Prapatan Ciamis', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (10, 'Sudirman', 'Jakarta', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (11, 'Ahmad Yani', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (12, 'Suprapto', 'Jakarta', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (13, 'Adul', 'Medan', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (14, 'Komeng', 'Palangkaraya', 'Laki-laki', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (15, 'Dono', 'Riau', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (16, 'Kasino', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (17, 'Indro', 'Purbalingga', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (18, 'Titik Puspa', 'Purwokerto', 'Perempuan', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (19, 'Meriam Belina', 'Cilacap', 'Perempuan', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (20, 'John Gundulmu', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (21, 'Adele', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (22, 'Jokowi', 'Jakarta', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (23, 'Megawati', 'Medan', 'Perempuan', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (24, 'Prabowo', 'Palangkaraya', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (25, 'Raisa', 'Riau', 'Perempuan', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (26, 'Luna Maya', 'Jakarta', 'Perempuan', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (27, 'Dery', 'Purbalingga', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (28, 'Septian', 'Purwokerto', 'Laki-laki', '2019-01-22', 'Sistem Informasi');

 

Cara Membuat Menu Filter & Search dengan Ajax

Untuk mempercantik tampilannya saya menggunakan bootstrap 4. Tidak usah berlama-lama, saya akan memberikan contohnya, yaitu sebagai berikut

1. Pertama buatlah folder pada htdocs, pada contoh saya beri nama folder dewan-live-search.

Karena pada contoh kali ini saya menggunakan bootstrap maka, ada beberapa librari yang harus sobat masukkan. Pada tag <head>…</head> tambahkan baris css berikut

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Kemudian pada tag <body> paling bawah tambahkan baris javascript berikut

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Karena keperluan demo maka saya contohkan online, jika untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu. Atau nanti di akhir saya berikan link untuk mendownload project pada postingan ini beserta file css dan jsnya.

2. Buatlah file koneksi.php pada folder project sobat dan isikan dengan script dibawah. Saya segaja tidak membuat file koneksi pada satu file dengan menu search seperti kebanyakan tutorial karena dalam penerapannya itu tidaklah mungkin jika kita membuat file koneksinya pada setiap halaman karena akan sangat susah nanti jika akan mengimplementasikan atau memindahkan server kita harus ganti satu per satu. Oleh karena itu kita harus membuatnya pada satu file saja dan jika ingin pindah server kita akan menggantinya di file ini saja.

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host Menggunakan PHP – Part 3

 

3. Tambahkan https://dewankomputer.com/2019/02/10/cara-membuat-menu-filter-search-dengan-ajax-tanpa-loading-pada-php/librari bootstrap untuk mempercantik tampilan dan librari js yang tentunya diperlukan untuk bisa menjalankan ajax. Kode dibawah letakkan pada tag <head> dan saya mencontohkan degan librari cs dan js online. Jika sobat ingin menggunakan untuk keperluan development tentu sobat harus mendownloadnya terlebih dahulu siwebsite resminya atau pada project ini di akhir postingan. Kodenya adalah sebagai berikut

<!-- Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

 

4. Buatlah file index.php pada folder sobat dan buat form search serta tabelnya. Untuk mempercantik tampilannya saya menggunakan booststrap 4. Isikan dengan script dibawah ini

<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>Jurusan</label>
            <select name="s_jurusan" id="s_jurusan" class="form-control">
                <option value=""></option>
                <option value="Sistem Informasi">Sistem Informasi</option>
                <option value="Teknik Informatika">Teknik Informatika</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-warning"><i class="fa fa-search"></i> Cari</button>
    </div>
</div>

<div class="data"></div>

 

5. Kemudian pada file index.php paling bawah sobat tambahkan script dibawah ini yang berisi ajax

<script type="text/javascript">
	$(document).ready(function(){
	    $('.data').load("data.php");
	    $("#search").click(function(){
	    	var jurusan = $("#s_jurusan").val();
	    	var keyword = $("#s_keyword").val();
	    	$.ajax({
	            type: 'POST',
	            url: "data.php",
	            data: {jurusan: jurusan, keyword:keyword},
	            success: function(hasil) {
	                $('.data').html(hasil);
	            }
	        });
	    });
	});
</script>

Penjelasan :

Kode $(‘.data’).load(“data.php”); adalah kode untuk menampilkan tabel pada elemen yang mempunyai class .data. Pada contoh diatas adalah pada index.php bagian <div class=”data”></div>. Nanti hasilnya adalah apa yang ditampilkan pada data.php dalam contoh kali ini adalah tabelnya.

Sedangkan pada kode dibawah berfungsi untuk menampilkan hasil dari tabel yang sudah di filter.

success: function(hasil) {
    $('.data').html(hasil);
}

 

6. Seperti yang tertulis diatas pada ajax, kita perlu file data.php untuk menampilkan datanya dalam table. Jika sobat sudah membuatnya dan menampilkan tabelnya dalam file index.php atau lainnya, maka sobat bisa memisahkan tabelnya saja. Contoh kodenya pada data.php adalah sebagai berikut

<table class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <td>No</td>
            <td>Nama Mahasiswa</td>
            <td>Alamat</td>
            <td>Jurusan</td>
            <td>Jenis Kelamin</td>
            <td>Tanggal Masuk</td>
        </tr>
    </thead>
    <tbody>
        <?php
            include 'koneksi.php';
            $s_jurusan="";
            $s_keyword="";
            if (isset($_POST['jurusan'])) {
                $s_jurusan = $_POST['jurusan'];
                $s_keyword = $_POST['keyword'];
            }
            
            $search_jurusan = '%'. $s_jurusan .'%';
            $search_keyword = '%'. $s_keyword .'%';
            $no = 1;
            $query = "SELECT * FROM tbl_mahasiswa_search WHERE jurusan LIKE ? AND (nama_mahasiswa LIKE ? OR alamat LIKE ? OR jurusan LIKE ? OR jenis_kelamin LIKE ? OR tgl_masuk LIKE ?) ORDER BY id DESC LIMIT 100";
            $dewan1 = $db1->prepare($query);
            $dewan1->bind_param('ssssss', $search_jurusan, $search_keyword, $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 = $row['id'];
                    $nama_mahasiswa = $row['nama_mahasiswa'];
                    $alamat = $row['alamat'];
                    $jurusan = $row['jurusan'];
                    $jenis_kelamin = $row['jenis_kelamin'];
                    $tgl_masuk = $row['tgl_masuk'];
        ?>
            <tr>
                <td><?php echo $no++; ?></td>
                <td><?php echo $nama_mahasiswa; ?></td>
                <td><?php echo $alamat; ?></td>
                <td><?php echo $jurusan; ?></td>
                <td><?php echo $jenis_kelamin; ?></td>
                <td><?php echo $tgl_masuk; ?></td>
            </tr>
        <?php } } else { ?> 
            <tr>
                <td colspan='7'>Tidak ada data ditemukan</td>
            </tr>
        <?php } ?>
    </tbody>
</table>

Bagaimana sama bukan dengan kode untuk menampilkan data dalam tabel. Kenapa dipisah yaitu agar ajax bisa merefresh halaman ini saja saat user klik cari dan tentunya refresh disini tidak memerlukan loading. Kode diatas menggunakan metode object oriented dan prepare statement. Cara ini dinilai paling aman jika kita menggunakan mysqli. Untuk perbedaan Object Oriented dan Procedural maka sobat bisa lita postingan dibawah

Cara Membuat Koneksi dengan Database MySQL menggunakan PHP

 

7. Jika sobat jalankan maka akan menjadi seperti dibawah

 

Pada contoh diatas, trigger untuk meresfresh adalah tombol Cari. Kita bisa membuat triggernya apa saja seperti . Sekain postingan saya tentang Cara Membuat Menu Filter & Search ke Semua Kolom pada PHP. Jika ada pertanyaan atau masih bingung sobat bisa tanyakan pada kolom komentar yang tersedia pada kolom paling bawah.

Baca juga :

Membuat CRUD Expert & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
Demo