Membuat Daftar Dropdown dengan Sumber Data dari JSON API Memanfaatkan Select2 dan Codeigniter 3

 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;

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

 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();
 }
}

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

 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/sel[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>

 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');
 }
}

1
2

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