quilt code

[전자정부프레임워크] 게시판 만들기 (2) 본문

weekly/게시판 만들기

[전자정부프레임워크] 게시판 만들기 (2)

김뱅쇼 2023. 12. 26. 15:01

 

1. 댓글 등록, 수정

[화면]

1) 댓글 목록, 등록 화면



: 댓글 입력창



: 댓글 화면




: 글번호를 기준으로 업로드


2) 댓글 수정



: 수정 모달창 
[xml]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!-- /////////////////////////////// 댓글 ///////////////////////////////////// -->
    <!-- 댓글 목록 -->     
    <select id="listCmnt" parameterType="int" resultType="egovframework.example.board.vo.CmntVo" >
        SELECT
            cmntNo,
            cmntContent,
            cmntDate,
            memId,
            boardNo,
            cmntDelYn
        FROM
            CMNT
        WHERE boardNo = #{boardNo}
        ORDER BY cmntNo ASC
        
    </select>
    
    <!-- 댓글 작성 -->
    <insert id="insertCmnt" parameterType="egovframework.example.board.vo.CmntVo">
    
        <selectKey resultType="int" order="BEFORE" keyProperty="cmntNo">
            SELECT CMNTSEQ.NEXTVAL FROM DUAL
        </selectKey>
            
            INSERT INTO CMNT (
                           cmntNo,
                        cmntContent,
                        cmntDate,
                        memId,
                        boardNo,
                        cmntDelYn
            ) VALUES (
                        #{cmntNo},
                        #{cmntContent},
                        SYSDATE,
                        #{memId},
                        #{boardNo},
                        'n'
            )
    </insert>
  <!-- 댓글 수정 -->
    <update id="updateCmnt" parameterType="egovframework.example.board.vo.CmntVo">
        UPDATE CMNT
        SET
            cmntContent = #{cmntContent}
        WHERE
                cmntNo = #{cmntNo} AND
                boardNo = #{boardNo}
    </update>
 cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
    //댓글 수정 버튼(모달창)
     $(document).on("click", "#updateCmntModal", function() {
            console.log("댓글 수정 버튼이에욥");
            
            var boardNo = $("input[name='boardNo']").val();
             console.log("글번호 : " + boardNo);
            
             
             var cmntNo = $(this).data("cmntNo");
             console.log("댓글번호 : " + cmntNo);
             
             var cmntContent = $(this).data("cmntContent");
             console.log("댓글내용 : " + cmntContent);
             
             //댓글 수정 모달에서 취소버튼 누르면 입력 값 비우기
              $("#commentModModalCancle").click(function(){
                  $("#writeModComment").val("");
              });
             
     }); 
    
    //모달창에 값 가져오기
     function showCommentContents(x){
         let comment_val = $('#comment_'+x).find('p[name=cmtCnt]').text();
         console.log("=======================");
         console.log("댓글번호: " + x);
         console.log("댓글내용: " + comment_val);
         
         $("#cmntNo1").val(x);
         $("#writeModComment").val(comment_val);
         
         $('#cmntNo').val(x);
         
     }
    
    //댓글 수정
            
        $('#commentModModalConfirm').on( 'click', function() {
         console.log("=====================================");
         console.log("댓글 수정!!!!!!");
         
         var writeModComment = $("#writeModComment").val();
         console.log("확인: " + writeModComment);
         
         var boardNo = $("input[name='boardNo']").val();
         console.log("글번호 : " + boardNo);
         
         var cmntNo = $("#cmntNo").val();
         console.log("댓글번호 : " + cmntNo);         
         
         
         var data = {
                       "boardNo" : boardNo
                       ,"cmntNo" : cmntNo
                       ,"cmntContent" : writeModComment
                   };
         
         console.log(data);
         
         $.ajax({
//              url:"<c:url value='/'/>updateCmnt.do" ,
             url:"<c:url value='/'/>insertCmnt.do" ,
 
             data:data,
             type:"POST",
             success:function(data){
               $("#myModal").modal('hide');
               
                //href + "(여기 한칸 무조건 띄워야함 무조건) #div id" : 
               $("#cmcmArea").load(window.location.href + " #cmcmArea");
               }   
        });
      });
            
        $(document).ready(function() {    
            // 모든 수정 창 숨김
            $(".modifyViews form").css("display", "none");  
 cs



[controller]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//댓글 등록, 수정
    @RequestMapping(value = "/insertCmnt.do")
    public void insertCmnt(@RequestParam HashMap<String, Object> paramMap
                      ,HttpSession session
                      ,HttpServletResponse response
             ) throws Exception {
          
          CmntVo myMapping = new CmntVo();
          myMapping.setCmntContent(paramMap.get("cmntContent").toString());
          myMapping.setBoardNo(Integer.parseInt(paramMap.get("boardNo").toString()));
          int result; 
          
          if(paramMap.containsKey("cmntNo")){
             myMapping.setCmntNo(Integer.parseInt(paramMap.get("cmntNo").toString()));
             result = boardService.updateCmnt(myMapping);
          } else {
             myMapping.setMemId(paramMap.get("memId").toString());
             result = boardService.insertCmnt(myMapping);
          }
 
          response.setContentType("text/html;charset=utf-8");
          response.getWriter().print(result);
          response.getWriter().flush();
          response.getWriter().close();
          
       }
 cs


[jsp]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!-- ///////////// 댓글 시작 /////////////-->
 
<!-- 댓글 출력 시작 -->
    <div class="container" id="cmcmArea">
        <h5>[댓글 목록]</h5>
        <div id="commentArea" class="list-group">
            <c:forEach items="${comment}" var="result" varStatus="stat" >
                <hr/>
<%--                    <c:if test="${result.cmntDelYn == 'n'}"> --%>
                    <!-- 댓글 목록 -->    
                    <c:if test="${result.cmntDepth == 0}">
                        <div id="comment_${result.cmntNo}">
                            <input type="hidden" id="boardNo" value="${result.cmntNo}" />
                            <p></p>
                            <p>댓글 내용: </p>
                            <p name="cmtCnt">${result.cmntContent}</p>
                            <p>작성자: ${result.memId}</p>
                            <p>작성일시: <fmt:formatDate value="${result.cmntDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                            <p></p>
<%--                             <button type="button" id="replyOpen" data-id="replyWrite${stat.count}" class="btn btn-outline-secondary btn-sm hiddenContent">답글 달기</button> --%>
                            <button type="button" id="replyOpen" data-id="comment_${result.cmntNo}" class="btn btn-outline-secondary btn-sm hiddenContent">답글 달기</button>
                            <button type="button" class="btn btn-outline-primary btn-sm cmntBtnMod" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#myModal"
                                    onclick="showCommentContents(${result.cmntNo})"
                                    >
                                    수정</button>
                            <button type="button" class="btn btn-outline-danger btn-sm cmntBtnDel" id="deleteComment-${result.cmntNo}" onclick="deleteComment(${result.cmntNo})">삭제</button>
                        </div>
                    <!-- 대댓글 작성 -->
                        <div class="container" id="hiddenContent_${result.cmntNo}" >
                            <form class="modifyViews" method="post" name="id123" id="replyWrite${stat.count}" action="/insertReply.do">
                                <div style="margin-top: 30px;" >
                                    <div class="mb-3 d-flex align-items-center">
                                        <input type="hidden" id="replyWriter"  value="<%=memId%>" /> 
                                        <input type="hidden" id="boardNo1" value="${vo.boardNo}" />
<%--                                         <input type="hidden" id="parentCmntNo" value="${result.cmntNo}" /> --%>
                                        <input type="hidden" id="replyNo_${result.cmntNo}" name="cmntNo2" value="${result.cmntNo}" /> 
                                        <input id="reContent" name="reContent" class="form-control me-1" type="text" placeholder="댓글을 입력해 주세요" aria-label="default input example" style="width: 95%;"></ipnut>
                                      <button type="button" onclick="replyGogo(${result.cmntNo})" class="btn btn-primary btn-sm">등록</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </c:if>
                    <!-- 대댓글 목록 -->
                    <c:if test="${result.cmntDepth == 1}">
                        <div id="comment1_${result.cmntNo}" style="margin-left: 5%;">
                            <input type="hidden" id="boardNo" value="${result.cmntNo}" />
                            <p>↳댓글 내용: </p>
                            <p name="cmtCnt">${result.cmntContent}</p>
                            <p>작성자: ${result.memId}</p>
                            <p>작성일시: <fmt:formatDate value="${result.cmntDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                            <p></p>
                            <button type="button" class="btn btn-outline-primary btn-sm cmntBtnMod" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#myModal"
                                    onclick="showCommentContents(${result.cmntNo})"
                                    >
                                    수정</button>
                            <button type="button" class="btn btn-outline-danger btn-sm cmntBtnDel" id="deleteComment1-${result.cmntNo}" onclick="deleteComment(${result.cmntNo})">삭제</button>
                        </div>
                    </c:if>
                    
<%--                    </c:if> --%>
                </c:forEach>
                        <!-- 대댓글 끝 -->
                <!-- 삭제된 댓글 출력 -->
                   <c:if test="${result.cmntDelYn == 'y'}">
                       <div class="col-md-7 py-2" id="comment" data-cmntno="${result.cmntNo}">삭제된 댓글 입니다</div>
                       <hr/>
                   </c:if>
        </div>
    </div>
 
<!-- 댓글 출력 끝 -->
 
<!-- 댓글 작성 시작-->
    <div class="container">
        <form method="post" id="cmntWrite" action="/insertCmnt.do">
            <div id="commentDiv" style="margin-top: 30px;" >
                <div class="mb-3 d-flex align-items-center">
                    <input type="hidden" id="cmntWriter" value="<%=memId%>" />
                    <input type="hidden" id="boardNo" value="${vo.boardNo}" />
<%--                     <input type="hidden" id="cmntNo" value="${cmnt.cmntNo}" />  --%>
                    <textarea id="cmntContent" class="form-control me-1" type="text" placeholder="댓글을 입력해 주세요" aria-label="default input example" style="width: 95%;" ></textarea>
                  <button type="button" id="cmntBtn" class="btn btn-primary ">등록</button>
                </div>
            </div>
        </form>
    </div>
<!-- 댓글 작성 끝-->
 
<!-- 댓글 수정 모달 시작 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 500px">
        <div class="modal-content position-relative">
            <div class="modal-body p-0">
                <div class="rounded-top-lg py-3 ps-4 pe-6 bg-light">
                  <h4 class="mb-1" id="modalExampleDemoLabel">댓글 수정창</h4>
                </div>
                <div class="p-4 pb-0">
                  <form>
                    <input class="form-control" id="cmntNo1" name="cmntNo1" readonly />
                    <div class="mb-3">
                      <label class="col-form-label" for="message-text">댓글 내용</label>
                      <textarea class="form-control" id="writeModComment" name="writeModComment" type="text" placeholder="댓글 내용을 입력해주세요"></textarea>
                    </div>
                  </form>
                </div>  
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary cmntModalMod" id="commentModModalConfirm" type="button" value="true">수정</button>
                <button class="btn btn-secondary modalCancle" id="commentModModalCancle" type="button" data-bs-dismiss="modal">취소</button>
            </div>
        </div>
    </div>
</div>
<!-- 댓글 수정 모달 끝 -->
 
 
<!-- //////////// 댓글 끝 /////////////// -->
 cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
      //댓글작성
    $("#cmntBtn").on("click", function() {
       console.log("댓글 올라가세용");
       
       var cmntContent = $("#cmntContent").val();
       console.log("댓글내용 : "+ cmntContent);
       
       
       var memId =$("#memId").val();
       console.log("작성자 : " + memId)
       
       var boardNo = $("input[name='boardNo']").val();
       console.log("글번호 : " + boardNo );
       
       var data = {
                     "cmntContent"    :    cmntContent
                     ,"memId"        :    memId
                     ,"boardNo"        :    boardNo
        //              ,"cmntNo":cmntNo
                 };
//        console.log(data);
 
//         var cmntDelYn = $("#cmntDelYn").val();
//         console.log("cmntDelYn: " + cmntDelYn);
         
       $.ajax({
           url:"<c:url value='/'/>insertCmnt.do" ,
           data:data,
           type:"POST",
             success:function(data){
                $("#cmntContent").val("");
//                 alert("댓글 작성 성공");
 
             //href + "(여기 한칸 무조건 띄워야함 무조건) #div id" : 댓글 등록시 지정 범위만 새로고침
                $("#cmcmArea").load(window.location.href + " #cmcmArea");
             }
//              ,
//              error:function(request,status,error){
                 //alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
//                 }
    
         });
         
       });
 cs



 

 

2. 댓글 삭제

[화면]


: alert 창으로 삭제 확인
[xml]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <!-- 댓글 삭제 -->
    <!--  db까지 삭제하는 쿼리
    <delete id="deleteCmnt" parameterType="Integer">
            DELETE FROM CMNT
            WHERE cmntNo = #{cmntNo}
    </delete>    
    -->
    <update id="deleteCmnt" parameterType="egovframework.example.board.vo.CmntVo">
        UPDATE CMNT
        SET
                cmntDelYn = 'y'
        WHERE cmntNo = #{cmntNo}
    
    </update>
 cs
[controller]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//댓글 삭제
    @PostMapping(value="/deleteCmnt.do")
    @ResponseBody
    public void deleteCmnt(HttpServletRequest request
                        ,HttpSession session
                        ,HttpServletResponse response
            ) throws Exception {
//        System.out.println("여기까지 오긴 왔나요");
        
        int cmntNo = Integer.parseInt(request.getParameter("cmntNo"));
        boardService.deleteCmnt(cmntNo);
        
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().print(cmntNo);
        response.getWriter().flush();
        response.getWriter().close();
        
    }
 cs


댓글 삭제도 게시글 삭제처럼 delete yn컬럼으로 삭제 여부만 판단하고 실제 db는 존재

 

 

3. 대댓글 작성

[화면]


: 대댓글 작성 화면




: 대댓글 작성 완료 화면 (댓글-대댓글 계층형)
[xml]


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    <!-- 대댓글 작성 -->
    <insert id="insertReply" parameterType="egovframework.example.board.vo.CmntVo">
    
        <selectKey resultType="int" order="BEFORE" keyProperty="cmntNo">
            SELECT CMNTSEQ.NEXTVAL FROM DUAL
        </selectKey>
            
            INSERT INTO CMNT (
                           cmntNo,
                        cmntContent,
                        cmntDate,
                        memId,
                        boardNo,
                        cmntDepth,
                        cmntGroup,
                        cmntDelYn
            ) VALUES (
                        #{cmntNo},
                        #{cmntContent},
                        SYSDATE,
                        #{memId},
                        #{boardNo},
                        #{cmntDepth},
                        #{cmntGroup},
                        'n'
            )
            
    </insert>    
 cs

: cmntDepth와 cmntGroup(부모댓글 번호)으로 계층형 구조 완성


(참고)
[controller]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//대댓글 등록
    @RequestMapping(value="/insertReply.do")
    @ResponseBody
    public void insertReply(
                         @RequestParam(value="boardNo") int boardNo
                        ,@RequestParam(value="cmntContent") String cmntContent
                        ,@RequestParam(value="memId") String memId
                        ,@RequestParam(value="cmntNo") int cmntNo
//                        ,@RequestParam(value="cmntGroup") int cmntGroup
                        ,HttpSession session
                        ,HttpServletResponse response
            ) throws Exception {
        
        System.out.println("===========여기까지 왔나요????(대댓글 등록)===========");
        
        CmntVo myMapping = new CmntVo();
        
        myMapping.setCmntContent(cmntContent);
        myMapping.setBoardNo(boardNo);
        myMapping.setCmntGroup(cmntNo);
//        myMapping.setCmntNo(cmntNo);
        myMapping.setMemId(memId);
        int cmntDepth = 1;
        myMapping.setCmntDepth(cmntDepth);
//        myMapping.setUpCmntNo(upCmntNo);
//        
        
        int result = boardService.insertReply(myMapping);
        
        //ajax로 db는 보냈는데 response가 안됐을때 이거 추가해서 해결함 +HttpServletResponse response
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().print(result);
        response.getWriter().flush();
        response.getWriter().close();
        
    }    
 cs


[jsp]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- 대댓글 작성 -->
                        <div class="container" id="hiddenContent_${result.cmntNo}" >
                            <form class="modifyViews" method="post" name="id123" id="replyWrite${stat.count}" action="/insertReply.do">
                                <div style="margin-top: 30px;" >
                                    <div class="mb-3 d-flex align-items-center">
                                        <input type="hidden" id="replyWriter"  value="<%=memId%>" /> 
                                        <input type="hidden" id="boardNo1" value="${vo.boardNo}" />
<%--                                         <input type="hidden" id="parentCmntNo" value="${result.cmntNo}" /> --%>
                                        <input type="hidden" id="replyNo_${result.cmntNo}" name="cmntNo2" value="${result.cmntNo}" /> 
                                        <input id="reContent" name="reContent" class="form-control me-1" type="text" placeholder="댓글을 입력해 주세요" aria-label="default input example" style="width: 95%;"></ipnut>
                                      <button type="button" onclick="replyGogo(${result.cmntNo})" class="btn btn-primary btn-sm">등록</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </c:if>
                    <!-- 대댓글 목록 -->
                    <c:if test="${result.cmntDepth == 1}">
                        <div id="comment1_${result.cmntNo}" style="margin-left: 5%;">
                            <input type="hidden" id="boardNo" value="${result.cmntNo}" />
                            <p>↳댓글 내용: </p>
                            <p name="cmtCnt">${result.cmntContent}</p>
                            <p>작성자: ${result.memId}</p>
                            <p>작성일시: <fmt:formatDate value="${result.cmntDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                            <p></p>
                            <button type="button" class="btn btn-outline-primary btn-sm cmntBtnMod" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#myModal"
                                    onclick="showCommentContents(${result.cmntNo})"
                                    >
                                    수정</button>
                            <button type="button" class="btn btn-outline-danger btn-sm cmntBtnDel" id="deleteComment1-${result.cmntNo}" onclick="deleteComment(${result.cmntNo})">삭제</button>
                        </div>
                    </c:if>
 cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
        //대댓글 작성
        function replyGogo(re){
                console.log("대댓글 올라가세요");
                
//                 var reContent = $("#reContent").val();
//                 console.log("대댓글내용 : "+ reContent);
                
                let reContent = $('#hiddenContent_'+re).find('input[name=reContent]').val();
                console.log("대댓글내용 : "+ reContent);
               
                var replyWriter =$("#replyWriter").val();
                console.log("대댓글작성자 : " + replyWriter)
               
                var boardNo1 = $("#boardNo1").val();
                console.log("글번호 : " + boardNo1);
                
                let replyNo = $('#hiddenContent_'+re).find('input[name=cmntNo2]').val();
                console.log("댓글번호 : " + replyNo);
                
                
                 var data = {
                         "cmntContent"    :    reContent
                         ,"memId"        :    replyWriter
                         ,"boardNo"        :    boardNo1
                         ,"cmntNo"        :    replyNo
                       };
               
               console.log("data:" + data);
                
                
                /*
                //대댓글 내용
                let reply_val = $('#hiddenContent_'+re).find('input[name=reContent]').val(); //원댓글 번호를 가져옴
                console.log("=======================");
                console.log("댓글번호: " + re);
                console.log("대댓글내용: " + reply_val);
               
                //대댓글 번호 가져오기
                $("#replyNo").val(re);    
               
                //대댓글 내용 가져오기
                $("#reContent").val(reply_val);
                
//                 $('#replyNo').val(re);
               
                var data = {
                        "cmntContent"    :    reContent
                        ,"memId"        :    replyWriter
                        ,"boardNo"        :    boardNo
                        ,"cmntNo"        :    replyNo
//                        ,"upCmntNo"        :    upCmntNo
                    };
               */
               
               
                $.ajax({
                     url:"<c:url value='/'/>insertReply.do" ,
                     data:data,
                     dataType:"JSON",
                     type:"POST",
                     success:function(data){
//                          $("#cmntContent1").val("");
//                          alert("대댓글 작성 성공");
 
                        //href + "(여기 한칸 무조건 띄워야함 무조건) #div id" : 
                         $("#cmcmArea").load(window.location.href + " #cmcmArea");
                     }
            
                  });
            
            
        }
 cs



 

*** ISSUE ***

댓글(원댓글) 수정, 삭제가 되면 대댓글 등록이 안되고

대댓글 등록이 되면 댓글(원댓글) 수정, 삭제가 되지 않음...

 

 

 

 

 

 

 

 

'weekly > 게시판 만들기' 카테고리의 다른 글

[전자정부프레임워크] 게시판 만들기 (4)  (0) 2023.12.27
[전자정부프레임워크] 게시판 만들기 (3)  (0) 2023.12.26
[전자정부프레임워크] 게시판 만들기 (1)  (0) 2023.12.21
'weekly/게시판 만들기' Related Articles more