Pencarian Otomatis Menggunakan PHP, MySQL, ajax dan jQuery

Pencarian merupakan salah satu fitur yang penting dalam sebuah website atau blog, terutama jika website atau blog tersebut sudah memiliki banyak content di dalamnya. Bayangkan saja misalkan sebuah website memiliki ribuan konten tidak mungkin si user harus menelusuri satu persatu dari konten tersebut untuk mencari konten yang dia inginkan.
Pada kesempatan ini toufik's blog akan berbagi coding PHP tentang bagaimana membuat sebuah fitur pencarian. tapi pada fitur ini kita akan membuat pencariannya otomatis. jadi user tidak perlu menekan tombol cari atau enter untuk menemukan data. cara kerjanya adalah ketika user menginputkan keyword dari kata yang akan di cari meski hanya satu kata maka searchbox akan langsung menampilkan data yang relevan dari kata yang di inputkan. Oke kalo belum dapat gambarannya, silahkan perhatikan gambar berikut:

Oke jika teman - teman tertarik untuk membuat program ini silahkan buat file - file berikut di server anda :

1. db_connection.php - berguna untuk menghubungkan program php dengan database

<?php
    define('_HOST_NAME', 'localhost');
    define('_DATABASE_USER_NAME', 'root');
    define('_DATABASE_PASSWORD', '');
    define('_DATABASE_NAME', 'dbtoufikdemo');
    
     $dbConnection = new mysqli(_HOST_NAME, _DATABASE_USER_NAME, _DATABASE_PASSWORD, _DATABASE_NAME);
     if ($dbConnection->connect_error) {
          trigger_error('Connection Failed: '  . $dbConnection->connect_error, E_USER_ERROR);
     }

2. index.php - halaman index atau tampilan awal berisi ajax dan jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toufik.web.id || Pencarian Otomatis Menggunakan PHP, MySQL, ajax dan jQuery</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search_keyword").keyup(function() 
{ 
    var search_keyword_value = $(this).val();
    var dataString = 'search_keyword='+ search_keyword_value;
    if(search_keyword_value!='')
    {
        $.ajax({
            type: "POST",
            url: "search.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
                $("#result").html(html).show();
            }
        });
    }
    return false;    
});

$("#result").live("click",function(e){
    var $clicked = $(e.target);
    var $name = $clicked.find('.country_name').html();  
    var decoded = $("<div/>").html($name).text();
    $('#search_keyword_id').val(decoded);
});
$(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search_keyword")){
        $("#result").fadeOut(); 
    }
});
$('#search_keyword_id').click(function(){
    $("#result").fadeIn();
});
});
</script>
</head>

<body>
    <div class='tLink'><strong>Kembali Ketutorial:</strong> <a href='www.toufik.web.id/'>Klik Disini</a></div><br />
    <div class='web'>
        <h1>Pencarian Otomatis dengan PHP, MySQL, ajax dan jQuery</h1>
        <input type="text" class="search_keyword" id="search_keyword_id" placeholder="Masukkan Nama Kota" />
        <div id="result"></div><br><br>
        <i style='font-size:12px;color:#FF0000;'>(Ketikkan Nama Kota)</i>
    </div>
    <div class="web" align="center" ><a href="http://www.toufik.web.id" title="Toufik's Blog" target="_blank" >Copyright Belajar Pemrograman || Toufik's Blog</a></div>
</body>
</html>

3. search.php - berisi function php untuk select database dan menampilkannya ke search box

<?php
include('db_connection.php');
if(isset($_POST['search_keyword']))
{
    $search_keyword = $dbConnection->real_escape_string($_POST['search_keyword']);
    
    $sqlCountries="SELECT id_kota,nama_kota FROM tbl_kota WHERE nama_kota LIKE '%$search_keyword%'";
    $resCountries=$dbConnection->query($sqlCountries);
    if($resCountries === false) {
        trigger_error('Error: ' . $dbConnection->error, E_USER_ERROR);
    }else{
        $rows_returned = $resCountries->num_rows;
    }
    $bold_search_keyword = '<strong>'.$search_keyword.'</strong>';
    if($rows_returned > 0){
        while($rowCountries = $resCountries->fetch_assoc()) {       
            echo '<div class="show" align="left"><span class="nama_kota">'.str_ireplace($search_keyword,$bold_search_keyword,$rowCountries['nama_kota']).'</span></div>';   
        }
    }else{
        echo '<div class="show" align="left">Kota tidak ditemukan.</div>';  
    }
}   
?>

4.style.css - fungsinya buat memperkeren tampilan :)

    .web{
        font-family:tahoma;
        size:12px;
        top:10%;
        border:3px solid #030;
        border-radius:10px;
        background-color:#FFC;
        padding:10px;
        width:38%;
        margin:auto;
        
    }
    h1{
        margin: 3px 0;
        font-size: 13px;
        text-decoration: underline;
    }
    .tLink{
        font-family:tahoma;
        size:12px;
        padding-left:10px;
        text-align:center;
    }
    #search_keyword_id
    {
        width:300px;
        border:solid 1px #CDCDCD;
        padding:10px;
        font-size:14px;
    }
    #result
    {
        position:absolute;
        width:320px;
        display:none;
        margin-top:-1px;
        border-top:0px;
        overflow:hidden;
        border:1px #CDCDCD solid;
        background-color: white;
    }
    .show
    {
        font-family:tahoma;
        padding:10px; 
        border-bottom:1px #CDCDCD dashed;
        font-size:15px; 
    }
    .show:hover
    {
        background:#364956;
        color:#FFF;
        cursor:pointer;
    }

Oke Jika semua file - file di atas telah dibuat silahkan dijalankan. untuk demonya silahkan coba dibawah beserta link download projectnya.

Statistik

Pencarian Otomatis Menggunakan PHP, MySQL, ajax dan jQuery

2 komentar:

Popular Posts

Recent Comments