りゅうじのRails学習のアウトプットblog

初学者による初学者の為の記事です。

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

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

ログイン画面

Image from Gyazo

トップページ

Image from Gyazo

手順

  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-ujsjquery3などが二重に読み込まれてしまうのが原因。

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

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

マニフェストファイルとは
どの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

を定義しました。

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

最後に

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