[34]検索の実装 << [ホームに戻る] >> [36]ホームページ
検索ページにページング機能をつけます。
「GemFile」に以下の記述を追加します。
記述追加 GemFile(77行目)
gem 'kaminari'
GemFile
source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.3' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 6.0.3' # Use postgresql as the database for Active Record gem 'pg', '>= 0.18', '< 2.0' # Use Puma as the app server gem 'puma', '~> 4.1' # Use SCSS for stylesheets gem 'sass-rails', '>= 6' # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker gem 'webpacker', '~> 4.0' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.7' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 4.0' # Use Active Model has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Active Storage variant # gem 'image_processing', '~> 1.2' # Reduces boot times through caching; required in config/boot.rb gem 'bootsnap', '>= 1.4.2', require: false group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] end group :development do # Access an interactive console on exception pages or by calling 'console' anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '~> 3.2' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' end group :test do # Adds support for Capybara system testing and selenium driver gem 'capybara', '>= 2.15' gem 'selenium-webdriver' # Easy installation and use of web drivers to run system tests with browsers gem 'webdrivers' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] # Bulma gem 'bulma-rails', '~> 0.7.4' gem 'bulma-extensions-rails', '~> 1.0.30' #デバイス gem 'devise' # 日本語化 gem 'rails-i18n' # facebook認証 gem 'omniauth', '= 1.9.0' gem 'omniauth-facebook', '= 5.0.0' # amazon s3 gem "aws-sdk" # faker gem 'faker', '=1.9.3' #ページネーション gem 'kaminari'
コマンド(2つ)
bundle
rails g kaminari:views bulma
「app\controllers\pages_controller.rb」ファイルに以下の記述を追加します。
記述追加 app\controllers\pages_controller.rb（43,44行目）
.page(params[:page]) .per(6)
app\controllers\pages_controller.rb
class PagesController < ApplicationController def home end def search @categories = Category.all @category = Category.find(params[:category]) if params[:category].present? @q = params[:q] @min = params[:min] @max = params[:max] @delivery = params[:delivery].present? ? params[:delivery] : "0" @sort = params[:sort].present? ? params[:sort] : "price asc" query_condition = [] query_condition[0] = "gigs.active = true" query_condition[0] += " AND ((gigs.has_single_pricing = true AND pricings.pricing_type = 0) OR (gigs.has_single_pricing = false))" if !@q.blank? query_condition[0] += " AND gigs.title ILIKE ?" query_condition.push "%#{@q}%" end if !params[:category].blank? query_condition[0] += " AND category_id = ?" query_condition.push params[:category] end if !params[:min].blank? query_condition[0] += " AND pricings.price >= ?" query_condition.push @min end if !params[:max].blank? query_condition[0] += " AND pricings.price <= ?" query_condition.push @max end if !params[:delivery].blank? && params[:delivery] != "0" query_condition[0] += " AND pricings.delivery_time <= ?" query_condition.push @delivery end @gigs = Gig .select("gigs.id, gigs.title, gigs.user_id, MIN(pricings.price) AS price") .joins(:pricings) .where(query_condition) .group("gigs.id") .order(@sort) .page(params[:page]) .per(6) end end
「app\views\pages\search.html.erb」ファイルに以下の記述を追加します。
記述追加 app\views\pages\search.html.erb(105行目)
<%= paginate @gigs %>
app\views\pages\search.html.erb
<%= render 'shared/categories' %> <section class="section"> <div class="container"> <!-- 上部 --> <div class="card m-b-20"> <div class="card-header"> <!-- カテゴリー --> <div class="card-header-title"> カテゴリー <% if @category %> ： <%= @category.name %> <% end %> </div> <!-- 並び替え --> <%= form_tag '', method: :get do %> <%= hidden_field_tag 'category', @category ? @category.id : '' %> <div class="field p-10"> <div class="select"> <%= select_tag 'sort', options_for_select( [ ['価格の低い順', 'price asc'], ['価格の高い順', 'price desc'], ['最新のものから', 'gigs.created_at desc'], ['古いものから', 'gigs.created_at asc'] ], selected: @sort ), onchange: "this.form.submit();" %> </div> </div> <% end %> </div> </div> <div class="columns"> <!-- 左側 --> <div class="column is-one-quarter"> <div class="columns is-multiline"> <div class="column is-full"> <div class="card"> <div class="card-content"> <%= form_tag '', method: :get do %> <%= hidden_field_tag 'category', @category ? @category.id : '' %> <%= hidden_field_tag 'sort', @sort %> <!-- タイトル検索 --> <div class="field"> <%= text_field_tag 'q', @q || '', class: "input", placeholder: "タイトルで検索" %> </div> <hr/> <!-- 価格帯 --> <label class="label">価格帯</label> <div class="field has-addons"> <p class="control"> <%= number_field_tag 'min', @min || '', class: "input", placeholder: "最低" %> </p> <p class="control"> <a class="button is-static">円</a> </p> </div> <div class="field has-addons"> <p class="control"> <%= number_field_tag 'max', @max || '', class: "input", placeholder: "最高" %> </p> <p class="control"> <a class="button is-static">円</a> </p> </div> <hr/> <!-- 期日 --> <label class="label">期日</label> <%= radio_button_tag 'delivery', "1", checked = "1" == @delivery %> １日以上 <br> <%= radio_button_tag 'delivery', "3", checked = "3" == @delivery %> ３日以上 <br> <%= radio_button_tag 'delivery', "7", checked = "7" == @delivery %> ７日以上 <br> <%= radio_button_tag 'delivery', "10", checked = "10" == @delivery %> １０日以上 <br> <%= radio_button_tag 'delivery', "15", checked = "15" == @delivery %> １５日以上 <br> <%= radio_button_tag 'delivery', "0", checked = "0" == @delivery %> 全て <hr/> <!-- 下部 --> <div class="field m-t-20"> <button class="button is-danger is-fullwidth" type="submit"> 検索</button> </div> <% end %> <div class="field m-t-10"> <%= form_tag '', method: :get do %> <button class="button is-black is-outlined is-fullwidth" type="submit"> 検索条件のクリア</button> <% end %> </div> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="column infinite-list"> <!-- お仕事のリスト --> <div class="columns is-multiline"> <%= render partial: 'shared/gigs', object: @gigs %> </div> <!-- ページネーション --> <div class="card"> <div class="card-header-title is-centered"> <%= paginate @gigs %> </div> </div> </div> </div> </div> </section>
ブラウザ確認
http://localhost:3000/search
↓↓クリックして頂けると励みになります。
[34]検索の実装 << [ホームに戻る] >> [36]ホームページ
