2021/04/28 22:14

ちゃんとデータベースに格納する投票サイトをWordpressで作る方法

リアルタイムに「投票できるサイト」、そして投票数がデータベース内に数字として格納されていくシステムの構築方法です。

説明するのはVagrantとVCCWを使ってWordpressローカルで開発していく方法となります。

概要

①

名前（人物とか）と投票数、そして投票ボタンがついてて、ポチるとリアルタイムに数字が増えるシステム。

②

データベースにも入ってくのでブラウザリロードしてもちゃんと残ってる仕様。

これを作るシンプルな方法です。

データベースのテーブルを作成

phpMyAdmin等を使って下記テーブルを新規作成。

WordPress使ってローカルでphpMyAdmin使う方法は別の記事参照。

・テーブル名

wp_products

【中身】

・ID

※インクリメントするID

・名前

product_name

・投票数

product_vote

IDで判別するのでIDは必要です。

名前は別になくてもいいですが、だいたい投票するシステムとかだったら付けるかと思ってつける方向にしてます。

出力用ファイルのコード

いくつか仮で登録したら、下記コードで一覧として出力。

「page-test.php」ファイル内（仮）

データベース内をwhileで出力して一覧を出します。

スタイルは適宜それっぽく当ててください。


<?php
  $query_display = "SELECT * FROM wp_products";
  $result_display = $mysqli->query($query_display);
?>
<?php while($row_display = $result_display->fetch_assoc()):?>
<?php
  $id = $row_display['id'];
  $product_name = $row_display['product_name'];
  $product_vote = $row_display['product_vote'];
?>
 
  <p>
    <?php echo $product_name;?>
  </p>
<div class="p-vote-number">
  <?php echo $product_vote;?>
</div>
<button id="<?php echo $id;?>" name="<?php echo $product_name;?>" class="p-vote-btn">投票</button>
<?php endwhile;?>

JavaScriptでajax処理

・「p-vote-btn」のclassのボタンをクリックしたら発動

・IDを拾ってajax送信

・「p-vote-number」内の数字も同時に置き換える

「page-test.php」ファイル内（仮）


<script>
  $(function() {
    // buttonがクリックされたときに実行
    $(document).on('click', '.p-vote-btn', function() {
 
      // buttonのIDを取得する
      var id = $(this).attr("id");
 
      // POST用のデータ準備：id=をつけないと、page-voteajax.phpの$_POST['id']で取得できない
      var voteData = 'id='+ id;
 
      // .p-vote-number内の投票数を書き換える
      var voteNum = $(this).prev('.p-vote-number');
 
      // url
      var ajax_url = '<?php echo get_template_directory_uri();?>/page-voteajax.php';
 
      $.ajax({
        type: 'post',
        url: ajax_url,
        data: voteData,
 
        success: function(data) {
          // 処理が成功したら、voteNum内部を書き換える
          voteNum.html(data);
        }
      });
      return false;
    });
 
  });
</script>

ajax処理用のファイル

「page-voteajax.php」ファイル内の記述

押されたボタンのIDを拾って投票数にプラス1してるだけです。


<?php
  require_once("../../../wp-config.php");
 
// POSTされたときに下記を実行
if( $_POST['id'] ) {
 
  $id = $_POST['id'];
  $id = $mysqli->real_escape_string($id);
 
  // 投票数をアップデートする
  $sql = "UPDATE wp_products SET product_vote = product_vote+1 WHERE id='$id'";
  $mysqli->query($sql);
 
 
  // 投票数を取得する
  $result = $mysqli->query("SELECT product_vote FROM wp_products WHERE id='$id'");
  $row = $result->fetch_assoc();
 
  $vote_value = $row['product_vote'];
  echo $vote_value;
}

wp_configに追加

ファイル内でデータベースのやり取りに必要となる？記述を「wp_config」に追記。

【ローカル構築版のwp_configファイル】

ローカル側の記述はこれを追記しておけばOK↓


$host = "localhost";
$username = "wordpress";
$password = "wordpress";
$dbname = "wordpress";
 
$mysqli = new mysqli($host, $username, $password, $dbname);
$mysqli->set_charset("utf8");
 
if ($mysqli->connect_error) {
error_log($mysqli->connect_error);
exit;
}

サーバー側のwp_configはちゃんとDB情報書かないといけないのでこうなります↓

【サーバー側のwp_configファイル】


$host = "データベースのホスト名";
$username = "データベースユーザー名";
$password = "データベースパスワード";
$dbname = "データベース名";
 
$mysqli = new mysqli($host, $username, $password, $dbname);
$mysqli->set_charset("utf8");
 
if ($mysqli->connect_error) {
error_log($mysqli->connect_error);
exit;
}