[JSP] 인스타 좋아요 기능 구현

[ JSP 프로젝트에서 구현한 좋아요 기능 ]

- DB에 있는 센터의 목록들을 카테고리 별로 불러온 후, 좋아요를 누르면 DB 에 ID와 함께 센터번호가 저장됨.

 

1.좋아요 버튼을 onclick 했을때 this.value값을 가지고 간다 -> list 형식으로 가져왔기 때문에!   

   - sport_type : 종목별  

<input type="hidden" id="user_id" value="${user_id }">
<input type="hidden" id="sport_type" value="${sports.sport_type }">
<button class="likebtn" onclick="likecheck(this.value)" value="${sports.exnum }">
    <c:choose>
    <c:when test="${sports.check > 0 }">
        <img id="imgcheck" src="./images/star.png" >
    </c:when>
    <c:otherwise>
        <img id="imgcheck" src="./images/empty_star.png">
    </c:otherwise>
    </c:choose>
</button>

 

2. 자바스크립트

- button 클릭시 likecheck함수 실행.

- id, sport_type, exnum(센터번호) 를 배열 형태로 chek_list에 담아 ajax 전송

function likecheck(num) {
    var user_id = $('#user_id').val();
    var sport_type = $('#sport_type').val();
    var exnum = num;
    var check_list = {"user_id":user_id, "sport_type":sport_type, "exnum":exnum};
    console.log(check_list + "좋아요");
    $.ajax({
      url:"<%=context%>/imgcheck.do",
      data: check_list,
      dataType:'text',
      success:function(data){
      	if(data == "like") {
      		 document.getElementById("imgcheck").src="./images/star.png";
             const result = document.getElementById('likecnt');
             let number = result.innerText;
             number = parseInt(number)+1;
             result.innerText = number;
             location.reload();
      	}
      	if(data =="dislike"){
      		 document.getElementById("imgcheck").src="./images/empty_star.png";
             const result = document.getElementById('likecnt');
             let number = result.innerText;
             number = parseInt(number)-1;
             result.innerText = number;
             location.reload();
      	}
      }
    });
  };

 

3. service에서 DB와 연결 후 "imgcheck" 를 전달

 
	public String requestPro(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		try {		
			request.setCharacterEncoding("utf-8"); 
			response.setContentType("text/html;charset=utf-8");
			
			// 본인 필요 DB Text가져 옴 (DAO 연결)
			String user_id = request.getParameter("user_id");
			String sport_type = request.getParameter("sport_type");
			int exnum = Integer.parseInt(request.getParameter("exnum"));
			int result = 0;
			
			System.out.println("user_id ->" + user_id);
			System.out.println("sport_type ->" + sport_type);
			System.out.println("exnum ->" + exnum);
			
			CheckSports checkSports = new CheckSports();
			checkSports.setUser_id(user_id);
			checkSports.setSport_type(sport_type);
			checkSports.setExnum(exnum);
			
			CheckSportsDao cd = CheckSportsDao.getInstance();
			
			if(cd.checkLike(checkSports) == 0) {
				result = cd.insertLike(checkSports);
				if(result > 0) {
					request.setAttribute("like", "like");
				} else {
					request.setAttribute("like", "dislike");
				}
				
			} else {
				cd.deleteLike(checkSports);
				if(result > 0) {
					request.setAttribute("like", "dislike");
				} else {
					request.setAttribute("like", "like");
				}
			
			}
			
		} catch(Exception e) { 
			System.out.println(e.getMessage()); 
		} 	
		
		return "imgcheck";
	}

 

4. Controller 전달받은 값이  2번 success function(data)에 전달됨.

	else if(command.contains("imgcheck")) {
            System.out.println("imgcheck -> "+command);    // /och16/list.do

            //text 있다면
            String like = (String) request.getAttribute("like");
            PrintWriter pw = response.getWriter();
            pw.write(like);
            pw.flush();
	}