게시판 상세보기 페이지, 댓글 목록 페이지 꾸며보기 (내 프로젝트에 적용)

Front-End/Bootstrap 2019. 10. 8. 17:15

어제와 마찬가지로 검색기능, 게시글 상세보기 페이지 및 댓글 목록 페이지에 부트스트랩(css) 적용해서 디자인 수정해보기.



검색기능


memberboard.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
<form name="form1" method="post" action="list.do">
<div class = "search row" style = "margin:auto;">
    <div class = "col-xs-2 col-sm-2" style = "margin:auto;">
    <select name="search_option" class = "form-control" align = "center">
        <option value="user_id"
<c:if test="${map.search_option == 'user_id'}">selected</c:if>
        >작성자</option>
        <option value="title" 
<c:if test="${map.search_option == 'title'}">selected</c:if>
        >제목</option>
        <option value="content" 
<c:if test="${map.search_option == 'content'}">selected</c:if>
        >내용</option>
        <option value="all" 
<c:if test="${map.search_option == 'all'}">selected</c:if>
        >작성자+내용+제목</option>
    </select>
 </div>   
 
 
<div class = "col-xs-2 col-sm-2" style = "margin:auto;">
    <div class = "input-group" style = "margin:auto;">
    <input type = "text" name="keyword" value="${map.keyword}" class = "form-control" style="width:300px;" align = "center">  </div>  </div>
    <input type = "submit" value="조회" class = "btn btn-default" align = "center"> 
    <button type = "button" id = "btnWrite" align = "center" class = "btn btn-default">글쓰기</button>
    
</div>
</div>
</center> 
   
</form>
cs









나머지 상세보기 페이지 및 댓글 관련 페이지



memberboardview.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<%@ include file="../include/header.jsp" %>
<%@ include file="../include/menu.jsp" %>
<script src="${path}/include/js/common.js"></script>
<script src="${path}/ckeditor/ckeditor.js"></script>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
 <style>
    #contentForm {
      width: 40%;
      margin: 0 auto;
      padding-top: 12%;
    }
 
    .table > thead > tr > th, .table > tbody > tr > th {
      background-color: #e6ecff;
      text-align: center;
    }
  </style>
 
 
<script>
$(function(){
    
    //목록 버튼
    $("#btnList").click(function(){
        location.href="list.do";
    });
 
 
    //수정 버튼
    $("#btnUpdate").click(function(){
    if(confirm("수정하시겠습니까?")){
    document.form1.action="update.do";
    document.form1.submit();
            }
        });
 
 
    //댓글쓰기 버튼 (버튼을 눌러서 id값이 넘어와서 실행되는 자바스크립트 구문)
    listReply();
 
        
    $("#btnReply").click(function(){
        if(confirm("댓글을 작성하시겠습니까?")){
    var r_content = $("#r_content").val();    //댓글의 내용
    var member_bno =  "${dto.member_bno}";
    var params = {"r_content" : r_content, "member_bno" : member_bno};
    
    
    $.ajax({
        type: "post", //데이터를 보낼 방식
        url: "reply_insert.do", //데이터를 보낼 url
        data: params, //보낼 데이터
    
        
        complete : function(data){//데이터를 보내는 것이 성공했을 시 출력되는 메시지
            alert("댓글이 등록되었습니다.");
            listReply2();
                }
            });
        }
        
    });
    
    
//댓글 목록을 출력하는 함수
function listReply(){
    $.ajax({
        type: "get",    //get방식으로 자료를 전달
        url: "reply_list.do?member_bno=${dto.member_bno}&curPage=${curPage}&search_option=${search_option}&keyword=${keyword}",    //컨트롤러에 있는 list.do로 맵핑되고 게시글 번호도 같이 보낸다.
        success: function(result){    //자료를 보내는것이 성공했을때 출력되는 메시지
            
            //댓글목록을 실행한 결과를 가져온다.
        $("#listReply").html(result);
            }
        });
}
 
 
function listReply2(){
    $.ajax({
        type: "get",
        contentType: "application/json",
        url: "reply_list_json.do?member_bno=${dto.member_bno}",
        success: function(result){
            console.log(result);
            var output="<table>";
            for(var i in result){
                var repl=result[i].replytext;
                repl = repl.replace(/  /gi,"&nbsp;&nbsp;");//공백처리
                repl = repl.replace(/</gi,"&lt;"); //태그문자 처리
                repl = repl.replace(/>/gi,"&gt;");
                repl = repl.replace(/\n/gi,"<br>"); //줄바꿈 처리
                
                output += "<tr><td>"+result[i].name;
                date = changeDate(result[i].regdate);
                output += "("+date+")";
                output += "<br>"+repl+"</td></tr>";
            }
            output+="</table>";
            $("#listReply").html(output);
        }
    });
}
 
 
//삭제 버튼
$("#btnDelete").click(function(){
    if(confirm("삭제하시겠습니까?")){
        document.form1.action="delete.do";
        document.form1.submit();
        }
    });
    
    
//추천하기 버튼
$("#btnRecommend").click(function(){
    if(confirm("해당 글을 추천하시겠습니까?")){
        document.form1.action="recommend.do";
        document.form1.submit();
        
        alert("해당 글을 추천하였습니다.")
        
        }
    
    });
 
});
 
 
</script>
 
<h2>게시물 보기 </h2> 조회수 : ${dto.viewcnt}
<!-- 게시물을 작성하기 위해 컨트롤러의 insert.do로 맵핑 -->
<form id="form1" name="form1" method="post" action="${path}/board/insert.do">
<div class="input-group input-group-sm" role="group" style = "text-align:left">
<table class="table table-striped table-bordered">
<tread>
<tr>
<td><input type = "hidden" id = "member_bno" name = "member_bno" class="form-control" aria-describedby="basic-addon1" value = "${dto.member_bno }" class="form-control" aria-describedby="basic-addon1" >글번호 : ${dto.member_bno }</td>
</tr>
 
 
<tr>
<td><input name="title" id="title" size="80"
                    value="${dto.title}"
                    placeholder="제목을 입력하세요" class="form-control" aria-describedby="basic-addon1" ></td></tr>
                    
<br><br>
                              
<!-- placeholder은 제목을 입력할 수 있도록 도움말을 출력함 -->
<tr>
<div style="width:800px;">
<td><textarea class="form-control" id="content" name="content" rows="3" cols="80" 
placeholder="내용을 입력하세요">${dto.content}</textarea></td>
</div>
</tr>
</tread>
</table>
 
</div>
</div>
 
</form>
 
 
 
<!-- 마찬가지로 내용을 입력하도록 도움말을 출력함 -->
<script>
// ckeditor 적용
//id가 content인 태그 (글의 내용을 입력하는 태그)를 ck에디터를 적용한다는 의미
CKEDITOR.replace("content",{
    height: "300px"
});
 
CKEDITOR.replace("r_content",{
    height: "300px"
});
</script>
 
<div style = "width:700px; text-align:center;">
<!-- 수정, 삭제에 필요한 글번호를 hidden 태그에 저장한다. -->
    <input type = "hidden" name = "member_bno" value = "${dto.member_bno }">
    
    <!-- 본인만 수정, 삭제 버튼을 표시한다. -->
    <c:if test = "${sessionScope.user_id == dto.user_id or sessionScope.navername == dto.user_id or sessionScope.kakaonickname == dto.user_id or sessionScope.facebookname == dto.user_id}">
            <div class="btn-group btn-group-sm" role="group" aria-label="...">
            <div style = "text-align:center;" >
            
            <button type = "submit" id = "btnUpdate" class="btn btn-default">수정</button>
            <button type = "button" id = "btnDelete" class="btn btn-default">삭제</button>
            
            </div></div>
    </c:if>
    
    
    <!-- 관리자에게는 삭제 버튼을 표시한다. -->
    <c:if test = "${sessionScope.admin_id != null}">
    
    <div class="btn-group btn-group-sm" role="group" aria-label="...">
    <div style = "text-align:center;" >
            <button type = "button" id = "btnDelete" class="btn btn-default">삭제</button>
            </div></div>
    </c:if>
    
    
    <!-- 로그인이 되어있고, 본인 글이 아닐경우에만 추천할 수 있도록 버튼을 출력 -->
    <c:if test = "${sessionScope.user_id != null and sessionScope.user_id != dto.user_id
    or sessionScope.navername != null and sessionScope.navername != dto.user_id
    or sessionScope.kakaonickname != null and sessionScope.kakaonickname != dto.user_id
    or sessionScope.facebookname != null and sessionScope.facebookname != dto.user_id}">
    <div class="btn-group btn-group-sm" role="group" aria-label="...">
    <div style = "text-align:center;" >
    
            <button type = "button" id = "btnRecommend" class="btn btn-default" >추천하기</button>
            </div></div>
    
    </c:if>
    
    <!-- 관리자에게도 추천 버튼 출력 -->
    <!-- 관리자에게는 삭제 버튼을 표시한다. -->
    <c:if test = "${sessionScope.admin_id != null}">
    
    <div class="btn-group btn-group-sm" role="group" aria-label="...">
    <div style = "text-align:center;" >
            <button type = "button" id = "btnRecommend" class="btn btn-default" >추천하기</button>
            
            </div></div>
    </c:if>
    
    
    <!-- 글목록은 본인이 아니어도 확인 가능하게 한다. -->
        <div class="btn-group btn-group-sm" role="group" aria-label="...">
    <div style = "text-align:center;" >
    
    <button type = "button" id = "btnList" class="btn btn-default">목록</button>
    </div></div>
    
    <!-- 로그인이 되어있는 상태에서만 댓글 작성 버튼이 출력되도록 한다. -->
    
    <c:if test = "${sessionScope.user_id != null or sessionScope.navername != null 
    or sessionScope.kakaonickname != null or sessionScope.facebookname != null}">
    <br><br><br>
    <div class="btn-group btn-group-sm" role="group" aria-label="...">
    <div style = "text-align:center;" >
    <textarea rows = "5" cols = "80" id = "r_content" name = "r_content" class="form-control" aria-describedby="basic-addon1" placeholder="댓글을 입력하세요."></textarea>
    </div></div>
    <br>
    
    
    <!-- 댓글쓰기 버튼을 클릭하면 위쪽에 있는 자바스크립트 구문이 실행되어서 컨트롤러로 맵핑됨 --><br><br>
    <div class="btn-group btn-group-sm" role="group" aria-label="...">
    <div style = "text-align:center;" >
    
    <button type = "button" id = "btnReply" class="btn btn-default" >댓글쓰기</button>
    </div></div>
    </c:if>
    
    <!-- 댓글 목록 -->
    <!-- 댓글이 등록이 되면 listReply에 댓글이 쌓이게 된다. -->
    <div id = "listReply"></div>
    
<body>
</body>
</html>
cs




memberboardreply_list.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<%@ include file="../include/header.jsp"%>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
 
<style>
#contentForm {
    width: 40%;
    margin: 0 auto;
    padding-top: 12%;
}
.table>thead>tr>th, .table>tbody>tr>th {
    background-color: #e6ecff;
    text-align: center;
}
</style>
 
 
<script>
    $(function() {
 
        //댓글 수정 버튼
        $("#btn_reply_Update").click(
                function() {
                    if (confirm("수정 하시겠습니까?")) {
 
                        //수정하는데 필요한 정보들, 댓글 번호, 글 내용, 작성자 아이디, 게시글 번호를 변수에 저장한다.
                        var rno = $("#rno").val();
                        var r_content = $("textarea#r_content").text();
                        var user_id = $("#user_id").val();
                        var member_bno = $("#member_bno").val();
 
                        //게시글 세부 페이지로 포워딩을 하기위해 페이지 관련 값들을 변수에 저장해서 컨트롤러로 보낸다.
                        var curPage = $("#curPage").val();
                        var search_option = $("#search_option").val();
                        var keyword = $("#keyword").val();
 
                        //페이지 관련 값들과 댓글 수정에 필요한 값들을 url로 전송한다.
                        document.form1.action = "reply_update.do?rno=" + rno
                                + "&r_content=" + encodeURI(r_content)
                                + "&user_id=" + user_id + "&member_bno="
                                + member_bno + "&curPage=" + curPage
                                + "&search_option=" + search_option
                                + "&keyword=" + keyword;
                        document.form1.submit();
 
                        alert("댓글이 수정되었습니다.")
                    }
                });
 
        //댓글 삭제 버튼
        $("#btn_reply_Delete").click(
                function() {
 
                    if (confirm("삭제 하시겠습니까?")) {
 
                        //댓글 삭제를 하기위해 댓글 번호, 글 번호, 댓글 내용, 그리고 게시글 세부 페이지로 포워딩 하기 위해 페이지 관련 값들을 변수에 저장한다.
                        var rno = $("#rno").val();
                        var member_bno = $("#member_bno").val();
                        var content = $("textarea#r_content").text();
                        var curPage = $("#curPage").val();
                        var search_option = $("#search_option").val();
                        var keyword = $("#keyword").val();
 
                        //url로 삭제에 필요한 변수들을 보낸다.
                        document.form1.action = "reply_delete.do?rno=" + rno
                                + "&member_bno=" + member_bno + "&curPage="
                                + curPage + "&search_option=" + search_option
                                + "&keyword=" + keyword;
 
                        document.form1.submit();
 
                        alert("댓글이 삭제되었습니다.")
 
                    }
                });
    });
</script>
 
 
 
<body>
    <!-- 배열이 비어있지 않으면 참을 출력함. (다시말해서 배열에 값들이 있으면 댓글 리스트를 출력한다.) -->
 
 
 
    <c:if test="${not empty map.list}">
        <h2>댓글 리스트</h2>
        <div class="input-group input-group-sm" role="group"
            style="text-align: left">
            <table class="table table-striped table-bordered" border="1"
                width="800px" align="left">
 
 
                <c:forEach var="row" items="${map.list}">
 
                    <tr>
                        <td><br></td>
                    </tr>
 
                    <tr>
                        <td>닉네임 : ${row.user_id}</td>
                    </tr>
 
                    <tr>
                        <td>작성일자 : ${row.reg_date} 댓글번호 : ${row.rno }</td>
                    </tr>
 
                    <tr>
                        <td>댓글 내용 : ${row.r_content}</td>
                    </tr>
 
 
                    <!-- 폼태그 안에 위쪽에 있는 자바스크립트 구문에 필요한 값들을 노출시키지 않게 하기 위해 hidden타입으로 값들을 전달한다. -->
                    <form method="POST" id="form1">
 
                        <input type="hidden" id="rno" name="rno" value="${row.rno}">
                        <input type="hidden" id="user_id" name="user_id"
                            value="${row.user_id}"> <input type="hidden"
                            id="member_bno" name="member_bno" value="${row.member_bno}">
                        <input type="hidden" id="curPage" name="curPage"
                            value="${curPage}"> <input type="hidden"
                            id="search_option" name="search_option" value="${search_option}">
                        <input type="hidden" id="keyword" name="keyword"
                            value="${keyword}">
 
                        <tr>
                            <td>
                                <div style="width: 800px;">
                                    <textarea class="form-control" placeholder="수정할 내용을 입력하세요"
                                        id="r_content" name="r_content" rows="4" cols="80"></textarea>
                                </div>
                                <br>
                            <br>
                            </td>
                        </tr>
                    </form>
 
 
 
 
 
 
                    <!-- 본인일 경우에만 댓글 수정버튼과 댓글 삭제 버튼이 출력되도록 설정함 -->
 
                    <div style="width: 700px; text-align: right;">
 
                        <c:if
                            test="${sessionScope.user_id == row.user_id or sessionScope.navername == row.user_id or sessionScope.kakaonickname == row.user_id or sessionScope.facebookname == row.user_id}">
 
                            <tr>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group"
                                        aria-label="...">
                                        <div style="text-align: center;">
                                            <button type="button" id="btn_reply_Update"
                                                class="btn btn-default">댓글 수정</button>
                                            <button type="button" id="btn_reply_Delete"
                                                class="btn btn-default">댓글 삭제</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
 
 
 
                        </c:if>
 
                        <!-- 관리자아이디로 로그인했을 경우에 삭제버튼을 출력 -->
                        <c:if test="${sessionScope.admin_id != null}">
 
                            <tr>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group"
                                        aria-label="...">
                                        <div style="text-align: center;">
                                            <button type="button" id="btn_reply_Delete"
                                                class="btn btn-default">댓글 삭제</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
 
                        </c:if>
                    </div>
                    <br>
                    <br>
                    </td>
                    </tr>
 
                </c:forEach>
            </table>
    </c:if>
 
 
</body>
</html>
cs









저작자표시

'Front-End > Bootstrap' 카테고리의 다른 글

기본 홈페이지 디자인  (0) 2019.10.10
게시판페이지 꾸며보기 (내 프로젝트에 적용)  (0) 2019.10.07
메인페이지 꾸며보기 (내 프로젝트에 적용)  (0) 2019.10.04
전체적으로 bootstrap 적용 (일부)  (0) 2019.10.02
로그인 폼에 bootstrap 적용  (0) 2019.10.02
:

티스토리툴바