Code Pencarian sederhana di Facebook

Sebagai pemula di dunia pemrograman web, kadang browsing sana sini, melihat website personal orang lain atau web milih perusahaan tertentu kadang membuat saya berpikir “ini kok bisa jalan seperti ini ya,,gemana buatnya, lah terus ini bisa ngelink unik kaya begini gemana ya…”. Gak usah jauh jauh, kita pasti sering buka facebook, chatting dengan teman, upload foto, komentar status teman, posting event dan lain sebagainya,,pernah gak berpikir “wuh,,ini buatnya gemana ya”. Pasti buat pemula seperti saya ini teman-teman merasakan yg sama bukan..

Nah saya kemarin sempet posting artikel watermark input, trus saya kagum lagi pas kita ketik huruf a di pencarian tersebut, langsung muncul nama-nama teman kita. Lalu bagaimana membuatnya ya ?

Langsung kita main logika.” Setiap kita ketik huruf pada input tersebut, lakukan akses query ke database kita, cari nama teman yang memiliki nama seperti huruf pada input yang kita ketikan, bila ada tampilkan namanya”. Mungkin itu logika sederhananya ya. Lalu bagaimana buatnya,,ya sebelumnya kita pahami dikit-dikit logika itu,,

“setiap kita ketik huruf pada input” bagaimana implementasi ke code ? ya pake event onkeyup() tapi kalau di jQuery cukup dengan event keyup.

“lakukan query ke database dan cari nama di database”, disini kebayang kalau kita langsung akses ke db dengan AJAX

Langsung kita buat codingnya ya…
Buat file index.php untuk tempat input nama.

<html>
<head>
<title>Simpel Search di FB</title>
<style type='text/css'>
	#kotak
	{
		width:250px;
		display:none;
		float:right;
		margin-right:352px;
		margin-top:-3;
	}
	
	.kotak_data
	{
		padding:2px;
		border:solid 1px #dedede;
		font-size:14px;
		height:35px;
		text-decoration:none;
		text-align:left;
		list-style:none;
	}
	
	ul li:hover 
	{
		background:#0033FF;
		color:#FFFFFF;
	}

	.search_txt
	{
		padding:2px;
		margin:2px;
		width:230px;
	}
	
	
</style>
<script language='javascript' src='../../js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='../../js/jquery.watermark.min.js'></script>

<script type='text/javascript'>
	$(document).ready(function(){
		$("#loading").hide();
	});
		
	
	$(function(){
		$(".search_txt").watermark("ketik disini");
		
		$(".search_txt").keyup(function() 
		{
			var hurufcari = $(".search_txt").val();
			var data_cari = "hurufcari="+hurufcari;
			
			if(hurufcari!='')
			{
				$("#loading").show();
				$("#loading").fadeIn(500).html("<img src='loading.gif' /> Loading data...");
				
				
				$.ajax({
					type: "POST",
					url: "aksi.php",
					data: data_cari,
					success: function(data){
						$("#kotak").html(data).show();
						$("#loading").hide();
					}
				});
			}else{
				$("#kotak").hide();
			}
			return false;
		});
	});
		
</script>
</head>
<body>
<center>
    <form id='fb_form'>
		<div id='search'>
			Cari<input type='text' class='search_txt'>
			<div id='loading'></div>
		</div>
		<ul id="kotak">
				
		</ul>
	</form>
</center>
</body>
</html>

Oiya, kita disini tidak bisa lepas dari penggunaan AJAX agar cepat dan dinamis. Disini juga saya menggunakan AJAX di Jquery.

Lalu setelah itu kita buat aksi.php dimana code file ini untuk menjalankan query / akses ke database. Berikut adalah codenya :

<?php

$host = "localhost";
$user = "root";
$password = "adiputra";
$database = "blog_tes";

mysql_connect($host, $user, $password) or die("error : ".mysql_error());
mysql_select_db($database) or die("error : ".mysql_error());


	if(!empty($_POST))
	{
		# ambil setiap huruf yg diketikan
		$huruf=$_POST['hurufcari'];
		
		# jalankan query berdasarkan huruf yg diketikan
		$sql = mysql_query("select * from teman where nama like '$huruf%' order by id_teman LIMIT 3");
		
		# cek apa ada data dari hasil query
		$jml = mysql_num_rows($sql);
		if($jml!=0){ # jika ada data dari hasil query
			while($row=mysql_fetch_array($sql)) # lakukan fetch data dari query
			{
				$nama=$row['nama'];
				
				#tebalkan huruf yg diketikan
				$nama_tebal='<b>'.$huruf.'</b>';
				
				# gabungkan huruf yang tebal dengan nama asli
				$gabung_nama = str_ireplace($huruf, $nama_tebal, $nama);
				
				# tampilkan dalam bentuk li
			?>
					<li class='kotak_data'>
						<span><?php echo $gabung_nama; ?></span>
					</li>
			<?php
			
			}
		}else{
			# disini data kosong, alias tidak ada huruf yg sesuai dengan nama teman
		}
		
	}else{
		echo "data yg di POST kosong";
	}

?>

hasilnya bisa seperti ini :

Code-code diatas, udah saya beri kometar untuk memahami maksud tiap baris kode. Maaf banget tidak blum bisa buat demo livenya, tapi teman-teman bisa download di alamat ini lalu sesuaikan dengan database komputer local kamu.

[ download ]

jangan lupa file jquery dan plugin watermarknya download dan sesuaikan dulu ya sama alamat pathnya…

Moga ada manfaatnya 🙂

9 thoughts on “Code Pencarian sederhana di Facebook

  1. maaf mas saya masih nubi.
    kalo pencarian seperti itu memperberat kerja server atau tidak ya?
    salam kenal ya mas

Silahkan Komentar...

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s