Display categories as (ul) items and subcategories as (li) items in php

Question

function showcategory($parentid)
{
     $sql = "select * from categories where parent_id='".$parentid."'";
     $result = mysqli_query($GLOBALS['conn'],$sql);
     $output ="<ul id ='tree1' >\n";
    while($data=mysqli_fetch_array($result))
    {
        $output.="<li>\n".$data['name'];
        $output.=showcategory($data['id']);
        $output.="</li>";
    }
    $output.="</ul>";
    return $output;
}

I have a treeview created using PHP and the function that extracts the treeview correctly extracts the categories and their subcategories. The categories table in the database has a column that holds the specified value (1/0), where 1 represents the main category and 0 represents the subcategory. The problem I'm facing is that when I pull the categories from the database, it makes no difference whether the categories are main categories or subcategories. They are all displayed as li elements and I'm using CSS formatting on the tree view to create the folder icons on the list items. The question is how to display the main category with value 1 in the category table as a ul element which contains a folder icon that can be opened to show the content inside, and the subcategory with value 0 in the category table should be displayed as li element without Any folder icon (meaning only subcategory names are displayed as text).

My output

I need to get the output as shown in the picture.

Answer 1

I suggest you modify your code to take into account whether the item is a main category or a subcategory.

"Save a column with specified values ​​(1/0), where 1 represents the main category and 0 represents the subcategory" - Assume the column is named type.

function showcategory($parentid)
{
    $sql = "select * from categories where parent_id='".$parentid."'";
    $result = mysqli_query($GLOBALS['conn'],$sql);
    $output ="
\n";
    while($data=mysqli_fetch_array($result))
    {
        $output.= '
'.$data['name'];
        if ($data['type']) {
            $output.=showcategory($data['id']);
        }
        $output.="
";
    }
    $output.="
";
    return $output;
}

You should then be able to use CSS to style the subcategory node, matching li.type0

Answer 2

I recommend that you only query the database once rather than putting the database query into a recursive function.

You need to check the menu item's primary position (based on type value 0/1). This will add class='main' to the main project and you can use css to style the main icon. Let's try this modification.

function showcategory($data, $parentId = 0) {
$menu = '
';

foreach ($data as $item) {
    if ($item['parent_id'] == $parentId) {
        $menu .= '';
        
        // Recursive call to build sub-menu if it has children
        $submenu = showcategory($data, $item['id']);
        if ($submenu) {
            $menu .= $submenu;
        }

        $menu .= '';
    }
}

$menu .= '
';

return $menu;
}

$sql = "select * from categories where parent_id='".$parentid."'";
$result = mysqli_query($GLOBALS['conn'],$sql);
$data=mysqli_fetch_array($result)

$menu = showcategory($data);
echo $menu;