[게시판 만들기]3. 게시판 목록

🧩게시판 목록

화면은 나중에 처리하는 것보다 전체 디자인이 반영된 상태에서 개발하는 것이 낫다고 생각해 게시판 디자인은 시간을 아끼고자 무료 템플릿 사이트에서 적용했다.

사용한 무료 템플릿 사이트 👉 https://startbootstrap.com/

• 게시판 목록 화면
  

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

➡️jstl사용을 위해 라이브러리를 추가해준다.

<c:set var="contextPath" value="${pageContext.request.contextPath }"/>

➡️해당 경로를 잡아줄 코드도 추가

🎨jsp

<table>
<thead>
	<tr>
		<th>번호</th>
		<th>제목</th>
		<th>작성자</th>
		<th>조회수</th>
		<th>작성일자</th>
	</tr>
</thead>

<tbody>							
<c:forEach items="" var="">							
	게시글이 반볼될 부분
</c:forEach>
</tbody>
</table>

<div>
<a href="${contextPath }/board/write">
<input type="button" value="글쓰기" class="btn btn-xs pull-right"  style= "font-size: 17px; ">
</a>
</div>

➡️필요한 코드만 남기고 나머지는 지우기

---

💡개인적으로 파일들을 순서대로 만드는 것이 덜 헷갈리는 방법 같다.

1. DTO(VO)
2. contoller
3. service/serviceImpl
4. dao
5. mapper

📕dto(vo)

전에 작성한 내용과 같은 dto에 getter , setter를 추가한다.

public class boardDTO {
	private int writeNum;
	private String title;
	private String content;
	private String regDate;
	private int hitNum;
	private String imgFile;
	private String writer;
}

getter,setter를 추가하는 방법
1.마우스 우클릭 - source - generate getters and setters
2.Alt + Shift + s - generate getters and setters

🖋️.이 없는 시간으로 변경

• 작성 날짜에서 시간 표시는 보통 .이 나오기 때문에 형태를 변경해주어야 한다.

	public void setRegDate(java.sql.Timestamp regDate) {
		SimpleDateFormat format = new SimpleDateFormat("YYYY-MM-dd HH:mm:ss");
		this.regDate = format.format(regDate);
	}

✂️변경 전

✂️변경 후

---

📕controller

• 어노테이션 @Controller을 사용해서 빈을 등록한다.
• @RequestMapping 은 컨트롤러에서 들어온 요청을 특정 메서드와 매핑하기 위해 사용하는데 여기서 공통적으로 board를 쓰고 있어서 반복을 줄이기 위해 사용했다.
• @Autowired로 service를 자동 주입 함으로서 연결해준다.

@Controller
@RequestMapping("board")
public class boardController{	
	@Autowired boardService bs;
	
	@GetMapping("list")
	public String board(HttpSession session, Model model, @RequestParam(required = false,defaultValue="1") { 
		bs.boardList(model);
		if(session.getAttribute(LOGIN) != null) {
			return "board/list";			
		}
		return "member/login";
	}

• 단순 경로 연결이라 @GetMapping 을 써준다.
• 상단에 로그인한 사용자 아이디 접속중을 나타내기 위해 HttpSession을 불러왔다. 게시판 목록은 단순 리스트를 보여주는 부분이라 안써도 괜찮다.
  controller까지 연결하기 위해 Model을 쓰고, @RequestParam을 사용해서 db에 저장된 모든 값을 가져오고 값이 없다면 default값으로 1을 준다.
• 자동 주입한 bs를 service로 넘겨준다.
• 로그인한 사용자는 session을 가지고 있고 세션이 있다면 게시판 목록 페이지를 돌려주고 세션이 없을 경우 로그인 페이지로 이동한다.

---

📕service/serviceImpl

1. service

public interface boardService {
	public void boardList(Model model);
}

2. serviceImpl

• 오버라이딩 하기
• @Service 어노테이션을 사용해서 등록한다.
• @Autowired로 mapper로 연결해준다.

@Service
public class boardServiceImpl implements boardService {
	@Autowired BoardMapper mapper;
	public void boardList(Model model) {
		model.addAttribute("boardList", mapper.boardList);
	}

• Model에 데이터를 담기 위해 addAttribute( ) 메소드를 사용했다. value 객체인 mapper.boardList를 name 이름 "boardList"로 지정했고
  뷰 코드에서는 name으로 지정한 이름을 통해서 value를 사용한다.

---

📕DAO

public interface BoardMapper {
	public java.util.List<boardDTO> boardList;
}

• 목록은 리스트 형식으로 받기 위해 List 배열을 사용하고 dto를 받아준다.

---

📕mapper XML

<mapper namespace="com.care.board.mybatis.board.BoardMapper">
	<resultMap type="com.care.board.board.dto.boardDTO" id="boardAllList">
		<id property="writeNum" column="write_num" />
		<result property="title" column="title" />
		<result property="content" column="content" />
		<result property="regDate" column="regDate" />
		<result property="hitNum" column="hit" />
		<result property="imgFile" column="img_file" />
		<result property="writer" column="writer" />
	</resultMap>
    
	<select id="boardList" resultMap="boardAllList">
		select * from talk_board
	</select>
</mapper>

• namespace에 매퍼의 경로를 설정한다.
• <resultMap type>은 dto 패키지명, id는 type을 부를 명으로 작성한다.
• dto와 sql 매핑 작업을 해주어야 하는데 id는 프라이머리키로 property 는 dto명 , column은 sql 컬럼명을 의미한다.
• <select> 는 데이터를 조회 때 사용하는 구문으로 id는 구문을 찾기위한 유일한 구분자이다.
• select안에 쿼리문을 작성해주면 되는데 db에서 전체 데이터를 가져온다.

---

📕 jsp

<table>
<thead>
	<tr>
		<th>번호</th>
		<th>제목</th>
		<th>작성자</th>
		<th>조회수</th>
		<th>작성일자</th>
	</tr>
</thead>
<c:forEach items="${boardList}" var="dto">
	<tr class="odd gradeX">		
    	<td>${dto.writeNum }</td>
		<td><a href="${contextPath }/board/writeView?writeNum=${dto.writeNum}"> ${dto.title }</a></td>
		<td>${dto.writer }</td>		
    	<td>${dto.hitNum }</td>					
        <td>${dto.regDate }</td>
	</tr>
</c:forEach>
</table>

• 글이 추가될수록 리스트 형식으로 보여지기 때문에 <c:forEach items="${boardList}" var="dto"> 로 반복문을 사용했다.
  변수명 var을 지정해 데이터를 가져온다.
• 제목 부분은 클릭하면 링크를 사용해 글번호를 넘겨받아 상세글 페이지를 보여준다.

---