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

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

Rails6.0 | 民泊サイトの構築(改良版)| 11 | ダッシュボードの追加 | for MacOSX



| 10 | パスワード確認の省略 <<  [ホーム] >> | 12 | Googleフォント


ユーザーモデルに項目を追加します。


コマンド
rails g migration AddColumsToUser about:text status:boolean




「db\migrate\20200723123617_add_colums_to_user.rb」ファイルの記述を以下のように更新します。


記述更新 db\migrate\20200723123617_add_colums_to_user.rb
4行目に「, default: false」の記述を追加しています。

class AddColumsToUser < ActiveRecord::Migration[6.0]
  def change
    add_column :users, :about, :text
    add_column :users, :status, :boolean, default: false
  end
end



コマンド
rails db:migrate


ダッシュボードコントローラーを作成します。


コマンド
rails g controller Users dashboard


作成したユーザコントローラの内容を更新します。


記述更新 app\controllers\users_controller.rb

class UsersController < ApplicationController
  before_action :authenticate_user!

  def dashboard
  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)
  end

end



ルートの設定をします。


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

  get '/dashboard', to: 'users#dashboard'

  post '/users/edit', to: 'users#update'



自動で3行目に追加された記述「get 'users/dashboard'」は削除します。


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'
  
  post '/users/edit', to: 'users#update'

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



「app\controllers\application_controller.rb」ファイルに以下の記述を追加します。


記述追加 app\controllers\application_controller.rb(12行目)

    def after_sign_in_path_for(resource)
        dashboard_path
    end



app\controllers\application_controller.rb

class ApplicationController < ActionController::Base

    before_action :configure_permitted_parameters, if: :devise_controller?

    protected
    
    def configure_permitted_parameters
        devise_parameter_sanitizer.permit(:sign_up, keys: [:full_name])
        devise_parameter_sanitizer.permit(:account_update, keys: [:full_name])
    end

    def after_sign_in_path_for(resource)
        dashboard_path
    end    

end



ナビゲーションバーを更新します。


app\views\shared\_navbar.html.erb

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="z-index: 5;">
  <a class="navbar-brand" href="/"><h1 class="navh1"><font style="font-size: 1.2rem"><b>民泊予約サイト</font> <font style="font-size: 0.9rem">Private lodging reservation site</b></font></h1></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
    <!-- もしログインしていなかったら-->
    <% if (!user_signed_in?) %>
      <li class="nav-item" style="margin-right: 20px; margin-bottom: 5px;">
        <%= link_to  "まずはユーザ登録 Sign up", new_user_registration_path, class: "btn btn-danger btn-sm" %>
      </li>
      <li class="nav-item">
        <%= link_to  "ユーザ登録がお済みの方はこちら login", new_user_session_path, class: "btn btn-info btn-sm", style: "margin-right: 80px;" %>
      </li>
    <!-- ログインしていたら -->
    <% else %>
      <li class="nav-item dropdown" style="margin-right:10px;">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="btn btn-light bg-light text-dark"><%= current_user.full_name %></div>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <span class="dropdown-item"><i class="fas fa-user-edit"></i><%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "btn btn-warning" %></span>
          <span class="dropdown-item"><i class="fas fa-sign-out-alt"></i><%= link_to  "ログアウト", destroy_user_session_path, method: :delete, class: "btn btn-danger" %></span>
        </div>
      </li>
    <% end %>
    </ul>
  </div>
</nav>
<% if (user_signed_in?) %>
  <nav class="navbar navbar-expand-lg navbar-light bg-info" style="z-index: 3;">
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item" style="margin-top: 7px; margin-left: 60px; margin-right: 80px;">
        <span style="margin-top:13px;"><i class="fas fa-tachometer-alt"></i></span><%= link_to 'ダッシュボード', dashboard_path, class: "btn btn-light" %>
        </li>
        <li class="nav-item dropdown" style="margin-right: 50px;">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-hospital-symbol"></i>&nbsp;<div class="btn btn-light bg-light text-dark">ホスト</div>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-user-friends"></i>&nbsp;<div class="btn btn-light bg-light text-dark">ゲスト</div>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          </div>
        </li>
      </ul>
    </div>
  </nav>
<% end %>



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


ログインするとダッシュボードが表示されるようになり、2つ目のナビゲーションバーが設置されました。

ナビゲーションバー更新
ナビゲーションバー更新



↓↓クリックして頂けると励みになります。


| 10 | パスワード確認の省略 <<  [ホーム] >> | 12 | Googleフォント

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

関連記事(外部サイト)