Spring 소규모 게시판 - 4. 글 작성

2023. 10. 13. 08:24

위로 아래

글쓰기 HTML

글쓰기 페이지의 경우, 답글쓰기 페이지와 똑같은 view를 가지기 때문에, 한 페이지에서 두 가지 기능이 모두 작동하도록 작성한다.

이미 bno가 존재하는지를 통해 답글인지 아닌지 유무를 판단할 수 있다.

<form> 태그를 통해 파라미터를 action으로 전송할 예정이기에,

직접적으로 사용하지 않는 변수들은 hidden으로 설정하여 <form>의 맨 밑 부분에 넣어주었다.

<%@ 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="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기 폼</title>
<link rel="stylesheet" href="css/form.css" type="text/css">
<script src="jquery/jquery-3.7.0.min.js"></script>
<script src="js/form.js"></script>
</head>
<body>
<form name="form1" action="writeAction" method="post">
<table>
	<tr><td colspan="2"><h3>게시글 쓰기</h3></td></tr>
	<tr>
		<th>제목</th>
		<td>
			<c:choose>
				<c:when test = "${article.bno > 0}">
					<input type="text" name="subject" title="제목" value="[답글] ">
				</c:when>
				<c:when test = "${article.bno == 0}">
					<input type="text" name="subject" title="제목" value="">
				</c:when>
			</c:choose>
		</td>
	</tr>
	<tr>
		<th>작성자</th>
	<td><input type="text" name="writer" class="chk" title="작성자"></td>
	</tr>
	<tr>
		<th>글 내용</th>
		<td><textarea name="content" class="chk" title="글내용"></textarea></td>
	</tr>
	<tr>
		<th>비밀번호</th>
		<td><input type="password" name="passwd" class="chk" title="비밀번호"></td>
	</tr>
	<tr>
		<td colspan="2">
			<input class="btn" type="button" value="글 저장" id="submit11">
			<input class="btn" type="button" value="글 목록" onclick="location.href='list?curPage=${pdto.curPage}'">
		</td>
	</tr>
</table>
<input type="hidden" name="curPage" value="${pdto.curPage}">
<input type="hidden" name="bno" value="${article.bno}">
<input type="hidden" name="bref" value="${article.bref}">
<input type="hidden" name="bstep" value="${article.bstep}">
<input type="hidden" name="blevel" value="${article.blevel}">
</form>
</body>
</html>

글쓰기 CSS

@charset "UTF-8";

* {margin:0; padding:0;}

table {
	width:70%;
	margin: 0 auto;
	border:1px solid black;
	background-color: #f6f6ee;
	padding:10px;
	border-radius:25px;
}

table th {
	border : 1px solid balck;
}

table tr {text-align:center;}

table th {
	text-align:center;
	background-color : #ffffff;
	border-radius:10px;
}

input {width:90%; heigh:30px; padding:3px;}

textarea {
	width:90%; height:300px; padding:3px;
	resize: none;	
}

.btn {width:100px; margin-top:5px; margin-bottom:10px;}

h3 {margin:5px 5px 10px 5px;}

글쓰기 JavaScript

/**
 * 
 */
 
 $().ready(function(){
	$("#submit11").on("click",function(){
		if(validate()){
			$("form").submit();
		}
	});
});
//chk에 대해서 점검

function validate(){
	let flen = $("form[name=form1] .chk").length;
	for(var i=0; i<flen; i++){
		if($('.chk').eq(i).val()=="" ||
			$('.chk').eq(i).val()==null||
			$('.chk').eq(i).val().trim()==""){
				alert($('.chk').eq(i).attr('title')+ '은/는 필수 입력');
				$('.chk').eq(i).focus();
				return false;
			}  
	}
	return true;
}

제목, 작성자, 내용, 비밀번호에 chk 클래스를 준다.

클래스의 개수만큼 반복문을 돌리면서 해당 클래스의 value가 비었는지 확인하고, 비었으면 false를 전부 차 있으면 true를 리턴하는 함수를 작성한다.

글작성 버튼에 submit 아이디를 주고, validate() 함수의 return이 true면 form 태그를 submit하도록 한다.

글쓰기 컨트롤러

package com.ecom4.hi.board.control;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.ecom4.hi.HomeController;
import com.ecom4.hi.board.model.BoardDTO;
import com.ecom4.hi.board.model.PageDTO;
import com.ecom4.hi.board.model.RowInterPage;
import com.ecom4.hi.board.service.BoardService;

@Controller
public class BoardController {
	
	private static final Logger logger = LoggerFactory.getLogger(BoardController.class);

	//JavaBoard에서 작업했던 Action 역할을 하는 객체 - 비즈니스 로직 BIZ를 갖고 있다
	
	@Autowired
	private BoardService boardService;

	@RequestMapping(value = "/writeForm")
	public String writeForm(HttpServletRequest request, HttpServletResponse response,
			BoardDTO dto, Model model, PageDTO pdto) {
		logger.info("글쓰기 컨트롤러");
		logger.info("dto==>"+dto.getBno()+"::"+pdto.getCurPage());
		
		model.addAttribute("article", dto);
		model.addAttribute("pdto", pdto);
		
		return "board/BoardWriteForm";
	}
	
	@RequestMapping(value = "/writeAction")
	public String writeAction(HttpServletRequest request, HttpServletResponse response,
			BoardDTO dto, Model model, PageDTO pdto) {
		
		dto.setIp(request.getRemoteAddr());
		boardService.writeArticle(dto);
		
		model.addAttribute("pdto",pdto);
		
		return "redirect:list?curPage="+pdto.getCurPage();
	}
}

답글일 경우 데이터를 불러와야하기 때문에 글쓰기 폼을 여는 로직과 글을 실제로 저장하는 로직을 둘 다 만들어주어야 한다.

글쓰기 폼을 여는 로직은 불러온 데이터를 article에 저장해서 폼을 열어주고,

글을 저장하는 로직은 Service의 writeArticle 메소드에 작성자가 작성한 dto를 전달해 insert를 처리하도록 한다.

처리가 완료되면 있었던 페이지로 돌아가도록 세팅한다.

글쓰기 Service

BoardService 인터페이스

package com.ecom4.hi.board.service;

import com.ecom4.hi.board.model.BoardDTO;
import com.ecom4.hi.board.model.PageDTO;

public interface BoardService {
	void writeArticle(BoardDTO dto);
}

BoardServiceImpl 구현 클래스

package com.ecom4.hi.board.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.ecom4.hi.board.dao.BoardDAO;
import com.ecom4.hi.board.model.BoardDTO;
import com.ecom4.hi.board.model.PageDTO;
import com.ecom4.hi.board.model.RowInterPage;

@Service(value = "boardService")
public class BoardServiceImpl implements BoardService {

	// DAO DI(Dependency Injection)
	@Autowired
	private BoardDAO boardDao;
	
	@Override
	public void writeArticle(BoardDTO dto){
		boardDao.writeAction(dto);
	}

}

글쓰기 DAO

package com.ecom4.hi.board.dao;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.ecom4.hi.board.model.BoardDTO;

@Repository(value = "boardDao")
public class BoardDAO {

	// 자원을 DI (의존성 주입)
	@Autowired
	private SqlSession sqlSession;

	private String namespace = "board.BoardDAO.";

	public void writeAction(BoardDTO dto) {
		sqlSession.insert(namespace + "writeAction", dto);
	}
}

글쓰기 Mapper

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace = "board.BoardDAO">

<insert id="writeAction" parameterType="bvo">
	<selectKey keyProperty="nbno" resultType="int" order="BEFORE">
		SELECT NVL(MAX(bno),0)+1 AS nbno FROM board
	</selectKey>
	INSERT INTO board
		(bno, bref, bstep, blevel, readcount, 
		subject, content, writer, regdate, ip, passwd) 
	VALUES (
		#{nbno},
		<choose>
			<when test="bno>0">
				#{bno},
				#{bstep}+1,
				#{blevel}+1,
			</when>
			<when test="bno==0 and bref==0">
				#{nbno},
				0,
				0,
			</when>
		</choose>
		#{readcount}, #{subject}, #{content}, #{writer}, SYSDATE, #{ip}, #{passwd}
	)
</insert>
</mapper>

저작자표시

개 발소리 춉춉