戻る

Rails6.0


民泊サイトの構築 Rails6.0

  (0)
3,000円

タスク4-8   ホームページ

このタスクについて


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




「フルコード」の「サンプル画像」に入っている「home\background01.jpg」ファイルを「app\assets\images」フォルダにコピーして下さい。



app\controllers\pages_controller.rb
 
class PagesController < ApplicationController 
  def home 
      @rooms = Room.where(active: true).limit(3) 
  end 
  
  def search 
  end  
end 



app\views\pages\home.html.erb
 
<% content_for :head do %> 
  <meta name="turbolinks-cache-control" content="no-cache"> 
<% end %> 
<section class="hero is-medium has-bg-img"> 
    <div class="hero-body"> 
        <div class="container"> 
            <h1 class="title has-text-white"> 
                素敵なご旅行をあなたに <br> 
                どんなお部屋をお探しですか? 
            </h1> 
            <%= form_for root_path, method: :get do %> 
                <br/> 
                <br/> 
                <div class="field is-horizontal"> 
                    <div class="field-body"> 
                        <div class="control has-icons-left"> 
                            <span class="icon is-small is-left"> 
                                <i class="fa fa-search"></i> 
                            </span> 
                            <%= text_field_tag :search, params[:search], placeholder: "どちらをお探し?", class: "input" %> 
                        </div> 
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                        <div class="field"> 
                            <p class="control is-expanded has-icons-left"> 
                                <%= text_field_tag :start_date, params[:start_date], placeholder: "チェックイン", readonly: true, class: "input is-primary is-rounded" %> 
                                <span class="icon is-small is-left"> 
                                <i class="far fa-calendar-alt"></i> 
                                </span> 
                            </p> 
                        </div> 
                    
                        <div class="field"> 
                            <p class="control is-expanded has-icons-left has-icons-right"> 
                                <%= text_field_tag :end_date, params[:end_date], placeholder: "チェックアウト", readonly: true, class: "input is-primary is-rounded" %> 
                                <span class="icon is-small is-left"> 
                                <i class="far fa-calendar-alt"></i> 
                                </span> 
                            </p> 
                        </div> 
                        <%= submit_tag "検索", class: "button is-primary" %> 
                    </div> 
                </div> 
            <% end %> 
        </div> 
    </div> 
</section> 
<div class="box"> 
    <article class="media"> 
        <div class="column"> 
            <div class="columns is-multiline"> 
                <!-- 登録されたお部屋 --> 
                <% @rooms.each do |room| %> 
                    <% if room.active? %> 
                        <div class="column is-one-third"> 
                            <div class="card"> 
                                <div class="card-image"> 
                                    <%= link_to listing_room_path(room) do %> 
                                        <figure class="image is-4by3"> 
                                            <%= image_tag room_cover(room) %> 
                                        </figure> 
                                    <% end %> 
                                </div> 
                                <br/> 
                                <div class="card-content p-t-5 p-b-5"> 
                                    <p class="subtitle is-6 m-b-5"><%= link_to room.listing_name, room_path(room), data: { turbolinks: false} %></p> 
                                    <p class="subtitle is-6 m-b-5"><%= room.address %></p> 
                                    <!--レビュー --> 
                                    <span class="star-review"><i class="fa fa-star"></i> 
                                        <%= room.average_rating %> 
                                        <span class="has-text-primary">(<%= room.reviews.count %>)</span> 
                                    </span> 
                                </div> 
                                <footer class="card-footer"> 
                                    <a class="has-text-danger is-block card-footer-item has-text-right"> 
                                        <span class="small-title">1泊の宿泊価格</span> 
                                        <strong><%= number_to_currency(room.price) %></strong>                                            
                                    </a> 
                                </footer> 
                            </div> 
                        </div> 
                    <% end %> 
                <% end %> 
            </div> 
        </div> 
    </article> 
</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); 
    } 
  }); 
</script> 



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

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

民泊サイトの構築 Rails6.0

3,000円

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

タスク数: 128