“ボウリングの紆余曲折”のページ、早く何とかしよう。

ということで、11/17の記事「JavaScriptの“window.open”を使ってみた。」で分析・閲覧途中でも投球者を変更できるようにしたのだが、今日はその続き。

今まで、スコア分析(といってもアベレージやらハイスコアが表示されるだけだが、、、)のページでは“過去の全てのゲーム”を対象にアベレージやらハイスコアを計算させていたが、やっとこさ日付範囲を指定できるようにした。

ばっちり、昨日の「jQueryのDatepicker」も使っている。

なぜ今まで範囲指定が出来ないようになっていたかというと、理由は簡単。

“MySQLでの日付範囲指定してデータ抽出”の方法がわからなかったからだ。

ん~、この勉強不足ぅ!

でも大丈夫、わかったから。

肝となるのは、この一文。

$sql = "SELECT * FROM {$db['dbname']}.{$tblname} WHERE `date` BETWEEN '{$date_from}' AND '{$date_to}'";

超ベリーとっても簡単。

ちなみに、片一方だけ(○月×日以降)にするなら、こんなカンジ↓。

$sql = "SELECT * FROM {$db['dbname']}.{$tblname} WHERE `date` >= '{$date_from}'";

単に、比較演算子を使えばいいのね、、、これも簡単。覚えとこ。

あ、ちなみにMySQLのdateフォーマットは“Y-m-d”なのでそれだけは注意。

あとは、このクエリ文に渡す$date_from変数と$date_to変数を取得しなければならない。

phpは、ざっくりとこんなカンジ↓($cleanは$_POSTをクリーニングした値を格納した配列)。

print "<body onload=\"setDisabledSpan($('#date_from')[0],$('#date_to')[0])\">\n";

$span_chk = 0;
if($clean['date_span'] != ""){
  if($clean['date_span'] != "manual" || ($clean['date_span'] == "manual" && $clean['date_from'] != "" && $clean['date_to'] != "")){
    $span_chk = 1;
  }
}
if($span_chk == 0){
  print "<form method=\"post\" action=\"{$dirPath}{$thisfile}\">\n";
  print "<p>※日付範囲を指定してください</p>\n";
  print "<p>\n";
  print "日付範囲\n";
  print "<select name=\"date_span\" id=\"date_span\" onchange=\"setCalender_from($('#date_span')[0],$('#date_from')[0],$('#date_to')[0])\">\n";
  print "  <option value=\"all\">すべて</option>\n";
  print "  <option value=\"1\">最近1カ月</option>\n";
  print "  <option value=\"3\">最近3カ月</option>\n";
  print "  <option value=\"6\">最近6カ月</option>\n";
  print "  <option value=\"12\">最近1年</option>\n";
  print "  <option value=\"manual\">手動で選択↓</option>\n";
  print "</select>\n";
  print "</p>\n";
  print "<p>\n";
  print "「手動で選択」の場合\n";
  print "<input type=\"text\" id=\"date_from\" name=\"date_from\" onblur=\"setCalender_to($('#date_from')[0],$('#date_to')[0])\"/>\n";
  print "~";
  print "<input type=\"text\" id=\"date_to\" name=\"date_to\"/>\n";
  print "</p>\n";
  print "<div><input type=\"submit\" name=\"spanSelect\" value=\"次へ進む\" /></div>\n";
  print "</form>\n";
}else{
  print "<p>日付範囲";
  $fromto = 1;
  if($clean['date_span'] != "manual"){
    if($clean['date_span'] != "all"){
      $date_from = date("Y-m-d",strtotime("-{$clean['date_span']} month +1 day"));
      $date_to = date("Y-m-d");
    }else{
      $date_from = date("Y-m-d",strtotime("-10 year"));
      $clean['date_to'] = date("Y-m-d");
      $date_to = 0;
    }
  }else{
    $date_from = str_replace("/","-",$clean['date_from']);
    $date_to = str_replace("/","-",$clean['date_to']);
  }
  $_SESSION['date_span'] = $clean['date_span'];
  $_SESSION['date_from'] = $clean['date_from'];
  $_SESSION['date_to'] = $clean['date_to'];
  if($fromto == 1){
    list($year_from,$month_from,$day_from) = sscanf($date_from,"%d-%d-%d");
    list($year_to,$month_to,$day_to) = sscanf($date_to,"%d-%d-%d");
    print $year_from."年".$month_from."月".$day_from."日~".$year_to."年".$month_to."月".$day_to."日";
  }else{
    print "すべて";
  }
  print "</p>\n";
}

あくまでもざっくりと、だが。

44~45行目はdate_fromとdate_toを“Y/m/d”形式からにする“Y-m-d”形式に変換しているが、これはjQueryのDatepickerから吐き出される日付形式をMySQLの日付形式に直しているのである。

んで、JavaScriptはこんなカンジ↓。

function setDisabledSpan(from,to){
  from.disabled=true;
  to.disabled=true;
}

function setCalender_from(pulldown,from,to){
  if (pulldown.value == "manual"){
    from.disabled=false;
  }else{
    from.value="";
    from.disabled=true;
    to.value="";
    to.disabled=true;
  }
}

function setCalender_to(from,to){
  if (from.text != ""){
    to.disabled=false;
  }else{
    to.value="";
    to.disabled=true;
  }
}

要は、まずページ読込時に二つのテキストボックスをdisabledにしておき、セレクトボックスで「手動で選択↓」を選んだらdate_fromテキストボックスのdisabledが解除になり、さらにdate_fromテキストボックスに入力をしたらdate_toテキストボックスのdisabledが解除になるという仕掛けである。

あとはこれと11/17の記事「JavaScriptの“window.open”を使ってみた。」を応用して、分析途中でも日付範囲を変更できるようなポップアップ画面を作った。

なかなか、上出来である。

よろしければご覧あれ。⇒ “ボウリング”の紆余曲折>スコア閲覧・分析

うん、寝よう。