[JSP] JSP로 게시판 목록 조회 기능 구현

🚀 JSP로 게시판 목록 조회 기능 구현

이번 글에서는 JSP로 리스트 목록을 조회하고 조회한 내용을 화면을 구성하는 것까지 해보려고 합니다 :)

지난 글에서 MyBatis 설정을 해놓았기 때문에 테이블을 만드는 것부터 해보겠습니다.

1. 테이블 만들기

crete table tbl_board (
    board_id int unsigned auto_increment primary key,
    board_title varchar(500) not null,
    board_content varchar(500) not null,
    board_register_date datetime default current_timestamp(),
    board_update_date int unsigned default 0,
    board_read_count int unsigned default 0,
    member_id unsigned,
    constraint fk_board_member foreign key(member_id)
    references tbl_member(member_id) on delete cascade
);

2. VO 만들기

VO는 테이블의 컬럼만큼만 필드로 가지고 있는 클래스로 만들어주면 됩니다.

 

📜 com.app.board.domain (package) / BoardVO.java

package com.app.board.domain;

public class BoardVO {
	private Long boardId;
	private String boardTitle;
	private String boardContent;
	private String boardRegisterDate;
	private String boardUpdateDate;
	private Long boardReadCount;
	private Long memberId;
	
	public BoardVO() {;}

	public Long getBoardId() {
		return boardId;
	}

	public void setBoardId(Long boardId) {
		this.boardId = boardId;
	}

	public String getBoardTitle() {
		return boardTitle;
	}

	public void setBoardTitle(String boardTitle) {
		this.boardTitle = boardTitle;
	}

	public String getBoardContent() {
		return boardContent;
	}

	public void setBoardContent(String boardContent) {
		this.boardContent = boardContent;
	}

	public String getBoardRegisterDate() {
		return boardRegisterDate;
	}

	public void setBoardRegisterDate(String boardRegisterDate) {
		this.boardRegisterDate = boardRegisterDate;
	}

	public String getBoardUpdateDate() {
		return boardUpdateDate;
	}

	public void setBoardUpdateDate(String boardUpdateDate) {
		this.boardUpdateDate = boardUpdateDate;
	}

	public Long getBoardReadCount() {
		return boardReadCount;
	}

	public void setBoardReadCount(Long boardReadCount) {
		this.boardReadCount = boardReadCount;
	}

	public Long getMemberId() {
		return memberId;
	}

	public void setMemberId(Long memberId) {
		this.memberId = memberId;
	}

	@Override
	public String toString() {
		return "BoardVO [boardId=" + boardId + ", boardTitle=" + boardTitle + ", boardContent=" + boardContent
				+ ", boardRegisterDate=" + boardRegisterDate + ", boardUpdateDate=" + boardUpdateDate
				+ ", boardReadCount=" + boardReadCount + ", memberId=" + memberId + "]";
	}

	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result + ((boardId == null) ? 0 : boardId.hashCode());
		return result;
	}

	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		BoardVO other = (BoardVO) obj;
		if (boardId == null) {
			if (other.boardId != null)
				return false;
		} else if (!boardId.equals(other.boardId))
			return false;
		return true;
	}
}

3. DTO 만들기

우리는 화면을 구성할 때 리스트 목록에서 아래와 같이 목록들을 추가할 것입니다.

따라서 이름이 필요한데요. 그런데 VO 객체에는 tbl_board의 컬럼만 추가했기 때문에 tbl_member에 있는 member_id를 통해서 tbl_member의 member_name을 가져와야 한다는 생각을 할 수 있겠습니다. 결국 DTO에는 기존 컬럼 + member_name이 추가된 필드를 가지고 있는 클래스가 필요하다는 말입니다.

 

그러므로 밑에서 Mapper에서 쿼리문을 작성할 때 Join을 해서 가지고 와야하는 것도 미리 생각할 수 있겠습니다.

 

📜 com.app.board.domain (package) / BoardDTO.java

package com.app.board.domain;

public class BoardDTO {
	private Long boardId;
	private String boardTitle;
	private String boardContent;
	private String boardRegisterDate;
	private String boardUpdateDate;
	private Long boardReadCount;
	private Long memberId;
	private String memberName;
	
	public BoardDTO() {;}

	public Long getBoardId() {
		return boardId;
	}

	public void setBoardId(Long boardId) {
		this.boardId = boardId;
	}

	public String getBoardTitle() {
		return boardTitle;
	}

	public void setBoardTitle(String boardTitle) {
		this.boardTitle = boardTitle;
	}

	public String getBoardContent() {
		return boardContent;
	}

	public void setBoardContent(String boardContent) {
		this.boardContent = boardContent;
	}

	public String getBoardRegisterDate() {
		return boardRegisterDate;
	}

	public void setBoardRegisterDate(String boardRegisterDate) {
		this.boardRegisterDate = boardRegisterDate;
	}

	public String getBoardUpdateDate() {
		return boardUpdateDate;
	}

	public void setBoardUpdateDate(String boardUpdateDate) {
		this.boardUpdateDate = boardUpdateDate;
	}

	public Long getBoardReadCount() {
		return boardReadCount;
	}

	public void setBoardReadCount(Long boardReadCount) {
		this.boardReadCount = boardReadCount;
	}

	public Long getMemberId() {
		return memberId;
	}

	public void setMemberId(Long memberId) {
		this.memberId = memberId;
	}

	public String getMemberName() {
		return memberName;
	}

	public void setMemberName(String memberName) {
		this.memberName = memberName;
	}

	@Override
	public String toString() {
		return "BoardDTO [boardId=" + boardId + ", boardTitle=" + boardTitle + ", boardContent=" + boardContent
				+ ", boardRegisterDate=" + boardRegisterDate + ", boardUpdateDate=" + boardUpdateDate
				+ ", boardReadCount=" + boardReadCount + ", memberId=" + memberId + ", memberName=" + memberName + "]";
	}

	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result + ((boardId == null) ? 0 : boardId.hashCode());
		return result;
	}

	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		BoardDTO other = (BoardDTO) obj;
		if (boardId == null) {
			if (other.boardId != null)
				return false;
		} else if (!boardId.equals(other.boardId))
			return false;
		return true;
	}
}

4. Mapper 만들고 config.xml에 등록하기

📜 com.app.mybatis.mapper (package) / boardMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="member">
</mapper>

namespace="member"로 해서 해당 mapper에 있는 sql 문을 별칭과 id로 간편하게 찾을 수 있도록 member라고 지어주었습니다.

이제 config.xml에 해당 Mapper를 등록합시다.

 

📜 com.app.mybatis.config (package) / config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "https://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>
	<settings>
		<setting name="mapUnderscoreToCamelCase" value="true"/>
	</settings>
	
	<typeAliases>
		<typeAlias type="com.app.board.domain.BoardVO" alias="boardVO"/>
		<typeAlias type="com.app.board.domain.BoardDTO" alias="boardDTO"/>
	</typeAliases>

	<environments default="mysql">
		<environment id="mysql">
			<transactionManager type="JDBC"/>
			<dataSource type="POOLED">
				<property name="driver" value="com.mysql.cj.jdbc.Driver"/>
				<property name="url" value="jdbc:mysql://localhost:3306/app"/>
				<property name="username" value="root"/>
				<property name="password" value="1234"/>
			</dataSource>
		</environment>
	</environments>
	
	<mappers>
		<mapper resource="com/app/mybatis/mapper/memberMapper.xml"/>
		<mapper resource="com/app/mybatis/mapper/boardMapper.xml"/>
	</mappers>
</configuration>

5. Mapper에서 필요한 쿼리문 작성하기

📜 com.app.mybatis.mapper (package) / boardMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="board">
	<select id="selectAll" resultType="boardDTO">
		select board_id, board_title, board_content, board_register_date, board_update_date, board_read_count, m.member_id, member_name 
		from tbl_member m join tbl_board b
		on m.member_id = b.member_id
	</select>
</mapper>

6. DAO에 Mapper에서 작성한 쿼리문을 사용하는 메소드 선언하기

📜 com.app.board.dao (package) / BoardDAO.java

package com.app.board.dao;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;

import com.app.board.domain.BoardDTO;
import com.app.mybatis.config.MyBatisConfig;

public class BoardDAO {
	public SqlSession sqlSession;
	
	public BoardDAO() {
		sqlSession = MyBatisConfig.getSqlSessionFactory().openSession(true);
	}
	
//	게시글 전체 조회
	public List<BoardDTO> selectAll(){
		return sqlSession.selectList("board.selectAll");
	}
}

DAO의 메소드들은 Controller에서 사용하게 됩니다.

7. Controller 작업하기

📜 com.app.board.controller (package) / ListOkController.java

package com.study.board.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONObject;

import com.study.Action;
import com.study.Result;
import com.study.board.dao.BoardDAO;

public class ListOkController implements Action {

	@Override
	public Result execute(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException {
		BoardDAO boardDAO = new BoardDAO();
		Result result = new Result();
		
        	// JSON으로 넘겨주기 위해
		JSONArray jsonArray = new JSONArray();
		boardDAO.selectAll().stream().map(board -> new JSONObject(board)).forEach(jsonArray::put);
		req.setAttribute("boards", jsonArray.toString()); // 리턴하는 객체를 목록 페이지에서 키값으로 사용 가능
		
		result.setPath("templete/board/list.jsp"); // 목록 페이지로 이동해야 해서
		return result;
	}

}

8. FrontController에서 방금 만든 Controller 분기 처리하기

📜 com.app.board (package) / BoardFrontController.java

package com.app.board;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.app.Result;
import com.app.board.controller.ListOkController;
import com.app.member.controller.CheckEmailOkController;
import com.app.member.controller.CheckIdOkController;
import com.app.member.controller.JoinOkController;
import com.app.member.controller.LoginOkController;

public class BoardFrontController extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		
		String target = req.getRequestURI().replace(req.getContextPath() + "/", "").split("\\.")[0];
		Result result = null;
		
		if(target.equals("listOk")) {
			result = new ListOkController().execute(req, resp);
			
		} 
		
		if(result != null) {
			if(result.isRedirect()) {
				resp.sendRedirect(result.getPath());
			}else {
				req.getRequestDispatcher(result.getPath()).forward(req, resp);
			}
		}
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}

}

우선 해당 FrontController는 바로 아래에 이어지는 web.xml에서 매핑해주는 곳에서 .member로 끝나는 url 요청을 받습니다. 따라서 .member로 끝나는 요청 중에서도 분기 처리를 하기 위해

if(target.equals("listOk")) {
    result = new ListOkController().excute(req, resp);
}

처럼 작성했습니다. 위 코드는 target 즉, .member 앞에 오는 text를 의미합니다. 그러므로 위 분기를 타게 되는 url 요청은 listOk.member라는 url로 요청이 들어온 경우겠죠?

그래서 listOk.member라는 url로 요청이 들어오게 되면 result 객체에 ListOkController의 excute 메소드가 리턴하는 값을 갖게 됩니다.

위에서 ListOkController 즉, 모든 Controller는 미리 만들어둔 Action이라는 interface를 implements 하기 때문에 모두 excute라는 메소드를 갖게 됩니다. 그리고 FrontController의 req, resp를 매개변수를 전달해줌으로써 Controller도 HttpServelt의 기능을 사용할 수 있도록 넘겨주는 것입니다.

9. web.xml에서 방금 만든 FrontController 매핑해주기

📜 WebContent/WEB_INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>app</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  	<servlet-name>Member</servlet-name>
  	<servlet-class>com.app.member.MemberFrontController</servlet-class>
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>Member</servlet-name>
  	<url-pattern>*.member</url-pattern>
  </servlet-mapping>
  
  <servlet>
  	<servlet-name>Board</servlet-name>
  	<servlet-class>com.app.board.BoardFrontController</servlet-class>
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>Board</servlet-name>
  	<url-pattern>*.board</url-pattern>
  </servlet-mapping>
</web-app>

servlet-mapping에서 url-pattern이 .board로 끝나는 url로 요청이 들어오면 모두 BoardFrontController로 보내겠다고 작성해주었습니다.

10. (7)에서 Controller가 setPath한 jsp 파일에서 데이터를 잘 받았는지 확인하기

📜 WebContent/templete/board/list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>리스트 페이지</h1>
	<hr />
</body>
<script>
	console.log(JSON.parse(`${boards}`));
</script>
</html>

ListOkController에서 JSON을 toString() 하여 jsp에게 보냈기 때문에 다시 그걸 parse 하여 받습니다.

그러면 jsp에서 키값으로 해당 객체를 접근할 수 있습니다.

만약 ListOkController에서 JSON으로 보내지 않고 그냥 보내고 jsp에서도 그냥 받았다면 쌩 문자열이라 키값으로 객체에 접근하는 것은 불가능합니다....

 

위 jsp 파일을 작성하고, 서버 구동(저는 아파치톰캣)을 시작합니다.

우리가 BoardFrontController에서 listOk라는 분기를 타면 즉, listOk.member라는 url로 요청이 오면 ListOkController의 excute 메소드를 실행하도록 했습니다. ListOkController에서는 setPath를 templete/board/list.jsp로 설정해두었기 때문에 브라우저에 들어가서 아파치 톰캣의 Modules에서 Web Modules를 확인하고

Web Modules

해당 경로/listOk.board 하고 요청을 보내면 우리가 setPath 해두었던 list.jsp 파일이 보여질 것입니다.

저는 /study/listOk.board 하고 요청을 보냈을 때 결과는 다음과 같이 나왔습니다.

실행 화면

jsp가 받은 데이터

실제 데이터베이스

데이터베이스에 있는 내용과 동일하게 jsp 파일이 잘 받은 것을 확인할 수 있었습니다.

11. 받은 JSON 객체에 접근해서 화면에 데이터 뿌리기

📜 WEBContent/templete/board/list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/board/board.css">
<title>Insert title here</title>
</head>
<body>
	<h1>리스트 페이지</h1>
	<hr />
	<ul>
		
	</ul>
</body>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
	const boards = JSON.parse(`${boards}`);
	const contextPath = `${pageContext.request.contextPath}`;
</script>
<script src="${pageContext.request.contextPath}/static/js/board/list.js"></script>
</html>

list.js 파일에서 boards를 반복문을 돌려 ul 태그 아래에 게시글들을 집어넣으려고 합니다. 참고로 contextPath는 jsp로 setPath하여 들어오게 되면 앞에 모든 경로를 잃게 되어 위와 같이 경로를 변수를 통해 적어주어야 인식할 수 있습니다.

 

📜 WebContent/static/js/board/list.js

const $ul = $('ul');
let text = "";

boards.forEach(board => {
	text += `
		<li>
			<div>
				<a href="javascript:location.href='${contextPath}/board/detailOk.board'">
					<section class="content-container">
						<h4>${board.boardTitle}</h4>
						<h5>${board.memberName}</h5>
						<h6>조회 ${board.boardReadCount}</h6>
					</section>
				</a>
			</div>
		</li>
	`;
})

$ul.append(text);

 

마지막으로 css도 조금 넣어보았습니다.. :)

📜 WebContent/static/css/board/board.css

@charset "UTF-8";

ul {
    	list-style: none;
}

a {
	text-decoration: none;
	color: black;
}

section.content-container {
	padding: 20px;
	margin: 10px;
	border: 1px solid black;
}

실행 화면

추가로 시간도 방금전, 1분전, 10분전 같이 작성한 시간을 변환하여 화면에 보여주는 것도 해보겠습니다.

📜 WebContent/static/js/board/list.js

const $ul = $('ul');
let text = "";

boards.forEach(board => {
	text += `
		<li>
			<div>
				<a href="javascript:location.href='${contextPath}/board/detailOk.board'">
					<section class="content-container">
						<h4>${board.boardTitle}</h4>
						<h5>${board.memberName}</h5>
						<h6>${elapsedTime(board.boardRegisterDate)}</h6>
						<h6>조회 ${board.boardReadCount}</h6>
					</section>
				</a>
			</div>
		</li>
	`;
})

$ul.append(text);

/*시간 계산*/
function elapsedTime(date) {
  const start = new Date(date);
  const end = new Date();

  const diff = (end - start) / 1000;
  
  const times = [
    { name: '년', milliSeconds: 60 * 60 * 24 * 365 },
    { name: '개월', milliSeconds: 60 * 60 * 24 * 30 },
    { name: '일', milliSeconds: 60 * 60 * 24 },
    { name: '시간', milliSeconds: 60 * 60 },
    { name: '분', milliSeconds: 60 },
  ];

  for (const value of times) {
    const betweenTime = Math.floor(diff / value.milliSeconds);

    if (betweenTime > 0) {
      return `${betweenTime}${value.name} 전`;
    }
  }
  return '방금 전';
}

실행화면

---

여기까지 게시판 목록 조회 기능이였습니다 ✨👍