✅ 주문내역 조회 페이지의 목표한 User Flow
- 사용자는 주문내역에 대한 상품명을 알 수 있다. (O)
- 사용자의 주문내역을 상위 5개로 출력하고 더 많은 주문내역을 조회 하고 싶은 경우
더보기를 눌러 확인할 수 있도록 한다. (O) - 사용자의 주문내역을 검색필터를 통하여 검색에 따른 결과를 보여준다. (O)
- 검색활성시 활성 조건은 주문처리 상태, 날짜, 상품명을 기준으로 하며
각 검색필터 별로 검색할 수 있게 한다. (O) - 사용자는 본인의 주문내역을 선택할 수 있다. (O)
- 사용자는 주문내역을 선택적으로 다운로드 할 수 있다. (O)
- 사용자의 주문내역에 대해서 상품명을 알 수 있다.
주문번호에 대한 상품명을 불러오기 위해 각 table에 어떠한 column이 존재하는지 분석한다. 필요한 table에 어떤 칼럼이 없는지 알게 되어 주문번호를 기준으로 연결되어 있는 상품명 컬럼을 가져온다.
해결한 방법 : DB-Table JOIN
Row-query문 작성하여 서로다른 2개의 table을 JOIN하여 필요한 컬럼을 뽑아온다.
$sql_common = "from {$g5['g5_shop_order_table']} o
join {$g5['g5_shop_cart_table']} c on o.od_id = c.od_id
where o.mb_id = '{$member['mb_id']}'";$sql = " select c.ba_id, o.od_id, o.od_time, o.od_cart_count, c.it_name,
o.od_cart_price + o.od_send_cost + o.od_send_cost2 as total_cost,
o.od_status, o.od_invoice
$sql_common
order by o.od_id desc $limit ";<tr><!--주문서 번호['ba_id'] 클릭시 해당 상품 주문내역으로 이돌-->
<td class="td_chk chk_box">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $row['od_id']; ?>" id="chk_wr_id_<?php echo $i; ?>" class="simple-chk1">
<label for="chk_wr_id_<?php echo $i; ?>"><span></span></label>
</td>
<td class="text_center none500">
<?php echo $row['it_name']; ?>
</td>
<td class="text_center">
<?php echo $row['ba_id'];?>
</td>
<td class="text_center">
<a href="<?php echo G5_SHOP_URL; ?>/orderinquiryview.php?od_id=<?php echo $row['od_id']; ?>&uid=<?php echo $uid; ?>"><?php echo $row['od_id']; ?></a>
</td>
<td class="text_center">
<?php echo substr($row['od_time'],2,14); ?> (<?php echo get_yoil($row['od_time']); ?>)
</td>
<td class="text_right none600"><?php echo display_price($row['total_cost']); ?></td>
<td class="text_center"><?php echo $od_status; ?></td>
<td class="text_center"><?php echo $row['od_invoice']; ?></td>
</tr> 주문내역 table의 상단의 체크박스를 추가하기 위해 class="all_chk chk_box" 를 선언하고 상단의 체크박스를 클릭하면 주문내역 table의 각 행을 전체 선택하는 기능을 구현을 목표로 한다.
<thead>
<tr>
<th scope="col" class="all_chk chk_box">
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="simple-chk1">
<label for="chkall"><span></span>
<b class="sound_only">현재 페이지 전체선택
</label>
</th>
<script>
function all_checked(sw) {
// 체크박스를 선택또는 선택해제한다.
let checkboxes = document.querySelectorAll('.simple-chk1'); // .selec_chk 클래스를 가진 모든 체크박스를 선택합니다.
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = sw; // 각 체크박스의 선택 상태를 설정합니다.
}
}
</script>검색에 따른 결과들을 보여주기 위해 검색어에 따라 data-filtering을 한다.
$order_status = isset($_POST['order_status']) ? $_POST['order_status'] : 'all';
$order_search = isset($_POST['order_search']) ? $_POST['order_search'] : '';
$order_start_date = isset($_POST['order_start_date']) ? $_POST['order_start_date'] : '';
$order_end_date = isset($_POST['order_end_date']) ? $_POST['order_end_date'] : '';
$sql_common = "from {$g5['g5_shop_order_table']} o
join {$g5['g5_shop_cart_table']} c on o.od_id = c.od_id
where o.mb_id = '{$member['mb_id']}'";
if ($order_status !== 'all')//배송 상태별 주문내역 필터링
$sql_common .= " and o.od_status = '{$order_status}'";
if ($order_start_date && $order_end_date)//날짜 범위 주문내역 필터링
$sql_common .= " and o.od_time between '{$order_start_date} 00:00:00' and '{$order_end_date} 23:59:59'";
if ($order_search) //검색어 기반 주문내역 필터링
$sql_common .= " and (o.od_id like '%{$order_search}%' or c.it_name like '%{$order_search}%')";
전체 코드
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
if (!defined("_ORDERINQUIRY_")) exit; // 개별 페이지 접근 불가
include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php');
?>
<?php if (!defined("_MYPAGE_")) { ?>
<div class="sub_title">
<h2><?php echo $g5['title'] ?></h2>
</div>
<?php } ?>
<!-- 주문 내역 목록 시작 주문내역 조회 : 더보기 클릭시 { -->
<body>
<div class="tbl_head03 tbl_wrap" style="cursor: pointer;">
<form action="invoice-down.php" method="post" id="excelDownloadForm-simpleOrderList">
<button type="submit" class="btn" style="border: 2px solid green; border-radius:5px;">송장번호 엑셀 다운로드</button>
</form>
<div><!--주문내역조회-->
<table><!--주문내역 table-->
<thead>
<tr>
<th scope="col" class="all_chk chk_box">
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="simple-chk1">
<label for="chkall"><span></span>
<b class="sound_only">현재 페이지 전체선택
</label>
</th>
<th scope="col">상품명</th>
<th scope="col">주문서 번호</th>
<th scope="col">주문 일시</th>
<th scope="col" class="none600">주문 금액</th>
<th scope="col">배송 상태 </th>
<th scope="col">송장 번호</th>
</tr>
</thead>
<tbody>
<?php
$order_status = isset($_POST['order_status']) ? $_POST['order_status'] : 'all';
$order_search = isset($_POST['order_search']) ? $_POST['order_search'] : '';
$order_start_date = isset($_POST['order_start_date']) ? $_POST['order_start_date'] : '';
$order_end_date = isset($_POST['order_end_date']) ? $_POST['order_end_date'] : '';
$sql_common = "from {$g5['g5_shop_order_table']} o
join {$g5['g5_shop_cart_table']} c on o.od_id = c.od_id
where o.mb_id = '{$member['mb_id']}'";
if ($order_status !== 'all') {//배송 상태별 주문내역 필터링
$sql_common .= " and o.od_status = '{$order_status}'";
}
if ($order_start_date && $order_end_date) { //날짜 범위 주문내역 필터링
$sql_common .= " and o.od_time between '{$order_start_date} 00:00:00' and '{$order_end_date} 23:59:59'";
}
if ($order_search) {//검색어 기반 주문내역 필터링
$sql_common .= " and (o.od_id like '%{$order_search}%' or c.it_name like '%{$order_search}%')";
}
$sql = " select c.ba_id, o.od_id, o.od_time, o.od_cart_count, c.it_name,
o.od_cart_price + o.od_send_cost + o.od_send_cost2 as total_cost,
o.od_status, o.od_invoice
$sql_common
order by o.od_id desc $limit ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++){
// $uid = md5($row['o.od_id'].$row['od_time'].$row['o.od_ip']);
$uid = md5($row['od_id'].$row['od_time'].(isset($row['od_ip']) ? $row['od_ip'] : ''));
switch($row['od_status']) {
case '주문':
$od_status = '<span class="status_01">입금확인중</span>';
break;
case '입금':
$od_status = '<span class="status_02">입금완료</span>';
break;
case '준비':
$od_status = '<span class="status_03">상품준비중</span>';
break;
case '배송':
$od_status = '<span class="status_04">상품배송</span>';
break;
case '완료':
$od_status = '<span class="status_05">배송완료</span>';
break;
default:
$od_status = '<span class="status_06">주문취소</span>';
break;
}
?>
<tr><!--주문서 번호['ba_id'] 클릭시 해당 상품 주문내역으로 이돌-->
<td class="td_chk chk_box">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $row['od_id']; ?>" id="chk_wr_id_<?php echo $i; ?>" class="simple-chk1">
<label for="chk_wr_id_<?php echo $i; ?>"><span></span></label>
</td>
<td class="text_center none500"><?php echo $row['it_name']; ?></td>
<!-- <td class="text_center">
<?php echo $row['ba_id'];?>
</td> -->
<td class="text_center">
<a href="<?php echo G5_SHOP_URL; ?>/orderinquiryview.php?od_id=<?php echo $row['od_id']; ?>&uid=<?php echo $uid; ?>"><?php echo $row['od_id']; ?></a>
</td>
<td class="text_center"><?php echo substr($row['od_time'],2,14); ?> (<?php echo get_yoil($row['od_time']); ?>)</td>
<td class="text_right none600"><?php echo display_price($row['total_cost']); ?></td>
<td class="text_center"><?php echo $od_status; ?></td>
<td class="text_center"><?php echo $row['od_invoice']; ?></td>
</tr>
<?php
}
if ($i == 0)
echo '<tr><td colspan="11" class="empty_table">주문 내역이 없습니다.</td></tr>';
?>
</tbody>
</table>
</div>
</body><!-- } 주문 내역 목록 끝 -->
<!-- 주문내역의 상단 체크박스-->
<script>
document.getElementById('excelDownloadForm-simpleOrderList').addEventListener('submit', function(e){
let checkboxes = document.querySelectorAll('.simple-chk1');
let checked = false;
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checked = true;
break;
}
}
if (!checked) {
alert('다운로드할 주문내역을 선택하세요.');
e.preventDefault(); // 폼 전송 중지
}
});
$(document).ready(function(){
$("form[action='invoice-down.php']").on('submit', function(e) {
e.preventDefault();
let selectedOrders = [];
$("input[name='chk_wr_id[]']:checked").each(function(){
selectedOrders.push($(this).val());
});
if(selectedOrders.length === 0) {
alert('다운로드 할 주문을 선택해주세요.');
return false;
}
let form = $(this);
$("input[name='chk_wr_id[]']", form).remove();
// 선택한 주문들을 숨겨진 input으로 폼에 추가
$.each(selectedOrders, function(index, value) {
$(form).append('<input type="hidden" name="chk_wr_id[]" value="' + value + '" />');
});
this.submit();
});
});
</script>
아악! 뜨거워!!