学生向けプログラミング入門

学生向けにプログラミングを解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 79 | Bootstrap | 予約コントローラとビュー

[78]Bootstrap |ログイン認証における書き換え<< [ホームに戻る] >> [80]Bootstrap | jQuery日付ピッカー


「30 | 予約コントローラとビュー」におけるBootstrapの書き換えを行います。


記述追加 app\views\rooms\show.html.erb
「<%= render 'reservations/form' %>」の記述追加(199行目)

<!-- 写真 -->
<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 class="col-md-11" style="margin-top: 30px;">

            <div id="map" style="width: 100%; height: 600px"></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"><%= image_tag room_cover(@room), style: "width: 300px;", :alt => '' %></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=ご自分のAPIキーを入れてください&callback=initMap" type="text/javascript"></script>

        </div>

        <!-- 近くのお部屋を検索 -->
        <h4 style="margin-top: 30px; margin-left: 30px; margin-right: 30px;">
            近くのお部屋
        </h4>  
        <div class="row" style="margin-left: 30px; margin-right: 30px;">

            <% for room in @room.nearbys(10) %>
                <div class="col-6 col-md-3">
                    <%= image_tag room_cover(room), style: "width: 100%; height: 180;" %>
                    <h5 class="card-title"><%= link_to room.listing_name, room, data: { turbolinks: false} %></h5>
                    <footer>(距離:<%= room.distance.round(2) %> Km)</footer>
                </div>

            <% end %>

        </div>

    </div>

</div>

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



「app\views」フォルダに「reservations」フォルダを新規作成します。
作成した「reservations」フォルダに「_form.html.erb」ファイルを新規作成します。



app\views\reservations\_form.html.erb(新規作成したファイル)

<%= form_for([@room, @room.reservations.new]) do |f| %>

    <div class="card" style="width: 24rem; margin-left: -70px;">
    <div class="card-header">

    </div>
    <div class="card-body">
    <form>
    <div class="form-row">
      <div class="col">
        <%= f.text_field :start_date, readonly: true, placeholder: "チェックイン", class: "form-control" %>
      </div>
      <div class="col">
      <%= f.text_field :end_date, readonly: true, placeholder: "チェックアウト", class: "form-control" %>
      </div>
    </div>
  </form>

    <br/>
      <%= f.submit "予約する", id: "btn_book", class: "btn btn-danger btn-block", disabled: true %>

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



ブラウザ確認
http://localhost:3000/rooms/1

予約フォーム
予約フォーム



[78]Bootstrap |ログイン認証における書き換え<< [ホームに戻る] >> [80]Bootstrap | jQuery日付ピッカー