[７２]Bootstrap |プロフィールページ作成<< [ホームに戻る] >> [７４]Bootstrap | 写真アップロード(dropzone)
「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 "１泊の宿泊価格", 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"> １泊の宿泊価格 </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
部屋が登録できるか確認してみましょう。
↓↓クリックして頂けると励みになります。
[７２]Bootstrap |プロフィールページ作成<< [ホームに戻る] >> [７４]Bootstrap | 写真アップロード(dropzone)
