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

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

【民泊5.1】【MacOSX】ダッシュボード

「app\controllers」フォルダに「dashboards_controller.rb」ファイルを新規作成してください。


app\controllers\dashboards_controller.rb(新規作成したファイル)

class DashboardsController < ApplicationController
  before_action :authenticate_user!

  def index
    @rooms = current_user.rooms
  end
end



記述追加 config\routes.rb
10行目に「get 'dashboard' => 'dashboards#index'」の記述追加

Rails.application.routes.draw do

  #ルートをpages#homeに設定
  root 'pages#home'

  get 'pages/home'
  get '/your_trips' => 'reservations#your_trips'
  get '/your_reservations' => 'reservations#your_reservations'
  get 'search' => 'pages#search'
  get 'dashboard' => 'dashboards#index'

  resources :users, only: [:show]

  resources :rooms, except: [:edit] do
    member do
      get 'listing'
      get 'pricing'
      get 'description'
      get 'photo_upload'
      get 'amenities'
      get 'location'
      get 'preload'
      get 'preview'
    end
    resources :photos, only: [:create, :destroy]
    resources :reservations, only: [:create]
  end

  resources :guest_reviews, only: [:create, :destroy]
  resources :host_reviews, only: [:create, :destroy]

  devise_for :users,
  path: '',
  path_names: {sign_in: 'login', sign_out: 'logout', edit: 'profile', sign_up: 'registration'},
  controllers: {registrations: 'registrations'}
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end



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

  def after_sign_in_path_for(resource_or_scope)
    dashboard_path
  end



app\controllers\application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  #devise_controllerが読み込まれたら
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  # ログイン後にダッシュボードを表示
  def after_sign_in_path_for(resource_or_scope)
    dashboard_path
  end

  #フィールドの更新を許可
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:fullname])
    devise_parameter_sanitizer.permit(:account_update, keys: [:fullname, :phone_number, :description])
  end
end



「app\views」フォルダに「dashboards」フォルダを新規作成してください。
作成した「dashboards」フォルダに「index.html.erb」ファイルを新規作成します。



app\views\dashboards\index.html.erb(新規作成したファイル)

<div class="row">
  <div class="col-md-3">
    <div class="center">
       <%= image_tag current_user.gravatar_url, class: "avatar-full" %>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading"><%= current_user.fullname %></div>
      <div class="panel-body">
        <ul class="sidebar-list">
          <% if current_user.confirmation_token %>
            <li>メールアドレス<span class="pull-right icon-babu"><i class="fa fa-check-circle-o"></i></span></li>
          <% end %>


        </ul>
      </div>
    </div>
  </div>

  <div class="col-md-9">

    <!-- お知らせ -->
    <div class="panel panel-default">
      <div class="panel-heading">お知らせ</div>
      <div class="panel-body">



      </div>
    </div>

    <!-- 登録している部屋 -->
    <div class="panel panel-default">
      <div class="panel-heading">登録しているお部屋(<%= @rooms.length %>)</div>
      <div class="panel-body">
        <%= render partial: "rooms/rooms_list", locals: {rooms: @rooms} %>
      </div>
    </div>


  </div>
</div>



「app\views\shared\_navbar.html.erb」ファイルを編集します。


記述追加 app\views\shared\_navbar.html.erb(31行目)

<li><%= link_to "ダッシュボード", dashboard_path %></li>



記述追加 app\views\shared\_navbar.html.erb

<!-- ナビゲーションバー -->
<nav class="navbar navbar-default navbar-static-top">

  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">ナビゲーション トグル</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "テストサイトMinpaku", root_path, class: "navbar-brand" %>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <% if (!user_signed_in?) %>
            <li><%= link_to "ログイン", new_user_session_path %></li>
            <li><%= link_to "新規ユーザ登録", new_user_registration_path %></li>
        <% else %>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              <!-- アバター画像 -->
              <%= image_tag current_user.gravatar_url, class: "img-circle avatar-small" %>&nbsp;
              <!-- 氏名表示に変更 -->
              <%= current_user.fullname %>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><%= link_to "ダッシュボード", dashboard_path %></li>
                <li><%= link_to "登録したお部屋の管理", rooms_path %></li>
                <li><%= link_to "お部屋の新規登録", new_room_path %></li>
                <li><%= link_to "受注予約の管理(ホスト用)", your_reservations_path %></li>
                <li><%= link_to "予約履歴(ゲスト用)", your_trips_path %></li>
                <li role="separator" class="divider"></li>
                <li><%= link_to "ユーザ登録情報修正", edit_user_registration_path %></li>
                <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></li>
              </ul>
            </li>
        <% end %>
      </ul>
    </div>
    
  </div>
</nav>



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


ダッシュボード
ダッシュボード

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

関連記事(外部サイト)