Practice

JSP로 반응형 게시판 만들기[5/9], 글 쓰기 기능 구현

Juun 2022. 4. 28. 14:47
반응형

2022.04.28 - [Practice] - JSP로 반응형 게시판 만들기 [4]

 

JSP로 반응형 게시판 만들기 [4]

2022.04.28 - [Practice] - JSP로 게시판 만들기 [3] JSP로 게시판 만들기 [3] 2022.04.27 - [Practice] - JSP로 반응형 게시판 만들기 [2] JSP로 반응형 게시판 만들기 [2] 저번 포스팅 다음 글입니다!! 2022.04...

puenti.tistory.com

이번에 포스팅에서는 게시판의 여러 기능 중 글쓰기 기능 먼저 만들어보도록 할께요!!

<%@ 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 name = "viewport" content="width=device-width", initial-scale="1"> 
<!-- 부트스트랩은 컴퓨터, 모바일 어떤걸로 접속하더라도 해상도에 맞게 디자인을 보여주는 템플릿. 그래서 반응형 웹에 사용되는 메타 태그를 적어준다 -->
<link rel="stylesheet" href="css/bootstrap.css"> <!-- 디자인을 담당하는 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>
			<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>
						 <!-- 경로와 오타가 없음에도 a 링크 실행이 안됨 -->
					</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; boerder: 1px solid #dddddd"> 
				<!-- class = "table table-striped"는 게시판 목록들이 짝수와 홀수 번갈아가면서 색이 변하게해줌 -->
					<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>
							<!-- input 타입은 특정한 정보를 Action 페이지에 보낼때 필요 -->
						</tr>
						
						<tr>
							<td><textarea class="form-control" placeholder="글 내용" name="bbsContent" maxlength="2048" style="height: 350px;"></textarea></td>
						</tr>
					</tbody>
					<!-- Action 페이지로 보낼 수 있음 -->
				</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>

게시판 페이지예요!!

글쓰기를 누르니 writeAction 페이지로도 넘어갈 수 있는거까지 확인했습니다!

이제 데이터베이스를 접근 할 수 있게 BbsDAO 페이지를 만들어 보겠습니다!

package user;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
// CMD shift O 를 눌러서 외부라이브러리 추가해주기!!

public class UserDAO {

	private Connection conn;
	private PreparedStatement pstmt;
	private ResultSet rs;
	
	// 생성자 생성
	public UserDAO() {
		try {
			String dbURL = "jdbc:mysql://localhost:3306/BBS";
			String dbID = "root";
			String dbPassword = "12qwaszx";
			Class.forName("com.mysql.jdbc.Driver"); // mysql에 접속할 수 있게 해주는 매개체 역할을 해준다
			conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
			// conn 객체 안에 접속된 정보가 담긴다
		} catch(Exception e) {
			e.printStackTrace();
		}
	} 
	// 이 부분까지 mysql에 접속하게 해주는 단계
	
	
	// 로그인 기능에 대한 구현
	public int login(String userID, String userPassword) {
		// SQL에 넣을 명령어 적어주기
		String SQL = "SELECT userPassword FROM USER WHERE userID = ?"; // ? 안에는 입력받은 userID가 들어간다
		try {
			pstmt = conn.prepareStatement(SQL);
			pstmt.setString(1, userID);
			rs = pstmt.executeQuery();
			if (rs.next()) {
				if(rs.getString(1).equals(userPassword))
					return 1; // 로그인 성공
				else
					return 0; // 비밀번호 불일치
			}
			return -1; // 아이디가 없음
		} catch(Exception e) {
			e.printStackTrace();
		}
		return -2; // 데이터베이스 오류
	}
	
	public int join(User user) {
		String SQL = "INSERT INTO USER VALUES(?, ?, ?, ?, ?)";
		try {
			pstmt = conn.prepareStatement(SQL);
			pstmt.setString(1, user.getUserID());
			pstmt.setString(2, user.getUserPassword());
			pstmt.setString(3, user.getUserName());
			pstmt.setString(4, user.getUserGender());
			pstmt.setString(5, user.getUserEmail());
			// ?에 각각의 해당 변수들을 채워넣어준다!!
			return pstmt.executeUpdate();
			//INSERT 문장을 실행한 경우는 반드시 0이상의 숫자가 발현된다!!
			// 따라서 -1 의 값이 나오지 않으면 성공적으로 값이 들어간 것!!
		} catch(Exception e) {
			e.printStackTrace();
		}
		return -1; // 데이터베이스 오류
	}
	
	
	
	
}

BbsDAO 페이지에 3가지 함수를  구현해주고 

이제 글을 작성해주는 writeAction 페이지를 만들어볼께요!!

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "bbs.BbsDAO" %>    <!--우리가 만든 클래스를 사용해주기 위해-->
<%@ page import = "java.io.PrintWriter" %>  <!-- JS 문장을 작성하기 위해 -->
<% 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" />
<!-- 보내준 5가지 데이터 값을 받아야한다 -->
<!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");
		} // 세션이 존재하는 아이디들은 세션ID값을 받게 해주자
		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){ // 리턴값이 -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>

writeAction 페이지는 이렇게 만들어볼 수 있어요!

입력했을 경우 글쓰기가 잘 수행되는걸 확인할 수 있어요!

아직 글목록을 보여주는 부분은 작업하지 않아서 예시 디자인데이터만 나오는걸 확인할 수 있어요!!

실제로도 해당 데이터가 데이터베이스 안에 들어가 있는걸 확인 할 수 있어요!!

그러니 글쓰기 기능이 정상적으로 작동할 수 있다고 볼 수 있어요!!

 

다음 포스팅은 작성한 글들을 데이터베이스에 가져와서 리스트에 보여질 수 있는거까지 구현해보도록 할께요!!

반응형