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

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

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 82 | Bootstrap | 予約確認ページ

[81]Bootstrap | 予約フォーム<< [ホームに戻る] >> [83]Bootstrap | ページ修正


「33 | 予約確認ページ」をBootstrapの記述に変更します。


宿泊者(ゲスト)の予約確認ページを作成します。


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

  def your_trips
    @trips = current_user.reservations.order(start_date: :asc)
  end



app\controllers\reservations_controller.rb

class ReservationsController < ApplicationController
    before_action :authenticate_user!
  
    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)
    end
  
    private
      def reservation_params
        params.require(:reservation).permit(:start_date, :end_date)
      end
  end
  



記述追加 config\routes.rb
「get '/your_trips' => 'reservations#your_trips'」の記述追加(14行目)

Rails.application.routes.draw do

  # ルートを app\views\pages\home.html.erb に設定
  root 'pages#home'

  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'},
              controllers: {registrations: 'registrations'}

  get 'pages/home'
  get '/dashboard', to: 'users#dashboard'
  get '/users/:id', to: 'users#show'
  get '/your_trips' => 'reservations#your_trips'
  
  post '/users/edit', to: 'users#update'

  resources :rooms, except: [:edit] do
    member do
      get 'listing'
      get 'pricing'
      get 'description'
      get 'photo_upload'
      get 'amenities'
      get 'location'
      get 'preload'
      get 'preview'
      delete :delete_photo
      post :upload_photo
    end
    resources :reservations, only: [:create]
  end

  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end



「app\views\reservations」フォルダに「your_trips.html.erb」ファイルを新規作成します。


app\views\reservations\your_trips.html.erb(新規作成したファイル)

<div class="row" style="margin-top: 50px; margin-left: 30px;">

    <div class="card">

        <h3 style="margin-top: 30px; margin-left: 30px;">ご予約内容</h3>
        <br/>
        <table class="table table-striped">
            <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"><h1>表示できるご予約はありません。</h1></td>
                  </tr>
                <% end %>
                <% @trips.each do |trip| %>
                    <tr>
                        <td><%= I18n.l(trip.created_at, format: :full_date) %></td>
                        <!-- ステータス -->
                        <td>
           
                        </td>
                        <td>
                            <%= link_to room_path(trip.room), data: { turbolinks: false} do %>                                
                                <%= image_tag room_cover(trip.room), style: "width: 80px;" %><br/>
                                <%= trip.room.listing_name %>
                            <% end %>
                        </td>
                        <td>
                            <%= link_to user_path(trip.room.user), class: "tootip" do %>

                                    <%= image_tag avatar_url(trip.room.user), style: "width: 80px;", class: "bd-placeholder-img figure-img img-fluid rounded-pill" %><br/>

                                <%= trip.room.user.full_name %>
                            <% end %>
                        </td>
                        <td>
                            宿泊日:<%= I18n.l(trip.start_date, format: :full_date) %><br/>
                            ご出発:<%= I18n.l(trip.end_date, format: :full_date) %>
                        </td>
                        <td><%= number_to_currency(trip.total) %></td>
                        <!-- アクション -->
                        <td>
                        
                        </td>
                    </tr>
                <% end %>
            </tbody>
        </table>
    </div>
</div>



ブラウザ確認
宿泊者の予約確認ページです。
http://localhost:3000/your_trips

宿泊者予約確認ページ
宿泊者予約確認ページ



お部屋登録者(ホスト)の予約確認ページを作成します。


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

  def your_reservations
    @rooms = current_user.rooms
  end



app\controllers\reservations_controller.rb

class ReservationsController < ApplicationController
    before_action :authenticate_user!
  
    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)
    end

    def your_reservations
      @rooms = current_user.rooms
    end

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



記述追加 config\routes.rb
15行目に「get '/your_reservations' => 'reservations#your_reservations'」の記述を追加

Rails.application.routes.draw do

  # ルートを app\views\pages\home.html.erb に設定
  root 'pages#home'

  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'},
              controllers: {registrations: 'registrations'}

  get 'pages/home'
  get '/dashboard', to: 'users#dashboard'
  get '/users/:id', to: 'users#show', as: 'user'
  get '/your_trips' => 'reservations#your_trips'
  get '/your_reservations' => 'reservations#your_reservations'
  
  post '/users/edit', to: 'users#update'

  resources :rooms, except: [:edit] do
    member do
      get 'listing'
      get 'pricing'
      get 'description'
      get 'photo_upload'
      get 'amenities'
      get 'location'
      get 'preload'
      get 'preview'
      delete :delete_photo
      post :upload_photo
    end
    resources :reservations, only: [:create]
  end

  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end



「app\views\reservations」フォルダに「your_reservations.html.erb」ファイルを新規作成します。


app\views\reservations\your_reservations.html.erb(新規作成したファイル)

<div class="row" style="margin-top: 50px; margin-left: 30px;">

        <div class="card">
    
            <h3 style="margin-top: 30px; margin-left: 30px;">受注予約の一覧</h3>
            <br/>
            <table class="table table-striped">
            <thead>
                <tr>
                    <th>申し込み日</th>
                    <th>ステータス</th>
                    <th>お部屋</th>
                    <th>ゲスト</th>
                    <th></th>
                    <th>料金</th>
                    <th>アクション</th>
                </tr>
            </thead>
            <tbody>
                <% if @rooms.blank? %>
                  <tr>
                      <td colspan="7" class="has-text-centered"><h1>表示できる受注予約はありません。</h1></td>
                  </tr>
                <% end %>
                <% @rooms.each do |room| %>
                    <% room.reservations.each do |reservation| %>
                        <tr>
                            <td style="padding-top: 30px;"><%= I18n.l(reservation.created_at, format: :full_date) %></td>
                            <!-- ステータス -->
                            <td>

                            </td>
                            <td>
                                <%= link_to room_path(reservation.room), data: { turbolinks: false} do %>                                
                                    <%= image_tag room_cover(reservation.room), style: "width: 80px;" %><br/>
                                    <%= reservation.room.listing_name %>
                                <% end %>
                            </td>
                            <td>
                                <%= link_to user_path(reservation.user), class: "tootip" do %>

                                        <%= image_tag avatar_url(reservation.user), style: "width: 80px;", class: "bd-placeholder-img figure-img img-fluid rounded-pill" %><br/>

                                    <%= reservation.user.full_name %>
                                <% end %>
                            </td>
                            <td>
                                宿泊日:<%= I18n.l(reservation.start_date, format: :full_date) %><br/>
                                ご出発:<%= I18n.l(reservation.end_date, format: :full_date) %>
                            </td>
                            <td><%= number_to_currency(reservation.total) %></td>
                            <!-- アクション -->
                            <td>
                            
                            </td>
                        </tr>
                        
                    <% end %>
                <% end %>
            </tbody>
      
        </table>
    </div>
</div



ブラウザ確認
お部屋登録者(ホスト)用の予約確認ページです。
http://localhost:3000/your_reservations

ホスト用予約確認ページ
ホスト用予約確認ページ



ナビゲーションバーのリンク部分を追加します。


記述追加 app\views\shared\_navbar.html.erb

<nav class="navbar navbar-expand-lg navbar-dark bg-info" style="z-index: 5;">
  <a class="navbar-brand" href="/"><h1 class="navh1">MinpakuBs</h1></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
    <!-- もしログインしていなかったら-->
    <% if (!user_signed_in?) %>
      <li class="nav-item" style="margin-right: 20px; margin-bottom: 5px;">
        <%= link_to  "新規ユーザ登録", new_user_registration_path, class: "btn btn-light" %>
      </li>
      <li class="nav-item">
        <%= link_to  "ログイン", new_user_session_path, class: "btn btn-light", style: "margin-right: 80px;" %>
      </li>
    <!-- ログインしていたら -->
    <% else %>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

        <figure class="avatar <%= current_user.status ? "online" : "offline" %>"></figure>  
        <%= image_tag avatar_url(current_user), class: "bd-placeholder-img figure-img img-fluid rounded-pill", style: "width: 40px; height: 30px;" %>
 

        <%= current_user.full_name %>

        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <span class="dropdown-item"><i class="fas fa-user-edit"></i><%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "btn btn-white" %></span>
          <hr/>
          <span class="dropdown-item"><i class="fas fa-sign-out-alt"></i><%= link_to  "ログアウト", destroy_user_session_path, method: :delete, class: "btn btn-white" %></span>
        </div>
      </li>
    <% end %>
    </ul>
  </div>
</nav>

<% if (user_signed_in?) %>

  <nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 3;">

    <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item" style="margin-left: 100px; margin-bottom: 5px; margin-right: 80px;">
        <span style="margin-top:13px;"><i class="fas fa-tachometer-alt"></i></span><%= link_to 'ダッシュボード', dashboard_path, class: "btn btn-light" %>
        </li>

        <li class="nav-item dropdown" style="margin-right: 50px;">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-hospital-symbol"></i>&nbsp;ホスト
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <span class="dropdown-item"><i class="fas fa-edit"></i></i><%= link_to  "お部屋を新規登録", new_room_path, class: "btn btn-white" %></span>
            <span class="dropdown-item"><i class="far fa-list-alt"></i><%= link_to  "登録したお部屋一覧", rooms_path, class: "btn btn-white" %></span>
            <span class="dropdown-item"><i class="far fa-list-alt"></i><%= link_to "受注予約の管理", your_reservations_path, class: "btn btn-white" %></span>
            
          </div>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-user-friends"></i>&nbsp;ゲスト
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <span class="dropdown-item"><i class="far fa-list-alt"></i><%= link_to "ご予約の確認", your_trips_path, class: "btn btn-white" %></span>
            
          </div>
        </li>

      </ul>
    </div>
  </nav>
<% end %>



[81]Bootstrap | 予約フォーム<< [ホームに戻る] >> [83]Bootstrap | ページ修正