Spring - 5 (View - register, modify, get)

게시물 등록화면인 register.jsp를 만들어본다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../includes/header.jsp"%>

<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">글쓰기</h1>
	</div>
</div>
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel -default">
			<div class="panel-body">
				<form role="form" action="/board/register" method="post">
					<div class="form-group">
						<label>제목</label>
						<input class="form-control" name='title'>
					</div>
					<div class="form-group">
						<label>내용</label>
						<textarea class="form-control" rows="3"
						 name='content'>
						</textarea>
					</div>
					<div class="form-group">
						<label>작성자</label>
						<input class="form-control" name="writer">
					</div>
					<button type="submit" class="btn btn-default">
						전송
					</button>
					<button type="reset" class="btn btn-default">
						취소
					</button>
				</form>
			</div>
		</div>
	</div>
</div>

<%@ include file="../includes/footer.jsp"%>

이렇게 바로 실행하면

이러한 오류가 발생하는데, 주소를 입력하여 들어가는 GET방식으로 접속을 시도하는데  Controller에서

PostMapping으로만 만들어 놓았기때문에 해당 오류가 발생하는것이다.

때문에 GetMapping을 추가해주면 제대로 접속이된다.

 

BoardController에 추가

@GetMapping("/register")
	public void register() {
	// 이동할 주소를 리턴하지 않는다면, 요청한 이름으로의 jsp 파일을 찾음.
	}

기존 list에서 get페이지로 넘어갈 수 있도록 링크를 걸어준다. 제목부분에

<a href="/board/get?bno=${board.bno }"><c:out value="${board.title }" /></a>

위 처럼 a태그로 링크를 걸어준다.

주소를 해석하자면,

http://localhost:8091/board/get?bno=1292&writer=user&day=220415

// 콘트롤러에 board/get 주소로 접근 처리.(get 방식 처리)

// ?물음표 이후는 값의 전달. 예) 이름=값, bno=1292

// 값을 여러개 전달하려 하면, &로 연결함. 예)&writer=user

// url 에는 띄어쓰기 처리 불가.

 

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>
</div>
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading"></div>
			<div class="panel-body">
				<div class="form-group">
					게시물 번호<input class="form-control" name="bno"
						value='<c:out value="${board.bno }"/>' readonly="readonly">
				</div>
				<div class="form-group">
					제목<input class="form-control" name="title"
						value='<c:out
value="${board.title }"/>' readonly="readonly">
				</div>
				<div class="form-group">
					내용
					<textarea rows="3" class="form-control" name="content"
						readonly="readonly"><c:out value="${board.content }" /></textarea>
				</div>
				<div class="form-group">
					작성자<input class="form-control" name="writer"
						value='<c:out
value="${board.writer }"/>' readonly="readonly">
				</div>
				<button data-oper="modify" class="btn btn-warning">
					<a href="/board/modify?bno=${board.bno }"> 수정</a>
				</button>
				<button data-oper="list" class="btn btn-info">
					<a href="/board/list"> 목록</a>
				</button>
			</div>
		</div>
	</div>
</div>

readonly 속성을 주었기때문에 글을 수정할 수 없게 막아두었다.

 

 

다음은 modify.jsp 를 만들어준다.

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"%>
<!-- jstl core 쓸때 태그에 c 로 표시. -->
<%@ 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-body">
				<form role="form" id="modifyForm" action="/board/modify" method="post">
				<input type="hidden" name="bno" value="${board.bno }"/>
				<input type="hidden" name="pageNum" value="${cri.pageNum }"/>
				<input type="hidden" name="amount" value="${cri.amount }"/>
					<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 rows="3" class="form-control" name="content"><c:out value="${board.content }" /></textarea>
					</div>
					<div class="form-group">
						<label>작성자</label> <input class="form-control" name="writer"
							value='<c:out value="${board.writer }"/> '>
					</div>
					<button type="submit" data-oper='modify' class="btn btn-success">수정</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>
		</div>
	</div>
</div>
<%@ include file="../includes/footer.jsp"%>
</script>

하지만 register때와 마찬가지로 GetMapping을 만들어주지않았기 때문에 오류가발생한다.

BoardController에서 글읽기 GetMapping 부분에 modify를 추가해준다.

@GetMapping({"/get","/modify"})
	public void get(@RequestParam("bno") Long bno, Model model) {
		// @RequestParam : 요청 전달값으로 글번호 이용.
		log.info("/get");
		model.addAttribute("board", service.get(bno));
		// jsp에서 request.setAttribute 하던 것과 비슷.
		// 전달값으로 명시만 하면 스프링이 자동 처리.
		// 사용하는 부분만 추가 구현.
	}

창이 보이는것까지는 완성하였고, 이제 3개의 버튼 수정,삭제,목록에 대한 스크립트를 처리해준다.

 

<script>
	$(document).ready(function() {
		/* 문서가 준비 됐다면, 아래 함수 수행. */
		var formObj = $("form");/* 문서중 form 요소를 찾아서 변수에 할당. */
		$('button').on("click", function(e) {
			/* 버튼이 클릭된다면 아래 함수 수행, e라는 이벤트 객체를
			 전달하면서 */
			e.preventDefault();/* 기본 이벤트 동작 막기. */
			var operation = $(this).data("oper");
			/* 버튼에서 oper 속성 읽어서 변수에 할당. */
			console.log(operation);
			/* 브라우저 로그로 oper값 출력. */
			if (operation === 'remove') {
				formObj.attr("action", "/board/remove");
				/* form에 액션 속성을 변경. */
			} else if (operation === 'list') {
				self.location = "/board/list";
				return;
			}
			formObj.submit();
			/* 위의 조건이 아니라면 수정 처리. */
		});
	});
</script>

 

이제 각 페이지의 기능들을 실행해보자.

list

게시물 등록

게시물 읽기

수정

삭제

CRUD가 제대로 동작하는것을 볼 수 있다.

하지만 아직 수정과 삭제 후에 발생하는 창에 아무것도 쓰여져있지 않는것이 걸린다.