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

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

【民泊5.1】【MacOSX】ページ修正

置き換え app\views\pages\home.html.erb
28行目からの部屋表示の記述をレンダーに書き換えます。

<%= form_tag search_path, method: :get do %>
  <div class="row">
    <div class="col-md-6">
      <%= text_field_tag :search, params[:search], placeholder: "どちらのお部屋をおさがしですか?", id:"autolocation", class: "form-control" %>
    </div>
    <div class="col-md-3">
      <%= text_field_tag :start_date, params[:start_date], placeholder: "チェックイン", readonly: true, class: "form-control datepicker" %>
    </div>
    <div class="col-md-3">
      <%= text_field_tag :end_date, params[:end_date], placeholder: "チェックアウト", readonly: true, class: "form-control datepicker" %>
    </div>
  </div>
  <br/><br/>

  <div class="row">
    <div class="col-md-offset-4 col-md-4">
      <%= submit_tag "検索", class: "btn btn-normal btn-block" %>
    </div>
  </div>
<% end %>

<br/><hr/><br/>

<!-- ホーム -->
<div><h3>お部屋</h3></div>
<br/>

<div class="row">
  <%= render partial: "rooms/rooms_list", locals: {rooms: @rooms} %>
</div>

<script>
  $('#start_date').datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 0,
    maxDate: '3m',
    onSelect: function(selected) {
      $('#end_date').datepicker("option", "minDate", selected);
      $('#end_date').attr("disabled", false);
    }
  });

  $('#end_date').datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 0,
    maxDate: '3m',
    onSelect: function(selected) {
      $('#start_date').datepicker("option", "maxDate", selected);
    }
  });

  $(function() {
    $("#autolocation").geocomplete();
  })

</script>



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


置き換え app\views\users\show.html.erb
30行目からの部屋表示の記述をレンダーに書き換えます。

<div class="row">
  <div class="col-md-3">
    <div class="center">
      <%= image_tag @user.gravatar_url, class: "avatar-full" %>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" style="text-align: center;"><%= @user.fullname %></div>
      <br/>
      <div class="center">
        <%= @user.description %>
       </div>
       <hr/>
      <div class="panel-body">
        <ul class="sidebar-list">
          <% if @user.confirmation_token %>
            <li>Emailアドレス<span class="pull-right icon-babu"><i class="fa fa-check-circle-o"></i></span></li>
          <% end %>

          <li>電話番号<span class="pull-right icon-babu"><i class="fa fa-check-circle-o"></i></span></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-md-9">
 
    <br/>
    <h4><%= @user.fullname %>さんが登録しているお部屋(<%= @rooms.length %>)</h4><br/>

    <div class="row">
      <%= render partial: "rooms/rooms_list", locals: {rooms: @rooms} %>
    </div>

    <br/>
    <h4>ゲストからのレビュー (<%= @guest_reviews.count %>)</h4>
    <div class="row">
      <%= render "reviews/guest_list" %>
    </div>
    <br/>

    <h4>ホストからのレビュー (<%= @host_reviews.count %>)</h4>
    <div class="row">
      <%= render "reviews/host_list" %>
    </div>

    <br/>

  </div>
</div>



ブラウザ確認
http://localhost:3000/users/3


記述更新 app\views\shared\_navbar.html.erb
13行目のリンクを「<%= link_to "テストサイトMinpaku", root_path, class: "navbar-brand" %>」に変更。

<!-- ナビゲーションバー -->
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">ナビゲーション トグル</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "テストサイトMinpaku", root_path, class: "navbar-brand" %>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <% if (!user_signed_in?) %>
            <li><%= link_to "ログイン", new_user_session_path %></li>
            <li><%= link_to "新規ユーザ登録", new_user_registration_path %></li>
        <% else %>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                <!-- アバター画像 -->
                <%= image_tag current_user.gravatar_url, class: "img-circle avatar-small" %>&nbsp;
                <!-- 氏名表示に変更 -->
                <%= current_user.fullname %>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><%= link_to "登録したお部屋の管理", rooms_path %></li>
                <li><%= link_to "お部屋の新規登録", new_room_path %></li>
                <li><%= link_to "受注予約の管理(ホスト用)", your_reservations_path %></li>
                <li><%= link_to "予約履歴(ゲスト用)", your_trips_path %></li>
                <li role="separator" class="divider"></li>
                <li><%= link_to "ユーザ登録情報修正", edit_user_registration_path %></li>
                <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></li>
              </ul>
            </li>
        <% end %>
      </ul>
    </div>
  </div>
</nav>


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

関連記事(外部サイト)