Tutorial Belajar Pemrograman, membuat game, membuat aplikasi, membuat program, android, game maker, yii, php, CSS, HTML, java, javascript, codeigniter, jquery, Pascal, c++

Sunday, March 1, 2015

Cara Membuat Autocomplete Dari Database Dengan jQuery dan PHP

Cara Membuat Autocomplete Dari Database Dengan jQuery dan PHP - Kali ini kita akan belajar membuat Autocomplete field yang datanya berasal dari database ( MySQL ), data akan di ambil menggunakan bantuan jQuery dan PHP. Autocomplete adalah fitur yang berfungsi memberikan sugesti prediksi data dari inputan oleh user sehingga mempermudah dan mempercepat proses input. konsepnya adalah dengan cara mencocokan setiap karakter yang dimasukan oleh user dengan data yang telah ada atau disimpan di dalam database.


Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Database

Pertama buatlah sebuah database terlebih dahulu dengan nama db_anime kemudian buatlah sebuah table di dalamnya dengan nama tbl_anime dengan struktur :

NameTypeSizeExtraPrimary
idINT100auto_incrementyes
nama_animeVARCHAR50

Masukan beberapa data dummy sebagai contoh

Data dummy autocomplete

jQuery

Buatlah sebuah folder di dalam webserver anda dengan nama Autocomplete kemudian buatlah lagi sebuah folder dengan nama js

Downloadlah jQuery UI di situs resminya di sini : DOWNLOAD

Downloadlah jQuery di situs resminya di sini : DOWNLOAD

Kemudian exstrak keduanya di dalam folder js

PHP

Buatlah sebuah file PHP di dalam folder Autocomplete dengan nama data.php dengan isi script :


<?php
//connect ke database
  mysql_connect("localhost","root","");
  mysql_select_db("db_anime");
//harus selalu gunakan variabel term saat memakai autocomplete,
//jika variable term tidak bisa, gunakan variabel q
$term = trim(strip_tags($_GET['term']));
 
$qstring = "SELECT * FROM tbl_anime WHERE nama_anime LIKE '".$term."%'";
//query database untuk mengecek tabel anime 
$result = mysql_query($qstring);
 
while ($row = mysql_fetch_array($result))
{
    $row['value']=htmlentities(stripslashes($row['nama_anime']));
    $row['id']=(int)$row['id'];
//buat array yang nantinya akan di konversi ke json
    $row_set[] = $row;
}
//data hasil query yang dikirim kembali dalam format json
echo json_encode($row_set);
?>

File ini berfungsi untuk koneksi database kemudian file akan melakukan pencarian data dalam tabel dari inputan yang dimasukan oleh user kemudian dicocokan dengan field nama_anime jika bertemu yang cocok kemudian data di kembalikan dalam format json untuk di tampilkan sebagai sugesti autocomplete.

Buatlah sebuah file PHP baru di dalam folder Autocomplete dengan nama index.php dengan isi script :

<!doctype html>
  
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Autocomplete dari database dengan jQuery dan PHP | Jin Toples Programming</title>
 <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet"
    href="js/jquery-ui.css" />
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/jquery-ui.js"></script>
 
    <script>
/*autocomplete muncul setelah user mengetikan minimal2 karakter */
    $(function() {  
        $( "#anime" ).autocomplete({
         source: "data.php",  
           minLength:2, 
        });
    });
    </script>
</head>
<body>
<div class="wrap">
 <h1>Jin Toples Programming</h1>
    <h1>Autocomplete dari database dengan jQuery dan PHP</h1>
 <div class="ui-widget">
  <label for="anime">Judul Anime : </label>
  <input id="anime"  />
 </div>
 <p class='copy'>Copyright &copy <a href="http://www.jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
</div>
</body>
</html>

CSS

Sekarang untuk style tampilannya buatlah sebuah file CSS di dalam folder Autocomplete dengan nama style.css dengan isi script :

<style>
 *{
  margin: 0;
        padding: 0;
    }
 a{
  text-decoration: none;
        color: #333;
    }
    body {
        text-align:center;
        background-color:#61b3de;
        font-family:Arial, Helvetica, sans-serif;
  font-size:80%;
  color:#666;
 }
 .wrap {
  background: #f3f8fb;
        width:730px;
  margin:30px auto;
  border: 4px dashed #61b3de;
  border-radius:4px;
  padding: 20px 5px;
 }
 h1 {
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:170%;
 color:#645348;
 font-style:italic;
 text-decoration:none;
 font-weight:100;
 padding: 10px;
 }
</style>

Autocomplete Dari Database Dengan jQuery dan PHP anda sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran. silahkan baca tutorial jQuery dan PHP lainnya.

*Notes Jika sugesti tidak muncul
- Perhatikan baik - baik nama dari file JS nya di index.php pastikan file jQuery dan jQuery UI terload
- Perhatikan baik - baik nama field dan tabel anda yang ada di databse sudah sama dengan yang di data.php

Anda juga dapat mendownload file jadinya di sini : DOWNLOAD

Terima Kasih Telah Mengunjungi Blog Sederhana Ini.

Di Mohon Apabila Anda Ingin Mengcopas Artikel Pada Blog ini Cantumkan URL Sumber.

Sebagai Pengunjung Yang Baik Anda Dapat Meninggalkan Komentar di Blog Sederhana Ini.

Share this post

7 komentar

  1. sugesti muncul saat 2 atau lebih karakter.
    tapi bagaimana cara agar 1 karakter saja muncul ?

    ReplyDelete
    Replies
    1. sepertinya minLength:2, pada index.php diganti dengan 1

      Delete
  2. maaf saya baru belajar jquery
    klo jquery UI yg d download udah zip file
    tp klo jquery ya aja kan masi code, apa harus d buatkan file .js sndiri dgn nama contoh "jQuery JavaScript Library v1.7.js"
    mohon pencerahannya thx

    ReplyDelete

:) :) :-) :-) :)) :)) =)) =)) :( :( :-( :-( :(( :(( :d :d :-d :-d @-) @-) :p :p :o :o :>) :>) (o) (o) [-( [-( :-? :-? (p) (p) :-s :-s (m) (m) 8-) 8-) :-t :-t :-b :-b b-( b-( :-# :-# =p~ =p~ :-$ :-$ (b) (b) (f) (f) x-) x-) (k) (k) (h) (h) (c) (c) cheer cheer

 
© Jin Toples Programming
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0