오늘은 포인트 내역 팝업 화면을 개발합니다.
전 어떻게 깨져 보일지 확인해봅니다.
생각보다 많이 이상하게 보이지는 않네요.
수정해야 하는 파일은 /theme/mt703/skin/member/basic/point.skin.php 로군요.
팝업이고, 단순리 리스트만 보여주기에
이번에도 Modal 창으로 도전합니다.
내역이 많으면 세로로 길게 나올수도 있기에
스크롤이 가능한 modal 창을 Metronic Admin Template에서 찾아봅니다.
지난 번 아래의 버튼을 이용, 카피하여 사용했다가 카피된 소스에 문제가 있어 고생을 했었습니다.
그래서 이젠 소스를 열고, 검색하여 가져오고 있습니다.
소스는 어떻게 생겼는지 살펴봅니다.
<!--begin::Example-->
<div class="example mb-10">
<p>Create a scrollable modal body by adding
<code>.modal-dialog-scrollable</code>to
<code>.modal-dialog</code>.</p>
<div class="example-preview">
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">Launch demo modal</button>
<!-- Modal-->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollable" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body" style="height: 300px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary font-weight-bold">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="example-code">
<span class="example-copy" data-toggle="tooltip" title="Copy code"></span>
<div class="example-highlight">
<pre>
<code class="language-html">
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
Launch demo modal
</button>
<!-- Modal-->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body" style="height: 300px;">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary font-weight-bold">Save changes</button>
</div>
</div>
</div>
</div>
</code>
</pre>
</div>
</div>
</div>
<!--end::Example-->
point.skin.php 파일에 필요한 내용을 복붙합니다.
이젠 실제 리스트를 모달창안에 복사하여 붙여넣습니다.
현재까지의 point.skin.php 파일의 내용입니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
//add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/style.css">', 0);
?>
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#pointListModal" style="display:;">포인트 내역 모달 띄움</button>
<!-- Modal-->
<div class="modal fade" id="pointListModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollable" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body" style="height: 500px;">
<!-- 시작 - 포인트 내역 리스트 -->
<div id="point" class="new_win">
<h1 id="win_title"><?php echo $g5['title'] ?></h1>
<div class="new_win_con2">
<ul class="point_all">
<li class="full_li">
보유포인트
<span><?php echo number_format($member['mb_point']); ?></span>
</li>
</ul>
<ul class="point_list">
<?php
$sum_point1 = $sum_point2 = $sum_point3 = 0;
$sql = " select *
{$sql_common}
{$sql_order}
limit {$from_record}, {$rows} ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$point1 = $point2 = 0;
$point_use_class = '';
if ($row['po_point'] > 0) {
$point1 = '+' .number_format($row['po_point']);
$sum_point1 += $row['po_point'];
} else {
$point2 = number_format($row['po_point']);
$sum_point2 += $row['po_point'];
$point_use_class = 'point_use';
}
$po_content = $row['po_content'];
$expr = '';
if($row['po_expired'] == 1)
$expr = ' txt_expired';
?>
<li class="<?php echo $point_use_class; ?>">
<div class="point_top">
<span class="point_tit"><?php echo $po_content; ?></span>
<span class="point_num"><?php if ($point1) echo $point1; else echo $point2; ?></span>
</div>
<span class="point_date1"><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo $row['po_datetime']; ?></span>
<span class="point_date<?php echo $expr; ?>">
<?php if ($row['po_expired'] == 1) { ?>
만료 <?php echo substr(str_replace('-', '', $row['po_expire_date']), 2); ?>
<?php } else echo $row['po_expire_date'] == '9999-12-31' ? ' ' : $row['po_expire_date']; ?>
</span>
</li>
<?php
}
if ($i == 0)
echo '<li class="empty_li">자료가 없습니다.</li>';
else {
if ($sum_point1 > 0)
$sum_point1 = "+" . number_format($sum_point1);
$sum_point2 = number_format($sum_point2);
}
?>
<li class="point_status">
소계
<span><?php echo $sum_point1; ?></span>
<span><?php echo $sum_point2; ?></span>
</li>
</ul>
</div>
<?php echo get_paging(G5_IS_MOBILE ? $config['cf_mobile_pages'] : $config['cf_write_pages'], $page, $total_page, $_SERVER['SCRIPT_NAME'].'?'.$qstr.'&page='); ?>
<button type="button" onclick="javascript:window.close();" class="btn_close">창닫기</button>
</div>
<!-- 끝 - 포인트 내역 리스트 -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary font-weight-bold">Save changes</button>
</div>
</div>
</div>
</div>
이제 화면을 Bootstrap답게 바꾸는 작업을 합니다.
Metronic Admin Template에서 괜찮은 화면을 하나 찾았네요.
이걸로 하면 예쁠 것 같습니다.
소스는 이렇게 생겼습니다.
<!--begin::List Widget 9-->
<div class="card card-custom card-stretch gutter-b">
<!--begin::Header-->
<div class="card-header align-items-center border-0 mt-4">
<h3 class="card-title align-items-start flex-column">
<span class="font-weight-bolder text-dark">Recent Activities</span>
<span class="text-muted mt-3 font-weight-bold font-size-sm">890,344 Sales</span>
</h3>
<div class="card-toolbar">
<div class="dropdown dropdown-inline">
<a href="#" class="btn btn-clean btn-hover-light-primary btn-sm btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-bold-more-ver"></i>
</a>
<div class="dropdown-menu dropdown-menu-md dropdown-menu-right">
<!--begin::Navigation-->
<ul class="navi navi-hover">
<li class="navi-header font-weight-bold py-4">
<span class="font-size-lg">Choose Label:</span>
<i class="flaticon2-information icon-md text-muted" data-toggle="tooltip" data-placement="right" title="Click to learn more..."></i>
</li>
<li class="navi-separator mb-3 opacity-70"></li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-text">
<span class="label label-xl label-inline label-light-success">Customer</span>
</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-text">
<span class="label label-xl label-inline label-light-danger">Partner</span>
</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-text">
<span class="label label-xl label-inline label-light-warning">Suplier</span>
</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-text">
<span class="label label-xl label-inline label-light-primary">Member</span>
</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-text">
<span class="label label-xl label-inline label-light-dark">Staff</span>
</span>
</a>
</li>
<li class="navi-separator mt-3 opacity-70"></li>
<li class="navi-footer py-4">
<a class="btn btn-clean font-weight-bold btn-sm" href="#">
<i class="ki ki-plus icon-sm"></i>Add new</a>
</li>
</ul>
<!--end::Navigation-->
</div>
</div>
</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body pt-4">
<div class="timeline timeline-5 mt-3">
<!--begin::Item-->
<div class="timeline-item align-items-start">
<!--begin::Label-->
<div class="timeline-label font-weight-bolder text-dark-75 font-size-lg text-right pr-3">08:42</div>
<!--end::Label-->
<!--begin::Badge-->
<div class="timeline-badge">
<i class="fa fa-genderless text-success icon-xxl"></i>
</div>
<!--end::Badge-->
<!--begin::Text-->
<div class="timeline-content text-dark-50">Outlines of the recent activities that happened last weekend</div>
<!--end::Text-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="timeline-item align-items-start">
<!--begin::Label-->
<div class="timeline-label font-weight-bolder text-dark-75 font-size-lg text-right pr-3">3 hr</div>
<!--end::Label-->
<!--begin::Badge-->
<div class="timeline-badge">
<i class="fa fa-genderless text-danger icon-xxl"></i>
</div>
<!--end::Badge-->
<!--begin::Content-->
<div class="timeline-content d-flex">
<span class="mr-4 font-weight-bolder text-dark-75">AEOL meeting with</span>
<!--begin::Section-->
<div class="d-flex align-items-start mt-n2">
<!--begin::Symbol-->
<a href="#" class="symbol symbol-35 symbol-light-success mr-2">
<span class="symbol-label">
<img src="assets/media/svg/avatars/004-boy-1.svg" class="h-75 align-self-end" alt="" />
</span>
</a>
<!--end::Symbol-->
<!--begin::Symbol-->
<a href="#" class="symbol symbol-35 symbol-light-success">
<span class="symbol-label">
<img src="assets/media/svg/avatars/002-girl.svg" class="h-75 align-self-end" alt="" />
</span>
</a>
<!--end::Symbol-->
</div>
<!--end::Section-->
</div>
<!--end::Content-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="timeline-item align-items-start">
<!--begin::Label-->
<div class="timeline-label font-weight-bolder text-dark-75 font-size-lg text-right pr-3">14:37</div>
<!--end::Label-->
<!--begin::Badge-->
<div class="timeline-badge">
<i class="fa fa-genderless text-info icon-xxl"></i>
</div>
<!--end::Badge-->
<!--begin::Desc-->
<div class="timeline-content font-weight-bolder text-dark-75">Submit initial budget -
<a href="#" class="text-primary">USD 700</a>.</div>
<!--end::Desc-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="timeline-item align-items-start">
<!--begin::Label-->
<div class="timeline-label font-weight-bolder text-dark-75 font-size-lg text-right pr-3">16:50</div>
<!--end::Label-->
<!--begin::Badge-->
<div class="timeline-badge">
<i class="fa fa-genderless text-danger icon-xxl"></i>
</div>
<!--end::Badge-->
<!--begin::Text-->
<div class="timeline-content text-dark-50">Stakeholder meeting scheduling.</div>
<!--end::Text-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="timeline-item align-items-start">
<!--begin::Label-->
<div class="timeline-label font-weight-bolder text-dark-75 font-size-lg text-right pr-3">17:30</div>
<!--end::Label-->
<!--begin::Badge-->
<div class="timeline-badge">
<i class="fa fa-genderless text-success icon-xxl"></i>
</div>
<!--end::Badge-->
<!--begin::Text-->
<div class="timeline-content text-dark-50">Project scoping & estimations with stakeholders.</div>
<!--end::Text-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="timeline-item align-items-start">
<!--begin::Label-->
<div class="timeline-label font-weight-bolder text-dark-75 font-size-lg text-right pr-3">21:03</div>
<!--end::Label-->
<!--begin::Badge-->
<div class="timeline-badge">
<i class="fa fa-genderless text-warning icon-xxl"></i>
</div>
<!--end::Badge-->
<!--begin::Desc-->
<div class="timeline-content font-weight-bolder text-dark-75">New order placed
<a href="#" class="text-primary">#XF-2356</a>.</div>
<!--end::Desc-->
</div>
<!--end::Item-->
<!--begin: Item-->
<div class="timeline-item align-items-start">
<!--begin::Label-->
<div class="timeline-label font-weight-bolder text-dark-75 font-size-lg text-right pr-3">21:07</div>
<!--end::Label-->
<!--begin::Badge-->
<div class="timeline-badge">
<i class="fa fa-genderless text-danger icon-xxl"></i>
</div>
<!--end::Badge-->
<!--begin::Text-->
<div class="timeline-content text-dark-50">Company BBQ to celebrate the last quater achievements and goals.</div>
<!--end::Text-->
</div>
<!--end: Item-->
<!--begin::Item-->
<div class="timeline-item align-items-start">
<!--begin::Label-->
<div class="timeline-label font-weight-bolder text-dark-75 font-size-lg text-right pr-3">20:30</div>
<!--end::Label-->
<!--begin::Badge-->
<div class="timeline-badge">
<i class="fa fa-genderless text-info icon-xxl"></i>
</div>
<!--end::Badge-->
<!--begin::Text-->
<div class="timeline-content text-dark-50">Marketing campaign planning with customer.</div>
<!--end::Text-->
</div>
<!--end::Item-->
</div>
<!--end: Items-->
</div>
<!--end: Card Body-->
</div>
<!--end: Card-->
<!--end: List Widget 9-->
이제,
그누의 소스를 제작중인 테마에 옮기는 작업을 진행합니다.
(UI를 바꾸자니 확실히 시간이 오래 걸리네요 ㅠㅠ)
포인트 내역리스트는 Action이 없어서
Modal 창으로 해도 아무 문제가 없을 줄 알았는데...
페이지 목록이 존재하고 있었네요. ㅠㅠ
하...
어쩔 수 없이 "더 보기" 버튼으로 변경 작업을 해야 하게 되었네요 ㅠㅠ
(역시 그냥 할걸... 앞으론 절대 안바꿉니다. ㅠㅠ)
먼저 php 파일을 수정하고, Ajax 호출할 스크립트를 만듭니다.
point.skin.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
//add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/style.css">', 0);
?>
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#pointListModal" style="display:none;">포인트 내역 모달 띄움</button>
<!-- Modal-->
<div class="modal fade" id="pointListModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollable" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><?php echo $g5['title'] ?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div id="pointModalBody" class="modal-body">
<!-- 시작 - 포인트 내역 리스트 -->
<div class="d-flex align-items-center bg-light-success rounded px-20 py-5 mx-5 mb-5">
<!--begin::Icon-->
<span class="svg-icon svg-icon-md svg-icon-warning">
<!--begin::Svg Icon | path:assets/media/svg/icons/Shopping/Chart-bar1.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<rect fill="#000000" opacity="0.3" x="12" y="4" width="3" height="13" rx="1.5"></rect>
<rect fill="#000000" opacity="0.3" x="7" y="9" width="3" height="8" rx="1.5"></rect>
<path d="M5,19 L20,19 C20.5522847,19 21,19.4477153 21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 C4.55228475,3 5,3.44771525 5,4 L5,19 Z" fill="#000000" fill-rule="nonzero"></path>
<rect fill="#000000" opacity="0.3" x="17" y="11" width="3" height="6" rx="1.5"></rect>
</g>
</svg>
<!--end::Svg Icon--></span>
<!--end::Icon-->
<!--begin::Title-->
<div class="d-flex flex-column flex-grow-1 mr-2">
<span class="font-weight-bold text-success text-hover-primary font-size-h3 mb-1"> 보유 포인트</span>
</div>
<!--end::Title-->
<!--begin::Lable-->
<span class="font-weight-bolder text-success py-1 font-size-h3"><?php echo number_format($member['mb_point']); ?></span>
<!--end::Lable-->
</div>
<style type="text/css">
.timeline.timeline-5:before { content: '';position: absolute;left: 99px;width: 4px;top: 0;bottom: 0;background-color: #ECF0F3; }
</style>
<!--begin::List Widget 9-->
<div class="card card-custom card-stretch gutter-b mb-5">
<!--begin::Header-->
<!-- div class="card-header align-items-center border-0">
<h3 class="card-title align-items-start flex-column" style="display:none;">
<span class="font-weight-bolder text-dark">포인트 적립 히스토리</span>
</h3>
</div -->
<!--end::Header-->
<!--begin::Body-->
<div class="card-body pt-4">
<div id="pointTimeLine" class="timeline timeline-5 mt-3"></div><!--end: Card Body-->
<div class="text-center">
<button type="button" id="btnPointMore" onclick="getPointMore()" class="btn btn-primary font-weight-bold w-50 mt-5">더보기</button>
</div>
</div>
<!--end: Card-->
<!--end: List Widget 9-->
<div class="d-flex align-items-center bg-light-primary rounded px-20 py-5 mx-5 mb-5">
<!--begin::Icon-->
<span class="svg-icon svg-icon-md svg-icon-warning">
<!--begin::Svg Icon | path:assets/media/svg/icons/Shopping/Chart-bar1.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<rect fill="#000000" opacity="0.3" x="12" y="4" width="3" height="13" rx="1.5"></rect>
<rect fill="#000000" opacity="0.3" x="7" y="9" width="3" height="8" rx="1.5"></rect>
<path d="M5,19 L20,19 C20.5522847,19 21,19.4477153 21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 C4.55228475,3 5,3.44771525 5,4 L5,19 Z" fill="#000000" fill-rule="nonzero"></path>
<rect fill="#000000" opacity="0.3" x="17" y="11" width="3" height="6" rx="1.5"></rect>
</g>
</svg>
<!--end::Svg Icon--></span>
<!--end::Icon-->
<!--begin::Title-->
<div class="d-flex flex-column flex-grow-1 mr-2">
<span class="font-weight-bold text-success text-hover-primary font-size-h3 mb-1"> 소 계</span>
</div>
<!--end::Title-->
<!--begin::Lable-->
<span id="sPoint" data-o_point="0" class="font-weight-bolder text-danger py-1 font-size-h3 mr-10">0</span>
<span id="pPoint" data-o_point="0" class="font-weight-bolder text-primary py-1 font-size-h3">0</span>
<!--end::Lable-->
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold text-left" data-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var pg = 1;
function getPointMore(){
if ( pg ) {
$('#ajaxlist_tbody').html('<img src="<?=$board_skin_url?>/img/pageloading01.gif" width=60px />');
$.ajax({
type: "POST",
url: "<?php echo G5_THEME_URL; ?>/point_more.php",
data: "pg="+ pg,
cache: false,
success: function(json) { console.log(json);
var pointResult = JSON.parse(json); //console.log(pointResult); console.log(pointResult.p_point);
if ( pointResult.count > 0 ) {
pg = Number(pointResult.page) + 1;
$("#pointTimeLine").html( $("#pointTimeLine").html() + pointResult.html_str );
$("#pPoint").attr( "data-o_point", Number($("#pPoint").attr("data-o_point")) + Number(pointResult.o_p_point) );
$("#pPoint").text( Number($("#pPoint").attr("data-o_point")) > 0 ? "+"+ addComma($("#pPoint").attr("data-o_point")) : $("#pPoint").attr("data-o_point") );
$("#sPoint").attr( "data-o_point", Number($("#sPoint").attr("data-o_point")) + Number(pointResult.o_s_point) );
$("#sPoint").text( addComma($("#sPoint").attr("data-o_point")) );
// 쩝 안되네...
//var offset = $("#btnPointMore" + seq).offset();
//$('#pointModalBody').animate({scrollTop : offset.top}, 400);
//$("#btnPointMore").focus();
} else {
alert("더 이상 내역이 존재하지 않습니다.");
$("#btnPointMore").hide();
}
}
});
} else {
alert('페이지 번호가 전달되지 않았습니다.');
}
}
function addComma(n) {
var reg = /(^[+-]?\d+)(\d{3})/;
n += '';
while (reg.test(n)) {
n = n.replace(reg, '$1' + ',' + '$2');
}
return n;
}
getPointMore();
</script>
다음으로, 데이터를 돌려주는 PHP 파일을 만듭니다.
point_more.php
<?php
include_once('./_common.php');
if ($is_guest)
alert_close('회원만 조회하실 수 있습니다.');
$list = array();
$sql_common = " from {$g5['point_table']} where mb_id = '". escape_trim($member['mb_id']) ."' ";
$sql_order = " order by po_id desc ";
$sql = " select count(*) as cnt {$sql_common} ";
$row = sql_fetch($sql);
$total_count = $row['cnt'];
$rows = 5; //$config['cf_page_rows'];
$total_page = ceil($total_count / $rows); // 전체 페이지 계산
$page = $_POST["pg"]; //$_GET["pg"];
if ( !$page ) { $page = 1; } // 페이지가 없으면 첫 페이지 (1 페이지)
$from_record = ($page - 1) * $rows; // 시작 열을 구함
//tLog("from_record", $from_record);
$sum_point1 = $sum_point2 = $sum_point3 = 0;
$sql = " select *
{$sql_common}
{$sql_order}
limit {$from_record}, {$rows} ";
$result = sql_query($sql);
$point_result = array(
"page" => $page,
"count" => 0,
//"result" => array(),
"p_point" => 0,
"s_point" => 0,
"html_str" => ""
);
$rowCount = 0;
for ( $i=0; $row=sql_fetch_array($result); $i++ ) {
//array_push($point_result["result"], $row);
$rowCount++;
$point1 = $point2 = 0;
$point_use_class = '';
if ($row['po_point'] > 0) {
$point1 = '+' .number_format($row['po_point']);
$sum_point1 += $row['po_point'];
$point_use_class = 'text-primary';
$icon_use_class = '';
} else {
$point2 = number_format($row['po_point']);
$sum_point2 += $row['po_point'];
$point_use_class = 'text-danger';
$icon_use_class = 'text-danger';
}
$po_content = $row['po_content'];
$po_expired = "";
if ($row['po_expired'] == 1) {
$po_expired = "<br/>(만료: ". str_replace('-', '/', $row['po_expire_date']) .")";
} else
$po_expired = $row['po_expire_date'] == '9999-12-31' ? " " : "<br/>(". $row['po_expire_date'] .")";
$point_result["html_str"] .= "<!--begin::Item-->
<div class='timeline-item align-items-start'>
<!--begin::Label-->
<div class='timeline-label font-weight-bolder text-dark-75 font-size-lg text-right pr-3 w-80px'>
". $row['po_datetime'] ."
</div>
<!--end::Label-->
<!--begin::Badge-->
<div class='timeline-badge'>
<i class='fa fa-genderless text-info ". $icon_use_class ." icon-xxl'></i>
</div>
<!--end::Badge-->
<!--begin::Desc-->
<div class='timeline-content font-weight-bolder text-dark-75 font-size-h4'>
". $po_content ."
<span class='text-danger font-weight-bolder text-right w-50px font-size-h5'>
". $po_expired ."
</span>
</div>
<span class='<?php echo $point_use_class; ?> font-weight-bolder text-right w-50px font-size-h4'>
". ( ($point1) ? $point1 : $point2 ) ."
</span>
<!--end::Desc-->
</div>
<!--end::Item-->";
}
$point_result["count"] = $rowCount;
$point_result["o_p_point"] = $sum_point1;
$point_result["o_s_point"] = $sum_point2;
$point_result["p_point"] = ($sum_point1 > 0) ? "+". number_format($sum_point1) : number_format($sum_point1);
$point_result["s_point"] = number_format($sum_point2);
echo json_encode($point_result);
?>
이제 정상적으로 다음 페이지까지 불러오게 되었습니다.
이제,
버튼을 숨김처리하고,
point.skin.php를 include하고,
숨겨둔 버튼을 클릭해주는 것으로 변경하면 끝나겠군요.
완성된 화면입니다.
아 뿌듯하군요~
생각해보니,
기본 틀대로 만드는게 제일 우선이고,
Modal이든, Ajax든 하고 싶을땐
별도의 skin을 만드는게 답인것 같네요.
괜히 고생했어... 괜히 ㅠㅠ
다음 작업은 스크랩을 같은 방식으로 빠르게 끝내고,
쪽지로 넘어갈지 아니면 게시판으로 넘어갈지
생각해봐야겠습니다.
'재밌는 IT 개발 > 그누보드 테마 제작기(記)' 카테고리의 다른 글
| 그누보드 테마 제작 18 - 쪽지 내역 및 전송 기능 개발 (2) | 2020.07.03 |
|---|---|
| 그누보드 테마 제작 17 - 스크랩 내역 페이지 개발 (4) | 2020.07.02 |
| 그누보드 테마 제작 15 - 회원정보 수정 페이지 개발 (2) | 2020.06.30 |
| 그누보드 테마 제작 14 - 회원정보 찾기 페이지 개발 2 (0) | 2020.06.29 |
| 그누보드 테마 제작 13 - 회원정보 찾기 페이지 개발 1 (0) | 2020.06.27 |
댓글