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 bake

DBの接続情報を作る

(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
        .htaccess

index.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をいじってカスタマイズする記事を

書きたかったのですが、今、高熱出してまして続きが書けませんでした。。

もうむりっす。。ごめんなさい。

さてさて、残すは青さんかな（笑

為せば成るとはいうものの、またですか？またですね。

2012年12月7日金曜日