Membuat Search Autocomplate menggunakan JQUERY dan JSON

Assalamualaikum,

json

Alhamdulillah, setelah lebih dari seabad saya tidak update ini blog, karena sedang di suruh fokus ke Advertising sama si Bos, akhirnya ini mau update masalah JSON.

Q: Apa itu JSON?
A: JSON singakatan dari Javascript Object Notation. ini adalah tipe file atau format untuk penyetoran sebuah data. lebih tepatnya seperti XML. kalau masih bingung anda bisa membaca keteranannya disini

kita tidak akan menjelaskan tentang JSON karena disana sudah lengkap.
Intinya dalam Autocomplate ini data dari MYSQL akan diubah/diconvert dahulu kedalam Format JSON lalu akan digunakan dalam Suggest Autocomplate.

Q:Apa kelebihan Search dengan JSON?
A:Menurut yang membuat JSON, kelebihannnya antara lain 1.Lebih Ringakas dalam Penulisan 2. Lebih cepat dalam Pengaksesan data.

Kita bandingkan saja. Sebuah data dalam XML akan berformat seperti ini:

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don’t forget me this weekend!</body>
</note>
<note>
<to>Jone</to>
<from>Jini</from>
<heading>Reminder</heading>
<body>Go To Hell!</body>
</note>

Sedangkan Format JSON speerti ini

“note”: [
{ “to”:”Tove” , “From”:”Jani”, “Heading”:”Reminder”, “Body”:”Don’t forget me this weekend!” },
{ “to”:”Jone” , “From”:”Jini”, “Heading”:”Reminder”, “Body”:”Go to Hell!” }
]

Bagaiamana? sudah mengerti perbedaannya, sebenarnya tidak ada bedanya, hanya saja si JSON ini teknologi baru, lebih baru dari XML. Lalu penggunaanya?

Oke kita akan buat Searching menggunakan ini semua. bahan yang disiapkan. PHP, MYSQL(Wajib), Sedikit Javascript/Jquery, Dan sedikit Json.

anda buat saja File index.php yang berisi code berikut:

<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>jQuery UI Autocomplete – Default functionality</title>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css” />
<script src=”http://code.jquery.com/jquery-1.9.1.js”></script>
<script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js”></script>
<link rel=”stylesheet” href=”/resources/demos/style.css” />
<script>
$(function()
{

$( “#tags” ).autocomplete({

source: ‘source.php’

});
});
</script>
</head>
<body>
<div class=”ui-widget”>
<label for=”tags”>Tags: </label>
<input id=”tags” />
</div><!–end of ui-widget–>
</body>
</html>

Penjelasan. File diatas membuat input text untuk kolom searching dan mengambil source jquery dari websitenya.

lalu buat File source.php dan isi dengan code berikut:

<?php
include “koneksi.php”;

$req = “SELECT name “.”FROM mytable “.”WHERE name LIKE ‘%”.$_REQUEST[‘term’].”%’ “;

$query = mysql_query($req);

while($row = mysql_fetch_array($query))
{
$results[] = array(‘label’ => $row[‘name’]);
}

echo json_encode($results);
?>

Penjelasan:
File diatas adalah file untuk mengambil data dari PHP lalu di convert kedalam Format JSON. JIka anda ingin melihat format Jsonnya, ketikan source.php

jangan lupa 1 file lagi koneksi.php dan isi dengan code berikut source.php?term=b di URL broser anda, maka akan menghasilkan data dengan format JSON like This :
[{“label”:”Bilbo Baggins”},{“label”:”Boromir”},{“label”:”Frodo Baggins”},{“label”:”Meriadoc Merry Brandybuck”}]

<?php
$server =”localhost”;
$username =”root”;
$password =”password anda, jika kosong ya sudah kosongi”;
$database =”nama databse anda”;
mysql_connect(“$server”,”$username”,”$password”)or die(“Gagal”);
mysql_select_db(“coba”)or die(“Database tidak ditemukan”);
?>

Penjelasan. Diatas adalah file koneksi untuk terhubung dengan Database. jadi sesuaikan dengan anda.

jika sudah coba anda jalankan file index.php tadi. Kalo saya, saya buat folder dan saya namakan json.
jadi tinggal panggil localhost/json
ketik huruf a gitu. hasilnya adalah nama2 tokoh di lord of the ring.

yang gk mau repot bisa langsung download aja disni

ke asikan dari Coding adalah bagaimana cara kita menemukan Apa yang kita tuju. Kalo gk mau repot mending jangan jadi Programer hehe. Just Kidding.

Jika ada masalah bisa Comment ke saya(walau saya juga tahu, kalau anda jarang komen):D tapi saya tetap senang jika anda mampir ke Blog.

Sampai jumpa di update berikutnya

Wassalamualaikum, Wr Wb





Leave a Reply

Your email address will not be published. Required fields are marked *