Halaman

Sabtu, 08 Desember 2012

Membuat Autocomplete Menggunakan jQuery, PHP, MySQL

Tutorial saya kali ini adalah membuat fitur Autocomplete menggunakan jQuery, PHP, dan MySQL. Fitur Autocomplete adalah suatu fitur dari jQuery UI yang akan memberikan saran pencarian suatu data dalam elemen textbox HTML.

Jadi misalnya Anda mencari suatu string kata misalnya mencari nama kota di seluruh dunia dan Anda memasukan kata "Band" maka dari kata itu, fitur Autocomplete akan menampilkan nama-nama kota di seluruh dunia yang diawali kata tersebut. Untuk lebih jelasnya lihat gambar berikut:

autocomplete jquery php mysql
Gambar Fitur Autocomplete nama kota di dunia menggunakan jQuery, PHP, MySQL


jQuery, jQuery UI, dan jQuery UI CSS
Fitur Autocomplete ini berasal dari JavaScript Framework khusus untuk interaksi dan efek tampilan yakni jQuery UI. Agar bisa berjalan, jQuery UI membutuhkan jQuery. Untuk itu Anda perlu mendownload file jQuery UI dan jQuery.

Karena file jQuery UI membutuhkan fungsi atau interface yang ada di dalam file jQuery, maka saat menuliskan penyertaan filenya di dalam kode program, file jQuery dituliskan terlebih dahulu baru kemudian file jQuery UI-nya. Urutan penulisan kode program sangat berpengaruh di sini.

Contoh potongan skripnya dengan urutan yang benar:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

Tanpa file CSS, fitur Autocomplete ini terlihat aneh dan kurang nyaman dipandang. Untuk itu file CSS untuk jQuery UI diperlukan. File CSS untuk jQUery UI sudah disediakan oleh pengembangnya dan ada beberapa themes yang bisa Anda pakai. Untuk keperluan contoh ini, saya menggunakan file CSS: jquery-ui.css. Tambahkan file CSS tersebut ke dalam file web Autocomplete Anda.

Membuat jQuery UI Autocomplete
Untuk menggunakan fitur Autocomplete pada elemen textbox, cukup sertakan kode berikut:
<!DOCTYPE html>
<html>
  <head>
    <title>husnanlabs.blogspot.com</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
  </head>
  <body>
    <div class="ui-widget">
    Kota: <input type="text" id="txtNamaKota" name="txtNamaKota" />
    </div>
    <script>
      var arrNamaKota = ["Jakarta", "Bandung", "Semarang", "Yogyakarta", "Surabaya"];
      $(document).ready(function() { 
        $("#txtNamaKota").autocomplete({
          source: arrNamaKota
        });
      });
    </script>
  </body>  
</html>

Sekarang simpan file tersebut dalam sebuah file HTML kemudian jalankan melalui browser. Jika tidak ada masalah sekarang lanjut mengintegrasikannya dengan PHP dan MySQL.

jQuery UI Autocomplete Menggunakan PHP dan MySQL
Sesuai dengan judul artikel saya ini, kita akan membuat sebuah contoh penggunaan fitur Autocomplete di dalam halaman web PHP dan database server MySQL.

Sebelum melangkah lebih lanjut, pastikan kode PHP Anda telah berhasil dihubungkan dengan database MySQL. Untuk keperluan contoh ini, saya memakai database yang disediakan oleh website MySQL yakni database World.

Modifikasi kode diatas dengan menambahkan script atau kode untuk menghubungkan ke database server MySQL. Pada contoh ini saya telah mendefinisikan scriptnya dalam file tersendiri yakni file koneksi.php, sehingga saya menuliskan scriptnya seperti ini:
<?php
  require_once "koneksi.php";
?>

Selanjutnya tulislah script atau kode PHP berikut ke dalam file autocomplete yang Anda buat tadi. Dalam contoh ini saya menuliskannya di atas sendiri setelah script untuk proses koneksi ke database.
<?php
  $sql = "SELECT Name FROM City";
  $arrNamaKota = array();
        
  try {
    $query = $koneksi->prepare($sql);
    $query->execute();
    while($data = $query->fetch()) {
      $arrNamaKota[] = $data["Name"];
    }
  }
  catch (PDOException $e) {
    echo $e->getMessage();
  }
?>

Karena proses yang terjadi melibatkan pengambilan sejumlah data dari database MySQL, maka diperlukan perintah SQL: SELECT. Kemudian diperlukan juga sebuah variabel array PHP yang fungsinya untuk menampung semua data hasil query SELECT. Dalam contoh ini variabel $arrNamaKota akan menampung semua kota yang didapat dari query SELECT.

Dalam contoh ini saya menggunakan PDO (PHP Data Object) untuk mengambil data dari database server MySQL. Anda dapat menggunakan perintah prosedural seperti fungsi mysql_query() namun penggunaan fungsi-fungsi prosedural tersebut tidak diajurkan lagi karena statusnya deprecated yang artinya sudah tidak dikembangkan lagi dan suatu saat fungsi-fungsi tersebut akan ditiadakan.

Setelah data diambil dan dimasukkan ke dalam variabel array, data tersebut nantinya akan dimasukan ke dalam variabel array JavaScript melalui fungsi PHP json_encode(). Untuk itu ganti definisi isian variabel JavaScript arrNamaKota untuk merujuk data yang diambil dari kode PHP melalui fungsi json_encode() ini. Untuk lebih jelasnya lihat proses pergantiannya melalui potongan kode berikut:
var arrNamaKota = ["Jakarta", "Bandung", "Semarang", "Yogyakarta", "Surabaya"];

Kode di atas diubah menjadi:
var arrNamaKota = <?php echo json_encode($arrNamaKota); ?>;

Untuk memperjelas semuanya, berikut kode lengkap dari penggunaan jQuery UI Autocomplete yang diintegrasikan dengan PHP dan MySQL:
<?php
  require_once "koneksi.php";

  $sql = "SELECT Name FROM City";
  $arrNamaKota = array();
        
  try {
    $query = $koneksi->prepare($sql);
    $query->execute();
    while($data = $query->fetch()) {
      $arrNamaKota[] = $data["Name"];
    }
  }
  catch (PDOException $e) {
    echo $e->getMessage();
  }
?>

<!DOCTYPE html>
<html>
  <head>
    <title>husnanlabs.blogspot.com</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
  </head>
  <body>
    <div class="ui-widget">
    Kota: <input type="text" id="txtNamaKota" name="txtNamaKota" />
    </div>
    <script>
      var arrNamaKota = <?php echo json_encode($arrNamaKota); ?>;
      $(document).ready(function() { 
        $("#txtNamaKota").autocomplete({
          source: arrNamaKota
        });
      });
    </script>
  </body>  
</html>  

Demikian artikel saya yang berjudul "Membuat Autocomplete Menggunakan jQuery, PHP, MySQL" ini. Semoga bermanfaat :D

© 2012 husnanlabs.blogspot.com

8 komentar:

  1. itu $query = $koneksi->prepare($sql);

    prepare dr mana ?

    BalasHapus
  2. gan auto complete di gabung sama chaining bsa g ya???

    BalasHapus
  3. bozz kalo misal ada 2 inputan dan masing-masing ngambil dari tabel yang berbeda
    ex:(Inputan A, Inputan B) (Tabel A, Tabel B) bisa ga?

    BalasHapus
  4. itu kan sudha include koneksi.
    tapi $koneksi isinya ambil darimana ?
    baca disini kayaknya harus isi manual

    BalasHapus
  5. Autocomplete itu metodenya bagaimana sih

    BalasHapus
  6. " source: arrNamaKota " script ini untuk apa yaa? saya bingung, dimana-mana ada arrNamaKota

    BalasHapus