728x90

이번 글에선 저번 글에서 작성한 글들의 리스트를 불러오는 기능을 구현합니다.

작성한 글들은 DB에 저장돼있습니다. (DB : MySQL)

* 코드는 https://github.com/wmdwjddyd6/Board-Spring-MVC 에서 확인 가능합니다.

 

GitHub - wmdwjddyd6/Board-Spring-MVC

Contribute to wmdwjddyd6/Board-Spring-MVC development by creating an account on GitHub.

github.com

 


 

1. View (list.jsp)

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
	language="java"%>
<%@ page session="false"%>
<html>
<head>
<title>목록</title>
</head>
<body>
	<h1>게시글 목록</h1>

	<table border="1">
		<caption>List</caption>
		<thead>
			<tr align="center" bgcolor="white">
				<th>No</th>
				<th>제목</th>
				<th>작성일</th>
				<th>조회수</th>
			</tr>
		</thead>

		<tbody>
			<c:forEach var="board" items="${boards}">
				<tr align="center" bgcolor="white">
					<td><c:out value="${board.id}" /></td>
					<td><a href="/board/post?boardId=${board.id}"><c:out value="${board.title}" /></a></td>
					<td><fmt:formatDate pattern="yyyy-MM-dd hh:mm"
							value="${board.createDate}" /></td>
					<td><c:out value="${board.views}" /></td>
				</tr>
			</c:forEach>
		</tbody>
	</table>

	<br />
	<a href="/">메인으로 돌아가기</a>

</body>
</html>
  • 첫 줄과 둘째 줄의 taglib을 선언함으로써 기본 jstl(forEach 등)과 fmt 태그를 사용할 수 있게 됩니다.
  • 데이터를 보여줄 테이블을 정의하고, Controller에서 전달받은 데이터(List)의 양만큼 반복해서 보여주기 위해 c:forEach를 사용합니다.
    • var : 임시로 사용할 변수명
    • items : Controller에서 전달받은 Collection 객체 (해당 글에선 List입니다.)
  • fmt:formatDate를 통해 화면에 보여줄 날짜 형식을 지정합니다.
  • * 추가
    • c:out value="${board.title}" : a태그로 감싸서 제목 클릭 시 해당 글로 이동하는 기능 구현을 위해 추가했습니다.
    • [3. 게시글 조회] 에서 상세 기능 구현

 

2. Controller

@Controller
public class BoardController {

	private static final Logger logger = LoggerFactory.getLogger(BoardController.class);
	
	@Autowired
	private BoardService boardService;
	
	/*
	 * 게시글 목록 화면 이동
	 * */
	@RequestMapping(method = RequestMethod.GET, value = "/board/list")
	public String list(Model model) {
		List<BoardDTO> boards = boardService.getList();
		model.addAttribute("boards", boards);
		
		return "board/list";
	}
}
  • 조회 관련 기능으로 GET method를 사용합니다. /board/list url 요청 시 해당 메서드로 매핑됩니다.
  • boardService의 getList 함수를 통해 현재 DB에 저장된 모든 게시글 목록을 반환 받습니다.
  • model.addAttribute("View로 넘겨줄 변수명", View로 넘겨줄 변수) : 위 1번 View의 forEach의 items부분 입니다. 

 

3. Service

public interface BoardService {
	
	// 게시글 목록 확인
	List<BoardDTO> getList();

}
@Service
public class BoardServiceImpl implements BoardService {

	private final BoardMapper boardMapper;
	
	@Autowired
	public BoardServiceImpl(BoardMapper boardMapper) {
		this.boardMapper = boardMapper;
	}
	
	@Override
	public List<BoardDTO> getList() {
		List<BoardDTO> list = boardMapper.selectAll();
		
		return list;
	}
}
  • getList에서는 boardMapper를 통해 모든 게시글을 List에 담아 Controller로 반환합니다.

 

4. Mapper (DAO)

public interface BoardMapper {

	// 게시글 목록 조회
	List<BoardDTO> selectAll();
	
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.spring.shoppingmall.mapper.BoardMapper">

	<sql id="boardColumns">
		id
		,title
		,content
		,delete_yn
		,create_date
		,views
		,type
	</sql>

	<!-- 게시글 목록 확인 -->
	<select id="selectAll" resultType="com.spring.shoppingmall.model.BoardDTO">
		SELECT 
			<include refid="boardColumns" />
		FROM
			tb_board
		ORDER BY
			id desc
	</select>
</mapper>
  • 게시글 작성 시 마다 Auto-Increment되는 값인 id를 desc(내림차순)으로 조회함으로써, 제일 최근에 생성된 게시글을 제일 앞에 위치하도록 합니다.

 


 

결과

 

728x90

Spring 프로젝트에서 css 작업을 위해 Bootstrap을 사용하기로 했다!

 

HTML 파일에서 사용해보긴 했으나, JSP파일에서 사용이 가능한지 확인할 겸, 사용법을 정리하고자 한다.

 

https://getbootstrap.com/

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

 

부트스트랩 홈페이지이다. 들어가면 Get Started를 누르면 나오는 코드들이 있다.

위 2개의 코드를 복사하여 JSP 파일 또는 HTML 파일 상단에 붙여 넣어준다.

 

그 후 부트스트랩을 사용 가능한지 테스트를 위해 버튼을 하나 만들어 보겠다.

 

 

좌측 상단에서 Button을 검색한다. 그럼 여러 가지 버튼 소스들이 나오는데 소스를 복사하여 JSP 파일 또는 HTML 파일에 붙여 넣어준다.

 

필자는 예시로 button태그를 하나 복사하여 붙여넣어 주었다.

 

프로젝트 실행 후 화면은 다음과 같다.

 

버튼 외에도 다양한 스타일의 CSS를 간단하게 적용해볼 수 있으니 잘 사용하면 유명 사이트 못지않은 사이트를 만들어 볼 수 있겠다!

+ Recent posts