Situação:
Estou construindo um menu com submenu de informações que recupero do banco de dados, estes dados são categorias e subcategorias de produtos, este menu esta pronto e funcionando porém quando não há subcategorias (que é um submenu do menu) esta gerando uma <ul>
vazia.
Tecnologias envolvidas:
- CakePHP 3.0 que recupera os dados do banco através de seu ORM. (julgo pouco impactante no problema).
- Templates padrão do CakePHP com extensão
.ctp
. - PHP usado para renderizar o menu e submenu.
SQL das tabelas categoria e subcategoria
CREATE TABLE categories (
id INT AUTO_INCREMENT PRIMARY KEY,
category_name VARCHAR(255) NOT NULL,
created DATETIME,
modified DATETIME
);
CREATE TABLE sub_categories (
id INT AUTO_INCREMENT PRIMARY KEY,
sub_category_name VARCHAR(255) NOT NULL,
category_id INT NOT NULL,
created DATETIME,
modified DATETIME,
FOREIGN KEY category_key (category_id) REFERENCES categories(id)
);
Template que gera o menu e submenu
<div id="left-sidebar" class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<?php foreach($categories as $category): ?>
<li role="presentation">
<a href="#"> <?= $category ?>
<i class="glyphicon glyphicon-chevron-right"></i></a>
<ul>
<?php foreach($subCategories as $subCategory): ?>
<?php if($subCategory['category']['category_name'] == $category): ?>
<li role="presentation">
<a href="#"> <?= $subCategory['sub_category_name'] ?></a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
</ul>
</div>
OBS $categories
é um array de string simples e $subCategories
é um array de objetos (que possui como uma de suas propriedades um objeto que representa uma categoria onde uma propriedade deste objeto e o nome da categoria).
Foto do menu e submenu (o problema de acentuação é devido a collation do mysql, mudarei posteriormente).
Menu renderizado no browser
<ul class="nav nav-pills nav-stacked">
<li role="presentation">
<a href="#"> Alimentos<i class="glyphicon glyphicon-chevron-right"></i></a>
<ul>
<li role="presentation">
<a href="#"> Industrilizado</a>
</li>
<li role="presentation">
<a href="#"> In natura</a>
</li>
<li role="presentation">
<a href="#"> Comida pronta</a>
</li>
</ul> </ul>
</li>
<li role="presentation">
<a href="#"> Bazar<i class="glyphicon glyphicon-chevron-right"></i></a>
<ul>
</ul>
</li>
</ul>