学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

【民泊6.0】【MacOSX】ページネーション

検索ページにページング機能をつけます。


「GemFile」に以下の記述を追加します。


記述追加 GemFile(83行目)

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'

# アマゾンS3
gem "aws-sdk"

#googleマップ
gem 'geocoder', '~> 1.4'

# 検索
gem 'ransack', '~> 2.3'

# stripe
gem 'stripe', '=4.18.1'

# stripeコネクト
gem 'omniauth', '~> 1.6'
gem 'omniauth-stripe-connect', '~> 2.10.0'

# ページネーション
gem 'kaminari'



コマンド(2つ)
bundle


rails g kaminari:views bulma


「app\controllers\reservations_controller.rb」ファイルに以下の記述を追加します。


記述追加 app\controllers\reservations_controller.rb(40行目)

.page(params[:page]).per(5)



app\controllers\reservations_controller.rb

class ReservationsController < ApplicationController

  before_action :authenticate_user!
  before_action :set_reservation, only: [:approve, :decline]

  def create
    room = Room.find(params[:room_id])
    if current_user == room.user
      flash[:alert] = "オーナーが予約することはできません。"
    elsif current_user.stripe_id.blank?
      flash[:alert] = "予約する前にクレジットカードを登録する必要があります。"
      return redirect_to settings_payment_path
    else
        start_date = Date.parse(reservation_params[:start_date])
        end_date = Date.parse(reservation_params[:end_date])
        days = (end_date - start_date).to_i
      if days == 0
        flash[:alert] = "宿泊日数が1泊以上でなければ予約することはできません。"
      else
        @reservation = current_user.reservations.build(reservation_params)
        @reservation.room = room
        @reservation.price = room.price
        @reservation.total = room.price * days
        #@reservation.save
        if @reservation.Waiting!
          if room.Request?
            flash[:notice] = "予約承認申請を送信しました。予約が承認されるまでしばらくお待ち下さい。"
          else
            charge(room, @reservation)
          end
        else
          flash[:alert] = "ご予約できません!"
        end
      end
    end
    redirect_to room
  end

  def your_trips
    @trips = current_user.reservations.order(start_date: :asc).page(params[:page]).per(5)
  end

  def your_reservations
    @rooms = current_user.rooms
  end

  def approve
    @reservation.Approved!
    redirect_to your_reservations_path
  end

  def decline
    @reservation.Declined!
    redirect_to your_reservations_path
  end

  private

  def reservation_params
    params.require(:reservation).permit(:start_date, :end_date)
  end

  def set_reservation
    @reservation = Reservation.find(params[:id])
  end

  def charge(room, reservation)
    host_amount = (reservation.total * 0.8).to_i # 売上の80%がホストに入る
    if !reservation.user.stripe_id.blank?
      customer = Stripe::Customer.retrieve(reservation.user.stripe_id)
      charge = Stripe::Charge.create(
        :customer => customer.id,
        :amount => reservation.total,
        :description => room.listing_name,
        :currency => "jpy",
        transfer_data: {
          amount: host_amount, 
          destination: room.user.merchant_id, # ホストのストライプID
        },
      )
      if charge
        reservation.Approved!
        flash[:notice] = "お支払い手続きが完了し、ご予約されました。お越しをお待ちしております!"
      else
        reservation.Declined!
        flash[:notice] = "お支払い手続きができません。予約ができませんでした。"
      end
    end
  rescue Stripe::CardError => e
    reservation.declined!
    flash[:alert] = e.message
  end
  
end
  



「app\views\reservations\your_trips.html.erb」ファイルに以下の記述を追加します。


記述追加 app\views\reservations\your_trips.html.erb(5行目)

<%= paginate @trips %>
<br/>



app\views\reservations\your_trips.html.erb

<section class="section">
    <div class="container">
        <p class="title">ご予約内容</p>
        <br/>
        <%= paginate @trips %>
        <br/>
        <table class="table is-fullwidth" style="text-align: center;">
            <thead>
                <tr>
                    <th>申し込み日</th>
                    <th>ステータス</th>
                    <th>お部屋</th>
                    <th>ホスト</th>
                    <th></th>
                    <th>料金</th>
                    <th>アクション</th>
                </tr>
            </thead>
            <tbody>
                <% if @trips.blank? %>
                  <tr>
                      <td colspan="7" class="has-text-centered"><h1>表示できるご予約はありません。</h1></td>
                  </tr>
                <% end %>
                <% @trips.each do |trip| %>
                    <tr>
                        <td style="padding-top: 30px;"><%= I18n.l(trip.created_at, format: :full_date) %></td>

                        <!-- ステータス -->
                        <td style="padding-top: 30px;">

                            <% if trip.Waiting? %>
                                <p class="tag is-warning">承認待ちです。しばらくお待ち下さい。</p>
                            <% elsif trip.Approved? %>
                                <p class="tag is-success">予約済みです</p>
                            <% else  %>
                                <p class="tag is-warning">予約できませんでした</p>
                            <% end  %>

                        </td>

                        <td>
                            <%= link_to room_path(trip.room), data: { turbolinks: false} do %>                                
                                <%= image_tag room_cover(trip.room), class: "image is-64x64" %>
                                <%= trip.room.listing_name %>
                            <% end %>
                        </td>

                        <td style="padding-top: 30px;">
                            <%= link_to user_path(trip.room.user), class: "tootip" do %>
                                <figure class="image is-48x48">
                                    <%= image_tag avatar_url(trip.room.user), class: "is-rounded" %>
                                </figure>
                                <%= trip.room.user.full_name %>
                            <% end %>
                        </td>

                        <td style="padding-top: 30px;">
                            宿泊日:<%= I18n.l(trip.start_date, format: :full_date) %><br/>
                            ご出発:<%= I18n.l(trip.end_date, format: :full_date) %>
                        </td>

                        <td style="padding-top: 30px;"><%= number_to_currency(trip.total) %></td>

                        <!-- アクション -->
                        <td style="padding-top: 30px;">
                            <%= render partial: "reviews/guest_form", locals: {reservation: trip} if trip.Approved? %>
                        </td>

                    </tr>
                <% end %>
            </tbody>

        </table>

    </div>
</section>



ブラウザ確認
http://localhost:3000/your_trips

ページネーション
ページネーション


YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)