반응형
# Spring WEB MVC_03버전_05 게시판 웹 계층 구현(등록 및 조회)
## 게시물 등록
### BoardController
- 게시물 등록 기능 작업
- 한글깨짐 확인 -> web.xml에 필터 추가.
- @RequestMapping(value="/register.do", method=RequestMethod.POST) public String registerPOST(BoardVO board) { // 게시물 등록 service.register(board); return "redirect:/list.do"; // 등록 후 게시물 보기로 이동. }
### web.xml
- 한글깨짐 방지 기능 -> web.xml 필터 추가.
<!-- Character Encoding -->
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>## 게시판 조회
### boardList.jsp
- 게시물 제목 클릭 시 해당 게시물의 번호값 가져가도록 a 태그 추가.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#regBtn").click(()=>{
location.href="<c:url value='/register.do'/>";
});
});
</script>
</head>
<body>
<div class="container">
<h2>메인화면</h2>
<div class="panel panel-default">
<div class="panel-heading">Spring WEB MVC 게시판 만들기
<button id="regBtn" type="button" class="btn btn-xs pull-right btn-primary">게시물작성</button>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>게시물 번호</th>
<th>제목</th>
<th>조회수</th>
<th>등록자</th>
<th>등록일</th>
</tr>
</thead>
<tbody>
<c:forEach var="vo" items="${list}">
<tr>
<td>${vo.idx}</td>
<td><a href="<c:url value='/get.do?bno=${vo.idx}'/>">${vo.title}</a></td>
<td>${vo.count}</td>
<td>${vo.writer}</td>
<td><fmt:formatDate pattern="yyyy-MM-dd" value="${vo.indate}"/></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<div class="panel-footer">메인화면 JSP</div>
</div>
</div>
</body>
</html>### BoardController
@RequestMapping(value="/get.do")
public String get(@RequestParam("bno")int bno, Model model) {
BoardVO board = service.get(bno);
model.addAttribute("board", board);
return "get";
}### get.jsp 생성
- 부트스트랩 (https://www.w3schools.com/bootstrap/bootstrap_panels.asp) > BS Panels > Panel Heading 이용
- 부트스트랩 (https://www.w3schools.com/bootstrap/bootstrap_forms.asp) > BS Forms > Bootstrap Vertical Form 이용
- 게시물 상세보기 페이지, 수정, 삭제 가능하도록 버튼 추가.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Board Read</h2>
<div class="panel panel-default">
<div class="panel-heading">Board Read Page</div>
<div class="panel-body">
<div class="form-group">
<label>Bno</label>
<input type="text" class="form-control" name="idx" value="${board.idx}" readonly="readonly">
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" value="${board.title}" readonly="readonly">
</div>
<div class="form-group">
<label>Contents</label>
<textarea rows="3" class="form-control" name="contents" readonly="readonly">${board.contents}</textarea>
</div>
<div class="form-group">
<label>Writer</label>
<input type="text" class="form-control" name="writer" value="${board.writer}" readonly="readonly">
</div>
<button class="btn btn-default">Modify</button>
<button class="btn btn-info">List</button>
</div>
<div class="panel-footer">상세보기 JSP</div>
</div>
</div>
</body>
</html>
# Spring WEB MVC_03버전_06 게시판 웹 계층 구현(수정 페이지)
## get.jsp
- 리스트 버튼 클릭 시 리스트로 이동.
- 수정하기 버튼 클릭 시 수정하기 화면으로 이동.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(()=>{
$("#list").click(()=>{
location.href="<c:url value='/list.do'/>";
});
});
$(document).ready(()=>{
$("#modify").click(()=>{
// 게시물 번호 넘기는 방법1.
// var idx = $("#idx").val();
// location.href="<c:url value='/modify.do'/>?bno=" + idx;
// 게시물 번호 넘기는 방법2.
location.href="<c:url value='/modify.do'/>?bno=${board.idx}";
});
});
</script>
</head>
<body>
<div class="container">
<h2>Board Read</h2>
<div class="panel panel-default">
<div class="panel-heading">Board Read Page</div>
<div class="panel-body">
<div class="form-group">
<label>Bno</label>
<input type="text" class="form-control" name="idx" id="idx" value="${board.idx}" readonly="readonly">
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" value="${board.title}" readonly="readonly">
</div>
<div class="form-group">
<label>Contents</label>
<textarea rows="3" class="form-control" name="contents" readonly="readonly">${board.contents}</textarea>
</div>
<div class="form-group">
<label>Writer</label>
<input type="text" class="form-control" name="writer" value="${board.writer}" readonly="readonly">
</div>
<button class="btn btn-default" id="modify">Modify</button>
<button class="btn btn-info" id="list">List</button>
</div>
<div class="panel-footer">상세보기 JSP</div>
</div>
</div>
</body>
</html>## BoardController
- 수정하기 버튼 클릭 시 수정 화면으로 이동되도록 진행.
@RequestMapping(value="/modify.do", method=RequestMethod.POST)
public String modifyGET(@RequestParam("bno")int bno, Model model) {
BoardVO board = service.get(bno);
model.addAttribute("board", board);
return "modify";
}## modify.jsp 생성
- 리스트로 이동하는 기능만 추가.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(()=>{
$("#list").click(()=>{
location.href="<c:url value='/list.do'/>";
});
});
</script>
</head>
<body>
<div class="container">
<h2>Board Modify Page</h2>
<div class="panel panel-default">
<div class="panel-heading">Board Modify Page</div>
<div class="panel-body">
<form action="<c:url value='/modify.do'/>" method="post">
<div class="form-group">
<label>Bno</label>
<input type="text" class="form-control" name="idx" id="idx" value="${board.idx}" readonly="readonly">
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" id="title" value="${board.title}">
</div>
<div class="form-group">
<label>Text area</label>
<textarea rows="3" class="form-control" name="contents" >${board.contents}</textarea>
</div>
<div class="form-group">
<label>Writer</label>
<input type="text" class="form-control" name="writer" value="${board.writer}" readonly="readonly">
</div>
<button type="submit" class="btn btn-primary">Modify</button>
<button id="remove" type="button" class="btn btn-danger">Remove</button>
<button id="list" type="button" class="btn btn-info">List</button>
</form>
</div>
<div class="panel-footer">게시물 수정하기 JSP</div>
</div>
</div>
</body>
</html>
# Spring WEB MVC_03버전_07 게시판 웹 계층 구현(수정, 삭제 기능)
## 게시물 삭제 기능
### modify.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(()=>{
$("#list").click(()=>{
location.href="<c:url value='/list.do'/>";
});
});
$(document).ready(()=>{
$("#remove").click(()=>{
location.href="<c:url value='/remove.do'/>?bno=${board.idx}";
});
});
</script>
</head>
<body>
<div class="container">
<h2>Board Modify Page</h2>
<div class="panel panel-default">
<div class="panel-heading">Board Modify Page</div>
<div class="panel-body">
<form action="<c:url value='/modify.do'/>" method="post">
<div class="form-group">
<label>Bno</label>
<input type="text" class="form-control" name="idx" id="idx" value="${board.idx}" readonly="readonly">
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" id="title" value="${board.title}">
</div>
<div class="form-group">
<label>Text area</label>
<textarea rows="3" class="form-control" name="contents" >${board.contents}</textarea>
</div>
<div class="form-group">
<label>Writer</label>
<input type="text" class="form-control" name="writer" value="${board.writer}" readonly="readonly">
</div>
<button type="submit" class="btn btn-primary">Modify</button>
<button id="remove" type="button" class="btn btn-danger">Remove</button>
<button id="list" type="button" class="btn btn-info">List</button>
</form>
</div>
<div class="panel-footer">게시물 수정하기 JSP</div>
</div>
</div>
</body>
</html>### BoardController
- 게시물 삭제 기능
@RequestMapping(value="/remove.do")
public String remove(@RequestParam("bno")int bno) {
service.remove(bno);
return "redirect:/list.do";
}## 게시물 수정 기능
### BoardController
- 게시물 수정 기능
@RequestMapping(value="/modify.do", method=RequestMethod.POST)
public String modifyPOST(BoardVO board) {
service.modify(board);
return "redirect:/list.do";
}## 게시물 조회수 기능
### BoardMapper
package kr.inflearn.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import kr.inflearn.model.BoardVO;
// 영속 계층
@Mapper
public interface BoardMapper {
public List<BoardVO> getList(); // 게시물 리스트 가져오기
public void insert(BoardVO board); // 게시물 등록
public BoardVO read(int bno); // 게시물 상세보기
public int delete(int bno); // 게시물 삭제
public int update(BoardVO board); // 게시물 수정
public void count(int bno); // 조회수 증가
}### BoardMapper.xml
<update id="count" parameterType="Integer">
update tb_board set count = count + 1
where idx = #{idx}
</update>### BoardService
- 게시물 상세보기에 mode 추가
package kr.inflearn.service;
import java.util.List;
import kr.inflearn.model.BoardVO;
public interface BoardService {
public List<BoardVO> getList(); // 게시물 리스트 가져오기
public void register(BoardVO board); // 게시물 등록
public BoardVO get(int bno, String mode); // 게시물 상세보기
public int remove(int bno); // 게시물 삭제
public int modify(BoardVO board); // 게시물 수정
}### BoardController
- get에 mode 추가. 단순히 상세보기 시에는 mode가 "get", 수정버튼을 눌러 수정화면진입 시에는 "modify"
@RequestMapping(value="/get.do")
public String get(@RequestParam("bno")int bno, Model model) {
BoardVO board = service.get(bno, "get");
model.addAttribute("board", board);
return "get";
}
@RequestMapping(value="/modify.do", method=RequestMethod.GET)
public String modifyGET(@RequestParam("bno")int bno, Model model) {
BoardVO board = service.get(bno, "modify");
model.addAttribute("board", board);
return "modify";
}### BoardServiceImpl
- 상세보기 시에만 조회수 카운트 될 수 있도록 처리
@Override
public BoardVO get(int bno, String mode) {
if (mode.equals("get")) { // 상세보기 시에만 조회수 카운트
mapper.count(bno);
}
return mapper.read(bno);
}## 완성화면
1. 메인 (게시물 리스트 페이지)
- http://localhost:8081/board/list.do
2. 게시물 작성 페이지
- http://localhost:8081/board/register.do
3. 게시물 상세보기 페이지
- http://localhost:8081/board/get.do?bno=4
4. 게시물 수정 페이지
- http://localhost:8081/board/modify.do?bno=4
반응형