FuelPHP,AdminLTE,Chart.jsで管理画面的なものを作る[1]雰囲気作り

雰囲気作りといえば、これですね。

いろいろアレなことがあり、FuelPHP,AdminLTE,Chart.jsでサービスの管理画面的なものを作ろうと思います。
具体的にはもろもろの指標をグラフとかで表示する感じです。

今のとこのイメージは
・各指標でグラフで表示
・期間変更をajaxで反映
・グラフをマウスオーバーすれば、詳細な表示が見れる
・比較する指標、期間を重ねて表示
あたりを考えています。

まずは環境作りから。

FuelPHPインストール

インストール方法 - インストール - FuelPHP ドキュメント
ドキュメントにある通り、単純にclone

プロジェクトのディレクトリはadminでいこうと思います

$ cd PROJECT_DIR/admin
$ git clone git://github.com/fuel/fuel.git .
$ ./composer.phar update

Chart.js導入

nnnick/Chart.js · GitHub
上記からDownload ZIPし、中に入っているChart.jsを先ほどのFuelPHPのpublicの下に置きます。
今回は下記のように置いてみました。

public/assets/js/lib/Chart.js

AdminLTE導入

AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
AdminLTEは管理画面向きのbootstrapになります。

こちらも下記からDownload ZIP。

almasaeed2010/AdminLTE · GitHub

中に入っているcss,img.jsをそれぞれ下記のように設置しました。
とりあえずlibの下に。
imgはとりあえずimg直下にそのままコピー。必要あり次第変更で。

js

public/assets/js/lib/
├── AdminLTE
├── Chart.js
├── bootstrap-slider
├── bootstrap-wysihtml5
├── colorpicker
├── datatables
├── datepicker
├── daterangepicker
├── flot
├── iCheck
├── input-mask
├── ionslider
├── jqueryKnob
├── jvectormap
├── misc
├── morris
├── slimScroll
├── sparkline
└── timepicker

public/assets/js/lib/AdminLTE/
├── app.js
├── dashboard.js
└── demo.js

css

public/assets/css/lib/AdminLTE
├── AdminLTE.css
├── bootstrap-slider
├── bootstrap-wysihtml5
├── colorpicker
├── datatables
├── datepicker
├── daterangepicker
├── iCheck
├── images
├── ionslider
├── jvectormap
├── morris
└── timepicker

AdminLTEのサンプルを表示させてみる

ここまできたので、AdminLTEのサンプルページをFuelPHPで表示させてみます。

とりあえずfuel/app/classes/controller/admin.phpをつくり下記のように
fuel/app/views/admin/index.phpを表示するよう。

class Controller_Admin extends Controller
{
	public function action_index()
	{
		return Response::forge(View::forge('admin/index'));
	}
}

でfuel/app/views/admin/index.phpは、解凍したAdminLTEの直下にあるindex.htmlをコピーします。

合わせてcss,js,imgのパスを変更します。
css,js,imgは下記のようにassetクラスを使ったものに変更
Asset 使い方 - クラス - FuelPHP ドキュメント

<?php echo Asset::css('lib/AdminLTE/morris/morris.css'); ?>
<?php echo Asset::js('lib/morris/morris.min.js'); ?>
<?php echo Asset::img('avatar3.png', array('id' => 'logo', 'class' => 'img-circle', 'alt' => 'User Image')); ?>

こちらでひとまず、AdminLTEのサンプルページをFuelPHPで表示することができました。

次回は、実際にDBからデータ取得し、グラフ表示をしていきたいと思います。

感謝致します。