S. Widodo
Membuat Pencarian Dengan Ajax PHP MYSQLI, Sebuah website atau aplikasi web untuk memiliki fitur pencarian data berdasarkan kata kunci tertentu. Misalnya pencarian data buku berdasarkan judul buku bisa juga pencarian berdasarkan penulis buku tersebut. Fitur pencarian ini sangat memudahkan pengguna untuk melakukan pencarian data. Jadi tidak ada alasan untuk tidak mengimplementasikannya pada website atau aplikasi web yang sedang kita kembangkan.
Dari beberapa pembaca di s-widodo.com yang sudah mengirim komentar maupun ke kontak kami beberapa user menanyaan untuk update tutorial membuat pencarian dengan ajax sebelumnya sudah ada artikel untuk membuat pencarian dengan ajax tetapi user masih kebingungan saat ada bug dikarena itu tutorial sudah lama masih menggunakan MYSQL desangkan yang saat ini sudah memakai MYSQLI.
Nah untuk itu kami akan bagikan kembali cara-cara membuat pencarian dengan ajax yuk kita simak bareng-bareng :
1. Silahkan buat database tets dan buat tabel artikel
| Nama | Type |
| id | int(11) - Auto |
| judul | varchar(100) |
| konten | text |
| Index : id | |
2. Sekarang buat koneksi Berinama config.php dan simpan dalam 1 folder
<?php
$Host = "localhost";
$User = "root";
$Pass = "";
$DB = "test";
$conn = new mysqli( $Host, $User, $Pass, $DB );
if ($conn->connect_error){
echo 'Gagal koneksi ke database';
} else {
// koneksi berhasil
} ?>
3. Silahkan buat file index.php dan simpan kode dibawah ini dalam file index
<?PHP require_once'./config.php';?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pencarian Ajax</title>
<link rel="stylesheet" href="./asset/bootstrap.min.css">
<script type="text/javascript "src="asset/jquery.js"></script>
<script type='text/javascript'>$(document).ready(function() {
//$("#search_results").slideUp();
$("#button_find").click(function(event) {
event.preventDefault();
//search_ajax_way();
ajax_search();
});
$("#search_query").keyup(function(event) {
event.preventDefault();
//search_ajax_way();
ajax_search();
});
});
function ajax_search() {
var judul = $("#search_query").val();
$.ajax({
url : "cari.php",
data : "judul=" + judul,
success : function(data) {
// jika data sukses diambil dari server, tampilkan di <select id=kota>
$("#display_results").html(data);
}
});
}</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Pencarian Ajax</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" name="search_query" id="search_query" class="form-control" placeholder="Ex: informasi, pendidikan">
</div>
<button type="submit" class="btn btn-default" id="button_find">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<div id="display_results" ></div>
</div>
<style type="text/css">
#display_results {position: absolute;
top: 55px;
left:190px;
width:500px; background: #eee}
.media {margin-bottom: 2px; border-bottom:solid 1px #cccccc; width: 100%; display:table;
padding: 10px;}
.media img {width: 80px; height: 80px;}
</style>
</body>
</html>
Dalam baris pertama yaitu memanggil koneksi, dan kami menggunakan framework bootstrap dan bisa download disini dan menggunakan plugin jquery.js
4. Setelah itu silahkan buat file cari.php dan copy paste kode dibawah ini
<?php require_once'./config.php';
$judul = strip_tags($_GET['judul']);
if($judul=="")
echo "Masukkan judul arikel";
else{
$query = "SELECT * FROM artikel where judul like '%$judul%'";
$result = $conn->query($query) or die($conn->error.__LINE__);
if($result->num_rows > 0){
while($rows= $result->fetch_assoc()){
extract($rows);
echo'<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="./asset/300x230.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">'.$judul.'</h4>'.substr($konten,0, 100).'
</div>
</div>';}
} else{
$hasil = " <h4 style='color:red'>Artikel tidak ditemukan!</h4>";
}}?>
Finis...
Mudah bukan untuk selengkapnya silahkan anda modifikasi sendiri untuk membuat style pencarianya buat yang mau oprek2 di localhost anda bisa download projectnya dibwah ini :
Komentar