JSP day13
JSP로 게시판 만들기(3)
이번 시간에는 리스트에서 글 내용 상세보기 페이지를 만들어보자
view.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 = "";
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>
<%
}
%>
이 페이지는 리스트에서 글 제목을 누를 경우 a태그를 통해 글의 인덱스 번호가 담긴 url로 이동한 페이지이다. request.getParameter를 통해 url에서 글 인덱스 번호를 받아 해당 인덱스의 데이터 받아와 출력해줄 것이다.
그럼 페이지를 상세하게 확인해보자.
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 해주어 조회수 기능을 구현해주고, 글의 모든 정보는 가져와 결과를 파라미터에 담아준다.
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%>";
}
}
이 스크립트 함수는 함수 호출시 url로 이동하여 게시글을 삭제하게되는 함수이다.
<%
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%>'">
<%
}
%>
만약 현재 글을 보고 있는 유저가 글작성자와 동일한 userid를 사용하고 있다면, 그 유저에게만 수정 및 삭제 버튼이 노출되게 될 것이다.
<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>
이 부분은 댓글을 작성하는 부분으로 form 태그를 활용하여 post 방식으로 댓글 내용과 input[type=’hidden’]를 활용하여 글 인덱스 번호를 같이 보내게되어 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>
<%
}
%>
이 글에 작성된 댓글을 불러오는 코드로 글번호와 일치하는 모든 댓글 데이터를 불러와 p태그 내 스크립틀릿 태그에 출력되게되고, 만약 댓글을 작성한 유저(작성 당시 로그인된 유저의 userid를 DB에 저장)와 현재 글을 보고있는(로그인한) 유저가 동일하다면 댓글 삭제 버튼을 노출할 것이다.
이제 like() 함수에서 좋아요 기능을 처리하는 페이지 like_ok.jsp를 확인해보자.
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();
}
}
%>
이 페이지 역시 로그인 처리를 해주었고 글 번호를 파라미터로 받아와서 글번호에 해당되는 데이터의 b_like를 +1해주게된다. 추가로 글번호를 이용해 b_like(+1해준 값)를 다시 받아와 그 결과를 js로 반환하고 js에서는 innerHTML를 통해 결과를 출력한다.
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>
<%
}
%>
삭제 페이지는 간단하게 글번호를 파타미터로 받아 데이터에 글번호와 동일한 글번호가 있다면 delete처리하고 alert메세지와 함께 리스트페이지로 이동한다.
글 상세보기 페이지 입장 시)
좋아요 누를 경우)
글 삭제 버튼 누를 경우)
글 삭제된 후 리스트 모습)