Raiilsで[管理画面]掲示板/ユーザのCRUD機能の作成

 

課題概要

  • 管理画面に、掲示板のCRUD機能を作成してください。
  • 管理画面に、ユーザーのCRUD機能を作成してください。


  • 課題の細分化(想像しながら)
    • 掲示板管理 - サイドメニューにメニューを追加してください。

      • admin(管理画面)ディレクトリ内にshared/を作成し_sidebar.html.erb内にメニューを追加
        • 中のレイアウトはAdminLTEで作成されたデモのものを使用

          # admin/shared/_sidebar.html.erb
          
          <!-- Main Sidebar Container -->
           <aside class="main-sidebar sidebar-dark-primary elevation-4">
             <!-- Brand Logo -->
             <a href="#" class="brand-link">
              <img class="brand-image img-circle elevation-3" src="#" />
               <span class="brand-text font-weight-light">AdminLTE 3</span>
             </a>
          
             <!-- Sidebar -->
             <div class="sidebar">
               <!-- Sidebar user panel (optional) -->
               <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                 <div class="image">
                   <%= image_tag current_user.avatar_url, class: 'img-circle elevation-2' %>
                 </div>
                 <div class="info">
                   <a href="#" class="d-block"><%= current_user.decorate.full_name %></a>
                 </div>
               </div>
          
               <!-- Sidebar Menu -->
               <nav class="mt-2">
                 <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                   <li class="nav-item">
                     <%= link_to admin_boards_path, class: "nav-link #{active_if('admin/boards')}" do %>
                       <i class="nav-icon far fa-file"></i>
                       <p>
                         <%= t('boards.index.title') %>
                       </p>
                     <% end %>
                   </li>
                   <li class="nav-item">
                     <%= link_to admin_users_path, class: "nav-link #{active_if('admin/users')}" do %>
                       <i class="nav-icon far fa-user"></i>
                       <p>
                         <%= t('admin.users.index.title') %>
                       </p>
                     <% end %>
                   </li>
                 </ul>
               </nav>
               <!-- /.sidebar-menu -->
             </div>
             <!-- /.sidebar -->
           </aside>
          
    • ユーザー関連のページにいる場合はユーザー一覧のメニューをアクティブに、掲示板関連のページにいる場合は掲示板一覧のメニューをアクティブにしてください。

      • 何が言いたいかと言うと今いるページが分かる様にメニューの色を変えること

      • bootstrapのclassにactiveを追加(そのclassのタグ色が変わる様に)

      • アクティブ化はrails側でメソッドを作る

        application_helper.rb に追記

        def active_if(path)
          path == controller_path ? 'active' : ''
        end
        
        # _sidebar.html.erb
        <%= link_to admin_boards_path, class: "nav-link #{active_if('admin/boards')}" do %>
        

        もしくは

        def active_if(*path)
          active_menu?(*path) ? 'active' : ''
        end
        
        # あるいは
        def active_menu?(*path)
          path.any? { |c| c == controller_path }
        end
        
        # これは引数で*pathという可変長引数を受け取っているので下のhtmlでは、
        # 引数を複数渡して、どれかに当てはまればactiveにする。とできる
        
        # _sidebar.html.erb
        <%= link_to admin_boards_path, class: "nav-link #{active_if('admin/boards', 'admin/dashboards')}" do %>
        
    • ユーザー一覧では、ID、フルネーム、権限(管理者 or 一般)の項目を表示させてください。フルネームには詳細画面へのリンクを設定してください。

      • link_toとfull_nameを使用
    • ユーザー詳細では、ID、フルネーム、権限(管理者 or 一般)、作成日時の項目を表示させてください。

      • 詳細ページなのでshowアクション
      • show.html.erbを編集
    • それぞれに対して「編集」「削除」ボタンを表示させてください。

      • update,deleteメソッドを追加
      • 一覧ページと詳細ページどちらにも表示させる
      • pathに注意する。rails routesで確認
    • 掲示板一覧では、ID、タイトル、作成者、作成日の項目を表示させてください。タイトルには詳細画面へのリンクを設定してください。

      • 一覧はindex
      • showへlinkタグ、この時のpathに注意(board.title, admin_board_path(board)の様になる)
      • 表示するものは
    • それぞれに対して「編集」「削除」ボタンの項目を表示させてください。

      • update,deleteメソッドを追加
    • 一覧と詳細どちらの画面でも削除ボタンをクリックした際には確認用のアラートを表示させてください。※ 「はい」のクリック後、削除されるようにしてください。

      • deleteにフラッシュメッセージ,多分js?
    • ransackで掲示板の検索機能を実装してください。検索項目は、フリーテキスト(タイトル or 本文に含まれるかどうかを判定)、作成日の範囲指定です。範囲指定はgemのカスタマイズが必要となるためよく考えてみましょう。

      • ransackのgemの変更?gemとは?
        • いいえ、gemではなくransack.rbフォルダを作成し中身を公式から引っ張ってきて定義する
    • ransackでユーザーの検索機能を実装してください。検索項目は「名前」「権限」(一般 or 管理者 のプルダウン)です。

      • プルダウンのhtmlで内容クリックで変わる
    • enum_helpというgemを導入し、enum値の多言語化対応を行ってください。

      • Gemfileに追記
    • 管理画面用のページタイトルには語尾に(管理画面)の文字が表示されるようにしましょう。

      • 多分、ヘルパーの編集でadminの時とそうでない時をifで分岐
    • 管理画面の掲示板詳細ページでは、タイトルを「個別の掲示板のタイトル名 | RUNTEQ BOARD APP(管理画面)」と表示してください。

      • showページでタイトルcontent_forの記述
    • 管理画面の掲示板編集ページでは、タイトルを「個別の掲示板のタイトル名 | RUNTEQ BOARD APP(管理画面)」と表示してください。

      • editページでタイトルcontent_forの記述

 

掲示板編

・ユーザー編

ルーティング


boardやuserのコントローラーを追加したので追記

config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see <http://guides.rubyonrails.org/routing.html>
  namespace :admin do
    root to: 'dashboards#index'
    get 'login', to: 'user_sessions#new'
    post 'login', to: 'user_sessions#create'
    delete 'logout', to: 'user_sessions#destroy'
    resources :users, only: %i[index show edit update destroy]
    resources :boards, only: %i[index show edit update destroy]
  end
...
...

・管理画面/ユーザー ユーザー編集 メニューのアクティブ・非アクティブ機能


application_helper.rb

def active?(controller_name)
    return ".active" if controller_name == params[:controller]
  end

自分の回答 # app/views/admin/shared/_sidebar.html.erb

<!-- Main Sidebar Container -->
 <aside class="main-sidebar sidebar-dark-primary elevation-4">
   <!-- Brand Logo -->
   <a href="#" class="brand-link">
    <img class="brand-image img-circle elevation-3" src="#" />
     <span class="brand-text font-weight-light">AdminLTE 3</span>
   </a>

   <!-- Sidebar -->
   <div class="sidebar">
     <!-- Sidebar user panel (optional) -->
     <div class="user-panel mt-3 pb-3 mb-3 d-flex">
       <div class="image">
         <%= image_tag current_user.avatar_url, class: 'img-circle elevation-2' %>
       </div>
       <div class="info">
         <a href="#" class="d-block"><%= current_user.decorate.full_name %></a>
       </div>
     </div>

     <!-- Sidebar Menu ここから -->
     <nav class="mt-2">
       <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
         <li class="nav-item">
           <%= link_to admin_boards_path, class: "nav-link #{active_if('admin/boards')}" do %>
             <i class="nav-icon far fa-file"></i>
             <p>
               <%= t('boards.index.title') %>
             </p>
           <% end %>
         </li>
         <li class="nav-item">
           <%= link_to admin_users_path, class: "nav-link #{active_if('admin/users')}" do %>
             <i class="nav-icon far fa-user"></i>
             <p>
               <%= t('admin.users.index.title') %>
             </p>
           <% end %>
         </li> <!-- ここまで -->
       </ul>
     </nav>
     <!-- /.sidebar-menu -->
   </div>
   <!-- /.sidebar -->
 </aside>
  • ・回答例 # app/views/admin/shared/_sidebar.html.erb

    ...
    <nav class="mt-2">
           <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
             <li class="nav-item">
               <%= link_to admin_boards_path, class: "nav-link #{active_if('admin/boards')}" do %>
                 <i class="nav-icon far fa-file"></i>
                 <p>
                   <%= t('admin.boards.index.title') %>
                 </p>
               <% end %>
             </li>
             <li class="nav-item">
               <%= link_to admin_users_path, class: "nav-link #{active_if('admin/users')}" do %>
                 <i class="nav-icon far fa-user"></i>
                 <p>
                   <%= t('admin.users.index.title') %>
                 </p>
               <% end %>
             </li>
    ...
    

 

railsコンソールの使い方 例) 掲示板が作成できない ブラウザ-> エラー どこで間違っているのか rails c 使って rails c内で作成してみる board = Board.new(title: 'hoge', body: 'ほげ', user_id: 1) board.valid?(saveできるか確認) -true(作成可能)かfalse(作成不可) エラーが出ずに作成できれば、コントローラーは問題ないのでおそらくビュー側(form_withからなど)でデータが渡っていない. 送信ボタンを押してcreateに来る途中でモデルオプションなどで違う可能性がある。

・board.valid?(saveできるか確認) でsaveが出来なければ、コントローラー側で実装がうまくいってない。

Boardモデルのなにを取ってくるかを.で繋げるfindなど

*または保存されないrails c -s (sandboxを使う手もある