JSP 게시판 만들기 - 10강 글쓰기 기능 구현

2022. 2. 22. 14:31

게시판 페이지에서 로그인을 한 사람들은 글쓰기 기능을 사용할 수 있도록 실제 사용자가 입력한 글 제목과

글 내용을 전달 받아 데이터베이스에 실제로 저장되는 기능을 구현해보자

실제로 글을 쓰는 '글쓰기 기능 (write.jsp)'을 구현해보자 ('bbs.jsp')를 수정해 구현

# write.jsp

기존에 있던 'bbs.jsp' 를 복사해 'write.jsp' 페이지를 생성한다.

[소스코드 1]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
	<%
		String userID = null;
		if (session.getAttribute("userID") != null) {
			userID = (String) session.getAttribute("userID");
		}
	%>
	<nav class="navbar navbar-default">  <!--  네게이션 -->
		<div class="navbar-header">
			<!--  네비게이션 상단 박스 영역 -->
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
				aria-expanded="false">
				<!--  이 3줄 버튼을 화면이 좁아지면 우측에 나타난다. -->
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<!--  상단 바에 제목이 나타나고 클릭하면 main 페이지로 이동한다. -->
			<a class="navbar-brand" href="main.jsp">JSP 게시판 웹 사이트</a>
		</div>
		
		<!--  게시판 제목 이름 옆에 나타나는 메뉴영 -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li><a href="main.jsp">메인</a></li>
				<li class="active"><a href="bbs.jsp">게시판</a></li>
			</ul>
			
			<!--  로그인이 되어있지 않다면  -->
			<% 
				if(userID == null) { // 로그인 하지 않았을 때 보여지는 화면 
			%>
			
			<!-- 헤더 우측에 나타나는 드랍다운 영역 -->
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle"
						data-toggle="dropdown" role="button" aria-haspopup="true"
						aria-expanded="false">접속하기<span class="caret"></span></a>
					<!--  드랍다운 아이템 영역 -->
					<ul class="dropdown-menu">
						<li><a href="login.jsp">로그인</a></li>
						<li><a href="join.jsp">회원가입</a></li>
					</ul>
				</li>
			</ul>
			<%
				} else { // 로그인이 되어 있는 상태에서 보여주는 화면 
			%>
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle"
						data-toggle="dropdown" role="button" aria-haspopup="true"
						aria-expanded="false">회원관리<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="logoutAction.jsp">로그아웃</a></li>
					</ul>
				</li>
			</ul>
			<%
				}
			%>
		</div>
	</nav>
	<!--  네비게이션 영역 끝  -->
	
	<!--  게시글 글쓰기 양식 영역 시작 -->
	<div class="container">
		<div class="row">
			<form method="post" action="writeAction.jsp">
				<table class="table table-striped" style="text-align: center; border: 1px solid #dddddd">
					<thead>
						<tr>
							<th colspan="2" style="background-color: #eeeeee; text-align: center;">게시판 글쓰기 양식</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<input type="text" class="form-control" placeholder="글 제목" name="bbsTitle" maxlength="50">
							</td>
						</tr>
						<tr>
							<td>
								<textarea class="form-control" placeholder="글 내용" name="bbsContent" maxlength="2048" style="height: 350px;"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
				<input type="submit" class="btn btn-primary pull-right" value="글쓰기">
			</form>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>

게시판 글쓰기 양식 코드를 추가한다.

'bbs'jsp' 페이지에서 ' 글쓰기 ' 버튼을 누르면 글쓰기 양식이 화면에 보여지는 코드

[실행화면 1]

# BbsDAO

'bbs' 패키지에서 'BbsDAO' 클래스를 생성한다.

'UserDAO' 와 비슷하게 기본 생성자 메소드를 가장 먼저 입력한다.

'BbsDAO' 클래스 여러 개의 메소드가 사용되기 때문에 각각의 메소드끼리 데이터베이스 접근에 있어서

서로 마찰이 일어나지 않도록 'PreparedStatement' 는 각각의 메소드 내에 하나씩 추가하도록 한다.

[소스코드 2]

package bbs;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class BbsDAO {

	private Connection conn;
	private ResultSet rs;
	
	
	//기본 생성자
	public BbsDAO() {
		try {
			String dbURL = "jdbc:mysql://localhost:3306/BBS";
			String dbID = "root";
			String dbPassword = "1004";
			Class.forName("com.mysql.jdbc.Driver");
			conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
		} catch (Exception e) { // 트라이 켓치 예외처리하고 오류가 무엇인지 알수있게한다.
			e.printStackTrace();
		}
	}
	
	// 현재 시간을 가져오는 함수, 게시판의 글을 작성할  현재 서버의 시간을 넣어주는 역할을 한다.
	public String getDate() {
		String SQL = "SELECT NOW()";
		try {
			PreparedStatement pstmt = conn.prepareStatement(SQL);
				rs = pstmt.executeQuery();
				if (rs.next()) {
					return rs.getString(1);
				}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return ""; // 데이터베이스 오류 
	}
	
	// 게시글 번호는 하나씩 늘어나므로 마지막에 쓰인 글을 가져와서 +1을 하면 다음 번호가 된다.
	public int getNext() { 
		String SQL = "SELECT bbsID FROM BBS ORDER BY bbsID DESC";
		try {
				PreparedStatement pstmt = conn.prepareStatement(SQL);
				rs = pstmt.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 pstmt = conn.prepareStatement(SQL);
				pstmt.setInt(1, getNext());
				pstmt.setString(2, bbsTitle);
				pstmt.setString(3, userID);
				pstmt.setString(4, getDate());
				pstmt.setString(5, bbsContent);
				pstmt.setInt(6, 1 ); //글의 유효번호
				return pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return -1; // 데이터베이스 오류
	}
	
}

* getNext() 메소드 - 새로운 게시글 번호 부여 :

게시글 번호를 부여하는 메소드이다. 현재 저장되어 있는 모든 게시글을 내림차순으로 정렬하여 가장 상위의 게시글번호를 구해서 그 게시글 번호에 1을 더한 값을 새로 작성되는 게시글의 새 번호로 부여한다. 예를 들어 현재 bbs.jsp 게시판 메인 페이지에 총 10개의 글이 작성 되어 있다면, 가장 최신 글의 번호인 10 + 1 을 더한 값인 11 가 새로 만들어지는 게시글의 번호로 지정된다.

* write '메소드 - 글제목, 사용자ID, 글내용을 전달받아 DB에 새로운 데이터를 입력

게시글 번호 -> 글 제목 -> 사용자 ID -> 작성일자 -> 글 내용 -> 유효번호

순서대로 데이터를 셋팅하고 데이터베이스로 전송한다.

매개변수로 글의 제목, 글을 입력한 사용자 ID, 글 내용을 입력받아서 실제 데이터베이스의 테이블

속성 순서에 맞게 데이터를 입력하는 메소드

[소스코드 3]

writeAction.jsp 을 만들어보자

- 실제로 '글쓰기'버튼을 눌러 글을 작성해주는 Action Page

<%@ 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) {
						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>");
					}
				}
		}
	%>
</body>
</html>

[실행화면 2]

▶ 글을 작성하고 '글쓰기' 버튼을 누르기 전 화면이다.

[실행화면 3]

▶ 실행화면 2 에서 글쓰기 버튼을 누르고 추가로 글을 하나 더 작성한 후 데이터베이스 화면

출처 : https://www.youtube.com/watch?v=EmbxlHakkfY&list=PLRx0vPvlEmdAZv_okJzox5wj2gG_fNh_6&index=10

'Back End > JSP & Servlet' 카테고리의 다른 글

JSP 게시판 만들기 - 12강 보기 기능 구현하기 (0)	2022.02.22
JSP 게시판 만들기 - 11강 게시판 글 목록 기능 구현 (0)	2022.02.22
JSP 게시판 만들기 - 9강 게시판 데이터베이스 구축 (0)	2022.02.21
JSP 게시판 만들기 - 8강 게시판 메인 페이지 만들기 (0)	2022.02.21
JSP 게시판 만들기 - 7강 접속한 회원 세션관리 (0)	2022.02.21

YUN BLOG