Cara Membuat Menu Search ke Semua Kolom pada PHP – HaiĀ ketemu lagi dengan saya dan pada kesempatan kali ini saya akan memposting tentang cara membuat menu filter dan search ke semua kolom menggunakan PHP. Filter ini kita menggunakan combobox sehingga hanya menampilkan data yang sesuai dengan nilai yang dipilih pada combobox atau bisa saja dikosongi jika ingin mencari ke semua kolom dan ke semua baris. Sebenarnya search bisa hanya ke satu kolom saja namun itu terlalu tanggung jadi saya buat contoh sekalian ke semua kolom jadi sobat nanti bisa menyesuaikannya dengan aplikasi yang sobat buat.
Jika kita tidak menggunakan datatables tentunya kita harus membuat menu search dan pagination sendiri. Ini biasa digunakan jika sobat mempunyai data yang sangat banyak, karena jika menggunakan datatable jika sobat menggunakan cara yang biasa tentu akan sangat lemot nanti. Oleh karena itu jika datanya sangat banyak ribuan bahkan jutaan dan sobat menggunakan datatable maka sobat harus menggunakan ajax dan tentunya bukan ajax yang biasa dan itu sangat rumit. Oleh sebab itu banyak yang mengakalinya dengan membuat tabel sendiri dengan menu search dan pagination sendiri. Namun pada contoh kali ini saya akan memposting terlebih dahulu tentang search.
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
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-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
3. Buatlah file index.php pada folder sobat dan buat form search serta tabelnya. Isikan dengan script dibawah ini
<div class="container"> <h2 align="center" style="margin: 30px;">Filter & Search pada PHP ke Semua Kolom</h2> <?php $s_jurusan=""; $s_keyword=""; if (isset($_POST['search'])) { $s_jurusan = $_POST['s_jurusan']; $s_keyword = $_POST['s_keyword']; } ?> <form method="POST" action=""> <div class="row mb-3"> <div class="col-sm-12"><h4>Cari</h4></div> <div class="col-sm-3"> <div class="form-group"> <select name="s_jurusan" id="s_jurusan" class="form-control"> <option value="">Filter Jurusan</option> <option value="Sistem Informasi" <?php if ($s_jurusan=="Sistem Informasi"){ echo "selected"; } ?>>Sistem Informasi</option> <option value="Teknik Informatika" <?php if ($s_jurusan=="Teknik Informatika"){ echo "selected"; } ?>>Teknik Informatika</option> </select> </div> </div> <div class="col-sm-4"> <div class="form-group"> <input type="text" placeholder="Keyword" name="s_keyword" id="s_keyword" class="form-control" value="<?php echo $s_keyword; ?>"> </div> </div> <div class="col-sm-4" > <button id="search" name="search" class="btn btn-warning">Cari</button> </div> </div> </form> <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'; $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"; $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> </div>
Penjelasan :
$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"; $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();
Kode diatas merupakan kode pencariannya, kita 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
4. Jika sobat
jalankan maka akan menjadi seperti dibawah
Contoh diatas merupakan contoh standar jika sobat ingin membuat menu search pada aplikasi PHP. Ada lagi cara yang lebih bagus yaitu search menggunakan Ajax jadi kita bisa membuat menu search tanpa loading. Itu akan saya bahas pada tutorial selanjutnya. 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 :
Cara Membuat Menu Filter & Search dengan Ajax Tanpa Loading pada PHP
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
min biar pas buka index blm muncul data tabelnya gmn ya? krn saking bnyknya data muncul semua kasihan load nya…
jd saat klik button cari saja baru muncul tabel nya sesuai yg diinginkan tampil…
tinggal bikin action saat klik tombol cari pake ajax atau javascript dan di awal ngga perlu menampilkan datanya,
cari saja di postingan saya pernah saya bahas tentang pencarian data tinggal disesuaikan sesuai kebutuhan
koq gak nemu ya…
maaf min msh belajaran…bingung nggak perlu ditampilkannya saat dibaris ini atau gmn ya…
if ($res1->num_rows > 0)
iya itu
masih gagal paham bang…
bisa dikasih contoh gak ya
https://dewankomputer.com/2019/02/10/cara-membuat-menu-filter-search-dengan-ajax-tanpa-loading-pada-php/
bisa dipelajari lwat postingan itu
yang prosedural dong..
saya ngga pake prosedural mas karena saya pernah pake prosedural ngga lolos security test dan jadi banyak vulnerability
bang ini include ke database nya gmana ?
kalau menjalankan $query hrus konek dulu apa engga ?
sorry bang yang ‘sssss’ itu buat apa ?
itu type dari parameternya misalkan parameternya ada 5 brarti di query ada 5 tanda tanya (?) dan di bind_param ada 5 ‘s’
ada 4 tipe :
i=integer
d=double
s=string
b=blob
jadi kalo id itu lebih baik ‘i’ jadi kalo ada yg jahil atau mau inject ngga bisa/error
harus konek mas,
di contoh diatas itu buat dulu file koneksi.php buat konek ke database
setelah itu tinggal tambahkan kode
include ‘koneksi.php’
di setiap file yang harus ada koneksi ke databasenya
include-nya sekali aja setiap file paling atas
Notice: Constant HOST already defined in C:\xampp\htdocs\laporan\config.php on line 2
Notice: Constant USER already defined in C:\xampp\htdocs\laporan\config.php on line 3
Notice: Constant PASS already defined in C:\xampp\htdocs\laporan\config.php on line 4
Notice: Constant DB1 already defined in C:\xampp\htdocs\laporan\config.php on line 5
Warning: mysqli_stmt::bind_param(): Number of variables doesn’t match number of parameters in prepared statement in C:\xampp\htdocs\laporan\index.php on line 162
Notice: Trying to get property ‘num_rows’ of non-object in C:\xampp\htdocs\laporan\index.php on line 166
3
di saya bgini jadinya ka…
koneksi ke databasenya 2x
jumlah parameternya tidak sesuai dengan jumlah tanda tanya ‘?’
mau nanya suhu, gimana caranya nambah search baru lagi ?
contohnya search_JK,(option Value).
tinggal tambah html radio button biasa dengan value “Laki-laki” dan “Perempuan” atau “L” dan “P” sesuai yang tersimpan di database..
terus pas kode ini ditambah
if (isset($_POST['search'])) {
$s_jurusan = $_POST['s_jurusan'];
$s_keyword = $_POST['s_keyword'];
$s_jenkel = $_POST['s_jenkel'];
}
dan di querynya tinggal tambah
“AND jenis_kelamin=?” di akhir
dan di bind_param tambah 1 “s” dan $s_jenkel
bang klo php versi 7 gimana ya? kan hrs make mysqli ;D
cara diatas kan pake mysqli mas, dipostingan saya di blog ini ngga pernah pake mysql
dan di demo saya pake php 7.4 jalan
Assalamualaikum mas. Ada tutorialnya gak, tapi yang kalau di klik nama orangnya akan menuju ke tautan lain.
Wa’alaikumsalam,
ngga ada mas kalo mau kaya gitu kan tinggal tambahin saja di kolom nama nya kode a href dengan target blank
Mas aku mau tau tanya, kalo biar data yang tampil di awal adalah data dari filter “OPTION” yg pertama bagaimana ya ?
Misal :
<option value="2021" >2021
<option value="2020" >2020
Nah saya ingin data yang tampil itu langsung data dari “OPTION 2021” tanpa harus klik tombolnya.
Terimakasih
tinggal tambahin selected mas jadi
<... value="2021" selected>2021
min kalau data in di tampilkan dengan menggunakan grafik cara bagaimana ya min, dengan tampilan juga ada filter sprti itu. terimakasih sblmnya
Saya mencoba memakai cara ini pada dbase saya…. adaptasinya mentok alias gak berhasil…. kasus saya gini bang…. mohon arahannya :
saya pengen menampilkan data penjualan per-tanggal berdasarkan nama kasir
dan di ujung bawah itu ada total dari penjualan tiap kasir yang ditampilkan
kalo ada rekan rekan yang bisa bantu, saya ucapkan banyak terima kasih sekali
Mau tanya Mas,
ditempat saya tampilan table nya sudah muncul tapi datanya tidak mncul sama sekali. Kira-kira kenapa ya?
kemungkinan ada error di query atau saat looping datanya
Link nya brocken semua Om