Home > MooTools > [mootools&PHP] Ajax.Request でファイルの読み書きをする

[mootools&PHP] Ajax.Request でファイルの読み書きをする

Next: 1 2

Step5.投稿日時を付け加えて整形

前のステップの段階で既にデータを受け取るところまで出来てるので、

PLAIN TEXT
PHP:
  1. if($_POST["mode"] == "post"){
  2.   print $_POST["comment"];
  3. }

この$_POST["comment"]の中身をファイルに書き込めばいいわけです。
値があるときだけ実行するようにしたいので、sample.phpのif文に条件を追加して空送信では無効になるようにしときます。

PLAIN TEXT
PHP:
  1. if($_POST["mode"] == "post" && $_POST["comment"] != "")

保存するデータが送信された値だけではちょっと寂しいので、送信日時も付け足すことにします。
date関数とtime関数についてはマニュアルとか見てください。

sample.php

PLAIN TEXT
PHP:
  1. if($_POST["mode"] == "post" && $_POST["comment"] != ""){
  2.  $savedata = $_POST["comment"].",".date("Y/m/d H:i:s",time());
  3.  print $savedata;
  4. }

保存されるときに送信された内容と送信日時をカンマで区切るようにしています。
この時点で実行したときに、保存される形式がそのまま出力されたらOK。
ああああ,2009/03/10 01:31:20

Step6.送信されたデータの保存

保存はファイルシステム関数の組み合わせなんですが、説明面倒なのでサンプルの保存関数をそのままコピペしてください。
簡単に流れをコメントで書いてあります。

まずsample.phpの先頭に以下の定数を追加

PLAIN TEXT
PHP:
  1. define("FILE","data.txt");//保存先のファイル名

次に保存関数。場所は上でも下でもどこでもいいです。

sample.php

PLAIN TEXT
PHP:
  1. //保存
  2. function new_save($data)
  3. {
  4.     //ファイルサイズをチェックして0でなければ内容を保存します
  5.     if(filesize(FILE) != "0"){
  6.         $contents = file(FILE);//配列形式で読み込む
  7.     }
  8.     $fp = fopen(FILE, "w");//ファイルオープン
  9.     fwrite($fp, $data);//送信されたデータの書き込み
  10.     if(is_array($contents)){
  11.         for($i=0;$i <count($contents) ;$i++){
  12.             fwrite($fp, $contents[$i]);//ログの書き込み
  13.         }
  14.     }
  15.     fclose($fp);//ファイルクローズ
  16.     return true;
  17. }

この関数は引数で渡された文字列をファイルに書き込むものです。
文字列は前のステップで作ってますので、関数の実行はprintの行の下になります。

sample.php

PLAIN TEXT
PHP:
  1. if($_POST["mode"] == "post" && $_POST["comment"] != ""){
  2.  $savedata = $_POST["comment"].",".date("Y/m/d H:i:s",time());
  3.  print $savedata;
  4.  new_save($savedata."\n");
  5. }

"\n"は改行コードです。これが無いと全部一行になってしまうので必須。

適当になんか送信して、data.txtに保存されていたらOK。

Step7. エフェクトをつけて表示する

今のところ表示されるのがただの文字列なので、Fxでエフェクトを付けていかにもAjaxしてますな感じにする。
クリックイベント内にあるRequestインスタンスのonSuccess()内を変更します。

まず、返ってきたデータをカンマで分割。

PLAIN TEXT
JavaScript:
  1. var data = txt.split(",");

変数dataは配列になり、data[0]には送信したテキスト、data[1]に送信日時が格納されます。

エフェクトはフェードインだけなので、ショートカットメソッドfade()で直接エレメントに追加して、初期を非表示状態にしときます。
ログを入れる要素はまあ段落でもリストでも何でもいいんですが、とりあえずpタグにして日時はspanに入れることにしました。
要素はnew Element()で作成します。

PLAIN TEXT
JavaScript:
  1. var element = new Element("p",{html:data[0]+"<span>["+data[1]+"]</span>"}).fade("hide").inject("pastlog","top");
  2. element.fade("in");

inject()でdiv#pastlogの先頭に追加したあと、fade("in")する。

実行してフェードインして表示されればOK。

ここまでの動作の流れをまとめると次のようになります。

  1. button#submitをクリックする
  2. input#commentの値を取得する
  3. Requestクラスのインスタンスを作成する
  4. オプションで指定されたURLへデータを送信する
  5. 送信されたデータを受け取る(PHP)
  6. 送信日時を追加する(PHP)
  7. 送信データに日時を付け加えたデータを返す(PHP)
  8. 返された結果を出力
  9. ファイルに保存する(PHP)

Step8. ログを取得する

ここまでの段階だと過去ログが見れないので
ページを表示したりリロードした時にもログを表示するようにします。

新しいRequestクラスのインスタンスをwindow.addEvent('domready')直下に追加します。
クリックイベントの前後どこでもいいです。

index.html

PLAIN TEXT
JavaScript:
  1. new Request({
  2.     url:"sample.php",
  3.     method:"get",
  4.     data:"mode=load",
  5.     onSuccess: function(txt) {
  6.         $("pastlog").set('html',txt);
  7.     },
  8.     onFailure: function() {
  9.        $("pastlog").set('html', 'エラーが発生しました');
  10.     }
  11. }).send();

methodはまあどっちでもいいんですが、GETにしときます。

PHPにログを取得する関数とif文を追加します。
これもまた説明が面倒なのでサンプルをコピペしてみてください。
まずはロードの関数。場所はどこでもいいです。

sample.php

PLAIN TEXT
PHP:
  1. //ロード
  2. function get_data(){
  3.     $logdata = file(FILE);
  4.     print trim(implode("\t",$logdata));
  5. }

file()は配列形式でファイルを読み込む関数です。
タブで配列をくっつけた後、文字列前後の改行コードを取り除くためにtrim関数を通して返します。

上記の関数をコピペしたら、実行するif文を追加します。
dataでmode=loadを渡しているので、if文の条件は次のようになります。

PLAIN TEXT
PHP:
  1. if($_GET["mode"] == "load"){
  2.     get_data();
  3. }

リロードしてずらーっと文字列が出ればOK。

Step9. ログのスタイリング

文字列じゃアレなので、送信したデータを表示した時みたいにタグで整形することにします。
手順はStep7と大体同じです。

onSuccess()で実行される関数のソースを変更します。
まずくっつけた文字列（タブ）で分割して配列に戻す。

PLAIN TEXT
JavaScript:
  1. var log = txt.split("\t");

変数logには保存されているログの行が配列形式で格納されます。

これをeach()で処理する。

PLAIN TEXT
JavaScript:
  1. log.each(function(item,i){
  2.     var data = item.split(",");
  3.     new Element("p",{html:data[0]+"<span>"+data[1]+"</span>"}).inject("pastlog");
  4. });

カンマで分割したログをpタグにいれた後、inject()でdiv#pastlogに追加していく。

まとめると次のようになります。

PLAIN TEXT
JavaScript:
  1. new Request({
  2.     url:"sample.php",
  3.     method:"get",
  4.     data:"mode=load",
  5.     onSuccess: function(txt) {
  6.         var log = txt.split("\t");
  7.         log.each(function(item,i){
  8.             var data = item.split(",");
  9.             new Element("p",{html:data[0]+"<span>"+data[1]+"</span>"}).inject("pastlog");
  10.         });
  11.         },
  12.     onFailure: function() {
  13.        $("pastlog").set('html', 'エラーが発生しました');
  14.     }
  15. }).send();

Step10. ソースのまとめ

javascriptとphpの全文を以下に載せます。

index.php

PLAIN TEXT
JavaScript:
  1. window.addEvent('domready', function(){
  2.    
  3.     new Request({
  4.         url:"sample.php",
  5.         method:"get",
  6.         data:"mode=load",
  7.         onSuccess: function(txt) {
  8.             var log = txt.split("\t");
  9.             log.each(function(item,i){
  10.                 var data = item.split(",");
  11.                 new Element("p",{html:data[0]+"<span>"+data[1]+"</span>"}).inject("pastlog");
  12.             });
  13.             },
  14.         onFailure: function() {
  15.            $("pastlog").set('html', 'エラーが発生しました');
  16.         }
  17.     }).send();
  18.  
  19.     $("submit").addEvent("click",function(e){
  20.         e.stop();
  21.         var comment = $("comment").value;
  22.         new Request({
  23.             url:"sample.php",
  24.             method: 'post',
  25.             data:{"mode":"post","comment":comment},
  26.             onRequest:function(){
  27.                 $("comment").value ="";
  28.             },
  29.             onSuccess: function(txt) {
  30.                
  31.                 var data = txt.split(",");
  32.                 var element = new Element("p",{html:data[0]+"<span>"+data[1]+"</span>"}).fade("hide").inject("pastlog","top");
  33.                 element.fade("in");
  34.  
  35.             },
  36.             onFailure: function() {
  37.                $("pastlog").set('html', 'エラーが発生しました');
  38.             }
  39.       }).send();
  40.     });
  41. });

sample.php

PLAIN TEXT
PHP:
  1. define("FILE","data.txt");
  2.  
  3. if($_POST["mode"] == "post" && $_POST["comment"] != ""){
  4.  $savedata = $_POST["comment"].",".date("Y/m/d H:i:s",time());
  5.  print $savedata;
  6.  new_save($savedata."\n");
  7. }
  8.  
  9. if($_GET["mode"]=="load"){
  10.     get_data();
  11. }
  12. //ロード
  13. function get_data(){
  14.     $logdata = file(FILE);
  15.     print trim(implode("\t",$logdata));
  16. }
  17. //保存
  18. function new_save($data)
  19. {
  20.     //ファイルサイズをチェックして0でなければ内容を保存します
  21.     if(filesize(FILE) != "0"){
  22.         $contents = file(FILE);//配列形式で読み込む
  23.     }
  24.     $fp = fopen(FILE, "w");//ファイルオープン
  25.     fwrite($fp, $data);//送信されたデータの書き込み
  26.    
  27.     if(is_array($contents)){
  28.         for($i=0;$i <count($contents) ;$i++){
  29.             fwrite($fp, $contents[$i]);//ログの書き込み
  30.         }
  31.     }
  32.     fclose($fp);//ファイルクローズ
  33.     return true;
  34. }

Demo »
ダウンロード：Ajax.Request Sample

なんとなくTwitterに似てますよね。
ローディングや完了メッセージとか付け足したら、似たような掲示板が作れると思います。
サンプル過ぎて実用には耐えないので、もうちょっと本格的にしたいなーという場合は
SlimBBSのPHPファイルを使うといいかもしれません。

この記事は複数のページに分かれています ： 1 2

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl（バザール）に追加このエントリをChoixに追加このエントリをnewsingに追加

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://tenderfeel.xsrv.jp/mootools/473/trackback/
Listed below are links to weblogs that reference
[mootools&PHP] Ajax.Request でファイルの読み書きをする from WebTecNote

Home > MooTools > [mootools&PHP] Ajax.Request でファイルの読み書きをする

Scripts
カテゴリー
Recent Reactions
最近の投稿
最近の修正
  • そしてこのSQLはわれながらよく書いたと思う 2010-11-15
  • CSVの列っていう方がいいのかな…118項目だった 2010-11-15
  • 楽天のCSVの項目が116個もあった衝撃 2010-11-15
  • オフィスで香水臭振りまくのは迷惑だと知れ 2010-11-15
  • ぐあー　フレグランステロやー 2010-11-15
  • More updates...

Powered by Twitter Tools

Tag Cloud
おすすめサーバー・他

メタ情報

Return to page top