JSP와 mysql을 이용하여 MVC패턴 MODEL1 방식 게시판 만들기(2020년 8월 27일 완성)

JSP 게시판을 완성하였습니다. 사실 완성하기까지 코드만 본다면 많은 시간이 소요되지 않았는데 제 개인적인 사정이 생겨서 완성이 늦어졌습니다. 완성본의 구현 기능은 게시판 기능인 CRUD(글 쓰기, 글 수정, 페이징 등)를 다 구현했습니다.

이전까지의 과정이 궁금하시다면 아래 글을 참고하세요.

JSP와 mysql을 이용하여 게시판 만들기(2020년 8월 17일까지 진행 과정)

현재 진행 중인 프로젝트에 Spring이나 JSP를 이용한 게시판이 필요할거 같아서 만들면서 공부하기로 하여 여러 블로그와 동빈나님의 유튜브를 참고하여 만들어 보았습니다. 아직 완성 단계는 아�

kobalja2020.tistory.com

※ 이전 글을 이어서 작성하기 때문에 B-8부터 시작합니다.

B-8. 게시판 데이터베이스 구축 및 글쓰기 기능 구현하기

글쓰기 기능을 구현하기 전에 게시판에 글을 작성 했을 시 그 데이터가 저장될 수 있도록 게시판 데이터베이스를 만들어주어야합니다.

먼저 게시판 데이터베이스를 연동할 bbs 테이블을 생성해줍니다. 그리고 컬럼은 아래와 같습니다.

create table bbs(

bbsID int,

bbsTitle varchar(50),

userID varchar(20),

bbsDate datetime,

bbsContent varchar(2048),

bbsAvailable int,

primary key (bbsID)

);

bbsID = 게시글 번호

bbsTitle = 게시글에 대한 제목

userID = 게시글의 사용자 ID(작성자)

bbsDate = 작성된 날짜

bbsContent = 게시글에 작성된 글

bbsAvailable = 글의 삭제 유무를 확인할 수 있음

그 후 하나의 게시글에 대한 정보를 관리하는 데이터베이스에 접근할 수 있도록 하는 클래스가 필요하므로 bbs라는 패키지를 만들어주고 그 안에 Bbs라는 빈즈를 생성해줍니다.(DB의 각 게시글을 관리할 수 있도록 하는 자바프로그램)

JSP 게시판 만들기 - Bbs.java(2020.08.27 완성)

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 package bbs; public cl..

kobalja2020.tistory.com

B-7.의 글까지 보면 글쓰기 버튼을 클릭했을 때 write.jsp로 이동하도록 페이지를 설정했기 때문에 write.jsp를 만들어주었습니다.

JSP 게시판 만들기 - write.jsp(2020.08.27 완성)

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..

kobalja2020.tistory.com

bbs.jsp의 내용을 복사한 뒤 write.jsp 파일에 붙여넣기를 해주었고 container 부분의 method는 post방식, action=writeAction.jsp(글쓰기 기능 구현)로 설정해줍니다. 그 후 글내용 화면을 만들어 주는데 글제목은 input type="text"로 글 내용은 input type을 textarea로 설정해주고 글쓰기는 버튼 형식으로 설정합니다.

이 후 글쓰기 버튼을 클릭 시 writeAction 페이지가 실행 될 수 있게 BbsDAO 클래스를 만들어줍니다.(UserDAO와 같다.)

BbsDAO.jsp에 게시판의 글쓰기에 필요한 기능( 글 작성마다 번호 증가-getDate(), 현재 시간 출력-getNext(), 글 작성-write() )의 함수를 추가해줍니다.

또한 생성한 writeAction 페이지에 bbs패키지의 Bbs빈즈를 이용하기 위해 아래를 수정 및 추가해줍니다.

<% page import="bbs.BbsDAO"%> --> 수정

<jsp:useBean id="bbs" class="bbs.Bbs" scope="page" />

<jsp:setProperty name="bbs" property="bbsTitle" />

<jsp:setProperty name="bbs" property="bbsContent" />

※ 아래의 그림에서 방금 작성했던 내용이 mysql 데이터에 잘 들어간걸 확인 할 수 있습니다.

B-9. 게시판 글 목록 기능, 페이징 구현하기

게시판 데이터베이스에서 글 목록을 가져오므로 BbsDAO 빈즈에 함수를 생성해줍니다.(글의 목록을 가져오는 함수-getList, 페이징 처리 함수)

JSP 게시판 만들기 - BbsDAO.java(2020.08.27 완성)

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..

kobalja2020.tistory.com

이 후에 게시판의 메인화면을 수정해 주어야합니다. 먼저 bbs.jsp에서 아래의 import문을 선언해줍니다.

<%@ page import="bbs.BbsDAO"%>

<%@ page import="bbs.Bbs"%>

<%@ page import="java.util.ArrayList"%>

그리고 bbs.jsp의 게시판 화면 코드인 table 부분에 아래의 코드로 수정해줍니다.(BbsDAO 객체 추가, 글 목록 읽어오는 기능 추가, 페이징 처리 기능 추가, 로그인이 되었을 때만 글쓰기 버튼 클릭 할 수 있도록 기능 추가)

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

    <!-- 게시판 화면 -->
    <div class="container">
        <div class="row">
            <table class="table table-striped"
                style="text-align: center; border: 1px solid #dddddd">
                <thead>
                    <tr>
                        <th style="background-color: #b7b7ff; text-align: center;">번호</th>
                        <th style="background-color: #b7b7ff; text-align: center;">제목</th>
                        <th style="background-color: #b7b7ff; text-align: center;">작성자</th>
                        <th style="background-color: #b7b7ff; text-align: center;">작성일</th>
                    </tr>
                </thead>
                <tbody>
                    <%
                        BbsDAO bbsDAO = new BbsDAO();
                    ArrayList<Bbs> list = bbsDAO.getList(pageNumber);
                    for (int i = 0; i < list.size(); i++) {
                    %>
 
                    <tr>
                        <td><%=list.get(i).getBbsID()%></td>
                        <td><a href="view.jsp?bbsID=<%=list.get(i).getBbsID()%>"><%=list.get(i).getBbsTitle().replaceAll(" ", "&nbsp").replaceAll("<", "&lt").replaceAll(">", "&gt")
        .replaceAll("\n", "<br>")%></a></td>
                        <td><%=list.get(i).getUserID()%></td>
                        <td><%=list.get(i).getBbsDate().substring(0, 11) + list.get(i).getBbsDate().substring(11, 13) + "시"
        + list.get(i).getBbsDate().substring(14, 16) + "분"%></td>
 
                    </tr>
                    <%
                        }
                    %>
                </tbody>
            </table>
            <%
                if (pageNumber != 1) {
            %>
            <a href="bbs.jsp?pageNumber=<%=pageNumber - 1%>"
                class="btn btn-success btn-arraw-left">이전</a>
            <%
                }
            if (bbsDAO.nextPage(pageNumber + 1)) {
            %>
            <a href="bbs.jsp?pageNumber=<%=pageNumber + 1%>"
                class="btn btn-success btn=arraw-left">다음</a>
            <%
                }
            %>
            <!-- 회원만넘어가도록 -->
 
            <%
                //if logined userID라는 변수에 해당 아이디가 담기고 if not null
 
            if (session.getAttribute("userID") != null) {
            %>
            <a href="write.jsp" class="btn btn-primary pull-right">글쓰기</a>
 
            <%
                } else {
            %>
            <button class="btn btn-primary pull-right"
                onclick="if(confirm('로그인이 필요합니다.'))location.href='login.jsp';"
                type="button">글쓰기</button>
            <%
                }
            %>
        </div>
    </div>
 
Colored by Color Scripter

cs

※ 현재 저는 완성하였기 때문에 메인화면과 게시판 등 레이아웃이 되어있는 상태입니다. 기능 구현이 되는 것만 봐주세요!

이렇게 위와 같이 bbs테이블에 데이터가 저장된 것을 게시판 화면에서 볼 수 있도록 구현하였습니다.(다음 페이지로 넘어가는 버튼, 이전 페이지로 넘어가는 버튼이 생성되었고 작동하게 되었습니다.)

B-10. 게시판의 게시글 보기 기능 구현하기

게시판의 글 제목을 눌렀을 때 내용을 확인 할 수 있는 기능을 구현하였습니다. 글 제목을 눌렀을 때 view.jsp로 이동하도록 설정해놓았기 때문에 view.jsp 파일을 만듭니다. 그리고 BbsDAO.java 파일에 기본키로 설정한 bbsID의 값을 읽고 판별할 수 있도록 하나의 글을 읽어오는 함수를 생성합니다.(getBbs(int bbsID)) 그 후에 wirte.jsp 파일의 내용을 그대로 복사하여 view.jsp 파일을 만들고 DB를 사용할 수 있도록 bbs클래스와 BbsDAO클래스를 import해줍니다.

JSP 게시판 만들기 - view.jsp(2020.08.27 완성)

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..

kobalja2020.tistory.com

view.jsp파일의 내용 중에 로그인 부분에서 bbsID의 값을 설정하고 0일 경우를 만들어 처리해줍니다. 만약 쓴 글이 저장이 되지 않았다면 '선택한 글이 없습니다.' 메시지를 띄우며 location.href 값을 이용하여 bbs.jsp로 이동하도록 해주었습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!-- 로그인 된 사람은 로그인 정보를 담을 수 있게 만들어줌 -->
    <%
        String userID = null; //그렇지 않으면 null값
    if (session.getAttribute("userID") != null) {
        userID = (String) session.getAttribute("userID");
    }
 
    int bbsID = 0;
    if (request.getParameter("bbsID") != null) {
        bbsID = Integer.parseInt(request.getParameter("bbsID"));
    }
    if (bbsID == 0) {
        PrintWriter script = response.getWriter();
        script.println("<script>");
        script.println("alert('선택한 글이 없습니다.')");
        script.println("location.href='bbs.jsp'"); //이미 로그인이 되면 또 로그인 못하게 해줌
        script.println("</script>");
    }
    Bbs bbs = new BbsDAO().getBbs(bbsID); //유효한 글이라면 bbsID가 0이아니므로 구체적인 정보를 Bbs란 인스턴스안에 담을 수 있도록 해준다.
    %>
Colored by Color Scripter

cs

그 후에 글을 수정하는 container 부분을 수정하여 만약 자신이 입력한 게시글일 경우에만(즉 로그인한 아이디가 동일할 때) 해당글을 수정과 삭제가 가능하도록 기능을 넣습니다. (수정 버튼, 삭제 버튼 레이아웃 만들기)

또한 기존에 복사했던 내용이 그대로 있기 때문에 글 내용을 클릭하여 해당 글을 보는 화면에서 글쓰기 버튼은 필요하지 않으므로 기존에 있던 a태그의 글쓰기를 지워줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- 목록으로 돌아갈 수 있게 버튼 만들기, 현재 글로 들어온 작성자가 본인일때   a태그를 이용한 수정 삭제 가능하게 함 -->
            <a href="bbs.jsp" class="btn btn-primary">목록</a>
            <%
                if (userID != null && userID.equals(bbs.getUserID())) {
            %>
            <a href="update.jsp?bbsID=<%=bbsID%>" class="btn btn-primary">수정</a>
            <!-- 삭제 버튼 클릭 시 삭제하시겠습니까 메시지 띄우기 -->
            <a onclick="return confirm('삭제하시겠습니까?')"
                href="deleteAction.jsp?bbsID=<%=bbsID%>" class="btn btn-primary">삭제</a>
            <%
                }
            %>
            <!-- 글쓰기 버튼 불필요 -->
            <!-- <input type="submit" class="btn btn-primary pull-right" value="글쓰기"></a> -->

cs

마지막으로 글 내용에 공백이나 Enter키, 특수문자 등을 출력하는 과정이 정상적으로 처리가 되지 않기 때문에 특수문자와 공백을 넣는게 가능하도록 replaceAll문으로 설정해줍니다.

그리고 특수문자와 공백도 출력되게 함으로써 크로스사이트스크립트 해킹 기법을 막을 수 있습니다. 만약 특수문자가 출력되지 않게 한다면 제목이나 내용에 스크립트 문을 넣을 수 있고 이것으로 웹에 공격을 할 수 있기 때문입니다.(예를 들면 글 내용에 alert 문을 넣어 글 내용을 못열어보게 할 수 있습니다.)

XSS(Cross Site Scripting)

- 사이트를 교차해서 스크립트를 발생시킴.

- 게시판을 포함한 웹에서 자바스크립트같은 스크립트 언어를 삽입해 개발자가 의도하지 않은 기능을 작동시키는것.

- 클라이언트측을 대상으로 한 공격

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

<tbody>
                    <!--특수문자 및 공백도 출력시키게 함으로써 XSS공격해킹기법을 막아줄 수 있다. -->
                    <tr>
                        <td style="width: 20%;">글 제목</td>
                        <td colspan="2"><%=bbs.getBbsTitle().replaceAll(" ", "&nbsp").replaceAll("<", "&lt").replaceAll(">", "&gt").replaceAll("\n",
        "<br>")%></td>
                    </tr>
                    <tr>
                        <td>작성자</td>
                        <td colspan="2"><%=bbs.getUserID()%></td>
                    </tr>
                    <tr>
                        <td>작성일자</td>
                        <td colspan="2"><%=bbs.getBbsDate().substring(0, 11) + bbs.getBbsDate().substring(11, 13) + "시"
        + bbs.getBbsDate().substring(14, 16) + "분"%></td>
                    </tr>
                    <tr>
                        <!-- 특수문자 및 공백 출력시키기-->
                        <td>내용</td>
                        <td colspan="2">
                            <div class="bbs-content"
                                style="min-height: 200px; text-align: left">
                                <%=bbs.getBbsContent().replaceAll(" ", "&nbsp").replaceAll("<", "&lt").replaceAll(">", "&gt").replaceAll("\n",
        "<br>")%>
                            </div>
                        </td>
                    </tr>
                    </tr>
                </tbody>
Colored by Color Scripter

cs

B-11. 게시글 수정 및 삭제 기능 구현하기

먼저 BbsDAO.java 파일에서 수정이 가능하도록 해주는 update함수를 만들어줍니다. 그 후 write.jsp 파일의 내용을 복사하여 update.jsp 파일을 만들어줍니다.

아래와 같이 bbsID가 0일 경우와 일치하지 않을 경우를 만들어주어 글에 대한 권한을 설정해주는 코드를 작성합니다.

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

<!-- 로그인 된 사람은 로그인 정보를 담을 수 있게 만들어줌 -->
    <%
        String userID = null; //그렇지 않으면 null값
    if (session.getAttribute("userID") != null) {
        userID = (String) session.getAttribute("userID");
    }
    if (userID == null) {
        PrintWriter script = response.getWriter();
        script.println("<script>");
        script.println("alert('로그인이 필요합니다.')");
        script.println("location.href='login.jsp'"); //이미 로그인이 되면 또 로그인 못하게 해줌
        script.println("</script>");
    }
    int bbsID = 0;
    if (request.getParameter("bbsID") != null) {
        bbsID = Integer.parseInt(request.getParameter("bbsID"));
    }
    if (bbsID == 0) {
        PrintWriter script = response.getWriter();
        script.println("<script>");
        script.println("alert('선택한 글이 없습니다.')");
        script.println("location.href='bbs.jsp'"); //이미 로그인이 되면 또 로그인 못하게 해줌
        script.println("</script>");
    }
    Bbs bbs = new BbsDAO().getBbs(bbsID);
    if (!userID.equals(bbs.getUserID())) {
        PrintWriter script = response.getWriter();
        script.println("<script>");
        script.println("alert('이 글에 대한 권한이 없습니다.')");
        script.println("location.href='bbs.jsp'"); //이미 로그인이 되면 또 로그인 못하게 해줌
        script.println("</script>");
    }
    %>
Colored by Color Scripter

cs

그리고 update.jsp파일에서 위에서 설정해주었던 로그인과 회원가입 부분은 지우고 게시판의 container 부분에서 action뒤 부분을 updateAction.jsp로 수정합니다. 수정 버튼을 클릭 시 기존 글의 내용이나 제목을 불러와야하므로 아래처럼 value값을 설정해줍니다.

그 후에 update를 처리하기 위해 writeAction.jsp 파일을 복사하여 updateAction.jsp 파일을 만들어줍니다. update.jsp 파일에 있는 현재글이 유효한지 확인하는부분을 가져오고

if(!userID.equals(bbs.getUserID())

만약 글쓴ID와 bbsID가 동일하지 않을경우, 권한이없다는 알람이뜨고 else인경우 bbsTitle, bbsContent의 값들을 확인하고 아래부분을 실행하도록 해줍니다.

//권한이 있을 때 성공적으로 넘어온다음 bbsTitle로 매개변수로써 넘어온 값들을 체크하는 과정

//(제목과 내용이 null인지 같은지)

else {

if (request.getParameter("bbsTitle") == null || request.getParameter("bbsContent") == null

|| request.getParameter("bbsTitle").equals("") || request.getParameter("bbsContent").equals("")) {

PrintWriter script = response.getWriter();

script.println("<script>");

script.println("alert('입력이 되지 않은 사항이 있습니다.')");

script.println("history.back()"); //이전 페이지 즉 로그인페이지로 돌아가게 만듬

script.println("</script>");

} else {

BbsDAO bbsDAO = new BbsDAO();

int result = bbsDAO.update(bbsID,request.getParameter("bbsTitle"),request.getParameter("bbsContent")); //

if (result == -1) {

PrintWriter script = response.getWriter();

script.println("<script>");

script.println("alert('글 수정에 실패했습니다.')");

script.println("history.back()"); //이전 페이지 즉 로그인페이지로 돌아가게 만듬

script.println("</script>");

} else {

PrintWriter script = response.getWriter();

script.println("<script>");

script.println("location.href='bbs.jsp'");

script.println("</script>");

}

JSP 게시판 만들기 - update.jsp(2020.08.27 완성)

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..

kobalja2020.tistory.com

JSP 게시판 만들기 - updateAction.jsp(2020.08.27 완성)

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..

kobalja2020.tistory.com

● 글 수정이 제대로 작동되는지 확인해봅니다.

다음은 삭제 기능을 구현하기 위해 BbsDAO.java 파일에 delete 함수를 생성해줍니다.

그리고 updateAction.jsp파일을 복사하여 deleteAction.jsp 파일을 생성하고 bbsTitle와 bbsContent가 null인지 확인하는 부분은 매개변수 확인이 필요하지 않으므로 삭제해줍니다.

그 다음 bbsID의 result값으로 확인하는 부분을 작성해줍니다.

//권한이 있을 때 성공적으로 넘어온다음 bbsID를 매개변수로 받아와서 삭제

else {

BbsDAO bbsDAO = new BbsDAO();

int result = bbsDAO.delete(bbsID); //

if (result == -1) {

PrintWriter script = response.getWriter();

script.println("<script>");

script.println("alert('글 삭제에 실패했습니다.')");

script.println("history.back()"); //이전 페이지 즉 로그인페이지로 돌아가게 만듬

script.println("</script>");

} else {

PrintWriter script = response.getWriter();

script.println("<script>");

script.println("location.href='bbs.jsp'");

script.println("</script>");

}

● 위와 같이 설정한 후에 view.jsp 파일에서 삭제버튼을 클릭 시 한번 더 확인하는 창을 띄우도록 아래의 코드를 추가해줍니다.

<a onclick="return confirm('삭제하시겠습니까?')"

href="deleteAction.jsp?bbsID=<%=bbsID%>" class="btn btn-primary">삭제</a>

JSP 게시판 만들기 - deleteAction.jsp(2020.08.27 완성)

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..

kobalja2020.tistory.com