[테마제작기(17記)] 스크랩 내역 페이지 개발

원문(출처) : 그누보드 테마 제작 17 - 스크랩 내역 페이지 개발

오늘은 스크랩 내역 페이지를 개발하려고 합니다.
그누기본 테마와 현재 개발 전 제작 중인 테마의 모습을 한 번 확인하고 진행합니다.
Modal창으로 할까 역시 생각했지만, 
지난 번 마음 먹은대로 당장은 기본 모양 그대로 만들고 
나중에 별도의 스킨을 만들도록 하겠습니다 .

그누 기본 테마와 작업 전 테마 화면 비교

소스도 심플한 편이네요.
근데 삭제 스크립트가 다른곳에 있나보군요... 
지금까지 하면서 보면 대부분 내부에 있던데 말이죠.

[code]

<?php

// 소스 파일 위치 : /theme/skin/mt703/skin/member/basic/scrap.skin.php

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

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/style.css">', 0);
?>

<!-- 스크랩 목록 시작 { -->
<div id="scrap" class="new_win">
    <h1 id="win_title"><?php echo $g5['title'] ?></h1>
    <ul>
        <?php for ($i=0; $i<count($list); $i++) {  ?>
        <li>
            <a href="<?php echo $list[$i]['opener_href_wr_id'] ?>" class="scrap_tit" target="_blank" onclick="opener.document.location.href='<?php echo $list[$i]['opener_href_wr_id'] ?>'; return false;"><?php echo $list[$i]['subject'] ?></a>
            <a href="<?php echo $list[$i]['opener_href'] ?>" class="scrap_cate" target="_blank" onclick="opener.document.location.href='<?php echo $list[$i]['opener_href'] ?>'; return false;"><?php echo $list[$i]['bo_subject'] ?></a>
            <span class="scrap_datetime"><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo $list[$i]['ms_datetime'] ?></span>
            <a href="<?php echo $list[$i]['del_href'];  ?>" onclick="del(this.href); return false;" class="scrap_del"><i class="fa fa-trash-o" aria-hidden="true"></i><span class="sound_only">삭제</span></a>
        </li>
        <?php }  ?>

        <?php if ($i == 0) echo "<li class=\"empty_li\">자료가 없습니다.</li>";  ?>
    </ul>
    <?php echo get_paging($config['cf_write_pages'], $page, $total_page, "?$qstr&amp;page="); ?>

    <div class="win_btn">
        <button type="button" onclick="window.close();" class="btn_close">창닫기</button>
    </div>
</div>
<!-- } 스크랩 목록 끝 -->

// ==========================================================
// del 함수의 위치 및 내용
// 파일 위치 : common.js 133라인.
// ==========================================================

// 삭제 검사 확인
function del(href)
{
    if(confirm("한번 삭제한 자료는 복구할 방법이 없습니다.\n\n정말 삭제하시겠습니까?")) {
        var iev = -1;
        if (navigator.appName == 'Microsoft Internet Explorer') {
            var ua = navigator.userAgent;
            var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
            if (re.exec(ua) != null)
                iev = parseFloat(RegExp.$1);
        }

        // IE6 이하에서 한글깨짐 방지
        if (iev != -1 && iev < 7) {
            document.location.href = encodeURI(href);
        } else {
            document.location.href = href;
        }
    }
}

[/code]

scrap.skin.php는 LI 태그로 되어 있지만,
전 table로 하려고 합니다. 아래 템플릿을 이용해서 하겠습니다.

Metronic Admin Theme에서 제공하는 Table 템플릿 중 선택

[code]

<table class="table table-striped mb-6">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Tank</td>
            <td>Stone</td>
            <td>
                <span class="label label-inline label-light-primary font-weight-bold">Pending</span>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Ana</td>
            <td>Jacobs</td>
            <td>
                <span class="label label-inline label-light-success font-weight-bold">Approved</span>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>Pettis</td>
            <td>
                <span class="label label-inline label-light-danger font-weight-bold">New</span>
            </td>
        </tr>
    </tbody>
</table>

[/code]

스크랩 리스트($list)는 어떻게 전달되어 오는지 살펴봅니다.

스크랩 리스트($list)의 배열 내용 확인

리스트는 LI 태그에 있는 내용을 그대로
TR TD 태그에 옮겨주었는데... 무언가 어색하네요.
CSS의 변경(편집) 작업을 진행합니다.

LI 태그에 있는 내용을 TR, TD에 옮겨준 화면.

역시 CSS 편집이 젤 어려워요 ㅠㅠ

별것도 아닌데 시간이 많이 걸리는 CSS 편집...

이제 페이징 작업이 남았습니다.
당연하겠지만, Metronic Admin Templat에서도 페이징 UI를 제공합니다.
https://keenthemes.com/metronic/preview/demo1/features/bootstrap/button-group.html

크롬에서 미리 편집을 하고 해당 소스를 가져와 작업을 시작합니다

[code]

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-outline-secondary"> 맨처음 </button>
    </div>
    <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-outline-secondary">2</button>
        <button type="button" class="btn btn-outline-secondary">3</button>
        <button type="button" class="btn btn-outline-secondary">4</button>
        <button type="button" class="btn btn-outline-secondary">5</button>
        <button type="button" class="btn btn-outline-secondary">6</button>
        <button type="button" class="btn btn-outline-secondary">7</button>
        <button type="button" class="btn btn-outline-secondary">8</button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-outline-secondary"> 맨끝 </button>
    </div>
</div>

[/code]

위 소스를 적용하면 이런 모습이 될겁니다.

get_paging 함수는 common.lib.php에 존재합니다.
그런데 이 라이브러리 파일은 그누보드 공통이기에 건들 수 없습니다.(아니 건들면 안되죠.)
그래서 전에 만들어둔 테마 전용 라이브러리 함수에 (mt703.lib.php) 
새로운 페이징 함수를 만들겠습니다.
(함수 오버라이딩이라는 기술도 있는 것 같은데, 걍 하던데로...)

[code]

// 한페이지에 보여줄 행, 현재페이지, 총페이지수, URL
// Metronic Admin Template 테마를 위한 페이징 변수 제작. by tank. at 200629.
function get_paging_mt703($write_pages, $cur_page, $total_page, $url, $add="")
{
    //$url = preg_replace('#&amp;page=[0-9]*(&amp;page=)$#', '$1', $url);
    $url = preg_replace('#(&amp;)?page=[0-9]*#', '', $url);
    $url .= substr($url, -1) === '?' ? 'page=' : '&amp;page=';

    $strLeft = $strCenter = $strRight = "";

    if ($cur_page > 1) {
        $strLeft .= '<a href="'.$url.'1'.$add.'" class="btn btn-outline-secondary"> 처음 </a>'.PHP_EOL;
    }

    $start_page = ( ( (int)( ($cur_page - 1 ) / $write_pages ) ) * $write_pages ) + 1;
    $end_page = $start_page + $write_pages - 1;

    if ($end_page >= $total_page) $end_page = $total_page;

    if ($start_page > 1) $strLeft .= '<a href="'.$url.($start_page-1).$add.'" class="btn btn-outline-secondary"> 이전 </a>'.PHP_EOL;

    if ($total_page > 1) {
        for ($k=$start_page;$k<=$end_page;$k++) {
            if ($cur_page != $k)
                $strCenter .= '<a href="'.$url.$k.$add.'" class="btn btn-outline-secondary">'.$k.'</a>'.PHP_EOL;
            else
                $strCenter .= '<a href="'.$url.$k.$add.'" class="btn btn-primary">'.$k.'</a>'.PHP_EOL;
        }
    }

    if ($total_page > $end_page) $strRight .= '<a href="'.$url.($end_page+1).$add.'" class="btn btn-outline-secondary"> 다음 </a>'.PHP_EOL;

    if ($cur_page < $total_page) {
        $strRight .= '<a href="'.$url.$total_page.$add.'" class="btn btn-outline-secondary"> 맨끝 </a>'.PHP_EOL;
    }

    $str = '<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">' .
                '<div class="btn-group mr-2" role="group" aria-label="First group">' .
                    $strLeft .
                '</div>' .
                '<div class="btn-group mr-2" role="group" aria-label="Second group">' .
                    $strCenter .
                '</div>' .
                '<div class="btn-group mr-2" role="group" aria-label="Third group">' .
                    $strRight .
                '</div>' .
            '</div>'. PHP_EOL;

    if ($str)
        return $str;
    else
        return "";
}

[/code]

페이징 개발을 끝으로 최종 완료된 화면

이렇게 완료되었네요.
제목줄을 괜히 넣었나 싶은 생각이 들지만...
뭐 저거 지우는건 일도 아니니깐 걍 넘어갑니다~

다음에는 쪽지를 마저 진행하겠습니다.
아마 그 후 진짜 작업인 게시글 작업이 진행 될 것 같습니다.

긴 글 읽어주셔서 감사합니다. ^^

원문(출처) : 그누보드 테마 제작 17 - 스크랩 내역 페이지 개발