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.

Membuat Treeview menggunakan Treeview Ajax Jquery dan PHP

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

25 Juni 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat