Jika Anda serius dengan codeigniter, anda harus mempelajari bagaimana membuat autocomplete dengan codeigniter.

Kenapa?

Karena, User Experience (UX) merupakan hal terpenting dalam suatu aplikasi. Jika anda mengabaikan User Experience, anda dalam masalah.

Dalam tutorial kali ini, anda akan mempelajari semua hal yang perlu anda ketahui untuk membuat autocomplete dengan codeigniter.

Mari kita mulai.

Apa itu Autocomplete?

Autocomplete merupakan saran (suggest) yang ditampilkan untuk mempermudah interaksi antara manusia dan komputer.

Jika Anda googling di google dan mengetikan beberapa keyword (kata kunci), maka anda akan melihat autocomplete seperti berikut:

Jika Anda mencari video favorite anda di youtube, anda juga akan menemukan autocomplete seperti berikut:

Lalu bagaimana membuat autocomplete seperti google dan youtube?

Mari kita mulai.

 

Step 1. Pesiapan

Ini penting!

Jika Anda melewatkan step ini, artinya Anda melewatkan keseluruhan dari artikel ini.

Pesiapan yang baik akan menentukan keberhasilan Anda mengikuti artikel ini. Semakin baik persiapan Anda, maka akan semakin besar kemungkinan anda berhasil mengikuti artikel ini.

Jangan melewatkan step ini, meskipun terasa kompleks.

Jadi, apa saja yang perlu Anda persiapkan?

Berikut listnya:

1. Framework Codeigniter

Codeigniter merupakan framework php utama yang akan kita gunakan pada tutorial kali ini. Jika anda belum memilikinya, silahkan download di situs resminya: www.codeigniter.com 

2. Bootstrap

Bootstrap merupakan framework untuk mempercantik user interface (UI). Jika Anda belum memilikinya, silahkan download terlebih dahulu di situs resminya: www.getbootstrap.com 

3. Jquery

Ini penting!

Jquery merupakan library javascript yang berfungsi untuk membantu mempermudah dalam memanipulasi elemen html dan menjalankan fungsi autocomplete.

Jika Anda belum memilikinya silahkan download di situs resminya: www.jquery.com

4. Jquery UI

Jquery UI merupakan library javascript yang membantu mempermudah pembuatan autocomplete.

Jika anda belum memilikinya, silahkan download di situs resminya: http://jqueryui.com/

 

Step 2. Persiapan database

Pada artikel ini, saya menggunakan mysql sebagai Database Management System (DBMS).

Jika Anda juga menggunakan mysql, anda akan menyukai artikel ini.

Tetapi,

Jika anda menggunakan DBMS yang lain seperti Oracle, SQL Server, Maria DB atau lainnya.

No, Problem!

Asalkan Anda mengerti bahasa SQL (Structured Query Language)  dengan baik.

Ok, mari kita lanjut!

Buat sebuah database, disini saya membuat sebuah database dengan nama autocomplete_db.

Jika Anda membuat database dengan nama yang sama itu lebih baik.

Silahkan eksekusi query berikut untuk membuat database:

CREATE DATABASE autocomplete_db;

Query diatas akan menghasilkan sebuah database dengan nama autocomplete_db.

Selanjutnya,

Buat table dengan nama blog dengan struktur seperti gambar berikut:

Untuk membuat struktur table seperti gambar diatas,

Silahkan eksekusi query berikut:

CREATE TABLE blog(
blog_id INT(11) PRIMARY KEY AUTO_INCREMENT,
blog_title VARCHAR(100),
blog_description TEXT
)ENGINE=INNODB;  

Selanjutnya, insert beberapa data kedalam table blog dengan mengeksekusi query berikut:

INSERT INTO blog (blog_title,blog_description) VALUES 
('Konsep Dasar Sistem Basis Data','Panduan lengkap konsep dasar sistem basis data untuk pemula'),
('Upload Image dengan codeigniter','Cara mudah membuat upload image dengan codeigniter untuk pemula'),
('CRUD dengan codeigniter','Inilah tutorial legkap Cara mudah membuat CRUD dengan codeigniter');

Sehingga terlihat seperti berikut:

 

Step 3. Installasi Codeigniter

Selanjutnya,

Extract codeigniter yang sudah di download sebelumnya ke folder www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP).

Karena saya menggunakan wampserver, jadi saya mengextract-nya di c:/wamp/www/

Kemudian rename (ganti nama) project codeigniter Anda sesuai dengan project Anda. Disini saya memberi nama autocomplete.

Seperti gambar berikut:

Buka folder autocomplete dan buat folder assets sejajar dengan folder application dan system, kemudian buat folder css dan js didalam folder assets dan sertakan file bootstrap, jquery UI, dan jquery didalam folder css dan js.

Sehingga terlihat struktur project kita seperti berikut:

 

Step 4. Konfigurasi Codeigniter

Langkah selanjutnya adalah konfigurasi pada codeigniter.

Berikut beberapa file yang perlu Anda konfigurasi:

 

1. Autoload.php

Untuk melakukan konfigurasi pada file autoload.php, silahkan buka folder:

application/config/autoload.php

seperti berikut gambar berikut:

Buka file autoload.php dengan text editor (notepad++, sublime text, atau lainnya).

Kemudian temukan kode berikut:

$autoload['libraries'] = array();
$autoload['helper'] = array();

Atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

 

2. Config.php

Untuk melakukan konfigurasi pada file config.php, silahkan buka folder:

application/config/config.php

seperti berikut gambar berikut:

Buka file config.php dengan text editor, kemudian temukan kode berikut:

$config['base_url'] = '';

Atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/autocomplete/';

 

3. Database.php

Untuk melakukan konfigurasi pada file database.php, silahkan buka folder:

application/config/database.php

seperti berikut gambar berikut:

Buka file database.php dengan text editor, kemudian temukan kode berikut:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => '',
        'password' => '',
        'database' => '', 
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

Atur menjadi seperti berikut:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'autocomlete_db', 
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

 

Step 5. Controller

Silahkan buat Controller dengan nama Blog.php dengan kode sebagai berikut:

<?php
class Blog extends CI_Controller{
        function __construct(){
                parent::__construct();
                $this->load->model('blog_model');
        }

        function index(){
                $this->load->view('blog_view');
        }

        function get_autocomplete(){
                if (isset($_GET['term'])) {
                        $result = $this->blog_model->search_blog($_GET['term']);
                        if (count($result) > 0) {
                    foreach ($result as $row)
                        $arr_result[] = $row->blog_title;
                        echo json_encode($arr_result);
                        }
                }
        }

}

 

Step 6. Model

Silahkan buat Model dengan nama Blog_model.php dengan kode sebagai berikut:

<?php
class Blog_model extends CI_Model{

        function search_blog($title){
                $this->db->like('blog_title', $title , 'both');
                $this->db->order_by('blog_title', 'ASC');
                $this->db->limit(10);
                return $this->db->get('blog')->result();
        }

}

 

Step 7. View

Silahkan buat View dengan nama Blog_view.php dengan kode sebagai berikut:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Autocomplete</title>
        <link rel="stylesheet" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
        <link rel="stylesheet" href="<?php echo base_url().'assets/css/jquery-ui.css'?>">
</head>
<body>
        <div class="container">
                <div class="row">
                        <h2>Autocomplete Codeigniter</h2>
                </div>
                <div class="row">
                        <form>
                                 <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" class="form-control" id="title" placeholder="Title" style="width:500px;">
                                  </div>
                        </form>
                </div>
        </div>

        <script src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>" type="text/javascript"></script>
        <script src="<?php echo base_url().'assets/js/bootstrap.js'?>" type="text/javascript"></script>
        <script src="<?php echo base_url().'assets/js/jquery-ui.js'?>" type="text/javascript"></script>
        <script type="text/javascript">
                $(document).ready(function(){
                        $( "#title" ).autocomplete({
                      source: "<?php echo site_url('blog/get_autocomplete/?');?>"
                    });
                });
        </script>

</body>
</html>

 

Selesai.

Buka bowser Anda, dan kunjungi url berikut:

http://localhost/autocomplete/index.php/blog/

Maka akan tampil form dengan input text. Kemudian ketikan beberapa kata dari blog title yang ada di database, maka tampil autocomplete seperti gambar berikut:

Tapi tunggu!

Saya tidak akan meninggalkan anda begitu saja, mari kita customize kode diatas.

Ini Penting!!!

 

AUTOCOMPLETE DROPDOWN

Autocomplete dropdown merupakan autocomplete dimana ketika salah satu option dari autocomplete dipilih, maka akan tampil field lainnya yang berhubungan.

Contoh:

Ketika salah satu option dari autocomplete di pilih, maka akan tampil field yang berhubungan seperti berikut:

Bagaimana membuat autocomplete seperti itu?

Mari kita mulai.

Buka controller Blog.php kemudian ubah menjadi seperti berikut:

function get_autocomplete(){
        if (isset($_GET['term'])) {
                $result = $this->blog_model->search_blog($_GET['term']);
                if (count($result) > 0) {
                    foreach ($result as $row)
                        $arr_result[] = array(
                                        'label'                 => $row->blog_title,
                                        'description'   => $row->blog_description,
                         );
                        echo json_encode($arr_result);
                }
        }
}

 

Setelah itu, buka view blog_view.php ubah menjadi seperti berikut:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Autocomplete</title>
        <link rel="stylesheet" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
        <link rel="stylesheet" href="<?php echo base_url().'assets/css/jquery-ui.css'?>">
</head>
<body>
        <div class="container">
                <div class="row">
                        <h2>Autocomplete Codeigniter</h2>
                </div>
                <div class="row">
                        <form>
                                 <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" name="title" class="form-control" id="title" placeholder="Title" style="width:500px;">
                                 </div>
                                 <div class="form-group">
                                    <label>Description</label>
                                    <textarea name="description" class="form-control" placeholder="Description" style="width:500px;"></textarea>
                                 </div>
                        </form>
                </div>
        </div>

        <script src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>" type="text/javascript"></script>
        <script src="<?php echo base_url().'assets/js/bootstrap.js'?>" type="text/javascript"></script>
        <script src="<?php echo base_url().'assets/js/jquery-ui.js'?>" type="text/javascript"></script>
        <script type="text/javascript">
                $(document).ready(function(){

                    $('#title').autocomplete({
                source: "<?php echo site_url('blog/get_autocomplete');?>",
     
                select: function (event, ui) {
                    $('[name="title"]').val(ui.item.label); 
                    $('[name="description"]').val(ui.item.description); 
                }
            });

                });
        </script>

</body>
</html>

Pada view blog_view.php terdapat penambahan satu komponen textarea dan terdapat perubahan pada javascriptnya.

Selesai,

Selamat Anda berhasil membuat autocomplete dropdown.

Silahkan kunjungi URL http://localhost/autocomplete/index.php/blog/ untuk uji coba.

 

AUTOCOMPLETE AUTO SUBMIT

Jika anda pergi ke google dan mengetikan sesuatu dan muncul autocomplete, disaat anda pilih salah satu option dari autocomplete tersebut, maka form pencarian langsung di submit tanpa mengkilk tombol search.

Bagaimana membuat autocomplete seperti itu?

Mari kita mulai.

Buat sebuah controller baru dengan nama Tutorial.php dengan kode sebagai berikut:

<?php
class Tutorial extends CI_Controller{
        function __construct(){
                parent::__construct();
                $this->load->model('blog_model');
                error_reporting(0);
        }

        function index(){
                $this->load->view('tutorial_view');
        }

        function get_autocomplete(){
                if (isset($_GET['term'])) {
                        $result = $this->blog_model->search_blog($_GET['term']);
                        if (count($result) > 0) {
                    foreach ($result as $row)
                        $arr_result[] = array(
                                        'label' => $row->blog_title,
                                );
                        echo json_encode($arr_result);
                        }
                }
        }

        function search(){
                $title=$this->input->get('title');
                $data['data']=$this->blog_model->search_blog($title);

                $this->load->view('search_view',$data);
        }

}

 

Setelah itu buat view. Disini kita membutuhkan dua view lagi, yaitu view untuk form pencarian (tutorial_view.php) dan view untuk menampilkan hasil pencarian (search_view.php).

Pertama, buat view tutorial_view.php dengan kode sebagi berikut:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Autocomplete</title>
        <link rel="stylesheet" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
        <link rel="stylesheet" href="<?php echo base_url().'assets/css/jquery-ui.css'?>">
</head>
<body>
        <div class="container">
                <div class="row">
                        <h2>Search</h2>
                </div>
                <div class="row">
                        <form id="form_search" action="<?php echo site_url('tutorial/search');?>" method="GET">
                                 <div class="input-group">
                                    <input type="text" name="title" class="form-control" id="title" placeholder="Title" style="width:500px;">
                                    <span class="input-group-btn">
                                        <button class="btn btn-info" type="submit">Search</button>
                                    </span>
                                 </div>
                        </form>
                </div>
        </div>

        <script src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>" type="text/javascript"></script>
        <script src="<?php echo base_url().'assets/js/bootstrap.js'?>" type="text/javascript"></script>
        <script src="<?php echo base_url().'assets/js/jquery-ui.js'?>" type="text/javascript"></script>
        <script type="text/javascript">
                $(document).ready(function(){

                    $('#title').autocomplete({
                source: "<?php echo site_url('tutorial/get_autocomplete');?>",
     
                select: function (event, ui) {
                    $(this).val(ui.item.label);
                    $("#form_search").submit(); 
                }
            });

                });
        </script>

</body>
</html>

Setelah itu, buat view lagi dan beri nama search_view.php dengan kode sebagai berikut:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Search Result</title>
        <link rel="stylesheet" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
        <div class="container">
                <div class="row">
                        <h2>Search Result</h2>
                </div>
                <div class="row">
                        <table class="table table-striped">
                                <thead>
                                        <tr>
                                                <th>Title</th>
                                                <th>Description</th>
                                        </tr>
                                </thead>
                                <tbody>
                                <?php foreach($data as $row):?>
                                        <tr>
                                                <td><?php echo $row->blog_title;?></td>
                                                <td><?php echo $row->blog_description;?></td>
                                        </tr>
                                <?php endforeach;?>
                                </tbody>
                        </table>
                </div>
        </div>

        <script src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>" type="text/javascript"></script>
        <script src="<?php echo base_url().'assets/js/bootstrap.js'?>" type="text/javascript"></script>

</body>
</html>

Selesai.

Sekarang silahkan kunjungi URL http://localhost/autocomplete/index.php/tutorial untuk menguji coba apakah autocomple berjalan dengan baik.

Jika berjalan dengan baik, maka akan terlihat seperti berikut:

Ketikan keyword “codeigniter” maka akan tampil seperti berikut:

Kemudian klik salah satu dari option autocomplete yang tersedia, maka form akan langsung di submit tanpa perlu mengklik tombol search.

Adapun hasilnya, terlihat seperti berikut:

Selamat, Anda berhasil melakukannya.!

 

KESIMPULAN

Pembahan kali ini adalah bagaimana membuat autocomplete dengan codeigniter dan jquery UI.

Autocomplete merupakan saran (suggest) yang ditampilkan untuk meningkatkan User Experience (UX).

Ada 3 jenis autocomplete yang telah anda pelajari, yaitu: bagaimana menampilkan autocomplete dari database, bagaimana membuat autocomplete dropdown, dan bagaimana membuat pencarian dengan autocomplete auto submit form.  

Download Source