5/07/2013

Membuat Search Engine

Membuat Search Engine Menggunakan Ajax


1.      Buat database sql dengan nama databuk

Database: `databuku`
--
-- Table structure for table `buku`
--

CREATE TABLE IF NOT EXISTS `buku` (
  `id_buku` int(10) NOT NULL AUTO_INCREMENT,
  `judul_buku` varchar(64) NOT NULL,
  `id_penerbit_buku` int(10) NOT NULL,
  `id_kategori_buku` int(10) NOT NULL,
  `pengarang_buku` varchar(64) NOT NULL,
  `kd_rak_buku` varchar(32) NOT NULL,
  PRIMARY KEY (`id_buku`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

--
-- Dumping data for table `buku`
--

INSERT INTO `buku` (`id_buku`, `judul_buku`, `id_penerbit_buku`, `id_kategori_buku`, `pengarang_buku`, `kd_rak_buku`) VALUES
(1, 'Muhasabah Cinta Seorang Istri', 4, 2, 'Asma Nadia', 'A01'),
(2, 'Agar Nikah Lebih Barokah', 5, 2, 'Muhammad Nashiruddin Al Albani', 'A01'),
(3, 'Kitab Suci Web Programming', 6, 1, 'Alexander F.K.Sibero', 'A02'),
(4, 'Trik dan Solusi Jitu Pemrograman Web', 2, 1, 'Sandi Hariadi', 'A03'),
(5, 'Trik Dahsyat Menguasai AJAX dengan JQuery', 2, 1, 'Lukmanul Hakim', 'A03'),
(6, 'Buku Pinter JQuery dan PHP', 6, 1, 'Abdul Kadir', 'A02');

--
-- Table structure for table `kategori`
--

CREATE TABLE IF NOT EXISTS `kategori` (
  `id_kategori` int(10) NOT NULL AUTO_INCREMENT,
  `nama_kategori` varchar(32) NOT NULL,
  PRIMARY KEY (`id_kategori`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--

-- Dumping data for table `kategori`
--

INSERT INTO `kategori` (`id_kategori`, `nama_kategori`) VALUES
(1, 'Informatika'),
(2, 'Agama'),
(3, 'Umum');

-- --------------------------------------------------------

--
-- Table structure for table `penerbit`
--

CREATE TABLE IF NOT EXISTS `penerbit` (
  `id_penerbit` int(10) NOT NULL AUTO_INCREMENT,
  `nama_penerbit` varchar(32) NOT NULL,
  PRIMARY KEY (`id_penerbit`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

--
-- Dumping data for table `penerbit`
--

INSERT INTO `penerbit` (`id_penerbit`, `nama_penerbit`) VALUES
(1, 'Andi Offset'),
(2, 'Loko Media'),
(3, 'Aqwam'),
(4, 'Lingkar Pena'),
(5, 'Pro-U Media'),
(6, 'Mediakom');

2.       file untuk koneksi databasenya
 $host='localhost';
 $user='root';
 $pwd='';
 $database='databuku';

 $conn=mysql_connect($host,$user,$pwd) or die (mysql_error());
 mysql_select_db($database,$conn);
?>
3.      Kode  sebagai interface utamanya
 include "db_connect.php";
?>
 Bukuku
rel="stylesheet" type="text/css" href="style.css">
id="top">

id="undertop">
id="logo" src="MyBooks.gif">
id="form_cari" method="post">
 
 
 


type="text" id="kata" name="kata" onkeyup="lihat(this.value)">
type="submit" id="cari" value="Cari"/>

id="kotaksugest" style="font-style:bold;
 position:absolute;background-color:#F8F8F8;
 border:1px solid #D8D8D8;width:393px;visibility:hidden;
 margin-left:353px;z-index:100;list-style:none;
 font:14px Arial bold;padding:5px 0 5px 5px;margin-left:352px;">




 include "searchQry.php";
?>


4.      Kemudian buat file baru dengan nama ajax.js yang memuat fungsi-fungsi javascript untuk menampilkan suggestion
var drz;
 function lihat(kata){
 if(kata.length==0){
 document.getElementById("kotaksugest").style.visibility = "hidden";
 }else{
 drz = buatajax();
 var url="searchSuggest.php";
 drz.onreadystatechange=stateChanged;
 var pilihan=encodeURIComponent(document.getElementById("pilihan").value)
 var kata=encodeURIComponent(document.getElementById("kata").value)
 drz.open("GET", "searchSuggest.php?pilihan="+pilihan+"&kata="+kata, true)
 drz.send(null)
 }
 }

 function buatajax(){
 if (window.XMLHttpRequest){
 return new XMLHttpRequest();
 }
 if (window.ActiveXObject){
 return new ActiveXObject("Microsoft.XMLHTTP");
 }
 return null;
 }

 function stateChanged(){
 var data;
 if (drz.readyState==4 && drz.status==200){
 data=drz.responseText;
 if(data.length>0){
 document.getElementById("kotaksugest").innerHTML = data;
 document.getElementById("kotaksugest").style.visibility = "";
 }else{
 document.getElementById("kotaksugest").innerHTML = "";
 document.getElementById("kotaksugest").style.visibility = "hidden";
 }
 }
 }
  function isi(kata){
 document.getElementById("kata").value = kata;
 document.getElementById("kotaksugest").style.visibility = "hidden";
 document.getElementById("kotaksugest").innerHTML = "";
 }
5.      Setelah itu ketik kode di bawah ini untuk menampilkan data suggestion berdasar  inputan dari user ! File ini akan dipanggil pada fungsi lihat(kata) yang terdapat dalam file ajax.js.  Simpan file ini dengan nama searchSuggest.php
 include "db_connect.php";
 $pilihan = $_GET['pilihan'];
 $kata = $_GET['kata'];

 $query=null;
 if($pilihan == 'judul'){
 $query ="select judul_buku from buku where judul_buku like '$kata%' ";
 }
 else if($pilihan == 'pengarang'){
 $query = "select pengarang_buku from buku where pengarang_buku like '$kata%' ";
 }
 else if($pilihan == 'penerbit'){
 $query = "SELECT distinct penerbit.nama_penerbit FROM buku ,penerbit
 where buku.id_penerbit_buku = penerbit.id_penerbit
 and penerbit.nama_penerbit LIKE '$kata%' ";
 }
 else if($pilihan == 'kategori'){
 $query = "SELECT distinct kategori.nama_kategori FROM buku,
 kategori where buku.id_kategori_buku = kategori.id_kategori
 and kategori.nama_kategori LIKE '$kata%' ";
 }
$res=mysql_query($query) or die(mysql_error());

 while($k=mysql_fetch_array($res) ){
 echo '

  • '.$k[0].'
    • ';
     }
    ?>
    6.      Buatlah file baru dengan nama searchQry.php yang akan menampilkan hasil pencarian
     $kata = $_POST['kata'];
     $pilihan = $_POST['pilihan'];

     if ((isset($kata)) and (!empty($kata))){
     echo "
    ";
     echo "
    Penelusuran

    ";
     echo "
    ";
     echo "
    ";
     echo "";
     echo " ";
     echo "
    No

    Judul Buku

    Pengarang

    Penerbit

    Kategori

    Kode Rak
    ";
     echo "
    ";

     $query = mysql_query("SELECT * FROM buku
     LEFT JOIN penerbit ON buku.id_penerbit_buku = penerbit.id_penerbit
     LEFT JOIN kategori ON buku.id_kategori_buku = kategori.id_kategori
     WHERE buku.judul_buku LIKE '$kata%'
     OR buku.pengarang_buku LIKE '$kata%'
     OR penerbit.nama_penerbit LIKE '$kata%'
     OR kategori.nama_kategori LIKE '$kata%'");

     $i=0;
     while($data=mysql_fetch_array($query)){
     $i++;
     echo"

    ".$i."

    ".$data['judul_buku']."

    ".$data['pengarang_buku']."

    ".$data['nama_penerbit']."

    ".$data['nama_kategori']."

    ".$data['kd_rak_buku']."

    ";
     }
     echo "
    ";
     echo "
    ";
     }
    ?>

    7.      Agar lebih menarik, berikan style dengan code CSS berikut ini
    *{
     margin:0;
     padding:0;
    }
    table{
     border-collapse:collapse;
     width:auto;
    }
    th{
     border:1px solid #686868;
     padding:2px 2px 2px 5px;
     background:#F0F0F0;
    }
    td{
     border:1px solid #686868;
     padding:2px 2px 2px 5px;
    }
    #result{
     margin-top:30px;
     margin-left:100px;
    }
    #top{
     width:100%;
     height:30px;
     background:black;
    }
    #undertop{
     width:100%;
     height:70px;
     background:#F0F0F0;
     border-bottom:1px solid #E0E0E0;
    }
    #logo{
     padding:5px 100px 0 50px;
     width:200px;
     height:65px;
     float:left;
    }
    #form_cari{
     padding:23px 0 0 100px;
    }
    #pilihan{
     border:1px solid #D8D8D8;
     padding:5px 5px 5px 5px;
    }
    #kata{
     width:400px;
     height:30px;
     border:1px solid #D8D8D8;
     padding:0 0 0 5px;
    }
    #list{
     padding-bottom:5px;
    }
    #cari{
     width:40px;
     height:30px;
     border:1px solid #808080;
     border-radius:5px;
     background:#0066FF;
     color:white;
    }
    #freespace{
     height:40px;
     border-bottom:1px solid #E0E0E0;
     color:#FF0033;
     text-align:left;
     padding-top:20px;
     padding-left:50px;
    }
    #left{
     float:left;
     font:18px "Arial";
    }
    #right{
     font:14px "Arial";
     color:#808080;
     margin-left:300px;
     margin-top:4px;
    }
    8.      Hasil Akhir





    Posted by Bima at
    Labels:

    1 komentar:

    1. joban halaudin18/07/13, 10.20

      mantap ni andai aja dulu ane kul ngambil komputer ckckck. salam kenal gan

      BalasHapus

    Langganan: Posting Komentar (Atom)