JSP 게시판 만들기(3)

프로그래밍/JSP 2022. 12. 3. 12:48

728x90

글 상세 보기 페이지와 조회수, 게시글 좋아요 기능을 구현해보자.

글 상세 보기 페이지(view.jsp) 작성

해당 페이지는 게시판 리스트에서 글 제목을 누를 경우 글 인덱스 번호가 담은 URL를 통해 이동한 페이지로 request.getParameter를 통해 URL에서 글 인덱스 번호를 전달 받아 해당 글 인덱스 번호에 맞는 게시글 데이터를 받아와 출력해줄 것이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="com.koreait.db.Dbconn"%>
<%
	String userid = (String)session.getAttribute("userid");
	if(userid == null){
%>
<script>
	alert('로그인 후 이용하세요');
	location.href='../login.jsp';
</script>
<%			
	}else{
	String b_idx = request.getParameter("b_idx");


	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	String sql = "";
	
	String b_userid = "";
	String b_title = "";
	String b_content = "";
	String b_regdate = "";
	int b_like = 0;
	int b_hit = 0;

	
	try{
		conn = Dbconn.getConnection();
		if(conn != null){
			
			sql = "update tb_board set b_hit = b_hit + 1 where b_idx=?";
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, b_idx);
			pstmt.executeUpdate();
			
			sql = "select b_idx, b_userid, b_title, b_content, b_regdate, b_like, b_hit from tb_board where b_idx=?";
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, b_idx);
			rs = pstmt.executeQuery();
			
			if(rs.next()){
				b_userid=rs.getString("b_userid");
				b_title=rs.getString("b_title");
				b_content=rs.getString("b_content");
				b_regdate=rs.getString("b_regdate");
				b_like=rs.getInt("b_like");
				b_hit=rs.getInt("b_hit");
			}
		}
	}catch (Exception e) {
		e.printStackTrace();
	}	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>커뮤니티 - 글보기</title>
<script>
	function like(){
		const xhr = new XMLHttpRequest();
		
		xhr.open('GET', './like_ok.jsp?b_idx=<%=b_idx%>', true);
		xhr.send();
		
		xhr.onreadystatechange = function(){
			if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
				document.getElementById('like').innerHTML = xhr.responseText;
			}
		}
	}
	function replyDelete(r_idx){
		const yn = confirm('삭제하시겠습니까?');
		
		if(yn){
			location.href="./reply_del_ok.jsp?r_idx="+r_idx+"&b_idx=<%=b_idx%>";
		}
	}
</script>
</head>
<body>
	<h2>커뮤니티 - 리스트</h2>
	<table border="1" width="800">
		<tr>
			<td>제목</td><td><%=b_title%></td>
		</tr>
		<tr>
			<td>날짜</td><td><%=b_regdate%></td>
		</tr>
		<tr>
			<td>작성자</td><td><%=b_userid%></td>
		</tr>
		<tr>
			<td>조회수</td><td><%=b_hit%></td>
		</tr>
		<tr>
			<td>좋아요</td><td><span id="like"><%=b_like%></span></td>
		</tr>
		<tr>
			<td>내용</td><td><%=b_content%></td>
		</tr>
		<tr>
			<td colspan="2">
<% 
	if(b_userid.equals(userid)){
%>			
				<input type="button" value="수정" onclick="location.href='./edit.jsp?b_idx=<%=b_idx%>'"> 
				<input type="button" value="삭제" onclick="location.href='./delete.jsp?b_idx=<%=b_idx%>'"> 
<%
	}
%>
				<input type="button" value="좋아요" onclick="like()"> 
				<input type="button" value="리스트" onclick="location.href='./list.jsp'">
			</td>
		</tr>
	</table>
	<hr>
	<form method="post" action="reply_ok.jsp">
		<input type="hidden" name="b_idx" value="<%=b_idx%>">
		<p><%=userid%> : <input type="text" size="40" name="r_content"> <input type="submit" value="확인"></p>
	</form>
	<hr>
<% 
	try{
		conn = Dbconn.getConnection();
		if(conn != null){
			
			sql = "select r_idx, r_userid, r_content, r_regdate from tb_reply where r_boardidx=? order by r_idx desc";
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, b_idx);
			rs = pstmt.executeQuery();
		}
	}catch (Exception e) {
		e.printStackTrace();
	}	
	while(rs.next()){
		int r_idx =rs.getInt("r_idx");
		String r_userid=rs.getString("r_userid");
		String r_content=rs.getString("r_content");
		String r_regdate=rs.getString("r_regdate");

%>	
	<p><%=r_userid%> : <%=r_content%> (<%=r_regdate%>)
<% 
		if(r_userid.equals(userid)){
%>		
			<input type="button" value="삭제" onclick="replyDelete(<%=r_idx%>)">
<% 
		}
%>	
	</p>
<% 
	}
%>
</body>
</html>
<%
}
%>

view.jsp 의 코드를 자세히 나눠 살펴보자.

[조회수 & 글 데이터 가져오기]

try{
    conn = Dbconn.getConnection();
    if(conn != null){

        sql = "update tb_board set b_hit = b_hit + 1 where b_idx=?";
        pstmt = conn.prepareStatement(sql);
        pstmt.setString(1, b_idx);
        pstmt.executeUpdate();

        sql = "select b_idx, b_userid, b_title, b_content, b_regdate, b_like, b_hit 
        from tb_board where b_idx=?";
        
        pstmt = conn.prepareStatement(sql);
        pstmt.setString(1, b_idx);
        rs = pstmt.executeQuery();

        if(rs.next()){
            b_userid=rs.getString("b_userid");
            b_title=rs.getString("b_title");
            b_content=rs.getString("b_content");
            b_regdate=rs.getString("b_regdate");
            b_like=rs.getInt("b_like");
            b_hit=rs.getInt("b_hit");
        }
    }
} catch (Exception e) {
    e.printStackTrace();
}

위 코드는 글 인덱스 번호를 통해 글 상세보기 페이지에 입장할 때마다 조회수( hit )의 데이터를 +1 하는 조회수 기능과 글의 모든 데이터를 가져와 결과를 파라미터에 담아주고 JSP 페이지에 출력한다.

[좋아요 기능]

function like(){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', './like_ok.jsp?b_idx=<%=b_idx%>', true);
    xhr.send();

    xhr.onreadystatechange = function(){
        if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
            document.getElementById('like').innerHTML = xhr.responseText;
        }
    }
}

위 코드는 좋아요 버튼을 누를시 Ajax를 통해 like_ok.jsp와 통신하여 좋아요( like )의 값을 +1씩 증가시키는 자바스크립트 함수이다.

[게시글 삭제 기능]

function replyDelete(r_idx){
    const yn = confirm('삭제하시겠습니까?');

    if(yn){
        location.href="./reply_del_ok.jsp?r_idx="+r_idx+"&b_idx=<%=b_idx%>";
    }
}

함수 호출시 reply_del_ok.jsp 페이지로 이동하여 게시글을 삭제하는 자바스크립트 함수이다.

[글 작성자만 수정 및 삭제 버튼이 노출]

<% 
if(b_userid.equals(userid)){
%>			
    <input type="button" value="수정" onclick="location.href='./edit.jsp?b_idx=<%=b_idx%>'"> 
    <input type="button" value="삭제" onclick="location.href='./delete.jsp?b_idx=<%=b_idx%>'"> 
<%
}
%>

[댓글 작성 Form]

<form method="post" action="reply_ok.jsp">
    <input type="hidden" name="b_idx" value="<%=b_idx%>">
    <p><%=userid%> : <input type="text" size="40" name="r_content"> <input type="submit" value="확인"></p>
</form>

post 방식으로 댓글 내용(r_content)과 글 인덱스 번호(b_idx)를 댓글 작성 처리 페이지(reply_ok.jsp)로 전달한다.

[작성 댓글 불러오기]

<%
try{
    conn = Dbconn.getConnection();
    if(conn != null){

        sql = "select r_idx, r_userid, r_content, r_regdate from tb_reply where r_boardidx=? order by r_idx desc";
        pstmt = conn.prepareStatement(sql);
        pstmt.setString(1, b_idx);
        rs = pstmt.executeQuery();
    }
}catch (Exception e) {
    e.printStackTrace();
}	
while(rs.next()){
    int r_idx =rs.getInt("r_idx");
    String r_userid=rs.getString("r_userid");
    String r_content=rs.getString("r_content");
    String r_regdate=rs.getString("r_regdate");

%>	
	<p><%=r_userid%> : <%=r_content%> (<%=r_regdate%>)
<% 
	if(r_userid.equals(userid)){
%>		
		<input type="button" value="삭제" onclick="replyDelete(<%=r_idx%>)">
<% 
	}
%>	
	</p>
<% 
}
%>

글번호와 일치하는 댓글 데이터를 불러와 출력하고, 만약 댓글 작성자(r_userid)와 현재 로그인 유저(userid)가 동일하다면 댓글 삭제 버튼을 노출한다.

좋아요 처리 페이지(like_ok.jsp) 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="com.koreait.db.Dbconn"%>
<%
	String userid = (String)session.getAttribute("userid");
	if(userid == null){
%>
	<script>
	alert('로그인 후 이용하세요');
	location.href='../login.jsp';
	</script>
<%			
	}else{
	
		
		String b_idx = request.getParameter("b_idx");
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		
		int b_like = 0;
		
		String sql = "";
		
		try{
			conn = Dbconn.getConnection();
			if(conn != null){
				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 = "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);
				}
			}
		}catch (Exception e) {
			e.printStackTrace();
		}
	}
%>

글 인덱스 번호를 파라미터로 전달 받아 글 인덱스 번호에 해당되는 tb_board 테이블 내 데이터의 b_like의 값을 +1 처리한다.

추가로 글번호를 이용해 b_like(+1 해준 값)를 다시 받아와 그 결과를 js로 반환하고 js에서는 innerHTML를 통해 결과를 view.jsp 페이지에 출력한다.

게시글 삭제 처리 페이지(delete.jsp) 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="com.koreait.db.Dbconn"%>
<%
	String userid = (String)session.getAttribute("userid");
	if(userid == null){
%>
	<script>
	alert('로그인 후 이용하세요');
	location.href='../login.jsp';
	</script>
<%			
	}else{
		
		String b_idx = request.getParameter("b_idx");
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;

		String sql = "";
		
		try{
			conn = Dbconn.getConnection();
			if(conn != null){
				sql = "delete from tb_board where b_idx=?";
				pstmt = conn.prepareStatement(sql);
				pstmt.setString(1, b_idx);
				pstmt.executeUpdate();
			}
		}catch (Exception e) {
			e.printStackTrace();
		}
	
%>
	<script>
		alert('게시글이 삭제되었습니다.');
		location.href='./list.jsp';
	</script>
<%
}
%>

삭제 처리 페이지는 글 인덱스 번호를 파타미터로 전달 받아 tb_board 테이블에 글 인덱스 번호(b_idx)와 동일한 글 인덱스 번호가 있다면 삭제(delete) 처리를 수행 한다.

728x90

저작자표시

'프로그래밍 > JSP' 카테고리의 다른 글

JSP 게시판 만들기(5) (0)	2022.12.08
JSP 게시판 만들기(4) (0)	2022.12.06
JSP 게시판 만들기(2) (0)	2022.12.02
JSP 게시판 만들기(1) (0)	2022.11.30
Java Beans 활용하여 로그인 만들기(2) (0)	2022.11.29

ABOUT ME

내 이야기 꾸러미 내 이야기 꾸러미

'프로그래밍 > JSP' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > JSP' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바