Rails6.0 | 民泊予約サイトの構築 | 18 | プロフィールページ作成 - 学生向けプログラミング入門

[１７]電話番号カラム追加<<　[ホームに戻る]　>> [１９]部屋モデル作成

ユーザープロフィールページを作成します。

「app\controllers\users_controller.rb」ファイルに以下のメソッドを追加します。

記述追加　app\controllers\users_controller.rb(8行目)

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

app\controllers\users_controller.rb

class UsersController < ApplicationController

  before_action :authenticate_user!

  def dashboard
  end

  def show
    @user = User.find(params[:id])
  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

ルートの設定をします。

記述追加　config\routes.rb(13行目)

get '/users/:id', to: 'users#show', as: 'user'

config\routes.rb

Rails.application.routes.draw do

  # ルートを　app\views\pages\home.html.erb　に設定
  root 'pages#home'

  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'},
              controllers: {registrations: 'registrations'}

  get 'pages/home'
  get '/dashboard', to: 'users#dashboard'
  get '/users/:id', to: 'users#show', as: 'user'
  
  post '/users/edit', to: 'users#update'

  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

「app\views\users」フォルダに「show.html.erb」ファイルを新規作成します。

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">
                <div class="columns is-multiline">

                    <!-- 新しいお部屋を登録 -->
                    <div class="column is-one-third has-text-centered">
                    
                    </div>
                    
                    <!-- 登録したお部屋 -->
                    <div class="column is-one-third has-text-centered">
                    
                    </div>
                    
                </div>
            </div>
            
        </div>
    </div>
</section>