Membuat Treeview menggunakan Treeview Ajax Jquery dan PHP

Membuat Treeview menggunakan Treeview Ajax Jquery dan PHP

Pada kesempatan kali ini saya akan Membuat Treeview menggunakan Treeview Ajax Jquery dan PHP. Treeview adalah suatu tampilan data dalam bentuk hirarki. Dan data hirarki yang akan saya tampilkan adalah nama-nama kota.

Untuk langkah pertama Membuat Treeview menggunakan Treeview Ajax Jquery dan PHP teman-teman bisa membuat satu table dengan nama country_state_city atau teman-teman bisa langsung scriptnya seperti di bawah ini.

CREATE TABLE IF NOT EXISTS `country_state_city` (

  `id` int(11) NOT NULL,

  `name` varchar(250) NOT NULL,

  `parent_id` int(11) NOT NULL

) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=latin1;

INSERT INTO `country_state_city` (`id`, `name`, `parent_id`) VALUES

(1, 'DKI Jakarta', 0),

(2, 'Jawa Barat', 0),

(3, 'Jakarta Barat', 1),

(4, 'Jakarta Selatan', 1),

(5, 'Jakarta Timur', 1),

(6, 'Jakarta Utara', 1),

(7, 'Bogor', 2),

(8, 'Bandung', 2),

(9, 'Sukabumi', 2),

(10, 'Pluit', 6),

(11, 'Angke', 6),

(12, 'Pantai Indah Kapuk', 6),

(13, 'Tebet', 4),

(14, 'Cassablanca', 4),

(15, 'Kelapa Gading', 5),

(16, 'Kalideres', 3),

(17, 'Sukasari', 7),

(18, 'Tahur Halang', 7),

(19, 'Cimahi', 8),

(20, 'Kiara Condong', 8),

(21, 'Cinambo', 8);

ALTER TABLE `country_state_city`

  ADD PRIMARY KEY (`id`);

ALTER TABLE `country_state_city`

  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=21;

Jika sudah selesai langkah selanjutnya teman-teman buat tampilan html seperti berikut.

<!DOCTYPE html>

<html>

 <head>

  <title>Membuat Treeview menggunakan Treeview Ajax Jquery dan PHP</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>   

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

  <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>

 

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" />

 

  <style>

  </style>

 </head>

 <body>

  <br /><br />

  <div class="container" style="width:900px;">

   <h2 align="center">Membuat Treeview menggunakan Treeview Ajax Jquery dan PHP</h2>

   <br /><br />

   <div id="treeview"></div>

  </div>

 </body>

</html>

Dan masih di file yang sama teman-teman buat script ajax jquery untuk menampilkan data treeview spserti berikut.

<script>

$(document).ready(function(){

 $.ajax({

   url: "fetch.php",

   method:"POST",

   dataType: "json",      

   success: function(data) 

   {

  $('#treeview').treeview({data: data});

   }  

 });

});

</script>

Lalu buat file baru dengan nama fetch.php untuk perintah ambil data ke database menggunakan php.

<?php

$connect = mysqli_connect("localhost", "dumet", "school", "test");

$query = "SELECT * FROM country_state_city";

$result = mysqli_query($connect, $query);

while($row = mysqli_fetch_array($result)){

 $sub_data["id"] = $row["id"];

 $sub_data["name"] = $row["name"];

 $sub_data["text"] = $row["name"];

 $sub_data["parent_id"] = $row["parent_id"];

 $data[] = $sub_data;

}

foreach($data as $key => &$value){

 $output[$value["id"]] = &$value;

}

foreach($data as $key => &$value){

 if($value["parent_id"] && isset($output[$value["parent_id"]])){

  $output[$value["parent_id"]]["nodes"][] = &$value;

 }

}

foreach($data as $key => &$value){

 if($value["parent_id"] && isset($output[$value["parent_id"]])){

  unset($data[$key]);

 }

}

echo json_encode($data);

?>

Jika di tampilkan di halaman browser maka akan tampil seperti pada gambar di bawah ini.

Demikian artikel tentang cara Membuat Treeview menggunakan Treeview Ajax Jquery dan PHP.