[JSP] 게시판 만들기 9 _ 게시판 글쓰기 기능 (write.jsp, BbsDAO.java, writeAction.jsp)

 

1. write.jsp 글쓰기 페이지 만들기

 

먼저 게시글 작성 페이지 `write.jsp`를 만들어 주려고 한다.

`bbs.jsp`를 복사해서 붙여 넣고 중간 부분만 수정 해 줄 것이다.

 

nav바 아래 부분에 이렇게 코드를 작성

Bootstrap5 이용했다.

 

⚡ `mt-5` margin-top: 5rem; 

 

⚡ `<input>`태그에 `required` 속성 넣으면 브라우저에서 유효성 검사를 함. 텍스트를 입력 안 한 채로 submit 하면 `이 입력란을 작성하세요.` 라는 경고 메세지를 띄운다. 

 

⚡ `form-control` 클래스

 Bootstrap에서 제공하는 클래스 중 하나로, 입력 필드의 스타일을 쉽게 일관성 있게 적용하기 위해 사용됨.
이거 쓰면 입력 필드(input, textarea, select 등)가 기본적으로 다음과 같은 스타일을 갖게 됨.

너비: 100% (부모 컨테이너의 너비를 채움)
테두리: Bootstrap의 기본 테두리 스타일 적용
높이와 여백: 적절한 패딩과 높이가 설정됨
폰트: Bootstrap의 기본 글꼴 스타일 적용

 

⚡ `form-group`은 Bootstrap 4에서 폼 요소를 그룹화하는 데 사용되던 클래스로, 폼 요소와 레이블을 함께 묶어 정렬과 간격을 관리하는 역할을 했다. 지만 Bootstrap 5에서는 form-group 클래스가 더 이상 사용되지 않는다. 대신, `mb-4` 또는 그리드 시스템으로 폼 요소 간의 간격을 조절합니다.템을 사용하는 방식으로 폼 요소 간의 간격을 조절한다. 

 

• 각 입력 필드 그룹을 <div class="mb-4">로 묶어 간격을 설정
• 레이블과 입력 필드 간의 정렬을 적절히 관리
• 필요시 `d-flex`(div에 flex 설정해주는 클래스), `form-label`, form-control 등 클래스를 활용

⚡ 반응형 디자인이나 일관된 UI를 유지하려면 `form-label`은 사용을 하는 것이 좋다.

 

<div class="container mt-5">
    <div class="card shadow-sm">
        <div class="card-header bg-secondary text-white text-center">
            <h5 class="mb-0">게시판 글쓰기 양식</h5>
        </div>
        <div class="card-body">
            <form method="post" action="writeAction.jsp">
                <!-- 제목 입력 -->
                <div class="mb-4">
                    <label for="bbsTitle" class="form-label">글 제목</label><input
                        type="text" id="bbsTitle" name="bbsTitle" class="form-control"
                        placeholder="글 제목을 입력하세요" maxlength="50" required>
                </div>
                <!-- 내용 입력 -->
                <div class="mb-4">
                    <label for="bbsContent" class="form-label">글 내용</label>
                    <textarea id="bbsContent" name="bbsContent" class="form-control"
                        placeholder="글 내용을 입력하세요" maxlength="2048" rows="10" required></textarea>
                </div>
                <!-- 제출 버튼 -->
                <div class="d-flex justify-content-end">
                    <input type="submit" class="btn btn-primary" value="글쓰기">
                </div>
            </form>
        </div>
    </div>
</div>

 

---

2. BbsDAO.java 클래스 만들기

 

이제 `writeAction.jsp` 페이지를 만들어야 하는데 그 전에

실제로 데이터베이스에 접근해서 데이터를 빼올 수 있는 데이터 접근 객체 `BbsDAO.java` 클래스를 만들어 보자.

 

기존에 만들었던 `userDAO` 가서 윗부분 그대로 복사

DB 연결하는 건 어차피 똑같으니까 그대로 복붙

// MySQL 접속하기
private Connection conn;
private PreparedStatement psmt;
private ResultSet rs;

// 생성자 만들기
public UserDAO() {
    try {
        String dbURL = "jdbc:mysql://localhost:3306/BBS";
        String dbID = "root";
        String dbPassword = "@cholda8291";
        Class.forName("com.mysql.cj.jdbc.Driver");
        conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

 

생성자 메서드 이름을 BbsDAO()로 바꿔준다. 

 

이제 3개의 메서드를 만들건데 메서드끼리 DB 접근에 있어서 마찰이 일어날 수 있어서 위에 선언한 변수들 중에 `private PreparedStatement psmt;`를 지워주고 각 메서드 안쪽에 넣어줄 것이다.

 

현재 시간 가져오는 `getDate()`메서드,

글번호 가져오는 `getNext()` 메서드,

글 작성하는 메서드 `write()` 메서드를 차례로 만든다. 

// 현재 시간을 가져오는 메서드
// 게시판에 글 작성할 때 현재 서버의 시간을 가져옴
public String getDate() {
    String SQL = "SELECT NOW()";
    try {
        PreparedStatement psmt = conn.prepareStatement(SQL);
        rs = psmt.executeQuery();
        if (rs.next()) {
            return rs.getString(1);
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return ""; // 데이터베이스 오류
}

// 글번호를 가져오는 메서드
public int getNext() {
    String SQL = "SELECT bbsID FROM BBS ORDER BY bbsID desc";
    try {
        PreparedStatement psmt = conn.prepareStatement(SQL);
        rs = psmt.executeQuery();
        if (rs.next()) {
            return rs.getInt(1) + 1;
        }
        return 1; // 첫 번째 게시물인 경우
    } catch (Exception e) {
        e.printStackTrace();
    }
    return -1; // 데이터베이스 오류
}

// 실제로 글 작성하는 메서드
public int write(String bbsTitle, String userID, String bbsContent) {
    String SQL = "INSERT INTO BBS VALUES (?, ?, ?, ?, ?, ?)";
    try {
        PreparedStatement psmt = conn.prepareStatement(SQL);
        psmt.setInt(1, getNext());
        psmt.setString(2, bbsTitle);
        psmt.setString(3, userID);
        psmt.setString(4, getDate());
        psmt.setString(5, bbsContent);
        psmt.setInt(6, 1);
        /* insert는 executeUpdate임, executeQuery는 select
        rs = psmt.executeQuery(); */
        return psmt.executeUpdate();
    } catch (Exception e) {
        e.printStackTrace();
    }
    return -1; // 데이터베이스 오류
}

 

코드 잘못 쓴 부분

`INSERT`문의 경우에는 `psmt.executeQuery();` 안씀

 

`executeQuery()`는 조회 쿼리 (`SELECT`)를 실행할 때 사용되며, 결과를 반환받기 위해 필요하다. 반면, INSERT, UPDATE, DELETE 등 `데이터 조작 쿼리 (DML)`는 결과를 반환하지 않기 때문에 `executeUpdate()`만 사용한다. 

 

executeUpdate(): INSERT, UPDATE, DELETE에서 사용

실행된 쿼리로 인해 영향을 받은 행(row)의 수를 반환

---

3. writeAction.jsp 페이지 만들기

writeAction.jsp 페이지는 보통 사용자가 게시판에 글을 작성하고 제출하는 작업을 처리하는 페이지이다. 이 페이지에서는 사용자가 입력한 데이터를 받아서 데이터베이스에 저장한다. 

• 사용자가 입력한 제목과 내용을 처리
• 데이터베이스에 새로운 게시글을 삽입
• 게시글 삽입 후 적절한 응답(성공 메시지, 실패 메시지 등)을 반환

 

이제 `writeAction.jsp` 페이지를 만들어 주려고 한다. `webapp`에 `joinAction.jsp` 페이지 그대로 복사해서 이름만 바꿔서 생성해주고 코드 를 좀 수정 해 주자. 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="bbs.BbsDAO" %>
<%@ page import="java.io.PrintWriter" %>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="bbs" class="bbs.Bbs" scope="page" />
<jsp:setProperty name="bbs" property="bbsTitle" />
<jsp:setProperty name="bbs" property="bbsContent" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
	<%
		String userID = 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>"); 
		} else {
        if (bbs.getBbsTitle() == null || bbs.getBbsContent() == null) {
                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.write(bbs.getBbsTitle(), userID, bbs.getBbsContent());
                if (result == -1) { // DB오류 발생, 글쓰기 실패 
                    PrintWriter script = response.getWriter();
                    script.println("<script>");
                    script.println("alert('글쓰기에 실패했습니다.')");
                    script.println("history.back()");
                    script.println("</script>"); 
                } 
                else { // 글쓰기 성공 -> 게시판 메인 화면(bbs.jsp)로 이동
                    PrintWriter script = response.getWriter();
                    script.println("<script>");
                    script.println("location.href = 'bbs.jsp'");
                    script.println("</script>");
                }
            }
		}
	%>
</body>
</html>

 

웹페이지 가서 글쓰기 테스트해보자!

 

아직 글목록 안만들어줘서 글목록에는 안뜨고 MySQL 가서 `select * from bbs;` 쿼리로 직접 확인 해 주어야 한다. 

성공