게시판 페이지 목록 구현 [Gem : kaminari]
Make Bulletin board paginate with 'kaminari' Gem
그 중, 저는 이번 시간에는 '게시판 페이지 목록'을 셋팅하는법에 대해 설명하겠습니다.설명하기 전에 앞서서, 만약에 게시판에 페이지 목록이 없다면 어떻게 될까요?
▲ 만약에 게시판에 페이지 목록이 없다면..?..
글이 계속 세로로 쭈우우욱 무한히 써져나가고, 엄청난 스크롤 압박이 찾아오겠죠?이를 방지하기 위해 탄생한 것이 '게시글 페이지 목록' 입니다.
시작 전 유의사항
- 이 글은 게시판의 이름을 post라고 쓴다는 가정 하로 작성됩니다.
- 이 글은 당신이 부트스트랩을 쓴다는 가정 하에 글을 작성합니다. 일부 부분이 부트스트랩을 활용합니다.
- 필자는 CRUD 사용 시, scaffold를 사용했습니다.
1. /Gemfile로 이동하시고, 다음 내용을 입력합니다.
gem 'kaminari'그리고 명령어 입력창(터미널)에 다음 명령어를 입력합니다.
bundle install2. /app/controllers/(게시판 컨트롤러 이름)_controller.rb로 이동하셔서 목록에 해당되는 정의(필자는 def index) 속에 다음 내용을 추가합니다.(저는 게시판 컨트롤러 이름이 posts라서 /app/controllers/Posts_controller.rb 파일을 열람했습니다.)
class PostsController < ApplicationController
...
def index
...
@posts = Post.order("created_at DESC").page params[:page]
end
...
end참고
1) 게시글이 보여질 시, 내림차순 정렬이 됩니다.
(오름차순 정렬을 원하시면 order("created_at DESC") 이 부분을 없애주세요!)
그리고 이어서 /app/models/(게시판 모델 이름).rb로 이동하시고, model 파일 안에 다음 내용을 입력해줍니다.(저는 게시판 모델 이름이 post라서 /app/models/post.rb 파일을 열람했습니다.)
class Post < ApplicationRecord
...
paginates_per 5
...
end참고
1) 위 예시는 '한 목록 당 5개의 글이 보여짐'을 의미합니다. 만약 5개 말고 더 많이 혹은 더 적게 글을 보여주고 싶다면'paginates_per 5' 이 부분에서 숫자를 수정해주세요.
2번 과정 전체적인 참고
만약 show에는 한 목록 당 5개의 게시글을, index에는 한 목록 당 10개의 게시글 이렇게 다르게 보여주고 싶다면model에 paginates_per 5 을 쓰지 말고, Controller에 다음과 같이 입력해주세요.
class PostsController < ApplicationController
def index
...
@posts = Post.order("created_at DESC").page(params[:page]).per(10)
end
def show
...
@posts = Post.order("created_at DESC").page(params[:page]).per(5)
end 위와같이 모든 게시글 정보를 불러오는 컨트롤러 변수 끝에다가 .page(params[:page]).per(10) 을 쓰면model파일에 paginate 정의를 안내려줘도 됩니다.
3. 그리고 View에서 게시물 목록에 해당되는 곳(필자는 index.html.erb)으로 가셔서 적절한 위치에 아래 태그를 삽입합니다.
<%= paginate @posts %>4. 그러면 우선 일단은 내림차순, 한 목록 당 5개의 게시글이 보여지는게 확인됩니다!그리고 더불어 게시판 목록이 보여지는것도 확인됩니다!
▲ 아주 간단하게 Paginate 적용
하지만 여기서 끝나기엔 이 기능에 있어서 아까운것이 있습니다.
kaminari Gem에는 will_paginate와는 다르게 부트스트랩도 적용을 할 수 있습니다! (디자인 꾸미기에 최적화 되어있어요!)
5. 간단한 부트스트랩 디자인을 적용하고 싶다면, 명령어 입력창(터미널)에 다음 명령어를 입력해줍니다.
부트스트랩4-Alpha 사용 기준 작성이며, 부트스트랩 관련 파일(CSS, JS 등)들이 미리 application.html.erb에 적용되어 있어야 합니다.
rails g kaminari:views default
그러면 /app/views에 kaminari 폴더와 함께 뭔가 생겨난걸 확인할 수 있습니다!
여기를 클릭해서 첨부된 파일을 다운로드 하시고, 저 폴더에 옮겨줍니다.
첨부파일 속 파일들은 위 kaminari 폴더에 있는 동일한 파일들이지만, class를 '부트스트랩4-Alpha의 paginate'로 설정한 파일들입니다.
그리고 다시 게시판 리스트를 보면...
▲ 부트스트랩 디자인이 적용된 Paginate!
부트스트랩 디자인이 간단히 적용된게 확인됩니다!!!
하지만.. 전 여기서 아직도 만족을 못하겠더군요.. 이번엔 저 영어가 거슬렸습니다.
▲ 내가 원하는 한국어 패치(...)
그런데 kaminari는 i18n이라 해서 다국어 언어를 설정할 수 있습니다!
▲ Kaminari에서 설명하는 i18n
저는 이번엔 한국어 패치를 해보고자 합니다.
6.
참고
아직 실험은 안해봤습니다만, 저는 devise-i18n Gem이 설치된 가정 하에 했습니다.
※참고 : http://blog.naver.com/kbs4674/221041391645
/config/locals/ 폴더 내에서 kaminari.ko.yml 파일을 생성(다른 이름으로 생성해도 되나, 확장자가 yml이어야 합니다!)합니다.
그리고 생성한 파일(kaminari.ko.yml)에 다음 내용을 입력하고, 저장해줍니다.
ko:
views:
pagination:
first: "« 처음"
last: "마지막 »"
previous: "‹ 이전"
next: "다음 ›"
truncate: "…"
helpers:
page_entries_info:
one_page:
display_entries:
zero: "%{entry_name} 를 찾지 못했습니다."
one: "Displaying <b>1</b> %{entry_name}"
other: "Displaying <b>all %{count}</b> %{entry_name}"
more_pages:
display_entries: "Displaying %{entry_name} <b>%{first} - %{last}</b> of <b>%{total}</b> in total"참고로 저는 번역 안한부분은 무슨기능인지 확실히 몰라서 다 번역은 안했고, 절반만 했습니다.
7. 다시 게시판 목록을 보면 이젠 번역까지 된게 확인됩니다!
▲ 디자인 / 번역 모든게 완벽한 페이지 목록!
이 외에도 더 엄청난기능들이 많은 것 같은데 이걸 다 활용 못하는게 매우 아쉬울 따름입니다...!!
혹시 kaminari에 대해 좋은 기능을 알고있다면 댓글로 작성해주세요!
감사합니다!!
- 팀원의 도움 : L. G. S
- Github - Kaminari : https://github.com/kaminari/kaminari
- 알아두면 좋은 Gem : http://cafe.naver.com/itctsixsens/23