[10]Gメール << [ホームに戻る] >> [12]Googleフォント
ユーザコントローラーを作成します。
コマンド
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(:from, :about, :status, :language) 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(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(46行目)
<%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %>
２．記述追加 app\views\shared\_navbar.html.erb(57行目)
<% 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> <a class="navbar-item"></a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">お仕事を買う人</a> <div class="navbar-dropdown"> <a class="navbar-item"></a> <a class="navbar-item"></a> </div> </div> </div> </div> </nav> <% end %>
app\views\shared\_navbar.html.erb
<nav class="navbar is-danger" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <h1>テストサイトOshigoto</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-start"> <div class="navbar-item"> <div class="field has-addons"> <div class="control"> <input class="input" type="text" placeholder="どんなお仕事を？"> </div> <div class="control"> <a class="button is-success">検索</a> </div> </div> </div> </div> <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-primary" %> <%= link_to "ログイン", new_user_session_path, class: "button is-light" %> </div> </div> <!-- ログインしていたら --> <% else %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-item" style="margin-right: 50px;"><%= current_user.full_name %></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> <a class="navbar-item"></a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">お仕事を買う人</a> <div class="navbar-dropdown"> <a class="navbar-item"></a> <a class="navbar-item"></a> </div> </div> </div> </div> </nav> <% end %> <script> $(document).ready(function() { // Check for click events on the navbar burger icon $(".navbar-burger").click(function() { // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" $(".navbar-burger").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active"); }); }); </script>
ブラウザ確認
http://localhost:3000/dashboard
ログインするとダッシュボードが表示されるようになり、２つ目のナビゲーションバーが設置されました。
↓↓クリックして頂けると励みになります。
[10]Gメール << [ホームに戻る] >> [12]Googleフォント
