AdminLTE 3を使って管理者ページを実装しよう・１

管理者(Admin)ページのログイン機能とトップページを実装します。

ログイン画面

トップページ

手順

1. AdminLTE 3 をインストールする
2. JSとCSSを読み込ませる
3. モデルに管理者かどうかを判別させるroleのカラムを追加する(enumの追加)

1.AdminLTE 3 をインストールする

#ターミナル

$ yarn add admin-lte@^3.0

現状はyarnでインストールするのが使い勝手が良いようです。

上記コマンドは下記リンクを参考にしています。

Introduction | AdminLTE 3

2.JSとCSSを読み込ませる

#app/assets/javascripts/admin.js

//= require jquery3
//= require rails-ujs
//= require admin-lte/plugins/bootstrap/js/bootstrap.bundle.min
//= require admin-lte/dist/js/adminlte

#app/assets/javascripts/application.js

//= require bootstrap-sprockets
//= require rails-ujs
//= require activestorage
//= require_tree . ←削除

#app/assets/stylesheets/admin.scss

@import 'admin-lte/plugins/fontawesome-free/css/all.min.css';
@import 'admin-lte/dist/css/adminlte.css';

//= require tree.は、application.jsと同じ階層にあるファイルを一括で読み込むコード。admin.jsは、application.jsと同じ階層にあるので、rails-ujsやjquery3などが二重に読み込まれてしまうのが原因。

削除しないとエラーになります。

ここで管理者ページ用のマニフェストファイルの作成しているのですが

マニフェストファイルとは
どのCSSファイルやJavascriptファイルを呼び出すかを
記載したファイルのことです。

一般のページと管理者専用のページは見た目が全然違う為、専用のマニフェストファイルを作成しています。

新しく作ったJSやCSSを、ビュー側で読み込ませる

#config/initializars/assets.rb

Rails.application.config.assets.precompile += %w[admin.js admin.css] #ここのコメントアウトを外す

Rails.application.config.assets.precompile += %w[admin.js admin.css]のコメントアウトを外します。

3.モデルに管理者かどうかを判別させるroleのカラムを追加する(enumの追加)

#ターミナル

$ rails g migration add_role_to_users

マイグレーションファイルが作成される

#db/migrate/2019xxxxxxxxxx_add_role_to_users.rb

class AddRoleToUsers < ActiveRecord::Migration[5.2]
   def change
     add_column :users, :role, :integer, null: false, default: 0
   end
end

#ターミナル

$ bundle exec rails db:migrate

#app/models/user.rb

enum role: { general: 0, admin: 1 }

一般ユーザー＝general: 0

管理者＝admin: 1

を定義しました。

次の記事でコントローラーの作成から書いていきます。

最後に

読んでいただいた方、ありがとうございました。