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.

Also, read:

• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• Bootstrap Contact Form with Captcha using Ajax and PHP
• Multi Select Dropdown with Checkbox using Bootstrap, jQuery and PHP

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 include Bootstrap library 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 may also like:

• Working with php.ini file Configuration
• Control Statements in PHP
• Convert Associative Array into XML in PHP
• Convert XML into Associative Array in PHP
• Using Prepared Statement with PHP & MySQL
• How to Upload File in PHP
• Converting an Array to JSON in PHP
• Converting JSON to Array or Object in PHP
• Manipulating PHP arrays: push, pop, shift, unshift
• Remove Repeated Words From String in PHP
• Converting a PHP Array to a Query String
• 15+ regular expressions for PHP developers
• 10 Most Important Directory Functions in PHP
• 10 little known but useful PHP functions
• PHP Script to Download Large Files Reliably

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download