Kategori Random

Input Dinamis Autocomplete pada CodeIgniter MySQL dengan JQuery

Posted : 26 Maret 2015 | 08:38:39 , Dibaca 20731 kali

Autocomplete pada pemrograman web digunakan untuk melakukan saran pencarian pada input sebuah inputan dimana data-data yang ditampilkan bisa diambil database maupun dari sebuah array yang telah kita deskripsikan.

Autocomplete bisa menggunakan berbagai macam plugin widget yang telah disediakan oleh banyak pengembang, dan pada kesempatan ini saya akan membahas dengan bantuan plugin jquery ui.

Seperti pada judul tutorial ini ada kata "dinamis" maka nantinya data yang ditampilkan akan dinamis sesuai dengan ketikan kita dan output yang dihasilkan ditampilkan ke multi output. Output text maupun sebuah label yang kita sediakan dan tentunya juga ini kita gabungkan dengan CodeIgniter sebagai frameworknya :D. Mari kita mulai

Langkah 1 : Persiapan

Sediakan peralatan dan plugin yang dibutuhkan (jquery, jquery ui, codeigniter). Agar tidak rancu kita samakan penyebut saja, saya menggunakan jquery v 1.11.1, untuk jquery-ui nya saya gunakan v1.10.3 dan untuk CodeIgniternya menggunakan versi stable 2.2.1.

Langkah 2. Database

Untuk data yang ditampilkan, kita membutuhkan sebuah database sebagai wadah datanya. dan insertkan query data berikut kedalamnya

Strukur tabel

CREATE TABLE `tb_kotaindonesia` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `nama_kota` varchar(50) DEFAULT NULL,
  `ibu_kota` varchar(50) DEFAULT NULL,
  `keterangan` text,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1

Record data tabel

insert into `tb_kotaindonesia` (`id`, `nama_kota`, `ibu_kota`, `keterangan`) values('1','Medan','Medan','Kota medan adalah ibukota Provinsi Sumatera Utara');
insert into `tb_kotaindonesia` (`id`, `nama_kota`, `ibu_kota`, `keterangan`) values('2','Tapanuli Utara','Tarutung','Tapanuli Utara atau sering disebut TAPUT adalah sebuah tempat sejuk');
insert into `tb_kotaindonesia` (`id`, `nama_kota`, `ibu_kota`, `keterangan`) values('3','Jakarta','Jakarta','Jakarta Megapolitan Ibukota Negara Republik Indonesia');
insert into `tb_kotaindonesia` (`id`, `nama_kota`, `ibu_kota`, `keterangan`) values('4','Padang','Padang','Padang adalah tempat wisata jam gadang, disana terdapat jembatan yang membelah sungai musi');
insert into `tb_kotaindonesia` (`id`, `nama_kota`, `ibu_kota`, `keterangan`) values('5','Deliserdang','Lubuk Pakam','Sebuah kota sebelum medan yang kita pijak pertama sekali jika lewat udara (Bandara Kualanamu).');

Langkah 3 : Kupas

Buat sebuah controller codeigniter dan simpan dengan nama kota, buat seperti skrip dibawah. Jika anda bingung settingan codeigniter bisa dibaca di Kategori CodeIgniter

controller kota.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Kota extends CI_Controller
{

    public function __construct() {
        parent::__construct();
        $this->load->model('mkota'); //load model mkota yang berada di folder model
        $this->load->helper(array('url')); //load helper url

    }

	public function index()
	{
        $data['titel']='Multiple Output Autocomplete Jquery UI + CodeIgniter'; //varibel title
        $this->load->view('vkota',$data); //tampilan awal ketika controller kota di akses
	}

    public function get_allkota() {
		$kode = $this->input->post('kode',TRUE); //variabel kunci yang di bawa dari input text id kode
		$query = $this->mkota->get_allkota(); //query model

		$kota 		=  array();
        foreach ($query as $d) {
			$kota[] 	= array(
                'label' => $d->nama_kota, //variabel array yg dibawa ke label ketikan kunci
                'nama' => $d->nama_kota , //variabel yg dibawa ke id nama
                'ibukota' => $d->ibu_kota, //variabel yang dibawa ke id ibukota
                'keterangan' => $d->keterangan //variabel yang dibawa ke id keterangan
            );
	    }
        echo json_encode($kota);      //data array yang telah kota deklarasikan dibawa menggunakan json
    }
}

/* End of file kota.php */
/* Location: ./application/controllers/kota.php */

 

model mkota.php

<?php
class Mkota extends CI_Model {
    var $tabel = 'tb_kotaindonesia';   //variabel tabelnya

    function __construct() {
        parent::__construct();
    }

    //fungsi untuk menampilkan semua data dari tabel database
	function get_allkota() {
        $this->db->from($this->tabel);
		$query = $this->db->get();

        //cek apakah ada data
        if ($query->num_rows() > 0) { //jika ada maka jalankan
            return $query->result();
        }
	}
}
?>

 

views vkota.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="description" content="">
    <meta name="author" content="FaberNainggolan">
    <title><?=$titel?></title>

    <!-- Custom styles for this template -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">
    <link href="<?=base_url()?>assets/jquery/jquery-ui.css" rel="stylesheet">

    <!-- jquery -->
    <script src="<?=base_url()?>assets/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="<?=base_url()?>assets/jquery/jquery-ui.js" type="text/javascript"></script>
    <script>
     $(function () {
        $("#kode").autocomplete({    //id kode sebagai key autocomplete yang akan dibawa ke source url
            minLength:0,
    	    delay:0,
            source:'<?php echo site_url('kota/get_allkota'); ?>',   //nama source kita ambil langsung memangil fungsi get_allkota
            select:function(event, ui){
    	        $('#nama').val(ui.item.nama);
                $('#ibukota').val(ui.item.ibukota);
                $('#ket').val(ui.item.keterangan);
                }
            });
    	});
    </script>
  </head>
<body>
<header>
 <h1><?=$titel?> </h1>
</header>
<div class="container">
<p> <input type="text" id="kode" placeholder="Ketikan nama kota" > </p>
<p>
 Nama Kota : </br><input type="text" id="nama"></br>
 Ibu Kota : </br><input type="text" id="ibukota"></br>
 Keterangan :</br> <textarea id="ket"></textarea>
 </p>
</div>
<footer>
 by Faber Nainggolan
</footer>
</body>
</html>

Keterangan sudah saya buat pada tiap baris yg perlu bantuan silakan dibaca.

Hasil akhir

Gbr 1. Tampilan awal ketika kita akses

 

Gbr 2. Tampilan ketika kita ketikan sesuatu

 

Gbr 3. Hasil dari autocomplete muncul di 3 textbox

 

DEMO | Source Code

 

Demikian tutorial kali ini semoga bermanfaat.

 

Postingan Terkait
» Cetak Laporan Format Excel di Codeigniter ( 25 Jan 2017 | 06:39:12 , 888 hits )
» Membuat Laporan PDF dengan DomPDF di CodeIgniter ( 04 Nov 2016 | 07:42:55 , 1887 hits )
» Edit dan Hapus Foto Upload Codeigniter ( 31 Okt 2016 | 08:25:06 , 4628 hits )
» Membuat Paging dan Search Bootstrap CodeIgniter ( 11 Okt 2016 | 16:26:41 , 8244 hits )
» Menambah Web File Menager pada CKEditor di CodeIgniter ( 15 Sep 2016 | 09:10:43 , 2237 hits )