soozya
[FRONT] 관리자 페이지 본문
[👩🏻💻소스코드]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="/Zspace/css/bootstrap.min.css" rel="stylesheet">
<link href="/Zspace/css/asj.css" rel="stylesheet">
<link href="/Zspace/css/kim.css" rel="stylesheet">
<title>::관리자 페이지::</title>
</head>
<script>
$(function(){
//첫번째 탭을 제외한 나머지 탭의 내용은 안보이게 설정하기 = :not #tab1
$("div.panel div:not("+$("ul.nav li a.selected").attr("href")+")").hide();
$("ul.nav li a").click(function(){
$("ul.nav li a").removeClass("selected");
$(this).addClass("selected"); //$(this) : 클릭한 a 태그에 대한 이벤트를 발생시킴
$("div.panel div").hide(); //선택한 탭의 내용빼고 나머지 모든 탭의 내용은 숨김
//안쪽의 $(this):클릭한 tab의 a태그 ex)tab2
$($(this).attr("href")).show(); //$('#tab2').show() : id가 tab2인 태그
})
})
<!-- 탭 클릭 시 스크롤 자동 이동을 방지-->
$(function(){
$("a").click(function(e){
e.preventDefault();
e.stopPropagation();
})
})
<!-- 체크박스 -->
$(document).ready(function() {
$("#soldout_chk").click(function() { //클릭 자체에 대한 기능
if($("#soldout_chk").is(":checked"))
$("input[name=soldout]").prop("checked", true);
else $("input[name=soldout]").prop("checked", false);
});
$("input[name=soldout]").click(function() { //개수비교
var total = $("input[name=soldout]").length;
var checked = $("input[name=soldout]:checked").length;
if(total!=checked)
$("#soldout_chk").prop("checked", false);
else $("#soldout_chk").prop("checked", true);
});
});
</script>
<!-- 부트스트랩 -->
</head>
<body>
<jsp:include page="../sideBar.jsp" />
<!-- 메인 -->
<div id="contents"> <!-- 전체 레이아웃을 감싸기 -->
<div class="top">
<h4>관리자 전용</h4>
<hr>
<ul class="nav nav-tabs nav-justified">
<li><a href="#1tab" class="selected">회원정보</a></li>
<li><a href="#2tab">회원주문관리</a></li>
<li><a href="#3tab">적립금 현황</a></li>
<li><a href="#4tab">상품관리</a></li>
</ul>
</div>
<div class="panel">
<!-- 회원정보 -->
<div id="1tab">
<table id="tab1" border="1px solid black" >
<tr id="admin_page_tr" height="30px">
<th width="13%" class="text-center">이름</th>
<th width="15%" class="text-center">아이디</th>
<th width="30%" class="text-center">주소</th>
<th width="15%" class="text-center">전화번호</th>
<th width="15%" class="text-center">이메일</th>
<th width="7%" class="text-center">정보 수정</th>
</tr>
<tr height="40px">
<td class="text-center">${mem_name}</td>
<td class="text-center">${mem_id}</td>
<td style="padding-left:10px">${mem_addr}</td>
<td class="text-center">${mem_phone}</td>
<td class="text-center">${mem_email}</td>
<td align="center"><a href="admin_info.jsp"><button id="mem_up">수정</button></a></td>
</tr>
</table>
<form name="search" id="search" action="./admin_page.jsp">
<select name="search">
<option value="mem_name">이름</option>
<option value="mem_id">아이디</option>
<option value="mem_addr">주소</option>
<option value="mem_phone">전화번호</option>
<option value="mem_email">이메일</option>
</select>
<input type="text" size="15" name="searchtext">
<input type="submit" value="검색">
</form>
</div>
<!-- 회원주문관리 -->
<div id="2tab" >
<table id="tab2" border="1px solid black">
<tr id="admin_page_tr" height="30px">
<th width="10%" class="text-center">아이디</th>
<th width="10%" class="text-center">주문 날짜</th>
<th width="14%" class="text-center">주문 번호</th>
<th width="28%" class="text-center">상품명</th>
<th width="13%" class="text-center">상태 변경</th>
<th width="17%" class="text-center">주문처리상태</th>
<th width="8%" class="text-center">주문 결과</th>
</tr>
<tr height="40px" class="text-center">
<td height="40px">${mem_id}</td>
<td>${order_date}</td>
<td>${order_num}</td>
<td class="text-left" style="padding-left:10px">${item_name}</td>
<td>
<select name="search">
<option value="item_num">반품</option>
<option value="iten_name">취소</option>
<option value="mem_addr">교환</option>
</select>
<button id="tab2_btn">처리</button>
</td>
<td align="center">
<select name="search">
<option value="choose" selected>선택하세요</option>
<option value="payment_check">입금확인 중</option>
<option value="delivery_ready">배송준비 중</option>
<option value="delivery">배송중</option>
<option value="complete">배송완료</option>
</select>
<button id="tab2_btn">처리</button>
</td>
<td>${order_prcs}</td>
</tr>
</table>
<form name="search" id="search" action="/TeamFront/admin_page.do">
<select name="search">
<option value="mem_addr">아이디</option>
<option value="item_num">주문번호</option>
<option value="iten_name">상품명</option>
<option value="mem_phone">주문결과</option>
</select>
<input type="text" size="15" name="searchtext">
<input type="submit" value="검색">
</form>
</div>
<!-- 적립금 -->
<div id="3tab">
<table id="tab3" border="1px solid black">
<tr id="admin_page_tr" height="30px">
<th width="13%" class="text-center">아이디</th>
<th width="13%" class="text-center">적립 날짜</th>
<th width="30%" class="text-center">적립 내역</th>
<th width="13%" class="text-center">적립</th>
<th width="13%" class="text-center">사용</th>
<th width="18%" class="text-center">총 적립금</th>
</tr>
<tr height="40px" class="text-center">
<td>${mem_id}</td>
<td>2023-02-25</td>
<td class="text-left" style="padding-left:10px" >로그인</td>
<td><font color="red">+100</font></td>
<td><font color="blue">0</font></td>
<td><b>100</b></td>
</tr>
</table>
<form name="search" id="search" action="/TeamFront/admin_page.do">
<select name="search">
<option value="mem_name">아이디</option>
</select>
<input type="text" size="15" name="searchtext">
<input type="submit" value="검색">
</form>
</div>
<!-- 상품관리 function 적용 -->
<div id="4tab">
<table id="tab4" border="1px solid black">
<tr id="admin_page_tr" height="30px" >
<th width="3%" class="text-center"> <input type="checkbox" id="soldout_chk"></th>
<th colspan=2 width="59%" class="text-center">상품명</th>
<th width="9%" class="text-center">상품 수정</th>
<th width="9%" class="text-center">상품 삭제</th>
<th width="9%" class="text-center">상품 재고</th>
<th width="11%" class="text-center">품절 처리</th>
</tr>
<tr id="admin_page_tr2" class="text-center">
<td width=><input type="checkbox" name="soldout"></td>
<td width="15%" height="90px">상품사진</td>
<td width="45%" class="text-left" style="padding-left:10px">알록달록 머쉬룸 조명</td>
<td align="center"><a href="#"><button id="insert" width="10%">수정</button></a></td>
<td align="center"><button id="delete" width="10%" onclick="alert('정말 삭제하시겠습니까?')">삭제</button></td>
<td>30개</td>
<td valign="center" align="center"><button id="item_soldout_btn">품 절</button> <p><p>
<button id="item_sale_btn">재판매</button>
</td>
</tr>
<tr id="admin_page_tr2" class="text-center">
<td width=><input type="checkbox" name="soldout"></td>
<td width="15%" height="90px">상품사진</td>
<td width="45%" class="text-left" style="padding-left:10px">포근 구름 카페트</td>
<td align="center"><a href="#"><button id="insert" width="10%">수정</button></a></td>
<td align="center"><button id="delete" width="10%" onclick="alert('정말 삭제하시겠습니까?')">삭제</button></td>
<td>10개</td>
<td valign="center" align="center"><button id="item_soldout_btn">품 절</button> <p><p>
<button id="item_sale_btn">재판매</button>
</td>
</tr>
<tr id="admin_page_tr2" class="text-center">
<td width=><input type="checkbox" name="soldout"></td>
<td width="15%" height="90px">상품사진</td>
<td width="45%" class="text-left" style="padding-left:10px">푸르른 숲</td>
<!-- 수정 : 클릭 시 페이지 이동
삭제 : alert창? 팝업창?
품절 : 버튼 클릭 시 해당 제품 품절 뜨도록 function??
-->
<td align="center"><a href="#"><button id="insert" width="10%">수정</button></a></td>
<td align="center"><button id="delete" width="10%" onclick="alert('정말 삭제하시겠습니까?')">삭제</button></td>
<td>15개</td>
<td valign="center" align="center"><button id="item_soldout_btn">품 절</button> <p><p>
<button id="item_sale_btn">재판매</button>
</td>
</tr>
</table>
<!--
상품 추가 : 추가 페이지 이동
품절 처리 : 버튼 클릭 시 해당 제품 품절 뜨도록 function??
-->
<a href="#"><button class="item_upload">상품 추가</button></a>
<a href="#"><button class="item_soldout">품절 처리</button></a>
<a href="#"><button class="item_sale">재 판매</button></a>
</div>
</div> <!-- panel -->
</div><!-- contents -->
<jsp:include page="../footer.jsp" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/Zspace/js/bootstrap.min.js"></script>
</body>
</html>
[💬설명]
1️⃣ 특정 탭 선택 시 다른 탭이 보이지 않도록 설정
◾ 첫번 째 탭('회원정보') 기준으로 소스코드 구현
1) 상단 탭 설정 (탭에서 넘어가는 백엔드 구현이 어려워 탭을 구분하여 4개의 페이지를 따로 분리함)
👉🏻 nav-tabs으로 탭 모양 설정 후 nav-justified를 사용하여 같은 비율로 만들었음.
2) 탭에 대한 4개의 각 페이지를 class="panel"을 사용해서 전체적으로 묶고, 페이지 각각은 ntab의 형태로 설정함
3) <style>태그를 사용하여 함수 적용
- 제일 처음 선택한 탭 = tab1, 이후 선택한 탭 = tab2 라고 가정
👉🏻 19라인 : class명이 panel인 <div>에서(전체 div 태그에서)
클래스명이 nav인 ul태그의 하위 태그인 li태그 중 선택된 a 태그가 아니라면(=tab1이 아니라면) 숨겨라
👉🏻 20라인~24라인 : 탭을 클릭(=tab2)했을 때(20), 기존 탭(tab1)에 'selected' 기능은 지우고(21),
tab2에 selected 이벤트를 발생시켜라(22). 그 외 class="panel"에 해당하는 탭은 숨기고(23),
tab2의 내용을 보여줘(24).
2️⃣ 탭 이동 시 스크롤이 내려가는 현상 처리
◾ 탭을 이동 할 때마다 스크롤이 아주 조금씩 밑으로 내려가는게 거슬려서 스크롤 이동 방지하기 위한 소스코드 추가함
- 근데 아래 코드 지우고 다시 해보는데 정상적으로 실행됨...????
3️⃣ 체크 박스에 대한 기능 구현
◾ 기존에 품절 처리 및 재판매 구현을 위해 체크 박스 기능을 활성화시켜 보았다.
- 맨 위 회색 체크버튼 클릭하면 다같이 선택되고, 하나라도 해제하면 맨 위 전체 체크 박스는 사라지는 그 것..!
1) jsp파일의 소스코드 형태
- 191~198 라인이 회색 부분인 가장 윗 줄
- 199~ 라인이 상품정보에 대한 내용 (3번 반복되고 내용을 제외하고는 동일)
- 상품 정보에 대한 checkbox는 중복 선택이 가능하도록 name을 같게 주었음둥
2) js파일 내용
- 먼저, 가장 윗줄의 체크박스를 선택했을 때의 함수
if 가장 윗 줄을 체크했다면, 상품정보에 해당하는 체크박스는 모두 선택된다.
else 가장 윗줄을 체크하지 않았다면, 상품정보에 해당하는 체크박스는 선택되지 않는다.
- 상품정보의 체크박스 선택에 대한 함수
total은 상품정보 체크박스의 갯수(길이), checked는 상품정보를 체크했을 대의 갯수(길이)
if total(상품정보에 해당하는 체크)이 선택되지 않았다면, 전체 체크 박스는 체크되지 않는다.
else total이 선택됐다면, 전체 체크박스도 선택된다..
굳이 번역? 설명?을 하려니까 조금 어색한 느낌...😅
[💻결과]
'👩🏻💻프로젝트 > 👥팀프로젝트' 카테고리의 다른 글
| [BACK] 게시판 글 쓰기, 상세보기 (0) | 2023.07.29 |
|---|---|
| [BACK] 게시판 글 목록 보기 (0) | 2023.07.20 |
| [FRONT] 회원정보 확인하기 (0) | 2023.04.26 |
| [FRONT] 회원가입 페이지 (0) | 2023.04.16 |
| [FRONT] 로그인 화면 구현하기 (0) | 2023.04.16 |
'👩🏻💻프로젝트/👥팀프로젝트' Related Articles
more
