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 " 
 
<ol class='tree'> "; 
            }
             
            if ($currLevel == $prevLevel){
                echo " </li>
 
 
 ";
            }
             
            $menuLevel = $product['parent_id'];
            if($product['hasChild'] > 0){
                $menuLevel = $productId;
            }
             
            echo '
 
<li> <label for="level'.$menuLevel.'">'.$product['name'].'</label><input type="checkbox" id="level'.$menuLevel.'"/>';
             
            if ($currLevel > $prevLevel) { 
                $prevLevel = $currLevel; 
            }
             
            $currLevel++; 
             
            generateTreeView ($products, $productId, $currLevel, $prevLevel);
            $currLevel--;
        }
    }
     
    if ($currLevel == $prevLevel) echo " </li>
 
</ol>
 
 
 ";
}

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

Read Also:  How to check array is empty or not in php?

Step 3: display tree view.

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

<html>
<body>
<?php 
$mysqli = mysqli_connect('localhost', 'root', '', 'pakainfo_v1'); 
if (mysqli_connect_errno()) { 
 printf("Connect failed: %s\n", mysqli_connect_error()); exit(); 
} 
 
$res = mysqli_query($mysqli, "SELECT product.*, (SELECT COUNT(*) FROM `products` WHERE parent = product.id) as hasChild FROM `products` as product"); 
 
$products = array(); 
while($row = mysqli_fetch_assoc($res)){ 
$products[$row['id']] = array("parent_id" => $row['parent'], "name" => $row['name'], "hasChild" => $row['hasChild']); 
}
?>
 
 
<div class="treemenu">
<?php if(count($products) > 0){
    generateTreeView($products, 0);
}
?>
</div>
 
 
</body>
</html>

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; }


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.