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

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

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 73 | Bootstrap | 部屋ビューの作成

「21 | 部屋ビューの作成」をBootstrapで書き換えていきます。


app\views\room\new.html.erb

<br/>
<br/>
<div class="row">
    <div class="col-sm-6" style="margin:0 auto;">

        <div class="card text-center">
            <h4 class="card-header text-center">お部屋の新規登録</h4>
                <div class="card-body" style="margin-left: 50px;">
                <br/>

                <%= form_for @room do |f| %>
                    <div class="row">

                        <div class="col-md-4 select">
                            <div class="form-group">
                                <label>お家のタイプ</label>
                                <%= f.select :home_type, [["マンション", "マンション"], ["アパート", "アパート"], ["一戸建て", "一戸建て"]],
                                    id: "home_type", prompt: "選択してください", class: "form-control" %>
                            </div>
                        </div>
                        <br/>
                        <div class="col-md-4 select">
                            <div class="form-group">
                                <label>お部屋のタイプ</label>
                                <%= f.select :room_type, [ ["プライベート", "プライベート"], ["シェア", "シェア"]],
                                    id: "room_type", prompt: "選択してください", class: "form-control" %>
                            </div>
                        </div>
                        <br/>
                        <div class="col-md-4 select">
                            <div class="form-group">
                                <label>宿泊可能人数</label>
                                <%= f.select :accommodate, [["2人", 2], ["3人", 3], ["4人", 4], ["5人", 5], ["6人", 6]],
                                    id: "accommodate", prompt: "選択してください", class: "form-control" %>
                            </div>
                        </div>
                        <br/>
                        <div class="col-md-4 select">
                            <div class="form-group">
                                <label>ベッド数</label>
                                <%= f.select :bed_room, [["1台", 1], ["2台", 2], ["3台", 3], ["4台", 4], ["5台", 5], ["6台", 6]],
                                    id: "bed_room", prompt: "選択してください", class: "form-control" %>
                            </div>
                        </div>

                        <br/>
                        <div class="col-md-4 select">
                            <div class="form-group">
                                <label>部屋数</label>
                                <%= f.select :bath_room, [["1部屋", 1], ["2部屋", 2], ["3部屋", 3], ["4部屋", 4], ["5部屋", 5], ["6部屋", 6]],
                                    id: "bath_rooms", prompt: "選択してください", class: "form-control" %>
                            </div>
                        </div>
                    </div>
                    <br/>
          
                    <br/>
                    <div><%= f.submit "登録する", class: "btn btn-primary btn-block" %></div>

                    <% end %>

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



サーバ起動
rails s


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

部屋の登録
部屋の登録



「app\views\rooms」フォルダに「_room_menu.html.erb」ファイルを新規作成


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

<br/>
<div class="row" style="margin-left: 50px;">

        <div class="card text-center">

                <div class="card-body">
                <br/>

                <ul class="sidebar-list" style="margin-left: 30px; margin-right: 30px;">
                <li class="sidebar-item">
                  <%= link_to "お部屋の概要", listing_room_path, class: "sidebar-link active" %>
                  <span class="pull-right text-babu"><i class="fa fa-check"></i></span>
                </li>
                <li class="sidebar-item">
                  <%= link_to "1泊の宿泊価格", pricing_room_path, class: "sidebar-link active" %>
                  <% if !@room.price.blank? %>
                    <span class="pull-right text-babu"><i class="fa fa-check"></i></span>
                  <% end %>
                </li>
                <li class="sidebar-item">
                  <%= link_to "お部屋の名前と説明", description_room_path, class: "sidebar-link active" %>
                  <% if !@room.listing_name.blank? %>
                    <span class="pull-right text-babu"><i class="fa fa-check"></i></span>
                  <% end %>
                </li>
                <li class="sidebar-item">
 
                </li>
                <li class="sidebar-item">
                  <%= link_to "付属設備", amenities_room_path, class: "sidebar-link active" %>
                  <span class="pull-right text-babu"><i class="fa fa-check"></i></span>
                </li>
                <li class="sidebar-item">
                  <%= link_to "お部屋の住所", location_room_path, class: "sidebar-link active" %>
                  <% if !@room.address.blank? %>
                    <span class="pull-right text-babu"><i class="fa fa-check"></i></span>
                  <% end %>
                </li>
              </ul>
              <hr/>
              <% is_ready = !@room.active && !@room.price.blank? && !@room.listing_name.blank? && !@room.address.blank? %>
              <%= form_for @room do |f| %>
                <%= f.hidden_field :active, value: true %>
                <%= f.submit "公開する", id: "publish_button", class: "btn btn-danger btn-block", disabled: !is_ready %>
              <% end %>


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



app\views\rooms\photo_upload.html.erb

<br/>
<div class="row">
    <div class="col-md-3">
        <%= render 'room_menu' %>
    </div>
    <div class="col-md-9">

        <div class="row">
            <div class="col-sm-9">
                <br/>
                <div class="card text-center">
                    <h4 class="card-header text-center">お部屋の写真 登録</h4>
                    <div class="card-body" style="margin-left: 50px;">
                        <br/>

                        <!--写真アップロードの記述 -->


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



app\views\rooms\listing.html.erb

<br/>
<div class="row">
    <div class="col-md-3">
        <%= render 'room_menu' %>
    </div>
    <div class="col-md-9">

        <div class="row">
            <div class="col-sm-9">
                <br/>
                <div class="card text-center">
                    <h4 class="card-header text-center">お部屋登録情報の修正</h4>
                    <div class="card-body" style="margin-left: 50px;">
                        <br/>


                        <%= form_for @room do |f| %>
                            <div class="row">

                                <div class="col-md-4 select">
                                    <div class="form-group">
                                        <label>お家のタイプ</label>
                                        <%= f.select :home_type, [["マンション", "マンション"], ["アパート", "アパート"], ["一戸建て", "一戸建て"]],
                                            id: "home_type", prompt: "選択してください", class: "form-control" %>
                                    </div>
                                </div>
                                <br/>
                                <div class="col-md-4 select">
                                    <div class="form-group">
                                        <label>お部屋のタイプ</label>
                                        <%= f.select :room_type, [ ["プライベート", "プライベート"], ["シェア", "シェア"]],
                                            id: "room_type", prompt: "選択してください", class: "form-control" %>
                                    </div>
                                </div>
                                <br/>
                                <div class="col-md-4 select">
                                    <div class="form-group">
                                        <label>宿泊可能人数</label>
                                        <%= f.select :accommodate, [["2人", 2], ["3人", 3], ["4人", 4], ["5人", 5], ["6人", 6]],
                                            id: "accommodate", prompt: "選択してください", class: "form-control" %>
                                    </div>
                                </div>
                                <br/>
                                <div class="col-md-4 select">
                                    <div class="form-group">
                                        <label>ベッド数</label>
                                        <%= f.select :bed_room, [["1台", 1], ["2台", 2], ["3台", 3], ["4台", 4], ["5台", 5], ["6台", 6]],
                                            id: "bed_room", prompt: "選択してください", class: "form-control" %>
                                    </div>
                                </div>

                                <br/>
                                <div class="col-md-4 select">
                                    <div class="form-group">
                                        <label>部屋数</label>
                                        <%= f.select :bath_room, [["1部屋", 1], ["2部屋", 2], ["3部屋", 3], ["4部屋", 4], ["5部屋", 5], ["6部屋", 6]],
                                            id: "bath_rooms", prompt: "選択してください", class: "form-control" %>
                                    </div>
                                </div>
                            </div>
                            <br/>
                            <div class="col-md-4 select">
                                <div class="form-group">
                                    <label>予約種別</label>

                                </div>
                                <span style="white-space: nowrap;">即時予約制:Instant, 承認予約制:Request</span>
                            </div>
                            <br/>
                            <div><%= f.submit "修正する", class: "btn btn-primary btn-block" %></div>


                        <% end %>

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



app\views\rooms\amenities.html.erb

<br/>
<div class="row">
    <div class="col-md-3">
        <%= render 'room_menu' %>
    </div>
    <div class="col-md-9">

        <div class="row">
            <div class="col-sm-9">
                <br/>
                <div class="card text-center">
                    <h4 class="card-header text-center">附属設備</h4>
                    <div class="card-body" style="margin-left: 50px;">
                        <br/>

                        <%= form_for @room do |f| %>
                            <div class="row form-group">
                               <div class="col-md-4">
                                 <%= f.check_box :is_tv %> テレビ
                               </div>
                               <div class="col-md-4">
                                 <%= f.check_box :is_kitchen %> キッチン
                               </div>
                               <div class="col-md-4">
                                 <%= f.check_box :is_internet %> インターネット
                               </div>
                             </div>
                             <div class="row form-group">
                               <div class="col-md-4">
                                 <%= f.check_box :is_heating %> 暖房
                               </div>
                               <div class="col-md-4">
                                 <%= f.check_box :is_air %> エアコン
                               </div>
                             </div>
                             <br/><br/>
                             <div class="text-center">
                               <%= f.submit "保存", class: "btn btn-primary btn-block" %>
                             </div>
                            <% end %>

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



app\views\rooms\description.html.erb

<br/>
<div class="row">
    <div class="col-md-3">
        <%= render 'room_menu' %>
    </div>
    <div class="col-md-9">

        <div class="row">
            <div class="col-sm-9">
                <br/>
                <div class="card text-center">
                    <h4 class="card-header text-center">お部屋の名前と説明</h4>
                    <div class="card-body">
                        <br/>

                        <%= form_for @room do |f| %>
                            <div class="row" style="margin-left: 40px;">
                              <div class="form-group">
                                <label>お部屋の名前</label>
                                <%= f.text_field :listing_name, placeholder: "お部屋の名前", class: "form-control", required: true, id: "autoaddress", style: "width: 160%;" %>
                              </div>
                           </div>
                           <div class="row" style="margin-left: 40px;">
                            <div class="form-group">

                                <%= f.label :説明 %>
                                <%= f.text_area :summary, style: "text-align: left;" %>

                             </div>
                          </div>
                          <br/>
                           <div class="text-center">
                            <%= f.submit "保存", class: "btn btn-primary btn-block" %>
                           </div>
                        <% end %>

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



app\views\rooms\location.html.erb

<br/>
<div class="row">
    <div class="col-md-3">
        <%= render 'room_menu' %>
    </div>
    <div class="col-md-9">

        <div class="row">
            <div class="col-sm-9">
                <br/>
                <div class="card text-center">
                    <h4 class="card-header text-center">お部屋の住所</h4>
                    <div class="card-body" style="margin-left: 50px;">
                        <br/>

                        <%= form_for @room do |f| %>
                            <div class="row">
                              <div class="form-group">
                              <%= f.label :住所 %>
                                <%= f.text_field :address, placeholder: "住所を入力", class: "form-control", required: true, id: "autoaddress", style: "margin-left: 30px; width: 160%;" %>
                              </div>
                           </div>
                           <br/>
                           <div class="text-center">
                            <%= f.submit "保存", class: "btn btn-primary btn-block" %>
                           </div>
                        <% end %>

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



app\views\rooms\pricing.html.erb

<section class="section">
    <div class="container">
        <div class="columns">

            <!-- 左パネル -->
            <div class="column is-one-third">
                <div class="columns is-multiline">

                    <div class="col-md-3">
                        <%= render 'room_menu' %>
                    </div>
                <br/>
                </div>
            </div>

            <!-- 右側 -->
            <div class="column">
                <div class="columns is-multiline">

                    <article class="panel">
                        <div class="panel-heading">
                             1泊の宿泊価格
                        </div>

                        <div class="card">
                            <div class="card-content">
                                <div class="media">
                                    <%= form_for @room do |f| %>

                                        <div class="row">
                                            <div class="form-group">
                                                <label>価格(円)</label>
                                                <%= f.text_field :price, placeholder: "例: 5,000円",class: "input", required: true, id: "autoaddress" %>
                                            </div>
                                    
                                        </div>
                                        <br/>
                                        <br/>
                                        <div class="text-center">
                                            <%= f.submit "保存", class: "button is-primary" %>
                                        </div>
 
                                    <% end %>
                                </div>
                            </div>
                        </div>
                    </article>

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



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

部屋が登録できるか確認してみましょう。