Bootstrap Treeview with PHP and MySQL

In our previous tutorial you have learned How To Create Dynamic Tree View Menu in PHP, Today in this tutorial you will learn how to create Bootstrap treeview structure with PHP and MySQL.

With Bootstrap, you can easily create treeview menus using Bootstarp treeview plugin that needs JSON data to be passed to create hierarchical tree structure.

In this tutorial we have created JSON data from MySQL using PHP and passed to Bootstrap treeview plugin to create tree structure.

So let’s start the coding
Step 1: First we will create Table structure to stored tree menu nodes.
CREATE TABLE IF NOT EXISTS `treeview` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(200) NOT NULL,
`text` varchar(200) NOT NULL,
`link` varchar(200) NOT NULL,
`parent_id` varchar(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


Step 2: You need to inlcude Bootstrap libaray files and bootstrap treeview plugin files. In this tutorial, we have downloaded plugin and kept plugin JS/CSS files in dist directory.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="dist/bootstrap-treeview.min.css" type="text/css" media="all">
<script src="dist/bootstrap-treeview.min.js"></script>


Step 3: Now we will create tree menu container.

<div class="container">
<h2>Bootstrap Treeview with PHP and MySQL</h2>
<div class="row">
<div class="col-md-6" id="treeview"></div>
</div>
</div>



Step 4: We will make Ajax request to get JSON data from php server side tree_data.php and passed json data to bootstrap treeview plugin method treeview(). The methiod will set data on div container on which we want to render tree structure. Here we will render data on container id "#treeview".

jQuery(document).ready(function(){
jQuery.ajax({
url: "tree_data.php",
cache: false,
success: function(response){
$('#treeview').treeview({data: response});
}
});
});


Step 5: Now in tree_data.php script, we will data from MySQL database and then create PHP array of all tree nodes and encode into JSON and returns.
<?php
include_once("db_connect.php");
$sql = "SELECT id, name, text, link as href, parent_id FROM treeview";
$res = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
//iterate on results row and create new index array of data
while( $row = mysqli_fetch_assoc($res) ) {
$data[] = $row;
}
$itemsByReference = array();
// Build array of item references:
foreach($data as $key => &$item) {
$itemsByReference[$item['id']] = &$item;
}
// Set items as children of the relevant parent item.
foreach($data as $key => &$item) {
if($item['parent_id'] && isset($itemsByReference[$item['parent_id']])) {
$itemsByReference [$item['parent_id']]['nodes'][] = &$item;
}
}
// Remove items that were added to parents elsewhere:
foreach($data as $key => &$item) {
if($item['parent_id'] && isset($itemsByReference[$item['parent_id']]))
unset($data[$key]);
}
// Encode:
echo json_encode($data);
?>



You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]