Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

CI #8 – Codeigniter Autocomplete Full Tutorial

9 min read

Tutorial Membuat Fitur Codeigniter Autocomplete dengan Typehead Js dan Codeigniter

Ilmucoding.comTutorial membuat fitur autocomplete menggunakan typeahead js dan codeigniter. Di tutorial kali ini lebih banyak mengandalkan typeahead js untuk fitur search autocomplete. Sementara data yang diambil tetap berasal dari database.

Sebelum mulai membahasnya lebih dalam, apa sudah tahu?

Pencarian otomatis pada kolom search akan mempermudah user mencari sesuatu.

User tidak perlu melakukan enter atau klik. Tinggal ketik keyword yang diinginkan. Dengan otomatis, system akan merekomendasikan data yang cocok.

Website seperti ini akan membuat user dimanjakan dan mempercepat pencarian data.

Baca Juga: Membuat Fitur Login, Register dan Logout

Jika hal seperti itu yang dibutuhkan, maka tutorial ini sangat tepat buat Anda.

Tutorial ini menggunakan Codeigniter 3.1.11, Anda bisa menyesuaikan jika mencobanya dengan framework lain.

Oke, let’s coding!

Persiapan Coding

  • Download Codeigniter 3.1.11
  • Pindahkan ke xampp/htdocs
  • Extract file yang sudah terdownload
  • Rename dengan nama ci_autocomplete
  • Untuk bootstrap, jquery dan typeahead dipanggil secara online
  • Pastikan perangkat Anda terhubung ke internet.

Membuat Database dan Table

Oke, tanpa bermaksud lama-lama silahkan kunjungi localhost/phpmyadmin. Kemudian buat database db_sekolah. Lalu buat table siswa dengan isinya sebagai berikut:

08.-Tutorial-Membuat-Fitur-Autocomplete-dengan-Typehead-Js-dan-Codeigniter

Sekarang buah data dummy untuk diinsert ke table siswa.

Anda bisa mengambil contoh data berikut ini:

INSERT INTO `siswa` (`id`, `nama`, `telp`) VALUES
(1, 'Pauline S. Rich', '412-735-0224'),
(2, 'Sarah C. White', '320-552-9961'),
(3, 'Samuel L. Leslie', '201-324-8264'),
(4, 'Norma R. Manly', '478-322-4715'),
(5, 'Kimberly R. Castro', '479-966-6788'),
(6, 'Elaine R. Davis', '701-685-8912'),
(7, 'Concepcion S. Gardner', '607-829-8758'),
(8, 'Patricia J. White', '803-789-0429'),
(9, 'Michael M. Bothwell', '214-585-0737'),
(10, 'Ronald C. Vansickle', '630-571-4107'),
(11, 'Clarence A. Rich', '904-459-3747'),
(12, 'Elizabeth W. Peterson', '404-380-9481'),
(13, 'Renee R. Hewitt', '323-350-4973'),
(14, 'John K. Love', '337-229-1983'),
(15, 'Teresa J. Rincon', '216-394-6894'),
(16, 'Erin S. Huckaby', '503-284-8652'),
(17, 'Brian A. Handley', '989-304-7122'),
(18, 'Michelle A. Polk', '540-232-0351'),
(19, 'Wanda M. Brown', '718-262-7466'),
(20, 'Phillip A. Hatcher', '407-492-5727'),
(21, 'Dennis J. Terrell', '903-863-5810'),
(22, 'Britney F. Johnson', '972-421-6933'),
(23, 'Rachelle J. Martin', '920-397-4224'),
(24, 'Leila E. Ledoux', '615-425-9930'),
(25, 'Darrell A. Fields', '708-887-1913'),
(26, 'Linda D. Carter', '909-386-7998'),
(27, 'Melva J. Palmisano', '630-643-8763'),
(28, 'Jessica V. Windham', '513-807-9224'),
(29, 'Karen T. Martin', '847-385-1621'),
(30, 'Jack K. McDonough', '561-641-4509'),
(31, 'John M. Williams', '508-269-9346'),
(32, 'Amelia W. Davis', '347-537-8052'),
(33, 'Gertrude W. Lawrence', '510-702-7415'),
(34, 'Michael L. Harris', '252-219-4076'),
(35, 'Casey A. Groves', '810-334-9674'),
(36, 'James H. Wilson', '865-259-6772'),
(37, 'James A. Wesley', '443-217-1859'),
(38, 'Armando C. Gay', '716-252-9230'),
(39, 'James M. Duarte', '402-840-0541'),
(40, 'Jason E. West', '360-610-7730'),
(41, 'Gloria H. Saucedo', '205-861-3306'),
(42, 'Paul T. Moody', '914-683-4994'),
(43, 'Sandra L. Williams', '310-335-1336'),
(44, 'Elaine T. Deville', '626-513-8306'),
(45, 'Robyn L. Spangler', '754-224-7023'),
(46, 'Sam A. Pino', '806-823-5344'),
(47, 'Joseph H. Marble', '201-917-2804'),
(48, 'Mark M. Bassett', '206-592-4665'),
(49, 'Edgar M. Billy', '978-365-0324'),
(50, 'Connie M. Yang', '815-288-5435');

Oke, sekarang data database, table beserta datanya sudah siap. Mari kita lanjutkan ke tahap berikutnya…

Konfigurasi Codeigniter

Beberapa konfigurasi di bawah ini merupakan hal umum. Berikut step by stepnya:

Step #1 – Konfigurasi Database

Buka database.php di direktori application/config/database.php. cari kode berikut:

$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
 );

Ubah menjadi:

$db['default'] = array(
     'dsn'   => '',
     'hostname' => 'localhost',
     'username' => 'root',
     'password' => '',
     'database' => 'db_sekolah',
     '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 #2 – Konfigurasi Database Class

Gunakan library database yang sudah disediakan Codeigniter. Caranya buka autoload.php di direktori application/config/autoload.php.

Pada baris ke 61, cari kode:

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

Ubah menjadi:

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

Step #3 – Konfigurasi URL Helper dan Base_Url

Masih di autoload.php pada baris ke 92 cari kode berikut:

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

Kemudian ubah menjadi:

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

Sekarang buka config.php pada direktori application/config/config.php.

Temukan baris ke 26, yaitu:

$config['base_url'] = '';

Ubah menjadi:

$config['base_url'] = 'http://localhost/ci_autocomplete/index.php/';

Nah, sekarang proses konfigurasi sudah selesai. Semangat untuk melanjutkan ke tahap berikutnya …

Baca Juga: Membuat Fitur Multiple Upload dengan Codeigniter

Membuat Model

Pada tahap ini silahkan buat file baru bernama Autocomplete_model.php. Simpan di direktori application/models.

Kodenya:

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

class Autocomplete_model extends CI_Model
{
    function fetch_data($query)
    {
        $this->db->like('nama', $query);
        $query = $this->db->get('siswa');
        
        if($query->num_rows() > 0)
        {
            foreach($query->result_array() as $row)
            {
                $output[] = array(
                    'nama'  => $row["nama"]
                );
            }
            echo json_encode($output);
        }
    }
}

?> 

Penjelasan:

  • Function fetch_data() di model ini tujuannya untuk mencari nama siswa di database. Penggunakan like bertujuan untuk memfilter berdasarkan keyword yang cocok dengan yang diinputkan user.
  • Jika data ditemukan atau lebih dari 0, maka fungsi ini akan mengembalikan nama siswa.

Membuat Controller

Tahap berikutnya akan membuat controller dengan nama Autoload.php.

Simpan di direktori application/controllers.

Kemudian ketik kode berikut:

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

class Autocomplete extends CI_Controller {
 
    function index()
    {
        $this->load->view('autocomplete_view') ;
    }

    function fetch()
    {
        $this->load->model('autocomplete_model');
        echo $this->autocomplete_model->fetch_data($this->uri->segment(3));
    }
}
?> 

Penjelasan:

  • Baris ke 6 – 9 adalah function untuk menampilkan view yang ada di folder application/views. Tahap berikutnya akan kita buat viewnya.
  • Baris 11 – 15 adalah baris yang akan dituju oleh typeahead js di view nanti. Jika Anda jalankan melalui browser dengan ketik: http://localhost/ci_autocomplete/index.php/autocomplete/fetch maka akan didapati data seperti ini:
[{"nama":"Pauline S. Rich"},{"nama":"Sarah C. White"},{"nama":"Samuel L. Leslie"},{"nama":"Norma R. Manly"},{"nama":"Kimberly R. Castro"},{"nama":"Elaine R. Davis"},{"nama":"Concepcion S. Gardner"},{"nama":"Patricia J. White"},{"nama":"Michael M. Bothwell"},{"nama":"Ronald C. Vansickle"},{"nama":"Clarence A. Rich"},{"nama":"Elizabeth W. Peterson"},{"nama":"Renee R. Hewitt"},{"nama":"John K. Love"},{"nama":"Teresa J. Rincon"},{"nama":"Erin S. Huckaby"},{"nama":"Brian A. Handley"},{"nama":"Michelle A. Polk"},{"nama":"Wanda M. Brown"},{"nama":"Phillip A. Hatcher"},{"nama":"Dennis J. Terrell"},{"nama":"Britney F. Johnson"},{"nama":"Rachelle J. Martin"},{"nama":"Leila E. Ledoux"},{"nama":"Darrell A. Fields"},{"nama":"Linda D. Carter"},{"nama":"Melva J. Palmisano"},{"nama":"Jessica V. Windham"},{"nama":"Karen T. Martin"},{"nama":"Jack K. McDonough"},{"nama":"John M. Williams"},{"nama":"Amelia W. Davis"},{"nama":"Gertrude W. Lawrence"},{"nama":"Michael L. Harris"},{"nama":"Casey A. Groves"},{"nama":"James H. Wilson"},{"nama":"James A. Wesley"},{"nama":"Armando C. Gay"},{"nama":"James M. Duarte"},{"nama":"Jason E. West"},{"nama":"Gloria H. Saucedo"},{"nama":"Paul T. Moody"},{"nama":"Sandra L. Williams"},{"nama":"Elaine T. Deville"},{"nama":"Robyn L. Spangler"},{"nama":"Sam A. Pino"},{"nama":"Joseph H. Marble"},{"nama":"Mark M. Bassett"},{"nama":"Edgar M. Billy"},{"nama":"Connie M. Yang"}]

Nah data tersebutlah yang nanti akan dibutuhkan di view untuk bagian autocomplete.

Membuat View

Buat autocomplete_view.php di folder application/views. Kemudian ketik kode berikut:

<html>
<head>
  <title>Autocomplete Menggunakan Typeahead Js dan Codeigniter</title>
  <!-- CSS Script -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css" /> 
  <style>
    .box
    {
      width:100%;
      max-width: 650px;
      margin:0 auto;
    }
    .container{
      margin-top: 50px;
    }
    #prefetch{
      margin-top: 50px;
    }
  </style>

</head>
<body>
  
  <div class="container">
    <h3 class="text-center">Autocomplete Menggunakan Typeahead Js dan Codeigniter</h3>
    <div id="prefetch">
      <input type="text" name="search_box" id="search_box" class="form-control input-lg typeahead" placeholder="Cari siswa" />
    </div>
  </div>

  <!-- Jquery, Bootstrap dan Typehead -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

  <script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>
  <script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

  <!-- Page Script -->
  <script>
  $(document).ready(function(){

    var sample_data = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      prefetch:'<?php echo base_url(); ?>autocomplete/fetch',
      remote:{
        url:'<?php echo base_url(); ?>autocomplete/fetch/%QUERY',
        wildcard:'%QUERY'
      }
    });
    
    $('#prefetch .typeahead').typeahead(null, {
      nama: 'sample_data',
      display: 'nama',
      source:sample_data,
      limit:10,
      templates:{
        suggestion:Handlebars.compile('<div class="row"><div class="col-md-12">{{nama}}</div></div>')
      }
    });

  });
  </script>
</body>
</html> 

Penjelasan:

  • Bila diperhatikan, kode di atas menggunakan pilar yang sangat penting, yaitu jQuery, Bootstrap dan Typeahead.
  • Baris ke 48 – 52 berfungsi untuk mengambil data dari controller autocomplete dengan function fetch. Tidak lupa untuk menyematkan query (Baca: keyword) sebagai request yang akan dicocokan dengan data yang ada di database.
  • Sedangkan baris ke 55 – 63 berguna untuk memunculkan (baca: DOM) list yang akan keluar sesuai dengan nama yang cocok.

Testing

Silahkan aktifkan XAMPP, lalu ketik link berikut di URL:

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

Hasilnya:

08.-Tutorial-Membuat-Fitur-Autocomplete-dengan-Typehead-Js-dan-Codeigniter

Penutup

Autocomplete penting untuk Anda yang membutuhkan system pencarian tanpa harus tekan enter atau klik button.

Fitur ini memudahkan pengguna situs Anda untuk lebih memberikan kenyamanan berinteraksi dengan website.

Harapannya semoga situs Anda akan terus dikunjungi user. Karena yang memberikan kenyamanan akan selalu ada di dalam hati dan perasaan. #eeaaa.

Stop baper. Mending share dan comment artikel ini ya. Semoga bermanfaat dan selamat belajar …

Download Source Code

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

One Reply to “CI #8 – Codeigniter Autocomplete Full Tutorial”

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.