[JSP개발] 게시판, 방명록, 댓글 줄바꿈 처리

1. 개요

■ 지난 포스팅 : [JSP개발] 회원가입 - 아이디 중복체크 구현

게시판과 방명록, 그리고 댓글 부분에 줄바꿈이 표시되도록 처리를 할 것이다. 줄바꿈 처리는 Action 쪽에서 처리할 수도 있고 JSP 쪽에서도 처리할 수 있다.

여기서는 JSTL을 이용해서 JSP 쪽에서 줄바꿈 처리를 할 것이다.

■ JSP

BoardDetailForm.jsp : 글 상세보기 화면이다. 게시글과 댓글 부분에 줄바꿈 처리를 할 것이다.
GuestbookForm.jsp : 방명록 화면이다.

2. 소스 코드

■ BoardDetailForm.jsp

글을 입력할 때 엔터를 사용하면 화면에는 나타나지 않지만 DB에 저장될 때 각종 개행문자들이 들어가게 된다. 이것을 화면성에서 찾아내어 다른 html에서 인식 가능한 <br>로 변경해줘야 한다.

이렇게 개행문자를 변경하기 위해 JSP에서는 JSTL을 이용하면 된다. JSTL 태그 중에 fn이 있는데 이것은 함수처리를 담당하는 태그이다. 여기에는 문자를 변환하는 함수가 제공되는데, 이것을 사용하면 된다.

4줄 : fn은 JSTL에서 제공하는 함수처리 태그이다. 줄바꿈시 JSTL에서 제공하는 함수를 이용할 것이다.
8~9줄 : 치환할 변수를 설정한다.

소스 코드를 보면 게시글 내용을 출력하는 부분이 있다. 이 부분을 변경해야 한다.

193줄 : 기존에는 ${board.board_content}로 되어있다. 이것을 위와 같이 변경한다.

replace("내용", A, B) : 내용에 포함된 A라는 문자를 B라는 문자로 변경한다.

게시글 부분과 마찬가지로 댓글 내용을 보여주는 부분도 fn:replace 로 변경을 한다.

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
284
285
286
287
288
289
290
291
292
293
294
295
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
 
<%
    // 줄바꿈 
    pageContext.setAttribute("br", "<br/>");
    pageContext.setAttribute("cn", "\n");
%> 
 
<html>
<head>
    <title>글 상세보기</title>
    
    <style type="text/css">
        #wrap {
            width: 800px;
            margin: 0 auto 0 auto;    
        }
    
        #detailBoard{
            text-align :center;
        }
        
        #title{
            height : 16;
            font-family :'돋움';
            font-size : 12;
            text-align :center;
            background-color: #F7F7F7;
        }
        
        #btn{
            font-family :'돋움';
            font-size : 14;
            text-align :center;
        }
 
   </style>
    
    <script type="text/javascript">
        function changeView(value)
        {
            if(value == 0)    
                location.href='BoardListAction.bo?page=${pageNum}';
            else if(value == 1)
                location.href='BoardReplyFormAction.bo?num=${board.board_num}&page=${pageNum}';
        }
        
        function doAction(value)
        {
            if(value == 0) // 수정
                location.href="BoardUpdateFormAction.bo?num=${board.board_num}&page=${pageNum}";
            else if(value == 1) // 삭제
                location.href="BoardDeleteAction.bo?num=${board.board_num}";
        }
        
 
        var httpRequest = null;
        
        // httpRequest 객체 생성
        function getXMLHttpRequest(){
            var httpRequest = null;
        
            if(window.ActiveXObject){
                try{
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");    
                } catch(e) {
                    try{
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e2) { httpRequest = null; }
                }
            }
            else if(window.XMLHttpRequest){
                httpRequest = new window.XMLHttpRequest();
            }
            return httpRequest;    
        }
        
        // 댓글 등록
        function writeCmt()
        {
            var form = document.getElementById("writeCommentForm");
            
            var board = form.comment_board.value
            var id = form.comment_id.value
            var content = form.comment_content.value;
            
            if(!content)
            {
                alert("내용을 입력하세요.");
                return false;
            }
            else
            {    
                var param="comment_board="+board+"&comment_id="+id+"&comment_content="+content;
                    
                httpRequest = getXMLHttpRequest();
                httpRequest.onreadystatechange = checkFunc;
                httpRequest.open("POST", "CommentWriteAction.co", true);    
                httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=EUC-KR'); 
                httpRequest.send(param);
            }
        }
        
        function checkFunc(){
            if(httpRequest.readyState == 4){
                // 결과값을 가져온다.
                var resultText = httpRequest.responseText;
                if(resultText == 1){ 
                    document.location.reload(); // 상세보기 창 새로고침
                }
            }
        }
        
        // 댓글 답변창
        function cmReplyOpen(comment_num){
            var userId = '${sessionScope.sessionID}';
            
            if(userId == "" || userId == null){
                alert("로그인후 사용가능합니다.");
                return false;
            }
            else{
                // 댓글 답변창 open
                window.name = "parentForm";
                window.open("CommentReplyFormAction.co?num="+comment_num,
                            "replyForm", "width=570, height=350, resizable = no, scrollbars = no");
            }
        }
        
        // 댓글 삭제창
        function cmDeleteOpen(comment_num){
            var msg = confirm("댓글을 삭제합니다.");    
            if(msg == true){ // 확인을 누를경우
                deleteCmt(comment_num);
            }
            else{
                return false; // 삭제취소
            }
        }
    
        // 댓글 삭제
        function deleteCmt(comment_num)
        {
            var param="comment_num="+comment_num;
            
            httpRequest = getXMLHttpRequest();
            httpRequest.onreadystatechange = checkFunc;
            httpRequest.open("POST", "CommentDeleteAction.co", true);    
            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=EUC-KR'); 
            httpRequest.send(param);
        }
        
        // 댓글 수정창
        function cmUpdateOpen(comment_num){
            window.name = "parentForm";
            window.open("CommentUpdateFormAction.co?num="+comment_num,
                        "updateForm", "width=570, height=350, resizable = no, scrollbars = no");
        }
        
   </script>
</head>
<body>
 
<div id="wrap">
    <br><br>
    <div id="board">
        <table id="detailBoard" width="800" border="3" bordercolor="lightgray">
        
            <tr>
                <td id="title">작성일</td>
                <td>${board.board_date}</td>
            </tr>
            <tr>
                <td id="title">작성자</td>
                <td>${board.board_id}</td>
            </tr>
            <tr>
                <td id="title">
                    제 목
                </td>
                <td>
                    ${board.board_subject}
                </td>        
            </tr>
            <tr>
                <td id="title">
                    내 용
                </td>
                <td>
                    ${fn:replace(board.board_content, cn, br)}
                </td>        
            </tr>
            <tr>
                <td id="title">
                    첨부파일
                </td>
                <td>
                    <a href='FileDownloadAction.bo?file_name=${board.board_file}'>${board.board_file}</a>
                </td>    
            </tr>
    
            <tr align="center" valign="middle">
                <td colspan="5">
                <c:if test="${sessionScope.sessionID !=null}">
                    <c:if test="${sessionScope.sessionID == board.board_id}">
                        <input type="button" value="수정" onclick="doAction(0)">
                        <input type="button" value="삭제" onclick="doAction(1)">
                    </c:if>
                        <input type="button" value="답글" onclick="changeView(1)" >
                </c:if>        
                    <input type="button" value="목록" onclick="changeView(0)">            
                </td> <!-- javascript:location.href='BoardListAction.bo?page=${pageNum}' -->
            </tr>
        </table>
    </div>
    <br><br>
    
    <!-- 댓글 부분 -->
    <div id="comment">
        <table border="1" bordercolor="lightgray">
    <!-- 댓글 목록 -->    
    <c:if test="${requestScope.commentList != null}">
        <c:forEach var="comment" items="${requestScope.commentList}">
            <tr>
                <!-- 아이디, 작성날짜 -->
                <td width="150">
                    <div>
                        <c:if test="${comment.comment_level > 1}">
                                 <!-- 답변글일경우 아이디 앞에 공백을 준다. -->
                            <img src="img/reply_icon.gif">
                        </c:if>
                    
                        ${comment.comment_id}<br>
                        <font size="2" color="lightgray">${comment.comment_date}</font>
                    </div>
                </td>
                <!-- 본문내용 -->
                <td width="550">
                    <div class="text_wrapper">
                        ${fn:replace(comment.comment_content, cn, br)}
                    </div>
                </td>
                <!-- 버튼 -->
                <td width="100">
                    <div  id="btn">
                        <a href="#" onclick="cmReplyOpen(${comment.comment_num})">[답변]</a><br>
                    <!-- 댓글 작성자만 수정, 삭제 가능하도록 -->    
                    <c:if test="${comment.comment_id == sessionScope.sessionID}">
                        <a href="#" onclick="cmUpdateOpen(${comment.comment_num})">[수정]</a><br>    
                        <a href="#" onclick="cmDeleteOpen(${comment.comment_num})">[삭제]</a>
                    </c:if>        
                    </div>
                </td>
            </tr>
            
        </c:forEach>
    </c:if>
            
            <!-- 로그인 했을 경우만 댓글 작성가능 -->
            <c:if test="${sessionScope.sessionID !=null}">
            <tr bgcolor="#F5F5F5">
            <form id="writeCommentForm">
                <input type="hidden" name="comment_board" value="${board.board_num}">
                <input type="hidden" name="comment_id" value="${sessionScope.sessionID}">
                <!-- 아이디-->
                <td width="150">
                    <div>
                        ${sessionScope.sessionID}
                    </div>
                </td>
                <!-- 본문 작성-->
                <td width="550">
                    <div>
                        <textarea name="comment_content" rows="4" cols="70" ></textarea>
                    </div>
                </td>
                <!-- 댓글 등록 버튼 -->
                <td width="100">
                    <div id="btn">
                        <p><a href="#" onclick="writeCmt()">[댓글등록]</a></p>    
                    </div>
                </td>
            </form>
            </tr>
            </c:if>
    
        </table>
    </div>
</div>    
 
</body>
</html>
Colored by Color Scripter
cs

■ GuestbookForm.jsp

방명록 부분도 글 상세보기 처럼 상단에 위 코드를 추가한다.

방명록 내용을 표시하는 ${guestbook.guestbook_content} 부분을 ${fn:replace(guestbook.guestbook_content, cn, br)}로 변경한다.

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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
 
<%
    // 줄바꿈 
    pageContext.setAttribute("br", "<br/>");
    pageContext.setAttribute("cn", "\n");
%> 
 
<html>
<head>
    <title>방명록</title>
    
    <style type="text/css">
        #wrap {
            width: 700px;
            margin: 0 auto 0 auto;
        }
        
        #comment{
            text-align :left;
        }
        
        #listGuestForm{
            text-align :center;
            /*overflow:scroll; 
            overflow-x:hidden; 
            height:220px;*/
        }
        
        #writeGuestForm, #pageForm{
            text-align :center;
        }
   </style>
    
    <script type="text/javascript">
        // 입력값 체크
        function checkValue()
        {
            if(!document.guestbookInfo.guestbook_id.value){
                alert("이름을 입력하세요.");
                return false;
            }
            
            if(!document.guestbookInfo.guestbook_password.value){
                alert("비밀번호를 입력하세요.");
                return false;
            }
            
            if(!document.guestbookInfo.guestbook_content.value){
                alert("내용을 입력하세요.");
                return false;
            }
        }
        
        // 답글창 open
        function openReplyForm(guestbook_no)
        {
            // window.name = "부모창 이름"; 
            window.name = "replyForm";
            // window.open("open할 window", "자식창 이름", "팝업창 옵션");
            window.open("GuestbookReplyFormAction.ge?num="+guestbook_no+"&page=${spage}",
                    "rForm", "width=570, height=350, resizable = no, scrollbars = no");
        }
        
        // 삭제창 open
        function openDelForm(guestbook_no)
        {
            window.name = "parentForm";
            window.open("GuestbookDeleteFormAction.ge?num="+guestbook_no,
                    "delForm", "width=570, height=350, resizable = no, scrollbars = no");
        }
        
        // 수정창 open
        function openUpdateForm(guestbook_no)
        {
            window.name = "parentForm";
            window.open("GuestbookUpdateFormAction.ge?num="+guestbook_no+"&page=${spage}",
                    "updForm", "width=570, height=350, resizable = no, scrollbars = no");
        }
 
   </script>
        
</head>
<body>
 
    <br>
    <b><font size="5" color="gray">방명록</font></b>
    <hr size="1" width="700">
    <br>
    
<div id="wrap">    
 
    <!-- 글 등록 부분 시작-->
    <div id="writeGuestForm">
        <form name="guestbookInfo" method="post" action="GuestbookWriteAction.ge"
            onsubmit="return checkValue()" >
            <table width="700">
                <tr>
                    <td>이름 : </td>
                    <!-- 로그인했을 경우 방명록의 이름 부분의 아이디를 세팅한다 -->
                    <c:if test="${sessionScope.sessionID!=null}">
                        <td>
                            ${sessionScope.sessionID}
                            <input type="hidden" name="guestbook_id" value="${sessionScope.sessionID}">
                        </td>
                    </c:if>
                    <c:if test="${sessionScope.sessionID==null}">
                         <td><input type="text" name="guestbook_id"></td>
                    </c:if>
                    
                    <td>비밀번호 : </td>
                    <td><input type="password" name="guestbook_password"></td>
                </tr>
                <tr><td colspan="4"> </td></tr>
                <tr>
                    <td colspan="4">
                        <textarea rows="7" cols="80" name="guestbook_content"></textarea>
                    </td>
                </tr>
            </table>
            <br>
            <input type="submit" value="등록">
        </form>
    </div>
    <!-- 글 등록 부분 끝-->
 
    <!-- 글 목록 부분 시작 -->
    <div id="listGuestForm">
        <form method="post" name="">
        
            <!-- 방명록 내용 부분 -->
            <div id="comment">
                <c:forEach var="guestbook" items="${requestScope.list}">
                    <hr size="1" width="700">        
                    <c:if test="${guestbook.guestbook_level > 1}">
                        <c:forEach begin="1" end="${guestbook.guestbook_level}">
                               <!-- 답변글일경우 아이디 앞에 공백을 준다. -->
                        </c:forEach>
                        <img src="img/reply_icon.gif">
                    </c:if>
                    <label>${guestbook.guestbook_id}</label>   
                    <label>${guestbook.guestbook_date}    </label>
                    <a href="#" onclick="openReplyForm(${guestbook.guestbook_no})">[답변]</a> 
                    <a href="#" onclick="openUpdateForm(${guestbook.guestbook_no})">[수정]</a> 
                    <a href="#" onclick="openDelForm(${guestbook.guestbook_no})">[삭제]</a><br>
                     ${fn:replace(guestbook.guestbook_content, cn, br)} <br>
                 </c:forEach>    
                     <hr size="1" width="700">
            </div>
                 
            <!-- 페이지 부분 -->
             <div id="pageForm">
                <c:if test="${startPage != 1}">
                    <a href='GuestbookListAction.ge?page=${startPage-1}'>[ 이전 ]</a>
                </c:if>
                
                <c:forEach var="pageNum" begin="${startPage}" end="${endPage}">
                    <c:if test="${pageNum == spage}">
                        ${pageNum} 
                    </c:if>
                    <c:if test="${pageNum != spage}">
                        <a href='GuestbookListAction.ge?page=${pageNum}'>${pageNum} </a>
                    </c:if>
                </c:forEach>
                
                <c:if test="${endPage != maxPage }">
                    <a href='GuestbookListAction.ge?page=${endPage+1 }'>[다음]</a>
                </c:if>
            </div> 
        </form>
     </div>
     <!-- 글 목록 부분 끝 -->
 
</div>
     
</body>
</html>
Colored by Color Scripter
cs

3. 실행 결과

줄바꿈이 적용되는지 확인하기 위해 글쓰기에 엔터를 쳐가며 내용을 입력해 본다.

방금 전 작성한 글을 보자. 줄바꿈이 적용된 것을 확인할 수 있다.

댓글도 테스트를 해보면 줄바꿈이 적용되는 것을 알 수 있다.

글 수정을 하면 줄바꿈이 적용된 상태로 나타난다.

방명록도 마찬가지로 엔터를 쳐가며 글을 입력한다.

방명록을 등록하고 나면 줄바꿈이 적용된 것을 볼 수 있다.

4. 소스코드 다운로드 (war 파일)

JSP_DEV.war

저작자표시 비영리 변경금지

'코딩 > JSP' 카테고리의 다른 글

[JSP개발] 회원가입 답변형 게시판 (8)	2017.02.06
[JSP개발] 회원가입 - 아이디 중복체크 구현 (19)	2017.01.06
[JSP개발] 게시판 - 댓글 수정 (0)	2017.01.05
[JSP개발] 게시판 - 댓글 삭제 (1)	2017.01.04
[JSP개발] 게시판 - 댓글 답변 구현 (4)	2017.01.03