Tutorial Cara Membuat Autocomplete dengan CodeIgniter

Dalam tutorial kali ini kita akan membahas bagaimana cara membuat autocomplete dengan codeigniter, dalam pembahas ini saya asumsikan sahabat semua sudah faham setting awal codeigniter.

Autocomplete atau melengkapi kata adalah sebuah fitur dimana aplikasi memprediksi sisa dari kata yang diketik oleh pengguna. 

Autocomplete

Autocomplete (Foto: Etsy.com)

Langkah pertama kita buat sebuah database dengan nama latihan di phpmyadmin :

Database: `latihan`
Database latihan

Selanjutnya buat tabel dan field didalam database latihan :

--
-- Struktur dari tabel `autocomplete`
--

CREATE TABLE IF NOT EXISTS `autocomplete` (
  `nim` bigint(20) NOT NULL,
  `nama` varchar(30) NOT NULL,
  `jurusan` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Tabel autocomplete

Masukan / Insert data baru untuk menampilkan data saat pencarian autocomplete :

--
-- Dumping data untuk tabel `autocomplete`
--

INSERT INTO `autocomplete` (`nim`, `nama`, `jurusan`) VALUES
(1199870012, 'Muhammad Yusuf Hamdani', 'Teknik Informatika'),
(7779127910, 'Tutorial Web Design', 'Tutorial Website'),
(9998711120, 'Rahmayanti', 'PGSD');
Insert data autocomplete

Database latihan phpmyadmin akan terlihat seperti ini :

Struktur database latihan

Klik gambar untuk memperbesar

 

Contoh isi database

Klik gambar untuk memperbesar

Buka config/autoload.php, kemudia cari code dibawah ini dan sesuaikan seperti ini :

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url','form');
config/autoload.php

Buka config/database.php, kemudia cari code dibawah ini dan sesuaikan seperti ini :

$active_group = 'default';
$active_record = TRUE;

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'latihan';
$db['default']['dbdriver'] = 'mysql';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;
config/database.php

Untuk memulai membuat autocomplete kita perlau javascript, silahkan download :

Download css dan js  – klik link untuk mendownload

Struktur atau penempatan file akan terlihat seperti ini, silahkan buat folder dan sesuaikan :

asas

Kemudia buka controllers/welcome.php, sesuaikan seperti dibawah ini :

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

class Welcome extends CI_Controller {

	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -  
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in 
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see http://codeigniter.com/user_guide/general/urls.html
	 */
	public function index()
	{
		$this->load->view('index');
	}
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
?>
controllers/welcome.php

Buat file baru index.php, buka view/ sesuaikan seperti dibawah ini :

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

<<!DOCTYPE html>
<html>
<head>
    <title>Autocomplete | AZZURA Media</title>


    <!-- Memanggil file .js untuk proses autocomplete -->
    <script type='text/javascript' src='<?php echo base_url();?>assets/js/jquery-1.8.2.min.js'></script>
    <script type='text/javascript' src='<?php echo base_url();?>assets/js/jquery.autocomplete.js'></script>

    <!-- Memanggil file .css untuk style saat data dicari dalam filed -->
    <link href='<?php echo base_url();?>assets/js/jquery.autocomplete.css' rel='stylesheet' />

    <!-- Memanggil file .css autocomplete_ci/assets/css/default.css -->
    <link href='<?php echo base_url();?>assets/css/default.css' rel='stylesheet' />

    <script type='text/javascript'>
        var site = "<?php echo site_url();?>";
        $(function(){
            $('.autocomplete').autocomplete({
                // serviceUrl berisi URL ke controller/fungsi yang menangani request kita
                serviceUrl: site+'/autocomplete/search',
                // fungsi ini akan dijalankan ketika user memilih salah satu hasil request
                onSelect: function (suggestion) {
                    $('#v_nim').val(''+suggestion.nim); // membuat id 'v_nim' untuk ditampilkan
                    $('#v_jurusan').val(''+suggestion.jurusan); // membuat id 'v_jurusan' untuk ditampilkan
                }
            });
        });
    </script>


</head>
<body>


<div id="content">
<h1>Autocomplete</h1>
<form action="<?php echo site_url('admin/c_admin/add_orders'); ?>" method="post">
    <div class="wrap">
    <table>
        <tr>
            <td><small>Nama :</small><br><input type="search" class='autocomplete nama' id="autocomplete1" name="nama_customer"/></td>
        </tr>
        <tr>
            <td><small>Jurusan :</small><br><input type="text" class='autocomplete' id="v_jurusan" name="nama_customer"/></td>
        </tr>
        <tr>
            <td><small>NIM :</small><br><input type="text" class='autocomplete' id="v_nim" name="nama_customer"/></td>
        </tr>
    </div>
</form>
</div>


</body>
</html>
views/index.php

Buat file baru autocomplete.php untuk menampilkan data saat dicari, buka controllers/ sesuaikan seperti dibawah ini :

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

class Autocomplete extends CI_Controller
{
	public function __construct()
	{
		parent::__construct();
	}
	public function search()
	{
		// tangkap variabel keyword dari URL
		$keyword = $this->uri->segment(3);

		// cari di database
		$data = $this->db->from('autocomplete')->like('nama',$keyword)->get();	

		// format keluaran di dalam array
		foreach($data->result() as $row)
		{
			$arr['query'] = $keyword;
			$arr['suggestions'][] = array(
				'value'	=>$row->nama,
				'nim'	=>$row->nim,
				'jurusan'	=>$row->jurusan

			);
		}
		// minimal PHP 5.2
		echo json_encode($arr);
	}
}
?>
controllers/autocomplete.php

Yang terakhir silahkan buat css untuk mendesain form input dll, apabila sahabat belum membuat folder assets/css silahkan buat dulu pada folder website sahabat, untuk struktur folder dan file silahkan lihat pada gambar atas, berikut isi skrip dari default.css :

body {
	font-family: verdana,arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

.wrap { 
	width:50%; 
	background:#F0F0F0; 
	margin:auto;
	padding: 25px;
	overflow: hidden;
}

h1 {
	text-align: center;
}

input.nama {
	font-size:28px; 
	width:380px;
}

input, textarea {
    border: 1px solid #CCC;
}
assets/css/default.css

Selamat, sahabat semua sudah menyelesaikan tutorial dengan baik, sekarang silahkan coba di browser dan lihat hasilnya akan seperti ini :

aq3

Klik gambar untuk memperbesar

autocomplete awal

Klik gambar untuk memperbesar

autocomplete mengetik huruf

Klik gambar untuk memperbesar

Download Project autocomplete_ci

Sekian tutorial saya tentang Autocomplete dengan codeigniter, semoga bisa menambah pengetahuan sahabat twd semua ^_^

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: