Rails6.0 | 民泊予約サイトの構築 | 76 | Bootstrap | 写真カルーセル表示

[７５]Bootstrap |アクションテキスト<<　[ホームに戻る]　>> [７７]Bootstrap | Googleマップ


「24 | 写真カルーセル表示」をBootstrapに書き換えます。


Bulmaの設定は省略しても大丈夫です。


「app\assets\images」フォルダに「blank.jpg」ファイルを保存しておいてください。


記述追加　app\helpers\application_helper.rb（13行目）

    def room_cover(room)
        if room.photos.attached?
            url_for(room.photos[0])
        else
            ActionController::Base.helpers.asset_path('blank.jpg')
        end
    end

app\helpers\application_helper.rb

module ApplicationHelper

    def avatar_url(user)
        if user.avatar.attached?
            url_for(user.avatar)
        elsif user.image?
            user.image
        else
            ActionController::Base.helpers.asset_path('icon_default_avatar.jpg')
        end
    end

    def room_cover(room)
        if room.photos.attached?
            url_for(room.photos[0])
        else
            ActionController::Base.helpers.asset_path('blank.jpg')
        end
    end

end

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

  def show
    @photos = @room.photos
  end

app\controllers\rooms_controller.rb

class RoomsController < ApplicationController

  protect_from_forgery except: [:upload_photo]
  before_action :set_room, except: [:index, :new, :create]
  before_action :authenticate_user!, except: [:show]
  before_action :is_authorised, only: [:listing, :pricing, :description, :photo_upload, :amenities, :location, :update]

  def index
     @rooms = current_user.rooms
  end

  def new
    @room = current_user.rooms.build
  end

  def create
    @room = current_user.rooms.build(room_params)
    if @room.save
      redirect_to listing_room_path(@room), notice: "保存しました。"
    else
      flash[:alert] = "問題が発生しました。"
      render :new
    end
  end

  def show
    @photos = @room.photos
  end

  def listing
  end

  def pricing
  end

  def description
  end

  def photo_upload
  end

  def amenities
  end

  def location
  end

  def update
    new_params = room_params
    new_params = room_params.merge(active: true) if is_ready_room

    if @room.update(new_params)
      flash[:notice] = "保存しました。"
    else
      flash[:alert] = "問題が発生しました。"
    end
    redirect_back(fallback_location: request.referer)
  end

  def upload_photo
    @room.photos.attach(params[:file])
    render json: { success: true }
  end

  def delete_photo
    @image = ActiveStorage::Attachment.find(params[:photo_id])
    @image.purge
    redirect_to photo_upload_room_path(@room)
  end

  private

    def set_room
      @room = Room.find(params[:id])
    end
    
    def room_params
      params.require(:room).permit(:home_type, :room_type, :accommodate, :bed_room, :bath_room, :listing_name, :summary, :address, :is_tv, :is_kitchen, :is_air, :is_heating, :is_internet, :price, :active, :description)
    end

    def is_authorised
      redirect_to root_path, alert: "権限がありません。" unless current_user.id == @room.user_id
    end

    def is_ready_room
      !@room.active && !@room.price.blank? && !@room.listing_name.blank? && !@room.photos.blank? && !@room.address.blank?
    end

  end

app\views\rooms\index.html.erb

<div class="row" style="margin: 20px;">

    <!-- 左側 -->
    <div class="col-4">
        <div class="card">
            <div class="card-body">
                <!-- アバター -->
                <%= image_tag avatar_url(current_user), class: "img-fluid img-thumbnail rounded-pill" %>

                <!-- 画像アップロードボタン -->
                <div class="mx-auto" style="width: 200px;">
                    <h5 class="card-title btn-block" style="margin-left: 15px; margin-top: 10px;"><%= current_user.full_name %></h5>
                </div>            

                <hr/>

                <!-- アカウント情報 -->
                <div style="margin-top: 10px; margin-left: 30px;">
                    アカウント登録日
                </div>      
                <div class="mx-auto" style="width: 200px;">
                    <h5 class="card-title btn-block" style="margin-top: 10px;"><strong><%= I18n.l(current_user.created_at, format: :full_date) %></strong></h5>
                </div>                      

                <hr/>

                <!-- オンラインステータス -->
                <div style="margin-top: 10px; margin-left: 30px;">
                    ステータス
                </div>
                <br/>                     
                <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    <div style="margin-left: 20px;">
                        <strong>
                            <% if current_user.status %>
                                <span class="btn btn-success"><i class="toggle far fa-edit"></i>オンライン</span>
                            <% else %>
                                <span class="btn btn-danger"><i class="toggle far fa-edit"></i>オフライン</span>
                            <% end %>
                        </strong>
                </a>
                        <div class="collapse" id="collapseExample">
                            <div class="card card-body">
                                <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %>

                                        <%= f.select(:status, options_for_select([["オンライン", true], ["オフライン", false]]), {}, {class: "custom-select"}) %>

                                    <br/>
                                    <br/>
                                    <%= f.submit "保存", class: "btn btn-danger" %>
                                <% end %>

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

                    <hr/>

                    <!-- 自己紹介 -->
                    <div style="margin-top: 10px; margin-left: 30px;">
                        自己紹介
                        <br/>
                        <br/>
                        <%= current_user.about %>                        
                    </div>
                    <br/>                     
                    <a data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
                        <div style="margin-left: 20px;">
                            <strong>
                                <span class="btn btn-danger"><i class="toggle far fa-edit"></i>編集</span>
                            </strong>
                    </a>
                            <div class="collapse" id="collapseExample2">
                                <div class="card card-body">
                                    <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %>

                                        <%= f.text_area :about, autofocus: true, autocomplete: 'form'%>

                                        <br/>
                                        <br/>
                                        <%= f.submit "保存", class: "btn btn-danger" %>
                                    <% end %>
    
                                </div>
                            </div>
                        </div>

                        <hr class="h-10">
                                
                        <!-- 電話番号 -->
                        <% if !current_user.phone_number.blank? %>
                            <span class="pull-right icon-babu" style="margin-left: 20px;"><i class="far fa-check-circle" style="color:#528fff;"></i></span>&nbsp;&nbsp;電話番号登録済
                        <% else %>
                             <span style="margin-left: 20px;">電話番号を登録していません</span>
                        <% end %>

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

    <!-- 右側 -->
    <div class="col-8">
 
        <div class="container">

            <div class="row">

                <div class="col-6 col-md-4">

                    <%= link_to new_room_path do %>

                        <div class="card">
                            <div class="card-body">
                                <%= image_tag 'icon_add.png', style: "width: 100%; height: 180;" %>
                                <footer><h5 class="btn btn-info" style="margin-top: 40px;">部屋新規登録</h5></footer>

                            </div>
                        </div>

                    <% end %>
                </div>

                <!-- 登録したお部屋 -->
                <% current_user.rooms.each do |room| %>
                    <% if room.active? %>
                        <div class="col-6 col-md-4">
                            <div class="card">
                                <div class="card-body">

                                    <%= link_to listing_room_path(room) do %>

                                            <%= image_tag room_cover(room), style: "width: 100%; height: 180;" %>
                                            <h5 class="card-title"><%= link_to room.listing_name, room_path(room), data: { turbolinks: false} %></h5>
                                            <p><%= room.address %></p>
                                            <!--レビュー -->
                                            <footer><h5 class="btn btn-danger disabled" style="margin-top: 20px;"><%= number_to_currency(room.price) %></h5></footer>
                                    <% end %>

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

            </div>

        </div>
    </div>

</div>

app\views\rooms\show.html.erb

<!-- 写真 -->
<div class="row" style="margin-left: 10px; margin-right: 10px;">
    <div class="col-md-11">
        <div class="card">
            <div class="card-body">
                <%= image_tag room_cover(@room), width: "100%" %>
            </div>
        </div>
    </div>
</div>
<br/>

<div class="row" style="margin-left: 10px; margin-right: 10px;">
    <!-- 左パネル -->
    <div class="col-md-8">
        <!-- お部屋の名前 -->
        <div class="row">
            <div class="col-md-11">
                <div class="card">
                    <div class="card-body">
                        <h2><%= @room.listing_name %></h2>
                        <%= @room.address %>

                        <div class="text-right">
                            <%= image_tag avatar_url(@room.user), class: "bd-placeholder-img figure-img img-fluid rounded-pill", style: "width: 40px; height: 30px;" %>
                            <%= @room.user.full_name %>
                        </div>

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

        </div>
        <br/>
        <!-- 部屋のインフォメーション -->
        <div class="row text-babu">
            <div class="col-md-11">
                <div class="card">
                    <div class="card-body">    

                        <div class="row text-center row-space-1">
                            <div class="col-md-3">
                                <i class="fas fa-home fa-3x" style="color: #1dbf73"></i><br/>
                                <%= @room.home_type %>
                            </div>
                            <div class="col-md-3">
                                <i class="fas fa-user fa-3x" style="color: #1dbf73"></i><br/>
                                <%= pluralize(@room.accommodate, "人宿泊可能") %>
                            </div>
                            <div class="col-md-3">
                                <i class="fas fa-bed fa-3x" style="color: #1dbf73"></i><br/>
                                <%= pluralize(@room.bed_room, "台") %>
                            </div>
                            <div class="col-md-3">
                                <i class="fas fa-door-closed fa-3x" style="color: #1dbf73"></i><br/>
                                <%= pluralize(@room.bath_room, "部屋") %>
                            </div>
                        </div>

                    </div>

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

        <br/>
        <!-- 詳細 -->
        <div class="row">
            <div class="col-md-11">
                <div class="card">
                    <div class="card-body">        
                        <h3>お部屋の詳細</h3>
                        <p><%= @room.description %></p>

                    </div>
                </div>
            </div>
        </div>
        <br/>
        <!-- アメニティ -->
        <div class="row">
        
            <div class="col-md-3" style="margin-left: 20px;">
                <h4>アメニティ</h4>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-5">
                        <ul class="amenities">
                            <li class="<%= 'text-line-through' if !@room.is_tv %>"><i class="fas fa-tv"></i>&nbsp;テレビ</li>
                            <li class="<%= 'text-line-through' if !@room.is_kitchen %>"><i class="fas fa-blender"></i>&nbsp;キッチン</li>
                            <li class="<%= 'text-line-through' if !@room.is_internet %>"><i class="fas fa-wifi"></i>&nbsp;インターネット</li>
                        </ul>
                    </div>
                    <div class="col-md-5">
                        <ul class="amenities">
                            <li class="<%= 'text-line-through' if !@room.is_heating %>"><i class="fab fa-hotjar"></i>&nbsp;暖房</li>
                            <li class="<%= 'text-line-through' if !@room.is_air %>"><i class="fas fa-temperature-low"></i>&nbsp;エアコン</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>            
        <br/>
        <!-- レビュー -->

        <br/>

        <!-- カルーセル表示 -->
        <div class="row">
            <div class="col-md-11">
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

                <% if @photos.length > 0 %>    

                    <ol class="carousel-indicators">
                        <% @photos.each do |photo| %>
                            <li data-target="#carouselExampleIndicators" data-slide-to="<%= photo.id %>" class="<%= 'active' if photo.id == @photos[0].id %>"></li>

                        <% end %>
                    </ol>

                    <div class="carousel-inner">

                        <% @photos.each do |photo| %>
                            <div class="carousel-item <%= 'active' if photo.id == @photos[0].id %>">
                            <%= image_tag url_for(photo), class: "bd-placeholder-img bd-placeholder-img-lg d-block w-100", width: "100%" %>
                            </div>
                        <% end %>


                        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                        </a>

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

        <hr/>

        <!-- googleマップ -->


        <!-- 近くのお部屋を検索 -->


    </div>

</div>

<!-- 右パネル -->
<div class="col-md-4">
    <!-- 予約フォーム -->
    
</div>

ブラウザ確認
表示されるか確認して下さい。
http://localhost:3000/rooms
http://localhost:3000/rooms/1

登録したお部屋一覧

写真カルーセル表示

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


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>

          </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">

          </div>
        </li>

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

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

[７５]Bootstrap |アクションテキスト<<　[ホームに戻る]　>> [７７]Bootstrap | Googleマップ