게시판 만들기 2 (게시물 상세 페이지, 게시물 작성)

게시판 만들기 1: https://pabeba.tistory.com/180

게시판 만들기 1 (게시글 리스트 보기, 로그인, 로그아웃)

 

게시판 만들기 1에 이어서 이번에는 상세페이지 관련 내용을 알아보도록 하겠습니다.

 

상세페이지

1. SQL 제작

SELECT b.no, title,   c.name, c.id, TO_CHAR(time_posted,'YYYY.MM.DD') time_posted,hits 
FROM board b , community_member c
WHERE b.id = c.id
ORDER BY b.no DESC

1. ORACLE을 사용했기 때문에 oracle JOIN문을 사용하였습니다.

2. 게시물 테이블에 멤버 테이블을 붙여서 멤버의 이름을 가져옵니다.

2. Test Case 제작

public class TestUnitFindPostDetail {
	public static void main(String[] args) {
		long no = 1;
		try {
			PostVO post = BoardDAO.getInstance().findPostDetail(no);
			System.out.println(post);
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
}

public PostVO findPostDetail(long no) throws SQLException {
		Connection con = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		PostVO post = null;
		try {
			con = dataSource.getConnection();
			StringBuilder sql = new StringBuilder(
					"SELECT b.no, title,   c.name , c.id,hits, TO_CHAR(time_posted,'YYYY-MM-DD HH:MI:SS') time_posted, content ");
			sql.append("FROM board b , community_member c ");
			sql.append("WHERE b.id = c.id AND b.no =? ");
			sql.append("ORDER BY b.no DESC");
			pstmt = con.prepareStatement(sql.toString());
			pstmt.setLong(1, no);
			rs = pstmt.executeQuery();
			if (rs.next()) {
				post = new PostVO(rs.getLong("no"), rs.getString("title"), rs.getString("content"), rs.getLong("hits"),
						rs.getString("time_posted"), new MemberVO(rs.getString("id"), null, rs.getString("name")));
			}
		} finally {
			closeAll(rs, pstmt, con);
		}
		return post;
	}

1. 게시글 번호로 내용을 찾아옵니다.

2. 잘 찾아와 집니다.

PostVO [no=1, title=열공, content=웹공부중~, hits=0, timePosted=2023-06-20 10:29:45, memberVO=MemberVO [id=java, password=null, name=아이유]]

3. Controller 제작

public class FindPostByNoController implements Controller {
	@Override
	public String handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
		HttpSession session = request.getSession(false);
		if (session == null || session.getAttribute("mvo") == null) {
			System.out.println("비인증");
			return "redirect:FindPostList.do";
		}
		long no = Long.parseLong(request.getParameter("no"));
		PostVO post = BoardDAO.getInstance().findPostDetail(no);
		request.setAttribute("post", post);
		request.setAttribute("url", "board/post-detail.jsp");
		return "layout.jsp";
	}
}

1. 로그인 되어있지 않다면 상세페이지를 불러오지 못합니다.

2. 게시물 리스트 a 태그 안에 게시물 번호 no를 받아와서 상세페이지 정보를 받아옵니다.

3. 요청에 post를 담아서 보내줍니다.

 

받은 post 객체를 jsp el 을 이용하여 보내줍니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<table class="table table-bordered">
	<tr style="background-color: #ccffee" align="center">
		<td>글번호 ${post.no}</td>
		<td>제목 ${post.title}</td>
		<td>작성자 ${post.memberVO.id}</td>
		<td>조회수 ${post.hits}</td>
		<td>${post.timePosted}</td>
	</tr>
	<tr>
		<td colspan="5"><pre><font size="4">${post.content}</font></pre></td>
	</tr>
</table>
<c:if test="${sessionScope.mvo.id==post.memberVO.id}">
	<div class="row">
		<div class="col-sm-8 offset-sm-2 header" align="center">
			<button onclick="updatePost()">수정</button>
			&nbsp;&nbsp;&nbsp;
			<button onclick="deletePost()">삭제</button>
		</div>
	</div>
</c:if>
<script type="text/javascript">
	function updatePost() {
		if (confirm("수정하시겠습니까?") == true) {
			location.href = "${pageContext.request.contextPath}/UpadatePost.do";
		}
	}
	function deletePost() {
		if (confirm("삭제하시겠습니까?") == true) {
			location.href = "${pageContext.request.contextPath}/DeletePost.do";
		}
	}
</script>

1. jsp el 로 값을 잘 받아오면 됩니다.

2. 주의사항은 pre tag는 무조건 저렇게 일자로 놔둬야 합니다. 잘못 놨두었다가는 큰일이 납니다. 예시를 보여드릴게요.

3. 그리고 밑에 수정 삭제 버튼은 글쓴이가 session 과 같은지 아닌지를 판단하고 생성됩니다.

pre tag 엔터 (오류)

정상 화면

 

저희가 게시글을 작성하지도 않고 냅다 상세 게시글을 보게 만들었군요!

어서 게시글 작성하는 기능을 만들어 볼까요?

 

게시글 작성

1. SQL 제작

INSERT INTO board(no,title,content,time_posted,id) 
VALUES(board_seq.nextval,?,?,sysdate,?)

새로운 게시물을 등록하는 SQL 문장입니다.

2. Test Case 제작

public class TestUnitWritePost {
	public static void main(String[] args) {
		try {
			PostVO post=new PostVO();
			post.setTitle("야구");
			post.setContent("한화이글스");
			MemberVO mvo=new MemberVO();
			mvo.setId("spring");
			post.setMemberVO(mvo);
			BoardDAO.getInstance().posting(post);
			System.out.println("insert ok");
		}catch(Exception e) {
			e.printStackTrace();
		}
	}
}

public void posting(PostVO post) throws SQLException {
	Connection con = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	try {
		con = dataSource.getConnection();
		String sql = " INSERT INTO board(no,title,content,time_posted,id)"
				+ " VALUES(board_seq.nextval,?,?,sysdate,?)";
		pstmt = con.prepareStatement(sql);
		pstmt.setString(1, post.getTitle());
		pstmt.setString(2, post.getContent());
		pstmt.setString(3, post.getMemberVO().getId());
		pstmt.executeUpdate();
	} finally {
		closeAll(rs, pstmt, con);
	}
}

잘 작동되는 것을 확인하고 Controller를 제작해보아요.

3. Controller 제작

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>    
		<form method="post" action="${pageContext.request.contextPath}/WritePost.do">
		<table class="table">
			<tr>
				<td><input type="text" name="title" placeholder="글제목"
					required="required"></td>
			</tr>
			<tr>
				<td><textarea rows="10" class="form-control" name="content"
						placeholder="본문내용" required="required"></textarea></td>
			</tr>
		</table>
		<div class="text-center">
			<button type="submit" class="btn btn-success">확인</button>
			<button type="reset" class="btn btn-success">취소</button>
		</div>
	</form>

1. 이러한 페이지에서 Web Application Server로 데이터들을 보내줍니다.

2. 그러면 Controller에서 데이터를 받아서 처리할 겁니다.

public class WritePostController implements Controller {
	@Override
	public String handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
		if (request.getMethod().equals("POST") == false)
			throw new ServletException("POST 방식만 서비스 됩니다");

		HttpSession session = request.getSession(false);
		if (session == null || session.getAttribute("mvo") == null) {
			System.out.println("**비인증 상태이므로 서비스 할 수 없습니다**");
			return "redirect:FindPostList.do";
		}

		String title = request.getParameter("title");
		String content = request.getParameter("content");
		MemberVO mvo = (MemberVO) session.getAttribute("mvo");
		PostVO post = new PostVO();
		post.setTitle(title);
		post.setContent(content);
		post.setMemberVO(mvo);
		BoardDAO.getInstance().posting(post);
		// 글쓰기 완료 후 게시물 리스트 화면 제공
		return "redirect:FindPostList.do";
	}
}

1. POST 요청이 아니면 작동이 안 됩니다.

2. Session 이 없으면 작동이 안 됩니다.

3. PostVO에 필요한 값을 객체에 저장하고 게시물 등록 함수를 실행합니다.

4. 저장이 완료되면 list 페이지로 보내줍니다.

 

소감

게시물 상세 페이지와 게시물 작성을 알아봤으니, 다음 시간은 게시글 수정, 삭제에 대해 알아보도록 합시다.

이렇게 설명드리는 것이 맞는지는 모르겠지만 최대한 자세히 설명드리려고 노력하고 있습니다.

프로젝트를 진행하기 전에 기본적인 지식을 배우는 것을 추천드립니다. ㅎㅎ

 

공부를 할 때 1시간 정도 하면 10분 정도는 쉬면서 하면 좋을 것 같습니다. 자세가 아무리 바르더라도 오래 하면 좋지 않기 때문에 조금씩 쉬면서 진행해 보도록 하겠습니다. 개발자가 원하는 선물 중 편안한 의자가 있는데 저도 의자에는 아끼지 않고 지출하려고 노력하겠습니다. 최근에 방석 하고 등받이 쿠션도 샀는데, 궁금하시면 링크드릴게요.