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

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

Rails6.1 | 民泊予約アプリ作成 | 19 | ビューの作成

↓↓クリックして頂けると励みになります。


18 | コントローラー作成】 << 【ホーム】 >> 【20 | Dropzoneの利用



Railsのビューは、Ruby on RailsというWebアプリケーションフレームワークで使用されるコンポーネントの1つです。
ビューはユーザーに対してデータを表示するための部分であり、通常HTMLやERB(Embedded Ruby)などのテンプレートエンジンを使用して、ウェブページの外観を生成します。
ビューは通常app/viewsディレクトリに格納されます。
ビューファイルは.html.erb拡張子を持つことが一般的で、ERB(Embedded Ruby)を使用してRubyコードを埋め込むことができます。
またパーシャルビューは、部分的なビューコンポーネントを再利用可能にするために使用されます。
_partial_name.html.erbという命名規則に従い、他のビューからインクルードできます。


では早速、部屋を登録するためのビューを作成していきます。


app\views\room\new.html.erb

<div class="container">
    <div class="card mt-4">
        <div class="card-body">
            <h4 class="mt-4 mb-4"><b>部屋の新規登録</b></h4>

            <%= form_for @room do |f| %>
                <div class="row mb-4">            
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label>お家のタイプ</label>
                            <%= f.select :home_type, [["マンション", "マンション"], ["アパート", "アパート"], ["一戸建て", "一戸建て"]],
                            id: "home_type", prompt: "選択してください", class: "form-control" %>
                        </div>

                    </div>
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label>お部屋のタイプ</label>
                            <%= f.select :room_type, [ ["プライベート", "プライベート"], ["シェア", "シェア"]],
                                id: "room_type", prompt: "選択してください", class: "form-control" %>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label>宿泊可能人数</label>
                            <%= f.select :accommodate, [["2人", 2], ["3人", 3], ["4人", 4], ["5人", 5], ["6人", 6]],
                                id: "accommodate", prompt: "選択してください", class: "form-control" %>
                        </div>
                    </div>
                </div>
                <div class="row mb-4">          
                    <div class="col-md-4">
                        <div class="mb-2">
                            <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>
                    <div class="col-md-4">
                        <div class="mb-2">
                            <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 class="col-md-4">

                    </div>
                </div>
                <%= f.submit "登録する", class: "btn btn-danger w-100" %>        
            <% end %>

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



サーバ起動
rails s


部屋の情報を入力して保存してください。
ブラウザ確認
http://localhost:3000/rooms/new

PCレイアウト
PCレイアウト


モバイルレイアウト
モバイルレイアウト



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


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

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

    <ul class="list-group">
        <li class="list-group-item" style="border:none;">
            <%= link_to "お部屋の概要", listing_room_path, class: "btn btn-light" %>
            <span class="text-danger"><i class="fa-solid fa-check"></i></span>
        </li>
        <li class="list-group-item" style="border:none;">
            <%= link_to "1泊の宿泊価格", pricing_room_path, class: "btn btn-light" %>
            <% if !@room.price.blank? %>
                <span class="text-danger"><i class="fa fa-check"></i></span>
            <% end %>        
        </li>
        <li class="list-group-item" style="border:none;">
            <%= link_to "お部屋の名前と説明", description_room_path, class: "btn btn-light" %>
                <% if !@room.listing_name.blank? %>
            <span class="text-danger"><i class="fa fa-check"></i></span>
            <% end %>
        </li>
        <li class="list-group-item" style="border:none;">
            <%= link_to "写真アップロード", photo_upload_room_path, class: "btn btn-light" %>
            <span class="text-danger"><i class="fa fa-check"></i></span>
        </li>
        <li class="list-group-item" style="border:none;">
            <%= link_to "付属設備", amenities_room_path, class: "btn btn-light" %>
            <span class="text-danger"><i class="fa fa-check"></i></span>
        </li>
        <li class="list-group-item" style="border:none;">
            <%= link_to "お部屋の住所", location_room_path, class: "btn btn-light" %>
            <% if !@room.address.blank? %>
                <span class="text-danger"><i class="fa fa-check"></i></span>
            <% end %>        
        </li>
    </ul>
    <div class="mt-4">
        <% 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 "公開する", class: "btn btn-danger w-100", disabled: !is_ready %>
        <% end %>
    </div>

    </div>
</div>



app\views\rooms\listing.html.erb

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

            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>部屋の修正</b></h4>

                    <%= form_for @room do |f| %>
                        <div class="row mb-4">            
                            <div class="col-md-4">
                                <div class="mb-2">
                                    <label>家のタイプ</label>
                                    <%= f.select :home_type, [["マンション", "マンション"], ["アパート", "アパート"], ["一戸建て", "一戸建て"]],
                                    id: "home_type", prompt: "選択してください", class: "form-control" %>
                                </div>

                            </div>
                            <div class="col-md-4">
                                <div class="mb-2">
                                    <label>部屋のタイプ</label>
                                    <%= f.select :room_type, [ ["プライベート", "プライベート"], ["シェア", "シェア"]],
                                        id: "room_type", prompt: "選択してください", class: "form-control" %>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-2">
                                    <label>宿泊可能人数</label>
                                    <%= f.select :accommodate, [["2人", 2], ["3人", 3], ["4人", 4], ["5人", 5], ["6人", 6]],
                                        id: "accommodate", prompt: "選択してください", class: "form-control" %>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-4">          
                            <div class="col-md-4">
                                <div class="mb-2">
                                    <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>
                            <div class="col-md-4">
                                <div class="mb-2">
                                    <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 class="col-md-4">

                            </div>
                        </div>
                        <%= f.submit "修正する", class: "btn btn-danger w-100" %>        
                    <% end %>            
                </div>

            </div>

        </div>

    </div>
</div>



登録した部屋の情報を修正できるようになりました。
http://localhost:3000/rooms/1/listing

PCレイアウト
PCレイアウト


モバイルレイアウト
モバイルレイアウト



写真アップロードページを編集します。
app\views\rooms\photo_upload.html.erb

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

            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>写真アップロード</b></h4>

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

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




まだアップロードできませんが、レイアウトを確認してください。
http://localhost:3000/rooms/1/photo_upload

PCレイアウト
PCレイアウト



付属設備登録ページを編集します。
app\views\rooms\amenities.html.erb

<div class="container mt-4">
    <div class="row">
        <div class="col-md-3">
            <%= render 'room_menu' %>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                    <h4 class="mt-4 mb-4"><b>付属設備</b></h4>
                    <%= form_for @room do |f| %>
                        <div class="row mb-2">
                            <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 mb-2">
                            <div class="col-md-4">
                                <%= f.check_box :is_heating %> 暖房
                            </div>
                            <div class="col-md-4">
                                <%= f.check_box :is_air %> エアコン
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                        <div class="mt-4">
                        <%= f.submit "保存", class: "btn btn-danger w-100" %>
                        </div>
                    <% end %>
                </div>
            </div>
        </div>
    </div>
</div>



ブラウザを確認します。
http://localhost:3000/rooms/1/amenities

PCレイアウト
PCレイアウト


モバイルレイアウト
モバイルレイアウト



部屋の名前と説明ページを編集します。
app\views\rooms\description.html.erb

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

            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>部屋の名前と説明</b></h4>

                    <%= form_for @room do |f| %>
                        <div class="mb-4">
                            <label>部屋の名前</label>
                            <%= f.text_field :listing_name, placeholder: "部屋の名前", class: "form-control w-100", required: true %>
                    </div>

                    <div class="mb-4">
                            <label>説明</label>
                            <%= f.text_area :summary, style: "width: 100%; height: 8rem;" %>
                        </div>
                    <br/>
                    <div>
                        <%= f.submit "保存", class: "btn btn-danger w-100" %>
                    </div>
                    <% end %>
                
                </div>
            </div>
        </div>
    </div>
</div>



ブラウザを確認します。
http://localhost:3000/rooms/1/description

PCレイアウト
PCレイアウト


モバイルレイアウト
モバイルレイアウト



住所登録ページを編集します。
app\views\rooms\location.html.erb

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

            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>部屋の住所</b></h4>
                    <%= form_for @room do |f| %>
                        <div class="mb-4">
                            <%= f.label :住所 %>
                            <%= f.text_field :address, placeholder: "住所を入力", class: "form-control w-100", required: true %>
                        </div>
                        <div>
                            <%= f.submit "保存", class: "btn btn-danger w-100" %>
                        </div>
                    <% end %>
      
                </div>

            </div>

        </div>

    </div>
</div>



ブラウザを確認します。
http://localhost:3000/rooms/1/location

PCレイアウト
PCレイアウト



部屋の価格を登録するページを編集します。
app\views\rooms\pricing.html.erb

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

            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>1泊の宿泊価格</b></h4>
                    <%= form_for @room do |f| %>
                        <div class="mb-4">
                            <div>
                                <label>価格(円)</label>
                                <%= f.text_field :price, placeholder: "例: 5,000",class: "form-control", required: true %>
                            </div>                    
                        </div>
                        <%= f.submit "保存", class: "btn btn-danger w-100" %>
                    <% end %>
                </div>
            </div>
        </div>

    </div>
</div>



ブラウザの確認をします。
http://localhost:3000/rooms/1/pricing

PCレイアウト
PCレイアウト



内容を全て登録して全項目にチェックマークが付くと「公開」ボタンが機能するようになります。
動作を確認して部屋を公開して下さい。

公開ボタン
公開ボタン


18 | コントローラー作成】 << 【ホーム】 >> 【20 | Dropzoneの利用



↓↓クリックして頂けると励みになります。

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)