BanchaとBanchaScaffoldを利用した簡単なCRUD実装のまとめ
この記事は、Sencha Advent Calendar 2012
の7日目の記事です。
皆さんも是非、是非、参加してください。後半、まだまだ参加枠ありますよ！！そこのあなた！！
数カ月前にBanchaを試した時の備忘録を残してあったんですが、
一つのテーブルに対するCRUD実装を通して--
Scaffoldを利用するまでをまとめて紹介してみます。
ほとんど過去の備忘録の焼き直しですけど、、
Banchaってなんだろうか
- PHPのフレームワークであるCakePHP2.0に対応したExtJs用のプラグイン
- ExtDirect用のモデル（Proxy設定含む）を生成してくれる
というのが主なところだと思います。
ExtDirectについては@martini3ozさんのブログでわかりやすい
解説がされているのでそちらを参照して下さい。
他にExtDirectに対応するPHPフレームワークだと株式会社ゼノフィが
作成しているxFrameworkPXがあります。
Directについて理解を深めたいのであればそちらを利用し、コードを
眺めてみると仕組みを深く理解できると思います。サーバサイドはCake2.Xで組みたい。
フロントエンドはExtJs作りこみたい。
ExtJsDirectを気軽に使いたい。
そんな方にはオススメできるかもしれません。
BanchaScaffoldってなんだろうか
ExtJsにおけるデータの入出力の基本的な機能として、Grid、Formがあります。
ともに、ExtDirectを利用する際には、Model(Proxy含む)やStoreを設定したり、
サーバサイドのメソッド名を設定する必要があります。
このあたりを吸収して、「ある程度」の雛形を提供してくれるのが
BanchaScaffoldです。
Grid、Formをオーバーライドして特定のパラメータに
反応するように作成されています。
ですので構造さえ知ってしまえば細かな変更などができると思うので
便利な機能になるんじゃないかと思っています。
Banchaの情報
http://banchaproject.org/resources.html
このページがすべてのリソースが集約されててお勧めかもです。
CRUD実装の大きな流れ
このお話の大きな流れは、
１：Cake2.Xの準備
２：ExtJsの準備
３：MySQLの準備
４：Banchaの準備
５：Bakeの実行
６：Scaffoldの利用
７：動作確認
になります。
前提
MAMPでUserDir配下で試してます。
今回は最新版を試している時間がないので、以前試したことのある
* Bancha1.0.0
* BanchaScaffold0.5.6
* Cake2.1.5
* ExtJs4.1.1a
の組み合わせでお話をすすめます。
今日(2012/12/7)現在、Banchaは1.2.3がBanchaScaffoldは0.6.0が最新のようです。
CakeのDispacharの実装が2.1系と2.2系で異なるため、BanchaとCakeの組み合わせには
注意が必要です。１：Cake2.0の準備
ユーザディレクトリの配置
私の場合、ユーザ配下のUserDirがユーザディレクトリのルートになっているので
その下にadventcalendarとでも作っておきましょう。
[ユーザ]/UserDir/adventcalendar で、ルートを public_html としてあるので、それも作っておきます。
[ユーザ]/UserDir/adventcalendar/public_html Cake2.XのDL
2.1.5をDLしてきます。
過去分なので、githubからタグされたバージョンで持ってきちゃいました。
こちらから。
解凍して public_html 配下にまるっとコピーしておきます。
▾ public_html/
▸ app/
▸ lib/
▸ plugins/
▸ vendors/
.gitignore
.htaccess
.travis.yml
build.properties
build.xml
index.php
READMEユーザディレクトリ使ってるのでCakeの階層にしたがってRewriteBaseしてあげます。
このあたりはご利用になっている環境にあわせて適宜に設定してみて下さい。
過去の備忘録
saltとseedの設定もしておきましょね。２：ExtJsの準備
ExtJs4.1.1aのDL
ExtJsをDLしてきます。
解凍して適宜に配置します。
ExtJSのスタートアップはゼノフィの技術情報ページや
@martini3ozさんのページ、
本家のチュートリアルを参照することをおすすめします。 今回は public_html/app/webroot 配下に ext として配置しました。
▾ public_html/
▾ app/
▸ Config/
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~
▸ View/
▾ webroot/
▸ css/
▸ ext/ <--ここ
▸ files/
▸ img/
▸ js/
.htaccess
favicon.ico
index.php
test.php
.htaccess
index.php
▸ lib/
▸ plugins/
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~設置用のindex.htmlの配置
MVC構成にするわけじゃなくて単なる表示確認です。
とりあえずパスが通ってることだけ確認しておきます。
▾ public_html/
▾ app/
▸ Config/
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~
▸ View/
▾ webroot/
▸ css/
▸ ext/
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~
▸ files/
▸ img/
▸ js/
.htaccess
bancha.php
favicon.ico
index.html <--ここ
index.php
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~404が出てないことだけ確認しておきましょ。
設置用のindex.htmlの内容
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title id="page-title">adventcalendar</title>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css"/>
<script type="text/javascript" charset="utf-8" src="./ext/ext-all.js"></script>
</head>
<body>
<p>hoge</p>
</body>
</html>３：MySQLの準備
DB、テーブル作成
次にDBを作ってMySQLにサンプル用のテーブルを作ってみましょう。
DB名：adventcalendar
CREATE TABLE `calender` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`date` date NOT NULL,
`acount` varchar(255) NOT NULL,
`comment` text NOT NULL,
`created` date NOT NULL,
`modified` date NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;こんな具合でしょうか。
Cakeへの設定
Cakeに利用するDB情報を設定します。
/app/Config/.database.php.defaultがあるので
/app/Config/.database.php
とコピーしてから、中身を書き換えます。
public $default = array(
'datasource' => 'Database/Mysql',
'persistent' => false,
'host' => 'localhost',
'login' => '*****',
'password' => '*****',
'database' => 'adventcalendar',
'encoding' => 'utf8',
);▾ public_html/
▾ app/
▾ Config/
▸ Schema/
acl.ini.php
acl.php
bootstrap.php
core.php
database.php <-- ここ
database.php.default４：Banchaの準備
Bancha1.0.0をDLしてきます。
過去分なので、githubからタグされたバージョンで持ってきます。
こちらから。
Banchaの設置
解凍して public_html/app/Plugin/Bancha に配置します。
▾ public_html/
▾ app/
▸ Config/
~~~~~~~~~~~~~~~
略
~~~~~~~~~~~~~~~
▸ Model/
▾ Plugin/
▾ Bancha/ <--ここ
▸ _app/
▸ Config/
~~~~~~~~~~~~~~~
略
~~~~~~~~~~~~~~~
▸ Test/
▸ tmp/
~~~~~~~~~~~~~~~
略
~~~~~~~~~~~~~~~プラグインの設定
プラグインの設定はこちらを参考に行います。
/public_html/app/Config/bootstrap.phpに
CakePlugin::load(array('Bancha' => array('routes' => true, 'bootstrap' => true)));/publichtml/app/Plugin/Bancha/app/webroot/bancha.php
を
/public_html/app/webroot/bancha.php
にコピー。
public_html/app/Config/core.phpに
/**
* Configure the cache for Banchas Remote API.
*/
Cache::config('_bancha_api_', array(
'engine' => $engine,
'prefix' => $prefix . 'bancha_api_',
'path' => CACHE . 'models' . DS,
'serialize' => ($engine === 'File'),
'duration' => $duration
));を追記。
確認
設定がうまく行っているか確認します。
http://localhost/~adventcalendar/Bancha/setup-check.htmlこんな具合になればOKです。
 |
| bancha疎通確認 |
５：Bakeの実行
ここまで来るとあとは実装が残るだけとなります。
Bakeというバッチを使用してCakePHPのModel,Contollerを作成します。
長くなってしまうので省略しますが、ヤルことは
こちらとほぼ一緒です。
コンソールからappフォルダ配下に移動してbakeを実行します。
cd UserDir/public_html/app
./Console/cake bakeDBの接続情報を作る
(cake設定時に作成しているのであればここでは作らなくてもOK)Modelを作る[M]
(作ったあとに、モデルに下記[<--ここ]を追加して下さい。これによりモデルが公開されることになります。）
Calendar.php
<?php
App::uses('AppModel', 'Model');
/**
* Calendar Model
*
*/
class Calendar extends AppModel {
/**
* Bancha behaviour
*/
public $actsAs = array('Bancha.BanchaRemotable'); <-- ここ
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~Controllerを作る[C]
(Would you like to create some basic class methods
(index(), add(), view(), edit())? (y/n)
と聞かれた時に「ｙ」として下さい。)
(templateの選択を問われますので「bancha」を選択して下さい）▾ public_html/
▾ app/
▸ Config/
▸ Console/
▾ Controller/
▸ Component/
AppController.php
CalendarsController.php <--ここ
ContollersController.php
PagesController.php
▸ Lib/
▸ Locale/
▾ Model/
▸ Behavior/
▸ Datasource/
AppModel.php
Calendar.php <--ここ
▸ Plugin/
▸ Test/
▸ tmp/
▸ Vendor/
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~ここまででサーバサイドの設定などの準備は完了です。
６：Scaffoldの利用
Scaffoldの準備
ScaffoldをDLしてきます(0.5.6)。
webroot配下に設置しました。
▾ public_html/
▾ app/
▸ Config/
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~
▸ View/
▾ webroot/
▾ bancha/ <-- ここの配下のこと
bancha-scaffold-debug.js*
bancha-scaffold-production.js*
bancha-scaffold.js*
▸ css/
▸ ext/
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~Extjsの準備
MVC構成としてのフォルダ配置をしておきます。
フォルダ構成の話とかだと、、手っ取り早いのは
ゼノフィの技術者ブログか
ExtJsのサンプル:
public_html/app/webroot/ext/examples/MVC/pandora/
を持ってきてもいいかと思います。ちょっとここは省略。
▾ public_html/
▾ app/
▸ Config/
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~
▾ webroot/
▸ css/
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~
▾ js/
▾ app/ <--ここの配下のことです。
▾ controller/
▾ model/
▾ store/
▸ view/
app.js
empty
.htaccessindex.htmlへの準備
Banchaを利用するため
- Bancha.jsを読み込みます
- bancha-api.jsを読み込みます
BanchaScaffoldを利用するため
- bancha-scaffold.jsを読みます
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title id="page-title">adventcalendar</title>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css"/>
<script type="text/javascript" charset="utf-8" src="./ext/ext-all.js"></script>
<!-- include Bancha and the remote API -->
<script type="text/javascript" charset="utf-8" src="Bancha/js/Bancha.js"></script> <--ここ
<script type="text/javascript" charset="utf-8" src="bancha-api.js"></script> <--ここ
<!-- include Bancha and the remote API -->
<script type="text/javascript" charset="utf-8" src="bancha/bancha-scaffold.js"></script><--ここ
<script type="text/javascript" charset="utf-8" src="bancha-api.js"></script>
<script type="text/javascript" src="./js/app/app.js"></script>
</head>
<body>
</body>
</html>いよいよScaffoldを利用します
Calendar用のGridを一つ作成します。
Calendargrid.js
Ext.define('ADV.view.Calendargrid', {
extend : 'Ext.grid.Panel',
alias : 'widget.calendargrid',
scaffold :'Bancha.model.Calendar' <-- ここがみそ。
});Viewportに設置します。
Viewport.js
Ext.define('ADV.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'ADV.view.Calendargrid',
],
initComponent: function() {
this.items = [{
xtype:'calendargrid'
}];
this.callParent();
}
});CSSファイル作って削除用ボタンのパスを通しておきます。
style.css
.icon-add{
background-image: url(../icons/add.png) !important;
}
.icon-delete{
background-image: url(../icons/delete.png) !important;
}
.icon-save{
background-image: url(../icons/disk.png) !important;
}
.icon-reset{
background-image: url(../icons/arrow_undo.png) !important;
}index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title id="page-title">adventcalendar</title>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="./js/resources/css/style.css"/> <--ここ
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~あと、Grid内のactioncolumnの画像はパス指定になっているので
それも変更します。（Installationに載ってました。。）
app.js
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext': './ext/src',
'ADV': './js/app'
}
});
Bancha.onModelReady([
// ここにモデル名指定
'Calendar'
],function(){
// {{{ Ext.application
Ext.application({
name: 'ADV',
appFolder: './js/app',
autoCreateViewport: true,
launch: function() {
alert('app launch!!');
}
});
});
Bancha.scaffold.Grid.destroyButtonConfig.items[0].icon =
'./js/resources/icons/delete.png';▾ public_html/
▾ app/
▸ Config/
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~
▸ View/
▾ webroot/
▸ bancha/
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~
▾ js/
▾ app/
▸ controller/
▸ model/
▸ store/
▾ view/
Calendargrid.js <-- ここ
Viewport.js <-- ここ
app.js <-- ここ
▾ resources/
▾ css/
style.css <-- ここ
▾ icons/ <-- ここ
add.png
arrow_undo.png
delete.png
disk.png
empty
.htaccess
bancha.php
favicon.ico
index.html <-- ここ
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~７：確認
こんな感じになると思います。
 |
| 実行画面 |
画面はまだ簡素ですが、
これでサーバとの通信ができることになります。
とっても単純なCRUD実装ですが、
独自のカスタマイズができるように
基底クラスを作成できれば使いやすくなりますね。
scaffoldはformにも対応しているので
さっと作りたいときなどは重宝するのではないでしょうか。
あとは慣れてきたら
APIドキュメント見ながらソースと照らし合わせながら
遊んでみると面白いと思います。。
http://scaffold.banchaproject.org/
http://scaffold.banchaproject.org/docs/#
駆け足でしたが
こんな具合でBanchaはお手軽に導入できます。
っということで@martini3ozさんからのフリがあったのでつないでみました。
このBanchaは先の@marini3ozさんの記事、Proxyについてを
読んでからみるとなかなかおもしろいと思います。
ほんとは、このあとBanchaScaffoldをいじってカスタマイズする記事を
書きたかったのですが、今、高熱出してまして続きが書けませんでした。。
もうむりっす。。 ごめんなさい。
さてさて、残すは青さんかな（笑
