Quictyでは、Qtビルダーを使用することで、データの登録や更新、一覧などの処理を行うPHPのコードやHTMLテンプレートが自動的に生成される。
しかし、本格的なWebアプリケーションを作る場合は、生成された各コードを修正、加筆しなければならない。
ここでは、前回作成した「Myブックマーク」のファイルの配置や生成されたプログラムコードを通して、Quictyの構造を解説する。
Quictyアプリ内のフォルダ配置
前回の「QuictyによるPHP Webアプリの超高速開発-(1)はじめてのQuictyアプリ」で作成したWebアプリケーション「Myブックマーク」は、「QT」フォルダの下に生成されている。
Mac OS Xでは、「/Users/（ユーザー名）/QT/mybookmark」
Windows XPでは、「C:¥QT¥mybookmark」
となる。
「mybookmark」の下には、「bin」「etc」「htdocs」「lib」「misc」「var」「view」の7つのフォルダができている。
Mac OS Xの場合
Windows XPの場合
各フォルダの役割は以下のようになっている。
各フォルダの役割
| bin | 初期化やバックグランドで定期実行するコマンドラインプログラムを配置する。 |
| etc | 設定ファイル。アプリの設定や、データセットの設定ファイルが配置される。 |
| htdocs | このアプリのDocumentRoot。画像やJavaScript、CSSなどはこの下に配置する。 |
| lib | PHPのクラスモジュール。各ページごとのクラスモジュールが配置される。 |
| misc | 各種データなどの置き場。 |
| var | Webサーバが読み書きするデータ。SQLiteのデータベースファイルや、Smartyのコンパイル済みテンプレートやキャッシュなど。 |
| view | 表示テンプレート。index.htmlなど、各ページごとのテンプレートや、共通部品（include）のテンプレートが配置される。テンプレートはHTML内にSmartyの命令を埋め込んである。 |
なお、より詳細なフォルダ配置については、このページの最後でツリー構造を解説している。
ページクラスモジュールとHTMLテンプレート
一番重要なのは、libとviewだ。lib内のページクラスモジュールがview内のHTMLテンプレートを使って、各ページを表示する。
「Myブックマーク」は、トップページ（＝index.html）のみのシンプルなアプリケーションだ。このindex.htmlを表示するために、以下のページクラスモジュールと、HTMLテンプレートが使用されている。
| ページクラスモジュール | lib/Pages/index.class.php |
| HTMLテンプレート | view/index.html |
もし、トップページ以外に、「page_1」というページを作ると、以下のようになる。
| ページクラスモジュール | lib/Pages/page_1.class.php |
| HTMLテンプレート | view/page_1/index.html |
ページクラスモジュールは、「ページ名.class.php」に、HTMLテンプレートは「ページ名/index.html」というようにページ名というフォルダの中にindex.htmlが作られる。
シングルページとマルチページ
「Myブックマーク」は、データの登録、更新、一覧などをすべてひとつのindex.htmlで行った。これを「マスタメンテ/シングルページ」モードと呼ぶ。
これに対して、データの登録、更新、削除などを行うフォーム用のページと、各データの一覧を表示する一覧ページを分けたい場合もある。この場合は「マスタメンテ/マルチページ」モードを使う。その場合は、以下のようになる。
「マスタメンテ/マルチページ」モードにおける、HTMLテンプレートの配置
| ページクラスモジュール | lib/Pages/page_1.class.php | - |
| データの一覧 | view/page_1/index.html | 必須 |
| データ1件の詳細表示 | view/page_1/info.html | 存在しない場合はindex.htmlが使用される |
| データの1件の編集、更新 | view/page_1/edit.html | 存在しない場合はinfo.htmlが使用される |
| 新規データ1件の登録 | view/page_1/add.html | 存在しない場合はedit.htmlが使用される |
| データ1件の削除 | view/page_1/delete.html | 存在しない場合はedit.htmlが使用される |
ページクラスモジュールとアクション
Quictyアプリ内のあるページのURLが呼び出されると、それに応じたページクラスモジュールが自動的に選ばれ、さらにページクラス内の「アクション」が実行される。
「アクション」はPHPのメソッド（function）だ。index.htmlを表示するアクションは以下のような形で記述する。
———————————————————————————-
<?php
require_once ‘index_classes/_base.class.php'; //← 補助クラスの読み込み
class index extends index_base { //← ページクラスモジュールの開始
function dispatch_index() { //←アクションの開始
/* ここに処理を記述 */
return $this->display($this->current_template); //←HTMLテンプレートの表示
} //← アクションの終了
} // end of index class //← ページクラスモジュールの終了
?>
———————————————————————————-
上記の「dispatch_index()」のように、アクションメソッドは「dispatch_アクション名」というfunction名になる。
仮に「myapp」というアプリに「restaurant」というページクラスがあったとき、URLと起動されるクラスとアクションとテンプレートの関係は以下のようになる。
| URL | ページクラスモジュール | クラス名 | アクション名 | アクションメソッド | デフォルトHTMLテンプレート |
| http://myapp/restaurant/index.html | lib/Pages/
restaurant.class.php |
restaurant | index（一覧） | dispatch_index | index.html |
| http://myapp/restaurant/add.html | lib/Pages/
restaurant.class.php |
restaurant | add（登録） | dispatch_add | add.html |
| http://myapp/restaurant/info.html?id=1 | lib/Pages/
restaurant.class.php |
restaurant | info（詳細表示） | dispatch_info | info.html |
| http://myapp/restaurant/edit.html?id=1 | lib/Pages/
restaurant.class.php |
restaurant | edit（更新） | dispatch_edit | edit.html |
ページクラスモジュールの中身
前回作成した「Myブックマーク」アプリの場合、lib/Pages/index.class.phpのプログラムコードは以下のようになっている。
———————————————————————————-
<?php
require_once ‘index_classes/_base.class.php';
class index extends index_base {
function dispatch_index() {
$this->assign_search_form(); //←検索窓の実体をHTMLテンプレートに割り当て
$result = $this->display_record(‘’); //←フォームの表示準備とフォームから投稿された
//データの処理を行う標準メソッド。
switch($this->QuictyStatus) {
case ‘INSERT’:
case ‘UPDATE’:
case ‘DELETE’:
redirect(‘/‘); //←フォームへの登録 or 更新 or 削除がされたら
//トップページへリダイレクト。
case ‘BROWSE’:
case ‘EDIT’:
case ‘INSERT_CONFIRM’:
case ‘UPDATE_CONFIRM’:
case ‘DELETE_CONFIRM’:
break;
}
$this->assign_form(‘input_form’,$this->form); //←登録/更新フォームの実体をテンプレート変数
//「input_form」に割り当て。
$list_table = $this->list_records(‘’); //←一覧表示用データを取得。
$this->assign(‘table_view’,$this->list->display_table_value($list_table)); //←データ一覧の実体を
//テンプレート変数「table_view」に割り当て。
$this->assign(‘display_cmd’,’info’); //←一覧内の行がクリックされたときは「info.html」で表示。
$this->page[‘pager’] = $this->set_pager(); //←一覧表示のページめくり（ページャー）を
//テンプレート変数「page[’pager‘]」に割り当て。
$this->assign_page_and_pathlist($this->W[‘bookmark’]); //←パンクズやページ内の細かい部品を
//テンプレート変数「page」に割り当て。
return $this->display($this->current_template); //←HTMLテンプレートの表示
}
} // end of index class
?>
————————————————-
dispatch_index()の処理は主に、「input_form」、「table_view」、「page」という3つのテンプレート変数にデータを割り当て、最後にテンプレートをWebブラウザに対して表示するというものだ。
HTMLテンプレートの中身
dispatch_index()によって表示される「index.html」の中身を見てみよう。こちらは、HTMLファイルの中にSmartyのテンプレート変数やテンプレート関数を埋め込んだモノだ。
実際にはSmartyのinclude関数を使って小さな部品テンプレートを読み込んでいるだけで、実際の表示処理は、部品テンプレート内で行われている。
Quictyでは、多数の部品テンプレートを標準で提供しており、それらを使うだけで、ひととおりの機能を実現できる。
————————————————-
{include file=’includes/common/head.inc’} // ← HTMLのheadセクションの表示
<body id=”{$page.id}” class=”{$page.class}”>
<div id=”site-id”>
{include file=’includes/common/site_id.inc’} // ← サイトのタイトル部の表示
<div id=”global-nav”>
{include file=’includes/nav/auto_global_nav.inc’} // ← グローバルナビゲーションの表示
</div>
<div id=”information-block”>
{include file=’includes/nav/auto_topic_path.inc’} // ← パンクズの表示
</div>
<div id=”contents-id”>
{include file=’includes/common/contents_id.inc’} // ← ページタイトルの表示
</div>
<!– Main Contents–>
<div id=”contents-main”>
{include file=’includes/common/auto_search_form.inc’} //← 検索窓の表示
{*include file=’includes/bookmark/search_form.inc’*}
{include file=’includes/common/auto_table_view.inc’} // ← 変数「table_view」を一覧テーブルに表示
{*include file=’includes/bookmark/table_view.inc’*}
{include file=’includes/common/auto_pager.inc’} // ← 一覧テーブルのページャーの表示
{include file=’includes/common/form_header_single.inc’} // ← フォームのタイトルの表示
{include file=’includes/common/messages.inc’} // ← システムメッセージの表示
{include file=’includes/common/auto_input_form.inc’} // ← 変数「input_form」をフォームに表示
{*include file=’includes/bookmark/input_form.inc’*}
</div>
<!– End of id=”contents-main” –>
<!– Navigation –>
<div id=”nav”>
{include file=’includes/nav/nav.inc’} // ← 右カラム（ナビゲーション）の表示
</div>
<!– End of id=”nav” –>
<div id=”site-info”>
{include file=’includes/common/site_info.inc’} // ← フッタ部の表示
</div>
</body>
</html>
————————————————-
ページクラスモジュール内で割り当てられた「table_view」変数の中身は「auto_table_view.inc」によって一覧表示される。
また、「input_form」変数の中身は「auto_input_form.inc」によってフォームとして表示される。
「auto_table_view.inc」や「auto_input_form.inc」は、変数内容を自動的に一覧表やフォームに表示してくれるので大変便利だが、細かい表示の調整がきかない。
表示を細かく指定したいときは、Qtビルダーで各データセット専用の「table_view.inc」や「input_form.inc」を生成し、それをテキストエディタで編集する。
＊付録＊ Quictyアプリケーションのフォルダ配置
以上。
