[Spring Boot 게시판] 18일차

1. 검색어에 따라서 게시물 노출, 페이지 이동 시 검색어 유지

1) 검색어에 따라서 게시물 노출

	List<Article> articles = articleService.getForPrintArticles(rq.getLoginedMemberId(), boardId, page,
				itemsInAPage, searchKeywordType, searchKeyword);

• 쿼리문에 searchKeywordType, searchKeyword 을 추가하여 게시물을 가져오기위해 파라미터 추가

2) 페이지 이동 시 검색어 유지(list.jsp)

		<div class="page-menu mt-3 flex justify-center">		
				<c:set var="pageBaseUri" value="?boardId=${board.id}"/>
				<c:set var="pageBaseUri" value="${pageBaseUri }&searchKeywordType=${param.searchKeywordType}"/>
				<c:set var="pageBaseUri" value="${pageBaseUri}&searchKeyword=${param.searchKeyword}"/>

				<div class="btn-group">
					<c:if test="${startPage>1 }">
						<a class="btn btn-md" href="${pageBaseUri }&page=1">1</a>
					</c:if>
					<c:if test="${startPage > 2 }">
						<a class="btn btn-md btn-disabled" href="#">...</a>
					</c:if>
					<c:forEach begin="${startPage }" end="${endPage}" var="i">
						<a class="btn btn-md ${page == i ? 'btn-active' : '' }" href="${pageBaseUri }&page=${i }">${i }</a>

• 기존의 버튼 클릭시 이동하는 uri는 boardId와 page만 있기 때문에
• searchKeywordType과 searchKeyword이 포함되 있지않아 searchKeywordType과 searchKeyword 의 default 값으로 페이지로 이동이 되므로
• uri에 검색어 정보(pageBaseUri)를 추가

2. 검색 박스 구현

		<form class="flex">
			<input type="hidden" name="boardId" value="${board.id }" />
			<select data-value="${param.searchKeywordType}" name="searchKeywordType" class="select select-bordered">
				<option value="title">제목</option>
				<option value="body">내용</option>
				<option value="title,body">제목 + 내용</option>
			</select>
			<input class="input input-bordered" name="searchKeyword" type="text" value="${param.searchKeyword }"
									maxlength="20" placeholder="검색어를 입력해주세요." />
			<button class="btn btn-ghost" type="submit">SEARCH</button>
		</form>

• <input type="hidden" name="boardId" value="${board.id }" /> 현재 게시판의 정보를 유지하기위해 boardId를 hidden으로 전송

• searchKeywordType과 searchKeyword의 데이터도 함께 전송

• 이때 form태그의 action 속성을 생략하면 해당 페이지(현재 페이지)를 요청할 때와 같은 방식으로 처리가 된다.

• <input ~~생략~~ name="searchKeyword" type="text" value="${param.searchKeyword }" : 실직적인 검색창에 해당,

  value="${param.searchKeyword } 속성을 추가 해주면 검색후 검색창에 검색어가 남아있다.

이해하지 못한코드

    $('select[data-value]').each(function(index, el) {
        const $el = $(el);
        const defaultValue = $el.attr('data-value').trim();
        if (defaultValue.length > 0) {
            $el.val(defaultValue);
        }
    });

• $('select[data-value]')는 배열의 형태로 되있다.
• each메소드를 사용하여 각각 배열의 요소마다 함수실행
• .attr('data-value')는 요소의 'data-value' 속성의 값을 가져오고 그값을
• defaultValue 에 대입하고
• 요소에 value값으로 넣는다?
• 해당요소에 value값을 지정해놓는 이유는??
• 해당요소에 value값이 크롬의 개발자 창에서 나타나지 않는 이유는??
• 무슨 의도로 value를 설정하고 data-value를 넣을까?

3. 조회수 구현(상세페이지 이동시 조회수 추가)

1) ArticleController showDetail()메소드

	@RequestMapping("/usr/article/detail")
	public String showDetail(Model model, int id) {		
		ResultData<Integer> increaseHitCountRd = articleService.increaseHitCount(id);
		if(increaseHitCountRd.isFail()) {
			return rq.jsHistoryBackOnView(increaseHitCountRd.getMsg());
		}
					~~ 생략 ~~

• 조회수 증가에대한 결과를 increaseHitCountRd 즉, ResultData타입으로 받음

• 조회수 증가에대한 결과가 실패시 rq.jsHistoryBackOnView(increaseHitCountRd.getMsg()) 메소드를 통해

• 결과에대한 메세지를 띄워주고 뒤로가기

• 해당 코드를 작성하는 이유는 페이지에서 버튼으로 이동시에는 문제가 없지만

• 만약 uri로 직접 이동시, id에 해당하는 게시물이 존재하지 않을 경우를 대비

2) ArticleService increaseHitCount()메소드

	public ResultData<Integer> increaseHitCount(int id) {
		int affectedRowsCount = articleRepository.increaseHitCount(id);
		if(affectedRowsCount == 0) {
			return ResultData.from("F-1", "존재하지 않는 게시물입니다.","affectedRowsCount",affectedRowsCount);
		}
		return ResultData.from("S-1", "조회수 증가","affectedRowsCount",affectedRowsCount);
	}

• affectedRowsCount : DB에 업데이트후 실행되는 열을 반환
• 0이라면 업데이트 되는 열이 없는경우를 의미, 조회수 증가 실패에 대한 결과를 반환
• 조회수 증가가 되었다면 실행된 열을 반환하여 결과(ResultData)에 추가
• articleRepository.increaseHitCount(id) : DB에 업데이트를 실행하는 메소드

4. 조회수 증가 방식을 수정, 증가한 조회수를 볼 수 있도록

조회수 증가 방식을 수정

	@RequestMapping("/usr/article/doIncreaseHitCountRd")
	@ResponseBody
	public ResultData<Integer> doIncreaseHitCount(int id){
		ResultData<Integer> increaseHitCountRd = articleService.increaseHitCount(id);
		if(increaseHitCountRd.isFail()) {
			return increaseHitCountRd;
		}
		int hitCount = articleService.getHitCount(id);
		return ResultData.newData(increaseHitCountRd, "hitCount", hitCount);
	}

• 기존에는 상세 페이지로 이동시 조회수가 증가
• /usr/article/doIncreaseHitCountRd 해당 uri로 접근시 조회수가 증가하도록 구현
• 조회수 증가에대한 결과를 ResultData로 브라우저에서 보여지고
• 조회수 증가가 성공한다면 articleService.getHitCount(id) 즉, DB에서 조회수를 구하는 메소드를 통해
• 해당 게시물의 조회수를 추가하여 ResultData타입의 결과를 브라우저에 보여줌