PHP MySQL Create Dynamic Treeview Example

By Hardik Savani May 14, 2024 Category : PHP Javascript Bootstrap jQuery MySql

Hi,

If you are looking for tutorial on how to create dynamic treeview for menu or category using php mysql, then you are a right place. In this example we will build step by step dynamic tree view from database in php.

If you want to create treeview in your website application then you should use Bootstrap Treeview plugin for display menu in hierarchical treeview structures with php. in this example we will create 'item' table with 'id', 'name' and 'parent_id'. Then we just create index.php file with write jquery ajax code for dynamic treeview. Then after we will create ajax file and write database logic there.

So, just follow few step and you will able to see bellow screen.

Preview:

Step 1: Create item table

In first step, we create new new table "item" in database. You can use following SQL Query for create "item" table. So let's create using bellow sql query:

item table:

CREATE TABLE IF NOT EXISTS `item` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `parent_id` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2

Step 2: Create index.php File

In this step, we will use Bootstrap Treeview plugin for display menu in hierarchical treeview structures with php and write ajax code:

index.php

<!DOCTYPE html>
<html>
<head>
  <title>Create Dynamic Treeview Example with PHP MySQL</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" />
  <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
</head>
<body>
  
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h1>Create Dynamic Treeview Example with PHP MySQL - ItSolutionStuff.com</h1>
    </div>
    <div class="panel-body">
      <div class="col-md-8" id="treeview_json">
      </div>
    </div>
  </div>
</div>
  
<script type="text/javascript">
$(document).ready(function(){
  
   var treeData;
   
   $.ajax({
        type: "GET",  
        url: "/ajaxpro.php",
        dataType: "json",       
        success: function(response)  
        {
          initTree(response)
        }   
  });
   
  function initTree(treeData) {
    $('#treeview_json').treeview({data: treeData});
  }
   
});
</script>
   
</body>
</html>

Read Also: PHP Paypal Payment Gateway Integration Example

Step 3: Create ajaxpro.php and db_config.php File

In this step, we will create ajaxpro.php and write code for fetch data from mysql database. So, we will write code for database logic. Also we will create database configuration file:

db_config.php

<?php
  
    $hostName = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "test";
   
    $mysqli = new mysqli($hostName, $username, $password, $dbname);
  
?>

ajaxpro.php

Read Also: PHP MySQL Column Sorting Example Tutorial
<?php
    
    require 'db_config.php';
  
    $parentKey = '0';
    $sql = "SELECT * FROM item";
  
    $result = $mysqli->query($sql);
   
      if(mysqli_num_rows($result) > 0)
      {
          $data = membersTree($parentKey);
      }else{
          $data=["id"=>"0","name"=>"No Members present in list","text"=>"No Members is present in list","nodes"=>[]];
      }
   
      function membersTree($parentKey)
      {
          require 'db_config.php';
  
          $sql = 'SELECT id, name from item WHERE parent_id="'.$parentKey.'"';
  
          $result = $mysqli->query($sql);
  
          while($value = mysqli_fetch_assoc($result)){
             $id = $value['id'];
             $row1[$id]['id'] = $value['id'];
             $row1[$id]['name'] = $value['name'];
             $row1[$id]['text'] = $value['name'];
             $row1[$id]['nodes'] = array_values(membersTree($value['id']));
          }
  
          return $row1;
      }
  
      echo json_encode(array_values($data));
  
?>

Now you are ready to run this example.

I hope it can help you...

Tags :
Previous

Codeigniter Create Dynamic Tree View using Treeview JS
Next

JQuery Ajax CRUD Operations in PHP MySQL Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares