#25 CRUD 게시판 - Read (목록,페이징,상세보기)

 

글 목록 보기

 

이전에 적었던 글을 이제 보이게 하자.

해당 페이지로 올 때 Select를 해야 한다.

 

 

메인페이지(index)로 갈 때 BoardService를 연결하자

메인페이지로 갈 때 데이터를 가져와야 한다.

스프링에서는 이 데이터를 가져갈 때 Model이 하나 필요하다.

model에 데이터를 담기 위해 addAttribute() 메소드를 사용한 것이다.

누가 "/"로 주소를 요청하면 model에 글목록을 다 들고 온다.

이 글 목록은 BoardService에서 findAll()로 다 가져올 수 있다. 

 

model.addAttribute(String name, Object value)

: value 객체를 name 이름으로 추가한다.

 

이제 boardService에 가서 글목록()을 작성해주자

현재 boardRepository가 들고 있는 JPA의 findAll() 함수를 사용한다.

findAll()은 SELECT * FROM과 같다. 조건 없이 모든 튜플을 가져온다.

 

*Spring Data JPA는 관계형 데이터베이스를 사용하기 위해 JPA에서 바로 접근하는 기술이다.

이전에 사용했던 save()는 INSERT와 같다.

 

 

이제 index.jsp로 가서 jstl을 이용해서 코드를 작성해보자.

현재 jstl 라이브러리를 header.jsp에서 가져왔으니 그냥 사용하면 된다.

 

우선 2, 3번째를 지워버리고

 

jstl을 작성한다.

${boards}는 request 정보가 넘어올 때 boards를 받을 수 있다.

이 boards가 index 페이지로 날아가서, 그것을 items="${boards}"로 받는 것이다.

받아서 그걸 한 건씩 board라는 변수에 집어넣게 된다.

그걸 이제 뿌릴 수 있다.

 

*

JSP 2.0버전에서 새로 추가된 스크립트 언어인 EL(Expression Language)은

<%= abc %>를 ${abc}로 간단하게 사용할 수 있게 하였고,
JSTL의 Core에서 c를 이용해 <%= if%>문을 <c:if>로, <%=for%>문을 <c:forEach>로 대체하여 사용한다.

 

다시 index.jsp로 돌아가서

하나씩 변수에 집어넣었던 board의 title을 가져와 뿌릴 수 있다.

${board.title}은 실제로 getTitle이라는 getter 메소드가 호출되는데

현재 Board.java에 @Data 어노테이션으로 getter와 setter가 만들어 놨기 때문에 잘 호출된다.

즉, ${board.title}라고 하면 실제로는 board.getTitle()이 호출된다는 것이다.

 

 

글 목록 보기 실행결과

board 테이블의 title들이 제대로 보이는 것을 확인할 수 있다.

글을 써도 추가되는지 확인해보자

 

핑크빈으로 로그인을 하고

글을 쓰면

잘 나오는 것을 확인할 수 있다.

board 테이블에도 잘 저장된 모습이다.

 

 

 

글 목록 페이징

 

이제 글 목록을 페이징처리 해보자

페이징 처리의 원리는 이전에 작성했었던 #12 select 테스트 및 페이징 게시글에서 확인할 수 있다.

https://daramgda.tistory.com/61?category=554648 

#12 select 테스트 및 페이징

 

 

BoardController.java

import org.springframework.data.domain.Pageable;

그리고 boardService의 글목록으로 가서

 

BoardService.java

 

index.jsp

반드시 .content를 작성해야 페이징이 처리된다.

 

실행결과 :

page=0

 

page=1

 

페이징이 잘 처리되는 것을 확인할 수 있다.

 

이제 페이지 버튼을 만들어주자

 

 

https://www.w3schools.com/bootstrap4/default.asp

 

위 부트스트랩 링크로 들어가서,

좌측 메뉴에서 Pagination을 클릭한다.

얘를 사용하도록 하자. Example의 코드를 복사한다.

해당 코드를 수정해서 페이지를 사이트에 구현할 수 있다.

 

이전과 다음 버튼을 페이지가 첫페이지와 마지막 페이지일 경우에 비활성화 시키고

totalPages의 목록과 해당 버튼을 누를 경우 해당 페이지로 이동하게 만드는 코드이다.

 

 

글 목록 페이징 실행결과

 

페이지 버튼들이 생기고 기능이 정상적으로 작동하는 것을 확인할 수 있다.

 

 

 

글 상세보기

index.jsp에서 "#"으로 되어있던 href를 "/board/${board.id}"로 작성해준다.

 

BoardController.java에 다음과 같이 코드를 작성한다.

@Controller에서 다음과 같은 URL 경로에 변수를 넣어주기 위해 @PathVariable을 사용한다.

이제 boardService로 가서 글상세보기()를 작성해주자

 

람다식으로 예외처리도 확실하게 하고,

이제 다시 BoardController로 가서

 

BoardController에서 코드를 작성한다. 앞서 페이징처리와 마찬가지로 모델을 이용하고

model에 데이터를 담기 위해 addAttribute() 메소드를 사용한다.

글 상세보기를 구현하기 위해선 해당 페이지인 board/detail을 만들어야 한다.

빠르게 만들어보자. 우선 해당 board 폴더에 담겨있는 saveForm 파일을 복사해서 붙여넣고 수정해보자

detail.jsp 파일을 다음과 같이 작성했다.

수정과 삭제는 다음 시간에 구현하기로 하고 여기까지 작성한 코드를 실행시켜보자

 

 

글 상세보기 실행결과

 

이 글의 상세보기를 클릭해보자

 

핑크빈 > 다람쥐라고 주장하는 모습이다.

폰트 스타일이나 사진까지 모두 깔끔하게 나오는 것을 확인했다.

 

여기까지 CRUD에서 READ 파트였다.

 

 

학습자료 :

https://youtu.be/5zyONDFAbDQ

https://youtu.be/y3ABMs9pieg

https://youtu.be/ZNrRqthcZyk