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

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

【学習6.0】【MacOSX】ダッシュボード(trestle)

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


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


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

Trestle.admin(:dashboard) do
    menu do
        item :ダッシュボード, icon: "fa fa-tachometer"
    end
    controller do 
        def index
            @user_count = User.count()
            @project_count = Project.count()
            @task_count = Task.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><%= @project_count %></h1>
                        <p>プロジェクト</p>
                    </div>
                </div>
                <div class="col-md-3 bg-success">
                    <div class="card text-white text-center">
                        <h1><%= @task_count %></h1>
                        <p>タスク</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



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

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


関連記事(外部サイト)