Mapleを利用した掲示板作成 http://www.ark-web.jp/sandbox/wiki/182.html

Mapleを利用した掲示板作成

11月から入社した小沼です。現在研修中でPHPの勉強をしています。
PHPのフレームワークであるMapleと、javascriptのライブラリであるprototype.jsを利用し、掲示板を作成しました。
そこで得たノウハウなどをここに記述していきます。

なおシステム構成など設計情報はこちらに記述してあります。

[edit]

目次

[edit]

完成品

Maple+Ajax掲示板

[edit]

Mapleのインストールについて

[edit]

インストール方法

インストールの方法は以下の2種類があります。詳細はリンク先を参照してください。

[edit]

テンプレートエンジンが必要

インストールを行うためには、テンプレートエンジンのSmartyかHTML_Template_Flexyが必要です。どちらかがインストールされていないと、Mapleが動作しないどころか、Mapleのインストールすらできません。

[edit]

開発

[edit]

Mapleコマンド

Mapleの開発においてはMapleコマンドを使用します。

$maple webapp
$maple action ...

といった形です。実行すると、雛形となるディレクトリとファイルが自動生成されます。
自動生成されたファイルは、それ自体ですでに実行可能な状態となっていますが、中身の処理が何も記述されていません。それぞれの要件にあった形に処理を記述していくことになります。
Ruby On Railsにおけるrailsコマンドみたいなものだと思います。

[edit]

画面とアクション間でのデータの受け渡し方法について

テンプレート(画面)からアクションクラス(moduleディレクトリ以下にできるクラス)のメンバ変数にアクセスすることができます。
アクションクラスに以下のような記述をおこなうと、

class Hoge
{
    var $val1;

    function execute(){

        return 'success';
    }

}

テンプレート画面からは以下のように記述することで、値を取得できます。

<input type="text" name="" value="{$action.val1}">

逆に、画面でサブミットした値をアクションクラスで取得するためには、テンプレート画面に以下のように記述します。

<input type="text" name="val1" value="">

すると、アクションクラスのval1というメンバ変数に、サブミットされた値が設定されます。

[edit]

アクションチェーンについて

アクションチェーンというのは複数のアクションを連続して実行することです。
例えば、今回作った掲示板では、新規投稿を行ったときに以下の二つのアクションをチェーンさせています。

方法としては、チェーン元のアクションの遷移先に、チェーン先のアクションを設定するだけです。

今回作った例では、submitアクションと同階層にあるmaple.iniを以下のように記述しました。

[View]
success = "action:display
 

以前どこかでアクションチェーンはあまり使用しないほうがいいという記述を呼んだ記憶があります(確かStrutsインアクション)。理由としては、

ということだったと思います。
個人的にはアクションチェーンが有効な場合もあると思います。しかし上のような観点もあるということで、チェーンで実装する前に、本当にそうするのが最善か、ロジックが適切に分割できていないのではないか、ということをもう一度検討した方が宵良いのかもしれません。

 

※個人的なことですが、私はアクションチェーンを実装している最中以下のエラーに苦しみました。

Cannot redeclare class db

「DBクラスを再定義できません」ということでしょうか。
結局require('DB.php')とやっている箇所をrequire_once('DB.php')とすることで直りました。
アクションチェーンを使ったことで、一回の動作の中で2回require('DB.php')がおこなわれるようになったことが原因と思われます。
requrieの存在価値がいまいち分かりません。外部ライブラリが必要になったら常にrequire_onceしたほうが安全じゃないでしょうか?

[edit]

入力チェックについて

入力項目に対しておこなうチェックもmaple.iniに記述します。
今回の掲示板では新規投稿時に、必須チェックを行うように設定しました。
maple.iniの内容です。

[Validate]
name.required = "1,name is required"
message.required = "1, message is required"

nameやmessageと書かれているところが、入力チェック対象の項目です。これは画面上入力項目のname属性と対応します。
次のrequiredと書かれているのが、チェック方法です。requiredの他に、maxLengthやdateなどがあります。
1と書かれているところはストッパーです。1のほかに0が指定できます。ストッパーが1になっている入力チェックに引っかかった場合、以降のその項目に対する入力チェックをおこないません。

name is requiredとなっているところはエラーメッセージです。
エラーメッセージは以下のように記述することで、画面に表示させることができます。

{errorList->getMessages assign=messages}
{foreach from=$messages|smarty:nodefaults item=message}
<font color="#ff0000">{$message}</font><br>
{/foreach}

入力チェックについての詳細はここを参照してください。

必須チェック以外にもmaxlenghtのチェックなどいろいろあるようです。またValidateアクションを拡張することで、新しい入力チェックをカスタマイズすることもできるようです。

[edit]

Ajaxについて

今回の研修ではページング部分(前のページや次のページに移動する機能)にAjaxを使用しました。Ajax()の開発においてはその名称の通りjavascriptが中心となります。ここに全てのjavascriptソースを引用します。

function getArticles(page_num) {

    new Ajax.Updater(
        "list",
        "index.php",
        {
            method: "get",
            parameters: "action=articles_display&page_num=" + page_num
        }
    );
}

今回のjavascriptの中で中心となる関数です。
ページ番号を引数に取り、サーバにリクエストを発行し、その結果(該当するページのHTML)を取得し画面に表示します。
prototype.jsのAjax.Updaterを使用しています。

function getNextArticles() {
    getArticles(getPageNum() + 1);
}

「次へ」ボタンが押されたときに呼ばれる関数です。
現在のページ番号に1を加えた値でgetArticles()を呼び出しています。

function getPrevArticles() {
    getArticles(getPageNum() - 1);
}

「前へ」ボタンが押されたときに呼ばれる関数です。
現在のページ番号に1を引いた値でgetArticles()を呼び出しています。

function getPageNum() {
    return new Number($F('page_num'));
}

ページ番号を取得する関数です。
prototype.jsに定義されている関数$F()を使用して、画面上のidが"page_num"である要素の値を取得しています。

[edit]

参考資料

[edit]

勉強会

この研修で学んだ内容を元に社内で勉強会を開きました。
その時に使用したレジュメが下記のページです。
勉強会/MapleとAjaxを使用した掲示板

tag: PHP, Maple, Ajax, JavaScript, prototype.js, MVCフレームワーク


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2006-12-05 (火) 11:04:33 (4750d)

アークウェブのサービスやソリューションはこちら