テーマは「Flat UI」
#データベーステーブル作成
create_<テーブル名(複数形)>_table.php 作成
以下例
plugin>..>..>updates>create_users_table.php
<?php namespace <プロジェクト名>\<プラグイン名>\Updates;
use Schema;
use October\Rain\Database\Schema\Blueprint;
use October\Rain\Database\Updates\Migration;
class CreateReportsTable extends Migration
{
public function up()
{
Schema::create('<プロジェクト名>_<プラグイン名>_users', function (Blueprint $table) {
$table->engine = 'InnoDB';
$table->increments('id');
$table->string('name');
$table->string('email');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('<プロジェクト名>_<プラグイン名>_reports');
}
}
バージョン情報の追記
plugin>..>..>updates>version.yaml
1.0.1: First version of <プラグイン名>
1.0.2:
- 'create table users'
- create_users_table.php
#プラグイン作成(コマンドプロンプト)
$ cd ~\xampp\htdocs\プロジェクト名
$ php artisan create:plugin <プロジェクト名>.<プラグイン名>
$ php artisan create:model <プロジェクト名>.<プラグイン名> <モデル名>
$ php artisan create:controller <プロジェクト名>.<プラグイン名> <コントローラー名>
モデルは単数形、コントローラーは複数形にする
plugin>..>..>Plugin.php
public function registerNavigation()
{
return [
'<プラグイン名>' => [
'label' => '<バックエンドメニュー名>',
'url' => Backend::url('<プロジェクト名>/<プラグイン名>/<コントローラー名>'),
'icon' => '<好きなアイコン>',
'permissions' => ['<プロジェクト名>.<プラグイン名>.*'],
'sideMenu' => [
'<names>' => [
'label' => '名前',
'icon' => '<好きなアイコン>',
'url' => Backend::url('<プロジェクト名>/<プラグイン名>/names'),
'permissions' => ['<プロジェクト名>.<プラグイン名>.*'],
],
],
],
];
}
アイコンは、OctoberCMSが提供するものの中から選べる
#データベースのマイグレーション
$ php artisan october:up
#データベーステーブルの破棄/再作成
$ php artisan plugin:refresh <プロジェクト名>.<プラグイン名>
#コンポーネントの作成
##コマンド実行
$ php artisan create:component <プロジェクト名>.<プラグイン名> <コンポーネント名>
##コンポーネントを使えるよう値の指定
Plugin.php
registerComponents()
{
return [
'<プロジェクト名>\<プラグイン名>\Components\<>' => '<コンポーネント名>'
];
}
##バックエンドの追加
CMSで使いたいページを開く
サイドメニューの「コンポーネント」選択
追加したいコンポーネントをドラッグアンドドロップ(またはクリック)
#ロゴ変更時
themes>responsiv-flat>assets>less>layouts>all.less
header#layout-header {
.navbar-brand {
// 適宜値の追加
padding-left: 70px;
background-image: url('assets/フォルダ/フォルダ/image.png');
background-size: 100%;
background-repeat: no-repeat;
background-position: 0 50%;
}
}
ロゴに関するスタイル調整はここで行う。
#配色変更時
themes>responsiv-flat>assets>flat-ui>less>variables.less
>themes > responsiv-flat > assets > flat-ui > less > variables.less
// Color swatches
@turquoise: #1abc9c;
@green-sea: #16a085;
...