Facebook merupakan salah satu jejaring sosial yang cukup populer. Jejaring sosial ini pun memiliki keunikan tersendiri bagi penggunanya. Tentu kita pernah bertanya, bagaimana pencarian facebook dibuat. Berikut merupakan tutorial sederhana membuat pencarian facebook menggunakan jQuery, Ajax dan PHP. Show Download Demo Langkah 1Buatlah sebuah database disertai dengan tabel user seperti ketentuan dibawah ini. CREATE TABLE data_user ( iduser INT AUTO_INCREMENT PRIMARY KEY, namadepan VARCHAR(25), namabelakang VARCHAR(25), negara VARCHAR(25), foto VARCHAR(50) ); Kemudian, lakukan koneksi ke database. Anda dapat mengedit file config.php untuk merubah settingan informasi database yang terdapat pada source code.
Langkah 2Buatlah file index.html (contoh) untuk membuat kotak pencarian facebook dan mengisinya dengan syntax jQuery. Berikut contohnya. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.watermarkinput.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".search").keyup(function() { var kotakpencarian = $(this).val(); var dataString = 'searchword='+ kotakpencarian; if(kotakpencarian=='') {} else { $.ajax({ type: "POST", url: "search.php", data: dataString, cache: false, success: function(html) { $("#hasilpencarian").html(html).show(); } }); }return false; }); }); jQuery(function($){ $("#kotakpencarian").Watermark("Cari"); }); </script> <input id="kotakpencarian" class="search" type="text" /></pre> <div id="hasilpencarian"></div> <pre> Langkah 3Buatlah file search.php (contoh). File ini digunakan untuk menampilkan hasil pencarian yang diambil dari database. Kali ini kita akan membuat sebuah tampilan website sosial media yaitu facebook. Tampilan yang akan dibuat adalah tampilan pertama yang akan muncul ketika membuka facebook (tampilan login dan daftar). Dalam pembuatan kali ini bahasa pemrograman web yang digunakan adalah HTML, dan CSS. Tampilan akhirnya akan tampak seperti berikut : Berikut adalah kode dalam file utama "index.html" dan "css.css". index.html<!DOCTYPE html> css.cssbody{ Untuk melihat atau mendownload project lengkapnya silahkan klik disini Bagikan artikel ke: Facebook Google+ Twitter |