MDB(Meterial Design for Bootstrap) 에서 sidenav 에 표시할 메뉴를 PHP 와 연동하여 자동으로 표시하는 방법을 구현했다.
먼저, 구글에서 multi level sidenav 를 검색하면 https://mdbootstrap.com/support/jquery/multi-level-in-sidenav-items/ 가 검색될 것이다.
검색된 Tree 구조는 아래와 같다.
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i>메뉴1-1<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i>메뉴2-1</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">메뉴3-1</a></li>
<li><a href="#" class="waves-effect">메뉴3-2</a></li>
<li><a href="#" class="waves-effect">메뉴3-3</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li><a href="#" class="collapsible-header waves-effect">메뉴2-2</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<a href="#" class="collapsible-header waves-effect">메뉴1-2</a>
</li>
|
이걸 가지고 PHP 와 연동된 자동 메뉴를 만들어 보자.
MDB 는 bootstrap 4 기반으로 연동된 템플릿이다.
bootstrap 4 에서는 순환구조가 매끄럽지 못한 거 같다. (내가 제대로 이해를 못했겠지만....)
테이블 구조
CREATE TABLE IF NOT EXISTS `menu_item` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`parent_id` int(11) NOT NULL DEFAULT '0',
`depth` int(3) NOT NULL DEFAULT '1',
`name` varchar(50) NOT NULL,
`text` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ; |
Treeview 메뉴 코드
아래 코드는 https://link2me.tistory.com/1194 게시글과 비교하면서 살펴보면 도움될 것이다.
파일명 : muti_treeview.php
<?php
if(!isset($_SESSION)) {
session_start();
}
require_once 'path.php'; // root 폴더를 기준으로 상대적인 경로 자동 구하기
require_once $g['path_config'].'config.php';
require_once $g['path_config'].'dbconnect.php';
require_once $g['path_class'].'dbDataClass.php';
$d = new DBDataClass();
$res = $d->getDbresult("menu_item", "", "id,parent_id,name");
while($row = mysqli_fetch_assoc($res)){
$sidemenu[] = $row;
}
$side_menu = bootstrap4_sideMenu($sidemenu);
echo $side_menu;
function bootstrap4_sideMenu($array,$parent_id = 0,$parents = array())
{
global $d,$key;
if($parent_id==0){ // sub가 있는 parent_id 값 추출
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){
$url = $element['id'].";".$element['parent_id'];
if(in_array($element['id'],$parents)){
$menu_html .= '<li>';
$menu_html .= '<ul class="collapsible collapsible-accordion">';
$menu_html .= '<li><a class="collapsible-header waves-effect arrow-r" href="'.$url.'"><i class="fa-hand-pointer-o">';
$menu_html .= '</i>'.$element['name'].'<i class="fas fa-angle-down rotate-icon"></i></a>';
$menu_html .= '<div class="collapsible-body">';
} else {
$menu_html .= '<li>';
$menu_html .= '<a class="collapsible-header waves-effect" href="'.$url.'">'.$element['name'].'</a>';
$menu_html .= '</li>';
}
if(in_array($element['id'],$parents)){
$menu_html .= '<ul>';
$menu_html .= bootstrap4_sideMenu($array, $element['id'], $parents);
$menu_html .= '</ul>';
$menu_html .= '</div>';
$menu_html .= '</ul>';
$menu_html .= '</li>';
}
}
}
return $menu_html;
}
?>
|
이제 MDB 템플릿 구조에 포함된 HTML 파일구조다. jQuery 코드는 모두 생략했다.
<!DOCTYPE html>
<head>
<?php require_once 'path.php';// root 폴더를 기준으로 상대적인 경로 자동 구하기 ?>
<?php require_once $g['path_config'].'config.php';?>
<?php require_once $g['path_layout'].'default/_import.head.php';?>
<?php require_once $g['path_root'].'deviceChk.php';?>
</head>
<body class="fixed-sn mdb-skin">
<header>
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav sn-bg-4 fixed">
<ul class="custom-scrollbar">
<!-- Side navigation links -->
<?php require_once $g['path_menu'].'item/multi_treeview.php' ?>
</ul>
<div class="sidenav-bg mask-strong"></div>
</div><!--/. Sidebar navigation -->
<!-- Navbar -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p><?=$hostName;?></p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<?php require_once $g['path_menu'].'item/item_login.php' ?>
</ul>
</nav>
<!-- /.Navbar -->
</header>
<!--Main layout-->
<main>
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-12">
<div class="content" id="panel_content">
</div>
<div id="ajaxPath" menu-path="<?php echo $g['path_help'];?>" ></div>
</div>
</div>
</div>
</main>
<!--/Main layout-->
<!-- SCRIPTS -->
<?php require_once $g['path_layout'].'default/_import.tail.php';?>
</body>
</html> |
