JDBC 개발자 수업 79일차 - 기본 게시판 만들기(2)

728x90

기본 게시판 만들기

4. 게시판 리스트(목록)

5. 게시판 글쓰기

기본 게시판 만들기

4. 게시판 리스트(목록)

[ 게시판 목록 구현 목표 ]

- 글번호, 제목, 작성자(아이디), 작성일(시,분,초 제거), 조회수를 확인할 수 있다.

- 게시판 제목(subject)이 30자가 넘어가는 것은 '...' 으로 자르기

- 게시판의 최신글은 Bootstrap을 이용해 new 표시하기

[ DB 작업 ]

1) com.test.myapp.board > BoardDTO.java

- tblBoards 테이블의 컬럼값을 BoardDTO.java에 각각 getter / setter를 만든다.

public class BoardDTO {
	
	// tblBoards 컬럼
	private String seq;
	private String id;
	private String subject;
	private String content;
	private String regdate;
	private String readcount;
	private String tag;
	
	// 가상 컬럼 (추가멤버)
	private String name; // 이름
	private String isnew; // 새글 표시

	// 각각 getter & setter 구현
    
}

2) com.test.myapp.board > BoardDAO.java

- DB 연결 > BoardDAO() 생성자

- DB 작업 > DAO 위임 > select > ArrayList<BoardDTO> list()

private Connection conn;
private PreparedStatement pstat;
private ResultSet rs;

public BoardDAO() {
	
	try {
		conn = DBUtil.open();
	} catch (Exception e) {
		e.printStackTrace();
	}
}

// List 서블릿 - 게시판 목록을 보여주기
public ArrayList<BoardDTO> list() {
	
	try {
		
		String sql = "select * from vwBoard order by seq desc";
		
		pstat = conn.prepareStatement(sql);
		
		rs = pstat.executeQuery();
		
		// 옮겨 담을 큰상자
		ArrayList<BoardDTO> list = new ArrayList<BoardDTO>();
				
		while ( rs.next() ) {
			
			// 레코드 1줄 -> BoardDTO 1개
			BoardDTO dto = new BoardDTO();
			
			dto.setSeq(rs.getString("seq"));
			// dto.setId(rs.getString("id"));
			dto.setName(rs.getString("name"));
			dto.setSubject(rs.getString("subject"));
			dto.setReadcount(rs.getString("readcount"));
			dto.setRegdate(rs.getString("regdate"));
			dto.setIsnew(rs.getString("isnew")); // 글쓰고 난뒤 며칠이 지났는지 시간
			
			list.add(dto);
			
		}
		
		return list;
		
	} catch (Exception e) {
		e.printStackTrace();
	}
	
	return null;
}

[ Servlet + JSP 작업 ]

1) com.test.myapp.board > List.java

- DB 작업

- ArrayList<BoardDTO> 반환하기

- JSP 호출하기 ( ArrayList<BoardDTO> 전달하기 )

@WebServlet("/board/list.do")
public class List extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		// 1. DB 작업 > DAO 위임 > select
		BoardDAO dao = new BoardDAO();
		
		// 2. ArrayList<BoardDTO> 반환하기
		ArrayList<BoardDTO> list = dao.list();
				
		// 2.5 
		for ( BoardDTO dto : list ) {
			
			// 날짜 > 시,분초 제거
			String regdate = dto.getRegdate();
			regdate = regdate.substring(0, 10);
			dto.setRegdate(regdate);
			
			String subject = dto.getSubject();
			
			// 무조건 글 제목과 내용에 들어있는 <script>태그는 비활성화 시키기!!
			subject = subject.replace("<script", "&lt;script").replace("</script>", "&lt;/script&gt;");
			dto.setSubject(subject);
			
			// 제목이 길면 > 자르기
			if ( subject.length() > 40 ) {
				subject = subject.substring(0, 30) + "...";
				dto.setSubject(subject);
			}
			
		}
		
		// 새로고침에 의한 조회수 증가 방지 티켓
		HttpSession session = req.getSession();
		
		session.setAttribute("read", "n");
		
		// 3. JSP 호출하기 (2번 전달)
		req.setAttribute("list", list);
		

		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/board/list.jsp");
		dispatcher.forward(req, resp);

	}

}

2) WEB-INF > views > board > list.jsp

- 서블릿에서 ArrayList<BoardDTO> 로 받은 "list"를 c:forEach로 내용을 가져온다.

- 작성시간이 얼마 되지 않은 글은 2시간 기준으로, new 표시한다.

- 게시판 목록에서 번호, 제목, 이름, 날짜, 조회수를 확인할 수 있다.

- 게시판 목록 밑에 글쓰기, 새로고침 버튼이 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myapp</title>
<%@ include file="/inc/asset.jsp" %>
<style>
	.table th:nth-child(1) { width: 60px; }
	.table th:nth-child(2) { width: auto; }
	.table th:nth-child(3) { width: 80px; }
	.table th:nth-child(4) { width: 120px; }
	.table th:nth-child(5) { width: 60px; }
	
	.table td:nth-child(2) { text-align: left; }
</style>
</head>
<body>
	<!-- list.jsp -->
	<%@ include file="/inc/header.jsp" %>
	
	<section class="main-section">
		
		<h1>Board <small>List</small></h1>
		
		<table class="table table-bordered">
			<tr>
				<th>번호</th>
				<th>제목</th>
				<th>이름</th>
				<th>날짜</th>
				<th>조회수</th>
			</tr>
			<c:forEach items="${ list }" var="dto">
			<tr>
				<td>${ dto.seq }</td>
				<td>
					<a href="/myapp/board/view.do?seq=${ dto.seq }">${ dto.subject }</a>
					
					<c:if test="${ dto.isnew < (2 / 24)}">
					<span class="label label-danger">new</span>
					</c:if>
				</td>
				<td>${ dto.name }</td>
				<td>${ dto.regdate }</td>
				<td>${ dto.readcount }</td>
			</tr>
			</c:forEach>
		</table>
		
		<div class="btns">
			<button type="button" class="btn btn-primary"
				onclick="location.href='/myapp/board/add.do';">글쓰기</button>
			<button type="button" class="btn btn-default"
				onclick="location.reload();">새로고침</button>
		</div>

	</section>	
	
	<%@ include file="/inc/init.jsp" %>
</body>

- 게시판 목록 페이지 ( http://localhost:8090/myapp/board/list.do )

초기 페이지(index.do)에서 좌측 상단에 있는 Board를 클릭했을 때 게시판 목록 페이지로 이동한다. 현재는 데이터가 없으므로 빈 공간이다.

5. 게시판 글쓰기

[ Servlet + JSP 작업 - 글쓰기 페이지로 이동하기 ]

1) com.test.myapp.board > Add.java

- 글쓰기 페이지로 이동하는 단계는 현재 딱히 할일이 없으므로 가상 주소 매핑으로 넘겨주기만 하자.

@WebServlet("/board/add.do")
public class Add extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		// 현재 할일 X -> 나중에 생김

		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/board/add.jsp");
		dispatcher.forward(req, resp);

	}

}

2) WEB-INF > views > board > add.jsp

- 글쓰기 항목에는 제목, 내용, 태그 적용 여부가 있다.

- 글쓰기 항목 밑에는 글쓰기, 돌아가기 버튼이 있다.

- 글쓰기 버튼 클릭 시 form 태그의 method="POST"로 addok.do 페이지로 이동한다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myapp</title>

<%@ include file="/inc/asset.jsp" %>

<style>

	.table th { width: 120px; }
	.table td { width: 680px; }
	
	.table #content { height: 300px; }
	
</style>

</head>
<body>
	<!-- board/template.jsp > add.jsp -->
	<%@ include file="/inc/header.jsp" %>
	
	<section class="main-section">
		
		<h1>Board <small>Add</small></h1>
		
		<form method="POST" action="/myapp/board/addok.do">
			<table class="table table-bordered">
				<tr>
					<th>제목</th>
					<td><input type="text" name="subject" id="subject" class='form-control' required /></td>
				</tr>		
				<tr>
					<th>내용</th>
					<td>
						<textarea name="content" id="content" class="form-control" required ></textarea>
					</td>
				</tr>		
				<tr>
					<th>태그</th>
					<td>
						<select name="tag" id="tag" class="form-control short">
							<option value="n">적용안함</option>
							<option value="y">적용함</option>
						</select>
					</td>
				</tr>		
			</table>
			
			<div class="btns">
				<button type="submit" class="btn btn-primary">글쓰기</button>
				<button type="button" class="btn btn-default"
					onclick="location.href='/myapp/board/list.do';">돌아가기</button>
			</div>
		</form>

	</section>	
	
	<%@ include file="/inc/init.jsp" %>
</body>
</html>

[ DB 작업 ]

1) com.test.myapp.board > BoardDAO.java

- DB 작업 > DAO 위임 > insert

*위에서 만들어 두었던, 기존의 BoardDAO.java 파일에 해당 메소드만 추가하면 된다.

// AddOk 서블릿이 DTO를 줄테니, insert를 해주세요!
public int add(BoardDTO dto) {
	
	try {
		
		String sql = "insert into tblBoards (seq, id, subject, content, regdate, readcount, tag)"
				+ " values (seqBoards.nextVal, ?, ?, ?, default, default, ?)";
		
		pstat = conn.prepareStatement(sql);
		
		pstat.setString(1, dto.getId());
		pstat.setString(2, dto.getSubject());
		pstat.setString(3, dto.getContent());
		pstat.setString(4, dto.getTag());
		
		return pstat.executeUpdate(); // 성공시 1 실패시 0
		
	} catch (Exception e) {
		e.printStackTrace();
	}
	
	
	return 0;
}

[ Servlet 작업 - 글쓰기 완료 후 처리하기 ]

1) com.test.myapp.board > AddOk.java

- 데이터 가져오기 ( 제목(subject), 내용(content), 태그유무(tag) ) --> "POST" --> doPost

- DB작업

- 결과 > 후 처리하기( 결과에 따라 페이지 이동 )

@WebServlet("/board/addok.do")
public class AddOk extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		// 1. 데이터 가져오기
		String subject = req.getParameter("subject");
		String content = req.getParameter("content");
		String tag = req.getParameter("tag");
		
		// 2.  DB 작업 > DAO 위임 > insert
		BoardDAO dao = new BoardDAO();
		BoardDTO dto = new BoardDTO();
		
		// 로그인한 아이디를 가져오기 위해 session을 가져온다.
		HttpSession session = req.getSession();
		
		dto.setId(session.getAttribute("id").toString());
		dto.setSubject(subject);
		dto.setContent(content);
		dto.setTag(tag);
		
		int result = dao.add(dto);
		
		// 3. 결과 > 후처리
		if ( result == 1 ) {
			resp.sendRedirect("/myapp/board/list.do");
		} else {
			resp.sendRedirect("/myapp/board/add.do");
		}
		
	}
}

- 글쓰기 페이지 ( http://localhost:8090/myapp/board/add.do )

- 글쓰기 버튼 클릭 후, 게시판 목록 페이지 ( http://localhost:8090/myapp/board/list.do )

728x90

저작자표시

'교육 > Server' 카테고리의 다른 글

JDBC 개발자 수업 80일차 - 기본 게시판 만들기(1) - 검색 기능 추가하기 (2)	2021.07.21
JDBC 개발자 수업 79일차 - 기본 게시판 만들기(3) - 상세 페이지, 수정하기, 삭제하기 (0)	2021.07.20
JDBC 개발자 수업 79일차 - 기본 게시판 만들기(1) - JDBC 설정, 초기화면, 로그인/로그아웃 (0)	2021.07.19
JDBC 개발자 수업 77일차 - JSP MVC, JSP Model 2 - 'Hello' 웹 페이지 만들기 (0)	2021.07.15
JDBC 개발자 수업 76일차 - PreparedStatement 클래스, CallableStatement 클래스 (0)	2021.07.14

sleep

JDBC 개발자 수업 79일차 - 기본 게시판 만들기(2) - 리스트, 글 쓰기

기본 게시판 만들기

4. 게시판 리스트(목록)

5. 게시판 글쓰기

기본 게시판 만들기

4. 게시판 리스트(목록)

5. 게시판 글쓰기

'교육 > Server' 카테고리의 다른 글

댓글

티스토리툴바

JDBC 개발자 수업 79일차 - 기본 게시판 만들기(2) - 리스트, 글 쓰기

기본 게시판 만들기

4. 게시판 리스트(목록)

5. 게시판 글쓰기

기본 게시판 만들기

4. 게시판 리스트(목록)

5. 게시판 글쓰기

'교육 > Server' 카테고리의 다른 글

관련글

댓글

티스토리툴바