Spring Boot으로 웹 출시까지 8. JPA를 이용한 페이지 처리 및 검색

jpa를 통해 게시판에 페이지를 달아볼 것이다.

 

기존에는 전체 데이터의 건수를 가져왔다.

게시판에 글이 많아지면  데이터를 전체 보내줄 수 없다.

페이지 처리를 SQL로 작성하게 되면, 전체 데이터 건수와 인덱스의 몇건을 보여줄 지 쿼리 작성에 손이 많이 감.

페이지 처리를 위해 UI부터 작성을 해야 함.

글 내용과 쓰기 사이에 페이지를 넣으면 좋을 것 같음.

 

bootstrap에 페이지네이션 오버뷰가 있음.

center라고 적으면 가운데 정렬이 된 페이지네이션이 있음.

쓰기 버튼 사이에 붙여넣기를 해볼 것임.

기능을 달아볼 것이다.

Spring Data JPA

전에는 boardRepository에서 findAll을 했음.

Pageable 클래스를 전달해주면, Page 형태의 데이터 타입을 받을 수 있음.

PageRequest.of를 이용해서 of라는 메소드를 호출하면 Pageable이라는 클래스가 나옴.

반환값을 Page로 바꾸고 인자를 PafeRequest.of로 변경.

첫번째 파라미터는 page

두번째 파라미터는 size

그러나 jpa에서는 첫번째 페이지가 0부터 시작함.

그대로 다 나오지만, 전체 건수가 1로 나옴.

 

건수를 보여주는 항목이 lists.size(boards)이다.

break point를 검.

board 부분이 어떻게 생겼는지 볼 것임.

 

page와 사이즈.

1페이지에 20개씩 보여주겠다.

사용할 수 있는 여러 메소드들이 있다.

getPageable을 사용해서 페이지 정보를 사용할 수 있다.

지금 사용할 것은 getTotalElements가 있다. 이는 전체 데이터 건수이다.

geTotalPages는 총 몇개의 페이지가 있는가

 

인텔리제이에서는 해당 버튼을 디버깅모드에서 누르면

전체 페이지 갯수가 하나이다.

게시글은 전부 4개이다.

해당 메소드를 사용해서 건수를 보여줄 것임.

리스트 유틸리티를 이용해서 리스트 갯수를 보여주고 있었다.

타임리프트에는 메소드를 바로 입력하지는 않는다.

데이터 필드를 꺼내는 그런 메소드는

바꿔서 작성하게 되면 타임리프에서 결과를 사용할 수 있게 됨.

테스트를 위해 작성했던 코드 부분은 삭제

전체 데이터가 표시가 됨.

하드코딩 부분을 지움.

스프링프레임워크의 Pageable을 임포트.

pageable을 삽입

변화가 없음.

페이지 값을 전달할 수 있음

두번째 페이지 인덱스를 전달하면 됨

size를 1개 지정하면 1개만 나옴.

size를 2로 지정하면 2개가 나옴.

pageable인수가 그대로 전달이 됨.

페이지 값에 따라 활성화를 할 것인지 아닌지를 정할 것임.

1만 남기고 지울 것임.

getPageNumber로 현재 페이지를 가져옴

그래서 현재 페이지 기준 2-3 페이지를 보여줌.

start와 end 페이지를 컨트롤러에 작성함.

li에 루프를 돌려야 함. 루프 돌리는 방법은 thymeleaf에서 확인해볼것임.

numbers의 sequence를 통해서 돌릴 수 있음.

구글링으로 찾아서 만들어진 값을 써도 된다.

첫번째 값부터 인덱스가 하나씩 증가하면서 두번째 파라미터 마지막 값까지 값이 증가가 됨.

 

<th:block th:each="i: ${#numbers.sequence(0, response.count - 1)}">
    <button th:if="${response.page == i}" class="active">Dummy</button>
    <button th:unless="${response.page == i}">Dummy</button>
</th:block>

 

이미 달러 기호를 해놨기 때문에 변수를 적어도 됨

 

111로 나옴

th:text로 i를 보여줄 것임.

start값이 1이 되어야 함.

size 값이 2만 나오게 했다.

알아서 하단에 페이지가 나옴.

현재 페이지 링크가 활성화 된 것은 이상하다.

pageable의 디폴트 값을 설정할 수 있음.

어노테이션을 통해 사이즈 갯수를 지정할 수 있음.

default는 10인데, 데이터가 적으므로 2로 지정해보겠다.

한페이지당 건수가 2개로 표시

현재 페이지는 비활성화 시키고, Next를 누루면 다음페이지로 가도록 함.

비활성화시키는 방법은

bootstrap에 disabled라는 클래스를 지정.

그러나 해당 부분에 그냥 disabled를 적으면 전부 비활성화 처리됨.

특정 조건일 때에만 비활성화 될 수 있도록 함.

인덱스 i의 값이 현재 페이지일 경우에.

현재 페이지를 가져오는 메소드를 복사해서 가져옴.

변수로 바꿔줌

GetPage -> page

페이지의 넘버가 현재와 일치했을 때, 비활성화시킴.

잘 안되고 있음.

왜냐하면 i는 1부터 출력이 될 것임.

그래서 +1을 추가해줘야 함.

1페이지 비활성화 됨.

다음페이지에서 2가 비활성화 됨

Next와 Previous를 조건에 따라 지정해줘야 함.

우선 disabled를 지움

현재페이지가 가장 작은 값이면 비활성화.

Next에도 붙여준다.

가장 높은 페이지다.

Next 사라짐

링크를 걸어볼것임

파라미터를 전달해줄 것임.

알아서 변경해줌.

1페이지이면 비활성화가 될 것임.

Next에는 +1 을 붙이도록 할 것이다.

페이지는 루프가 도는데 실제적으로는 -1을 해야 링크를 걸 수 있다.

페이지가 제대로 동작함.

페이지 사이즈를 1로 설정해도,

디폴트가 2라서 다시 돌아오게 됨.

실제로 쿼리를 작성하지 않아도 웹페이지 개발을 할 수 있음.

https://getbootstrap.com/docs/5.3/forms/form-control/

우측 상단에 검색 기능을 만들어볼 것임.

부트스트랩에서 폼 검색.

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

폼을 하나 만들 것임.

건수 아래 부분에 붙여넣을 것임.

필요없는 부분은 날려버릴 것임.

해당 부분 제거

id와 name을 주고 placeholder를 지운다.

텍스트 내용도 검색으로 바꾼다.

우측 정렬을 해볼 것이다

css를 이용해서 우측 정렬할 수 있다.

사전 정렬 된 클래스들이 있다.

 

해당 부분을 복사해온다.

form에 추가를 한다.

검색 버튼이 눈에 띈다.

btn 검색을 해보면,

해당 색상이 적용될 수 있다.

Light 컬러가 적당해보임.

primary는 파란색이다.

Light 컬러 사용

검색이 눈에 덜띄어서 쓰기가 강조가 된다.

패스워드로 표시가 된다.

input type text로 변경

값이 입력됐을 때 검색이 알아서 파라미터로 변환시켜야 함.

그러기 위해서는 페이지처럼 searchText를 받도록 함.

Page<Board> 타입으로 리턴을 받을 것임.

Containing 이라는 사전에 정의된 키워드가 있음.

해당 문자열이 포함된 모든 firstname을 다 검색해옴.

Title과 Content를 통해 검색해옴.

searchText를 인자로 반영하여 찾도록 함.

에러가 났는데 기본적으로 호출을 하게 되면 searchText가 null값이 들어갔기 때문에 에러가 발생함.

RequestParam을 지정해서 default값을 지정해줄 수 있음.

searchText 값이 없어도 사이트가 열림.

searchText에 제목을 넣어서 검색되도록 함.

GET으로 action을 취하도록 함.

파라미터가 같이 전달될 것임.

안녕의 검색 결과값이 나옴.

Spring의 내용이 동일하므로 같은 값이 나온다.

월드가 검색이 됐지만, 같이 표시가 되지 않음.

input type이 텍스트박스이다.

 

리퀘스트 파람을 담을 수 있음.

 

param.변수값

을 작성하면 담을 수 있음.

상기와 같이 텍스트박스에 파라미터 내용이 들어감.

검색을 하고 페이지 이동을 하면 텍스트가 초기화됨.

두번째 검색을 하게 되면 초기화됨.

 

링크에는 searchText값을 전달해주지 않음.

searchText 값을 전달해주고 있지 않음.

searchText를 추가해줌.

페이지와 검색 처리까지 잘됨.

https://www.youtube.com/watch?v=hmSPJHtZyp4