[ JS / AJAX ] 게시판 좋아요 구현

환경 : Spring Tool Suite4

 

 

목표 : <좋아요>를 누르면 좋아요, <좋아요>를 한 번 더 누르면 취소되도록 구현 (토글~!)

           + 각 게시글의 총 좋아요 개수 카운트

 

 

(중요)들어가기 전 알아야할 부분

• JS(JavaScript) : 클라이언트에서 실행
• EL(Expression Language) : 서버에서 실행

     -> 서로 다른 두 개의 언어를 섞으면 안 돼요~ㅠ (아무리 같은 페이지라도 서로 다른 언어를 혼용하지 말 것)

 

 

 + 좋아요 구현 시 사용되는 코드를 통해 설명하겠다.

 해당 코드처럼 현재 파라미터에 있는 번호를 읽어와 추출하고 싶은 경우. 서로 다른 언어를 혼용하여 사용해선 안된다. 

• JS : var boardNo = params.get("boardNo");
• EL : var params = new URLSearchParams(location.search); 

해당 클래스의 아래 코드에서 EL을 사용하고 있다는 이유로, 스크립트내에서 JS가 아닌 EL 코드를 사용하게 되면, 나중에 오류가 날 수 있다. 따라서 처음부터 구분하여 사용해주는 것이 좋다!

 

---

 

[ 좋아요 표시 코드 ]

 

• 상세페이지 = 메인
• 좋아요 기능 = 서브 

             => 상세 페이지 안에 좋아요 기능이 있는 것이다. 

 

 

먼저, 

  좋아요 상태를 표현(조회) 해주기 위한 매핑 필요하다

  이때, 방법이 두 가지가 존재한다. (1)MAP을 사용하는 방법과 (2)Class를 사용하는 방법이다.

 

 - (1)map형태로 사용

//회원의 글에 대한 좋아요 상태를 조회
@RequestMapping("/check")
public Map<String, Object> check (
	HttpSession session, @RequestParam int boardNo) {
	String loginId = (String)session.getAttribute("loginId");
		
	Map<String, Object> data = new HashMap<>();
	data.put("state", boardLikeDao.check(loginId, boardNo));
	data.put("count", boardLikeDao.count(boardNo));
		
	return data;
}

 

   - (2)클래스를 만들어 사용

//회원의 글에 대한 좋아요 상태를 조회
@RequestMapping("/check")
public LikeVO check (
	HttpSession session, @RequestParam int boardNo) {
	String loginId = (String)session.getAttribute("loginId");
		
	LikeVO likeVO = new LikeVO();
	likeVO.setState(boardLikeDao.check(loginId, boardNo));
	likeVO.setCount(boardLikeDao.count(boardNo));
		
	return likeVO;
}

 

 

두 번째로, 

   좋아요를 누르는 기능을 구현하는 것이다. 매핑을 해준 상태에서 좋아요 누르는 기능을 수행해주면 된다. 

   만약, 현재 세션에 로그인한 회원(아이디)이 해당 게시글에 좋아요를 누른 적이 있으면 좋아요 취소

            좋아요를 누른 적이 없으면 좋아요 표시를 해주도록 한다. (if-else문 사용)

 

  위와 같은 액션이 일어나면 총 좋아요의 수가 바뀌기 때문에 바뀐 좋아요의 개수를 확인하여 표시해준다. 

 

    - map 형태

//하트를 클릭한 경우 실행할 매핑
@RequestMapping("/toggle")
public Map<String, Object> toggle(
	HttpSession session, @RequestParam int boardNo) {
	String loginId = (String)session.getAttribute("loginId");
		
	Map<String, Object> data = new HashMap<>();
		
	if(boardLikeDao.check(loginId, boardNo)) {//좋아요 누른적 있으면
		boardLikeDao.delete(loginId, boardNo);//좋아요 취소
		data.put("state", false);
	}
	else {
		boardLikeDao.insert(loginId, boardNo);//좋아요 설정
		data.put("state", true);
	}
		
	//바뀐 좋아요 개수 확인
	int count = boardLikeDao.count(boardNo);
	data.put("count", count);
		
	return data;
}

 

  -  클래스를 사용

//하트를 클릭한 경우 실행할 매핑
@RequestMapping("/toggle")
public LikeVO toggle(
	HttpSession session, @RequestParam int boardNo) {
	String loginId = (String)session.getAttribute("loginId");
		
	LikeVO likeVO = new LikeVO();
	if(boardLikeDao.check(loginId, boardNo)) {//좋아요 누른적 있으면
		boardLikeDao.delete(loginId, boardNo);//좋아요 취소
		likeVO.setState(false);
	}
	else {
		boardLikeDao.insert(loginId, boardNo);//좋아요 설정
		likeVO.setState(true);
	}
	//바뀐 좋아요 개수 확인
	likeVO.setCount(boardLikeDao.count(boardNo));
		
	return likeVO;
}

 

---

좋아요를 구현함에 있어 중요한 코드는 위와 같다. 아래는 부가적으로 좋아요를 구현함에 있어 필요한 코드들이다. 

 

  - BoardLikeDao.java

@Repository
public class BoardLikeDao {
	@Autowired
	private JdbcTemplate jdbcTemplate;

	//[C] 좋아요 내역을 등록
	public void insert(String memberId, int boardNo) { 
		String sql = "insert into board_like(member_id, board_no) values(?, ?)";
		Object[] data = {memberId, boardNo};
		jdbcTemplate.update(sql, data);
	}
        //[D] 좋아요 내역을 삭제
	public boolean delete(String memberId, int boardNo) {
		String sql = "delete board_like where member_id = ? and board_no = ?";
		Object[] data = {memberId, boardNo};
		return jdbcTemplate.update(sql, data) > 0;
	}
    	//[R] 좋아요 여부를 확인
	public boolean check(String memberId, int boardNo) {
		String sql = "select count(*) from board_like "
						+ "where member_id = ? and board_no = ?";
		Object[] data = {memberId, boardNo};
		int count = jdbcTemplate.queryForObject(sql, int.class, data);
		return count > 0;
	}
    	//[R] 특정 글의 좋아요 개수를 확인
	public int count(int boardNo) {
		String sql = "select count(*) from board_like where board_no = ?";
		Object[] data = {boardNo};
		return jdbcTemplate.queryForObject(sql, int.class, data);
	}
}

 

   - LikeVO.java (클래스를 만들어 구현하는 경우 필요)

public class LikeVO {
	private boolean state;
	private int count;
	public LikeVO() {
		super();
	}
	public boolean isState() {
		return state;
	}
	public void setState(boolean state) {
		this.state = state;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}
}

 

   - datail.jsp (게시판의 좋아요가 표시되는 페이지 코드)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<jsp:include page="/WEB-INF/views/template/header.jsp"></jsp:include>

<c:if test="${sessionScope.loginId != null}">
<script type="text/javascript">
	//좋아요 하트 클릭 이벤트
	$(function(){
		//(주의) 아무리 같은 페이지라도 서로 다른언어를 혼용하지 말것
		//- 자바스크립트에서 파라미터를 읽어 번호를 추출
		var params = new URLSearchParams(location.search);
		var boardNo = params.get("boardNo");
		
		//목표 : 하트를 클릭하면 좋아요 갱신처리
		$(".board-like").find(".fa-heart").click(function(){
			$.ajax({
				url : "/rest/board_like/toggle",//같은 서버이므로 앞 경로 생략
				method : "post",
				data : { boardNo : boardNo },
				success : function(response){
					
					//response.state에 따라서 하트의 형태를 설정
					$(".board-like").find(".fa-heart")
						.removeClass("fa-solid fa-regular")
						.addClass(response.state ? "fa-solid" : "fa-regular");
					
					//response.count에 따라서 좋아요 개수를 표시
					$(".board-like").find(".count").text(response.count);
				}
			});
		});
	});
</script>
</c:if>
<script type="text/javascript">
	//좋아요 최초 불러오기
	$(function(){
		//(주의) 아무리 같은 페이지라도 서로 다른언어를 혼용하지 말것
		//- 자바스크립트에서 파라미터를 읽어 번호를 추출
		var params = new URLSearchParams(location.search);
		var boardNo = params.get("boardNo");
		
		//최초에 표시될 화면을 위해 화면이 로딩되자마자 서버로 비동기통신 시도
		$.ajax({
			url : "/rest/board_like/check",
			method : "post",
			data : { boardNo : boardNo },
			success: function(response) {
				//response.state에 따라서 하트의 형태를 설정
				$(".board-like").find(".fa-heart")
					.removeClass("fa-solid fa-regular")
					.addClass(response.state ? "fa-solid" : "fa-regular");
				
				//response.count에 따라서 좋아요 개수를 표시
				$(".board-like").find(".count").text(response.count);
			}
		});
	});
</script>
	
</div>

<jsp:include page="/WEB-INF/views/template/footer.jsp"></jsp:include>

 

 

 

 

개인 공부 기록용입니다.