戻る

Rails6.0


民泊サイトの構築 Rails6.0

  (0)
3,000円

タスク4-6   ページ修正

このタスクについて


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




プロフィールページを修正していきます。


記述追加 app\controllers\users_controller.rb
「show()」メソッドに「@rooms = @user.rooms」の記述を追加してます。(9行目)
 
class UsersController < ApplicationController 

  before_action :authenticate_user! 

  def dashboard 
  end 

  def show 
    @user = User.find(params[:id]) 
    @rooms = @user.rooms 
  end 

  def update 
    @user = current_user 
    if @user.update_attributes(current_user_params) 
      flash[:notice] = "保存しました" 
    else 
      flash[:alert] = "更新できません" 
    end 
    redirect_to dashboard_path 
  end 

  private 
  def current_user_params 
    params.require(:user).permit(:about, :status, :avatar) 
  end 
end 



記述追加 app\views\users\show.html.erb(88行目から118行目)
 
<!-- 登録したお部屋 --> 
<% @user.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> 
                    <!--レビュー --> 
                </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 %> 



app\views\users\show.html.erb
 
<section class="section"> 
    <div class="container"> 
        <div class="columns"> 
        
            <!-- 左パネル --> 
            <div class="column is-one-third"> 
                <div class="columns is-multiline"> 
                    <!-- 上部 --> 
                    <div class="column is-full"> 
                        <div class="card"> 
                            <!-- アバター --> 
                            <div class="card-content is-horizontal-center is-flex"> 
                                <figure class="image is-256x256"> 
                                    <%= image_tag avatar_url(@user), class: "is-rounded" %> 
                                </figure> 
                            </div> 
                            
                            <div class="card-content"> 
                                <!-- 画像アップロードボタン --> 
                                <div class="content has-text-centered"> 
                                    <p class="title is-5"> 
                                        <%= @user.full_name %> 
                                    </p> 
                      
                                </div> 
                                <hr class="h-10"> 
                                
                                <!-- アカウント情報 --> 
                                <article class="media"> 
                                    <div class="media-content">アカウント登録日</div> 
                                    <div class="media-right"> 
                                        <strong><%= I18n.l(@user.created_at, format: :full_date) %></strong> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                
                                <!-- オンラインステータス --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content">ステータス</div> 
                                        <div class="media-right"> 
                                            <strong><% if @user.status %> オンライン <% else %> オフライン <% end %></strong> 
                                        </div> 
                                    </div> 
                                </article> 
                            </div> 
                        </div> 
                    </div> 
                    <!-- 下部 --> 
                    <div class="column is-full"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <!-- アカウント詳細 --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content"> 
                                            <p> 
                                                <strong>自己紹介</strong> 
                                                <br> 
                                                <%= @user.about %> 
                                            </p> 
                                        </div> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                
                                <!-- 電話番号 --> 
                                <article class="media"> 
                                    <div class="content"> 
                                    <% if !@user.phone_number.blank? %> 
                                    <span class="pull-right icon-babu"><i class="far fa-check-circle" style="color:#528fff;"></i></span>&nbsp;&nbsp;電話番号 
                                    <% end %> 
                                    </div> 
                                </article> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            <!-- 右側 --> 
            <div class="column"> 
            <h1 class="title is-5"><%= @user.full_name %>さんが登録しているお部屋(<%= @rooms.length %>)</h1> 
            <br/> 
                <div class="columns is-multiline"> 
                    
                    <!-- 登録したお部屋 --> 
                    <% @user.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> 
                                        <!--レビュー --> 
                                    </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> 
            
        </div> 
    </div> 
</section> 


ブラウザ確認
アドレスの数字のところは表示したいユーザのidを入れてください。
http://localhost:3000/users/3



プロフィールページ修正




ダッシュボードページの更新も行います。


記述更新 app\views\users\dashboard.html.erb(115行目から163行目)
 
<!-- お部屋を登録する --> 
<div class="column is-one-third has-text-centered"> 
    <%= link_to new_room_path do %> 
        <div class="card"> 
            <div class="card-image card-content is-horizontal-center is-flex "> 
                <figure class="image is-256x256 "> 
                    <%= image_tag 'icon_add.png' %> 
                </figure> 
            </div> 
            <div class="card-content"> 
                <strong>お部屋を新規登録する</strong> 
            </div>    
        </div> 
    <% end %> 
</div> 
<!-- 登録したお部屋 --> 
<% current_user.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> 
                    <!--レビュー --> 
                </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 %> 



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

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

民泊サイトの構築 Rails6.0

3,000円

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

タスク数: 128