[JSP 게시판 만들기] 10강 게시판 글쓰기 기능 구현하기

개발/JSP 게시판 만들기

[JSP 게시판 만들기] 10강 게시판 글쓰기 기능 구현하기

ee2ee2 2021. 11. 8. 16:27

728x90

참고 유튜브

지난 시간 게시판 데이터베이스 구축을 완료했다.
이제 게시판 글 쓰기 기능을 구현해보자!

우선, 현재 상황을 살펴보자.

글 작성하기 버튼 클릭시, write.jsp 파일이 없기에 404에러가 발생한다.

write.jsp

: 해당 부분은 글쓰기 입력 양식을 구현한 부분으로 입력한 데이터를 writeAction.jsp로 보내는 역할을 한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
<!-- 어느 기기에서도 맞춤으로 보이는 반응형 웹에 사용되는 기본 Meta Tag -->
<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;
	
		//로그인한 사용자들이라면, userID에 값이 담기게될 것!
		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">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="main.jsp"> JSP 게시판 웹 사이트</a>
		</div>
		
		
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<!-- ul은 리스트를 보여줄 때 쓰는 tag -> 안에 원소는 li로 사용 -->
			<ul class="nav navbar-nav">
				<li><a href="main.jsp">메인</a>
				<li class="active"><a href="boardSite.jsp">게시판</a>
			</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="backgroud-color:#eeeeee; text-align: center;"> 게시판 글쓰기 양식 </th></tr>
					</thead>
					<tbody>
						<tr>
							<td><input type="text" class="form-control" placeholder="글 제목" name="boardTitle" maxlength="50"></input></td>
						</tr>
						<tr>
							<td><textarea class="form-control" placeholder="글 내용" name="boardContent" maxlength="3000" style="height: 350px;"></textarea></td>
						</tr>
					</tbody>
				</table>
				<input type="submit" class="btn btn-primary pull-right" value="저장하기"></input>
			</form>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>

<구현한 글쓰기 양식>

writeAction.jsp

: write.jsp에서 받은 Data를 write 함수를 호출함으로써 데이터 저장을 가능하게 하는 부분.
userID 세션값을 검사하여 로그인한 사용자만 글쓰기 기능을 사용 가능할 수 있도록 할 수 있다.

<%@page import="boardSite.BoardSite"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="boardSite.BoardSiteDAO" %>
<%@ page import="java.io.PrintWriter" %>
<%
request.setCharacterEncoding("UTF-8");
%>
<jsp:useBean id="board" class="boardSite.BoardSite" scope="page"/>
<jsp:setProperty name="board" property="boardTitle"/>
<jsp:setProperty name="board" property="boardContent"/>
<!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(board.getBoardTitle() == null || board.getBoardContent() == null) {
				PrintWriter script = response.getWriter();
				script.println("<script>");
				script.println("alert('모든 칸을 입력해주십시오.')");
				script.println("history.back()");
				script.println("</script>");	
			}
			else {
				//실제 Data 저장을 위해 저장 함수를 호출하는 부분
				BoardSiteDAO boardrDao = new BoardSiteDAO();
				int result = boardrDao.write(board.getBoardTitle(), userID, board.getBoardContent()); 
				
				if(result >= 0){
					PrintWriter script = response.getWriter();
					script.println("<script>");
					script.println("location.href = 'boardSite.jsp'");
					script.println("</script>");	
				} else if(result == -1){
					PrintWriter script = response.getWriter();
					script.println("<script>");
					script.println("alert('글 등록에 실패하였습니다.')");
					script.println("history.back()");
					script.println("</script>");	
				}
			}
		}

	%>
</body>
</html>

이제 실질적으로 DB에 접속하여 데이터를 저장하는 DAO를 구현해본다!
총 3가지 함수 구현이 필요하다.
-. String getDate() : 현재 시간을 갖고 오는 함수 (게시글 작성일자를 저장할 때 필요함)
-. int getNext() : 가장 최근 게시물의 ID값을 가져오는 함수 (이번에 저장할 게시글의 ID를 지정하기 위해)
-. int write(String boardTitle, String userID, String boardContent) : 게시글을 저장하는 함수

BoardSiteDAO.java

package boardSite;

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

public class BoardSiteDAO {
	private Connection conn;
	private ResultSet rs;
	
	//생성자는 인스턴스를 생성할 때 자동으로 실행되는 부분
	public BoardSiteDAO() {
		try {
			String dbURL ="jdbc:mysql://localhost:3306/BOARDSITE";
			String dbID = "root";
			String dbPW = "root계정 패스워드";
			
			Class.forName("com.mysql.cj.jdbc.Driver");	 //MySQL에 접속할 수 있도록 하는 매개체(라이브러리)
			conn = DriverManager.getConnection(dbURL, dbID, dbPW); //매개변수를 통해 DB에 접속할 수 있도록 함. 접속이 완료되면 conn객체에 접속정보가 담기게 됨.
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	
	//현재 시간을 갖고 오는 함수 (게시글 작성일자를 저장할 때 필요함)
	public String getDate() {
		String SQL = "SELECT NOW()";
		
		try {
			//여러개의 함수가 사용되기 때문에 각 DB 접근에 있어서 마찰이 일어나지 않도록 각 함수 내부에서 선언하도록 함.
			PreparedStatement pstat = conn.prepareStatement(SQL); //SQL 실행 준비상태
			rs = pstat.executeQuery();
			
			if(rs.next())
				return rs.getString(1);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	
		return "";	//DB오류가 나면 빈 문자열을 반환
	}
	
	//가장 최근 게시물의 ID값을 가져오는 함수
	public int getNext() {
		String SQL = "SELECT boardID from BOARD ORDER BY boardID DESC";
		
		try {
			PreparedStatement pstat = conn.prepareStatement(SQL); //SQL 실행 준비상태
			rs = pstat.executeQuery();
			
			if(rs.next())
				return rs.getInt(1) + 1;
			
			return 1; // 첫 번째 게시물인 경우
		} catch (Exception e) {
			e.printStackTrace();
		}
	
		return -1;	//DB 오류
	}
	
	public int write(String boardTitle, String userID, String boardContent) {
		String SQL = "INSERT INTO BOARD VALUES (?, ?, ?, ?, ?, ?)";
		
		try {
			PreparedStatement pstat = conn.prepareStatement(SQL); //SQL 실행 준비상태
			pstat.setInt(1, getNext());
			pstat.setString(2, boardTitle);
			pstat.setString(3, userID);
			pstat.setString(4, getDate());
			pstat.setString(5, boardContent);
			pstat.setInt(6, 1);

			return pstat.executeUpdate();	//성공했을 경우 0이상의 숫자를 반환
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return -1; //DB오류
	}

}

이제 실행해보자!

<로그인 후 게시판 메인페이지> - 글 작성하기 클릭

<게시판 글쓰기 양식 기본>

<게시판 글쓰기> - 글 작성하기 클릭

<저장 완료> - 아직 게시글을 보여주는 부분은 구현안했으므로 화면에는 안보임.

<DB 상에는 정상적으로 저장된 것을 확인>

<로그인 하지 않은 상태로 글을 작성하려 할 때>

<DB에는 저장 안됨>

<로그인 페이지로 전환>

게시글 저장하기까지 구현 완료하였다.
다음 시간에는 저장할 게시글이 보일 수 있도록 해본다! 고지가 눈 앞이다 :)

'개발 > JSP 게시판 만들기' 카테고리의 다른 글

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

현재글[JSP 게시판 만들기] 10강 게시판 글쓰기 기능 구현하기

안녕하세요! 😊💫

Today :
Yesterday :

일	월	화	수	목	금	토
					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

ee2ee2