操作ログの残し方

Question

###前提・実現したいこと
現在，ユーザが行ったシステムの操作ログを残そうとしております．
そこで，radioボタンで選択したログをはきだし，はきだしたログをユーザがボタンを押した(onClick)際に，Javascriptのプログラムを動作し，その時の日時を記録しデータベースへの蓄積を行いたいと考えております．（画面遷移をおこなえばできるのですが，それは今回行わないよていです．）
そこで，Javascriptで日時データ(DateTime)を取得し，phpに受け渡したいと考えております．ajaxというものを利用したら，どうもできそうなのですが，私自身素人でして，ajaxについて分からないため，できればその他の方法などをご存知でしたら教えていただけますと幸いです．不躾な質問で申し訳ございませんがよろしくお願いいたします。

Answer 1

<input type='radio' value="1" name="hoge">りんご
<input type='radio' value="2" name="hoge">みかん
<input type='radio' value="3" name="hoge">ぶどう

$(function(){
 var DD = new Date(),
      unique = "uid" + DD.getDate() + DD.getHours() + DD.getMinutes() + DD.getSeconds() + Math.floor(Math.random() * 1000000);
  $("input[name='hoge']").click(function(){
    $.post("http://localhost/hoge.php",{uid: unique , radio_val:$(this).val()});
  });
});

ブラウザでの処理だけ知りたいならこうですね。
jQuery.Post()を使えばシンプルです。
PHP側は送られてきたデータとそれを受けとった時間を合わせてデータベースに保存するだけです。（※SQLインジェクションには注意）
時間はブラウザ側で取得するのではなく、サーバー側のものを使うほうがいいです。ユーザーのPCの時間がずれていない保証なんてないので。
あと、「誰が」ってところをログに保存するためここでは簡単なユーザーID（低い確率で同じIDができる）を作ってますが、ちゃんとしたものがあるならそっちを使ってください。

Comments

[heroherohero]

ご回答ありがとうございます．
今回は，oskbtさんのようにきれいなプログラムではありませんが，同じように，ボタンのidを選択し，それがクリックされたときに，操作ログをjavascriptではき出し，それをajaxを使い，phpへPOSTすることで，私が悩んでいた問題を解決することができました．

また，いただいたアドバイスを参考に，データベースに登録する際には，サーバー側の時間を使うようにしました．

丁寧にご回答いただき，ありがとうございました．

Answer 2

ラジオボタンをクリックされた時に、でしたらだいたいこんな感じになると思います。

<form id="a" action="hoge.cgi" method="post">
  <ul>
    <li><label><input type="radio" name="c" value="1" />ラジオ1</label></li>
    <li><label><input type="radio" name="c" value="2" />ラジオ2</label></li>
    <li><label><input type="radio" name="c" value="3" />ラジオ3</label></li>
  </ul>
  <div><input type="submit" value="送信" /></div>
</form>

window.addEventListener('load', function() {
  var radios = document.querySelectorAll('#a input[type="radio"]');
  int length = radio.length;
  var listener = function() {
    var xhr = new XMLHttpRequest();
    xhr.open('fuga.cgi', 'POST', false);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('val=' + this.value);
  };
  for(int i = 0; i < length; i++) {
    radios[i].addEventListener('click', listener);
  }
});

Comments

[heroherohero]

ご回答ありがとうございます。お返事遅くなってすみません。
今回は，クリック時ではなく，非同期通信で解決することが早いと思い，ajaxに挑戦してみたところ，つぎはぎですが何とか動くものをつくることができました．
MH35さんが書いてくださったコードでも，まだまだ私が勉強不足なため理解できない点(javascript)が多いので，勉強させていただこうと思います．
お時間を割いて，考えていただきありがとうございました．

Answer 3

データベースではなくファイルへの保存になりますが、アクセスログを活用してみてください。
POST通信だと、リクエストパラメータが基本的に無いので操作確認は難しいですが、アクション名を工夫することで、わかりやすくすることが可能です。

ちなみに、この方法は操作の度に画面遷移・画面更新といったWEBアクセスが発生することを想定してます。

---

###画面の遷移・更新をしないでアクセスログを取得する方法

• まず、ラジオボタンを切り替える度に画像を変更するjavascriptを用意する。

【ご参考】http://www.sky.sannet.ne.jp/masapine/java_gazou.html

• 画像準備する。この際、透明gifや背景と同じ色のものを準備し、画像が表示されているとわからないものにする。
• キャッシュ対策をする。同じURLだとブラウザキャッシュやプロクシキャッシュが働いてしまうので、リクエストパラメータにキャッシュ回避の細工をする。

【ご参考】http://so-zou.jp/web-app/tech/programming/javascript/ajax/no-cache/

Comments

[heroherohero]

ご回答ありがとうございます。
アクセスログを使ったことは考えてもいなかったので，一度考えてみたいと思います。

私の正しく説明できておらず、大変恐縮ですが，今回は
画面遷移を伴わない，ラジオボタンを選択したログを残したいと考えております。

もし何かご存じのことがございましたら，教えていただけますと幸いです。
よろしくお願いいたします。

Answer 4

phpでDB登録をするのであれば、時刻もphp側で拾い、DB登録の際合わせて登録すればよいです。
jaavscript で時刻を拾う必要はありません。

画面遷移を伴っても良ければ、普通にpostすれば良いので、javascript で onclick イベントを拾う必要もないです。

Comments

[heroherohero]

ご回答ありがとうございます。
私の言葉足らずで大変恐縮ですが，画面遷移をともった際に，phpのPOSTを使って，DBに登録しようとしています。
ですが，その前に，ラジオボタンを選択した際の操作ログをはきだし，submitの際に，画面遷移を伴いDBに登録を行いたいと思っております。
このようなことは、はたして可能なのでしょうか。何か教えていただければ幸いです。
よろしくお願いいたします。

[退会済みユーザー]

ajaxを使用しないのであれば、操作のタイミングで操作ログを input の value に追記して、画面遷移の際にPOSTするとかどうでしょうか。
この場合、POSTされなければ認識できません。
ラジオボタンの操作を画面遷移を伴わず記録するにはajaxが必須となります。
ラジオボタンの状態遷移を拾って、ajaxでPOSTすれば良いので、サンプルはいくらでもあるともいます。

[heroherohero]

ご返事ありがとうございます．
te2jiさんがおっしゃているように，ajaxでPOSTする方法をしらべて取り組んでみたところ，汚いプログラムではありますが，どうにか動かすことができました．
これを機に，ajaxについても勉強していきたいと思います．ありがとうございました．