Home > AJAX, PHP > Membuat Fasilitas Search seperti Facebook dengan PHP

Membuat Fasilitas Search seperti Facebook dengan PHP

Kita semua tentu mengetahui, dan memiliki akun di Facebook kan??Dan saya yakin, pasti Anda semua pernah menggunakan fasilitas Search Friend yang disediakan oleh Facebook.. Pada artikel ini, saya akan mencoba membuat sebuah fasilitas search, seperti search friend yang dimiliki oleh facebook.

Sebelum membuat scriptnya, terlebih dahulu saya ingin mengenalkan suatu teknik pemrograman yang akan digunakan, yaitu AJAX (Asynchronous JavaScript And XML). Fungsi dari AJAX adalah me-load suatu halaman tanpa perlu di-refresh sehinggan web menjadi lebih interaktif dengan user.

Baik…kita mulai membuat fasilitas search yang mirip dengan FB. Pertama kita membuat database barang, berikut SQL dari barang.sql

CREATE TABLE `barang` (
`id` int(5) NOT NULL auto_increment,
`nama` varchar(20) NOT NULL,
`stock` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

INSERT INTO `barang` VALUES (1, ‘Baju’, 405);
INSERT INTO `barang` VALUES (2, ‘Celana’, 1);
INSERT INTO `barang` VALUES (3, ‘Kemeja’, 4);

Setelah kita membuat database, kemudian kita membuat script untuk tempat kita menginput nama barang yang akan kita cari, yaitu search.html

<html>
<head>
<title>Search seperti FB by Erick Lisangan</title>
<script language=’JavaScript’>

var ajaxRequest;
function getAjax() //memeriksa apakah web browser mendukung AJAX
{
try
{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
// Something went wrong
alert(“Your browser broke!”);
return false;
}
}
}
}

function validasi(keyEvent) //untuk mendapatkan nilai dari inputan yang dimasukkan
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target: keyEvent.srcElement;

if (keyEvent.type == “keyup”)
{
var targetDiv = document.getElementById(“hasil”);
targetDiv.innerHTML = “<div></div>”;
if (input.value)
{
getData(“search.php?nama=” + input.value);

}
}
}

function bukaInfo(id) //membuka link dari hasil pencarian
{
ajaxRequest.open(“GET”,”search.php?id=”+id);
ajaxRequest.onreadystatechange =
function()
{
var targetDiv = document.getElementById(“info”);
targetDiv.innerHTML = ajaxRequest.responseText;
}
ajaxRequest.send(null);
}

function getData(dataSource) //menampilkan kemungkinan hasil nama barang yang diinput
{
getAjax();
if (ajaxRequest)
{
ajaxRequest.open(“GET”,dataSource);
ajaxRequest.onreadystatechange =
function()
{
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200)
{
var targetDiv = document.getElementById(“hasil”);
targetDiv.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.send(null);
}
}
</script>
</head>
<body>
Nama Barang : <BR><input type=’text’ onkeyup=”validasi(event)” id=’inputan’> <div id=’hasil’></div><BR><div id=’info’></div>
</body>
</html>

Setelah kita membuat script HTML, kemudian kita membuat script PHP untuk mencari dan menampilkan hasil input nama barang yang kita cari, yaitu search.php

<?php
mysql_connect(“localhost”,”root”,”erick”);
mysql_select_db(“barang”);

if (isset($_GET[‘nama’]))
{
$nama = $_GET[‘nama’];

$query = mysql_query(“SELECT id,nama FROM barang WHERE nama LIKE ‘%$nama%'”); //query ke database untuk
//mencari nama barang yang mirip dengan inputan kita
$hasil = mysql_num_rows($query); //mengecek jumlah hasil query dari $query
if ($hasil > 0)
{
while ($data = mysql_fetch_row($query)) //menampilkan kemungkinan dari hsil input
{
?>
<a href=’javascript:bukaInfo(<?=$data[0]?>);’ title='<?=$data[1]?>’><?=$data[1]?><BR>
<?php
}
}
else //jika tidak terdapat data yang kita inginkan
{
echo “Data tidak ditemukan”;
}

}

else if(isset($_GET[‘id’])) //menampilkan info dari hasil pencarian
{
$id = $_GET[‘id’];
$query = mysql_query(“SELECT * FROM barang WHERE id=’$id'”);
$info = mysql_fetch_row($query);
echo “ID : “.$info[0].”<BR>Nama : “.$info[1].”<BR>Stock : “.$info[2];
}
?>

Apabila kita menjalankan script search.html melalui web server, maka kita mendapatkan tampilan seperti dibawah ini

Apabila kita memasukkan huruf a pada form input nama barang, maka secara otomatis, script PHP search.php akan mencari nama barang yang memiliki huruf  a.

Apabila kita mengklik salah satu link dari hasil pencarian yang kita cari, misalnya baju, maka kita akan memperoleh tampilan sebagai berikut :

Sehingga tanpa tombol search pun kita dapat melihat kemungkinan dari nama barang yang akan kita cari.

download script

Dengan menggunakan AJAX, maka script PHP yang kita buat akan menjadi lebih interaktif tanpa perlu melakukan refresh. Semoga artikel ini bermanfaat bagi Anda. Gbu….

Categories: AJAX, PHP
  1. 17 January 2013 at 11:06

    script it d k0pas ya!

  2. Sylvie Yunjae
    2 December 2012 at 05:58

    kalo pencarian kaya FB mustinya muncul tab dibawah textfield pencarian donk ??
    gag cuma text gitu…

    pake tab bisa ngga ??😀

  3. 12 September 2012 at 23:04

    mantap gan, numpang belajar yach

  4. yuda
    30 April 2012 at 13:53

    kalo id nya di rubah jadi varchar kok ga bisa tampil ?

  5. Yudi Borneo
    8 April 2012 at 18:02

    thanks bro…
    saya coba belajar dulu …

  6. rara
    27 January 2012 at 20:47

    salam mas broo, mau nnya ini pke database apa yah?

  7. joe
    15 April 2011 at 18:28

    mas kalau mw edit nis siswa tapi nis tidak primary key gmna y

    • 15 April 2011 at 19:36

      pake query UPDATE saja…hehehe…UPDATE nama_tabel SET atribut=’……’ WHERE atribut_patokan=’……’;

  8. aga
    16 February 2011 at 14:32

    Nice, sngat membantu..

  9. dis
    17 December 2010 at 11:24

    bro, kalo inputan text nya lebih dari 1 gimana ya?
    mohon bantuan dong. thx

    • 17 December 2010 at 12:36

      berarti fungsi dalam ajax-nya harus ditambahkan lg…

      • 9 May 2012 at 08:47

        Erick Lisangan :
        berarti fungsi dalam ajax-nya harus ditambahkan lg…

        bagian mana nya ya kak ?

      • 9 May 2012 at 08:49

        “berarti fungsi dalam ajax-nya harus ditambahkan lg…”
        bagian mana ya yang harus ditambahkan .. mohon bantuannya ..

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: