PHP+FlexでCRUD【その２】

では、具体的なやり方を順を追って見ていきます。

PHP側の追加・修正

まず、お詫びですが前回使用したPHPのコード（とデータベースのテーブル定義）にちょっと問題がありまして、topics.desc フィールドは desc がSQLの予約語（降順を意味する）であるため、adodbのAutoExecuteでエラーが出てしまいます。

そのため、以下のSQLでテーブルの構造を変更します。

ALTER TABLE topics RENAME "desc" TO description;

また、それに伴ってモデル側のコードを再生成しておきます。「PHPで自動生成して楽するPHPのDB処理」を参照してください。

次に、追加のためのコードを作ります。単純に、GETパラメータでdate,title,descを受け取りインサートするというものです。

<?php
/**
 * トピックス追加デモ
 * @author Daijiro Abe
 * @date   2007.12.11
 */

/// **** WARNING: NO SECURITY CHECK!! PLEASE TEST LOCAL SERVER ONLY ****

require_once("classes/Topics/TopicsDAO.php");

$dao = new TopicsDAO();

list($year, $month, $day) = explode("/", $_GET["date"]);

if($year && $month && $day && checkdate($month, $day, $year) && $_GET["title"] && $_GET["desc"])
{
    $topics = new Topics();
    $topics->setDate($_GET["date"]);
    $topics->setTitle($_GET["title"]);
    $topics->setDescription($_GET["desc"]);
    $dao->insert($topics);
}

コメントにもありますが、validationなどのセキュリティチェックが不十分なのでローカル環境でのテストにとどめてください。

できたら、add.phpという名前で配置し、http://testsite.domain/add.php?date=2007/12/11&title=test&desc=abcde などというURLでアクセスして、正しくデータが追加されるかどうか確認してください。

うまくいかない場合は、データベース周りでエラーが発生しているかもしれませんので、$dao->insert(); の直前に、$dao->setIsDebug(true); と入れてデバッグモードを有効にしてみてください。

ボタンの追加

次にポップアップでフォームを表示させるためのボタンを追加します。

MXMLの編集モードをDesignにして、追加するのが一番直感的ですが、以下のように直接コードを書き換えてもOKです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:helper="jp.flup.php_crud.*">
<helper:InitViewHelper id="initViewHelper" />
    <mx:DataGrid id="listGrid" x="0" y="37" width="100%" height="400" dataProvider="{list_service.lastResult.topic}">
        <mx:columns>
            <mx:DataGridColumn headerText="ID" dataField="id" visible="false" />
            <mx:DataGridColumn headerText="日付" dataField="date"/>
            <mx:DataGridColumn headerText="タイトル" dataField="title"/>
            <mx:DataGridColumn headerText="詳細" dataField="desc"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:HTTPService id="list_service" url="./list.php" useProxy="false" resultFormat="e4x" />
    <mx:Button x="10" y="10" label="追加" id="add_button" />
</mx:Application>

ポップアップウィンドウの作成

ポップアップウィンドウは、TitleWindowを継承したMXMLコンポーネントとして作成します。

ファイル > 新規 > MXMLコンポーネント を選択し、Based OnにTitleWindow、FilenameにInputForm.mxmlと入力してFinishボタンを押します。

すると、mx:TitleWindow だけが書かれた雛形のファイルができると思いますので、まず mx:TitleWindow へtitle属性「新規登録」を追加します。

次に、mx:TitleWindowの中に mx:Form, mx:FormItem を入れます。これは入力フォームを整列させるためのクラスらしいです。・・ソースを見たほうが早いですね。

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" title="新規登録">
    <mx:Form width="100%" height="100%">
        <mx:FormItem label="日付">
            <mx:DateField width="100%" id="date_field" formatString="YYYY/MM/DD" />
        </mx:FormItem>
        <mx:FormItem label="タイトル">
            <mx:TextInput width="100%" id="title_text" />
        </mx:FormItem>
        <mx:FormItem label="詳細">
            <mx:TextArea width="100%" height="100" id="desc_text" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="送信" id="form_button" />
        </mx:FormItem>
    </mx:Form>
</mx:TitleWindow>

DateFieldの、formatStringは日付の形式を変更するためのもので、デフォルトだとアメリカ式（？）の形式になってしまうので処理しやすい形にしました。他はそれぞれのフォームコンポーネントにidをふっていますが、これはActionScriptから制御できるようにするためのものです。

ボタンを押したらポップアップが開くようにする

追加ボタンを押したときにポップアップが開くようにするためには、ボタンに対してイベントハンドラを関連付ける必要があります。これは前回 CREATION_COMPLETE に対して設定したのと同じやり方です。

private function creationCompleteHandler(event:FlexEvent):void
{
    view.add_button.addEventListener(FlexEvent.BUTTON_DOWN, addButtonDownHandler); // 追加
    view.list_service.send();
}

ポップアップを開いたり閉じたりするには、mx.managers.PopUpManagerを使います。

form = PopUpManager.createPopUp(view, InputForm, true) as InputForm; // ポップアップ
PopUpManager.centerPopUp(form); // ポップアップを中央にする
PopUpManager.removePopUp(form); // 閉じる

送信ボタンを押した時にリクエストを送信

これは、追加ボタンを押した時と同じような感じで、処理内容が異なるだけです。

追加処理のPHPへリクエストを送るには、以下のようにします。

var http:HTTPService = new HTTPService();
http.url = "./add.php";
http.method = "GET";
http.request.date = date_str;
http.request.title = form.title_text.text;
http.request.desc = form.desc_text.text;
http.send();

HTTPServiceを今回はActionScript側でインスタンス化して使用しています。その後、URL, method, リクエストパラメータをセットして、send() してやっているだけです。

おわりに

あまり難しい部分もなかったのでソースばかりになってしまいましたが、だいたいこんな感じです。
今回もエクスポートしたものをアップロードしました。

php_crud_2.zip

今回の処理では、追加してもDataGridに反映されません。そのほか、セキュリティ的な対策などについても今後対応していきたいと思います。