[Spring][커뮤니티 사이트]다중 게시판 - 작성

Mapper.xml(Oracle)

<!-- 게시글 작성 -->
<insert id="insertSelectKey">
	<selectKey keyProperty="bno" order="BEFORE"
			resultType="int">
			select bno_seq.nextval from dual
		</selectKey>
	<![CDATA[
		insert into board(bno, title , nickname , credate , content , pin , category , hit)
		values(#{bno}, #{title} , #{nickname} , sysdate , #{content} , #{pin} , #{category} , #{hit})
	]]>
</insert>

<insert id="insert">
	<![CDATA[
		insert into board(bno, title , nickname , credate , content , pin , category , hit)
		values(bno_seq.nextval, #{title} , #{nickname} , sysdate , #{content} , #{pin} , #{category} , #{hit})
	]]>
</insert>

• 작성 부분은 bno의 값을 만들기위해 'insertSelectKey' 쿼리문을 사용하 였으며, bno의 값이 생성되면 밑에 insert 쿼리문을 통해 생성이 되도록 하였습니다.

Controller

	//게시판 작성 
	@GetMapping("/register")
	public void register() {
		
	}
	
	@PostMapping("/register")
	public String register(BoardVO board, RedirectAttributes rttr) {

		log.info("==========================");

		log.info("register: " + board);


		log.info("==========================");

		service.register(board);

		rttr.addFlashAttribute("result", board.getBno());

		return "redirect:/board/lists";
	}

• 작성 페이지 화면은 GetMapping으로 들어가며, 작성 버튼(submit) 버튼을 누르게 되면 PostMapping가 작동된다.

Serivce & DAO

	//Service
    //게시판 작성
	@Override
	public void register(BoardVO board) {
		log.info("register....." + board);
		dao.insertSelectKey(board);
	}
    
   //DAO
   	//게시글 작성
	@Override
	public void insertSelectKey(BoardVO board) {
		session.insert("mapper.board.insertSelectKey",board);
	}
	@Override
	public void insert(BoardVO board) {
		session.insert("mapper.board.insert",board);
	}

JSP

<form action="${path}/board/register" method="post" id="frm" role="form">
<div class="container">
   	<h1>작성 페이지</h1>
     <div class="row row1">
      <table class="table">
      	<tr>
			<th width=30% class="text-center">
				<select class="option" name="category" id="category">
					<option value="" selected>말머리 선택해주세요</option>
					<option value="1">자유</option>
					<option value="2">질문</option>
					<option value="3">공략</option>
					<option value="4">자랑</option>
				</select>
			</th>
		</tr>
		
        <tr>
         <th width=20% class="text-center warning">제목</th>
         <td width=30% class="text-center">
         	<textarea name="title"  id="title" style="width:100%; height:100%" class="title"></textarea>
         </td>
        </tr>
        <tr>
         <th width=20% class="text-center warning">닉네임</th>
         <td width=30% class="text-center">
         	<textarea name="nickname" id="nickname" style="width:100%; height:100%" class="nickname"></textarea>
         </td>
        </tr>
        <tr>
          <td colspan="4" class="text-left" valign="top" height="200">
           <textarea name="content" id="content" style="width:100%; height:100%" class="content"></textarea>
          </td>
        </tr>
        <tr>
          <td colspan="4" class="text-right">
			<a href="${path}/board/lists" class="btn btn-xs btn-success">목록으로</a>
			 <button type="submit" class="btn btn-xs btn-info">등록</button>
          </td>
        </tr>
      </table>
     </div>
   </div>
   </form>

JS

$(document).ready(function(e){

  var formObj = $("form[role='form']");
  
  $("button[type='submit']").on("click", function(e){
		var category = $(".option").val();
		var title = $(".title").val();
		var nickname = $(".nickname").val();
		var content = $(".content").val();
		
		if(category == 0){
			alert("말머리 선택해주세요.");
			document.getElementById("category").focus();
			return false;
		}else if(title == ""){
			alert("제목을 적어주세요.");
			document.getElementById("title").focus();
			return false;
		}else if(nickname == ""){
			alert("닉네임 적어주세요.");
			document.getElementById("nickname").focus();
			return false;
		}else if(content == ""){
			alert("내용을 적어주세요.");
			document.getElementById("content").focus();
			return false;
		}
     });

• 만약 작성 시 채우지 않은 칸이 있는 상태에서 작성 버튼을 누르게 되면 focus 함수를 통해 적지 않은 칸으로 커서가 이동이 되게 하였습니다.