Posted inJavaScript / jQuery / Mysql / Mysqli / php

tree structure in php with mysql example – Best Way To Create PHP Dynamic Treeview Menu Using bootstrap 3 | 4

tree structure in php with mysql example: CREATE DYNAMIC TREE VIEW MENU WITH PHP, MYSQL, CSS Steps to generate tree view menu: create a table ‘products’ in MySQL database, generateTreeView() which call recursive to render the products, display tree structure in php with mysql example and add css code.

tree structure in php with mysql example

Step 1: First we need to create a table ‘products’ in MySQL database.

This table contains four column tree structure in php with mysql example, The column id is the product id and name is the product name.

--
-- Table structure for table `products`
--
 
CREATE TABLE IF NOT EXISTS `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(200) NOT NULL,
  `title` varchar(200) NOT NULL,
  `parent` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
 
--
-- Dumping data for table `products`
--
 
INSERT INTO `products` (`id`, `name`, `title`, `parent`) VALUES
(1, 'PRODUCT 1', 'PRODUCT 1', NULL),
(2, 'PRODUCT 1.1', 'PRODUCT 1.1', 1),
(3, 'PRODUCT 1.2', 'PRODUCT 1.2', 1),
(4, 'PRODUCT 2', 'PRODUCT 2', NULL),
(5, 'PRODUCT 3', 'PRODUCT 3', NULL),
(6, 'PRODUCT 3.1', 'PRODUCT 3.1', 5),
(7, 'PRODUCT 3.2', 'PRODUCT 3.2', 5),
(8, 'PRODUCT 3.2.1', 'PRODUCT 3.2.1', 7),
(9, 'PRODUCT 3.2.2', 'PRODUCT 3.2.2', 7);

Step 2: recursive to render the products.

We have a method generateTreeView() which call recursive to render the products.

function generateTreeView($products, $currentParent, $currLevel = 0, $prevLevel = -1) {
    foreach ($products as $productId => $product) {
        if ($currentParent == $product['parent_id']) {                       
            if ($currLevel > $prevLevel){
                echo " 
 
    "; } if ($currLevel == $prevLevel){ echo " "; } $menuLevel = $product['parent_id']; if($product['hasChild'] > 0){ $menuLevel = $productId; } echo '
  1. '; if ($currLevel > $prevLevel) { $prevLevel = $currLevel; } $currLevel++; generateTreeView ($products, $productId, $currLevel, $prevLevel); $currLevel--; } } if ($currLevel == $prevLevel) echo "
"; }

Don’t Miss : PHP MySQL Dynamic Treeview Using JQuery Ajax Example

Step 3: display tree view.

Make a file index.php and add below source code to display tree view.



 $row['parent'], "name" => $row['name'], "hasChild" => $row['hasChild']); 
}
?>
 
 
0){ generateTreeView($products, 0); } ?>

Step 4: Create CSS file

Make a CSS file style.css and copy below css source code.

input{ font-size: 1em; }
ol.tree
{
    padding: 0 0 0 20px;
    width: 320px;
}
li 
{
    position: relative; 
    margin-left: -5px;
    list-style: none;
}
li input
{
    position: absolute;
    left: 0;
    margin-left: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    height: 1em;
    width: 1em;
    top: 0;
}
li input + ol
{
    background: url(img/arrow-down.png) 45px -3px no-repeat;
    margin: -0.938em 0 0 -44px;
    height: 1em;
}
li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
li label
{
    cursor: pointer;
    display: block;
    padding-left: 24px;
}
 
li input:checked + ol
{
    background: url(img/arrow-up.png) 45px 4px no-repeat;
    margin: -1.25em 0 0 -44px;
    padding: 1.563em 0 0 80px;
    height: auto;
}
li input:checked + ol > li { display: block; margin: 0 0 0.125em;}
li input:checked + ol > li:last-child { margin: 0 0 0.063em; }

how to draw a tree structure in php from mysql data?

To draw a tree structure in PHP from MySQL data, you can follow these steps:

Retrieve the data from the MySQL database: Retrieve the data that represents the tree structure from the MySQL database using a SQL query.

Transform the data into a hierarchical array: Use a loop to transform the data into a hierarchical array that represents the tree structure. Each node in the array should have an ID, a parent ID, and a label.

Build the HTML tree structure: Use a recursive function to build the HTML tree structure from the hierarchical array. The function should iterate over each node in the array and build an HTML list item for it. If the node has children, the function should call itself recursively to build the child nodes.

Here’s an example PHP code that demonstrates the above steps:

 $row['parent_id'],
        'label' => $row['label'],
        'children' => array()
    );
}

foreach ($tree as $node_id => &$node) {
    if ($node['parent_id'] != 0) {
        $tree[$node['parent_id']]['children'][$node_id] =& $node;
    }
}

// Build the HTML tree structure
function buildTree($nodes) {
    $html = '
    '; foreach ($nodes as $node_id => $node) { $html .= '
  • ' . $node['label']; if (!empty($node['children'])) { $html .= buildTree($node['children']); } $html .= '
  • '; } $html .= '
'; return $html; } echo buildTree($tree); ?>

In this example, we first retrieve the data from the MySQL database and transform it into a hierarchical array using a loop. We then use a recursive function called buildTree to build the HTML tree structure from the hierarchical array. The function takes an array of nodes as input, iterates over each node, and builds an HTML list item for it. If the node has children, the function calls itself recursively to build the child nodes. Finally, we call the buildTree function with the hierarchical array as input to generate the HTML tree structure.

I hope you get an idea about tree structure in php with mysql example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype