Build boostrap4 navmenu from multiple mysql tables - php

Question

I want to make a bootstrap 4 nav-menu, I have the following SQL query and I have some codes below it but I can't get my head around how to do this!
These are the tables
TABLE menu
--------------------------------------
| id | title | url |
| 1 | Home | index.php |
| 2 | Menu | # |
| 3 | Contact | # |
| 2 | Winkelwagen | winkelwagen.php |
--------------------------------------
TABLE categories
-------------------------------------
| id | title_cat | url | cparent_id |
| 1 | Auto's | # | 2 |
| 2 | Drank | # | 2 |
-------------------------------------
TABLE products
-------------------------------------
| id | product | url | pparent_id |
| 1 | Ferrari | # | 1 |
| 2 | Heineken | # | 2 |
-------------------------------------
Here is the query:
$query = "SELECT
X.level,
X.id,
X.name,
X.url,
X.parent_id
FROM
(
SELECT
1 AS LEVEL,
id AS id,
title AS NAME,
url AS url,
0 AS parent_id,
id AS id_1,
-1 AS id_2,
-1 AS id_3
FROM
menu
WHERE
1
UNION
SELECT
2 AS LEVEL,
id AS id,
title_cat AS NAME,
url AS url,
cparent_id AS parent_id,
cparent_id AS id_1,
id AS id_2,
-1 AS id_3
FROM
categories
WHERE
1
UNION
SELECT
3 AS LEVEL,
products.id AS id,
products.product AS NAME,
products.url AS url,
products.pparent_id AS parent_id,
categories.cparent_id AS id_1,
categories.id AS id_2,
products.id AS id_3
FROM
products
LEFT JOIN categories ON products.pparent_id = categories.id
WHERE
1
) X
WHERE
1
ORDER BY
id_1,
id_2,
id_3";
Which gives the following table with levels (and I added the parent_id too, but with the parent_id buildTree($array) goes into a loop):
level id name url parent_id
1 1 Home index.php 0
1 2 Menu # 0
2 1 Auto's # 2
3 1 Ferrari # 1
2 2 Drank # 2
3 2 Heineken # 2
1 3 Contact contact.php 0
1 4 Winkelwagen winkelwagen.php 0
I want the nav-menu to look like this:
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Auto's</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Ferrari</a>
</div>
</div>
<div class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Drank</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Heineken</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="winkelwagen.php">Winkelwagen</a>
</li>
I have the following codes, first we make a array from the query fetched which you already saw above:
$sql = $pdo->prepare($query);
function menu_builder($sql) {
if ($sql->execute()) {
while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
$array[] = $row;
}
buildTree($array); // or menu_builder($sql);
}
}
The next code doesn't work because it goes into a infinite loop (and if it works I still need to make the html right :):
function buildTree($array, $parent_id = 0, $parents = array()) {
if($parent_id == 0) {
foreach ($array as $element) {
if (($element['parent_id'] != 0) && !in_array($element['parent_id'], $parents)) {
$parents[] = $element['parent_id'];
}
}
}
$menu_html = '';
foreach($array as $element) {
if($element['parent_id'] == $parent_id) {
if(in_array($element['id'], $parents)) {
$menu_html .= '<li class="dropdown">';
$menu_html .= ''.$element['name'].' <span class="caret"></span>';
}
else {
$menu_html .= '<li>';
$menu_html .= '' . $element['name'] . '';
}
if(in_array($element['id'], $parents)) {
$menu_html .= '<ul class="dropdown-menu" role="menu">';
$menu_html .= buildTree($array, $element['id'], $parents);
$menu_html .= '</ul>';
}
$menu_html .= '</li>';
}
}
return $menu_html;
}
And this one makes a normal <ul>/<li> menu which I don't know how to get it working for me with bootstrap:
function menu_builder($sql) {
$level = 0;
if ($sql->execute()) {
while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
while($level < $row['level']) {
echo "<ul>" . PHP_EOL;
$level++;
}
while($level > $row['level']) {
echo "</ul>" . PHP_EOL;
$level--;
}
echo " <li>#" . $row['id'] . "->" . $row['name'] . "</li>" . PHP_EOL;
}
}
while($level-- > 0) {
echo "</ul>" . PHP_EOL;
}
}
If you need more information please ask me, I tried to make the question as clear as possible with the codes I'm trying and the table I'm using.
jQuery:
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}

Answer 1

I've gone for a more linear approach than your recursive buildTree. It's a little easier this way because of the need to output different HTML dependent on the level of the tree. I've created an SQLFiddle for your data with a few extra values I added for testing purposes. The query changes so that I can see whether a menu item has a submenu and also if that submenu has a product, all in one row:
SELECT m.title AS title, m.url AS m_url,
c.title_cat AS title_cat, c.url AS c_url,
p.product AS product, p.url AS p_url
FROM menu m
LEFT JOIN categories c
ON c.cparent_id = m.id
LEFT JOIN products p
ON p.pparent_id = c.id
ORDER BY m.id, c.id, p.id
The output of this query (based on the expanded data) is:
title m_url title_cat c_url product p_url
Home index.php (null) (null) (null) (null)
Menu # Auto's # Ferrari www.ferrari.com
Menu # Auto's # Maserati #
Menu # Drank # Heineken #
Menu # Food # (null) (null)
Second Menu # Hotels # The Ritz www.ritzparis.com
Contact contact.php (null) (null) (null) (null)
Winkelwagen winkelwagen.php (null) (null) (null) (null)
The basic query call remains the same although instead of fetching all the data and then processing it, I fetch the data and process it at the same time.
$sql = $pdo->prepare($query);
$sql->execute() or die("Unable to execute query!");
buildTree($sql);
The buildTree routine. I think it's fairly self-explanatory with the comments but basically it goes through each row of data and determines if it needs to create a new menu item, a new submenu, or a new submenu item in turn.
function buildTree($sql) {
$thisTitle = '';
$thisCategory = '';
while ($element = $sql->fetch(PDO::FETCH_ASSOC)) {
if (!$element['c_url']) {
// simple top element
// do we need to close any prior menus?
if ($thisCategory != '') {
echo " </div>\n </div>\n";
$thisCategory = '';
}
if ($thisTitle != '') {
echo "</li>\n";
$thisTitle = '';
}
echo <<<EOD
<li class="nav-item">
<a class="nav-link" href="{$element['m_url']}">{$element['title']}</a>
</li>
EOD;
}
else {
// got a category
// do we need a new menu item?
if ($element['title'] != $thisTitle) {
// is it the first menu item? if not, need to close the previous one
if ($thisTitle != '') {
// do we also need to close a previous category menu?
if ($thisCategory != '') {
echo " </div>\n </div>\n";
$thisCategory = '';
}
echo "</li>\n";
}
$thisTitle = $element['title'];
echo <<<EOD
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="{$element['m_url']}" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">$thisTitle</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
EOD;
}
// do we need a new submenu?
if ($element['title_cat'] != $thisCategory) {
// is it the first submenu? if not, need to close the previous one
if ($thisCategory != '') echo " </div>\n";
$thisCategory = $element['title_cat'];
// create a submenu
echo <<<EOD
<div class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="{$element['c_url']}">$thisCategory</a>
EOD;
}
// is there a product?
if ($element['p_url']) {
// create a product menu item
echo <<<EOD
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{$element['p_url']}">{$element['product']}</a>
</div>
EOD;
}
}
}
}
The output of this code for the extended data is:
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Auto's</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="www.ferrari.com">Ferrari</a>
</div>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Maserati</a>
</div>
</div>
<div class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Drank</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Heineken</a>
</div>
</div>
<div class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Food</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Second Menu</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Hotels</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="www.ritzparis.com">The Ritz Paris</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="winkelwagen.php">Winkelwagen</a>
</li>

Answer 2

I think part of what is making this difficult is trying to combine creating your data structures with presentation. Usually it is best to structure your data first before worrying about how to present it.
I tried my best to break this up into separate steps as best I could. I added some commented out print_r statements so you can see what each step is doing. Let me know if you have any questions about it.
#!/usr/bin/php
<?php
// The query results
$results = [
// Level, id, title, link, parent
[1, 1, 'Home', 'index.php', 0],
[1, 2, 'Menu', '#', 0],
[2, 1, "Auto's", '#', 2],
[3, 1, 'Ferrari', '#', 1],
[2, 2, 'Drank', '#', 2],
[3, 2, 'Heineken', '#', 2],
[1, 3, 'Contact', 'contact.php', 0],
[1, 4, 'Winkelwagen', 'winkelwagen.php', 0],
];
// creates a constant for the query result row keys (you should avoid using a global constant for this)
define('KEYS', ['level', 'id', 'title', 'link', 'parent_id']);
// adds the keys to each result row (this is just to help readability/maintainability)
$rows = array_map(function (array $item): stdClass {
// cast this as an object so we don't have to use pass by reference later (I think this improves readability).
return (object)array_combine(KEYS, $item);
}, $results);
// uncomment to see raw $rows
//print_r($rows);die;
// creates a key for each row based on the level and id (this way they will be unique)
$keys = array_map(function (stdClass $row): string {
$key = "$row->level-$row->id";
$row->key = $key;
return $key;
}, $rows);
$keyed = array_combine($keys, $rows);
// uncomment to see $keyed values
//print_r($keyed);die;
// converts the keyed records into a tree.
$tree = [];
foreach($keyed as $item) {
if (1 === $item->level) {
$tree[] = $item;
continue;
}
$parent = ($item->level - 1).'-'.$item->parent_id;
if (!isset($keyed[$parent])) {
throw new Exception("could not find parent element '$parent'");
}
$keyed[$parent]->children[] = $item;
}
// uncomment to see $tree structure
//print_r($tree);die;
?>
<!-- add ul classes for style -->
<ul>
<?php foreach ($tree as $trunk): ?>
<?php if (!isset($trunk->children)): ?>
<li class="nav-item">
<a class="nav-link" href="<?=$trunk->link?>"><?=$trunk->title?></a>
</li>
<?php else: ?>
<li class="nav-item dropdown">
<!-- id attributes must be unique so we add the item key to the end of it to make it unique-->
<a class="nav-link dropdown-toggle" role="button"
href="<?=$trunk->link?>" id="navbarDropdown<?=$trunk->key?>"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?=$trunk->title?></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<?php foreach ($trunk->children as $branch): ?>
<?php if (!isset($branch->children)): ?>
<!-- add style to this if needed -->
<?=$branch->title?>
<?php else: ?>
<div class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" id="navbarDropdown<?=$branch->key?>"
href="<?=$branch->link?>"><?=$branch->title?></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown<?=$branch->key?>">
<!-- You may need to add some additional style code to this for it to work with multiple items -->
<?php foreach ($branch->children as $leaf): ?>
<a class="dropdown-item" href="<?=$branch->link?>"><?=$branch->title?></a>
<?php endforeach; ?>
</div>
</div>
<?php endif ?>
<?php endforeach; ?>
</div>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
As a rule of thumb I try to avoid using nested loops, but in this instance each level seemed to have separate styling. If you ever want to make this able to handle more then three levels you may want to think about using a recursive function.

Answer 3

Try This
<?php
$servername = "localhost";
$username = "root";
$password = "";
try {
$pdo = new PDO("mysql:host=$servername;dbname=testing", $username, $password);
// set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
$querySubmenu = "SELECT a.id, a.title, a.url, b.title_cat AS cat_name, b.url AS cat_url, c.product AS product_name, c.url AS product_url FROM menu a
JOIN (SELECT * FROM categories) b ON a.id = b.cparent_id
JOIN (SELECT * FROM products) c ON b.id = c.pparent_id";
$queryMenu = "SELECT a.*, 0 AS cat_name, 0 AS cat_url, 0 AS product_name, 0 AS product_url FROM menu a WHERE id NOT IN (
SELECT a.id FROM menu a
JOIN (SELECT * FROM categories) b ON a.id = b.cparent_id
JOIN (SELECT * FROM products) c ON b.id = c.pparent_id)";
$sqlMenu = $pdo->prepare($queryMenu);
$sqlSubmenu = $pdo->prepare($querySubmenu);
$menu = menu_builder($sqlMenu);
$submenu = menu_builder($sqlSubmenu);
$arr = array_merge($menu, $submenu);
usort($arr, function ($a, $b) {
return $a['id'] - $b['id'];
});
function menu_builder($sql)
{
if ($sql->execute()) {
while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
$array[] = $row;
}
return $array;
}
}
foreach ($arr as $element) {
if ($element['cat_name'] == '0') { ?>
<li class="nav-item">
<a class="nav-link" href="<?php echo $element['url'] ?>"><?php echo $element['title'] ?></a>
</li>
<?php }
if ($element['cat_name'] != '0') { ?>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?php echo $element['title'] ?></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="<?php echo $element['cat_url'] ?>"><?php echo $element['cat_name'] ?></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="<?php echo $element['product_url'] ?>"><?php echo $element['product_name'] ?></a>
</div>
</div>
</div>
</li>
<?php }
}
?>