戻る

Rails6.0


民泊サイトの構築 Rails6.0

  (0)
3,000円

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

このタスクについて


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




写真をカルーセル表示できるようにします。


コマンド
yarn add bulma-extensions


「app\javascript\packs\application.js」ファイルを以下のように書き換えます。


1.記述追加 app\javascript\packs\application.js(13行目)
window.BulmaCarousel = require("bulma-extensions/bulma-carousel/dist/js/bulma-carousel")



2.書き換え app\javascript\packs\application.js(15行目)
$(document).on('turbolinks:load', () => {



app\javascript\packs\application.js
 
// This file is automatically compiled by Webpack, along with any other files 
// present in this directory. You're encouraged to place your actual application logic in 
// a relevant structure within app/javascript and only use these pack files to reference 
// that code so it'll be compiled. 

require("@rails/ujs").start() 
require("turbolinks").start() 
require("@rails/activestorage").start() 
require("channels") 

window.Noty = require("noty") 
window.Dropzone = require("dropzone") 
window.BulmaCarousel = require("bulma-extensions/bulma-carousel/dist/js/bulma-carousel") 

$(document).on('turbolinks:load', () => { 
    $('.toggle').on('click', (e) => { 
        e.stopPropagation(); 
        e.preventDefault(); 
        $('#' + e.target.getAttribute('aria-controls')).toggleClass('is-hidden'); 
    }) 
}) 

// Uncomment to copy all static images under ../images to the output folder and reference 
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) 
// or the `imagePath` JavaScript helper below. 
// 
// const images = require.context('../images', true) 
// const imagePath = (name) => images(name, true) 

require("trix") 
require("@rails/actiontext") 



「app\assets\stylesheets\application.scss」ファイルに以下の記述を追加します。


記述追加 app\assets\stylesheets\application.scss(19行目)
@import 'bulma-extensions/bulma-carousel/dist/css/bulma-carousel.min';



app\assets\stylesheets\application.scss
 
/* 
 * This is a manifest file that'll be compiled into application.css, which will include all the files 
 * listed below. 
 * 
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's 
 * vendor/assets/stylesheets directory can be referenced here using a relative path. 
 * 
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the 
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 
 * files in this directory. Styles in this file should be added after the last require_* statement. 
 * It is generally better to create a new file per style scope. 
 * 
 *= require_tree . 
 *= require_self 
 */ 

 @import 'bulma'; 
 @import 'bulma-extensions'; 
 @import 'bulma-extensions/bulma-carousel/dist/css/bulma-carousel.min'; 

 @import 'noty/lib/noty'; 
 @import 'noty/lib/themes/sunset'; 

 @import 'dropzone/dist/basic.css'; 
 @import 'dropzone/dist/dropzone.css'; 



「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
 
<section class="section"> 
    <div class="container"> 
        <div class="columns"> 
        
            <!-- 左側 --> 
            <div class="column is-one-third"> 
                <div class="columns is-multiline"> 
                    <!-- 上部 --> 
                    <div class="column is-full"> 
                        <div class="card"> 
                            <!--アバター --> 
                            <div class="card-content is-horizontal-center is-flex"> 
                                <figure class="image is-256x256"> 
                                    <%= image_tag avatar_url(current_user), class: "is-rounded" %> 
                                </figure> 
                            </div> 
                            
                            <div class="card-content"> 
                      
                                <!-- アカウント --> 
                                <article class="media"> 
                                    <div class="media-content">アカウント登録日</div> 
                                    <div class="media-right"> 
                                        <strong><%= I18n.l(current_user.created_at, format: :full_date) %></strong> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                
                                <!-- ステータス --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-right"> 
                                            <% if current_user.status %> <strong style="color: green">オンライン</strong> <% else %> <strong style="color: red">オフライン</strong> <% end %> 
                                        </div> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                <br/> 
                                <!-- 自己紹介 --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content"> 
                                            <p> 
                                                <strong>自己紹介</strong> 
                                                <br/> 
                                                <br/> 
                                                <%= current_user.about %> 
                                            </p> 
                                        </div> 
                                </article> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            <!-- 右側 --> 
            <div class="column"> 
                <div class="columns is-multiline"> 
                    <!-- お部屋を登録する --> 
                    <div class="column is-one-third has-text-centered"> 
                        <%= link_to new_room_path do %> 
                            <div class="card"> 
                                <div class="card-image card-content is-horizontal-center is-flex "> 
                                    <figure class="image is-256x256 "> 
                                        <%= image_tag 'icon_add.png' %> 
                                    </figure> 
                                </div> 
                                <div class="card-content"> 
                                    <strong>お部屋を新規登録する</strong> 
                                </div>    
                            </div> 
                        <% end %> 
                    </div> 
                    <!-- 登録したお部屋 --> 
                    <% current_user.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> 
                                        <!--レビュー --> 
                                    </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> 
        </div> 
    </div> 
</section> 



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

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

民泊サイトの構築 Rails6.0

3,000円

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

タスク数: 128