Front-End/Bootstrap

게시판페이지 꾸며보기 (내 프로젝트에 적용)

dlgkstjq12 2019. 10. 7. 16:21

회원게시판, 공지사항 게시판 목록 및 게시판 상세보기 및 게시글 쓰기 페이지에 css 적용해보기.




adminboard.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
<%@ 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>
<%@ include file="../include/header.jsp"%>
<%@ include file="../include/menu.jsp"%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
<!-- 게시판에 디자인을 추가하도록 하는 코드 -->
<link rel = "stylesheet" href = "/css/bootstrap.css">
 
<style>
    #container {
      width: 70%;
      margin: 0 auto;     /* 가로로 중앙에 배치 */
      padding-top: 10%;   /* 테두리와 내용 사이의 패딩 여백 */
    }
     
    #list {
      text-align: center;
    }
   
    #write {
      text-align: right;
    }
     
    /* Bootstrap 수정 */
    .table > thead {
      background-color: #b3c6ff;
    }
    .table > thead > tr > th {
      text-align: center;
    }
    .table-hover > tbody > tr:hover {
      background-color: #e6ecff;
    }
    .table > tbody > tr > td {
      text-align: center;
    }
    .table > tbody > tr > #title {
      text-align: left;
    }
     
    div > #paging {
      text-align: center;
    }
     
    .hit {
      animation-name: blink;
      animation-duration: 1.5s;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      /* 위 속성들을 한 줄로 표기하기 */
      /* -webkit-animation: blink 1.5s ease infinite; */
    }
     
    /* 애니메이션 지점 설정하기 */
    /* 익스플로러 10 이상, 최신 모던 브라우저에서 지원 */
    @keyframes blink {
      from {color: white;}
      30% {color: yellow;}
      to {color: red; font-weight: bold;}
      /* 0% {color:white;}
      30% {color: yellow;}
      100% {color:red; font-weight: bold;} */
    }
  </style>
 
 
 
 
<script>
 
 
//게시판 목록 페이지로 이동하게 하는 함수
function list(page){
    console.log("페이지를 이동합니다.");
    location.href="admin_board_list.do?curPage="+page;
};
 
//글쓰기 폼으로 이동하게 하는 함수
$(function(){    
        $("#btnWrite").click(function(){
            location.href="admin_board_write.do";
        });
});
 
</script>
 
 
 
<%@ include file="../include/login.jsp"%><br>
    
 
 
<center>
<div id = "list">
<d>공지사항 게시판</d>
</div>
 
 
<div>
<table class="table table-striped table table-hover" align = "top">
<center>
<thead>
    <tr>
    
    <!-- width 옆에 %는 테이블에서 차지할 비율을 나타낸것 -->
        <th width="10%">게시글 번호</th>
        <th width="20%">제목</th>
        <th width="20">작성자</th>
        <th width="20%">내용</th>
        <th width="20%">날짜</th>
        <th width="10%">조회수</th>
</tr>
</thead>
<tbody>
</center>
        
    <!-- forEach var = "개별데이터" items = "집합데이터" -->
    <c:forEach var = "row" items = "${map.list}"> <!-- 컨트롤러에서 map안에 list를 넣었기 때문에 이렇게 받는다. -->
    <tr>
        <td>${row.bno}</td>    <!-- 글번호 -->
        <!-- 클릭하면 컨트롤러의 view.do로 이동하고, 게시물번호, 페이지 번호, 검색옵션, 키워드를 같이 넘긴다 -->
        <td>
        <a href="admin_board_view.do?bno=${row.bno}      
&curPage=${map.pager.curPage}
&search_option=${map.search_option} 
&keyword=${map.keyword}">${row.title}</a>
<c:if test="${row.rcnt > 0}"> 
   <span style="color:red;">( ${row.rcnt} )</span> 
</c:if>  
</td>
 
        <td>${row.admin_id}</td>    <!-- 작성자의 이름 -->
        <td>${row.content}</td>    <!-- 글의내용 -->
        <td>${row.reg_date}</td>    <!-- 날짜의 출력형식을 변경함 -->
        <td>${row.viewcnt}</td>    <!-- 조회수 -->
        
 
    
    </tr>
    </c:forEach>
    
    <!-- 페이지 네비게이션 출력 -->
    <tr>
        <td colspan = "7" align = "center">
            <c:if test="${map.pager.curBlock > 1}">
  <a href="#" onclick="list('1')">[처음]</a>
            </c:if> <!-- 현재 블록이 1블록보다 크면 (뒤쪽에 있기때문에) 처음으로 갈 수 있도록 링크를 추가 -->
        
            <c:if test="${map.pager.curBlock > 1}">
                <a href="#" onclick="list('${map.pager.prevPage}')">
                [이전]</a>
            </c:if> <!-- 현재 블록이 1블록보다 크면 이전 블록으로 이동할 수 있도록 링크 추가 -->
            
            <c:forEach var="num"
                begin="${map.pager.blockBegin}"
                end="${map.pager.blockEnd}">
                <c:choose>
                    <c:when test="${num == map.pager.curPage}">
                    
                    <!-- 현재 페이지인 경우 하이퍼링크 제거 -->
                    <!-- 현재 페이지인 경우에는 링크를 빼고 빨간색으로 처리를 한다. -->
                        <span style="color:red;">${num}</span>
                    </c:when>
                    <c:otherwise>
                        <a href="#" onclick="list('${num}')" >${num}</a>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
            
            
            <c:if test="${map.pager.curBlock <= map.pager.totBlock}">
                <a href="#" onclick="list('${map.pager.nextPage}')">[다음]</a>
            </c:if> <!-- 현재 페이지블록이 총 페이지블록보다 작으면 다음으로 갈 수있도록 링크를 추가 -->
            
            
            <c:if test="${map.pager.curPage <= map.pager.totPage}">
                <a href="#" onclick="list('${map.pager.totPage}')">[끝]</a>
            </c:if> <!-- 현재 페이지블록이 총 페이지블록보다 작거나 같으면 끝으로 갈 수 있도록 링크를 추가함-->
            </td>
    </tr>
    </tbody>
    </center>
</table>
</div>
 
 
<form name="form1" method="post" action="admin_board_list.do">
    <select name="search_option">
        <option value="admin_id"
<c:if test="${map.search_option == 'admin_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>
    <input name="keyword" value="${map.keyword}">
    <input type="submit" value="조회">
   
   <c:if test="${sessionScope.admin_id != null }">
   <button type = "button" id = "btnWrite" align = "right">글쓰기</button>
   </c:if>
</form>
 
 
 
 
</center>
</body>
</html>
cs



adminboardwrite.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
<%@ 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"%><br><br>
<script src = "${path}/ckeditor/ckeditor.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>
  
  
<!-- ckeditor 사용을 위해 js파일을 연결함 -->
<body>
<!-- 글쓰기 폼 작성 -->
<h2>공지사항 작성</h2>
<form method = "post" action = "admin_board_insert.do">
<div class="input-group input-group-sm" role="group" style = "text-align:left">
<table class="table table-striped table-bordered">
<thead>
<tr>
<td><input name = "title" id = "title" size = "80" placeholder = "제목을 입력하세요" class="form-control" aria-describedby="basic-addon1"></td>
</tr>
 
<br><br>
<tr>
<div style = "width:800px;"> 
<td><textarea class="form-control" id = "content" name = "content" rows = "6" cols = "80" placeholder = "내용을 입력하세요">
</textarea></td>
</div>
</tr>
 
</thead>
</table>
</div>
</div>
<center>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<div style = "text-align:center;" >
<button type = "submit" name = "submit" class = "btn btn-default">확인</button></div></div>
</center>
 
 
<script>
//id가 description인 태그에 ckeditor을 적용시킴
//이미지 업로드 안됨
CKEDITOR.replace("content");
</script>
 
 
</form>
</body>
</html>
cs



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
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
<%@ 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>
<%@ include file="../include/header.jsp"%>
<%@ include file="../include/menu.jsp"%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
 
<link rel = "stylesheet" href = "/css/bootstrap.css">
 
//css(디자인 적용)

<style>
    #container {
      width: 70%;
      margin: 0 auto;     /* 가로로 중앙에 배치 */
      padding-top: 10%;   /* 테두리와 내용 사이의 패딩 여백 */
    }
     
    #list {
      text-align: center;
    }
   
    #write {
      text-align: right;
    }
     
    /* Bootstrap 수정 */
    .table > thead {
      background-color: #b3c6ff;
    }
    .table > thead > tr > th {
      text-align: center;
    }
    .table-hover > tbody > tr:hover {
      background-color: #e6ecff;
    }
    .table > tbody > tr > td {
      text-align: center;
    }
    .table > tbody > tr > #title {
      text-align: left;
    }
     
    div > #paging {
      text-align: center;
    }
     
    .hit {
      animation-name: blink;
      animation-duration: 1.5s;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      /* 위 속성들을 한 줄로 표기하기 */
      /* -webkit-animation: blink 1.5s ease infinite; */
    }
     
    /* 애니메이션 지점 설정하기 */
    /* 익스플로러 10 이상, 최신 모던 브라우저에서 지원 */
    @keyframes blink {
      from {color: white;}
      30% {color: yellow;}
      to {color: red; font-weight: bold;}
      /* 0% {color:white;}
      30% {color: yellow;}
      100% {color:red; font-weight: bold;} */
    }
  </style>
 
 
 
<script>
//게시판 목록 페이지로 이동하게 하는 함수
function list(page){
    console.log("페이지를 이동합니다.");
    location.href="list.do?curPage="+page;
};
 
//글쓰기 폼으로 이동하게 하는 함수
$(function(){    
        $("#btnWrite").click(function(){
            location.href="write.do";
        });
});
 
</script>
 
 
 
<%@ include file="../include/login.jsp"%><br>
    
 
 
<center>
<div id = "list">
<d>회원 게시판</d>
<table class="table table-striped table table-hover" align = "top">
<center>
<thead>
    <tr>
    
        <th width = "10%">게시글 번호</th>
        <th width = "20%">제목</th>
        <th width = "20%">작성자</th>
        <th width = "20%">내용</th>
        <th width = "10%">날짜</th>
        <th width = "10%">조회수</th>
        <th width = "10%">추천수</th>
 
    </tr>
    </thead>
    <tbody>
    
    <!-- forEach var = "개별데이터" items = "집합데이터" -->
    <c:forEach var = "row" items = "${map.list}"> <!-- 컨트롤러에서 map안에 list를 넣었기 때문에 이렇게 받는다. -->
    <tr>
        <td>${row.member_bno}</td>    <!-- 글번호 -->
        <!-- 클릭하면 컨트롤러의 view.do로 이동하고, 게시물번호, 페이지 번호, 검색옵션, 키워드를 같이 넘긴다 -->
        <td>
        <a href="view.do?member_bno=${row.member_bno}      
&curPage=${map.pager.curPage}
&search_option=${map.search_option} 
&keyword=${map.keyword}">${row.title}</a>
<c:if test="${row.rcnt > 0}"> 
   <span style="color:red;">( ${row.rcnt} )</span> 
</c:if>  
</td>
 
        <td>${row.user_id}</td>    <!-- 작성자의 이름 -->
        <td>${row.content}</td>    <!-- 글의내용 -->
        <td>${row.reg_date}</td>    <!-- 날짜의 출력형식을 변경함 -->
        <td>${row.viewcnt}</td>    <!-- 조회수 -->
        <td>${row.recommend}</td>    <!-- 추천수 -->
 
 
    
    </tr>
    </c:forEach>
    </tbody>
    
    <!-- 페이지 네비게이션 출력 -->
    <tr>
        <td colspan = "7" align = "center">
            <c:if test="${map.pager.curBlock > 1}">
  <a href="#" onclick="list('1')">[처음]</a>
            </c:if> <!-- 현재 블록이 1블록보다 크면 (뒤쪽에 있기때문에) 처음으로 갈 수 있도록 링크를 추가 -->
        
            <c:if test="${map.pager.curBlock > 1}">
                <a href="#" onclick="list('${map.pager.prevPage}')">
                [이전]</a>
            </c:if> <!-- 현재 블록이 1블록보다 크면 이전 블록으로 이동할 수 있도록 링크 추가 -->
            
            <c:forEach var="num"
                begin="${map.pager.blockBegin}"
                end="${map.pager.blockEnd}">
                <c:choose>
                    <c:when test="${num == map.pager.curPage}">
                    
                    <!-- 현재 페이지인 경우 하이퍼링크 제거 -->
                    <!-- 현재 페이지인 경우에는 링크를 빼고 빨간색으로 처리를 한다. -->
                        <span style="color:red;">${num}</span>
                    </c:when>
                    <c:otherwise>
                        <a href="#" onclick="list('${num}')" >${num}</a>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
            
            
            <c:if test="${map.pager.curBlock <= map.pager.totBlock}">
                <a href="#" onclick="list('${map.pager.nextPage}')">[다음]</a>
            </c:if> <!-- 현재 페이지블록이 총 페이지블록보다 작으면 다음으로 갈 수있도록 링크를 추가 -->
            
            
            <c:if test="${map.pager.curPage <= map.pager.totPage}">
                <a href="#" onclick="list('${map.pager.totPage}')">[끝]</a>
            </c:if> <!-- 현재 페이지블록이 총 페이지블록보다 작거나 같으면 끝으로 갈 수 있도록 링크를 추가함-->
            </td>
    </tr>
    
    </center>
</table>
</div>
 
 
<form name="form1" method="post" action="list.do">
    <select name="search_option">
        <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>
    <input name="keyword" value="${map.keyword}">
    <input type="submit" value="조회">
   
   <button type = "button" id = "btnWrite" align = "right">글쓰기</button>
   
</form>
 
 
 
 
</center>
</body>
</html>
cs




memberboardwrite.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
<%@ 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"%><br><br>
<script src = "${path}/ckeditor/ckeditor.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>
 
<!-- ckeditor 사용을 위해 js파일을 연결함 -->
<body>
<!-- 글쓰기 폼 작성 -->
<h2>글 작성</h2>
<form method = "post" action = "insert.do">
<div class="input-group input-group-sm" role="group" style = "text-align:left">
<table class="table table-striped table-bordered">
<thead>
<tr>
<td><input name = "title" id = "title" size = "80" placeholder = "제목을 입력하세요" class="form-control" aria-describedby="basic-addon1"></td>
</tr>
 
<br><br>
<tr>
<div style = "width:800px;"> 
<td><textarea class="form-control" id = "content" name = "content" rows = "6" cols = "80" placeholder = "내용을 입력하세요">
</textarea></td>
</div>
</tr>
 
</thead>
</table>
 
</div>
</div>
<center>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<div style = "text-align:center;" ><button type = "submit" name = "submit" class="btn btn-default">확인</button></div></div>
</center>
<script>
//id가 description인 태그에 ckeditor을 적용시킴
//이미지 업로드 안됨
CKEDITOR.replace("content");
 
 
 
 
</script>
 
</form>
</body>
</html>
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
277
278
279
280
281
282
283
<%@ 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"></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





저작자표시