💖 [JavaScript+mySQL] Ajax으로 좋아요 기능 만들기

전주은·2022년 11월 24일

🧡 좋아요 구현하기

🙄 들어가기 전에...

Ajax을 배웠다면 실제로 어떻게 쓰이는지 이해하는지 궁금했을 것입니다.
당신이 인스타그램에서 누군가의 게시글에 하트를 누른다면 그 게시글에는 나의 아이디로 좋아요가 하나가 추가되고, 다시 하트를 누르면 나의 아이디가 좋아요를 누른 사람 목록에서 지워지고 좋아요 개수가 하나 줄어들게 됩니다.
좋아요를 누른다고, 페이지 전체가 다시로드되지 않습니다. 일부만 바뀌게 되는 Ajax의 원리가 반영됬기 때문입니다.
이번글에서는 간단하게 구현방법과 원리를 설명할 것인데 만약에 직접 해보고 싶다면 아래 링크로 들어가서 전체 코드를 가져오는 것을 추천합니다!
게시판 전체코드 github

✔ step1. mySQL DB에 좋아요 테이블 생성하기

create table tb_like(
li_idx int auto_increment primary key,
li_userid varchar(20) not null,
li_boardidx int not null,
foreign key (li_boardidx) references tb_board(b_idx) on update cascade
);

3가지 정도 변수가 필요합니다.

1. 좋아요 하나하나에 대한 기준이 되는 li_idx
2. 좋아요를 누른 사람 li_userid
3. 좋아요를 누른 게시물 li_boardidx

foreign key (li_boardidx) references tb_board(b_idx) on update cascade 이부분은 중요합니다
게시글테이블(tb_board)의 게시물 idx(b_idx)를 li_boardidx와 foreign keykey로 설정해주고, ON UPDATE CASCADE를 통해 참조하고 있는 다른 테이블의 컬럼도 같이 UPDATE 하겠다는 제약 조건을 걸어줍니다.
자신이 갖고있는 테이블에 맞게 작성하면 됩니다.

✔ step2. 좋아요 버튼 눌렀을때 Ajax처리하도록 javascript함수 만들기

좋아요 기능에 필요한 부분만 적고 생략해 두었습니다. 만약 전체 코드가 필요하다면, github를 다운받아 webcontent > board > view.jsp를 보시면 됩니다!

<%
	//... 생략
	//상단에 변수 2개를 추가합니다.
	//... 생략
	Boolean isLike=false;		//💖1.변수추가 좋아요한 글인가?
	int b_like = 0;				//💖2.board테이블 like변수추가
	
	// mysql board 내용 전체를 불러옵니다. 불러올때 내가 좋아한 게시물인지 확인해야하니까요!
	try{
		conn = Dbconn.getConnection();
      	// ... 생략
		if(conn != null){
			sql = "select b_userid,b_name,b_title,b_hit,b_regdate,b_like,b_content from tb_board where b_idx=?;";
			pstmt= conn.prepareStatement(sql);
			pstmt.setString(1,b_idx);
			rs= pstmt.executeQuery();
			//💖3. 전체 내용을 가져올 때 좋아요한 게시글인지 확인하기
			if(rs.next()){
				sql="select li_idx from tb_like where li_boardidx=? and li_userid=?";
				pstmt= conn.prepareStatement(sql);
				pstmt.setString(1,b_idx);//이글에 혹시 좋아요 했나?(get으로 받은값)
				pstmt.setString(2,userid);//지금 로그인한사람이?(세션값)
				ResultSet rs_like= pstmt.executeQuery();
				if(rs_like.next()){
                  //💖3. select의 결과 값이 있다면 좋아요한 게시글이다. => isLike=true;
					isLike =true;
				}
                //좋아요랑 관계없이 필요한 게시글의 정보를 가져옵니다
				b_title = rs.getString("b_title");
				b_userid = rs.getString("b_userid");
				b_name = rs.getString("b_name");
				b_regdate = rs.getString("b_regdate");
				b_content = rs.getString("b_content");
				b_hit = rs.getInt("b_hit");
				b_like = rs.getInt("b_like");
			}
		}
	}catch(Exception e){
		e.printStackTrace();
	}
	
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글보기</title>
<script>
  
  //💖4. like() 함수: 하트 누를때 title on <-> title off 하면서 Ajax을 이용해 mysql DB에 like+1 or like-1해줍니다.
	function like(){
		const isHeart = document.querySelector("img[title=on]");
		if(isHeart){
			document.getElementById('heart').setAttribute('src','./like_off.png');
			document.getElementById('heart').setAttribute('title','off');
		}else{
			document.getElementById('heart').setAttribute('src','./like_on.png');
			document.getElementById('heart').setAttribute('title','on');
		}
		//사진경로는 본인에게 맞게 수정이 필요합니다.
		const xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if(xhr.readyState == XMLHttpRequest.DONE && xhr.status ==200){
				document.getElementById('like').innerHTML = xhr.responseText;
			}	
		}
		xhr.open('get','like_ok.jsp?b_idx=<%=b_idx%>',true);
		xhr.send();
	}
</script>
</head>
<body>
	<h2>글보기</h2>
	<table>
		<tr><th>제목</th><td><%=b_title%></td></tr>
		<tr><th>날짜</th><td><%=b_regdate%></td></tr>
		<tr><th>작성자</th><td><%=b_userid%>(<%=b_name%>)</td></tr>
		<tr><th>조회수</th><td><span id="hit"><%=b_hit %></span></td></tr>
<!-- 💖4.좋아요 하트 이미지 추가하고 onclick되었을 때 like() 함수 호출!-->
		<tr>
			<th>좋아요</th><td> <%if(isLike){%><img id="heart" src="./like_on.png" alt="좋아요" onclick="like()">
			<%}else{%><img id="heart" src="./like_off.png" alt="좋아요" onclick="like()"><%}%> <span id="like"><%=b_like %></span></td>
		</tr>
		<tr><th>내용</th><td><%=b_content %></td></tr>
<!-- 뒷내용 생략 -->

✔ step3. Ajax으로 좋아요 수 반영해주기!

이제 like_ok.jsp 파일을 만들고 Ajax을 처리해줄 코드를 짜볼겁니다.
코드가 길지 않아 모두 가져왔습니다!

import는 2가지입니다.
1. java.sql.* : mysql과 연결하도록 도와주는 자바클래스입니다.
2. Dbconn : DB연결을 돕는 싱글톤 패턴입니다.
  여기서 설명하면 복잡해지기 때문에 궁금하시다면 누군가 잘 설명해둔 글을 참고하시길 바랍니다.
필요한 sql 구문
select li_idx from tb_like where li_boardidx=? and li_userid=?;
로그인한 사람이 이글에 좋아요한적있어? 있으면, 좋아요취소(like테이블 기록 삭제)하고, 게시글 좋아요수 하나 줄이자!
update tb_board set b_like = b_like-1 where b_idx=?
delete from tb_like where li_boardidx=? and li_userid =?
없으면, 좋아요(like테이블에 기록 추가)하고, 게시글 좋아요수 하나 늘리자! 그래서 이 게시물 총 좋아요 개수가 얼마나되지?
select b_like from tb_board where b_idx=?
그거 반환해줘! = out.println(b_like) 이런 느낌입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../include/sessioncheck.jsp"%>
<%@ page import = "java.sql.*" %>
<%@ page import = "com.koreait.db.Dbconn" %>
<%
	String b_idx= request.getParameter("b_idx");
	String userid = (String)session.getAttribute("userid");
	request.setCharacterEncoding("UTF-8");
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	try{
		conn = Dbconn.getConnection();
		if(conn != null){
			int b_like=0;
			
			String sql = "select li_idx from tb_like where li_boardidx=? and li_userid=? ";
			pstmt= conn.prepareStatement(sql);
			pstmt.setString(1,b_idx);
			pstmt.setString(2,userid);
			rs= pstmt.executeQuery();
			if(rs.next()){
				sql="update tb_board set b_like = b_like-1 where b_idx=?";
				pstmt= conn.prepareStatement(sql);
				pstmt.setString(1,b_idx);
				pstmt.executeUpdate();	
				
				sql="delete from tb_like where li_boardidx=? and li_userid =?;";
				pstmt= conn.prepareStatement(sql);
				pstmt.setString(1,b_idx);
				pstmt.setString(2,userid);
				pstmt.executeUpdate();	
				
				
				
			}else{
				sql="update tb_board set b_like = b_like+1 where b_idx=?";
				pstmt= conn.prepareStatement(sql);
				pstmt.setString(1,b_idx);
				pstmt.executeUpdate();
				sql="insert into tb_like(li_userid, li_boardidx) values (?,?)";
				pstmt= conn.prepareStatement(sql);
				pstmt.setString(1,userid);
				pstmt.setString(2,b_idx);
				pstmt.executeUpdate();
	
			}
			sql="select b_like from tb_board where b_idx=?";
			pstmt= conn.prepareStatement(sql);
			pstmt.setString(1,b_idx);
			rs= pstmt.executeQuery();
			if(rs.next()){
				b_like = rs.getInt("b_like");
				out.println(b_like);
			}
			if(pstmt != null) conn.close();
		}
	}catch(Exception e){
		e.printStackTrace();
	}
%>

✔ 글을 마치며💨

Ajax을 써보면, 새로고침이 되지않고 바로 그 부분만 수정이 되기때문에 사용자로 하여금 불편한 느낌을 덜어주고, 전체를 로드할 필요가 없으니 서버가 처리해야하는 양을 줄여주죠! 요즘은 Ajax보다는 fetch와 promise를 결합한 것을 더 많이 쓴다고 하지만, 간단한 작업을 할때는 나쁘지 않다고 생각했습니다. 기회가 된다면 fetch와 promise를 이용해서 일부만 바꾸는 것을 다뤄보도록 하겠습니다! 감사합니다!

전주은

이전 포스트

👀 [JavaScript] Ajax 사용법 알아보기

다음 포스트

💖 [JavaScript+mySQL] Ajax으로 좋아요 기능 만들기

🧡 좋아요 구현하기

🙄 들어가기 전에...

✔ step1. mySQL DB에 좋아요 테이블 생성하기

✔ step2. 좋아요 버튼 눌렀을때 Ajax처리하도록 javascript함수 만들기

✔ step3. Ajax으로 좋아요 수 반영해주기!

✔ 글을 마치며💨

👀 [JavaScript] Ajax 사용법 알아보기

💖 [JavaScript+mySQL] Ajax으로 좋아요 기능 만들기

0개의 댓글