戻る

Rails5.0


民泊サイトの構築 Rails5.0

  (0)
2,000円

タスク3-8   ルームインデックス

このタスクについて


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




写真がない場合「blank.jpg」を表示させる記述を追加します。
「app\assets\images」フォルダに「フルコード」の「サンプル画像」にある「blank.jpg」ファイルを保存しておいてください。


記述追加 app\models\room.rb(11行目)
 
  def cover_photo(size) 
    if self.photos.length > 0 
      self.photos[0].image.url(size) 
    else 
      "blank.jpg" 
    end 
  end 



app\models\room.rb
 
class Room < ApplicationRecord 

  belongs_to :user 

  has_many :photos 

  validates :home_type, presence: true 
  validates :room_type, presence: true 
  validates :accommodate, presence: true 
  validates :bed_room, presence: true 
  validates :bath_room, presence: true 

  def cover_photo(size) 
    if self.photos.length > 0 
      self.photos[0].image.url(size) 
    else 
      "blank.jpg" 
    end 
  end 
end 



app\views\rooms\index.html.erb
 
<div class="row"> 
  <div class="col-md-3"> 
    <ul class="sidebar-list"> 
      <li class="sidebar-item"><%= link_to "登録したお部屋の管理", rooms_path, class: "sidebar-link active" %></li> 
    </ul> 
  </div> 
  <div class="col-md-9"> 
    <div class="panel panel-default"> 
      <div class="panel-heading"> 
        登録しているお部屋の一覧 
      </div> 
      <br/> 
      <div class="panel-body"> 
        <% @rooms.each do |room| %> 
          <div class="row"> 
            <div class="col-md-2"> 
                <%= image_tag room.cover_photo(:thumb) %> 
            </div> 
            <div class="col-md-7"> 
              <h4><%= room.listing_name %></h4> 
            </div> 
            <div class="col-md-3 right"> 
              <%= link_to "お部屋情報の更新", listing_room_path(room), class: "btn btn-form" %> 
            </div> 
          </div> 
          <hr/> 
        <% end %> 
      </div> 
    </div> 
  </div> 
</div> 



app\views\rooms\show.html.erb
 
<!-- 写真 --> 
<div class="row"> 
  <div class="col-md-12"> 
    <%= image_tag @room.cover_photo(nil), width: "100%" %> 
  </div> 
</div> 
<br/> 
<div class="row"> 
  <!-- 左パネル --> 
  <div class="col-md-8"> 
    <!-- お部屋の名前 --> 
    <div class="row"> 
      <div class="col-md-8"> 
        <h1><%= @room.listing_name %></h1> 
        <%= @room.address %> 
      </div> 
      <div class="col-md-4 text-center"> 
        <%= image_tag @room.user.gravatar_url, class: "img-circle avatar-large" %><br/><br/> 
        <%= @room.user.fullname %> 
      </div> 
    </div> 
    <hr/> 
    <!-- 部屋のインフォメーション --> 
    <div class="row text-babu"> 
      <div class="row text-center row-space-1"> 
        <div class="col-md-3"> 
          <i class="fa fa-home fa-2x"></i> 
        </div> 
        <div class="col-md-3"> 
          <i class="fa fa-user-circle-o fa-2x"></i> 
        </div> 
        <div class="col-md-3"> 
          <i class="fa fa-bed fa-2x"></i> 
        </div> 
        <div class="col-md-3"> 
          <i class="fa fa-bath fa-2x"></i> 
        </div> 
      </div> 
      <div class="row text-center"> 
        <div class="col-md-3"><%= @room.home_type %></div> 
        <div class="col-md-3"><%= pluralize(@room.accommodate, "人宿泊可能") %></div> 
        <div class="col-md-3"><%= pluralize(@room.bed_room, "台") %></div> 
        <div class="col-md-3"><%= pluralize(@room.bath_room, "部屋") %></div> 
      </div> 
    </div> 
    <hr/> 
    <!-- 詳細 --> 
    <div class="row"> 
      <div class="col-md-12"> 
        <h3>お部屋の詳細</h3> 
        <p><%= @room.summary %></p> 
      </div> 
    </div> 
    <hr/> 
    <!-- アメニティ --> 
    <div class="row"> 
      <div class="col-md-3"> 
        <h4>アメニティ</h4> 
      </div> 
      <div class="col-md-9"> 
        <div class="row"> 
          <div class="col-md-6"> 
            <ul class="amenities"> 
              <li class="<%= 'text-line-through' if !@room.is_tv %>">テレビ</li> 
              <li class="<%= 'text-line-through' if !@room.is_kitchen %>">キッチン</li> 
              <li class="<%= 'text-line-through' if !@room.is_internet %>">インターネット</li> 
            </ul> 
          </div> 
          <div class="col-md-6"> 
            <ul class="amenities"> 
              <li class="<%= 'text-line-through' if !@room.is_heating %>">暖房</li> 
              <li class="<%= 'text-line-through' if !@room.is_air %>">エアコン</li> 
            </ul> 
          </div> 
        </div> 
      </div> 
    </div> 
    <hr/> 
    <!-- カルーセル表示 --> 
    <div class="row"> 
      <% if @photos.length > 0 %> 
          <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
          <!-- 表示 --> 
          <ol class="carousel-indicators"> 
            <% @photos.each do |photo| %> 
                <li data-target="#myCarousel" data-slide-to="<%= photo.id %>"></li> 
            <% end %> 
          </ol> 
          <!-- スライド --> 
          <div class="carousel-inner"> 
            <% @photos.each do |photo| %> 
                <div class="item <%= 'active' if photo.id == @photos[0].id %>"> 
                  <%= image_tag photo.image.url() %> 
                </div> 
            <% end %> 
          </div> 
          <!-- 左右移動 --> 
          <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
            <span class="glyphicon glyphicon-chevron-left"></span> 
            <span class="sr-only">戻る</span> 
          </a> 
          <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
            <span class="glyphicon glyphicon-chevron-right"></span> 
            <span class="sr-only">次へ</span> 
          </a> 
        </div> 
      <% end %> 
    </div> 
    <hr/> 
  </div> 
  <!-- 右パネル --> 
  <div class="col-md-4"> 
    <!-- 予約フォーム --> 
  </div> 
</div> 



記述追加 app\controllers\rooms_controller.rb(24行目)
 
  def show 
    @photos = @room.photos 
  end 



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

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

民泊サイトの構築 Rails5.0

2,000円

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

タスク数: 136