Bootstrap:daterangepickerで選択しPOSTしてMYSQLの値を抽出する方法

Bootstrap:daterangepickerで選択しPOSTしてMYSQLの値を抽出する方法

Bootstrap:daterangepickerから選択した値をPOSTしてMYSQLの値を抽出する方法

前回記事はこちら。

今回、DateRangePickerでの日付指定からデータべ―ス抽出まで悩んだのでそこら辺をまとめて置こうと思います。

DaterRangePickerの想定している基本的な実装

全てをJavaScriptの中で処理すべく構成していると思われます。

いわゆる Ajax = 画面遷移を伴わないデータの抽出/変更 です。

その為、Views.py にPOSTするという考えを持たなくてもいい構成(JavaScript内で抽出してしまう構成)がDaterRangePickerを最も生かした良い実装なのだと思います。

今回行った実装について

今回実装していく中でJavaScriptで期間抽出まで実装するには大きな問題があると考え構成を変えました。
具体的には以下の通りです。

  1. DaterRangePickerで設定した期間をViews.py にPOSTする
  2. POSTされた値を使い、MySQLの抽出を行う
  3. 抽出された値をグラフ用の形に成型
  4. テンプレートに値を送りグラフ描写

JavaScript内での抽出を取りやめた理由

単に抽出したいDBのサイズが大きくなる可能性があるからです。

例えば毎日、端末ごとの売上データを蓄積したとして1年間で1095件(365×3)。
出店しているモールが3つあったとして3285件(1095×3)。
更に2年間推移を出そうとした場合6570件(3285×2)。

これをJavaScriptで期間抽出するよりはSQLで行ってしまった方がいいだろうと考えました。

Veiws.pyにPOSTして抽出を変える事で発生した問題点

指定した期間を表示してくれていた箇所に、毎回初期値が入るようになりました。

これは抽出後に画面遷移が入るため、Ajax側で取込んだレンジがクリアされる事が原因です。
その為、誤った表示がされるよりはと下の様に変更しました。

期間抽出しても毎回カレンダーは初期化されてしまうのでイマイチしっくりこないのですが…。
なんかいいやり方あると思うんですけど、動くところまでまず作り込みたいので一旦ここで線引きしました。

確定ボタンクリックでJavaScriptからVeiws.pyにPOSTする方法

POST送信の手段は2つあります。

  1. AjaxでPOSTする
  2. FormでPOSTする

詳しくは後程記載します。
まずは【daterangepicker】での悩みどころについて記載します。

vender/bootstrap-daterangepicker/daterangepicker.jsに Formタグが存在しない

Djangoのテンプレートでは id=”daterrangepicker”で呼び出されていました。

このidでbuild/js/custom.js の該当箇所が呼び出され、vender/bootstrap-daterangepicker/daterangepicker.js に記載されているHTMLを吐き出すと言う構造です。
そして、問題はこのdaterangepicker.js内のHTMLには馴染みの深いFormタグが無い点です。
となれば、Formタグを使わない形でPOSTするか、JavaScript内でForm+inputを作って送るかの2択。
それが上記の【Ajaxで送信する】【Formで送信する】の2つです。

AjaxでPOSTする

Ajaxの場合、画面遷移を伴わずに画面上の値を可変させます。
つまりは、グラフの姿を変えるにはJavaScript上で抽出条件を変えてあげないといけません。
この事実に気付かずAjaxでの実装を行ってしまい「何故だ…」となったのが今回の顛末でした。

JavaScriptからのPOST送信 ※Veiws.pyで受け取る

AjaxでのPOST送信を受け取る ※Veiws.py

Ajaxで送信した場合、値は【request.POST】ではなく【request.body】に届きます。
暫くこれに気付かず「何故だ、なぜできない!」ともがいてました。

9行目『Try ~ except ValueError ~ else 』はAjaxで値が送られてきていない時の回避措置です。
このTryからの文が無い場合、画面を読み込んだ段階で「Ajaxから値が届いてないぞ」とエラーが発生します。

こんなエラーを出さない為の処理が下の処理です。

  • except ValueError:Ajaxからの送信がない時の処理
  • else以降:Ajaxからの送信を受けた時の処理

基本的にはこの通りなのですが、Ajaxの基本を思い出しましょう。

Ajax=画面遷移を伴わずに画面上の値を可変させる

views.py が呼び出されるのはurls.py からの操作なので、URLの呼出し時に読み込まれています。
なので、このように書いても『今カレンダー選択したから Ajax送信してelse以降が呼び出される』と言う事は無いんです。つまりは、延々とグラフの変化は起きないと…。

言われてみればその通りなんですけど、今回の実装では全くの盲点でした。

Ajaxで送った値でグラフを可変させたいのであれば、必要となる要素を全てJavaScriptに送りJS上で抽出となります。この場合「そもそもVeiwsに送る意味ある?」と思ってしまいました。

FormでPOSTする

この場合はカレンダーで抽出した後、リロードするのでVeiws.py に値は送られグラフの変化も発生しますがカレンダーが元に戻ります。
つまりは、カレンダーとグラフの範囲に互換性が無くなります。
※カレンダーは抽出の道具としての用途だけになる。

JavaScriptでFormタグを作りPOSTする

FormでのPOST送信を受け取る ※Veiws.py

日付返還まで書き残しておきました。
FormでのPOSTは【 request.POST.get(‘送信時のname’) 】で受け取る事が出来ます。
でも、こいつはテキストとして受渡されるので日付計算やdate抽出などを行う場合はdatetime型に変換してあげる必要があります。

datetime.datetime.strptime()でまず変換するのですが、この時に時間データも必要になる様です。
最初、時間なしで記載したのですがエラーになりました。
で、面倒なのがもう一個、日付の指定文字がJavaScriptと違う事。ちゃんと言語に合わせましょう。

まとめ

速足のメモになりましたが、こうやってまとめて置けば次は実装前に諸々気付くだろうと。