[Spring] 스프링 삽질일지 8일차 - 댓글 작성 기능, 경고창 팝업, 조회수 기능

댓글 작성 기능은 전체적으로 게시판 작성 기능과 흐름이 비슷하다.

그러면 오늘도 삽질을 시작해보자~^_^

---

[댓글 작성]

replyMapper.xml에 가서 댓글 작성 쿼리를 작성해준다.

 

<!-- Write comment -->
	<insert id="writeReply">
		INSERT INTO BOARD_REPLY(
			ID, CONTENT, WRITER, USERPASS, CREATE_DATE)
		VALUES(#{id}, #{content},#{writer}, #{userpass}, #{create_date})
	</insert>

 

 

 

이제 ReplyDAO와 ReplyDAOImpl에 댓글 작성 관련 함수를 추가해준다.

ReplyDAO

package com.board.dao;

import java.util.List;

import com.board.domain.ReplyVO;

public interface ReplyDAO {
	
	// View comments
	public List<ReplyVO> readReply(int id) throws Exception;
	
	// Write comments
	public void writeReply(ReplyVO vo) throws Exception;

}

ReplyDAOImpl

 

package com.board.dao;

import java.util.List;

import javax.inject.Inject;

import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;

import com.board.domain.ReplyVO;


@Repository
public class ReplyDAOImpl implements ReplyDAO {
	
	@Inject
	SqlSession sql;
	
	// View post
	@Override
	public List<ReplyVO> readReply(int id) throws Exception{
		return sql.selectList("replyMapper.readReply", id);
	}
	
	// Write comments
	public void writeReply(ReplyVO vo) throws Exception{
		sql.insert("replyMapper.writeReply", vo);
	}
}

 

 

ReplyService, ReplyServiceImpl도 구현해준다.

 

 

package com.board.service;

import java.util.List;

import com.board.domain.ReplyVO;

public interface ReplyService {
	
	// View comments
	public List<ReplyVO> readReply(int id) throws Exception;
	
	// Write comments
	public void writeReply(ReplyVO vo) throws Exception;

}

 

 

 

package com.board.service;

import java.util.List;

import javax.inject.Inject;

import org.springframework.stereotype.Service;

import com.board.dao.ReplyDAO;
import com.board.domain.ReplyVO;

@Service
public class ReplyServiceImpl implements ReplyService{
	
	@Inject
	private ReplyDAO dao;
	
	@Override
	public List<ReplyVO> readReply(int id) throws Exception{
		return dao.readReply(id);
	}
	
	// Write comments
	@Override
	public void writeReply(ReplyVO vo) throws Exception{
		dao.writeReply(vo);
	}
}

 

이제 BoardController로 가서 댓글 작성 관련 코드를 추가해준다.

 

 

댓글 작성 후에는 원래 페이지로 redirect하게 된다.

 

// Write comment
	@RequestMapping(value="board/replyWrite", method = RequestMethod.POST)
	public String replyWrite(ReplyVO vo,  RedirectAttributes rttr) throws Exception {
		logger.info("reply Write");
		
		replyService.writeReply(vo);
		
		rttr.addAttribute("id", vo.getId());
		
		return "redirect:/board/readView";
	}
	

 

 

이제 게시판 조회 창인 readView.jsp에 댓글 작성 부분을 추가해줘야 한다.

 

main 태그 위에 다음 코드를 추가해준다.

<form name="replyForm" method="post">
				  <input type="hidden" id="id" name="id" value="${read.id}" />				
				  <div>
				    <label for="writer">이름</label><input type="text" id="writer" name="writer" />
				    <br/>
				    <label for="userpass">비밀번호</label><input type="text" id="userpass" name="userpass" />
				    <br/>
				    <label for="content"></label><input type="text" id="content" name="content" />
				  </div>
				  <div>
				 	 <button type="button" class="replyWriteBtn">등록</button>
				  </div>
				</form>

그리고 replyWriteBtn 버튼을 클릭하였을 경우 일어나는 event를 추가하기 위해 script 태그로 간다.

기존에 게시물 수정 버튼, 게시물 삭제 버튼을 눌렀을 때의 일어나는 event를 구현한 부분 아래에 추가해준다. 댓글 등록 버튼을 눌렀을 때 값들이 replyWrite로 전달되게 함수를 만들어준다.

 

// comment write
			$(".replyWriteBtn").on("click", function(){
				  var formObj = $("form[name='replyForm']");
				  formObj.attr("action", "/board/replyWrite");
				  formObj.submit();
				});

위와 같이 1번 게시글에 들어가 댓글 작성 후, 등록 버튼을 누를 경우

 

댓글이 정상적으로 등록되는 것을 확인할 수 있다.

 

만약에 댓글 입력 칸 중에 하나라도 입력이 안 되었을 경우, 경고창을 띄우는 부분을 추가로 구현해보자.

readView.jsp로 가서 scrip 태그 안에 정의했던 replyWriteBtn이 click 되었을 때의 이벤트를 다음과 같이 수정해준다.

 

<script type="text/javascript">
		$(document).ready(function(){
			var formObj = $("form[name='readForm']");
			
			// Update 
			$(".update_btn").on("click", function(){
				formObj.attr("action", "/board/updateView");
				formObj.attr("method", "get");
				formObj.submit();				
			})
			
			// Delete
			$(".delete_btn").on("click", function(){
				
			
				formObj.attr("action", "/board/delete");
				formObj.attr("method", "post");
				formObj.submit();
			})
			
			// comment write
			$(".replyWriteBtn").on("click", function(){
				  var formObj = $("form[name='replyForm']");
				  if(fn_valiChk()){
					  return false;
				  }
				  formObj.attr("action", "/board/replyWrite");
				  formObj.submit();
				});

		})
		
		function fn_valiChk(){
			var regForm = $("form[name='replyForm'] .chk").length;
			for(var i = 0; i<regForm; i++){
				if($(".chk").eq(i).val() == "" || $(".chk").eq(i).val() == null){
					alert($(".chk").eq(i).attr("title"));
					return true;
				}
			}
		}
		
		
	</script>

그 후, 아랫줄로 내려가서 기존에 이름, 비밀번호, 내용 입력을 받은 곳에 class ="chk"와 title 값을 추가해준다.

이를 저장 후, 서버를 실행해본다.

그 후, 1번 게시글에 들어가 이름, 비밀번호, 내용 중 하나를 누락하고 등록버튼을 누르면 제대로 경고 팝업이 뜨는 것을 확인할 수 있다.

 

 

[부트스트랩 적용]

게시물 수정, 삭제를 만들려 했으나 UI를 예쁘게 꾸미고 싶다는 생각이 들어 부트스트랩을 우선 적용해볼까 한다.

 

모든 jsp 파일에 head 태그 아래에 다음 코드를 추가해준다.

<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

 

 

 

 

[게시판 조회수 증가]

 

게시판 테이블 board_table에 click_cnt라는 조회수 컬럼을 만들어두기만 하고, 아무것도 구현하지 않았다.

이제 게시글을 클릭할 경우, 조회수가 1씩 늘어나게 구현해보자.

 

pom.xml에 다음 코드를 추가해주자. 

 <!-- Transaction START -->
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-tx -->
		<dependency>
		    <groupId>org.springframework</groupId>
		    <artifactId>spring-tx</artifactId>
		    <version>3.1.1.RELEASE</version>
		</dependency>
		<!-- Transaction END -->

 

 

root-context.xml의 namespaces에서 tx를 추가로 체크해준다.

 

 

 

그 후, source tab으로 돌아와 다음 코드를 추가해준다.

<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
    		<property name="dataSource" ref="dataSource"></property>
		</bean>

   		<tx:annotation-driven transaction-manager="transactionManager" />

 

 

 

 

---

melonpeach.tistory.com/35?category=806570 (게시판 댓글 작성 기능 구현)

https://melonpeach.tistory.com/26?category=806570  (경고창 팝업) 

https://melonpeach.tistory.com/37?category=806570 (부트스트랩 적용)

https://melonpeach.tistory.com/55?category=806570 (조회수 증가)