戻る

Rails6.0


民泊サイトの構築 Rails6.0

  (0)
3,000円

タスク4-9   AJAX検索

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




記述追加
GemFile
「gem 'ransack', '~> 2.3'」の記述追加(69行目)
 
source 'https://rubygems.org' 
git_source(:github) { |repo| "https://github.com/#{repo}.git" } 
ruby '2.6.6' 
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 
gem 'rails', '~> 6.0.3', '>= 6.0.3.1' 
# 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' 
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' 



コマンド
bundle


記述追加 app\controllers\pages_controller.rb
「search()」メソッドの実装
 
class PagesController < ApplicationController 
  
  def home 
      @rooms = Room.where(active: true).limit(3) 
  end 
  
  def search 
    # ステップ 1 
    if params[:search].present? && params[:search].strip != "" 
      session[:loc_search] = params[:search] 
    end 
    arrResult = Array.new 
    # ステップ 2 
    if session[:loc_search] && session[:loc_search] != "" 
      @rooms_address = Room.where(active: true).near(session[:loc_search], 5, order: 'distance') 
    else 
      @rooms_address = Room.where(active: true).all 
    end 
    # ステップ 3 
    @search = @rooms_address.ransack(params[:q]) 
    @rooms = @search.result 
    @arrRooms = @rooms.to_a 
    # ステップ 4 
    if (params[:start_date] && params[:end_date] && !params[:start_date].empty? &&  !params[:end_date].empty?) 
      start_date = Date.parse(params[:start_date]) 
      end_date = Date.parse(params[:end_date]) 
      @rooms.each do |room| 
        not_available = room.reservations.where( 
          "(? <= start_date AND start_date <= ?) 
          OR (? <= end_date AND end_date <= ?) 
          OR (start_date < ? AND ? < end_date)", 
          start_date, end_date, 
          start_date, end_date, 
          start_date, end_date 
        ).limit(1) 
        if not_available.length > 0 
          @arrRooms.delete(room) 
        end 
      end 
    end 
  end 
end 



記述追加 config\routes.rb
「get 'search' => 'pages#search'」の記述を追加(16行目)
 
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' 
  get 'search' => 'pages#search' 
  
  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 

  resources :guest_reviews, only: [:create, :destroy] 
  resources :host_reviews, only: [:create, :destroy] 

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



記述更新 app\views\pages\home.html.erb
「<%= form_tag search_path, method: :get, data: { turbolinks: false} do %>」に記述変更(13行目)
 
<% content_for :head do %> 
  <meta name="turbolinks-cache-control" content="no-cache"> 
<% end %> 
<section class="hero is-medium has-bg-img"> 
    <div class="hero-body"> 
        <div class="container"> 
            <h1 class="title has-text-white"> 
                素敵なご旅行をあなたに <br> 
                どんなお部屋をお探しですか? 
            </h1> 
            <%= form_tag search_path, method: :get, data: { turbolinks: false} do %> 
                <br/> 
                <br/> 
                <div class="field is-horizontal"> 
                    <div class="field-body"> 
                        <div class="control has-icons-left"> 
                            <span class="icon is-small is-left"> 
                                <i class="fa fa-search"></i> 
                            </span> 
                            <%= text_field_tag :search, params[:search], placeholder: "どちらをお探し?", class: "input" %> 
                        </div> 
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                        <div class="field"> 
                            <p class="control is-expanded has-icons-left"> 
                                <%= text_field_tag :start_date, params[:start_date], placeholder: "チェックイン", readonly: true, class: "input is-primary is-rounded" %> 
                                <span class="icon is-small is-left"> 
                                <i class="far fa-calendar-alt"></i> 
                                </span> 
                            </p> 
                        </div> 
                    
                        <div class="field"> 
                            <p class="control is-expanded has-icons-left has-icons-right"> 
                                <%= text_field_tag :end_date, params[:end_date], placeholder: "チェックアウト", readonly: true, class: "input is-primary is-rounded" %> 
                                <span class="icon is-small is-left"> 
                                <i class="far fa-calendar-alt"></i> 
                                </span> 
                            </p> 
                        </div> 
                        <%= submit_tag "検索", class: "button is-primary" %> 
                    </div> 
                </div> 
            <% end %> 
        </div> 
    </div> 
</section> 
<div class="box"> 
    <article class="media"> 
        <div class="column"> 
            <div class="columns is-multiline"> 
                <!-- 登録されたお部屋 --> 
                <% @rooms.each do |room| %> 
                    <% if room.active? %> 
                        <div class="column is-one-third"> 
                            <div class="card"> 
                                <div class="card-image"> 
                                    <%= link_to listing_room_path(room) do %> 
                                        <figure class="image is-4by3"> 
                                            <%= image_tag room_cover(room) %> 
                                        </figure> 
                                    <% end %> 
                                </div> 
                                <br/> 
                                <div class="card-content p-t-5 p-b-5"> 
                                    <p class="subtitle is-6 m-b-5"><%= link_to room.listing_name, room_path(room), data: { turbolinks: false} %></p> 
                                    <p class="subtitle is-6 m-b-5"><%= room.address %></p> 
                                    <!--レビュー --> 
                                    <span class="star-review"><i class="fa fa-star"></i> 
                                        <%= room.average_rating %> 
                                        <span class="has-text-primary">(<%= room.reviews.count %>)</span> 
                                    </span> 
                                </div> 
                                <footer class="card-footer"> 
                                    <a class="has-text-danger is-block card-footer-item has-text-right"> 
                                        <span class="small-title">1泊の宿泊価格</span> 
                                        <strong><%= number_to_currency(room.price) %></strong>                                            
                                    </a> 
                                </footer> 
                            </div> 
                        </div> 
                    <% end %> 
                <% end %> 
            </div> 
        </div> 
    </article> 
</div> 
<script> 
  $('#start_date').datepicker({ 
    dateFormat: 'dd-mm-yy', 
    minDate: 0, 
    maxDate: '3m', 
    onSelect: function(selected) { 
      $('#end_date').datepicker("option", "minDate", selected); 
      $('#end_date').attr("disabled", false); 
    } 
  }); 
  $('#end_date').datepicker({ 
    dateFormat: 'dd-mm-yy', 
    minDate: 0, 
    maxDate: '3m', 
    onSelect: function(selected) { 
      $('#start_date').datepicker("option", "maxDate", selected); 
    } 
  }); 
</script> 



「app\views\pages」フォルダに「search.html.erb」ファイルを新規作成してください。


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

 
<div id="main"> 
  <div id="left"> 
    <!-- 検索パネル --> 
  <section class="section"> 
    <div class="container"> 
      <div id="collapsePanel"> 
          <%= search_form_for @search, url: search_path, remote: true do |f| %> 
                <div class="row"> 
                    <div class="col-md-8"> 
                        <label>宿泊日</label> 
                    </div> 
                    <div class="field has-addons"> 
                        <p class="control"> 
                            <%= text_field_tag :start_date, params[:start_date], readonly: true, placeholder: "チェックイン日", class: "input" %> 
                        </p> 
                        &nbsp;&nbsp;&nbsp;&nbsp; 
                        <p class="control"> 
                            <%= text_field_tag :end_date, params[:end_date], readonly: true, placeholder: "チェックアウト日", class: "input" %> 
                        </p> 
                    </div> 
                </div> 
                <br/> 
                <br/> 
                <div class="row"> 
                    <div class="col-md-8"> 
                        <label>宿泊費(円)</label> 
                    </div> 
                    <div class="field has-addons"> 
                        <p class="control"> 
                            <%= f.text_field :price_gteq, placeholder: "最低価格", class: "input" %> 
                        </p> 
                        <p class="control"> 
                            <a class="button is-static"> 
                            円 
                            </a> 
                        </p> 
                        &nbsp;&nbsp;&nbsp;&nbsp; 
                        <p class="control"> 
                            <%= f.text_field :price_lteq, placeholder: "最高価格", class: "input" %> 
                        </p> 
                        <p class="control"> 
                            <a class="button is-static"> 
                            円 
                            </a> 
                        </p> 
                    </div> 
                </div> 
                <br/> 
                <br/> 
                <div class="row"> 
                    <div class="checkbox"> 
                        <%= check_box_tag "q[room_type_eq_any][]", "プライベート", class: "checkbox" %> プライベート 
                    </div> 
                    &nbsp;&nbsp;&nbsp;&nbsp; 
                    <div class="checkbox"> 
                        <%= check_box_tag "q[room_type_eq_any][]", "シェア", class: "checkbox" %> シェア 
                    </div> 
                </div> 
                <br/> 
                <br/> 
                <div class="row"> 
                    <div class="col-md-4"> 
                        <div class="field"> 
                        <div class="control"> 
                        <label>宿泊人数 </label> 
                            <div class="select"> 
                                <%= f.select :accommodate_gteq, [["1人", 1], ["2人", 2], ["3人", 3], ["4人以上", 4]], id: "accommodate", prompt: "選択してください", class: "select" %> 
                            </div> 
                        </div> 
                        </div> 
                        <div class="field"> 
                        <div class="control"> 
                        <label>ベッド数 </label> 
                            <div class="select"> 
                                <%= f.select :bed_room_gteq, [["1台", 1], ["2台", 2], ["3台", 3], ["4台以上", 4]], id: "bed_room", prompt: "選択してください", class: "select" %> 
                            </div> 
                        </div> 
                        </div> 
                        <div class="field"> 
                        <div class="control"> 
                        <label>部屋数 </label> 
                            <div class="select"> 
                                <%= f.select :bath_room_gteq, [["1部屋", 1], ["2部屋", 2], ["3部屋", 3], ["4部屋以上", 4]], id: "bath_rooms", prompt: "選択してください", class: "select" %> 
                            </div> 
                        </div> 
                        </div> 
                    </div> 
                </div> 
                <br/> 
                <br/> 
                <div class="row"> 
                    <div class="col-md-4"> 
                        <%= check_box_tag "q[is_tv_eq]", true, class: "checkbox" %> テレビ 
                    </div> 
                    <div class="col-md-4"> 
                        <%= check_box_tag "q[is_kitchen_eq]", true, class: "checkbox" %> キッチン 
                    </div> 
                    <div class="col-md-4"> 
                        <%= check_box_tag "q[is_Internet_eq]", true, class: "checkbox" %> インターネット 
                    </div> 
                    <div class="col-md-4"> 
                        <%= check_box_tag "q[is_heating_eq]", true, class: "checkbox" %> 暖房 
                    </div> 
                    <div class="col-md-4"> 
                        <%= check_box_tag "q[is_air_eq]", true, class: "checkbox" %> エアコン 
                    </div> 
                </div> 
                <br/> 
                <br/> 
                <div class="row text-center"> 
                    <%= f.submit "検索", class: "button is-danger" %> 
                </div> 
            <% end %> 
        </div> 
    </div> 
</section> 
<!-- お部屋 --> 
<div class="row" id="room_listing"> 
    <%= render partial: "rooms/rooms_list", locals: {rooms: @arrRooms} %> 
</div> 
<div id="right"> 
<!-- GOOGLEマップ --> 
    <div id="map" style="width: 100%; height: 100%"></div> 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    <script> 
        function initialize(rooms) { 
            var location = {lat: 43.061771, lng: 141.354451} 
            if (rooms.length > 0) { 
            location = {lat: rooms[0].latitude, lng: rooms[0].longitude} 
            } 
            var map = new google.maps.Map(document.getElementById('map'), { 
            center: location, 
            zoom: 12 
            }); 
            var marker, inforwindow; 
            rooms.forEach(function(room) { 
            marker = new google.maps.Marker({ 
                position: {lat: room.latitude, lng: room.longitude}, 
                map: map 
            }); 
            inforwindow = new google.maps.InfoWindow({ 
                content: "<div class='map_price'>" + room.price + "円</div>" 
            }); 
            inforwindow.open(map, marker); 
            }) 
        } 
        google.maps.event.addDomListener(window, 'load', function() { 
            initialize(<%= raw @arrRooms.to_json %>) 
        }); 
    </script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBojDcZmScBkIOISjoYREjgid99iZUL2Tk&callback=initMap" type="text/javascript"></script> 
    </div> 
</div> 
<script> 
  $('#start_date').datepicker({ 
    dateFormat: 'dd-mm-yy', 
    minDate: 0, 
    maxDate: '3m', 
    onSelect: function(selected) { 
      $('#end_date').datepicker("option", "minDate", selected); 
      $('#end_date').attr("disabled", false); 
    } 
  }); 
  $('#end_date').datepicker({ 
    dateFormat: 'dd-mm-yy', 
    minDate: 0, 
    maxDate: '3m', 
    onSelect: function(selected) { 
      $('#start_date').datepicker("option", "maxDate", selected); 
    } 
  }); 
  var open = true; 
  
  $('#filter').click(function() { 
    if (open) { 
      $('#filter').html("More filters <i class='fa fa-chevron-up'></i>") 
    } else { 
      $('#filter').html("More filters <i class='fa fa-chevron-down'></i>") 
    } 
    open = !open; 
  }); 
</script> 




この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

民泊サイトの構築 Rails6.0

3,000円

Rails6.0で民泊サイトを構築します。
ホストは部屋を登録し、ゲストは宿泊予約できます。
ゲストはクレジットカードで支払いをし、ホストには料金の80%が自動で口座に振り込まれます。
Googleマップによる表示、AJAX検索、日付カレンダーによる予約ができます。
リアルタイムメッセージにより連絡がとれます。
予約確認メールの送信も可能。
写真のアップロード機能、アマゾンS3の利用方法も解説。
レビュー機能の実装方法解説。
フルカレンダー による予約管理。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 128