戻る

Rails6.0


民泊サイトの構築 Rails6.0

  (0)
3,000円

タスク4-2   予約コントローラとビュー

このタスクについて


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




「app\controllers」フォルダに「reservations_controller.rb」ファイルを新規作成します。



app\controllers\reservations_controller.rb(新規作成したファイル)
 
class ReservationsController < ApplicationController 

    before_action :authenticate_user! 
  
    def create 
      room = Room.find(params[:room_id]) 
  
      if current_user == room.user 
        flash[:alert] = "オーナーが予約することはできません。" 
      else 
  
          start_date = Date.parse(reservation_params[:start_date]) 
          end_date = Date.parse(reservation_params[:end_date]) 
          days = (end_date - start_date).to_i + 1 
  
          @reservation = current_user.reservations.build(reservation_params) 
          @reservation.room = room 
          @reservation.price = room.price 
          @reservation.total = room.price * days 
          @reservation.save 
  
          flash[:notice] = "予約が完了しました。" 
        end 
        redirect_to room 
    end 
  
  
    private 
      def reservation_params 
        params.require(:reservation).permit(:start_date, :end_date) 
      end 
  end 




記述追加 app\views\rooms\show.html.erb
「<%= render 'reservations/form' %>」の記述追加(268行目)
 
<section class="section"> 
    <div class="container"> 
        <div class="columns"> 
            <!-- 写真 --> 
            <div class="card"> 
                <div class="card-content"> 
                    <div class="content"> 
                        <%= image_tag room_cover(@room) %> 
                    </div> 
                </div> 
            </div> 
            <br/> 
        </div> 
    </div> 
</section> 
<section class="section"> 
    <div class="container"> 
        <div class="columns"> 
            <!-- 左側 --> 
            <div class="column is-two-thirds"> 
                <div class="columns is-multiline"> 
                    <div class="column"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                
                                <div class="box"> 
                                    <article class="media"> 
                                        <div class="media-content"> 
                                            <div class="content"> 
                                                <!-- お部屋の名前 --> 
                                                <div class="row"> 
                                                    <div class="col-md-8"> 
                                                        <h1><%= @room.listing_name %></h1> 
                                                        <h2><%= @room.address %></h2> 
                                                    </div> 
                                                 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </article> 
                                </div> 
                                <div class="box"> 
                                    <article class="media"> 
                                        <div class="media-content"> 
                                            <div class="content"> 
                                                <span class="title is-5"><%= @room.user.full_name %></span> 
                                                <figure class="image is-96x96"> 
                                                    <%= image_tag avatar_url(@room.user), class: "is-rounded" %> 
                                                </figure> 
                                            </div> 
                                        </div> 
                                    </article> 
                                </div> 
                                <div class="box"> 
                                    <article class="media"> 
                                        <div class="media-content"> 
                                            <div class="content"> 
                                                <!-- 部屋のインフォメーション --> 
                                                <div style="white-space: nowrap"> 
                                                    <span class="col-md-3"> 
                                                        <i class="fas fa-home fa-3x" style="color: #1dbf73"></i> 
                                                        <span class="col-md-3"><%= @room.home_type %></span> 
                                                    </span> 
                                                    &nbsp;&nbsp;&nbsp; 
                                                    <span class="col-md-3"> 
                                                        <i class="fas fa-user fa-3x" style="color: #1dbf73"></i> 
                                                        <span class="col-md-3"><%= pluralize(@room.accommodate, "人") %></span> 
                                                    </span> 
                                                    &nbsp;&nbsp;&nbsp; 
                                                    <span class="col-md-3"> 
                                                        <i class="fas fa-bed fa-3x" style="color: #1dbf73"></i> 
                                                        <span class="col-md-3"><%= pluralize(@room.bed_room, "台") %></span> 
                                                    </span> 
                                                    &nbsp;&nbsp;&nbsp; 
                                                    <span class="col-md-3"> 
                                                        <i class="fas fa-bath fa-3x" style="color: #1dbf73"></i> 
                                                        <span class="col-md-3"><%= pluralize(@room.bath_room, "部屋") %></span> 
                                                    </span> 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </article> 
                                </div> 
                                <!-- お部屋の詳細 --> 
                                <div class="box"> 
                                    <article class="media"> 
                                        <div class="media-content"> 
                                            <div class="content"> 
                                                <h3>お部屋の詳細</h3> 
                                                <p><%= @room.description %></p> 
                                            </div> 
                                        </div> 
                                    </article> 
                                </div> 
                                <!-- アメニティー --> 
                                <div class="box"> 
                                    <article class="media"> 
                                        <div class="media-content"> 
                                            <div class="content"> 
                                                <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> 
                                            </div> 
                                        </div> 
                                    </article> 
                                </div> 
                            </div> 
                        </div>                        
                    </div> 
                    <!-- カルーセル表示 --> 
                    <div class="column is-full">   
                        <div class="card"> 
                            <div class="card-content"> 
                                <div class="hero-carousel" id="carousel-photo"> 
                                    <% @room.photos.each do |photo| %> 
                                        <div class="carousel-item has-background image is-16by9"> 
                                            <%= image_tag url_for(photo), class: "is-background", width: "100%" %> 
                                        </div> 
                                    <% end %> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
             
                    <div class="column"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <!-- googleマップ --> 
                                <div class="box"> 
                                    <article class="media"> 
                                        <div class="media-content"> 
                                            <div class="content"> 
                                                <!-- GOOGLE マップ --> 
                                                <div class="row"> 
                                                <div id="map" style="width: 100%; height: 400px"></div> 
                                                <script src="https://maps.googleapis.com/maps/api/js"></script> 
                                                <script> 
                                                    function initialize() { 
                                                        var location = {lat: <%= @room.latitude %>, lng: <%= @room.longitude %>}; 
                                                        var map = new google.maps.Map(document.getElementById('map'), { 
                                                        center: location, 
                                                        zoom: 14 
                                                        }); 
                                                        var marker = new google.maps.Marker({ 
                                                        position: location, 
                                                        map: map 
                                                        }); 
                                                        var infoWindow = new google.maps.InfoWindow({ 
                                                        content: '<div id="content" class="image is-128x128"><%= image_tag room_cover(@room) %></div>' 
                                                        }); 
                                                        infoWindow.open(map, marker); 
                                                    } 
                                                    google.maps.event.addDomListener(window, 'load', initialize); 
                                                </script> 
                                                <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBojDcZmScBkIOISjoYREjgid99iZUL2Tk&callback=initMap" type="text/javascript"></script> 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </article> 
                                </div> 
                                <!-- 近くのお部屋 --> 
                                <div class="box"> 
                                    <article class="media"> 
                                        <div class="media-content"> 
                                            <div class="content"> 
                                                <!-- 近くのお部屋を検索 --> 
                                                <div class="row"> 
                                                    <h3>お近くのお部屋</h3> 
                                                    <br/> 
                                                    <% for room in @room.nearbys(10) %> 
                                                        <div class="col-md-4"> 
                                                            <div class="image is-128x128"> 
                                                                <%= image_tag room_cover(@room) %>                    
                                                            </div> 
                                                            <span> 
                                                            <%= link_to room.listing_name, room %><br/> 
                                                            (距離:<%= room.distance.round(2) %> Km) 
                                                            </span> 
                                                        </div> 
                                                    <% end %> 
                                                </div> 
                                                
                                            </div> 
                                        </div> 
                                    </article> 
                                </div> 
 
                            </div> 
                        </div>                        
                    </div> 
                </div> 
            </div> 
            <!-- 右側 --> 
            <div class="column"> 
                <div class="columns is-multiline"> 
                    <!-- 予約 --> 
                    <div class="column is-full"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <div class="media"> 
                                    <!-- 予約フォーム --> 
                                    <%= render 'reservations/form' %> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            
        </div> 
    </div> 
</section> 
<script> 
    BulmaCarousel.attach('#carousel-photo', { 
        slidesToScroll: 1, 
        slidesToShow: 1 
    }); 
    $(document).ready(function() { 
        $('#tabs li').on('click', function() { 
            var type = $(this).data('tab'); 
            $('#tabs li').removeClass('is-active'); 
            $(this).addClass('is-active'); 
            $('.tab-content').hide(); 
            $('#tab-' + type).show(); 
        }) 
    }) 
</script> 





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

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

民泊サイトの構築 Rails6.0

3,000円

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

タスク数: 128