[JSP/Servlet] 11. 게시글 상세 페이지

[JSP/Servlet] 11. 게시글 상세 페이지 - 수정개발자가 되기까지 (2023.08.16~2024.04.15)/[Servlet] Basic Web2023. 12. 11. 13:20@rlozlr

Table of Contents

게시글 상세 페이지에서 수정 기능을 추가하려고 한다.

webapp > board > modify.jsp 파일을 생성하고 제목과 내용만 띄우도록 화면 구조를 잡았다.

그와 더불어 detail.jsp에서 수정 버튼을 누르면 기존에 입력했던 데이터들이 함께 노출되고

제목과 내용을 수정할 수 있게 코드를 작성했다.

modify.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자유 게시판</title>
</head>
<body>
	<h1>자유게시판 글쓰기</h1>
	<form action="/brd/edit" method="post">
		<!-- controller에 보낼 bno 값 -->
		<input type="hidden" name="bno" value="${bvo.bno }">
		<table>
			<tr>
				<th>제목</th>
				<td><input type="text" name="title" value="${bvo.title }"></td>
			</tr>
			<tr>
				<th>내용</th>
				<td><textarea rows="10" cols="30" name="content">${bvo.content }</textarea></td>
			</tr>
		</table>
		<button type="submit">등록</button>
		<a href="/brd/list"><button type="button">취소</button></a>
	</form>
</body>
</html>

참고로 modify.jsp 구조는 register.jsp 구조를 참조하여 만들었다.

상세 페이지 수정 화면

화면 구조를 완성했다면 먼저 수정 페이지에 데이터를 뿌리는 것부터 진행하도록 한다.

BoardController에 case modify 코드를 작성하되,

method는 앞서 detail에서 생성한 getDetail(bno)를 활용한다.

그럼 service ~ mapper까지 순차적으로 코드를 작성했던 과정은 생략할 수 있다.

기존에 있는 method를 다시 재사용하는 것이기 때문에 또 method를 만들 필요가 없기 때문이다.

BoardController.java

package controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.BoardVO;
import domain.MemberVO;
import domain.PagingVO;
import handler.PagingHandler;
import service.BoardService;
import service.BoardServiceImpl;

@WebServlet("/brd/*")
public class BoardController extends HttpServlet {

// ... (기존 코드)
			
		case "modify":
			try {
				int bno = Integer.parseInt(request.getParameter("bno"));
				// detail에서 생성해둔 getDetail(bno) method를 사용해서 BoardVO 객체에 데이터를 넣어줌
				BoardVO bvo = bsv.getDetail(bno);
				// 데이터를 받아 온 객체 bvo를 화면에 뿌림
				request.setAttribute("bvo", bvo);
				destPage = "/board/modify.jsp";
				
			} catch (Exception e) {
				log.info(">>> modify error");
				e.printStackTrace();
			}
			break;
		}

// ... (기존 코드)

}

detail.jsp에서 수정 버튼의 a태그 경로를 설정해준다.

경로에는 수정하고자 하는 게시물의 bno 번호를 달아 주어야 하는 것도 잊지 말아야 한다.

jsp와 controller에서 자꾸 bno를 달아주고 bno를 데려가서 사용하는 이유는

특정 게시물 하나를 삭제 / 수정 / 보기를 하기 위해서 그 게시물을 식별하는 고유 번호가

bno다 라고 이해하면 된다.

detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자유 게시판</title>
</head>
<body>

<!-- ... (기존 코드) -->

	<a href="/brd/register"><button>글쓰기</button></a>
	<!-- 만약 로그인id와 작성자가 같다면... -->
	<c:if test="${ses.id eq bvo.writer }">
	<a href="/brd/modify?bno=${bvo.bno }"><button>수정</button></a>
	<a href="/brd/remove?bno=${bvo.bno }"><button>삭제</button></a>
	</c:if>
	<a href="/brd/list"><button>목록</button></a>
	
</body>
</html>

상세 페이지 화면

데이터가 뿌려진 상세 페이지 수정 화면

수정 페이지에 기존의 상세 페이지 데이터가 제대로 뿌려지는 것을 확인했으니

이제 정말로 수정하는 기능을 작성한다.

modify.jsp에서 버튼을 눌렀을 때 action을 edit로 선언해주었기 때문에

controller에서 case edit로 코드를 작성하고 mapper까지 순차적으로 진행한다.

BoardController.java

package controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.BoardVO;
import domain.MemberVO;
import domain.PagingVO;
import handler.PagingHandler;
import service.BoardService;
import service.BoardServiceImpl;

@WebServlet("/brd/*")
public class BoardController extends HttpServlet {

// ... (기존 코드)
			
		case "modify":
			try {
				int bno = Integer.parseInt(request.getParameter("bno"));
				// detail에서 생성해둔 getDetail(bno) method를 사용해서 BoardVO 객체에 데이터를 넣어줌
				BoardVO bvo = bsv.getDetail(bno);
				// 데이터를 받아 온 객체 bvo를 화면에 뿌림
				request.setAttribute("bvo", bvo);
				destPage = "/board/modify.jsp";
				
			} catch (Exception e) {
				log.info(">>> modify error");
				e.printStackTrace();
			}
			break;
			
		case "edit":
			try {
				// modify.jsp에서 bno 값을 가져온다.
				int bno = Integer.parseInt(request.getParameter("bno"));
				String title = request.getParameter("title");
				String content = request.getParameter("content");
				BoardVO	bvo = new BoardVO(bno, title, content);
				log.info(">>> bvo >>> {}", bvo);
				log.info(">>> edit chck 1");
				
				isOk = bsv.modify(bvo);
				log.info(">>> eidt >>> "+(isOk > 0 ? "OK" : "FAIL"));
				
				destPage = "list";
				
			} catch (Exception e) {
				log.info(">>> edit error");
				e.printStackTrace();
			}
			break;
		}

// ... (기존 코드)

}

BoardService.interface

package service;

import java.util.List;

import domain.BoardVO;
import domain.PagingVO;

public interface BoardService {

	List<BoardVO> getList(PagingVO pgvo);

	int getTotal(PagingVO pgvo);

	int insert(BoardVO bvo);

	BoardVO getDetail(int bno);

	int remove(int bno);

	int modify(BoardVO bvo);

}

BoardServiceImpl.java

package service;

import java.util.List;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.BoardVO;
import domain.PagingVO;
import repository.BoardDAO;
import repository.BoardDAOImpl;

public class BoardServiceImpl implements BoardService {

// ... (기존 코드)

	@Override
	public int modify(BoardVO bvo) {
		log.info(">>> edit check 2");
		return bdao.update(bvo);
	}

}

BoardDAO.interface

package repository;

import java.util.List;

import domain.BoardVO;
import domain.PagingVO;

public interface BoardDAO {

	List<BoardVO> selectList(PagingVO pgvo);

	int getTotal(PagingVO pgvo);

	int insert(BoardVO bvo);

	BoardVO getDetail(int bno);

	int delete(int bno);

	int update(BoardVO bvo);

}

BoardDAOImpl.java

package repository;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.BoardVO;
import domain.PagingVO;
import orm.DatabaseBuilder;

public class BoardDAOImpl implements BoardDAO {

// ... (기존 코드)

	@Override
	public int update(BoardVO bvo) {
		log.info(">>> edit check3");
		int isOk = sql.update("BoardMapper.edit", bvo);
		if(isOk > 0) sql.commit();
		return isOk;
	}

}

detail.jsp에서 수정일도 보여지도록 하고 있으므로 boardMapper를 작성할 때,

moddate도 함께 업데이트 될 수 있도록 작성한다.

boardMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="BoardMapper">
  
<!-- ... (기존 코드) -->
 	
 	<update id="edit">
 		update board set title = #{title}, content = #{content}, moddate = now()
 		where bno = #{bno}
 	</update>
  
  
<!-- ... (기존 코드) -->

  </mapper>

상세페이지 수정 전