[관리자게시판관리] _07_SpringBoot

SpringBoot

[관리자게시판관리] _07_SpringBoot_SprigSecurity 1

seonminiz 2022. 12. 21. 11:22

[getBoardList.html]

-<th>처음과 마지막에 추가
<th style="background: skyblue; width: 10px;"></th>
<th style="background: skyblue; width: 100px;">상태</th>

-그 다음 제일 상단에 <td> 추가
<td>
<input type="checkbox" name="chk" th:id="'chk' + ${board.boardNo}">
</td>
제일 하단에 <td>추가
<td style="text-align: center;" name="statusTd" th:id="'statusTd' + ${board.boardNo}">
<input type="hidden" name="status" th:id="'status' + ${board.boardNo}"
th:data-board-no="${board.boardNo}" th:value="${board.boardTitle}">
</td>

-</table> 아래 <div> 추가
<div sec:authorize="hasRole('ROLE_ADMIN')"
style="width: 700px; text-align:right;">
<button type="button" id="addRowBtn">추가</button>
<button type="button" id="updRowBtn">수정</button>
<button type="button" id="delRowBtn">삭제</button>
<button type="button" id="savRowBtn">저장</button>
</div>

-스크립트상단에 변수생성
//변경사항이 있는 게시물들을 객체형태로 담아서
//백엔드로 전송할 변수
let changeRows = [];
//추가된 Row의 개수
let addRowCount = 0;
//수정모드 플래그
let updateMode = false;
//추가된 행의 작성자로 들어갈 로그인한 유저 아이디
const userId = /*[[${#authentication.principal.username}]]*/;

-스크립트단에 버튼에 대한 함수 추가
//추가버튼 클릭 시 행 추가
$("#addRowBtn").on('click', function() {
//추가된 행에 날짜를 표시
const today = new Date();
const year = today.getFullYear();
const month = (today.getMonth() + 1) >= 10 ? (today.getMonth() + 1) : `0${today.getMonth() + 1}`
const date = today.getDate() >= 10 ? today.getDate() : `0${today.getDate()}`;
const todayFullDate = `${year}-${month}-${date}`;
let htmlStr = `
<tr>
<td>
<button type="button" id="rmAddRowBtn" onclick="fnRmAddRow(this);">-</button>
</td>
<td></td>
<td>
<input type="text" id="addBoardTitle${addRowCount}" name="addBoardTitle">
</td>
<td>${userId}</td>
<td>${todayFullDate}</td>
<td>0</td>
<td style="text-align: center;" name="statusTd" th:id="statusTd${addRowCount}">
<input type="hidden" name="addstatus" id="addstatus${addRowCount}"
value="I">
I
</td>
</tr>
`;

//추가된 행 테이블에 표출
$("#boardTable").append(htmlStr);
addRowCount++;
});

-th:data-board-title="${board.boardTitle}" 작성 & value내용 삭제
<td style="text-align: center;" name="statusTd" th:id="'statusTd' + ${board.boardNo}">
<input type="hidden" name="status" th:id="'status' + ${board.boardNo}"
th:data-board-no="${board.boardNo}" th:data-board-title="${board.boardTitle}" value="">
</td>

-스크립트 최하단에 추가
function fnRmAddRow(btn) {
$(btn).parent().parent().remove();
addRowCount--;
}

-워크벤치에서 롤어드민 추가
t_user 테이블에서 seon 계정을 ROLE_ADMIN으로 변경 후 Apply
※ securityConfiguration.java에서 ROLE_ADMINT오타 수정 => ROLE_ADMIN

http://localhost:9090/board/boardList 에서 추가와 -버튼 확인

-<td th:text="${board.boardNo}"></td> 아래 내용 추가
<td name="boardTitleTd" th:data-board-title="${board.boardTitle}">

-th:data-board-no="${board.boardNo} 추가
<td name="boardTitleTd" th:data-board-title="${board.boardTitle}"
th:data-board-no="${board.boardNo}">

-스크립트단에 버튼에 대한 함수 추가
//수정버튼 클릭 시 수정모드로 변경
$("#updRowBtn").on('click', function() {
updateMode = !updateMode;

$("td[name='boardTitleTd']").html("");

$("td[name='boardTitleTd']").each(function(index) {
if(updateMode) {
let htmlStr = `
<input type="text" name="uBoardTitle"
id="uBoardTitle${index}"
value="${$(this).attr('data-board-title')}">
`;

$(this).append(htmlStr);
} else {
let htmlStr =`
<a id="uBoardTitle${index}"
href="/board/updateBoardCnt/${$(this).attr('data-board-no')}">
${$(this).attr("data-board-title")}
</a>
`;

$(this).append(htmlStr);
}
});

});

-th:value="${board.boardNo}" 추가
<input type="checkbox" name="chk" th:id="'chk' + ${board.boardNo}"
th:value="${board.boardNo}">

-스크립트단에 버튼에 대한 함수 추가
//삭제버튼 클릭 시 체크된 게시물들 삭제 상태로 변경
$("#delRowBtn").on('click', function() {
$("input:checkbox[name='chk']").each(function() {
if($(this).is(":checked")) {
$("#statusTd" + $(this).val()).text("D");
$("#status" + $(this).val()).val("D");
} else {
$("#statusTd" + $(this).val()).text("");
$("#status" + $(this).val()).val("");
}
});
});

<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{layouts/layout}">
	
	<!-- head 영역시작 -->
	<!-- 개별적으로 사용할 css, js 링크 걸기 위해 남겨둠 -->
	<head>
		<th:block layout:fragment="script">
			<script th:inline="javascript">
				//변경사항이 있는 게시물들을 객체형태로 담아서
				//백엔드로 전송할 변수
				let changeRows = [];
				//추가된 Row의 개수
				let addRowCount = 0;
				//수정모드 플래그
				let updateMode = false;
				//추가된 행의 작성자로 들어갈 로그인한 유저 아이디
				const userId = /*[[${#authentication.principal.username}]]*/;
				
				
				$(function() {
					$("#btnSearch").on("click", function(){
						$("input[name='page']").val(0);
						$("#searchForm").submit();
					});
					
					//추가버튼 클릭 시 행 추가
					$("#addRowBtn").on('click', function() {
						//추가된 행에 날짜를 표시
						const today = new Date();
						const year = today.getFullYear();
						const month = (today.getMonth() + 1) >= 10 ? (today.getMonth() + 1) : `0${today.getMonth() + 1}`
						const date = today.getDate() >= 10 ? today.getDate() : `0${today.getDate()}`;
						const todayFullDate = `${year}-${month}-${date}`;
						
						let htmlStr = `
							<tr>
								<td>
									<button type="button" id="rmAddRowBtn" onclick="fnRmAddRow(this);">-</button>
								</td>
								<td></td>
								<td>
									<input type="text" id="addBoardTitle${addRowCount}" name="addBoardTitle">
								</td>
								<td>${userId}</td>
								<td>${todayFullDate}</td>
								<td>0</td>
								<td style="text-align: center;" name="statusTd" th:id="statusTd${addRowCount}">
									<input type="hidden" name="addStatus" id="addStatus${addRowCount}"
										value="I">
										I
								</td>
							</tr>
						`;
						
						//추가된 행 테이블에 표출
						$("#boardTable").append(htmlStr);
						addRowCount++;
					});
					
					//수정버튼 클릭 시 수정모드로 변경
					$("#updRowBtn").on('click', function() {
						updateMode = !updateMode;
						
						$("td[name='boardTitleTd']").html("");
						
						$("td[name='boardTitleTd']").each(function(index) {
							if(updateMode) {
								let htmlStr = `
									<input type="text" name="uBoardTitle"
									id="uBoardTitle${index}"
									value="${$(this).attr('data-board-title')}">
								`;
								
								$(this).append(htmlStr);
							} else {
								let htmlStr =`
									<a id="uBoardTitle${index}"
										href="/board/updateBoardCnt/${$(this).attr('data-board-no')}">
										${$(this).attr("data-board-title")}	
									</a>
								`;
								
								$(this).append(htmlStr);
							}
						});
						
					});
					
					//삭제버튼 클릭 시 체크된 게시물들 삭제 상태로 변경
					$("#delRowBtn").on('click', function() {
						$("input:checkbox[name='chk']").each(function() {
							if($(this).is(":checked")) {
								$("#statusTd" + $(this).val()).text("D");
								$("#status" + $(this).val()).val("D");
							} else {
								$("#statusTd" + $(this).val()).text("");
								$("#status" + $(this).val()).val("");								
							}
						});
					});
					
					//저장버튼 클릭 시 변경사항 저장
					$("#savRowBtn").on('click', function() {
						
					});
				});
				
				function fnRmAddRow(btn) {
					$(btn).parent().parent().remove();
					addRowCount--;
				}
			</script>
		</th:block>
	</head>
	<!-- head 영역 끝 -->
	
	<body>
		<div layout:fragment="content">
			<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
				<h3>게시글 목록</h3>
				<form id="searchForm" action="/board/boardList" method="get">
					<input type="hidden" name="page" value="">
					<table border="1" style="width: 700px; border-collapse: collapse;">
						<tr>
							<td align="right">
								<select name="searchCondition">
									<option value="ALL" th:selected="${searchCondition == 'ALL'}">전체</option>
									<option value="TITLE" th:selected="${searchCondition == 'TITLE'}">제목</option>
									<option value="CONTENT" th:selected="${searchCondition == 'CONTENT'}">내용</option>
									<option value="WRITER" th:selected="${searchCondition == 'WRITER'}">작성자</option>
								</select>
								<input type="text" name="searchKeyword" th:value="${searchKeyword}">
								<button type="button" id="btnSearch">검색</button>
							</td>
						</tr>
					</table>
				</form>
				
				<table id="boardTable" border="1" style="width: 700px; border-collapse: collapse;">
					<tr>
						<th style="background: skyblue; width: 10px;"></th>
						<th style="background: skyblue; width: 100px;">번호</th>
						<th style="background: skyblue; width: 200px;">제목</th>
						<th style="background: skyblue; width: 150px;">작성자</th>
						<th style="background: skyblue; width: 150px;">등록일</th>
						<th style="background: skyblue; width: 100px;">조회수</th>
						<th style="background: skyblue; width: 100px;">상태</th>
					</tr>
						<tr th:each="board: ${getBoardList}">
							<td>
								<input type="checkbox" name="chk" th:id="'chk' + ${board.boardNo}"
								th:value="${board.boardNo}">
							</td>
							<td th:text="${board.boardNo}"></td>
							<td name="boardTitleTd" th:data-board-title="${board.boardTitle}"
								th:data-board-no="${board.boardNo}">
								<a th:text="${board.boardTitle}"
									th:href="@{/board/updateBoardCnt/{boardNo} (boardNo=${board.boardNo})}">
								</a>
							</td>
							<td th:text="${board.boardWriter}"></td>
							<td th:text="${board.boardRegdate eq null ? '' : #strings.substring(board.boardRegdate, 0, 10)}"></td>
							<td th:text="${board.boardCnt}"></td>
							<td style="text-align: center;" name="statusTd" th:id="'statusTd' + ${board.boardNo}">
								<input type="hidden" name="status" th:id="'status' + ${board.boardNo}"
									th:data-board-no="${board.boardNo}" th:data-board-title="${board.boardTitle}" value="">
							</td>
						</tr>
				</table>
				<div sec:authorize="hasRole('ROLE_ADMIN')"
					style="width: 700px; text-align:right;">
					<button type="button" id="addRowBtn">추가</button>
					<button type="button" id="updRowBtn">수정</button>
					<button type="button" id="delRowBtn">삭제</button>
					<button type="button" id="savRowBtn">저장</button>
				</div>
				<br/>
				<div style="text-align:center;">
					<ul class="pagination" th:if="${getBoardList.totalElements > 0}"
											th:with="pageNumber = ${getBoardList.pageable.pageNumber},
																	pageSize = ${getBoardList.pageable.pageSize},
																	totalPages = ${getBoardList.totalPages},
																	startPage = ${T(java.lang.Math).floor(pageNumber / pageSize) * pageSize + 1},
																	tempEndPage = ${startPage + pageSize -1 },
																	endPage =  ${tempEndPage > totalPages ? totalPages : tempEndPage}">
							<li class="pagination_button" th:if="${pageNumber > 0}">
								<a th:href="@{/board/boardList(
												page=${pageNumber - 1},
												searchCondition=${searchCondition},
												searchKeyword=${searchKeyword})}">이전</a>
							</li>
						
						
							<li class="pagination_button" th:each="page : ${#numbers.sequence(startPage, endPage)}">
							<!-- startPage와 endPage에 있는 숫자들을 page에 담아옴. -->
								<a th:href="@{/board/boardList(page=${page - 1},
												searchCondition=${searchCondition},
												searchKeyword=${searchKeyword})}"
												th:text="${page}"></a>
							</li>
						
							<li class="pagination_button" th:if="${pageNumber < totalPages - 1}">
								<a th:href="@{/board/boardList(page=${pageNumber + 1},
												searchCondition=${searchCondition},
												searchKeyword=${searchKeyword})}">다음</a>
							</li>
					</ul>
				</div>
		<br/>
		<a href="/board/insertBoard">새 글 등록</a>
	</div>
		</div>
	</body>
</html>

'SpringBoot' 카테고리의 다른 글

[관리자게시판관리] _07_SpringBoot_SprigSecurity 2 (0)	2022.12.22
[Spring Security] (0)	2022.12.13
[board 추가] 검색어. 검색조건 넘기기 (0)	2022.12.13
[board 추가] 페이징 처리 (0)	2022.12.13
[board 추가] 파일 업로드 및 로그아웃 (0)	2022.12.12

현재글[관리자게시판관리] _07_SpringBoot_SprigSecurity 1

밍꾸

티스토리챌린지, 오블완, 자바, eclipse환경설정, 인텔리제이학생라이센스, Java, JDK, IntelliJ, 인텔리제이무료, 웹개발, 인텔리제이, Eclipse,

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

밍꾸