[Java] 인기 검색어 기능 구현 - 2

 

1편에 정리한거 이어서 "사용자 화면 검색순위"는 다음과 같이 구현했다

 

<div class="col-sm-12" style="width: 50%">
	<div class="tbl-top-area">
		<div class="tit">
			<h4 class="box-title">사용자 화면 검색 순위</h4>
		</div>
		<div class="btn">
			<button type="button" class="btn btn-warning" onclick="fn_chkDel()">삭제</button>
		</div>
	</div>
	<table class="table table-bordered">
		<colgroup>
			<col style="width: 55px;">
			<col style="width: 70px;">
			<col style="width: *;">
			<col style="width: 70px;">
		</colgroup>
		<thead>
			<tr>
				<th scope="col"><input type="checkbox" name="chkAlltwo" id="chkAlltwo" value="Y" title="전체선택/해제" onclick="ItgJs.fn_checkAll(this, 'chkIdtwo');" /></th>
				<th scope="col">순위</th>
				<th scope="col">사용자화면</th>
				<th scope="col">위치</th>
			</tr>
		</thead>
		<tbody id="usrPopTable">
			<c:forEach var="Userpopular" items="${UserpopularWordList}" varStatus="status">
				<tr class="tac" id="usrWordForm${status.count}" name="usrWordForm">
					<td class="text-c"><input type="checkbox" name="chkIdtwo" id="usrWord${status.count}"></td>
					<td class="countNum" style="text-align: center;">${status.count}</td>
					<td style="text-align: center;">
                    	<div class="form-inline">
							<input type="text" name="usrPopWord" id="usrPopWord${status.count}" maxlength="40" value="${Userpopular.userPopwWord}" class="required form-control input-sm f-wd-300px">
						</div>
                    </td>
					<td id="sortBtn" class="text-c">
						<div class='btn-group-vertical' style='width: 20px;'>
							<button type="button" id="upBtn" class='btn btn-primary btn-xs up' class="sort-btn">
								<span class='fa fa-sort-up'></span>
							</button>
							<button type="button" id="downBtn" class='btn btn-primary btn-xs down' class="sort-btn">
								<span class='fa fa-sort-desc'></span>
							</button>
						</div>
					</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
</div>

 

이거 최초 구현했을때 시행착오를 좀 겪었었는데.. "DB 검색순위" 에서 추가 버튼 눌렀을때 append 되는거까진 좋았다

근데 화살표를 누르니까 동작을 안한다. append 이후에 정적으로 동작하다 보니 이 버튼으로 동적으로 클릭할 수 있게 만들어줘야 되는데..

 

document의 on 함수에 클릭할 class 속성을 추가하면 append 이후 버튼을 동적으로 클릭할 수 있더라

 

$(document).ready(function(){

		// append 이후 버튼 동적클릭
		$(document).on("click",".up",function()
		{
			var index = $(this).parents("tr").index();

			var clickValue = $("#usrPopTable").children("tr:eq("+(index)+")").find("input[name=usrPopWord]").val();
			var prevValue = $("#usrPopTable").children("tr:eq("+(index-1)+")").find("input[name=usrPopWord]").val();

			temp = clickValue;
			clickValue = prevValue;
			prevValue = temp;

			$("#usrPopTable").children("tr:eq("+(index)+")").find("input[name=usrPopWord]").val(clickValue);
			$("#usrPopTable").children("tr:eq("+(index-1)+")").find("input[name=usrPopWord]").val(prevValue);
		});

		$(document).on("click",".down",function()
		{
			var index = $(this).parents("tr").index();

			var clickValue = $("#usrPopTable").children("tr:eq("+(index)+")").find("input[name=usrPopWord]").val();
			var nextValue = $("#usrPopTable").children("tr:eq("+(index+1)+")").find("input[name=usrPopWord]").val();

			temp = clickValue;
			clickValue = nextValue;
			nextValue = temp;

			$("#usrPopTable").children("tr:eq("+(index+1)+")").find("input[name=usrPopWord]").val(nextValue);
			$("#usrPopTable").children("tr:eq("+(index)+")").find("input[name=usrPopWord]").val(clickValue);
		});
});

 

삭제 기능은 체크박스를 선택했을 때만 가능하게 구현했고..

 

	function fn_chkDel()
	{
		var delSize = $("input[name=chkIdtwo]:checked").length;
		var userWord = $(".tac").find(".form-inline").length;

		if(delSize == 0){
			alert("삭제할 검색어를 선택해주세요.");
			return false;
		}
		else{
			for(a=1;a<=userWord;a++){
				if($("#usrWord"+a).is(":checked")==true){
					$("#usrWordForm"+a).remove();
					renumbering();
				}
			}
			sortBtnUpdate();
		}
	}

 

저장을 누르면 이전에 있었던 "사용자 화면 검색 순위" 데이터는 삭제하고 새로운 데이터들을 배열에 담아서 INSERT 해주는 방식으로 구현했다

	public String popularInputProc(ItgMap map, ModelMap model, HttpServletRequest request, String returnPage) throws IOException, SQLException
	{
		String[] usrPopWord = (String[])map.get("usrPopWord");
		this.totalSearchMapper.DeleteUserPopularWord();
		this.totalSearchMapper.InsertUserPopularWord(usrPopWord);
		return returnPage;
	}

 

	<delete id="DeleteUserPopularWord">
		DELETE FROM t_user_popular_word
	</delete>

	<insert id="InsertUserPopularWord" parameterType="String">
		INSERT INTO t_user_popular_word
		(
			user_popw_word,
			user_popw_date,
			user_popw_order
		)
		VALUES
		<foreach collection="array" item="usrPopWord" separator=",">
		(
			#{usrPopWord},
			now(),
			(SELECT ifnull(max(a.user_popw_order)+1,1) from t_user_popular_word a)
		)
		</foreach>
	</insert>

 

이로써 관리자 작업은 끝! 이제 사용자 화면에만 보여주면 된다. 사실 이건 문제도 아니지 그냥 DB에 있는거 SELECT 해주면 되니까

 

	<select id="selectUserPopularWord" resultType="itgMap">
		/* selectUserPopularWord */
		SELECT *
		FROM t_user_popular_word
		ORDER BY user_popw_order
	</select>

 

 

마무리 작업으로 사용자가 검색했을 때 DB에 INSERT 해주는 로직까지 추가해주면 인기검색어는 완료

 

	<insert id="insertPopularWord" parameterType="itgMap">
		/* insertPopularWord */
		<if test="schStr != null and schStr != ''">
			INSERT INTO t_popular_word
			(
				popw_word,
				popw_date
			)
			VALUES
			(
				#{schStr},
				now()
			)
		</if>
	</insert>

 

운영서버에 반영하고 1년 넘게 지난거 같은데.. 고객이 이거 수정해달라, 하자가 있다.. 이런 건은 들어온 적이 한번도 없었다. 고객이 사용한 흔적도 보이고... 기능에 별 이상은 없나보다 ㅋㅋ