프로젝트

가전제품 대여 웹사이트 (세숫대여) - 자유게시판 글 목록 조회 기능

sejin2 2023. 9. 27. 23:45

게시글 작성 후 작성된 글 목록을 볼 수 있도록 게시글 목록에 데이터를 불러오는기능을 구현하였다. 

 

게시글 리스트 화면

freeboardlist.jsp

   <div class="container-fluid mt--7">
      <div class="row">
        <div class="col-xl-12 mb-5 mb-xl-0">
          <div class="card shadow">
            <div class="card-header border-0">
              <div class="row align-items-center">
                <div class="col">
                  <h3 style="font-weight:bold" class="mb-0">자유게시판</h3>
                </div>
                <div class="col text-right">
                  <a href="freeboardwrite" class="btn btn btn-primary">게시글 작성</a>
                </div>
              </div>
            </div>
            <div class="table-responsive">  
         <!-- Projects table -->
         <table class="table align-items-center table-flush">
           <thead class="thead-light">
             <tr style="text-align:center;">
               <th scope="col" style="width:100px; font-size:10pt">게시글 번호</th>
               <th scope="col" style="width:500px; font-size:10pt">게시글 제목</th> 
               <th scope="col" style="width:200px; font-size:10pt">작성자</th>
               <th scope="col" style="width:100px; font-size:10pt">조회수</th>
               <th scope="col" style="width:150px; font-size:10pt">게시글 작성 일자</th>
             </tr>
           </thead>
           <tbody>
            <c:forEach var="freeBoard" items="${ requestScope.freeBoardList }">
             <tr style="text-align:center">
                <td scope="col" style="width:100px">${ freeBoard.freeBoardNo } </td>
                <td scope="col" style="width:500px">${ freeBoard.freeBoardTitle }</td>
                <td scope="col" style="width:200px"> ${ freeBoard.freeBoardDelete? '' : sessionScope.loginuser.memberId } <!-- 게시글 삭제시 작성자 안보이게 설정 -->
		                							 <input type="hidden" name="memberNo" value="${ loginuser.memberId }"> 
                <td scope="col" style="width:100px">${ freeBoard.freeBoardViewCount } </td>
                <td scope="col" style="width:150px"><fmt:formatDate value="${ freeBoard.freeBoardDate }" pattern="yyyy-MM-dd HH:mm"/></td>
             </tr>
            </c:forEach>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

** 아직 로그인 / 회원가입 기능을 구현하는 팀원과 로그인 세션 작업을 하지 않은 상태 !

 

Dto

FreeBoardDto.java

@Data
public class FreeBoardDto { 
	
	private int freeBoardNo;
	private int adminId;
	private String freeBoardTitle;
	private String freeBoardContent;
	private Date freeBoardDate;
	private int freeBoardViewCount;
	private boolean freeBoardDelete;
	
	private List<FreeBoardReviewDto> freeBoardReviewList; 
}

DB에 저장된 여러 게시글을 불러와야 하므로 List 형태의 변수를 만들었다.

 

Controller

- 자유게시판 전체 게시글을 불러오는 메서드 

FreeBoardController.java

@GetMapping(path= {"/freeboardlist"})
	public String list(Model model) {  
		List<FreeBoardDto> freeBoardList = freeBoardService.listFreeBoard(); 
		model.addAttribute("freeBoardList", freeBoardList); 
		return "freeboard/freeboardlist";
	}

Service

FreeBoardService.java

List<FreeBoardDto> listFreeBoard();

FreeBoardServiceImpl.java

@Override
	public List<FreeBoardDto> listFreeBoard() { 
		List<FreeBoardDto> freeBoardList = freeboardMapper.selectAllFreeBoard(); 
		return freeBoardList; 
	}

Mapper

FreeBoardMapper.java

@Select("select freeBoardNo, memberNo, freeBoardTitle, freeBoardViewCount, freeBoardDate, freeBoardDelete " 
			+ " from FreeBoard "
			+ "order by freeBoardNo desc")
	
	List<FreeBoardDto> selectAllFreeBoard();

실행결과 작성한 글들이 목록에 나타나는 것을 확인할 수 있다.