Rails6.0 | 動画学習サイトを作成| 12 | ダッシュボード - 学生向けプログラミング入門

[11]Google認証　<<　[ホームに戻る]　>> [13]アイコン（Font Awesome）

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

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

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

記述追加　db\migrate\20200801121900_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: {omniauth_callbacks: 'omniauth_callbacks', 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(14行目)

    def after_sign_in_path_for(resource)
        dashboard_path
    end

app\controllers\application_controller.rb

class ApplicationController < ActionController::Base

  #devise_controllerが読み込まれたら
  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」ファイルを以下のように編集します。

１．36行目に以下のリンクを追加します

<%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %>

２．48行目に以下の記述を追加します。

<% if (user_signed_in?) %>
    <nav class="navbar has-shadow" style="z-index: 5;">
        <div class="container">
            <div class="navbar">

                <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %>

                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">メニュー</a>
                    <div class="navbar-dropdown">
                    <a class="navbar-item"></a>
                    <hr class="navbar-divider">
                    <%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %>
                    </div>
                </div>

            </div>
        </div>
    </nav>
<% end %>

app\views\shared\_navbar.html.erb

<nav class="navbar is-link" role="navigation" aria-label="main navigation">

    <div class="navbar-brand">
        <a class="navbar-item" href="/">
            <h1>テストサイトGakushuu6</h1>
        </a>
        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">

        <div class="navbar-end">
            <a class="navbar-item"></a>
            <a class="navbar-item"></a>

            <!-- もしログインしていなかったら-->
            <% if (!user_signed_in?) %>
                <div class="navbar-item">
                    <div class="buttons">
                        <%= link_to  "新規ユーザ登録", new_user_registration_path, class: "button is-info" %>
                        <%= link_to  "ログイン", new_user_session_path, class: "button is-light" %>
                    </div>
                </div>

            <!-- ログインしていたら　-->
            <% else %>
                <div class="navbar-item has-dropdown is-hoverable" style="margin-right: 100px;">
                    <a class="navbar-item"><%= current_user.full_name %>
                    <i class="far fa-caret-square-down"></i>
                    </a>
                    <div class="navbar-dropdown">
                        <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %>
                        <%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %>
                        <hr class="navbar-divider">
                        <%= link_to  "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %>
                    </div>
                </div>
            <% end %>

        </div>
    </div>
</nav>

<% if (user_signed_in?) %>
    <nav class="navbar has-shadow" style="z-index: 5;">
        <div class="container">
            <div class="navbar">

                <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %>

                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">メニュー</a>
                    <div class="navbar-dropdown">
                    <a class="navbar-item"></a>
                    <hr class="navbar-divider">
                    <%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %>
                    </div>
                </div>

            </div>
        </div>
    </nav>
<% end %>

<script>
$(document).ready(function() {
  // navbar burgerアイコンでクリックイベントを確認する
  $(".navbar-burger").click(function() {
      // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替えます
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");
  });
});
</script>