WEBページの計算結果をDBに出力する(CFDB7と連携)

こんにちは!
この時期部屋で作業しているときの寒さ、キーボードを叩く指先は寒くどうしても暖かさを求めてしまいます。
エアコンを付けっぱなしにするのは日常茶飯事で、冬の寒さと戦う私の唯一の味方です。

前回ブログでJavaScriptを使ってWEBページ上に計算機能を付けるための方法を紹介しました。

WEBページに計算機能(電卓)を設置してみよう。

ですがこの方法は単なる計算機能だけで、計算結果を保存することも外部に送ることもできません。
今回は計算結果を有効に活用するため、DBに出力し保存する方法をお伝えしてきます。

以下が完成のページです。
販売サイトをイメージして、商品を選択、個数を選択すると合計金額が計算されDBに金額が保存される機能を実装します。

使用する機能

実装には以下2つの機能を使います。

  • Contact Foam7・・・言わずもがな問い合わせ機能を設置する代表的なプラグインです。
  • Contact Form 7 Database Addon・・・Contact Foam7に追加するアドオン機能です。
                      これを使用すると問い合わせ内容を記録する独自DBを作ることができます。

Contact Form 7 Database Addonは問い合わせ内容を独自のDBに保管するためのプラグインです。
残念ながらWordpressに単体で独自のDBを追加するプラグインが無く(見つからず・・・)代替として使用しています。
2つのプラグインを組み合わせることにより計算結果をDBに保存することができます。

次にContact Foam7にコードを書いていきます。

<Tips>
Contact Foam7のエディタは自分でHTML,CSS,JavaScriptを書くことができますので、様々な機能を追加します。今回はインラインでJavaScriptを記述しました。

では実際のページで商品番号と個数を入力して計算すると合計のフィールドに金額が計算されました。

次に送信ボタンを押すとデータがDBに送られます。

このContact Foam7のDBを確認してみるとデータが正しく送られていました。
商品、数量、合計の最小項目だけでしたが、名前やメールアドレスなどを項目として追加すると商品購入履歴としても使えそうです。
またCSVで外部にデータを吐き出せるためエクセルなどでデータの加工もできます。

まとめ

今回は2つのプラグインを組みわせ計算結果をDBに出力する方法でした。お問い合わせプラグインはカスタマイズ例が多く、ショッピング機能としてカスタマイズすることもありますので、使いこなせるようにしましょう!

コメントする