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

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

Rails6.1 | 民泊予約アプリ作成 | 30 | 予約確認

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


29 | 予約機能実装】 << 【ホーム】 >> 【31 | raty-js



予約の確認ができるようにビューを実装していきます。
ゲスト側とホスト側で分けて実装します。


ゲスト側

宿泊者(ゲスト)の予約確認ページを作成します。
まずはコントローラの設定です。


「app\controllers\reservations_controller.rb」ファイルにyour_tripsメソッドを追加します。
記述追加 app\controllers\reservations_controller.rb(27行目)

  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'」の記述追加(10行目)

Rails.application.routes.draw do

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

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

  # post
  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

  # device
  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'},
              controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'}
  # 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="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 %>
            <% @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>
                        </ul>

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

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



ゲストの予約一覧が表示されています。
ブラウザ確認
宿泊者の予約確認ページです。
http://localhost:3000/your_trips

PCレイアウト
PCレイアウト


モバイルレイアウト
モバイルレイアウト


ホスト側



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


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

  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
11行目に「get '/your_reservations' => 'reservations#your_reservations'」の記述を追加

Rails.application.routes.draw do

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

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

  # post
  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

  # device
  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'},
              controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'}
  # 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="container mt-4">
    <div class="card">
        <div class="card-body">

            <h5 class="card-title text-danger h3 font1">予約内容(ホスト)</h5>
            <% if @rooms.blank? %>
                <h5 class="font1">表示できる予約はありません。</h5>
            <% end %>
            <% @rooms.each do |room| %>
                <% room.reservations.each do |reservation| %>
                <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(reservation.created_at, format: :full_date) %>
                            </li>
                            <li class="list-group-item" style="border: none;">
                            <span class="font1">部屋名:</span>
                                <%= link_to room_path(reservation.room), style: "text-decoration: none;", data: { turbolinks: false} do %>                                
                                    <span class="btn btn-light"><%= reservation.room.listing_name %></span>
                                <% end %>                            
                            </li>
                            <li class="list-group-item" style="border: none;">
                            <span class="font1">ゲスト:</span>
                                <%= link_to user_path(reservation.room.user), class: "tootip", style: "text-decoration: none;" do %>
                                        <span class="btn btn-light"><%= reservation.user.full_name %></span>
                                <% end %>
                            </li>
                            <li class="list-group-item" style="border: none;">
                            <span class="font1">宿泊日:</span>   <%= I18n.l(reservation.start_date, format: :full_date) %>                     
                            </li>
                            <li class="list-group-item" style="border: none;">
                            <span class="font1">ご出発:</span>   <%= I18n.l(reservation.end_date, format: :full_date) %>                       
                            </li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">泊数:</span><%=reservation.total/reservation.price %></li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">料金:</span><%= number_to_currency(reservation.total) %>
                            </li>
                        </ul>

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

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



ホストの人が入った予約を確認できるようになりました。
ブラウザ確認
部屋登録者(ホスト)用の予約確認ページです。
http://localhost:3000/your_reservations

PCレイアウト
PCレイアウト


モバイルレイアウト
モバイルレイアウト



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


1.37行目に「<%= link_to "受注予約管理", your_reservations_path, class: "dropdown-item btn btn-light" %>」


2.39行目に「<%= link_to "予約確認", your_trips_path, class: "dropdown-item btn btn-light" %>」


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

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="/"><span class="font1">Vacation Rental</span></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <!-- もしログインしていなかったら-->
        <% if (!user_signed_in?) %>
        <li class="nav-item" style="margin-bottom: 0.1rem;">
          <span style="margin-left: 1rem;">
          <%= link_to  "新規登録", new_user_registration_path, class: "btn btn-danger" %>
          </span>
        </li>
        <li class="nav-item">
          <span style="margin-left: 1rem;">
            <%= link_to  "ログイン", new_user_session_path, class: "btn btn-success text-light" %>
          </span>
        </li>
      </ul>
      <!-- ログインしていたら -->
      <% else %>
      <ul class="navbar-nav" style="margin-left: 2rem;">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">

          <figure style="position:relative; top: 0.2rem;" 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>
          <ul class="dropdown-menu">
            <li><%= link_to  "ダッシュボード", dashboard_path, class: "dropdown-item btn btn-lightt" %></li>
            <li><%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "dropdown-item btn btn-light" %></li>
            <li><hr class="dropdown-divider"><span class="badge bg-danger">ホスト</span></li>
            <li><%= link_to  "部屋を新規登録", new_room_path, class: "dropdown-item btn btn-light" %></li>
            <li><%= link_to  "受注予約管理", your_reservations_path, class: "dropdown-item btn btn-light" %></li>
            <li><hr class="dropdown-divider"><span class="badge bg-primary">ゲスト</span></li>
            <li><%= link_to  "予約確認", your_trips_path, class: "dropdown-item btn btn-light" %></li>
            <li><hr class="dropdown-divider"></li>
            <li><%= link_to  "ログアウト", destroy_user_session_path, method: :delete, class: "dropdown-item btn btn-light" %></li>
          </ul>
        </li>
      </ul>
      <% end %>

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



表示を確認します。

モバイルレイアウト
モバイルレイアウト



29 | 予約機能実装】 << 【ホーム】 >> 【31 | raty-js



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

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

関連記事(外部サイト)