synology NAS 에 설치할 때 경로 문제



DS215Play 에다가 그누보드를 설치하려니까, 경로문제가 발생했다.


URL 경로에 /volume1/web 이 다 끼어들어가 있어서 그누가 정상동작을 하지 않았다.


해결 방법!


설치 전에, config.php 를 수정해주자!


define('G5_DOMAIN', 'http://내도메인.synology.me');


수정한 후, 설치를 하면 정상 동작을 하더라~.





Posted by 똑똑한 영장류

메뉴에서 게시판을 클릭해서 나오면 드롭다운 메뉴가 먹통이 되는데..게시판과 관련이 있을거 같다.


우선 부트스트랩을 이용해서 게시판의 내용을 container 안에 넣어야겠다.


head.php 에서 nav 코드 다음에 아래 코드를 작성!

<!-- 게시판 등 컨텐츠 감싸기 -->

<div class="container">

<div class="row">

<div class="col-md-12">


tail.sub.php 에서 저것들을 닫아줘야겠지.

</div><!-- /.col-md-12 -->

</div><!-- /.row -->

</div><!-- /.container -->






<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

<?php echo html_end(); // HTML 마지막 처리 함수 : 반드시 넣어주시기 바랍니다. ?>


아래처럼 가운데로 싹 모아주네..


게시판 쪽을 살펴봐야겠는데...

기본 basic 스킨 css 로 표시되고 있다.

부트스트랩으로 바꿔주려면 css 가 아니라 php 소스를 손봐야할거 같다.


게시판은 bbs/board.php 가 관할한다. 소스 들여다 봐야지.


board_head.php 와 board_tail.php 는 게시판 상단, 하단에 들어가도록 관리자가 설정한 내용을 끌어오는 기능을 하고 있고...

/bbs/board.php?bo_table=bbs01 이렇게 접근을 할 때는 list.php 가 동작한다.

글 아이디도 넘어가면 view.php 가 동작한다.


우선 list.php 부터....

list.php 에서는 표시할 데이터를 DB에서 가져와 정리하고, 표시는 skin/board/basic/list.skin.php 가 하게되어있다.

오호~~

부트스트랩으로 스킨을 만들어주면 되겠구나~~


.../skin/board/ 아래에 bt 라고 디렉토리를 하나 만들어주고, basic 디렉토리 안에 있는 파일을 복사해 놓고 진행해봐야겠다.


관리자 페이지에서 게시판01 의 스킨을 bt 로 변경하고, .../skin/board/bt/list.skin.php 파일을 수정하면 되겠다.


우선 style.css 를 가져오는 코드를 막자.

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨

//add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);




css 적용되지 않으니 아래처럼 보이네.



그럴싸하게 보이도록 php 소스에 나타나있는 id, class 등을 부트스트랩 걸로 바꿔줘야겠다.


















Posted by 똑똑한 영장류

상단 메뉴말고, 진짜 메뉴를 가지고 놀려고 관리자 페이지, 메뉴 설정에서 메뉴를 만들려고 보니, 페이지가 제대로 뜨지 않는다.

jquery 버전 문제인듯 싶어 최신버전으로 변경했던 jquery 버전을 다시 1.8.3 으로 돌려야했다.


head.sub.php에서...


<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>


되돌려놓고 게시판을 몇개 만들고 메뉴도 만들었다.



그룹01

-게시판01

-게시판02

그룹02

-게시판03


요렇게 만들어놓고 테스트!


원래 소스에서 메뉴를 표시해주는 부분은 head.php 에 아래 부분이다.


<nav id="gnb">

        <h2>메인메뉴</h2>

        <ul id="gnb_1dul">

            <?php

            $sql = " select *

                        from {$g5['menu_table']}

                        where me_use = '1'

                          and length(me_code) = '2'

                        order by me_order, me_id ";

            $result = sql_query($sql, false);

            $gnb_zindex = 999; // gnb_1dli z-index 값 설정용


            for ($i=0; $row=sql_fetch_array($result); $i++) {

            ?>

            <li class="gnb_1dli" style="z-index:<?php echo $gnb_zindex--; ?>">

                <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>

                <?php

                $sql2 = " select *

                            from {$g5['menu_table']}

                            where me_use = '1'

                              and length(me_code) = '4'

                              and substring(me_code, 1, 2) = '{$row['me_code']}'

                            order by me_order, me_id ";

                $result2 = sql_query($sql2);


                for ($k=0; $row2=sql_fetch_array($result2); $k++) {

                    if($k == 0)

                        echo '<ul class="gnb_2dul">'.PHP_EOL;

                ?>

                    <li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><?php echo $row2['me_name'] ?></a></li>

                <?php

                }


                if($k > 0)

                    echo '</ul>'.PHP_EOL;

                ?>

            </li>

            <?php

            }


            if ($i == 0) {  ?>

                <li id="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>

            <?php } ?>

        </ul>

    </nav>


gnb...

그누보드는 메뉴설정을 참고로 자동으로 드롭다운 메뉴를 만들어준다.

부트스트랩에 있는 nav 내에 드롭다운을 만드는 기능을 참고로 적용해주면 될거 같다.


아래는 부트스트랩 예제 코드다.

<ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>


ul 안에 li 를 class=dropdown 으로 해주고 그 아래에 주루루~ 넣어주는 형태다.


참고해서 수정한 소스는..

<nav class="navbar navbar-default">

<div class="container">


<ul class="nav navbar-nav">

<?php

$sql = " select *

from {$g5['menu_table']}

where me_use = '1'

 and length(me_code) = '2'

order by me_order, me_id ";

$result = sql_query($sql, false);

$gnb_zindex = 999; // gnb_1dli z-index 값 설정용


for ($i=0; $row=sql_fetch_array($result); $i++) {

$sql2 = " select *

from {$g5['menu_table']}

where me_use = '1'

 and length(me_code) = '4'

 and substring(me_code, 1, 2) = '{$row['me_code']}'

order by me_order, me_id ";

$result2 = sql_query($sql2);

$result2_cnt = mysql_num_rows($result2);

if ($result2_cnt == 0) { ?>

<li><a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" ><?php echo $row['me_name'] ?></a></li>

<?php

} else { ?>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><?php echo $row['me_name'] ?></a>

<ul class="dropdown-menu" role="menu">

<?php

for ($k=0; $row2=sql_fetch_array($result2); $k++) { ?>

<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" ><?php echo $row2['me_name'] ?></a></li>

<?php

}

echo '</ul>'.PHP_EOL;

} ?>

</li>

<?php

}


if ($i == 0) {  ?>

<li id="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>

<?php } ?>

</ul>


</div><!-- /.container -->


</nav><!-- /.navbar -->



흠..

jquery를 다시 2.1.3으로 변경해줘야 잘 동작을 한다.



게시판01 클릭하면 아래처럼 나오는데...그때부터 드롭다운이 동작하지 않는다.. 흑...



왜 바보가 되지???? 더 살펴봐야겠네..













Posted by 똑똑한 영장류

주의) 재미로 하고 있는 작업입니다. 따라하시다가 욕을 볼 수도 있습니다.ㅎ



사이트 접속하면 처음 보이는 index.php 파일 및 기타 필수파일 몇개를 수정해서 하~얗게 만들었다.


수정하지 않았을 때 나타나는 것 중에 상단에 메뉴가 있는데...메뉴에 부트스트랩 적용해보겠다.



원본 head.php 에 보면 상단 시작, 상단 끝 구간이 있다.

거기 보면 글자크기를 변경하는 버튼, 회원가입, 로그인, 새글..등 있고, 그 아래에 메뉴 뿌려주는 코드가 있다.

글자크기 변경하는 건 관심없고. 메뉴 부분은 자세히 살펴봐야되고...

상단에 회원가입, 로그인, 새글..등이 나타나는 상단 고정 메뉴를 부트스트랩의 nav 로 바꿔봐야지...


부트스트랩에서 navbar 라고 이름지어진 component 가 있다. 그거 이용하면 될거같다.


head.php

......

if (G5_IS_MOBILE) {

//    include_once(G5_MOBILE_PATH.'/head.php');

//    return;

}

?>


<nav class="navbar navbar-default">


</nav>


부트스트랩 navbar 기본형을 추가했다..우선 틀만...

브라우저로 접속해보면, 상단에 회색 비스무리하게 가로 바가 보인다. 그 안에 아이템 하나씩 넣어야겠지.


그리고, 모바일일 경우 다른 파일을 include 하는 것을 막아버렸다. index.php, tail.php 에도... 부트스트랩은 모바일 자동이니까..그렇게...


nav 태그 안에 아래 코드를 넣어봤다. navbar 앞쪽에 사이트명 보이게 navbar-brand 도 넣어줬다.


<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">GNUBOARD5</a>

</div>


접속해보면 navbar 앞에 GNUBOARD5 라고 보이네.


그 뒤에 회원가입, 로그인, FAQ.., , 새글 이 보이면 되겠다.


원본 코드는..

<ul id="tnb">

            <?php if ($is_member) {  ?>

            <?php if ($is_admin) {  ?>

            <li><a href="<?php echo G5_ADMIN_URL ?>"><b>관리자</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php">정보수정</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>

            <?php } else {  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/register.php">회원가입</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/login.php"><b>로그인</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/faq.php">FAQ</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/qalist.php">1:1문의</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/current_connect.php">접속자 <?php echo connect(); // 현재 접속자수  ?></a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/new.php">새글</a></li>

        </ul>


ul id="tnb" 로 되어있는데.. id="tnb" 를 class="nav navbar-nav" 로 변경해주면 된다. 부트스트랩 간단하네.


근데..이 코드를 다른 div로 감싸줘야한다. 이유는 모바일에 보여줄 때, 첨부터 다 보여주는게 아니라, 버튼으로 collapse?해놓고 버튼 누르면 보여주는 기능이 자동으로 되기 위해서다. navbar-header 에서 brand 말고 이상한게 붙은게 뭔가 했었다.


아래 코드 내부에 위 ul...코드를 넣어줘야한다는거다.


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">



</div>



합쳐보면..

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

            <?php if ($is_member) {  ?>

            <?php if ($is_admin) {  ?>

            <li><a href="<?php echo G5_ADMIN_URL ?>"><b>관리자</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php">정보수정</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>

            <?php } else {  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/register.php">회원가입</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/login.php"><b>로그인</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/faq.php">FAQ</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/qalist.php">1:1문의</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/current_connect.php">접속자 <?php echo connect(); // 현재 접속자수  ?></a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/new.php">새글</a></li>

</ul>


</div><!-- /.navbar-collapse -->


오케이..이렇게 해서 접속해보면 아래처럼 보이네.




오케이...













Posted by 똑똑한 영장류

혹시나 이글을 보고 따라하시는 분들이 계실까 글 남깁니다.


지난 해에 재미로 시작했다가 다른 일이 바빠서 못 하던거 다시 시작했습니다.

언제 또 중단될지 모릅니다.


완성될 때까지는 따라하지 마세요..ㅎㅎ





Posted by 똑똑한 영장류

그누보드에 부트스트랩 적용 - (2)



부트스트랩은 css 와 js 로 이루어져있다고 보면 되겠는데...

원래 그누보드에 있는 css 파일과 분명 부딪히는 일이 생길거 같다.


앞선 글에서 소스 보기를 하면 알 수 있는게, 


그누는 default.css 파일과 아래 js 파일들을 사용한다.

물론 admin 으로 로그인을 하면 admin.css 를 참조하긴 한다만...지금은 일반 로그인의 경우만 살펴봐야지.


<script src="http://appspop.com/js/jquery-1.8.3.min.js"></script>

<script src="http://appspop.com/js/jquery.menu.js"></script>

<script src="http://appspop.com/js/common.js"></script>

<script src="http://appspop.com/js/wrest.js"></script>


부트스트랩도 jquery 를 사용하는데, 버전이 맞을라나 모르겠네. 그건 나중에 부트스트랩에서 js 를 사용할 때 좀 더 확실히 살펴봐야겠다.



default.css 를 열어보니.... 레이아웃, 게시판용 css 등이 주석과 함께 작성이 되어있다.

그냥 두고 부트스트랩을 추가하면 충돌이 일어날 듯한데...


default.css 대신에 부트스트랩을 사용하고 필요한거는 하나씩 추가를 하는 방법으로 진행해야겠다.


일단 부트스트랩을 다운받아서 압축을 푼 후, 서버로 올려줬다. 다운받을 곳은 getbootstrap.com 이다.

현재 부트스트랩이 3.3.2 버전이고, 압축 풀어 올린 위치는 루트 디렉토리(www) 바로 아래 되시겠다.


www/bootstrap/css/

www/bootstrap/fonts/

www/bootstrap/js/


부트스트랩도 서버에 준비를 해 놨으니,

css 파일 추가 코드가 있는 head.sub.php 에 가서 수정을 하겠다. 빨간 색이 추가한 내용이다.


<title><?php echo $g5_head_title; ?></title>

<?php

if (defined('G5_IS_ADMIN')) {

    echo '<link rel="stylesheet" href="'.G5_ADMIN_URL.'/css/admin.css">'.PHP_EOL;

} else {

//    echo '<link rel="stylesheet" href="'.G5_CSS_URL.'/'.(G5_IS_MOBILE?'mobile':'default').'.css">'.PHP_EOL;

    echo '<link rel="stylesheet" href="'.G5_URL.'/bootstrap/css/bootstrap.min.css">'.PHP_EOL;    

}

?>



관리자로 로그인한 것이 아니라면, 그누보드는 부트스트랩을 이용하도록 했다. 관리자는 관리페이지가 틀어질까봐 일단 제쳐뒀다..


그다음, 부트스트랩이 사용할 js 파일은 추가해줘야겠는데... 이녀석이 jquery 를 사용한다.

jquery 는 그누에서도 사용을 하기때문에 head.sub.php 파일안에 보면 추가하는 부분이 있다.


<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>

<script src="<?php echo G5_JS_URL ?>/jquery.menu.js"></script>

<script src="<?php echo G5_JS_URL ?>/common.js"></script>

<script src="<?php echo G5_JS_URL ?>/wrest.js"></script>


1.8.3 버전을 사용하고 있다.


그러나!

부트스트랩 3.3.0은 아래 링크를 보면 1.9.1 이상이 필요하다고 한다. 

https://github.com/twbs/bootstrap/blob/v3.3.2/bower.json


난 현재 jquery 2.1.3 버전을 다운받아서 그누의 js 폴더아래에 jquery-2.1.3.min.js 로 업로드를 하고 head.sub.php 에서 2.1.3 으로 수정을 했다.

<script src="<?php echo G5_JS_URL ?>/jquery-2.1.3.min.js"></script>

그누의 기능 중 먼가 동작하지 않는 것들이 나오겠지.. 암튼..그건 나오면 고치고...


또...

부트스트랩이 사용하는 자바스크립트 파일인 bootstrap.min.js 를 어디다가 추가를 해줘야겠다.

부트스트랩 예제 템플릿을 보면 페이지 로딩 속도를 위해서 페이지 하단에서 포함시키고 있다.


그래서, tail.sub.php 에 아래처럼 추가를 해 줬다.



<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

<?php echo html_end(); // HTML 마지막 처리 함수 : 반드시 넣어주시기 바랍니다. ?>




이렇게 하고 브라우저로 접속해보면 하~~얗다.



* 그누보드에 부트스트랩 적용 (1) 과 (2) 글은... 지난해에 작성해뒀다가 오늘 다시 진행하기 시작하면서 몇개 버전이 달라진 것들을 수정했습니다.

포스팅이 작성된 날짜와 그 당시 버전과 다를 수 있습니다..





Posted by 똑똑한 영장류

그누보드에 부트스트랩 적용 - (1)


난 그누보드도 사랑하고 부트스트랩도 사랑한다.


그누보드 5.0.30을 서버에 설치를 해 봤다.


그저 그 그누보드의 코어를 사용하되 모습을 부트스트랩의 모습으로 바꾸어보고 싶어졌다.


그래서, 하나씩 살펴보려고 한다.



그누보드를 홈디렉토리에 바로 설치를 했을 경우, 서버에 접속하면 index.php 가 브라우저에 보여지게 된다.


index.php 소스를 열어서 들여다보면, 몇가지 파일들을 include 시키고 있으며, 브라우저 화면에 보여지게 될 '최신글'을 보여주기 위한 코드가 보인다.


브라우저에 보여지는 html 문서는 보통 아래의 모습을 띄게 된다.


<!DOCTYPE html>

<head>

....

</head>

<body>

여기에 메뉴가 들어간다고 가정하자..

....

페이지마다 다른 내용들이 이곳에 들어간다고 가정하자.

...

웹 페이지 하단에 항상 나타나는 내용들이 이곳에 들어간다고 가정하자.


</body>

</html>


<head></head> 안에 css, js 등을 포함시키기 위한 것들이 들어갈테고... 하나의 웹 페이지가 가지는 구성이 대략 이런 수준일거라는 거다.


그럼, index.php 에 저런 구성이 다 보이는가??? 그렇지 않다.


그누보드가 설치된, index.php 가 있는 루트디렉토리에 head.php, head.sub.php, tail.php, tail.sub.php 가 있는데, 이 파일들이 모두 모여서 index 가 보여주려고 하는 한 화면을 구성하게 된다. 


직접 열어서 확인하는 것이 좋다.


<!DOCTYPE html> 에서부터 <body> 태크가 시작되는 정도까지 head.sub.php 에 들어가 있고,

메뉴처럼, 항상 화면 상단에 보여지는 것들은 head.php 에 들어가 있고, 

index.php 가 보여주려고 하는 내용(예를 들어, 최신글...)은 index.php 에 들어있고,

항상 화면 하단에 보여질 내용은 tail.php 에 들어있으며, 

마지막으로 html 문서의 마지막 </body></html> 태그들은 tail.sub.php 에 들어가 있다.


나중에 index.php 가 아닌 새로 페이지를 작성해 줄 때, index.php 를 참고해서 만들면 head, head.sub, tail, tail.sub 파일들은 재사용이 가능한 것이다.



일단...다시 부트스트랩으로 만들어 볼 것이기 때문에, 그누보드가 가진 화면 출력내용을 모두 삭제를 해버렸다. 


그럼, 파일들이 어떻게 바뀌어야하나...???


index.php 파일은 최신글 어쩌구 하는 관련 내용들을 모두 지웠다. 


<?php

define('_INDEX_', true);

include_once('./_common.php');


// 초기화면 파일 경로 지정 : 이 코드는 가능한 삭제하지 마십시오.

if ($config['cf_include_index'] && is_file(G5_PATH.'/'.$config['cf_include_index'])) {

    include_once(G5_PATH.'/'.$config['cf_include_index']);

    return; // 이 코드의 아래는 실행을 하지 않습니다.

}


if (G5_IS_MOBILE) {

    include_once(G5_MOBILE_PATH.'/index.php');

    return;

}


include_once('./_head.php');

?>




<?php

include_once('./_tail.php');

?>




head.sub.php 에는...흠...그다지 지워버릴 것이 없다. <body> 태그가 열리고 나서, 이상한 코드가 있는데,일단을 그냥 두고 가보겠다.


head.php 에는...<!-- 상단 시작 { --> 이라는 주석부터 끝까지 모두 지웠다.


tail.php 에는 아래처럼 보이게 많이 지웠다.


<?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가


// 하단 파일 경로 지정 : 이 코드는 가능한 삭제하지 마십시오.

if ($config['cf_include_tail'] && is_file(G5_PATH.'/'.$config['cf_include_tail'])) {

    include_once(G5_PATH.'/'.$config['cf_include_tail']);

    return; // 이 코드의 아래는 실행을 하지 않습니다.

}


if (G5_IS_MOBILE) {

    include_once(G5_MOBILE_PATH.'/tail.php');

    return;

}

?>



<?php

include_once(G5_PATH."/tail.sub.php");

?>



tail.sub.php 는 손대지 않아도 될 거 같다.


이렇게 하고 index 에 접속해보면, 깨끗하네..ㅎ


index.php 를 구성할 때, 화면에 뭔가를 보여주 코드들을 모두 제거한 상태로 만들었다.


소스보기 해서 보면, 가장 기본적인 코드들이 보인다. 


이제 시작이다...



* 그누보드에 부트스트랩 적용 (1) 과 (2) 글은... 지난해에 작성해뒀다가 오늘 다시 진행하기 시작하면서 몇개 버전이 달라진 것들을 수정했습니다.

포스팅이 작성된 날짜와 그 당시 버전과 다를 수 있습니다..





Posted by 똑똑한 영장류



그누보드로 테스트를 하나 해 보면서 사이트 구축시 참고하려고 정리해둡니다.



그누보드를 다운받아서 압축 풀어서 서버에 업로드하고 설치하는 것은 아주 쉽습니다.

그리고, 게시판만 제공되어지기 때문에 요즘의 덩치 큰 CMS들 같지 않게 옛날 생각도 나고 좋습니다. ㅎ


소스를 보면, 게시판 및 회원관리에 필요한 파일들이 bbs 디렉토리 아래에 있고, 그외 디렉토리 별로 나머지 필요한 파일들이 있습니다.


설치하고 나타나는 첫페이지, index.php 를 살펴보면, 새로운 페이지를 만들 때 많은 도움이 됩니다.


먼저, index.php와 같은 디렉토리 내에 새로운 페이지, a.php 를 하나 만든다고 가정합시다.


그럼, 빈 파일 열고 아래의 내용을 그대로 붙여넣고 시작하면 됩니다.


<?
include_once("./_common.php");

$g4[title] = "페이지 타이틀";
include_once("./_head.php");
?>


페이지 내용


<?php

include_once("./_tail.php");

?>

 


페이지 내용 부분에는 나름의 php코드나 html 코드를 필요한만큼 작성하면 되겠습니다.



그누보드 소스 디렉토리를 살펴보면, index.php 가 있는 디렉토리 내에 _common.php와 _head.php, _tail.php 가 있습니다.


_common.php 를 열어보면, 아래와 같습니다.


<?
$g4_path = "."; // common.php 의 상대 경로
include_once("$g4_path/common.php");
?> 


실제 내용을 담고 있는 파일은 common.php 인데, _common.php 에서 그 파일의 위치를 지정해주고 포함시키도록 하고 있습니다.

common.php 를 열어보면, 여러가지 설정과 함수 정의와 함께 아래 파일들을 포함시키도록 하고 있습니다.



include_once("$g4[path]/lib/constant.php");  // 상수 정의
include_once("$g4[path]/config.php");  // 설정 파일
include_once("$g4[path]/lib/common.lib.php"); // 공통 라이브러리 


_head.php 의 경우도 마찬가지로 head.php를 포함시키도록 작성되어 있습니다.


head.php 를 열어보면, 아래와 같이 다른 파일들을 포함시키는 부분이 또 존재합니다.



include_once("$g4[path]/head.sub.php");
include_once("$g4[path]/lib/outlogin.lib.php");
include_once("$g4[path]/lib/poll.lib.php");
include_once("$g4[path]/lib/visit.lib.php");
include_once("$g4[path]/lib/connect.lib.php");
include_once("$g4[path]/lib/popular.lib.php"); 


2번째 파일부터는 그누보드 제공 라이브러리 파일들입니다만, 첫번째 head.sub.php 파일은 개발자가 손을 델 수 있는 부분이 있는 파일입니다.


아시다시피, html 문서는 <head>부분과 <body>부분이 있습니다.

head  부분은 이후 내용에 필요한 설정을 하게 되고, 실제 브라우저 화면에 보이는 부분은 body 태그가 포함하게 되죠.


head.php 안에 먼저 포함되어 있는 head.sub.php 가 body 태그를 여는 부분까지 작성되어 있고, head.php 파일의 위 include_once 들 뒤에 브라우저 화면에 표시될 내용들이 시작됩니다. 사이트 공통의 상단 메뉴나, 좌측 사이드바 까지 포함할 수 있겠죠.


여기까지 사이트 공통의 앞부분 처리가 이루어지면, 내 입맛에 맞게 페이지 내용을 작성하면 됩니다. 보통 컨텐츠라고 불리는 부분이죠.


컨텐츠 부분 작성이 끝나면, 사이트 공통의 하단 부분을 포함시키도록 작성합니다.

위 예에서 include_once("./_tail.php"); 부분입니다.


_tail.php 도 열어보면, 마찬가지 방법으로 tail.php를 포함하도록 작성되어 있습니다.

tail.php 를 열어보면,


공통 하단 내용을 작성한 후에 tail.sub.php를 포함시키도록 작성되어 있습니다.

보통 푸터라고 하는, 페이지 하단에 위치할 내용을 작성하고 그 다음에 tail.sub.php를 포함시키도록 작성합니다.


tail.sub.php 를 열어보면, 마지막으로 <body>태그를 닫고, <html> 태그를 닫는 부분이 보입니다. 그 뒤에는 기타 php 코드가 자리하고 있네요.


브라우저 화면에서 상단에 공통적으로 자리하는 내용을 헤더라고 하면,

그 내용은 head.php 에 작성해주면 되고,


하단에 공통적으로 자리하는 내용, 푸터는 tail.php에 작성해주면 되겠습니다.


여기까지 index.php와 같은 디렉토리에 존재하는 a.php의 작성에 대해서 알아봤습니다.


보통 메뉴별로? 기능별로, 디렉토리를 따로 만들어 관련 파일을 넣어두곤 하는데,  만약, 이렇게 하위 디렉토리를 하나 만들고 그 안에 파일을 작성할 경우에는 어떻게 달라질까요?


그때도 페이지 템플릿은 같이 사용할 수 있습니다. 다만, 파일들을 포함시키는 부분에서 경로에 문제가 생기겠지요. 이 문제를 해결하는 방법이 _common.php 와 _head.php, _tail.php 입니다.


하위 디렉토리에 b.php 를 a.php 와 같은 내용으로 준비합시다.


그리고, _common.php 와 _head.php, _tail.php 은 index.php 파일과 같은 디렉토리에 있는 것들을 그대로 복사해서 b.php 와 같은 위치에 넣어 줍시다.

그리고, _common.php 를 열어서 $g4_path 만 수정을 해 주면 됩니다.


$g4_path = ".."; // common.php 의 상대 경로


common.php는 현재 b.php 가 있는 디렉토리의 상위 디렉토리에 있으니까, 상대 경로로 점 두개를 찍어주면 됩니다.


이 경로 수정을 제외하고는 index.php 의 경우와 똑같습니다.


이 하위 디렉토리를 템플릿으로 만들어 두고 써도 되겠군요.ㅎ












Posted by 똑똑한 영장류




CMS가 아닌 게시판만 필요할 경우 대안!


대한민국에서 아직까지도 많이 이용되고 있는 게시판은 제로보드4입니다.


하지만, 이 제로보드4는 2009년 개발 및 배포가 중단되고 XE라는 새로운 CMS로 태어나게 되지요.


하지만! XE를 사용해보면, 무겁고 복잡하고 불필요하게 많은 기능을 담으려한 것 같다는 생각이 들었습니다.


게시판만 땡겨와서 쓸 수 없나 해도 쉽지않더군요.


검색해봤더니, 여전히 제로보드를 사용하고 있는 분들이 많았습니다.

하지만, 개발자쪽에서 더 이상 개발을 하지않고, 패치도 내놓지 않는 상황이라서 제로보드를 지금에 사용하려니 많이 꺼려집니다.


대안을 찾아봤습니다.

지속적으로 업그레이드를 해 나가고 있는 그누보드가 눈에 띄었습니다.


http://sir.co.kr


오늘 날짜로 4.36.11 버전이 배포되고 있습니다.


CMS가 아닌 게시판 위주의 가벼운 사이트를 꾸리고자 한다면, 그누보드는 괜찮은 대안이 될 거 같습니다.






Posted by 똑똑한 영장류