3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

OctoberCMS管理画面にリソースのCRUD的な管理画面を作る

Last updated at Posted at 2017-05-07

OctoberCMSの管理画面でリソースの作成・閲覧・編集・削除などを行う画面の作成方法を説明する。ここでは長々と説明しているが、手順がわかってしまえば非常に簡単に作成できる。

スキャフォールディングでも必要なソースコードの雛形を作成できるが、
Builderプラグインを使用した方が必要なものをまとめて作成できるので遥かに楽。
Builderを使用しても余計なファイルやはデータは作成されないのでプロジェクトを汚す心配なく利用できる。
もちろん、Builderで作成したプラグインでも、Builderがなくても動作する。
(作成されるファイルのオーナーがWebサーバユーザになってしまうので、都度権限を修正するのが面倒だが、そこは環境に応じて工夫すればなんとかなる。)

Builderプラグインをインストール

Builderプラグインは管理画面の設定からインストールしても良いが、プロジェクトのcomposer.jsonに記述しておくとチームで開発する際の管理が楽だ。(プラグインのcomposer.jsonではないので注意)
Builderプラグインは本番サーバへのデプロイは必要ないといのでrequire-devに追加する。

composer require --dev rainlab/builder-plugin

プラグインを作成、またはロード

新規プラグインを作成する場合

対象のプラグインがまだなければ作成する。

builder_1.png builder_2.png

既存プラグインを使用する場合

既存プラグインをBuilderに認識させるには、基本的にはプラグインのルートにplugin.yamlを下記フォーマットで作成するだけだ。

plugin.yaml
plugin:
    name: 'My Plugin'
    description: 'My practice plugin'
    author: pikanji
    icon: oc-icon-bicycle
    homepage: 'http://hogehoge.com/'

間違って拡張子を.ymlにすると認識されないので注意。自分はこれにハマったw

そして、Builderに読み込ませる。

builder_3.png

DBテーブルを作成

Builderの"Database"メニューで"+Add"して、UIで項目を設定し保存すると、
plugins/<auther_name>/<plugin_name>/updatesにマイグレーションファイルが作成される。
テーブルスキーマの定義は、BuilderのUIからだと少し融通がきかないので、Laravelのドキュメントを見ながらコードを手書きした方がいい。

マイグレーションの適用はBuilderの"Versions"メニューから管理できる。
ここからだとバージョンを選んでプラグイン毎に適用とロールバックが行える。

モデルの作成

Builderの"Models"メニューから作成するプラグインのDBに存在するテーブルを選んでモデルファイルの雛形を作成できる。

作成されるとメニューに"Forms"と"Lists"が現れるが、
"Forms"はこのテーブルのデータ作成と編集のための入力フォームのことで、"Lists"はデータをリスト表示する際の表示項目を定義するものだ。

管理画面の作成・編集フォームとリストの作成

上記「モデル作成」で言及した"Forms"と"Lists"を作成する。
それぞれ"Forms"と"Lists"の右にある"+"をクリックすることでUIが表示されるので、項目を入力して保存する。
作成画面は見れば使い方は分かるはずなので説明は省略する。
設定ファイルはplugins/<auther_name>/<plugin_name>/models/<table_name>に作成される。

なお、"Label"は文字列の直設定もできるが、"+"から言語ファイルに作成してキーで指定することもできる。言語切替に対応しているということだ。

管理画面メニューの作成

上記で作成した画面にアクセスするには管理画面にメニューが必要だ。
Builderの"Backend menu"から、"Add main menu item"をクリックして、管理画面上に追加されるメインメニューを追加する。
追加されたアイテムをクリックすると詳細を設定できる。
ここでは最低限"Code"を設定する。URLはまだ無いので/のままでよい。後で戻ってきて設定する。

コントローラの作成

MVCのCの作成だ。ただ、OctoberCRMの管理画面ではコントローラを作成することで、ルーティングの設定無しでURLエンドポイントが作成されるので、ここではエンドポイントの作成の意味合いのほうが強い。

Builderの"Controller"メニューから"+Add"で追加する。

"Controller name"はコントローラのクラス名とURLを定義することになる。
複数単語からなるテーブル用のコントローラなら下記の例の様でよいだろう。
テーブル名:product_types -> コントローラ名:ProductType

そして、対応するモデルとメニューを選択する。

Behaviorについてはここでは割愛するが、とりあえず全て選択しておけば良い。

メニューにURLを設定

コントローラができたらメニューにそのURLを設定して画面を開けるようにする。

Builderの"Backend menu"から作成済みのメニューをクリックし、
URLに<author_name>/<plugin_name>/<controller_name>を入力する。
このURLはリソースのデフォルトページで、デフォルトではリストページになっている。

以上で、最低限のリソース管理ページが出来上がりだ。
これだけで、リソースの作成・閲覧・編集・削除が可能だ。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?