1. 게시물 작성
1.1 소스코드 작성하기
컨트롤러를 생성합니다. 다음과 같이 com.edu.springboot.MainController.java 파일에 코드를 추가합니다.
// 입력 1 : 작성 페이지 매핑
@GetMapping("/write.do")
public String boardWriteGet(Model model) {
return "write";
}
// 입력 2 : 사용자가 작성한 값으로 입력 처리
@PostMapping("/write.do")
public String boardWritePost(Model model, HttpServletRequest req) {
// request 내장객체를 통해 폼값을 받음
String name= req.getParameter("name");
String title= req.getParameter("title");
String content= req.getParameter("content");
// 서비스 인터페이스 호출
int result = dao.write(name, title, content);
System.out.println("글쓰기 결과 : " + result);
return "redirect:list.do";
}인터페이스를 생성합니다. 다음과 같이 com.edu.springboot.jdbc.IBoardService.java 파일에 코드를 추가합니다.
package com.edu.springboot.jdbc;
import java.util.ArrayList;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
/* Controller와 Mybatis Mapper 사이에서 매개역할을 하는 인터페이스로 @Mapper 어노테이션을 부착한다.
* 컨트롤러는 인터페이스의 추상메서드를 호출하고, 이를 통해 Mapper의 특정 엘리먼트가 호출되어 쿼리문이 실행되는 구조를 가지게 된다. */
@Mapper
public interface IBoardService {
// 목록 : 게시물의 개수를 카운트(커맨드 객체 사용)
public int getTotalCount(ParameterDTO parameterDTO);
// 목록 : 한 페이지에 출력할 게시물을 인출하여 반환(커맨드 객체 사용)
public ArrayList<BoardDTO> listPage(ParameterDTO parameterDTO);
/* 작성 : 폼 값을 받은 후 어노테이션으로 통해 이름을 변경하여 Mapper로 전달
* Mapper에서는 변경된 이름을 통해 인파라미터를 설정한다. */
public int write(@Param("_name") String name, @Param("_title") String title, @Param("_content") String content);
// 열람(커맨드 객체 사용)
public BoardDTO view(BoardDTO boardDTO);
// 수정(커맨드 객체 사용)
public int edit(BoardDTO boardDTO);
// 삭제
public int delete(String idx);
}매퍼를 생성합니다. 다음과 같이 resources/mapper/BoardDAO.xml 파일에 코드를 추가합니다.
<!-- 입력 : @Param 어노테이션으로 변경된 이름으로 인파라미터를 설정한다. -->
<insert id="write">
INSERT INTO myboard (idx, name, title, content) VALUES (seq_board_num.nextval, #{_name}, #{_title}, #{_content})
</insert>뷰를 생성합니다. 다음과 같이 webapp/WEB-INF/views/write.jsp 파일을 작성합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>게시판 작성(Mybatis)</h2>
<form name="writeFrm" method="post"
action="./write.do" onsubmit="return validateForm(this);">
<table border="1" width="90%">
<tr>
<td>작성자</td>
<td>
<input type="text" name="name" style="width:150px;" />
</td>
</tr>
<tr>
<td>제목</td>
<td>
<input type="text" name="title" style="width:90%;" />
</td>
</tr>
<tr>
<td>내용</td>
<td>
<textarea name="content" style="width:90%;height:100px;"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">작성 완료</button>
<button type="reset">RESET</button>
<button type="button" onclick="location.href='./list.do';">
목록 바로가기
</button>
</td>
</tr>
</table>
</form>
</body>
</html>1.2 실행하기
다음과 같이 실행됩니다.
'글쓰기' 버튼을 클릭하면 게시물을 작성할 수 있는 페이지로 이동합니다.
게시물을 입력한 후 '작성 완료' 버튼을 클릭하면 게시물이 등록된 후 게시판 목록 페이지로 이동합니다. 목록에서 게시물이 정상적으로 등록되었음을 확인할 수 있습니다.
게시판 작성 기능이 성공적으로 구현되었습니다.
2. 폼 입력값 검증
2.1 요구사항 확인하기
주어진 요구 사항은 다음과 같습니다.
- '작성완료' 버튼을 누르면 작성자와 제목 그리고 내용 필드가 비어 있는지 확인하는 자바스크립트 코드를 작성합니다.
- submit 이벤트가 발생할 때 validateForm() 함수가 호출되도록 이미 설정되어 있으므로, 이 함수를 정의하세요.
실행화면은 다음과 같습니다.
2.2 소스코드 작성하기
다음과 같이 webapp/WEB-INF/views/write.jsp 파일에 코드를 추가합니다.
<script>
// 자바스크립트에서 폼에 접근하기
// 방법1 = document.writeFrm.name;
// 방법2 = document.getElementById("name");
// 방법3 = document.querySelector("#name");
// DOM변수.type / name / value
function validateForm(form) {
if (form.name.value == '') {
alert("작성자를 입력하세요.");
form.name.focus();
return false;
}
if (form.title.value == '') {
alert("제목을 입력하세요.");
form.title.focus();
return false;
}
if (form.content.value == '') {
alert("내용을 입력하세요.");
form.content.focus();
return false;
}
return true;
}
</script>이제 폼 입력값을 검증할 수 있습니다.
