close
프로필 배경
프로필 로고

HunIT Blog

프로젝트/1.게시판만들기 ・2015. 12. 12. fullscreen 넓게보기

게시판〃(10) Board_Write / View / Update / Delete / Reply JSP파일

반응형


이틀에 걸쳐 Board_List를 정리하고 나니 나머지 5개의 JSP파일들은 너무 간단해서 한번에 포스팅하려다 보니 게시글 제목이 너무 길어졌습니다. 정말이지 리스트에는 페이징 처리떄문에 머리가 너무 아팠지만 이번 글에서는 휴식을 취하는 시간을 가지겠네요. 


각 파일별로 function함수 뿐이라 별로 정리할 부분도 없으니 얼른 소스코드를 올려놓고, 다음글에서 본문 미리보기에 해당하는 Ajax부분을 정리 하겠습니다. 




■ Board_Write.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>글쓰기</title>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {
    font-family: 'Nanum Gothic', sans-serif;
}
</style>
 
<script type="text/javascript">
    function check() {
        if (document.post.name.value == "" || document.post.name.value == null) {
            alert("이름을 입력하세요.");
            document.post.name.focus();
            return;
        } else if (document.post.email.value == "" || document.post.email.value == null) {
            alert("이메일을 입력하세요.");
            document.post.email.focus();
            return;
        } else if (document.post.title.value == "" || document.post.title.value == null) {
            alert("제목을 입력하세요.");
            document.post.title.focus();
            return;
        } else if (document.post.content.value == "" || document.post.content.value == null) {
            alert("내용을 입력하세요.");
            document.post.content.focus();
            return;
        } else if (document.post.password.value == "" || document.post.password.value == null) {
            alert("비밀번호를 입력하세요.");
            document.post.password.focus();
            return;
        } else {
            document.post.submit();
        }
    }
</script>
</head>
 
<body>
 
    <table summary="글쓰기 전체 테이블">
        <form name="post" method="post" action="boardWrite.action">
 
            <colgroup>
                <col width="20%">
                <col width="80%">
            </colgroup>
 
 
            <table summary="테이블 구성">
                <caption>게시판 글쓰기</caption>
                <tr>
                    <td>작성자</td>
                    <td><input type=text name=name size=10 maxlength=8></td>
                </tr>
                <tr>
                    <td>E-Mail</td>
                    <td><input type=text name=email size=30></td>
                </tr>
                <tr>
                    <td>홈페이지</td>
                    <td><input type=text name=homepage size=30></td>
                </tr>
                <tr>
                    <td>제 목</td>
                    <td><input type=text name=title></td>
                </tr>
                <tr>
                    <td>내 용</td>
                    <td><textarea name=content rows="10" cols="100"></textarea></td>
                </tr>
                <tr>
                    <td>비밀번호</td>
                    <td><input type=password name=password size=15 maxlength=15></td>
                </tr>
                <tr>
                    <td colspan=2><hr size=1></td>
                </tr>
                <tr>
                    <td colspan="3"><div align="center">
                            <input type="button" value="등록" onclick="check()" >  
                            <input type="button" value="뒤로" onclick="history.back()">
                        </div>  </td>
                </tr>
            </table>
        </form>
    </table>
 
</body>
</html>




▲  게시판 글쓰기 소스코드

다른 부분도 동일하겠지만 여기서 추가해준 것은 [87번째줄]에 등록버튼을 누르면 onClick="check( )"로 자바스크립트단의 check가 명령을 수행하도록 요청합니다. 그래서 [16~42번째줄]로 올라가 보면 if문을 써서 공백이나 null값이 들어오면 alert();로 알림을 뛰우고 그렇지 않다면 submit으로 [42번째줄]의 action인 "boardWrite.action"으로 Write컨트롤러가 수행합니다. 저번글에서 검색기능을 찾아보시면 경로를 추적한 부분이 있으니 참고하시면 좋을 것 같습니다. 링크는 제일 아랫부분에 걸어두겠습니다.




■ Board_View.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>글 읽기</title>
<script type="text/javascript">
    function list(){
        document.list.action="boardList.action";
         document.list.submit();
     } 
</script>
 
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {
    font-family: 'Nanum Gothic', sans-serif;
}
</style>
</head>
 
<body>
<!--     <form name="BoardViewForm" method="post"> -->
    <table summary="전체 테이블 구성" width=600 height=400 cellpadding=5 cellspacing=0>
    <tr>
        <td ><div align="center"><h3><b>글 읽기</b></h3></div></td>
    </tr>
    <tr>
        <td colspan=2>
        <table border="1" summary="목록 테이블 구성"> 
    <tr> 
        <td align=center bgcolor=#dddddd width=20%> 작성자</td>
        <td bgcolor=#ffffe8 width=30%>${dto.name}</td>
        <td align=center bgcolor=#dddddd width=15%> 작성일</td>
        <td bgcolor=#ffffe8 width=50%>${dto.regdate }</td>
    </tr>
    <tr>
        <td align=center bgcolor=#dddddd> E-mail </td>
        <td bgcolor=#ffffe8 >${dto.email }</td> 
        <td align=center bgcolor=#dddddd> 홈페이지 </td>
        <td bgcolor=#ffffe8><a href="http://${dto.homepage}" target="_new">http://${dto.homepage}</a></td> 
    </tr>
    <tr> 
        <td align=center bgcolor=#dddddd> 제 목</td>
        <td bgcolor=#ffffe8 colspan=3>${dto.title}</td>
   </tr>
   <tr> 
        <td colspan=4><br>${dto.content }<br></td>
   </tr>
   <tr>
        <td colspan=4 align=right> 조회수  : ${dto.count}</td>
   </tr>
    </table>
    </td>
     </tr>
    <tr>
        <td align=center colspan=2> 
        <hr size=1>
        <div align="center">
        [ <a href="javascript:list()">목 록</a> | 
            <a href="boardUpdate.action?seq=${dto.seq}">수 정</a> |
            <a href="boardReply.action?seq=${dto.seq}">답 변</a> |
            <a href="boardDelete.action?seq=${dto.seq}">삭 제 </a>]<br>
        </div>
        </td>
    </tr>
    </table>
    <form name="list" method="post">
        <input type="hidden" name="seq" value="${dto.seq}">
        <input type="hidden" name="keyField" value="${keyField}">
        <input type="hidden" name="keyWord" value="${keyWord}">
    </form>
 
</body>
</html>



▲  게시판 글보기 소스코드

글보기 소스코드에서 [70~74번째줄]의 hidden을 한번 더 짚고 넘어가겠습니다. 보통 JSP나 HTML에서 Form을 화면에 보여주기 위해 사용하지만, 이미 저장되어 있는 데이타를 외부에 노출시킬 필요가 없을때 숨겨 놓기 위해 사용됩니다. [62번째줄]에서 목록으로 가기 위해 list( )를 소환하고, [9~14번째줄]에서 function list의 객체를 사용하기 위해 [70~74]의 <form name="list">안에 hidden 객체들을 저장해두는 것이죠.


또한 [63~65번째줄]에서 action?seq=${dto.seq}로 링크를 연결 하는 이유는 해당 컨트롤러로 전송을 하지만 해당 게시글이 어떤글인지 seq(시퀀스)값으로 부여된 번호를 같이 데리고 가는 것입니다. 예를 들어 1번 게시글, 2번 게시글, 3번 게시글이 있습니다. 2번 게시물은 고유번호인 seq가 2로 저장되있고 이에 해당하는 이름과 패스워드, 본문내용들이 seq=2에 저장됩니다. 그래서 seq가 2인 게시물을 수정하겠다 이러면 seq=2에 저장되어 있는 데이타들이 수정되는 원리입니다. 




■ Board_Update.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>글 수정</title>
</head>
 
<script type="text/javascript">
 
    function check() {
        if (document.form.name.value == "" || document.form.name.value == null) {
            alert("이름을 입력하세요.");
            document.form.name.focus();
            return;
        }
        else if(document.form.email.value == "" || document.form.email.value == null) {
            alert("이메일을 입력하세요.");
            document.form.email.focus();
            return;
        } 
        else if(document.form.title.value == "" || document.form.title.value == null) {
            alert("제목을 입력하세요.");
            document.form.title.focus();
            return;
        }
        else if(document.form.content.value == "" || document.form.content.value == null) {
            alert("내용을 입력하세요.");
            document.form.content.focus();
            return;
        } else if(document.form.pass.value == "" || document.form.pass.value==null){
            alert("비밀번호를 입력하세요");
            document.form.pass.focus();
            return;
        } else if(document.form.pass.value != document.form.password.value){
            alert("비밀번호가 틀리셨습니다. 재입력해주세요");
            document.form.pass.focus();
            return;
        }else{
            document.form.submit();
            }
        }
 
</script>
 
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {
    font-family: 'Nanum Gothic', sans-serif;
}
</style>
<body>
 
    <table summary="글수정 전체 테이블">
        <form name="form" method="post" action="boardUpdate.action" >
        <input type="hidden" name="seq" value="${dto.seq }"/>
        <input type="hidden" name="password" value="${dto.password }"/>        
           
           <colgroup>
               <col width="20%">
               <col width="80%">
           </colgroup>
       
 
        <table summary="테이블 구성" >
        <caption>글 수정하기 [${dto.seq }번] 게시물</caption>    
            <tr>
                <td>작성자</td>
                <td><input type=text name=name size=10 maxlength=8 value="${dto.name }"></td>
            </tr>
            <tr>
                 <td>E-Mail</td>
                 <td><input type=text name=email size=30 value="${dto.email }"></td>
            </tr>
            <tr>
                 <td>제 목</td>
                 <td><input type=text name=title value="${dto.title }"></td>
            </tr>
            <tr>
                 <td>내 용</td>
                 <td><textarea name=content rows ="10" cols="100">${dto.content }</textarea></td>
            </tr>
            <tr>
                 <td>비밀번호</td> 
                 <td><input type=password name=pass size=15 maxlength=15>수정시에는 비밀번호가 필요합니다.</td>
            </tr>
            <tr>
                 <td colspan=2><hr size=1></td>
            </tr>
            <tr>
                 <td colspan="3"><div align="center">
                 <input type="button" value="수정 완료" onclick="check()">  
                <input type=reset value="다시 수정"> 
                 <input type="button" value="뒤로" onclick="history.back()"></div>
                 </td>
            </tr> 
        </table>
    </form> 
</table>
 
</body>
</html>


▲  게시판 글수정 소스코드

여기 보이는 코드들은 전부 한번씩 정리했던 것들이라.. 게시판 프로젝트 글을 순서대로 따라오셨다면 뭐가 뭔지 아실거라 생각합니다.  다음 Delete와 Reply도 똑같아요!!




■ Board_Delete.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>글 삭제하기</title>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {
    font-family: 'Nanum Gothic', sans-serif;
}
</style>
 
<script type="text/javascript">
function check(storPass) {
    if (document.form.password.value == "") {
        alert("패스워드를 입력하세요.");
        form.pass.focus();
        return false;
    }
    if(document.form.password.value != storPass){
        alert("비밀번호가 틀리셨습니다.");
            form.pass.focus();
        return false;
    }
    document.form.submit();
}
</script>
</head>
 
<body>
    <center>
    <br><br>
    <table width=50% cellspacing=0 cellpadding=3>
         <tr>
            <td bgcolor=#dcdcdc height=21 align=center>
            작성자의 비밀번호를 입력해 주세요.</td>
        </tr>
    </table>
    
    <table width=70% cellspacing=0 cellpadding=2>
        <form name=form method=post action="boardDelete.action" >
        <input type ="hidden"  name="storPass" value="${storPass}"/>
        <input type ="hidden"  name="seq" value="${seq }"/>
     <tr>
        <td align=center>
        <table align=center border=0 width=91%>
    <tr> 
         <td align=center>  
          <input type=password name="password" size=17 maxlength=15>
         </td> 
    </tr>
    <tr>
        <td><hr size=1 color=#eeeeee></td>
    </tr>
    <tr>
        <td align=center>
      <input type=button value="삭제완료" onClick="check('${storPass}')"> 
      <input type=reset value="다시쓰기"> 
      <input type=button value="뒤로" onClick="history.go(-1)">
        </td>
    </tr> 
    </table>
    </td>
    </tr>
    </form> 
    </table>
    </center>
</body>
</html>



▲  게시판 글삭제 소스코드




■ Board_Reply.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>답변</title>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {
    font-family: 'Nanum Gothic', sans-serif;
}
</style>
 
<script type="text/javascript">
    function check() {
        if (document.post.name.value == "" || document.post.name.value == null) {
            alert("이름을 입력하세요.");
            document.post.name.focus();
            return;
        }
        else if(document.post.email.value == "" || document.post.email.value == null) {
            alert("이메일을 입력하세요.");
            document.post.email.focus();
            return;
        } 
        else if(document.post.title.value == "" || document.post.title.value == null) {
            alert("제목을 입력하세요.");
            document.post.title.focus();
            return;
        }
        else if(document.post.content.value == "" || document.post.content.value == null) {
            alert("내용을 입력하세요.");
            document.post.content.focus();
            return;
        } 
        else if(document.post.password.value == "" || document.post.password.value == null) {
            alert("비밀번호를 입력하세요.");
            document.post.password.focus();
            return;
        } 
        else {
            document.post.submit();
        }
    }
</script>
</head>
 
<body>
    <table class="contatiner">
     <tr>
          <td bgcolor=#dcdcdc height=25 align=center>답변달기</td>
     </tr>
    </table>
    <br>
    
    <table class="table-bordered">
    <form name="post" method="post" action="boardReply.action">
    <input type="hidden" name="temp_seq" value="${dto.seq }">
        <tr>
        <td>
        <table border=0 width=100% align=center>
        <tr>
            <td align="center">작성자</td>
            <td ><input type=text name=name size=10 maxlength=8></td>
        </tr>
        <tr>
             <td align="center">E-Mail</td>
             <td><input type=text name=email size=30 maxlength=30></td>
        </tr>
        <tr>
            <td align="center">홈페이지</td>
            <td><input type=text name=homepage size=40 maxlength=30></td>
        </tr>
        <tr>
            <td width=10% align="center">제 목</td>
            <td width=50%><input type=text name=title size=50 maxlength=30 value="RE : ${dto.title }"></td>
        </tr>
        <tr>
            <td width=10% align="center">내 용</td>
            <td><textarea name=content rows=10 cols=70> ${dto.content} 
 
----------------------------------------------
 
댓글|
 
        </textarea></td>
        </tr>
        <tr>
            <td width=10% align="center">비밀 번호</td> 
            <td width=70% ><input type=password name="password" size=15 maxlength=15></td>
            </tr>
        <tr>
            <td colspan=2><hr size=2></td>
        </tr>
        <tr>
            <td colspan="3" align="center">
                <input type="button" onclick="check()" value="답변 등록" class="btn" >  
                <input type="button" value="뒤로가기" class="btn" onclick="javascript:history.back()">  
             </td>
        </tr> 
        </table>
        </td>
        </tr>    
    </form>
    </table>
    
</body>
</html>



▲  게시판 글삭제 소스코드



▼ 관련글


2015/12/08 - Jsp〃[EL]과 [JSTL] 한방에 정리 + Core

2015/12/10 - 게시판만들기〃(9) Board_List.jsp 작성하기

2015/11/25 - 게시판만들기〃(2-3) 글쓰기 / 글삭제/ 답변 살펴보기

2015/11/24 - 게시판만들기〃(2-2) 게시글 읽기 / 게시글 수정

2015/11/24 - 게시판만들기〃(2) 화면 설계 [소스+jsp파일 포함]



이렇게 저번글인 Board_List에 이어 Write / View / Update / Delete / Reply 총 6개의 Jsp파일을 살펴 보았습니다. 11월 23일부터 블로그에 정리하기 시작했으니 View역활을 하는 Jsp파일까지 정리하는데 약 3주정도의 시간이 걸렸네요. 앞으로 남은 게시글은 이 프로젝트 폴더를 메이븐(Maven)으로 연동하고, 게시글 미리보기에 해당하는 Ajax부분만 남았습니다. 

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

'프로젝트 > 1.게시판만들기' 카테고리의 다른 글

해당 게시판 WAR 파일 구글 드라이브 링크 공유  (0) 2019.09.16
게시판〃(13) 완성!! 출력 화면과 영상  (7) 2015.12.15
게시판〃(12) AJAX로 본문 미리보기 구현  (0) 2015.12.15
게시판〃(11) 메이븐 프로젝트로 Convert  (2) 2015.12.12
게시판〃(9) Board_List.jsp 작성하기  (3) 2015.12.10
게시판〃(8) MyBatis로 DB 연동  (8) 2015.12.07
게시판〃(7) SQL 데이타베이스 생성  (1) 2015.12.07
게시판〃(6) Controller 패키지 작성  (0) 2015.12.06
프로젝트/1.게시판만들기 관련 글
더 보기

티스토리툴바