戻る

Rails5.0


民泊サイトの構築 Rails5.0

  (0)
2,000円

タスク4-11   AJAX検索

このタスクについて


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




「app\views\rooms」フォルダに「_rooms_list.html.erb」ファイルを新規作成して下さい。



app\views\rooms\_rooms_list.html.erb(新規作成したファイル)
 
<% rooms.each do |room| %> 
    <div class="col-md-4"> 
      <div class="panel panel-default"> 
        <div class="panel-heading preview"> 
          <%= image_tag room.cover_photo(:medium) %> 
        </div> 
        <div class="panel-body"> 
          <%= link_to room.listing_name, room %><br/> 
          <%= number_to_currency(room.price) %> | <%= room.home_type %> | ベッド<%= room.bed_room %>台 
          <div id="star_<%= room.id %>"></div> <%= pluralize(room.average_rating, "review") %> 
        </div> 
      </div> 
    </div> 
    <script> 
      $('#star_<%= room.id %>').raty({ 
        path: '/assets', 
        readOnly: true, 
        score: <%= room.average_rating %> 
      }); 
    </script> 
<% end %> 



記述更新 app\views\pages\search.html.erb
95行目の記述(レンダー)と172行目からのスクリプトを更新しています。
コードをコピーしてファイルを置き換えて下さい。
 
<div id="main"> 
  <div id="left"> 
    <!-- 検索パネル --> 
    <div class="row"> 
      <br/> 
      <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="col-md-2"> 
                  <label>最低(円)</label> 
                  <%= f.text_field :price_gteq, class: "form-control" %> 
                </div> 
                <div class="col-md-2"> 
                  <label>最高(円)</label> 
                  <%= f.text_field :price_lteq, class: "form-control" %> 
                </div> 
              </div> 
              <hr/> 
              <div class="row"> 
                <div class="col-md-6"> 
                  <%= text_field_tag :start_date, params[:start_date], readonly: true, placeholder: "チェックイン日", class: "form-control datepicker" %> 
                </div> 
                <div class="col-md-6"> 
                  <%= text_field_tag :end_date, params[:end_date], readonly: true, placeholder: "チェックアウト日", class: "form-control datepicker" %> 
                </div> 
              </div> 
              <hr/> 
              <div class="row"> 
                <div class="col-md-4"> 
                  <%= check_box_tag "q[room_type_eq_any][]", "プライベート" %> プライベート 
                </div> 
                <div class="col-md-4"> 
                  <%= check_box_tag "q[room_type_eq_any][]", "シェア" %> シェア 
                </div> 
              </div> 
              <hr/> 
              <div class="row"> 
                <div class="col-md-4"> 
                  <div class="form-group select"> 
                    <label>宿泊人数</label> 
                    <%= f.select :accommodate_gteq, [["1人", 1], ["2人", 2], ["3人", 3], ["4人以上", 4]], id: "accommodate", prompt: "選択してください", class: "form-control" %> 
                  </div> 
                </div> 
                <div class="col-md-4"> 
                  <div class="form-group select"> 
                    <label>ベッド数</label> 
                    <%= f.select :bed_room_gteq, [["1台", 1], ["2台", 2], ["3台", 3], ["4台以上", 4]], id: "bed_room", prompt: "選択してください", class: "form-control" %> 
                  </div> 
                </div> 
                <div class="col-md-4"> 
                  <div class="form-group select"> 
                    <label>部屋数</label> 
                    <%= f.select :bath_room_gteq, [["1部屋", 1], ["2部屋", 2], ["3部屋", 3], ["4部屋以上", 4]], id: "bath_rooms", prompt: "選択してください", class: "form-control" %> 
                  </div> 
                </div> 
              </div> 
              <hr/> 
              <div class="row"> 
                <div class="col-md-4"> 
                  <%= check_box_tag "q[is_tv_eq]", true %> テレビ 
                </div> 
                <div class="col-md-4"> 
                  <%= check_box_tag "q[is_kitchen_eq]", true %> キッチン 
                </div> 
                <div class="col-md-4"> 
                  <%= check_box_tag "q[is_Internet_eq]", true %> インターネット 
                </div> 
                <div class="col-md-4"> 
                  <%= check_box_tag "q[is_heating_eq]", true %> 暖房 
                </div> 
                <div class="col-md-4"> 
                  <%= check_box_tag "q[is_air_eq]", true %> エアコン 
                </div> 
              </div> 
              <hr/> 
              <div class="row text-center"> 
                <%= f.submit "検索", class: "btn btn-form" %> 
              </div> 
          <% end %> 
      </div> 
      <br/> 
      <div class="row" id="room_listing"> 
        <%= render partial: "rooms/rooms_list", locals: {rooms: @arrRooms} %> 
      </div> 
    </div> 
  </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> 




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

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

民泊サイトの構築 Rails5.0

2,000円

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

タスク数: 136