지금부터는 게시판에 게시물을 등록, 조회, 수정, 삭제할 수 있게 개발하도록 하겠습니다.
일반적으로 개발에서는 게시물을 등록, 조회, 수정, 삭제하는 것을 CRUD라고 합니다.
CRUD는 Create(생성/등록/추가), Read(읽기/조회), Update(변경/수정), Delete(삭제/제거)의 첫 문자를 따서 만든 용어입니다. 또는 Add(추가), Browse(보기), Change(변경), Delete(삭제)의 첫 문자를 따서 ABCD라고도 합니다.
이번에는 CRUD의 C(Create)로 게시물을 등록하는 UI와 INSERT Query, DAO, Service, Controller를 생성하도록 하겠습니다.
Maven Spring Project의 main.jsp에 등록 버튼 추가하기
1. /src/main/webapp/WEB-INF/views/main/main.jsp 파일을 오픈하여 <form:form> 태그 위에 등록 버튼 영역을 추가합니다.
<div class="buttons">
<div class="right">
<button id="addBtn" class="button blue">등록</button>
</div>
</div>
2. <style> 태그에 등록 버튼 영역에 대한 CSS를 추가합니다.
.buttons { position:relative; height:32px; margin-top:20px; }
.buttons > div.right { position:absolute; height:32px; right:0; }
.buttons > div > .button { overflow:visible; cursor:pointer; min-width:125px; height:32px; margin:0 2px; padding:0 15px; line-height:32px; font-size:14px; border:1px solid #dfdfdf; background:#fff; border-radius:10px; }
.buttons > div > .button.blue { color:#fff; border-color:#0099d2 !important; background:#0099d2 !important; }
3. <script> 태그에 등록 버튼에 대한 클릭 이벤트를 추가합니다.
$('#addBtn').click(function() {
$(location).attr("href", "/board/addform.do");
});
Maven Spring Project를 실행하여 웹 브라우저로 확인하기
1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.
2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하면 페이지 오른쪽 상단에 등록 버튼이 나타나는 것을 확인할 수 있습니다. (페이지 크기를 10에서 5로 변경하였습니다.)
Maven Spring Project에 Board Controller 추가하기
1. Java Resource > src/main/java에 com.home.study.test1.board.controller 패키지를 생성합니다.
- test1 패키지에 board 패키지 생성 → board 패키지에 controller 패키지 생성
2. com.home.study.test1.board.controller 패키지에 BoardController 클래스를 생성합니다. (BoardController.java 파일)
- 생성된 BoardController 클래스가 Spring Framework Web MVC의 Controller로 처리되게 하기 위해서 클래스 위에 @Controller Annotation(어노테이션)을 추가합니다.
- "/board"로 시작하는 모든 요청을 처리할 수 있게 BoardController 클래스 위에 @RequestMapping Annotation(어노테이션)을 추가합니다.
- 요청 URL이 왔을 때 실행될 addBoardForm 메서드를 생성합니다. 파라미터로 HTTP 요청을 처리할 수 있는 HttpServletRequest request와 HTTP 응답을 처리할 수 있는 HttpServletResponse response, 게시물 정보를 받아 처리할 수 있게 @ModelAttribute Annotation(어노테이션)이 적용된 Board board, 웹 페이지로 정보를 전달할 수 있는 ModelMap model을 추가합니다.
- GET 방식으로 요청 URL이 "/addform.do"가 왔을 때 addBoardForm 메서드가 실행될 수 있게 메서드 위에 @RequestMapping Annotation(어노테이션)을 추가합니다. (@RequestMapping Annotation(어노테이션)에는 요청 URL에서 ".do"를 제외한 경로를 입력합니다.)
- addBoardForm 메서드의 리턴 값으로 "board/boardform"를 입력합니다.
package com.home.study.test1.board.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import com.home.study.test1.board.model.Board;
@Controller
@RequestMapping("/board")
public class BoardController {
@RequestMapping(value="/addform", method=RequestMethod.GET)
public String addBoardForm(HttpServletRequest request, HttpServletResponse response,
@ModelAttribute("board") Board board, ModelMap model) {
return "board/boardform";
}
}
Maven Spring Project의 SiteMesh에 게시판 데코레이터 추가하기
1. WEB-INF/config 폴더에서 sitemesh.xml 파일을 오픈하고 게시판 페이지 만을 위해 "/board/*.do"로 데코레이터를 추가합니다. 우선 기존 mainDecorator를 설정하고 향후에 게시판 전용 데코레이터로 변경하겠습니다.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration>
<sitemesh>
<!-- 기본 페이지 -->
<mapping decorator="/WEB-INF/views/decorators/default/defaultDecorator.jsp"/>
<!-- 메인 페이지 -->
<mapping path="/index.do" decorator="/WEB-INF/views/decorators/default/mainDecorator.jsp"/>
<!-- 게시판 페이지 -->
<mapping path="/board/*.do" decorator="/WEB-INF/views/decorators/default/mainDecorator.jsp"/>
<!-- sitemesh 예외 -->
<mapping path="/api/*" exclude="true"/>
<mapping path="/*.html" exclude="true"/>
<mapping path="/*.htm" exclude="true"/>
<mapping path="/*.js" exclude="true"/>
<mapping path="/*.css" exclude="true"/>
</sitemesh>
Maven Spring Project에 Board Form JSP 추가하기
1. WEB-INF 폴더에 views 폴더를 생성하고 생성된 views 폴더에 board 폴더를 생성합니다.
2. board 폴더에 boardform.jsp 파일을 생성합니다.
- Form Tag Library를 사용하여 게시물을 등록할 수 있는 입력 폼을 생성합니다.
- BoardController 클래스의 addBoardForm 메서드에서 @ModelAttribute Annotation(어노테이션)으로 Board 객체를 받기 때문에 <form:form> 태그의 modelAttribute 속성에 board 객체를 지정합니다.
- 게시물의 작성자 아이디, 제목, 내용을 받기 위해 <form:input> 태그의 path 속성에 board 객체의 registrationId(작성자 아이디), subject(제목) 변수를 지정하고 <form:textarea> 태그의 path 속성에 board 객체의 content(내용) 변수를 지정합니다. (아직 로그인 처리가 없기 때문에 registrationId(작성자 아이디)를 직접 입력하게 하였습니다. 로그인 처리는 향후에 처리하겠습니다.)
<%@ 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://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<style type="text/css">
.board { width:800px; margin: 20px auto; }
.board table { width:100%; border-top:2px solid #1d4281; border-spacing:0; }
.board table th { padding:8px 10px 10px 10px; vertical-align:middle; color:#1d4281; font-size:14px; border-bottom:1px solid #ccc; background:#f8f8f8; }
.board table td { padding:7px 20px 9px 20px; text-align:left; vertical-align:middle; border-bottom:1px solid #ccc; font-size:14px; line-heighT:150%; }
.board table td input[type="text"], .board table td textarea { width:100%; color:#000 !important; }
.buttons { position:relative; height:32px; margin-top:20px; }
.buttons > div.right { position:absolute; height:32px; right:0; }
.buttons > div > .button { overflow:visible; cursor:pointer; min-width:125px; height:32px; margin:0 2px; padding:0 15px; line-height:32px; font-size:14px; border:1px solid #dfdfdf; background:#fff; border-radius:10px; }
.buttons > div > .button.blue { color:#fff; border-color:#0099d2 !important; background:#0099d2 !important; }
</style>
</head>
<body>
<div class="board">
<form:form modelAttribute="board" autocomplete="off">
<table>
<colgroup>
<col style="width:18.5%">
<col style="width:auto">
</colgroup>
<tbody>
<tr>
<th scope="row">작성자</th>
<td><form:input path="registrationId" placeholder="아이디를 입력하세요." /></td>
</tr>
<tr>
<th scope="row">제목</th>
<td><form:input path="subject" placeholder="제목을 입력하세요." /></td>
</tr>
<tr>
<th scope="row">내용</th>
<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10"/></td>
</tr>
</tbody>
</table>
</form:form>
<div class="buttons">
<div class="right">
<button id="saveBtn" class="button blue">등록</button>
<button id="cancelBtn" class="button">취소</button>
</div>
</div>
</div>
</body>
</html>
Maven Spring Project를 실행하여 웹 브라우저로 확인하기
1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.
2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 등록 버튼을 클릭하면 게시물 입력 폼(/board/addform.do)으로 이동됩니다.
게시물 입력 폼(/board/addform.do)에서 등록 버튼을 클릭하여 폼(form)을 전송(Submit) 하기 전에 <script>에서 입력 요소들에 대해 값이 유효한지 검사하거나 전송된 후에 controller에서 입력 요소들에 대해 값이 유효한지 검사하여 사용자에게 필수 입력이나 잘 못된 입력에 대해 알려주서 재입력하게 해야 합니다. 이런 유효성검사를 Validation(밸리데이션)이라고 합니다.
Validation을 어느 시점에서 처리하느냐에 따라 Client-Side Validation과 Server-Side Validation로 구분됩니다.
- Client-Side Validation은 폼(form)을 전송(Submit) 하기 전에 <script>에서 폼(form) 안에 있는 입력 요소들에 대해 값이 유효한지 검사하고 유효하지 않으면 사용자에게 알려줍니다.
- Server-Side Validation은 controller에서 전송된 데이터에 대해 값이 유효한지 검사하고 유효하지 않으면 내부 process(프로세스)를 중지하고 Client(웹 페이지)로 에러메시지를 전송하여 사용자에게 알려줍니다.
Maven Spring Project의 Board Form JSP에 Client-Side Validation 추가하기
1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하여 등록 버튼과 취소 버튼에 대한 클릭 이벤트를 추가합니다.
- 게시물은 작성자 아이디와 제목은 필수 입력값이 때문에 입력 값이 공백이 아니어야 합니다. 그래서 등록 버튼이 클릭되면 작성자 아이디와 제목의 입력 값을 확인하고 공백이면 alert으로 메시지를 알려주고 사용자가 입력할 수 있게 포커스를 이동시킵니다.
- 입력 값이 모두 유효하다면 "/board/addboard.do"로 폼(form)을 전송(Submit) 합니다.
- 취소 버튼이 클릭되면 history.back()이나 history.go(-1)를 이전 페이지로 이동시킵니다.
$(function() {
$('#saveBtn').click(function() {
var registrationId = $('#registrationId').val();
if (registrationId == null || registrationId == "") {
alert("아이디를 입력하세요.");
$("#registrationId").focus();
return;
}
var subject = $('#subject').val();
if (subject == null || subject == "") {
alert("제목을 입력하세요.");
$("#subject").focus();
return;
}
$('#board').attr("action", "/board/addboard.do");
$('#board').submit();
});
$('#cancelBtn').click(function() {
window.history.go(-1);
});
});
Maven Spring Project의 Board Mapper XML에 Insert Query 추가하기
1. com.home.study.test1.sqlmapl.mappers.mariadb.board 패키지에 있는 BoardMapper.xml 파일을 오픈합니다.
2. INT_BOARD_TB(게시판) Table에 데이터(게시물)를 등록(insert) 하기 위해서 <insert>으로 쿼리문을 생성합니다.
- <insert>의 id 속성은 insert를 구분하는 식별자로 중복되지 않는 이름으로 입력합니다. id 속성은 DAO에서 구문을 찾을 때 사용됩니다.
- <insert>안에는 INSERT구문을 사용하여 데이터베이스에서 데이터를 등록하게 합니다.
- <insert>의 parameterType 속성은 전송된 데이터를 받을 Model(모델) 명을 입력합니다.
- useGeneratedKeys 속성을 true로 하여 keyProperty 속성 값에 지정된 sequence(게시판 시퀀스)가 자동으로 생성되게 합니다.
<!--
게시물을 등록합니다.
-->
<insert id="insertBoardItem" useGeneratedKeys="true" keyProperty="sequence" parameterType="Board">
INSERT INTO INT_BOARD_TB
(
BRD_SUBJECT,
BRD_CONTENT,
REG_ID
)
VALUES
(
#{subject},
#{content},
#{registrationId}
)
</insert>
Maven Spring Project의 DAO - Board Interface에 insert 메서드 추가하기
1. Java Resource > src/main/java에서 com.home.study.test1.board.dao 패키지에 있는 IBoardDao Interface(인터페이스)를 오픈합니다. (IBoardDao.java)
2. INT_BOARD_TB(게시판) Table에 데이터(게시물)를 등록(insert) 하기 위해 insertBoardItem 메서드를 선언합니다.
package com.home.study.test1.board.dao;
import java.util.List;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;
public interface IBoardDao {
int selectBoardListCount(BoardSearch boardSearch);
List<Board> selectBoardList(BoardSearch boardSearch);
int insertBoardItem(Board board);
}
Maven Spring Project의 Dao - Board Implement에 insert 메서드 구현 추가하기
1. Java Resource > src/main/java에서 com.home.study.test1.board.dao.impl 패키지에 있는 BoardDaoImpl 클래스를 오픈합니다. (BoardDaoImpl.java)
2. BoardDaoImpl 클래스에서 IBoardDao Interface(인터페이스)의 insertBoardItem 메서드를 구현합니다.
int org.apache.ibatis.session.SqlSession.insert(String statement, Object parameter)SqlSession의 insert 메서드의 첫 번째 파라미터인 statement는 실행 구문의 고유 식별자로 문자열 변수(SQL_FILE_PATH)와 의 id 속성 값을 결합한 값입니다. 두 번째 파라미터인 parameter는 실행 구문에 전달할 객체로 board 변수를 입력합니다.
SqlSession의 insert 메서드는 리턴 값으로 등록된 ROW의 수가 int로 리턴됩니다.
package com.home.study.test1.board.dao.impl;
import java.util.List;
import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Repository;
import com.home.study.test1.board.dao.IBoardDao;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;
@Repository("BoardDaoImpl")
public class BoardDaoImpl implements IBoardDao {
protected static final String SQL_FILE_PATH = "com.home.study.test1.board.mapper.mariadb.BoardMapper.";
@Autowired
@Qualifier("sqlSessionMariaDB")
private SqlSession sqlSession;
@Override
public int selectBoardListCount(BoardSearch boardSearch) {
return ((Integer)sqlSession.selectOne(SQL_FILE_PATH + "selectBoardListCount", boardSearch)).intValue();
}
@Override
public List<Board> selectBoardList(BoardSearch boardSearch) {
return sqlSession.selectList(SQL_FILE_PATH + "selectBoardList", boardSearch);
}
@Override
public int insertBoardItem(Board board) {
return sqlSession.insert(SQL_FILE_PATH + "insertBoardItem", board);
}
}
Maven Spring Project의 Service - Board Interface에 insert 메서드 추가하기
1. Java Resource > src/main/java에서 com.home.study.test1.board.service 패키지에 있는 IBoardService Interface(인터페이스)를 오픈합니다. (IBoardService.java)
2. DAO (Board Interface, Implement)을 사용하여 INT_BOARD_TB(게시판) Table에 데이터(게시물)를 등록(insert) 하기 위해 insertBoardItem 메서드를 선언합니다.
package com.home.study.test1.board.service;
import java.util.List;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;
public interface IBoardService {
List<Board> selectBoardList(BoardSearch boardSearch);
boolean insertBoardItem(Board board);
}
Maven Spring Project의 Service - Board Implement에 insert 메서드 구현 추가하기
1. Java Resource > src/main/java에서 com.home.study.test1.board.service.impl 패키지에 있는 BoardServiceImpl 클래스를 오픈합니다. (BoardServiceImpl.java)
2. BoardServiceImpl 클래스에서 IBoardService Interface(인터페이스)의 insertBoardItem 메서드를 구현합니다.
- 이클립스에서는 마우스를 BoardServiceImpl 클래스 위로 이동합니다. 콘텍스트 메뉴에서 "Add unimplemented methods"(구현되지 않은 메서드 추가)를 클릭하면 자동으로 메서드를 생성해 줍니다.
- insertBoardItem 메서드에서 boardDao의 insertBoardItem 메서드를 사용하여 데이터(게시물)를 등록시키고 등록된 결과가 1이면 true로 리턴하게 합니다.
package com.home.study.test1.board.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.home.study.common.search.Pagination;
import com.home.study.test1.board.dao.IBoardDao;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;
import com.home.study.test1.board.service.IBoardService;
@Service
public class BoardServiceImpl implements IBoardService {
@Autowired
IBoardDao boardDao;
@Override
public List<Board> selectBoardList(BoardSearch boardSearch) {
if (boardSearch.getPagination() == null) {
boardSearch.setPagination(new Pagination());
}
int count = boardDao.selectBoardListCount(boardSearch);
boardSearch.getPagination().setRecordTotalCount(count);
List<Board> boardList = null;
if (count > 0) {
boardSearch.getPagination().processZero();
boardList = boardDao.selectBoardList(boardSearch);
}
return boardList;
}
@Override
public boolean insertBoardItem(Board board) {
return (boardDao.insertBoardItem(board) == 1) ? true : false;
}
}
Maven Spring Project의 Board Controller에 addBoard 추가하기
1. Java Resource > src/main/java에서 com.home.study.test1.board.controller 패키지에 있는 BoardController 클래스를 오픈합니다. (BoardController.java)
2. IBoardService Interface(인터페이스)를 선언하고 의존성 주입(Dependency Injection)을 위해서 @Autowired Annotation(어노테이션)를 변수 위에 붙여줍니다.
3. boardService의 insertBoardItem 메서드를 사용하여 데이터(게시물)를 등록하기 위해 addBoard 메서드를 생성합니다. 파라미터로 HTTP 요청을 처리할 수 있는 HttpServletRequest request와 HTTP 응답을 처리할 수 있는 HttpServletResponse response, 게시물 정보를 받아 처리할 수 있게 @ModelAttribute Annotation(어노테이션)이 적용된 Board board, 웹 페이지로 정보를 전달할 수 있는 ModelMap model을 추가합니다. 등록되면 redirect로 index.do로 이동시키고 등록되지 않으면 다시 입력 폼(/board/boardform.do)으로 이동시킵니다.
4. POST 방식으로 요청 URL이 "/board/addboard.do"가 왔을 때 addBoard 메서드가 실행될 수 있게 메서드 위에 @RequestMapping Annotation(어노테이션)을 추가합니다.
package com.home.study.test1.board.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.service.IBoardService;
@Controller
@RequestMapping("/board")
public class BoardController {
@Autowired
IBoardService boardService;
@RequestMapping(value="/addform", method=RequestMethod.GET)
public String addBoardForm(HttpServletRequest request, HttpServletResponse response,
@ModelAttribute("board") Board board, ModelMap model) {
return "board/boardform";
}
@RequestMapping(value="/addboard", method=RequestMethod.POST)
public String addBoard(HttpServletRequest request, HttpServletResponse response,
@ModelAttribute("board") Board board, ModelMap model) {
if (!boardService.insertBoardItem(board)) {
return "board/boardform";
}
return "redirect:/index.do";
}
}
Maven Spring Project를 실행하여 웹 브라우저로 확인하기
1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.
2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 등록 버튼을 클릭하면 게시물 입력 폼(/board/addform.do)으로 이동됩니다.
3. 입력 폼에 작성자는 "testid3", 제목은 "테스트 제목 11", 내용은 "테스트 내용 11"로 입력하고 등록 버튼을 클릭합니다.
그럼 정상적으로 등록되고 리스트 페이지인 "index.do"로 이동됩니다.
지금까지 일반적인 Client-Side Validation으로 입력 요소들의 값을 유효성 검사하고 등록 처리하였습니다.
이어서, Client-Side Validation인 JavaScript Validation API에 대해 알아보겠습니다.