웹마스터 팁

  2. Support
  3. 웹마스터 팁

v1.5 관리자 페이지에서 v1.4처럼 모듈 목록 펼쳐놓기

2012.01.21 22:41

우진홈

v1.5 관리자 페이지에서 v1.4처럼 모듈 목록 펼쳐놓기


모듈 정보파일의 모듈분류(category)를 활용하여 v1.4 관리자 페이지와 같은 모듈 목록을 펼쳐 놓습니다.

관리자 모듈에서 2개의 파일을 수정합니다.


1. xe/modules/admin/tpl/_spLnb.content.html 


?
1
2
3
4
5
6
7
8
9
10
<div class="lnb">
    <h2 class="h2">{$gnbUrlList[$parentSrl]['text']}</h2>
    <ul>
        <!--@if(count($gnbUrlList[$parentSrl]['list']) > 0)-->
        <!--@foreach($gnbUrlList[$parentSrl]['list'] AS $key=>$value)-->
        <li <!--@if($value['text'] == $subMenuTitle)-->class="active"<!--@end-->><a href="{html_entity_decode($value['href'])}">{$value['text']}</a></li>
        <!--@end-->
        <!--@end-->
    </ul>
</div>


위 파일을 열면 요것이 전부인데 맨 아래 </div> 바로 윗줄에 아래와 같이 추가합니다.

v1.4 관리자 모듈의 loadSideBar() 함수를 통째로 복구한 내용입니다...^^ 

인스톨된 모듈의 목록과 선택된 모듈을 구하고 목록을 만들어 출력한 후 스크립트를 이용해 접고 펼수 있도록 합니다.

※ 수정된 파일을 첨부하였지만 직접 수정하려는 경우 코드 하이라이트 우측 상단에서 뷰소스(view source) 보기를 클릭하여

추가되는 내용만 복사->붙여넣기 하십시오.


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<div class="lnb">
    <h2 class="h2">{$gnbUrlList[$parentSrl]['text']}</h2>
    <ul>
        <!--@if(count($gnbUrlList[$parentSrl]['list']) > 0)-->
        <!--@foreach($gnbUrlList[$parentSrl]['list'] AS $key=>$value)-->
        <li <!--@if($value['text'] == $subMenuTitle)-->class="active"<!--@end-->><a href="{html_entity_decode($value['href'])}">{$value['text']}</a></li>
        <!--@end-->
        <!--@end-->
    </ul>
 
<!-- // 여기서부터 -->
{@
    $oModuleModel = &getModel('module');
    $installed_module_list = $oModuleModel->getModulesXmlInfo();
 
    $installed_modules = $package_modules = array();
    $package_idx = 0;
}
<block loop="$installed_module_list=>$key, $val">
{@
    if($val->category == 'migration') $val->category = 'system';
    if($val->category == 'interlock') $val->category = 'accessory';
    if($val->category == 'statistics') $val->category = 'accessory';
 
    if($val->module == 'admin' || !$val->admin_index_act) continue;
    // get action information
    $action_spec = $oModuleModel->getModuleActionXml($val->module);
    $actions = array();
    if($action_spec->default_index_act) $actions[] = $action_spec->default_index_act;
    if($action_spec->admin_index_act) $actions[] = $action_spec->admin_index_act;
    if($action_spec->action) foreach($action_spec->action as $k => $v) $actions[] = $k;
 
    $obj = null;
    $obj->category = $val->category;
    $obj->title = $val->title;
    $obj->description = $val->description;
    $obj->index_act = $val->admin_index_act;
    if(in_array(Context::get('act'), $actions)) $obj->selected = true;
}
<!--@if($val->category == 'package')-->
{@
    if($package_idx == 0) $obj->position = "first";
    else $obj->position = "mid";
    $package_modules[] = $obj;
    $package_idx ++;
    if($obj->selected) $package_selected= 'true';
}
<!--@else-->
{@ $installed_modules[] = $obj;}
<!--@end-->
<!--@if($obj->selected)-->
{@
    $selected_module_category=$val->category;
    $selected_module_info=$val;
}
<!--@end-->
</block>
 
<script type="text/javascript">
<!--
function toggleModuleMenu(category) {
    jQuery('#module_'+category).toggleClass('close');
     
    var arr = new Array();
    jQuery('ul.restored_navigation > li').each(function(){
        var o = jQuery(this);
        if(!o.hasClass('close')) return;
        var idx = o.attr('id').replace(/^module_/,'');
        arr.push(idx);
    });
    var expire= new Date();
    expire.setTime(expire.getTime()+(7000*24*3600000));
    xSetCookie('XEAM',arr.join(','),expire,'/');
}
//-->
</script>
 
<style type="text/css">
.x .restored_navigation_wrapper {position:relative; *zoom:1; margin-top:10px; padding:0; border-bottom:2px solid #CCC;}
.x .restored_navigation {list-style:none; position:relative; *zoom:1; margin:0; padding:0;}
.x .restored_navigation li {list-style:none;}
.x .restored_navigation li.close a.parent {border-bottom:none;}
.x .restored_navigation li.close ul {display:none;}
.x .restored_navigation li ul li a {text-decoration:none;}
.x .restored_navigation li ul li a:hover {font-weight:bold; text-decoration:none;}
.x .restored_navigation li ul li.on a {color:#a33;}
.x .restored_navigation li a.parent {border:none; border-top:1px solid #CCC;}
.x .restored_navigation li.active {border:none; border-bottom:1px solid #CCC;}
</style>
 
<div class="restored_navigation_wrapper">
    <ul class="restored_navigation">
    {@$_c = explode(',',$_COOKIE['XEAM'])}
        <!--@foreach($lang->module_category_title as $key => $val)-->
        <!--@if($key != 'migration' && $key != 'interlock' && $key != 'statistics')-->
 
            <!--@if(in_array($key,$_c)&&$key!=$selected_module_category)-->
                {@$_cs = true;}
            <!--@else-->
                {@$_cs = false;}
            <!--@end-->
 
            <li id="module_{$key}" class="parent <!--@if($_cs)-->close<!--@end--> <!--@if($key==$selected_module_category)-->active<!--@end-->"><a href="#"  onclick="toggleModuleMenu('{$key}'); return false;" class="parent">{$val}</a>
                <ul>
                    <!--@foreach($installed_modules as $k => $v)--><!--@if($v->category == $key)-->
                    <li class="on"|cond="$v->selected"><a href="{getUrl('','module','admin','act',$v->index_act)}" title="{$v->description}">{$v->title}</a></li>
                    <!--@end--><!--@end-->
                </ul>
            </li>
        <!--@end-->
        <!--@end-->
    </ul>
</div>
<!-- // 여기까지 -->
</div>


 
2. xe/modules/admin/tpl/layout.html


?
1
2
3
4
5
6
7
8
<!--#include("./_spHeader.html")-->
<div class="content" id="content">
    {$content}
</div>
<!--@if($parentSrl != 0)-->
<!--#include("./_spLnb.content.html")-->
<!--@end-->
<!--#include("./_spFooter.html")-->


관리자 페이지 레이아웃 템플릿도 별거 없습니다...^^ 요기서 아래처럼 2줄만 지워 줍니다.


?
1
2
3
4
5
6
7
8
<!--#include("./_spHeader.html")-->
<div class="content" id="content">
    {$content}
</div>
 
<!--#include("./_spLnb.content.html")-->
 
<!--#include("./_spFooter.html")-->


<!--@if($parentSrl != 0)--> 과 <!--@end--> 만 지운 것이죠.

그러면 아래 그림처럼 관리자 페이지에서 v1.4 때처럼 모듈의 목록이 펼쳐져 보일 것입니다...^^


각각의 모듈마다 조금씩 변경된 내용들은 어쩔수 없지만 [설치된]을 찾지 않아도, [즐겨찾기]를 잘 몰라도

모듈로 곧바로 갈 수 있게 됩니다.


xe_admin.gif 


v1.5 ZEROBOARD 스타일 관리자 페이지 만들기


v1.5는 무채색의 매우 단조로운 관리자 페이지를 출력합니다.

다음 1개의 파일을 조금 수정하면 아래 그림과 같이 색감을 더할 수 있습니다.


ZEROBOARD_Style_01.gif


ZEROBOARD_Style_02.gif


● ZEROBOARD Style XE Admin Module CSS Setting


xe/modules/admin/tpl/_spHeader.html


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{@Context::addHtmlHeader('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes" />')}
 
<!-- // 여기서부터 -->
<style type="text/css">
/* ZEROBOARD Style XE Admin Module CSS Setting --- XESCHOOL */
 
/* common */
body{background: #333}
.x p input,.x textarea{background: #FFF !important;}
.x .header{background:#6F080A !important;}
.x .header .account{background: #000 !important;}
.x .footer{background: #333 !important; border:none !important; padding:1.5em 1em;}
.x .footer p,.x .footer a,.x .footer .cache button{color:#FFF !important;}
.x .body{box-shadow:0 0 10px #aaa; border-radius:0 0 5px 5px;}
 
/* Setting #1 Simple White --- 심플한 흰색 바탕
.x .body{background:#FFF !important;}
*/
/* Setting #2 Light gray --- 옅은 회색 바탕 */
.x .body{background:#EFEFEF !important;}
</style>
<!-- // 여기까지 -->
 
<div class="x">
... 생략...


관리자 템플릿 _spHeader.html 파일을 열고 이번에는 맨 윗줄 상단에 내부 스타일 설정 방법으로 관리자 페이지에서 사용할 CSS를 추가 합니다. 뷰포트(viewport) 설정 바로 다음 줄에 스타일을 추가하고 저장하면 끝... 

저는 개인적으로 옅은 회색바탕이 좋아서#2번을 씁니다. 하지만 심플한 흰색 바탕을 좋아하시는 분들도 있을 것입니다.

그런 경우#2 부분을 주석 처리하고#1번 흰색 바탕 설정의 주석 /* ... */ 을 풀고 사용하시면 됩니다.


※ 위 소스를 조금씩 수정해 보면 나만의 색감을 이용한 관리자 페이지를 만들 수 있습니다...^^


이 방법은 코어의 동작과 운영 내용에 전혀 영향을 주지 않습니다. 

CSS 재정의의 아주 기초적인 원리를 응용한 것입니다...^^

코어 1.5을 사용하시는데 도움이 되시기를 바랍니다...^^



설치된 레이아웃 v1.4 탭메뉴처럼 만들기


tabMenu_layout.gif


v1.5에서 v1.4처럼 레이아웃 탭메뉴를 복원하여 사용하기 위해서는 다음 3개의 파일을 수정합니다.


1. xe/modules/layout/tpl/header.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
...중략
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
    <p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
 
<!-- // 설치된 레이아웃 v1.4 탭메뉴처럼 만들기  시작 -->
<style type="text/css">
.tabMenu_layout {position:relative; *zoom:1; margin:0; padding:0;}
.tabMenu_layout:after {content:""; display:block; clear:both;}
.tabMenu_layout li{list-style:none; float:left; margin:0; padding:0; background:#666; border:1px solid #666;}
.tabMenu_layout li a{ float:left; padding:4px 5px 0 5px; height:18px; border:1px solid #ddd; text-decoration:none !important; color:#FFF !important;}
.tabMenu_layout li a:hover,.tabMenu_layout li.on a {background: #FFF; color:#222 !important;}
</style>
<ul class="tabMenu_layout">
    <li class="on"|cond="$act == 'dispLayoutAdminContent'"><a href="{getUrl('act','dispLayoutAdminContent','path','/','type','','layout','','layout_srl','')}">{$lang->layout_list}</a></li>
    <li class="on"|cond="$act == 'dispLayoutAdminInstalledList'"><a href="{getUrl('act','dispLayoutAdminInstalledList','path'+
 ','','type','','layout','','layout_srl','')}">{$lang->downloaded_list}</a></li>
    <li class="on"|cond="$act == 'dispLayoutAdminMobileContent'"><a href="{getUrl('act','dispLayoutAdminMobileContent','path','','layout_srl','')}">{$lang->mobile_layout_list}</a></li>
    <li class="on"|cond="$act == 'dispLayoutAdminInstalledMobileList'"><a href="{getUrl('act','dispLayoutAdminInstalledMobileList','path','','layout_srl','')}">{$lang->mobile_downloaded_list}</a></li>
    <li cond="$layout_srl" class="on"|cond="$act == 'dispLayoutAdminModify'"><a href="{getUrl('act','dispLayoutAdminModify','path','','layout_srl',$layout_srl)}">{$lang->cmd_layout_management}</a></li>
    <li cond="$layout_srl" class="on"|cond="$act == 'dispLayoutAdminEdit'"><a href="{getUrl('act','dispLayoutAdminEdit','path','','layout_srl',$layout_srl)}">{$lang->cmd_layout_edit}</a></li>
</ul>
<!-- // 끝 -->


header.html 파일을 열어서 맨 하단에 위 내용을 추가합니다. {$XE_VALIDATOR_MESSAGE}를 받는 곳 아래에 추가하는 것입니다. header.html 파일은 레이아웃 모듈의 템플릿 파일들이 항상 include하여 쓰기 때문에 이곳에 추가하면 좋겠네요. 


위 내용을 추가하면 1.5에서 버린 index.html 과 mindex.html 파일을 다시 불러 사용하게 됩니다. 그런데 [삭제]링크와 [생성] 링크에서 문제가 생깁니다. 삭제는 layout_admin.js를 불러오면 되는데, 생성은 방법이 달라졌습니다. 그래서 새로운 레이아웃은  우선 설치된 레이아웃을 1개 선택한 후에 생성해야 합니다. 따라서 index.html 과 mindex.html 파일을 다음과 같이 수정합니다.


2. xe/modules/layout/tpl/index.html

?
1
2
3
4
5
6
7
8
9
10
11
<!--%import("filter/delete_layout.xml")-->
 
<!-- // 선택된 레이아웃 삭제를 위한 스크립트 추가 -->
<load target="js/layout_admin.js" usecdn="true" />
 
...중략...
 
<!-- // 새로운 레이아웃의 생성은 해당 레이아웃을 선택하고 생성하기 때문에 필요없음
<div class="btnArea">
    <span class="btn"><a href="{getUrl('act','dispLayoutAdminInsert','layout_srl','')}">{$lang->cmd_make}</a></span>
</div> // 레이아웃 생성은 [다운로드 목록]에서 레이아웃을 선택후 생성하세요.-->


맨 윗줄 import문 아래에 [선택된 레이아웃 삭제를 위한 스크립트 추가] 이 부분을 추가하고

맨 아래 [생성] 버튼을 주석처리합니다.


3. xe/modules/layout/tpl/mindex.html

?
1
2
3
4
5
6
7
8
9
10
11
<!--%import("filter/delete_layout.xml")-->
 
<!-- // 선택된 레이아웃 삭제를 위한 스크립트 추가 -->
<load target="js/layout_admin.js" usecdn="true" />
 
...중략...
 
<!-- // 새로운 레이아웃의 생성은 해당 레이아웃을 선택하고 생성하기 때문에 필요없음
<div class="btnArea">
    <span class="btn"><a href="{getUrl('act','dispLayoutAdminInsert','layout_srl','','layout_type','M')}">{$lang->cmd_make}</a></span>
</div> //모바일 레이아웃 생성은 [다운로드 목록]에서 레이아웃을 선택후 생성하세요. -->


모바일 레이아웃 목록보기 파일에서도 같은 방법으로 스크립트를 추가하고 [생성] 버튼은 주석처리 합니다.


v1.6에서 dispLayoutAdminContent() 와 같은 소스가 없어지지 않는다면 유효하게 작동할 것입니다. 하지만 // deprecated(사용중지됨)라고 적혀있어서 계속 유효할지는 모르겠습니다.


도움이 되시기를 바랍니다...^^


위 내용은 v1.5.1.3 기준으로 수정된 파일을 첨부하였습니다.



이 게시물을
좋아요(+3)
목록
제목 글쓴이 날짜
v1.5 관리자 페이지에서 v1.4처럼 모듈 목록 펼쳐놓기 [14] file 우진홈 2012.01.21
업데이트 후 사이트 통함검색이 안되시는 분 보십시오^^ RGM 2012.02.12
SEO:타이틀중 게시글제목과 게시판제목의 위치를 바꾸기 [4] 해커다 2012.01.05
다른 도메인간 iframe 크기 자동조절(cross domain iframe auto resize) [2] 서기 2008.04.24
스마트폰에서 xe 구축 [3] file 최태진814 2012.02.06
make install 로 설치한 파일 제거 방법 [2] StyleRoot 2012.02.08
[XE1.4.5.10]게시판 파일첨부 버튼이 먹통일 때.. 카리브 2012.02.08
특정 도메인의 메일 주소로만 가입 인증 메일 보내기 [3] 박정욱 2009.03.28
가가라이브 위젯이 메뉴를 가릴때 수정방법 [2] 웹엔진 2012.01.26
XE 포인트 파일캐쉬대신 memcache 사용하기 [4] 최기훈. 2012.02.06
관리자모드에서 메뉴 항상 펼치기 [1] file 아드레날린 2009.06.09
묻고 답하기 게시물 옮기는 法 [2] file CMD 2012.02.05
SSH 지원안하는 웹호스팅에서 빠르게 XE설치하기. [5] file DynamicLaser 2011.05.22
외부페이지 로그인 연동 [10] 응삼 2011.02.28
확장변수이용시 숫자 일경우 정렬하기 팁 푸하라 2012.02.02
여러도메인으로 접속시 무조건 하나의 도메인으로 이동시키기 squarehacker 2012.02.02
xe 1.4.5.10 에서 board 1.4.2 (1.5용 게시판) 사용하기 file 양파농부 2012.02.01
HTML 편집모드에서 파일 첨부 본문 삽입시 자바스크립트 오류가 뜨는 문제 수정 팁 [1] misol 2012.02.01
xe1.4.5.10 에서 xe1.5의 xe_solid_enterprise 레이아웃 사용하기 양파농부 2012.01.31
레이아웃스킨의 기본 형식 [1] file mindpainter 2010.06.29
태그 쓰기