Tutorial Membuat Treeview dinamis dengan Codeigniter + Bootstrap

Assalamu’alaikum wr. wb.

Selamat datang di blog pirwablog.blogspot.com. Kali ini ak akan berbagi tentang cara membuat Tree-View. Tree-View ini biasa digunakan untuk menampilkan data yang memiliki subdata, contohnya data provinsi memiliki data kabupaten, kabupaten memiliki data kecamatan, kecamatan meiliki data desa, dll.

Dalam tutorial kali ini kita akan membuat Tree-view data kota/ kabupaten yang memiliki data kecamatan dan desa. Dalam pembuatannya saya akan menggunakan bahasa pemrograman PHP dengan Framework Codeigniter, database menggunakan MySQL. Untuk membuat tampilan Tree-View akan kita gunakan Bootstrap-treeview.js. Berikut adalah tampilan dari aplikasi yang akan kita buat:

Berikut adalah urutan langkah pembuatannya:

1. Buat database
2. Buat Tabel
3. Insert Data-Data
4. Instalasi Codeigniter dan Bootstrap-treeview.js
5. Buat Controler
6. Buat Model
7. Buat View
8.  Selesai

 Ok tanpa berlama-lama kita langsung saja mulai membuatnya:
1. Buat Database

-- Buat database dengan nama treeview 
CREATE DATABASE treeview; 

-- Mengaktifkan database treeview 
USE treeview;

2.Buat Tabel

-- Buat tabel kota
CREATE TABLE `treeview`.`kota` (
    `id` INT NOT NULL AUTO_INCREMENT ,
    `nama` VARCHAR(50) NOT NULL,
    PRIMARY KEY (`id`)
    ) ENGINE = InnoDB;

-- Buat tabel kecamatan
CREATE TABLE `treeview`.`kecamatan` (
    `id` INT NOT NULL AUTO_INCREMENT,
    `kota_id` INT NOT NULL ,
    `nama` VARCHAR(50) NOT NULL,
    PRIMARY KEY (`id`), INDEX (`kota_id`),
    FOREIGN KEY fk_kecamatan(kota_id)
        REFERENCES kota(id)
        ON UPDATE CASCADE
        ON DELETE RESTRICT
    ) ENGINE = InnoDB;


-- Buat Tabel Desa
CREATE TABLE `treeview`.`desa` (
    `id` INT NOT NULL AUTO_INCREMENT ,
    `kecamatan_id` INT NOT NULL ,
    `nama` VARCHAR(50) NOT NULL ,
    PRIMARY KEY (`id`), INDEX (`kecamatan_id`),
    FOREIGN KEY fk_desa(kecamatan_id)
        REFERENCES kecamatan(id)
        ON UPDATE CASCADE
        ON DELETE RESTRICT
    ) ENGINE = InnoDB;

3. Masukkan Data

-- Memasukkan data kota ke tabel kota
INSERT INTO `kota` (`id`, `nama`) VALUES (NULL, 'Jakarta Selatan');
INSERT INTO `kota` (`id`, `nama`) VALUES (NULL, 'Jakarta Barat');
INSERT INTO `kota` (`id`, `nama`) VALUES (NULL, 'Jakarta Pusat');
INSERT INTO `kota` (`id`, `nama`) VALUES (NULL, 'Jakarta Timur');
INSERT INTO `kota` (`id`, `nama`) VALUES (NULL, 'Jakarta Utara');

-- Memasukkan data kecamatan ke tabel kecamatan
-- kota yang dimasukkan adalah jakarta selatan
INSERT INTO `kecamatan` (`id`, `kota_id`, `nama`) VALUES (NULL, '1', 'Cilandak');
INSERT INTO `kecamatan` (`id`, `kota_id`, `nama`) VALUES (NULL, '1', 'Jagakarsa');
INSERT INTO `kecamatan` (`id`, `kota_id`, `nama`) VALUES (NULL, '1', 'Kebayoran Baru');
INSERT INTO `kecamatan` (`id`, `kota_id`, `nama`) VALUES (NULL, '1', 'Kebayoran Lama');
INSERT INTO `kecamatan` (`id`, `kota_id`, `nama`) VALUES (NULL, '1', 'Mampang Prapatan');
INSERT INTO `kecamatan` (`id`, `kota_id`, `nama`) VALUES (NULL, '1', 'Pancoran');
INSERT INTO `kecamatan` (`id`, `kota_id`, `nama`) VALUES (NULL, '1', 'Pasar Minggu');

-- Memasukkan data desa ke tabel desa
-- kecamatan yang dimasukkan adalah kecamatan cilandak
INSERT INTO `desa` (`id`, `kecamatan_id`, `nama`) VALUES (NULL, '1', 'Cilandak Barat');
INSERT INTO `desa` (`id`, `kecamatan_id`, `nama`) VALUES (NULL, '1', 'Cipete Selatan');
INSERT INTO `desa` (`id`, `kecamatan_id`, `nama`) VALUES (NULL, '1', 'Gandaria Selatan');
INSERT INTO `desa` (`id`, `kecamatan_id`, `nama`) VALUES (NULL, '1', 'Lebak Bulus');
INSERT INTO `desa` (`id`, `kecamatan_id`, `nama`) VALUES (NULL, '1', 'Pondok Labu');

-- kecamatan yang dimasukkan adalah kecamatan Jagakarsa
INSERT INTO `desa` (`id`, `kecamatan_id`, `nama`) VALUES (NULL, '2', 'Ciganjur');
INSERT INTO `desa` (`id`, `kecamatan_id`, `nama`) VALUES (NULL, '2', 'Cipedak');
INSERT INTO `desa` (`id`, `kecamatan_id`, `nama`) VALUES (NULL, '2', 'Jagakarsa');
INSERT INTO `desa` (`id`, `kecamatan_id`, `nama`) VALUES (NULL, '2', 'Lenteng Agung');

-- kecamatan yang dimasukkan adalah kecamatan kebayoran baru
INSERT INTO `desa` (`id`, `kecamatan_id`, `nama`) VALUES (NULL, '3', 'Cipete Utara');
INSERT INTO `desa` (`id`, `kecamatan_id`, `nama`) VALUES (NULL, '3', 'Gandaria Utara');

4. Instalasi Codeigniter dan Bootstrap-treeview.js
Untuk intall Codeigniter kita harus download terlebih dahulu installer Codeigniter di link ini. Pas tutorial ini dibuat, versi 3.1.9 adalah yang paling baru. Oleh karena itu kita akan menggunakan Codeigniter versi 3.1.9. Setelah itu extract filenya lalu copy folder di localhost anda. Setelah itu lakukan konfigurasi dasar codeigniter:
   .a. Menngatur Base url
Buka file application/config/config.php, lalu atur base url seperti berikut

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

   .b. Menngatur Koneksi Database
Buka file application/config/database.php, lalu atur koneksi seperti berikut

$db['default'] = array(
    'dsn' => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'treeview',
    '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,
);

5. Buat Controler
 Buat file application/controller/Treeview.php, lalu copy script berikut

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Treeview extends CI_Controller {
    public function showTreeview()
    {
        $this->load->helper(array('url'));

        //load Treeview_m model
        $this->load->model('treeview_m', '', TRUE);
       
        //load view
        $this->load->view('showTreeview');
    }
}

6. Buat Model
 Buat file application/models/Treeview_m.php, lalu copy script berikut

<?php if(!defined("BASEPATH")) exit("Tidak dapat mengakses langsung");
Class Treeview_m extends CI_Model {
  function __construct(){
    parent::__construct();
  }
  function kotaGetAll()
  {
      $query="SELECT * FROM kota";
      return $this->db->query($query)->result_array();
  }
  function kecamatanGetBykota_id($params)
  {
      $query="SELECT * FROM kecamatan where kota_id=?";
      return $this->db->query($query, $params)->result_array();
  }
  function desaGetBykecamatan_id($params)
  {
      $query="SELECT * FROM desa where kecamatan_id=?";
      return $this->db->query($query, $params)->result_array();
  }
}

7. Buat View
Sebelum membuat view,  download terlebih dahulu library bootstrap-treeview.js di link berikut.
  Buat file application/view/showTreeview.php, lalu copy script berikut:

<!doctype html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Tutorial Membuat Tree-view dinamis dengan Codeigniter + Bootstrap-treeview.js</title>
      <link href="<?=base_url();?>assets/bootstrap-treeview-1.2.0/public/css/bootstrap.css" rel="stylesheet">
      <link href="<?=base_url();?>assets/bootstrap-treeview-1.2.0/public/css/bootstrap.css" rel="stylesheet">

      <script src="<?=base_url();?>assets/bootstrap-treeview-1.2.0/public/js/jquery.js"></script>
      <script src="<?=base_url();?>assets/bootstrap-treeview-1.2.0/public/js/bootstrap-treeview.js"></script>
   </head>
<body>
<div class="container">
   <div class="col-sm-4">
      <h2>Daftar Kota</h2>
      <div id="treeview2" ></div>
   </div>
</div>
<script>
   var defaultData = [
      <?php
         $kota=$this->treeview_m->kotaGetAll();
         foreach ($kota as $key => $value) {
            $kecamatan=$this->treeview_m->kecamatanGetBykota_id($value['id']);
            echo "{text: '$value[nama]',
            tags: ['".count($kecamatan)."'],
            nodes: [
               ";
               foreach ($kecamatan as $key2 => $value2) {
                  $desa=$this->treeview_m->desaGetBykecamatan_id($value2['id']);
                  echo "{
                     text: '$value2[nama]',
                     tags: ['".count($desa)."'],
                     nodes: [
                           ";
                           foreach ($desa as $key3 => $value3) {
                              echo "{text: '$value3[nama]'},";
                           }
                  echo "
                     ]
                     },";
               }
            echo "]},";
         }
         ?>
   ];
   $('#treeview2').treeview({
      levels: 1,
      showTags: true,
      data: defaultData
   });
</script>
</body>
</html>

8. Selesai
Untuk download full source code bisa di download di link berikut.
Treeview.rar

Treeview.sql

Wa’alaikumsalam wr. wb.

Tweet

Postingan terkait:

Ditulis Indra — Kamis, 06 Juni 2019 — Add Comment — Codeigniter, PHP, Programming