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

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

Rails7.1 | 仕事売買アプリ作成 | 28 | trestle

↓↓クリックして頂けると励みになります。




27 | 仕事公開】 << 【ホーム】 >> 【29 | Application Helper



TrestleはRuby on Railsプロジェクトで管理画面を迅速に構築し、カスタマイズしやすくするための強力なツールです。
これにより、開発者はアプリケーションのコア機能に専念し、時間と労力を節約できます。


trestleは、Ruby on Railsアプリケーションに簡単に管理画面を追加することができます。
コードの繰り返しを減らし、管理画面の作成を迅速化します。
これにより、時間とリソースを節約できます。


プロジェクトのGemfileにTrestleを追加します。
最新バージョンのTrestleを使用する場合、以下の行を追加します。
記述追加 GemFile

gem 'trestle', '~> 0.9.3'
gem 'trestle-auth', '~> 0.4.0'



コマンド
bundle


コマンド(2つ)
rails g trestle:install


rails g trestle:auth:install


コマンド マイグレーション適用
rails db:migrate


管理ユーザを登録します。


コマンド
rails c


以下のようにコマンド待機状態になります。

コマンド待機状態
コマンド待機状態



コマンドで管理ユーザを登録します。
メールアドレス、パスワード、氏名はご自分のものを入れて下さい。
Administrator.create(email:"win.rails.learn@gmail.com",password:"123456",first_name:"testsite",last_name:"administrator")


exitでコマンド待機状態を抜けて下さい。


もし、以下のようなエラーが出て登録できない場合、Springを無効にすると解決できます
エラー

objc[873]: +[__NSCFConstantString initialize] may have been in progress in another thread when fork() was called.
objc[873]: +[__NSCFConstantString initialize] may have been in progress in another thread when fork() was called. We cannot safely call it or ignore it in the fork() child process. Crashing instead. Set a breakpoint on objc_initializeAfterForkError to debug.



解決策
コマンド

export DISABLE_SPRING=true



「app\assets\config\manifest.js」ファイルに以下の記述を追加します。


記述追加 app\assets\config\manifest.js(5行目)

//= link trestle/auth/userbox.css



app\assets\config\manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link trestle/auth/userbox.css



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


コマンドで追加した管理ユーザでログインします。

管理ユーザーでログイン
管理ユーザーでログイン



ログインできました。

ログイン成功
ログイン成功



trestle管理画面にダッシュボードを作成します。


「app\admin」フォルダに「dashboard_admin.rb」ファイルを新規作成して下さい。


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

Trestle.admin(:dashboard) do
    menu do
        item :dashboard, icon: "fa fa-tachometer"
    end
    controller do 
        def index
            @user_count = User.count()
            @gig_count = Gig.count()
            @categories_count = Category.count()
        end
    end
end



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



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

<div class="main-content-area">
    <div class="main-content-container">
        <div class="main-content">
            <div class="row">
                <div class="col-md-3 bg-primary">
                    <div class="card text-white text-center">
                        <h1><%= @user_count %></h1>
                        <p>ユーザー</p>
                    </div>
                </div>
                <div class="col-md-3 bg-warning">
                    <div class="card text-white text-center">
                        <h1><%= @gig_count %></h1>
                        <p>仕事</p>
                    </div>
                </div>
                <div class="col-md-3 bg-info">
                    <div class="card text-white text-center">
                        <h1><%= @categories_count %></h1>
                        <p>カテゴリー</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



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

管理ダッシュボード
管理ダッシュボード


カテゴリー管理



管理カテゴリを作成します。


カテゴリーテーブルにboolean型のactiveカラムを追加します。
コマンド
rails g migration AddActiveToCategory active:boolean


「db\migrate\20200712031237_add_active_to_category.rb」ファイルを編集します。


記述編集 db\migrate\20200712031237_add_active_to_category.rb
3行目に「, default: true」の記述を追加しています。

class AddActiveToCategory < ActiveRecord::Migration[7.1]
  def change
    add_column :categories, :active, :boolean, default: true
  end
end



コマンド マイグレーション適用
rails db:migrate


カテゴリーの管理ビューファイルを作成します。
コマンド
rails g trestle:resource Category


「app\admin\categories_admin.rb」ファイルを以下のように編集します。


記述更新 app\admin\categories_admin.rb

Trestle.resource(:categories) do
  menu do
    item :カテゴリー, icon: "fa fa-star"
  end

  # インデックスビューに表示されるテーブルの列をカスタマイズします。
  
  table do
    column :name
    column :active
    column :created_at, align: :center
    actions do |toolbar, instance, admin|
      toolbar.link '有効化', admin.path(:activate, id: instance.id), method: :post, class: 'bg-success'
      toolbar.link '無効化', admin.path(:deactivate, id: instance.id), method: :post, class: 'bg-danger'
    end
  end

  controller do
    def activate
      cat = admin.find_instance(params)
      cat.update(active: true)

      flash[:message] = "カテゴリーが有効化されました"
      redirect_to admin.path(:show, id: cat)
    end

    def deactivate
      cat = admin.find_instance(params)
      cat.update(active: false)

      flash[:message] = "カテゴリーが無効化されました"
      redirect_to admin.path(:show, id: cat)
    end
  end

  routes do
    post :activate, on: :member
    post :deactivate, on: :member
  end

  form do |category|
    text_field :name
  end

end



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


ダッシュボードにカテゴリーが追加されました。

カテゴリー追加
カテゴリー追加



有効化と無効化を選択できるようになりました。

有効化と無効化
有効化と無効化



名前の変更や削除もできます。

カテゴリー名の変更と削除
カテゴリー名の変更と削除


ユーザー管理



ユーザ管理が出来るようにします。
「GemFile」に以下の記述を追加します。
「trestle-active_storage」はRails7.1で動作しなくなりましたので外しています。


GemFile

gem 'trestle-search', '~> 0.4.2'



インストールします。
コマンド
bundle


ユーザーテーブルにboolean型のactiveカラムを追加します。
コマンド
rails g migration AddActiveToUser active:boolean


「db\migrate\20200712035153_add_active_to_user.rb」ファイルを以下のように編集します。


記述追加 db\migrate\20200712035153_add_active_to_user.rb
3行目に「, default: true」の記述を追加しています。

class AddActiveToUser < ActiveRecord::Migration[7.1]
  def change
    add_column :users, :active, :boolean, default: true
  end
end



コマンド マイグレーション適用
rails db:migrate


ユーザー管理ビューを作成します。
コマンド
rails g trestle:resource User


「app\admin\users_admin.rb」ファイルを以下のように更新します。


記述更新 app\admin\users_admin.rb

Trestle.resource(:users) do

  menu do
    item :登録ユーザー, icon: "fa fa-user"
  end

  table do
    column :full_name
    column :email
    column :active
    column :created_at, align: :center
    actions do |toolbar, instance, admin|
      toolbar.link '有効化', admin.path(:activate, id: instance.id), method: :post, class: 'bg-success'
      toolbar.link '無効化', admin.path(:deactivate, id: instance.id), method: :post, class: 'bg-danger'
    end
  end

  controller do
    def activate
      user = admin.find_instance(params)
      user.update(active: true)
      flash[:message] = "ユーザが有効化されました"
      redirect_to admin.path(:show, id: user)
    end

    def deactivate
      user = admin.find_instance(params)
      user.update(active: false)
      flash[:message] = "ユーザが無効化されました"
      redirect_to admin.path(:show, id: user)
    end
  end

  routes do
    post :activate, on: :member
    post :deactivate, on: :member
  end
  
  form do |user|
    text_field :full_name
    text_field :email
  end

  search do |query|
    if query
      User.where("email ILIKE ? OR full_name ILIKE ?", "%#{query}%", "%#{query}%")
    else
      User.all
    end
  end

end



ブラウザ確認
http://localhost:3000/admin/users


登録ユーザの管理、検索ができるようになりました。

登録ユーザー管理
登録ユーザー管理


仕事管理



仕事の管理を行えるようにします。


コマンド
rails g trestle:resource Gig


「app\admin\gigs_admin.rb」ファイルを以下のように編集します。


記述編集 app\admin\gigs_admin.rb

Trestle.resource(:gigs) do

  menu do
    item :仕事, icon: "fa fa-address-card"
  end

  table do
    column :title
    column :active
    column :user, -> (obj) { obj.user.full_name }
    column :created_at, align: :center
    actions do |toolbar, instance, admin|
      toolbar.link '有効化', admin.path(:activate, id: instance.id), method: :post, class: 'bg-success'
      toolbar.link '無効化', admin.path(:deactivate, id: instance.id), method: :post, class: 'bg-danger'
    end
  end

  controller do
    def activate
      gig = admin.find_instance(params)
      gig.update(active: true)

      flash[:message] = "お仕事を有効化しました"
      redirect_to admin.path(:show, id: gig)
    end

    def deactivate
      gig = admin.find_instance(params)
      gig.update(active: false)

      flash[:message] = "お仕事を無効化しました"
      redirect_to admin.path(:show, id: gig)
    end
  end

  routes do
    post :activate, on: :member
    post :deactivate, on: :member
  end

end



ブラウザ確認
http://localhost:3000/admin/gigs


登録された仕事の管理ができるようになりました。

仕事の管理
仕事の管理




27 | 仕事公開】 << 【ホーム】 >> 【29 | Application Helper





↓↓クリックして頂けると励みになります。

関連記事(外部サイト)