JavaSpringBoot를 이용하여 작성, 수정, 삭제 페이지 만들기

목록 만드는 페이지부터 시작하였고 궁금하신분들은 아래를 참고해주세요!

 

2022.01.01 - [Java] - Java SpringBoot를 이용하여 게시판 목록 만들기

Java SpringBoot를 이용하여 게시판 목록 만들기

 

목록 만들기 글에서 적었듯이 

Mapper -> DAO -> Service -> Controller 흐름으로 코드를 작성하겠습니다.

작성 수정 삭제 한꺼번에 설명 해드리고 view의 흐름이 어떻게 전개되는지 설명해드리겠습니다.

 

 

Board.xml(Mapper)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lec.spring.domain.BoardDAO">
	
  <select id="selectAll" resultType="com.lec.spring.domain.BoardDTO">
    SELECT * FROM board ORDER BY uid DESC
  </select>
  
  <insert id="insertBoard" flushCache="true" 
    parameterType="com.lec.spring.domain.BoardDTO"
    keyProperty="uid" useGeneratedKeys="true" keyColumn="uid">
    INSERT INTO board (userId, title, summary)
    VALUES (#{userId}, #{title}, #{summary})
  </insert>
    
  <select id="selectOne" resultType="com.lec.spring.domain.BoardDTO">
    SELECT * FROM board WHERE uid = #{param}
  </select>
	
  <update id="updateBoard" flushCache="true">
    UPDATE 
    board
    SET
    summary = #{summary}
    WHERE
    uid = #{uid} 
  </update>
	
  <delete id="deleteBoard" flushCache="true">
    DELETE FROM board WHERE uid = #{param}
  </delete>
    
 
</mapper>

 

목록 작성 수정 삭제 순으로 작성 되었습니다.

Insert 부분에서 keyProperty는 DTO의 uid 변수명 keyColumn 은 DB 테이블에 있는 uid 컬럼명을 작성해주시면 됩니다.

Mybatis 에서 #{변수명} 을 사용하면 거기에 맞는 변수명의 값을 찾아서 sql에 맞는 자리에 값을 입력해줍니다!

전 받는 parameter 값이 하나일 경우에는 #{param}을 사용하여 parameter 값을 받는 코드를 작성해주었습니다.

 

 

BoardDAO, BoardDAOImpl

package com.lec.spring.domain;

import java.util.List;

public interface BoardDAO {
	// 전체 게시글 선택
	public abstract List<BoardDTO> selectAll();
	
	// 게시글 한개 선택(게시글 상세보기)
	public abstract List<BoardDTO> selectOne(int uid);
	
	// 게시글 작성
	public abstract int insertBoard(BoardDTO dto);
	
	// 게시글 수정
	public abstract int updateBoard(BoardDTO dto);
	
	// 게시글 삭제
	public abstract int deleteBoard(int uid);
	
}

package com.lec.spring.domain;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class BoardDAOImpl implements BoardDAO {
	
	private BoardDAO mapper;
	
	@Autowired
	public BoardDAOImpl(SqlSession sqlSession) {
		mapper = sqlSession.getMapper(BoardDAO.class);
	}
	
	@Override
	public List<BoardDTO> selectAll() {
		return mapper.selectAll();
	}

	@Override
	public List<BoardDTO> selectOne(int uid) {
		return mapper.selectOne(uid);
	}

	@Override
	public int insertBoard(BoardDTO dto) {
		return mapper.insertBoard(dto);
	}

	@Override
	public int updateBoard(BoardDTO dto) {
		return mapper.updateBoard(dto);
	}

	@Override
	public int deleteBoard(int uid) {
		return mapper.deleteBoard(uid);
	}

}

 

DAO는 위와 같이 작성해주었습니다. 

select의 타입은 선택한 컬럼의 정보를 가져오기 위해 BoardDTO 으로 지정해주었고 List를 사용한 이유는 여러개의 값을 각각의 List에 담아주기 위해서입니다. 

ex) 게시글1번 제목 내용 작성자 <- 첫번째 정보

     게시글2번 제목 내용 작성자 <- 두번째 정보 ....

 

Insert, Update, Delete의 같은 경우 리턴값은 0 또는 1로 반환되는데 작성, 수정, 삭제 작업이 실패할 경우 0을 반환해줍니다

BoardService

package com.lec.spring.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.lec.spring.domain.BoardDAO;
import com.lec.spring.domain.BoardDTO;

@Service
public class BoardService {
	
	BoardDAO dao; // dao 호출
	
	@Autowired
	public void setDao(BoardDAO dao) {
		this.dao = dao;
	}
	
	// 전체선택
	public List<BoardDTO> selectAll(){
		return dao.selectAll();
	}
	
	// 게시글 하나 선택
	public List<BoardDTO> selectOne(int uid){
		return dao.selectOne(uid);
	}
	
	// 게시글 수정
	public int updateBoard(BoardDTO dto) {
		return dao.updateBoard(dto);
	}
	
	// 게시글 삭제
	public int deleteBoard(int uid) {
		return dao.deleteBoard(uid);
	}
	
	// 게시글 작성
	public int insertBoard(BoardDTO dto){
		return dao.insertBoard(dto);
	}
	
	
}

 

이전 포스트(목록만들기)에서 말씀 했듯이 dao를 호출하고 리턴값을 받습니다.

 

BoardController

package com.lec.spring.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.lec.spring.domain.BoardDTO;
import com.lec.spring.service.BoardService;

@Controller
@RequestMapping("/board")
public class BoardController {
	
	BoardService boardService;
	
	@Autowired
	public void setBoardService(BoardService boardService) {
		this.boardService = boardService;
	}
	
	// 전체 게시글 선택 
	@RequestMapping("/list")   // 게시글 목록 보기 맵핑
	public String list(Model model) {
		
		model.addAttribute("list", boardService.selectAll());
		
		return "list";
	}
	
	// 게시글 작성
	@RequestMapping("/write")
	public String write() {
		return "write";  // 게시글 작성 페이지 맵핑
	}
	
	// 게시글 작성 OK
	@PostMapping("/writeOk")
	public String writeOk(Model model, BoardDTO dto) {
		model.addAttribute("result", boardService.insertBoard(dto));   // 게시글 작성 완료. 실패할경우 0리턴
		
		return "writeOk";
	}
	
	// 게시글 하나 선택
	@RequestMapping("/info")
	public String info(int uid,Model model, BoardDTO dto) {
		model.addAttribute("dto", boardService.selectOne(uid)); // 게시글의 고유 uid 를 param으로 받아 결과값을 dto라는 변수로 사용 가능
		
		return "info";
	}
	
	@RequestMapping("/deleteOk")
	public String delete(int uid, Model model) {
		model.addAttribute("result", boardService.deleteBoard(uid)); // delete가 실패할경우 0을 리턴
		return "deleteOk";
	}
	
	@RequestMapping("/update")
	public String update(int uid, Model model) {
		model.addAttribute("dto", boardService.selectOne(uid)); // 게시글 상세보기와 같이 수정페이지도 같습니다.
        														//Service에 selectOne 메소드 호출
		return "update";
	}
	
	@RequestMapping("/updateOk")
	public String updateOk(Model model, BoardDTO dto) {
		model.addAttribute("result", boardService.updateBoard(dto)); // 수정이 실패할 경우 0을 리턴
		model.addAttribute("uid", dto.getUid()); // 수정된 게시글 uid를 받아 수정된 게시글 상세보기 페이지로 넘겨줌.
		return "updateOk";
	}
}

Controller 주석을 참고해주세요! 

 

updateOk와 writeOk, deleteOk 맵핑을 해주는 이유는 결과값을 result라는 변수로 사용이 가능한데 

실패할 경우 result 변수에 0이 담깁니다. 

거기에 대한 처리를 JSP에서 해주고 아래에서 설명해드리겠습니다. 

 

JSP

게시글 상세보기(info.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.*"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>글 내용</title>
</head>
<script>
function chkSubmit(uid){
	
	if(confirm("정말 삭제하시겠습니까?") == true){
		
		location.href='/board/deleteOk?uid=' + uid;
		
	}else{
		
		return;
	}
}
</script>
<style>
body{
	width:40%;
	margin:auto;
}
h1{
	margin-top:30%;
	text-align:center;
	padding-bottom:50px;
}
td{
	background-color:white;
	color:black;
}
</style>
<body>
<h1>글 내용!</h1>
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col" class="col-md-3">제목</th>
      <td class="col-md-9">${dto[0].title }</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">아이디</th>
      <td>${dto[0].userId }</td>
    </tr>
    <tr>
      <th scope="row">내용</th>
      <td>${dto[0].summary }</td>
    </tr>
  </tbody>
</table>
<div>
	<div style="margin:auto; display:flex; width:75%">
		<button onClick="location.href='/board/update?uid=${dto[0].uid }'" type="button" class="btn btn-secondary btn-lg btn-block" style=" margin-right:20px; margin-top:30px">수정하기</button>
		<button onClick="chkSubmit(${dto[0].uid})" type="submit" class="btn btn-secondary btn-lg btn-block" style="margin-top:30px">삭제하기</button>
		<button onClick="location.href='/board/list'" type="button" class="btn btn-secondary btn-lg btn-block" style="margin-left:20px; margin-top:30px">목록보기</button>
	</div>
</div>

</body>
</html>

상세보기에는 수정, 삭제, 목록 버튼을 구현해주었고 Confirm을 한번 해주는 기능도 구현한 코드입니다.

 

수정페이지(update.jsp), 수정완료(updateOk.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>글 작성</title>
</head>
<script>
function historyback(){
	history.back();
}
</script>
<style>
body{
	width:60%;
	margin:auto;
}
h1{
	margin-top:30%;
	text-align:center;
	padding-bottom:50px;
}
</style>
<body>
<h1>수정페이지 입니다!</h1>
<form name="frm" action="/board/updateOk" method="POST">
	<div class="input-group mb-3" id="title">
	  <div class="input-group-prepend">
	    <span class="input-group-text" id="basic-addon1" style="width:44px">I D</span>
	  </div>
	  <p style="margin-left:30px; padding-top:10px; font-size:1.0em;"><b>${dto[0].userId }</b></p>
	</div>
	<div class="input-group mb-3" id="title">
	  <div class="input-group-prepend">
	    <span class="input-group-text" id="basic-addon1">제목</span>
	  </div>
	  <p style="margin-left:30px; padding-top:10px; font-size:1.0em;"><b>${dto[0].title }</b></p>
	</div>
	<div class="input-group mb-3">
	   <div class="input-group-prepend">
	    <span class="input-group-text" id="basic-addon1">내용</span>
	  </div>
	   <textarea name="summary" class="form-control" aria-label="With textarea" placeholder="내용입력">${dto[0].summary }</textarea>
	</div>
	<input type="hidden" value="${dto[0].uid }" name="uid"/>
	<div style="text-align:center;">
		<button type="submit" style="width:10%; margin-top:30px">수정완료</button>
		<button onclick="historyback()"type="button" style="width:10%; margin-top:30px">뒤로가기</button>
	</div>
</form>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    
<c:choose>
	<c:when test="${result == 0 }">
		<script>
			alert("수정실패");
			history.back();
		</script>
	</c:when>
	<c:otherwise>
		<script>
			alert("게시글 수정완료");
			location.href="/board/info?uid=" + ${uid};
		</script>
	</c:otherwise>

</c:choose>

UpdateOk.jsp 를 보시면 수정이 안될경우 Controller 받은 result 리턴값이 0이 됩니다. 

result가 0일 경우 history.back(); 을 사용하여 이전에 페이지(수정페이지)로 돌아가게 해줍니다.

result가 0이 아닐경우 수정완료가 된걸 알수있고 게시글의 고유값을 get방식으로 넘겨주어 해당 게시글의 상세정보 보기 페이지로 넘어가게 됩니다.

작성, 삭제도 이와 비슷한 흐름으로 코드를 구현해주었습니다

 

작성페이지(write.jsp), 작성완료(writeOk.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>글 작성</title>
</head>
<script>
function chkSubmit(){
	frm = document.forms['frm'];
	
	var frm_userId = frm["userId"].value.trim()
	var frm_title = frm["title"].value.trim()
	
	if(frm_userId == ""){
		alert("아이디를 입력해주세요");
		frm["userId"].focus();
		return false;
	}
	if(frm_title == ""){
		alert("제목을 입력해주세요")
		frm["title"].focus();
		return false;
	}
	return true;
}
</script>
<style>
body{
	width:60%;
	margin:auto;
}
h1{
	margin-top:30%;
	text-align:center;
	padding-bottom:50px;
}
</style>
<body>
<h1>작성페이지 입니다!</h1>
<form name="frm" action="/board/writeOk" method="POST" onsubmit="return chkSubmit();">
	<div class="input-group mb-3" id="title">
	  <div class="input-group-prepend">
	    <span class="input-group-text" id="basic-addon1" style="width:44px">I D</span>
	  </div>
	  <input name="userId" type="text" class="form-control" placeholder="UserID" aria-label="Username" aria-describedby="basic-addon1">
	</div>
	<div class="input-group mb-3" id="title">
	  <div class="input-group-prepend">
	    <span class="input-group-text" id="basic-addon1">제목</span>
	  </div>
	  <input name="title" type="text" class="form-control" placeholder="Username" aria-label="title" aria-describedby="basic-addon1">
	</div>
	<div class="input-group mb-3">
	   <div class="input-group-prepend">
	    <span class="input-group-text" id="basic-addon1">내용</span>
	  </div>
	   <textarea name="summary" class="form-control" aria-label="With textarea" placeholder="내용입력"></textarea>
	</div>
	<div style="text-align:center;">
		<button type="submit" style="width:10%; margin-top:30px">작성완료</button>
		<button onclick="location.href='/board/list'"type="button" style="width:10%; margin-top:30px">목록보기</button>
	</div>
</form>

</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    
<c:choose>
	<c:when test="${result == 0 }">
		<script>
			alert("작성실패");
			history.back();
		</script>
	</c:when>
	<c:otherwise>
		<script>
			alert("작성성공!");
			location.href="/board/list";
		</script>
	</c:otherwise>

</c:choose>

게시글 작성에는 간단한 유효성검사를 해주었습니다.

 

삭제(deleteOk.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    
<c:choose>
	<c:when test="${result == 0 }">
		<script>
			alert("삭제실패");
			history.back();
		</script>
	</c:when>
	<c:otherwise>
		<script>
			alert("게시글이 삭제되었습니다");
			location.href="/board/list";
		</script>
	</c:otherwise>

</c:choose>

 

이상으로 게시글의 작성 수정 삭제를 마치겠습니다.

 

수정할 부분이 있다면 댓글로 알려주세요~