List > Create > Read > Update > Delete
1. Mapper 작성
<insert id="createBoard">
insert into board(
board_seq,
writer,
title,
content,
reg_date,
view_cnt
)
values (
(select nvl( max(board_seq), 0 ) + 1 from board),
#{writer},
#{title},
#{content},
sysdate,
0
)
</insert>글을 작성하는 것이니 수정 날짜(UPT_DATE)는 제외, BOARD_SEQ(PK)는 현재 SEQ중 가장 높은 숫자를 찾고 없으면 0을 대입시켜줍니다.(... max(board_seq, 0) ...) 그리고 가장 높은 숫자를 찾았다면 그 숫자에 +1을 시킨 후에 insert를 해줍니다.(.... nvl(max(board_seq), 0) +1 .... )
2. Dao, DaoImpl 작성
// Dao
// 이전 코드
void createBoard(Map<String, Object> param);
// DaoImpl
// 이전 코드
public void createBoard(Map<String, Object> param){
sqlSession.insert("BoardMapper.createBoard", param);
}이 때, param에 들어갈 것은 writer, title, content여야 한다. (seq는 자동처리, view_cnt는 0, reg_date는 sysdate로 현재 날짜와 시간을 넣을 수 있으니 필요가 없다.)
3. Service, ServiceImpl 작성
// Service
// 이전 코드
void createBoard(Map<String, Object> param);
// ServiceImpl
// 이전 코드
@Override
public void createBoard(Map<String, Object> param) {
boardDao.createBoard(param);
}
4. Controller 작성
// 이전 코드
@RequestMapping(value="/create", method = RequestMethod.GET)
public String create() {
return "create";
}
@RequestMapping(value="/create", method = RequestMethod.POST)
public String createPost(@RequestParam Map<String, Object> param) {
boardSer.createBoard(param);
return "redirect:/list";
}
5. create.jsp 생성
6. create.jsp 작성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="path" value="${ pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/resources/assets/css/style.css">
<title>Create Page</title>
</head>
<body>
<header>
<div class="container">
<h1>Create Page</h1>
</div>
</header>
<nav>
<div class='container'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</nav>
<main>
<div class='container'>
<form id='createForm'>
<table>
<tr>
<th>작성자</th>
<td><input type='text' id='writer' name='writer'></td>
</tr>
<tr>
<th>글 제목</th>
<td><input type='text' id='title' name='title'></td>
</tr>
<tr>
<th rowspan="2">글 내용</th>
<td rowspan="2"><textarea id='content' name='content'></textarea></td>
</tr>
</table>
<button id='createBtn'>글쓰기</button>
<button onclick='goToPreviousPage(event)'>이전</button>
</form>
</div>
</main>
</body>
</html><form> 태그의 기능은 JQuery로 작성하여 보안에 조금이라도 보탬이 되도록 합니다.
7. JQuery 작성
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(function(){
$('#createBtn').on('click',function(event){
event.preventDefault();
var chkWriter = $('#writer').val();
var chkTitle = $('#title').val();
if(chkTitle == '' || chkWriter == ''){
alert('작성하지 않은 내용이 있습니다.');
} else {
$('#createForm').attr({
'action' : '/create',
'method' : 'post'
}).submit();
}
});
})
function goToPreviousPage(event) {
event.preventDefault();
window.history.back();
}
</script>
writer와 title은 NULL값이 들어가면 안 되니까 비었는지 값이 들어갔는지를 체크해 주도록 합니다. 그를 위해서 event.preventDefault(); 로 <button> 태그가 type='submit'이 있어서 <form>태그를 제출하는 것을 막아주고 writer, title 둘 중 하나라도 값이 없으면 alert를 띄워주도록 합니다.
그리고 function goToPreviousPage()을 이용해서 역시나 똑같이 <form> 태그를 제출하는 것을 막아주고 이전 페이지로 이동하도록 해줍니다.
8. listPage에 글쓰기 버튼 구현
<!-- 이전 코드 -->
<main>
<div class='container'>
<button onclick='createBoardBtn(event)'>글쓰기</button>
<table>
<!-- 이전 코드 -->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
function createBoardBtn(event){
event.preventDefault();
window.location.href = '/create';
}
</script>
<!-- 이전 코드 -->
9. 결과
후기
아직까지는 기초인 부분이라 크게 어렵지는 않았습니다. 다만 여전히 자잘한 실수를 했는데, 다음과 같았습니다.
<button onclick='functionName()'> 이와 같이 작성하면 event.preventDefault();가 작동하지 않아서 <form> 태그 안에 있던 이전 버튼이 URL이 form 태그가 제출된 URL로 바뀌고 이전 페이지로 이동하는 기능이 제대로 작동하지 않았다. 괄호 안에 event를 넣으면 해결되는 간단한 문제였습니다.
다음에는 이런 실수를 하지 않도록 코딩 할 때 신경을 제대로 쓸 것이며, 코딩을 했으면 확인하는 과정을 반드시 가져야 함을 깨달았습니다.
이로써 Create 까지 완료했습니다. 앞으로도 화이팅!
다음에 봬요 ❤️
'Spring > CRUD Project' 카테고리의 다른 글
| [CRUD] Delete : 글 삭제하기 (1) | 2023.11.27 |
|---|---|
| [CRUD] Update : 글 수정하기 (1) | 2023.11.24 |
| [CRUD] Read : 글 읽기 (1) | 2023.11.23 |
| [CRUD] List : 목록 출력 (2) | 2023.11.21 |
| [CRUD] 개요 & 준비 (1) | 2023.11.20 |