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

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

Rails6.1 | 民泊予約アプリ作成 | 35 | Pagination

↓↓クリックして頂けると励みになります。


34 | 予約ステータス】 << 【ホーム】 >> 【36 | Stripe



ページネーション(Pagination)は、ウェブサイトやアプリケーションで長いリストやコンテンツを複数のページに分割する方法です。
ページネーションを利用することにはいくつかの利点があります。
長いリストやコンテンツを一度に表示すると、ページが読み込みに時間がかかり、ユーザーが情報を見つけるのが難しくなります。
ページネーションを使用することで、コンテンツが小さなページに分割され、ユーザーがスムーズに移動し、必要な情報を見つけやすくなります。

Ruby on Railsでページネーションを実装するために、kaminari というページネーション用のジェム(Gem)を使用します。


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

gem 'kaminari', '~> 1.2', '>= 1.2.2'
 gem 'bootstrap5-kaminari-views'



ターミナルで以下のコマンドを実行します。

bundle install



コントローラーのアクション内で、ページネーションを設定します。
「app\controllers\reservations_controller.rb」ファイルに以下の記述を追加します。


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

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



これは5アイテム以降は次のページに読み込ませるという設定になります。
記述追加 app\controllers\reservations_controller.rb

class ReservationsController < ApplicationController
    
    before_action :authenticate_user!
    before_action :set_reservation, only: [:approve]
  
    def create
      room = Room.find(params[:room_id])
  
      if current_user == room.user
        flash[:alert] = "ホストが予約することはできません。"
      else
  
          start_date = Date.parse(reservation_params[:start_date])
          end_date = Date.parse(reservation_params[:end_date])
          days = (end_date - start_date).to_i + 1
  
          @reservation = current_user.reservations.build(reservation_params)
          @reservation.room = room
          @reservation.price = room.price
          @reservation.total = room.price * days
          @reservation.save
  
          flash[:notice] = "予約が完了しました。"
        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    

    private
    def reservation_params
        params.require(:reservation).permit(:start_date, :end_date)
    end
    
    def set_reservation
      @reservation = Reservation.find(params[:id])
    end

  end



「app/views/reservations/your_trips.html.erb」ビューに以下の記述を追加します

<div class="mt-4"><%= paginate @trips, theme: 'bootstrap-5' %></div>



記述追加 【app/views/reservations/your_trips.html.erb】10行目

<div class="container mt-4">
    <div class="card">
        <div class="card-body">

            <h5 class="card-title text-danger h3 font1">予約内容(ゲスト)</h5>
            <% if @trips.blank? %>
                <h5 class="font1">表示できる予約はありません。</h5>
            <% end %>

            <div class="mt-4"><%= paginate @trips, theme: 'bootstrap-5' %></div>

            <% @trips.each do |trip| %>
                <div class="card mt-4">
                    <div class="card-body">

                        <ul class="list-group">
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">申込日:</span><%= I18n.l(trip.created_at, format: :full_date) %>
                            </li>
                            <li class="list-group-item" style="border: none;">
                            <span class="font1">部屋名:</span>
                                <%= link_to room_path(trip.room), style: "text-decoration: none;", data: { turbolinks: false} do %>                                
                                    <span class="btn btn-light"><%= trip.room.listing_name %></span>
                                <% end %>                            
                            </li>
                            <li class="list-group-item" style="border: none;">
                            <span class="font1">ホスト:</span>
                                <%= link_to user_path(trip.room.user), class: "tootip", style: "text-decoration: none;" do %>
                                        <span class="btn btn-light"><%= trip.room.user.full_name %></span>
                                <% end %>
                            </li>
                            <li class="list-group-item" style="border: none;">
                            <span class="font1">宿泊日:</span>   <%= I18n.l(trip.start_date, format: :full_date) %>                     
                            </li>
                            <li class="list-group-item" style="border: none;">
                            <span class="font1">ご出発:</span>   <%= I18n.l(trip.end_date, format: :full_date) %>                       
                            </li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">泊数:</span><%=trip.total/trip.price %></li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">料金:</span><%= number_to_currency(trip.total) %>
                            </li>
                            <li class="list-group-item mt-4" style="border: none;">
                                <% if trip.end_date < Date.today %>
                                    <%= render partial: "reviews/guest_form", locals: {reservation: trip} %> 
                                <% else %>
                                    <span class="alert alert-danger" style="font-size: 0.7rem;">チェックアウト後にレビューできます</span>
                                <% end %>
                            </li>
                        </ul>

                    </div>
                </div>
            <% end %>

        </div>
    </div>
</div>



表示を確認します。
http://localhost:3000/your_trips
ページネーションが機能しますが、見た目がデフォルトの状態になっています。

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



カスタマイズします。
「app/assets/stylesheets/application.scss」ファイルに記述を追加して、デザインをカスタマイズします。

  /*ページネーション自体のデザイン*/
.pagination>li>a {          
  color: #000000;   /*文字の色を変える*/
}

/* 表示しているページ番号のデザイン */
.pagination>.active>a {     
  background: #3d3f41;     /*背景の色を変える*/
}

/*ホバー時のデザイン*/
.pagination>li>a:hover {        
  background: #696b6d;     /*背景の色を変える*/
  color: #ffffff;   /*文字の色を変える*/
}



記述追加 【app/assets/stylesheets/application.scss】

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 
 
 .font1 {
    font-family: Rampart One;
 }

 .font2 {
    font-family: Kaisei Opti;
 }

 .font3 {
    font-family: Kosugi Maru;
 }

//アバター オンライン
.avatar {
    position: relative;
    display: inline-block;
    &::before {
      content: "";
      position: absolute;
      bottom: 1px;
      left: 38px;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      border: 1px solid white;
    }
    &.online:before {
      background-color: #1dbf73;
    }
    &.offline:before {
      background-color: gray;
    }
}

//ホームページ用
.has-bg-img {
  background: url("/assets/home/background01.jpg") center center;
  background-size: cover;
}

  /*ページネーション自体のデザイン*/
  .pagination>li>a {          
    color: #000000;   /*文字の色を変える*/
  }
  
  /* 表示しているページ番号のデザイン */
  .pagination>.active>a {     
    background: #3d3f41;     /*背景の色を変える*/
  }
  
  /*ホバー時のデザイン*/
  .pagination>li>a:hover {        
    background: #696b6d;     /*背景の色を変える*/
    color: #ffffff;   /*文字の色を変える*/
  }



表示を確認します。
CSSが適用されて、見た目が変わりました。
http://localhost:3000/your_trips

ページネーションCSS適用
ページネーションCSS適用



34 | 予約ステータス】 << 【ホーム】 >> 【36 | Stripe


↓↓クリックして頂けると励みになります。

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

関連記事(外部サイト)