戻る

Rails5.0


民泊サイトの構築 Rails5.0

  (0)
2,000円

タスク4-14   ページ修正

このタスクについて


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




置き換え
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





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

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

民泊サイトの構築 Rails5.0

2,000円

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

タスク数: 136