[B -2-18] 화면 처리 4

수정 페이지 이동

 

src/main/java

com.spms.controller

BoardController.java

 

package com.spms.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.spms.domain.BoardVO;
import com.spms.service.BoardService;

import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@Log4j
@RequestMapping("/board/*")
@AllArgsConstructor
public class BoardController {

	private BoardService boardService;

	@GetMapping("/list")
	public void list(Model model) {
		log.info("list");
		boardService.getList().forEach(board -> log.info(board));
		model.addAttribute("list", boardService.getList());
	}

	@GetMapping("/register")
	public void register() {
		
	}
	
	@PostMapping("/register")
	public String register(BoardVO board, RedirectAttributes rttr) {

		log.info("register : " + board);
		boardService.register(board);
		rttr.addFlashAttribute("result", board.getBno());
		return "redirect:/board/list";
	}

	@GetMapping({"/get", "/modify"})
	public void get(@RequestParam("bno") Long bno, Model model) {
		log.info("/get or modify");
		model.addAttribute("board", boardService.get(bno));
	}

	@PostMapping("/modify")
	public String modify(BoardVO board, RedirectAttributes rttr) {
		log.info("modify:" + board);

		if (boardService.modify(board)) {
			rttr.addFlashAttribute("result", "success");
		}
		return "redirect:/board/list";
	}

	@PostMapping("/remove")
	public String remove(@RequestParam("bno") Long bno, RedirectAttributes rttr) {
		log.info("remove..." + bno);
		if (boardService.remove(bno)) {
			rttr.addFlashAttribute("result", "success");
		}
		return "redirect:/board/list";
	}

}

 

기존의 get() 메서드를 수정해서 수정 페이지로의 이동도 할 수 있게 한다.

@GetMapping 이나 @PostMapping 등에는 URL을 배열로 처리할 수 있으므로, 하나의 메서드로도 여러 URL을 처리가능하다.

---

수정 페이지 작성

 

views/board

modify.jsp (get.jsp 를 가지고 활용)

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ include file="../includes/header.jsp"%>
<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">게시판 수정</h1>
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">게시글 수정 페이지</div>
			
			<!-- /.panel-heading -->
			<div class="panel-body">
				<form role="form" action="/board/modify" method="post">
					<div class="form-group">
						<label>글 번호</label>
						<input class="form-control" name="bno" value='<c:out value="${board.bno }"/>' readonly="readonly">
					</div>
					
					<div class="form-group">
					  <label>등록일자</label>
					  <input class="form-control" name='regDate'
					    value='<fmt:formatDate pattern = "yyyy/MM/dd" value = "${board.regdate}" />'  readonly="readonly">            
					</div>
					
					<div class="form-group">
					  <label>수정일자</label> 
					  <input class="form-control" name='updateDate'
					    value='<fmt:formatDate pattern = "yyyy/MM/dd" value = "${board.updateDate}" />'  readonly="readonly">            
					</div>
					
					<div class="form-group">
						<label>작성자</label>
						<input class="form-control" name="writer" value='<c:out value="${board.writer }"/>' readonly="readonly">
					</div>
					<div class="form-group">
						<label>제목</label>
						<input class="form-control" name="title" value='<c:out value="${board.title }"/>'>
					</div>
					<div class="form-group">
						<label>내용</label>
						<textarea class="form-control" rows="10" name="content"><c:out value="${board.content}"/></textarea>
					</div>
						<button type="submit" data-oper='modify' class="btn btn-default">수정</button>
						<button type="submit" data-oper='remove' class="btn btn-danger">삭제</button>
						<button type="submit" data-oper='list' class="btn btn-info">목록</button>
				</form>
			</div>
			<!-- /.panel-body -->
		</div>
		<!-- /.panel -->
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>

<script type="text/javascript">
$(document).ready(function() {

	  var formObj = $("form");

	  $('button').on("click", function(e){
	    
	    e.preventDefault(); 
	    
	    var operation = $(this).data("oper");
	    
	    console.log(operation);
	    
	    if(operation === 'remove'){
	      formObj.attr("action", "/board/remove");
	      
	    }else if(operation === 'list'){
	      //move to list
	      formObj.attr("action", "/board/list").attr("method","get");
	    }
	    formObj.submit();
	  });

});
</script>


<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>

 

게시글의 '제목', '내용' 은 수정이 가능한 형태로 사용해서 사용자가 편집할 수 있게 한다.

수정 가능한 '제목' 이나 '내용' 이 readonly 속성없도록 작성한다.

 

POST 방식으로 처리하는 부분을 위해서 폼 태그로 내용들을 감싼다.

 

폼 태그는 기본적으로 '/board/modify' 로 지정했지만, 삭제를 하면 '/board/remove' 와 같이 액션 속성의 내용을 수정해서 사용하게 된다.

 

등록일과 수정일은 나중에 BoardVO로 수집되어야 하므로 날짜 포멧을 'yyyy/mm/dd' 의 포멧으로 해야한다.

(*) 만약 포멧이 안맞으면, 파라미터 수집 부분에 문제가 생기므로 주의가 필요하다.

 

수정, 삭제, 목록 버튼을 추가한다.

 

추가된 버튼의 액션은 자바스크립트로 제어할 것이므로, 자바스크립트를 추가한다.

버튼 태그의 'data-oper' 속성을 이용해서 세부 기능을 동작하도록 처리한다.

 

폼 태그의 모든 버튼은 기본적으로 submit 으로 처리하기때문에 e.preventDefault() 로 기본 동작을 막고, 마지막에 직접 submit() 을 수행한다.

 

---

게시물 수정 및 삭제 기능 확인

 

게시글 수정 페이지