오늘은 스크랩 내역 페이지를 개발하려고 합니다.
그누기본 테마와 현재 개발 전 제작 중인 테마의 모습을 한 번 확인하고 진행합니다.
Modal창으로 할까 역시 생각했지만,
지난 번 마음 먹은대로 당장은 기본 모양 그대로 만들고
나중에 별도의 스킨을 만들도록 하겠습니다.
소스도 심플한 편이네요.
근데 삭제 스크립트가 다른곳에 있나보군요...
지금까지 하면서 보면 대부분 내부에 있던데 말이죠.
<?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&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;
}
}
}
scrap.skin.php는 LI 태그로 되어 있지만,
전 table로 하려고 합니다. 아래 템플릿을 이용해서 하겠습니다.
<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>
스크랩 리스트($list)는 어떻게 전달되어 오는지 살펴봅니다.
리스트는 LI 태그에 있는 내용을 그대로
TR TD 태그에 옮겨주었는데... 무언가 어색하네요.
CSS의 변경(편집) 작업을 진행합니다.
역시 CSS 편집이 젤 어려워요 ㅠㅠ
이제 페이징 작업이 남았습니다.
당연하겠지만, Metronic Admin Templat에서도 페이징 UI를 제공합니다.
https://keenthemes.com/metronic/preview/demo1/features/bootstrap/button-group.html
Metronic | Button Group
My Activities Logs and notifications
keenthemes.com
<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>
get_paging 함수는 common.lib.php에 존재합니다.
그런데 이 라이브러리 파일은 그누보드 공통이기에 건들 수 없습니다.(아니 건들면 안되죠.)
그래서 전에 만들어둔 테마 전용 라이브러리 함수에 (mt703.lib.php)
새로운 페이징 함수를 만들겠습니다.
(함수 오버라이딩이라는 기술도 있는 것 같은데, 걍 하던데로...)
// 한페이지에 보여줄 행, 현재페이지, 총페이지수, URL
// Metronic Admin Template 테마를 위한 페이징 변수 제작. by tank. at 200629.
function get_paging_mt703($write_pages, $cur_page, $total_page, $url, $add="")
{
//$url = preg_replace('#&page=[0-9]*(&page=)$#', '$1', $url);
$url = preg_replace('#(&)?page=[0-9]*#', '', $url);
$url .= substr($url, -1) === '?' ? 'page=' : '&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 "";
}
이렇게 완료되었네요.
제목줄을 괜히 넣었나 싶은 생각이 들지만...
뭐 저거 지우는건 일도 아니니깐 걍 넘어갑니다~
다음에는 쪽지를 마저 진행하겠습니다.
아마 그 후 진짜 작업인 게시글 작업이 진행 될 것 같습니다.
긴 글 읽어주셔서 감사합니다. ^^
'재밌는 IT 개발 > 그누보드 테마 제작기(記)' 카테고리의 다른 글
| 그누보드 테마 제작 19 - 게시판 그룹 페이지 개발 (2) | 2020.07.06 |
|---|---|
| 그누보드 테마 제작 18 - 쪽지 내역 및 전송 기능 개발 (2) | 2020.07.03 |
| 그누보드 테마 제작 16 - 포인트 내역 페이지 개발 (0) | 2020.07.01 |
| 그누보드 테마 제작 15 - 회원정보 수정 페이지 개발 (2) | 2020.06.30 |
| 그누보드 테마 제작 14 - 회원정보 찾기 페이지 개발 2 (0) | 2020.06.29 |
댓글