[스프링]게시판 글에서의 댓글 구현 방법

 

게시판 상세보기 글 밑에 댓글을 다는 형태의 방식을 정리해보겠습니다.

추천기능과 중복추천불가 기능은 다음 글에서 소개하겠습니다~

 

---

 

일단 완성된 화면입니다. (테스트화면이라 대충만들었습니다….)

 

 

 

 

 DATABASE

우선 데이터베이스 테이블을 만들어줍니다. (MYSQL)

 

create table tbl_counsel_faq_reply(
    faqrp_idx int primary key auto_increment comment '인덱스',
    faq_idx int default 0 comment '게시판 인덱스',
    me_id varchar(100) comment '회원ID',
    faqrp_asesment varchar(100) comment '만족도 별점',
    faqrp_asesment_content varchar(3000) comment '만족도 내용',
    faqrp_regdate varchar(20) comment '만족도 생성일',
    faqrp_likeCnt int comment '추천',
  faqrp_hateCnt int comment '비추천',
);

VO

GETTER / SETTER 생략

 

 

 
public class tbl_counsel_faq_replyVO{
 
    private int faqrp_idx;                        // 인덱스
    private int faq_idx;                         // 게시판 인덱스
    private String me_id;                        // 회원 ID
    private String faqrp_asesment;                // 만족도 별점
    private String faqrp_asesment_content;        // 만족도 내용
    private String faqrp_regdate;                // 만족도 등록일
    private int faqrp_likeCnt;                    // 추천 별점
    private int faqrp_hateCnt;                    // 비추천 별점
}

 

  

JSP

JSP 에서 form 태그를 이용하여 만족도 점수와 내용을 작성할 수 있도록 html코드를 작성합니다.

게시판 인덱스인 faq_idx가 댓글 테이블로 넘어갈 수 있도록 form:hidden값을 적용시킵니다.

버튼 타입에 Onclick을 통하여 스트립트문을 이용합니다.

 

 

 

<form:form commandName="searchVO" method="post"  name="form" id="form" role="form">
    <form:hidden path="faq_idx" id="faq_idx" />
    
    
    <div class="bbs_view" style="margin-top:50px;margin-bottom:20px">
    <table class="view_1">
        <tr>
            <th style="width:20%">만족도</th>
            <td class="name">
                 <input type="radio" name="faqrp_asesment" id="faqrp_asesment" value="1" /> 매우 만족
                 <input type="radio" name="faqrp_asesment" id="faqrp_asesment" value="2" /> 만족
                 <input type="radio" name="faqrp_asesment" id="faqrp_asesment" value="3" /> 보통
                 <input type="radio" name="faqrp_asesment" id="faqrp_asesment" value="4" /> 불만족
                 <input type="radio" name="faqrp_asesment" id="faqrp_asesment" value="5" /> 매우 불만족
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" id="btnReply" class="abutton blue2" onclick="changeQnaState();">답변 등록</button>
            </td>
        </tr>
        <tr>
            <th scope="row">만족도내용</th>
            <td class="name">
                <textarea id=faqrp_asesment_content name=faqrp_asesment_content rows="10" cols="120"></textarea>
            </td>
        </tr>
    </table>
    </div>
</form:form>

 

  

JQUERY

변수에 값을 넣어 유효성 검사를 하고 object에 변수를 넣어서 ajax로 돌려줍니다.

 

 

function changeQnaState(){
        var qnaState = $(':radio[name="faqrp_asesment"]:checked').val();
        var qnaAnswer = $("#faqrp_asesment_content").val();
        
        if(qnaState == ""){
            alert("처리상태를 선택해주세요.");
            return false;
        }
        if(qnaAnswer==""){
            alert("답변 내용을 입력해주세요.");
            return false;
        }
        
        var submitObj = new Object();
        submitObj.faq_idx = "${searchVO.faq_idx }";
        submitObj.faqrp_asesment= qnaState;
        submitObj.faqrp_asesment_content= qnaAnswer; 
        
        $.ajax({ 
                url: path+"/onlinecounsel/csfaq/update_qnaState.do", 
                type: "POST", 
                contentType: "application/json;charset=UTF-8",
                data:JSON.stringify(submitObj),
                dataType : "json",
                async: false
               }) 
               .done(function(resMap) {
                  alert("등록 완료하였습니다.");
                  location.reload();
               }) 
               .fail(function(e) {  
                   alert("등록에 실패하였습니다.");
                  
               }) 
               .always(function() { 
                  
               }); 
} 

 

 

CONTROLLER

JSON방식의 데이터저장 패턴입니다.

 

 

@RequestMapping(value = "/onlinecounsel/csfaq/update_qnaState.do", method = RequestMethod.POST)
@ResponseBody
  public String update_qnaState(
          @RequestBody String filterJSON,
          HttpServletResponse response,
        ModelMap model ) throws Exception {
 
    LoginVO loginVO = loginService.getLoginInfo();
    
    JSONObject resMap = new JSONObject();
 
    try{
        
        ObjectMapper mapper = new ObjectMapper();
        tbl_counsel_faq_replyVO searchVO = (tbl_counsel_faq_replyVO)mapper.readValue(filterJSON,new TypeReference<tbl_counsel_faq_replyVO>(){ });
 
        CommonFunctions cf = new CommonFunctions();
        
        searchVO.setFaqrp_regdate(cf.GetTodayDate_format1());
        searchVO.setSite_code(loginService.getSiteCode());
        searchVO.setModi_id(loginVO.getId());
        searchVO.setModi_ip(InetAddress.getLocalHost().getHostAddress());
        searchVO.setMe_id(loginVO.getId());
        
        onlineCounselService.insertFaqReply(searchVO);
                        
    }catch(Exception e){
        System.out.println(e.toString());
        
      }
 
    response.setContentType("text/html; charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.print(resMap);
 
    return null;
}

 

 

SERVICE

 

void insertFaqReply(tbl_counsel_faq_replyVO searchVO) throws Exception;

 

 

SERVICEIMPL

 

@Override
public void insertFaqReply(tbl_counsel_faq_replyVO searchVO) throws Exception {
    dao.insertFaqReply(searchVO);
}

 

DAO

 

public void insertFaqReply(tbl_counsel_faq_replyVO searchVO) {
    insert("insertFaqReply",searchVO);
}

 

 

XML

 

<insert id="insertFaqReply" parameterType="tbl_counsel_faq_replyVO">
    insert into tbl_counsel_faq_reply (
    faq_idx,
    me_id,
    faqrp_asesment, 
    faqrp_asesment_content, 
    faqrp_regdate,
    faqrp_likeCnt,
    faqrp_hateCnt
    )
    values(
    #{faq_idx}, 
    #{me_id}, 
    #{faqrp_asesment}, 
    #{faqrp_asesment_content}, 
    #{faqrp_regdate}, 
    #{faqrp_likeCnt}, 
    #{faqrp_hateCnt} 
    )
</insert>