Di tutorial ini disajikan secara singkat tutorial tentang bagaimana membuat daftar dropdown (tarik-turun) dengan sumber data dari JSON API memanfaatkan Select2 dan Codeigniter 3.

Teknologi

Teknologi yang digunakan dalam tutorial ini adalah sebagai berikut:

Klik pada masing-masing daftar teknologi di atas untuk mendapatkan penjelasan terkait teknologi yang digunakan dalam tutorial ini.

Persiapan

Unduh terlebih dahulu Codeigniter 3 di codeigniter.com/download. Lanjutkan dengan mengekstrak file unduhan tersebut dan tempatkan di document root web server.

 Struktur framework Codeigniter 3

Struktur framework Codeigniter 3

Database

Database yang digunakan dalam tutorial ini adalah sebagai berikut:

 Tangkapan layar phpMyAdmin

Tangkapan layar phpMyAdmin

Impor skrip SQL berikut ini ke MySQL:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
-- MySQL Script generated by MySQL Workbench
-- Rab 07 Jul 2021 07:12:38 
-- Model: New Model    Version: 1.0
-- MySQL Workbench Forward Engineering
SET @OLD_UNIQUE_CHECKS = @@UNIQUE_CHECKS,
  UNIQUE_CHECKS = 0;
SET @OLD_FOREIGN_KEY_CHECKS = @@FOREIGN_KEY_CHECKS,
  FOREIGN_KEY_CHECKS = 0;
SET @OLD_SQL_MODE = @@SQL_MODE,
  SQL_MODE = 'ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION';
-- -----------------------------------------------------
-- Schema bahasa_pemrograman
-- -----------------------------------------------------
DROP SCHEMA IF EXISTS `bahasa_pemrograman`;
-- -----------------------------------------------------
-- Schema bahasa_pemrograman
-- -----------------------------------------------------
CREATE SCHEMA IF NOT EXISTS `bahasa_pemrograman`;
USE `bahasa_pemrograman`;
-- -----------------------------------------------------
-- Table `bahasa_pemrograman`.`daftar`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `bahasa_pemrograman`.`daftar` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `nama` VARCHAR(255) NULL,
  `deskripsi` TEXT NULL,
  PRIMARY KEY (`id`)
) ENGINE = InnoDB;
SET SQL_MODE = @OLD_SQL_MODE;
SET FOREIGN_KEY_CHECKS = @OLD_FOREIGN_KEY_CHECKS;
SET UNIQUE_CHECKS = @OLD_UNIQUE_CHECKS;
-- -----------------------------------------------------
-- Data for table `bahasa_pemrograman`.`daftar`
-- -----------------------------------------------------
START TRANSACTION;
USE `bahasa_pemrograman`;
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (1, 'C', 'Lorem ipsum dolor sit amet.');
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (2, 'C#', 'Lorem ipsum dolor sit amet.');
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (3, 'C++', 'Lorem ipsum dolor sit amet.');
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (4, 'Go', 'Lorem ipsum dolor sit amet.');
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (5, 'Java', 'Lorem ipsum dolor sit amet.');
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (6, 'Kotlin', 'Lorem ipsum dolor sit amet.');
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (7, 'Pascal', 'Lorem ipsum dolor sit amet.');
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (8, 'Perl', 'Lorem ipsum dolor sit amet.');
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (9, 'PHP', 'Lorem ipsum dolor sit amet.');
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (10, 'Python', 'Lorem ipsum dolor sit amet.');
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (11, 'R', 'Lorem ipsum dolor sit amet.');
INSERT INTO `bahasa_pemrograman`.`daftar` (`id`, `nama`, `deskripsi`)
VALUES (12, 'Ruby', 'Lorem ipsum dolor sit amet.');
COMMIT;

Skrip SQL di atas dapat diunduh di pranala ini: Klik di sini.

Konfigurasi Database pada Codeigniter 3

Agar Codeigniter 3 dapat terhubung ke database MySQL di atas, kita perlu melakukan konfigurasi koneksi database pada Codeigniter 3.

Ubah bagian-bagian berikut ini pada dokumen database.php yang ada di direktori /application/config/:

76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'demo',
	'password' => 'demo',
	'database' => 'bahasa_pemrograman',
	'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
);

Bagian-bagian yang perlu disesuaikan adalah

  • hostname,
  • username,
  • password, dan
  • database.

Sesuaikan dengan konfigurasi yang anda buat pada database.

Membuat REST API

Di tahap ini, kita membuat REST API dengan format data JSON dengan menggunakan Codeigniter 3.

Langkah pertama adalah membuat model. Di Codeigniter, model adalah kelas PHP yang dirancang untuk hal-hal yang terkait dengan informasi yang ada di database. Dengan menggunakan model, kita bisa membuat fungsi untuk menyisipkan, memperbarui, dan mengambil data dari database.

Buat dokumen dengan nama Bahasa_pemrograman_model.php dan simpan dokumen tersebut di direktori /application/models/.

Berikut ini adalah skrip PHP dokumen Bahasa_pemrograman_model.php:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Bahasa_pemrograman_model extends CI_Model
{
    public function __construct()
    {
        parent::__construct();
        $this->load->database();
    }

    public function get_daftar_bahasa_pemrograman()
    {
        $this->db->select('*');
        $this->db->from('daftar');
        $this->db->order_by('nama', 'ASC');

        return $this->db->get()->result();
    }

    public function get_daftar_bahasa_pemrograman_like($searchTerm)
    {
        $this->db->select('*');
        $this->db->from('daftar');
        $this->db->like('nama', $searchTerm);
        $this->db->order_by('nama', 'ASC');

        return $this->db->get()->result();
    }
}

Langkah kedua adalah membuat controller. Penjelasan terkait controller pada Codeigniter dapat dibaca di laman codeigniter.com/userguide3/general/controllers.html.

Buat dokumen dengan nama Api_controller.php dan simpan dokumen tersebut di direktori /application/controllers/.

Berikut ini adalah skrip PHP dokumen Api_controller.php:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Api_controller extends CI_Controller
{
	public function daftar_bahasa_pemrograman()
	{
		$this->load->model("Bahasa_pemrograman_model");

		if ($this->input->get('searchTerm', TRUE)) {
			$data = $this->Bahasa_pemrograman_model->get_daftar_bahasa_pemrograman_like($this->input->get('searchTerm', TRUE));
		} else {
			$data = $this->Bahasa_pemrograman_model->get_daftar_bahasa_pemrograman();
		}

		$this->output->set_status_header(200)->set_content_type('application/json')->set_output(json_encode($data));
	}
}

Membuat Tampilan

Di tahap ini kita akan membuat tampilan dari daftar dropdown.

Langkah pertama adalah membuat view. Penjelasan terkait view pada Codeigniter dapat dibaca di laman codeigniter.com/userguide3/general/views.html.

Buat dokumen dengan nama index.php dan simpan dokumen tersebut di direktori /application/views/bahasa_pemrograman/.

Berikut ini adalah skrip PHP dokumen index.php:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Membuat Daftar Dropdown dengan Sumber Data dari JSON API Memanfaatkan Select2 dan Codeigniter 3">
    <meta name="author" content="hanifmu.com">
    <link rel="icon" href="https://getbootstrap.com/docs/4.0/assets/img/favicons/favicon.ico">

    <title>Select2 & Codeigniter 3</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/[email protected]/dist/select2-bootstrap4.min.css" />
</head>

<body class="bg-light">
    <div class="container" style="padding-top:10%">
        <div class="text-center">
            <img class="d-block mx-auto mb-1" src="https://raw.githubusercontent.com/muhammadhanif/muhammadhanif.github.io/master/assets/images/21122017/hanifmu-red.png" alt="" width="72" height="72">
            <p>hanifmu.com</p>
        </div>

        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4">
                <form>
                    <select id="daftar" name="daftar" class="form-control select2bs4_daftar" style="width: 100%;" required>
                        <option></option>
                    </select>
                </form>
            </div>
            <div class="col-md-4"></div>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

    <script>
        $('.select2bs4_daftar').select2({
            placeholder: "Pilih Bahasa Pemrograman",
            theme: 'bootstrap4',
            ajax: {
                dataType: 'json',
                delay: 250,
                url: '<?php echo base_url('index.php/api/bahasa-pemrograman/daftar'); ?>',
                data: function(params) {
                    return {
                        searchTerm: params.term
                    }
                },
                processResults: function(data) {
                    return {
                        results: $.map(data, function(obj) {
                            return {
                                id: obj.id,
                                text: obj.nama
                            };
                        })
                    };
                }
            }
        });
    </script>
</body>

</html>

Langkah kedua adalah membuat controller.

Buat dokumen dengan nama Bahasa_pemrograman_controller.php dan simpan dokumen tersebut di direktori /application/controllers/.

Berikut ini adalah skrip PHP dokumen Bahasa_pemrograman_controller.php:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Bahasa_pemrograman_controller extends CI_Controller
{
	public function __construct()
	{
		parent::__construct();
		$this->load->helper('url');
	}

	public function index()
	{
		$this->load->view('bahasa_pemrograman/index');
	}
}

Mengatur Routing

Penjelasan terkait routing pada Codeigniter dapat dibaca di laman codeigniter.com/userguide3/general/routing.html.

Edit dokumen routes.php yang ada di direktori /application/config/. Tambah berikut ini ke dokumen tersebut:

1
2
$route['bahasa-pemrograman'] = 'Bahasa_pemrograman_controller/index';
$route['api/bahasa-pemrograman/daftar'] = 'Api_controller/daftar_bahasa_pemrograman';

Penjelasan:

Alamat URL untuk mengakses tampilan daftar dropdown adalah bahasa-pemrograman, misalnya

http://localhost/select2-codeigniter-3-json-api/index.php/bahasa-pemrograman

Sementara itu alamat URL untuk mengakses data daftar bahasa pemrograman dalam format JSON adalah api/bahasa-pemrograman/daftar, misalnya

http://localhost/select2-codeigniter-3-json-api/index.php/api/bahasa-pemrograman/daftar

Hasil

 Tampilan daftar dropdown

Tampilan daftar dropdown

 Tampilan daftar dropdown

Tampilan daftar dropdown

 Tampilan daftar dropdown

Tampilan daftar dropdown

 Data daftar bahasa pemrograman dalam format JSON

Data daftar bahasa pemrograman dalam format JSON