Rails6.0 | 民泊予約サイトの構築 | 85 | Bootstrap | ホームページ - 学生向けプログラミング入門

[８４]Bootstrap | レビュー<<　[ホームに戻る]　>> [８６]Bootstrap | AJAX検索

 「36 | ホームページ」をBootstrapで書き換えます。

「app\assets\images」フォルダに「home」フォルダを新規作成してください。作成した「home」フォルダの中に何でも良いのでホームページの背景画像となる「background01.jpg」ファイルをコピーして下さい。

app\controllers\pages_controller.rb

class PagesController < ApplicationController
  def home
      @rooms = Room.where(active: true).limit(3)
  end
  
  def search

  end  

end

app\views\pages\home.html.erb


    <div class="has-bg-img">
  
    <h2 style="color: white; padding-top: 200px; padding-left: 50px;">
    素敵なご旅行をあなたに <br>
    どんなお部屋をお探しですか？
  </h2>
  
      <div class="row" style="padding: 50px;">
  
        <div class="col-md-6">
          <%= text_field_tag :search, params[:search], placeholder: "どちらのお部屋をおさがしですか？", class: "form-control" %>
        </div>
        <div class="col-md-3">
          <%= text_field_tag :start_date, params[:start_date], placeholder: "チェックイン", readonly: true, class: "form-control datepicker" %>
        </div>
        <div class="col-md-3">
          <%= text_field_tag :end_date, params[:end_date], placeholder: "チェックアウト", readonly: true, class: "form-control datepicker" %>
        </div>
      </div>
  
      <div class="row" style="padding-left: 50px; padding-bottom: 50px;">
        <div class="col-md-offset-4 col-md-4">
          <%= submit_tag "検索", class: "btn btn-danger btn-block" %>
        </div>
      </div>
    </div>
 

  <br/><hr/><br/>
  <!-- ホーム -->
  <div style="margin-left: 50px;"><h3>お部屋</h3></div>
  <br/>
  <div class="row" style="margin: 50px;">
    <% @rooms.each do |room| %>
        <div class="col-md-4">
  
              <%= image_tag room_cover(room), style: "width: 100%; height: 180;" %>
   
              <%= link_to room.listing_name, room %>
  
        </div>
    <% end %>
  </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>