戻る

Rails6.0


民泊サイトの構築 Rails6.0

  (0)
3,000円

タスク3-7   部屋ビュー

このタスクについて


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




app\views\room\new.html.erb
 
<section class="section"> 
    <div class="container"> 
        <article class="panel"> 
            <div class="panel-heading"> 
                お部屋の登録 
            </div> 
            <div class="card"> 
                <div class="card-content"> 
                    <div class="media"> 
                        <%= form_for @room do |f| %> 
                            <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> 
                            &nbsp;&nbsp;&nbsp;&nbsp; 
                            <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/> 
                            <br/> 
                            <br/> 
                            <div class="col-md-3 select"> 
                                <div class="form-group"> 
                                    <label>宿泊可能人数</label> 
                                    <%= f.select :accommodate, [["2人", 2], ["3人", 3], ["4人以上", 4]], 
                                        id: "accommodate", prompt: "選択してください", class: "form-control" %> 
                                </div> 
                            </div> 
                            &nbsp;&nbsp;&nbsp;&nbsp; 
                            <div class="col-md-4 select"> 
                                <div class="form-group"> 
                                    <label>ベッド数</label> 
                                    <%= f.select :bed_room, [["1台", 1], ["2台", 2], ["3台", 3], ["4台以上", 4]], 
                                        id: "bed_room", prompt: "選択してください", class: "form-control" %> 
                                </div> 
                            </div> 
                            <br/> 
                            <br/> 
                            <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]], 
                                        id: "bath_rooms", prompt: "選択してください", class: "form-control" %> 
                                </div> 
                            </div> 
                            <br/> 
                            <br/> 
                            <br/> 
                            <br/> 
                            <div><%= f.submit "登録する", class: "button is-primary" %></div> 
                        <% end %> 
                    </div> 
                </div> 
            </div> 
        </article> 
    </div> 
</section> 



サーバ起動
rails s


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



部屋の登録




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


app\views\rooms\_room_menu.html.erb(新規作成したファイル)
 
<ul class="sidebar-list"> 
  <li class="sidebar-item"> 
    <%= link_to "お部屋の概要", listing_room_path, class: "sidebar-link active" %> 
    &nbsp;&nbsp;<span class="pull-right text-babu" style="color: red;"><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? %> 
      &nbsp;&nbsp;<span class="pull-right text-babu" style="color: red;"><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? %> 
      &nbsp;&nbsp;<span class="pull-right text-babu" style="color: red;"><i class="fa fa-check"></i></span> 
    <% end %> 
  </li> 
  <li class="sidebar-item"> 
    <%= link_to "お部屋の写真", photo_upload_room_path, class: "sidebar-link active", data: { turbolinks: false} %> 
  </li> 
  <li class="sidebar-item"> 
    <%= link_to "付属設備", amenities_room_path, class: "sidebar-link active" %> 
    &nbsp;&nbsp;<span class="pull-right text-babu" style="color: red;"><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? %> 
      &nbsp;&nbsp;<span class="pull-right text-babu" style="color: red;"><i class="fa fa-check"></i></span> 
    <% end %> 
  </li> 
</ul> 
<br/> 
<br/> 
<% 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: "button is-danger", disabled: !is_ready %> 
<% end %> 



app\views\rooms\photo_upload.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"> 
                             お写真 
                        </div> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <div class="media"> 
                                <!--写真アップロードの記述 --> 
                                </div> 
                            </div> 
                        </div> 
                    </article> 
                </div> 
            </div> 
        </div> 
    </div> 
</section> 


app\views\rooms\listing.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"> 
                             お部屋の概要 
                        </div> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <div class="media"> 
                                    <%= form_for @room do |f| %> 
                                        <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> 
                                        &nbsp;&nbsp;&nbsp;&nbsp; 
                                        <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/> 
                                        <br/> 
                                        <br/> 
                                        <div class="col-md-4 select"> 
                                            <div class="form-group"> 
                                                <label>宿泊可能人数</label> 
                                                <%= f.select :accommodate, [["2人", 2], ["3人", 3], ["4人以上可能", 4]], 
                                                    id: "accommodate", prompt: "選択してください", class: "form-control" %> 
                                            </div> 
                                        </div> 
                                        &nbsp;&nbsp;&nbsp;&nbsp; 
                                        <div class="col-md-4 select"> 
                                            <div class="form-group"> 
                                                <label>ベッド数</label> 
                                                <%= f.select :bed_room, [["1台", 1], ["2台", 2], ["3台", 3], ["4台以上", 4]], 
                                                    id: "bed_room", prompt: "選択してください", class: "form-control" %> 
                                            </div> 
                                        </div> 
                                        <br/> 
                                        <br/> 
                                        <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]], 
                                                    id: "bath_rooms", prompt: "選択してください", class: "form-control" %> 
                                            </div> 
                                        </div> 
                                        <br/> 
                                        <br/> 
                                        <br/> 
                                        <br/> 
                                        <div><%= f.submit "修正する", class: "button is-primary" %></div> 
                                    <% end %> 
                                </div> 
                            </div> 
                        </div> 
                    </article> 
                </div> 
            </div> 
        </div> 
    </div> 
</section> 



app\views\rooms\amenities.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"> 
                             附属設備 
                        </div> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <div class="media"> 
                                    <%= form_for @room do |f| %> 
                                        <div class="row form-group"> 
                                            <div class="col-md-4"> 
                                                <%= f.check_box :is_tv, class: "checkbox" %> テレビ 
                                            </div> 
                                            <div class="col-md-4"> 
                                                <%= f.check_box :is_kitchen, class: "checkbox" %> キッチン 
                                            </div> 
                                            <div class="col-md-4"> 
                                                <%= f.check_box :is_internet, class: "checkbox" %> インターネット 
                                            </div> 
                                            </div> 
                                            <div class="row form-group"> 
                                            <div class="col-md-4"> 
                                                <%= f.check_box :is_heating, class: "checkbox" %> 暖房 
                                            </div> 
                                            <div class="col-md-4"> 
                                                <%= f.check_box :is_air, class: "checkbox" %> エアコン 
                                            </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> 



app\views\rooms\description.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"> 
                             お部屋の名前と説明 
                        </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 :listing_name, placeholder: "お部屋の名前", class: "input", required: true, id: "autoaddress" %> 
                                            </div> 
                                        </div> 
                                        <br/> 
                                        <div class="row"> 
                                            <div class="form-group"> 
                                                <label>説明</label> 
                                                <%= f.text_area :summary, rows: 5, placeholder: "部屋の説明", class: "textarea", required: true, id: "autoaddress" %> 
                                            </div> 
                                        </div> 
                                        
                                        <br/> 
                                        <div class="text-center"> 
                                        <%= f.submit "保存", class: "button is-primary" %> 
                                        </div> 
 
                                    <% end %> 
                                </div> 
                            </div> 
                        </div> 
                    </article> 
                </div> 
            </div> 
        </div> 
    </div> 
</section> 



app\views\rooms\location.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"> 
                             お部屋の住所 
                        </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 :address, placeholder: "住所を入力してください", 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> 



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> 



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

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

民泊サイトの構築 Rails6.0

3,000円

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

タスク数: 128