[B -2-15] 화면 처리 1

목록 화면 처리

 

JSTL 태그 라이브러리 준비

 

views/board

list.jsp

 

상단의 JSP 페이지 지시자 바로 밑에 JSTL 태그라이브러리를 준비한다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

---

모델 데이터 출력

 

views/board

list.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">
				<table class="table table-striped table-bordered table-hover">
					<tbody>
					<c:forEach items="${list }" var="board">
						<tr>
							<td>
								<font color="Gray">
									<c:out value="${board.bno}"/>&nbsp;/&nbsp;
									<c:out value="${board.writer}"/>&nbsp;/&nbsp;
									<fmt:formatDate value="${board.regdate}" pattern="yyyy-MM-dd"/>&nbsp;/&nbsp;
									<fmt:formatDate value="${board.updateDate}" pattern="yyyy-MM-dd"/>
								</font><br />
								<font size="3px">
									<a><c:out value="${board.title}"></c:out> </a>
								</font>
							</td>
						</tr>
					</c:forEach>
					</tbody>
				</table>
			</div>
			<!-- /.panel-body -->
		</div>
		<!-- /.panel -->
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>

기존의 정적 데이터를 데이터베이스로부터 가져온 모델 데이터로 대체한다.

 

---

게시판 목록 페이지 확인

 

목록 페이지

---

등록 입력 페이지 처리

 

src/main/java

com.spms.controller

@GetMapping("/register")
public void register()

 

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")
	public void get(@RequestParam("bno") Long bno, Model model) {
		log.info("/get");
		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";
	}
}

 

---

등록 입력 페이지

 

views/board

register.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 action="/board/register" role="form" method="post">
					<div class="form-group">
						<label>작성자</label>
						<input class="form-control" name="writer">
					</div>
					<div class="form-group">
						<label>제목</label>
						<input class="form-control" name="title">
					</div>
					<div class="form-group">
						<label>내용</label>
						<textarea class="form-control" rows="10" name="content"></textarea>
					</div>
					<button type="submit" class="btn btn-primary">등록</button>
					<a href="/board/list">
						<button type="button" class="btn btn-success">목록</button>
					</a>
				</form>
			</div>
			<!-- /.panel-body -->
		</div>
		<!-- /.panel -->
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>

 

목록 페이지(list.jsp)를 복사해서 등록 페이지(register.jsp)를 생성하고, 테이블 태그를 지우고, 등록 폼을 추가한다.

폼 태그안의 각각의 name 속성은 BoardVO 클래스의 변수와 일치해야 한다.

 

버튼은 등록과 목록으로 구성하고

등록 버튼은 폼 태그 내의 name 속성의 구성인자들로 구성된다.

목록 버튼은 버튼 타입은 버튼으로 처리하며, 목록화면으로 돌아가는 기능만 있으면 된다.

디자인은 본인의 취향에 맞게 수정해서 사용하면 된다.

---

등록 입력 페이지

 

등록 입력 페이지

게시판 등록 후 목록 페이지로 이동

http://localhost/board/register

엑세스해서 등록 처리까지 잘 되는지 확인한다.

등록 처리 후 리다이렉트하게 된다. 

리다이렉트를 처리하지 않으면, 새로고침을 통해 동일한 내용을 계속 서버에 등록할 수 있기때문에 도배문제가 발생하게 된다.

따라서 등록, 수정, 삭제 작업은 처리완료 후에 다시 동일한 내용을 전송할 수 없게 아예 브라우저의 URL을 이동하는 방식을 이용한다. 또한, 이에 따라 결과까지 알 수 있게 경고창이나 모달창을 통해 이러한 작업을 처리한다.