第27回 Twilioで投票システムをつくる(後編)

スポンサーリンク

前回の第26回 Twilioで投票システムをつくる(前編)の続き

前編:Twilioを使って投票システムを構築
後編:投票結果をリアルタイムに集計するシステムを構築

目的

jQueryを使って投票結果をリアルタイムに集計する(ポーリングで)

開発

前回の第26回 Twilioで投票システムをつくる(前編)ではブラウザーで表示しているページをF5などで更新しないと最新の情報が取得できなかったが、ここではjQueryを使ってリアルタイムに情報を取りに行って表示するようにカスタマイズする。

修正・追加するファイルは下記。

  • index.php(修正)
  • realtime.js(新規)
  • getVoteResult.php(新規)

index.php
投票結果を表示するページです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/realtime.js"></script>
<title>投票システムサンプル</title>
</head>
<body>
    <div id="debug"></div>
	<h1>投票システムサンプル</h1>
	<h2>050-XXXX-XXXX</h2>

	<p id="question">りんごは好きですか?</p>

	<div class="voteResult">
		<p class="title">好き</p>
        <p class="result" id="result1"></p>
	</div>
	<div class="voteResult">
		<p class="title">嫌い</p>
        <p class="result" id="result2"></p>
	</div>
	<div class="voteResult">
		<p class="title">どちらでもない</p>
        <p class="result" id="result3"></p>
	</div>
	<br class="clear" />
</body>
</html>

第26回目で使った index.php と違うところは投票結果の取得プログラムを getVoteResult.php にまとめて記述しているところです。

6行目でjqueryのコアファイルを読み込み。
7行目でrealtime.jsファイルを読み込み。
19行目、23行目、27行目のdivボックスにそれぞれセレクターを当てて出力結果をJavaScriptを使って吐き出すようにしています。

realtime.js

$(function(){
    uploadVote();
    function uploadVote(){
        $.getJSON('getVoteResult.php', null, function(response){
            $('#result1').text(response.rows1);
            $('#result2').text(response.rows2);
            $('#result3').text(response.rows3);
        });
        setTimeout(function(){  
            uploadVote();
        }, 1000);
    }
});

それぞれの投票結果を該当のdivのボックスに格納するスクリプトです。
setTimeoutを使って1秒毎に getVoteResult.php のデータをJson形式で取得します。

getVoteResult.php
実際に集計のデータを取得するPHPスクリプトです。

<?php
	$connect = mysql_connect('localhost', 'root', '');
	mysql_select_db('test', $connect);

	// 1
	$query1  = 'select * from twilio_vote where number = 1';
	$result1 = mysql_query($query1);
	$rows1   = mysql_num_rows($result1);

	// 2
	$query2 = 'select * from twilio_vote where number = 2';
	$result2 = mysql_query($query2);
	$rows2   = mysql_num_rows($result2);

	// 3
	$query3 = 'select * from twilio_vote where number = 3';
	$result3 = mysql_query($query3);
	$rows3   = mysql_num_rows($result3);
    
    $result['rows1'] = $rows1;
    $result['rows2'] = $rows2;
    $result['rows3'] = $rows3;
    
    header('Content-Type: application/json');
    echo json_encode($result);

ここが第26回目で使ったindex.phpの上部にあったデータ抽出の箇所です。
ここでデータを取得して結果をJsonとして渡しています。

それぞれのファイルを設置して実際に投票をしてリアルタイムに数字が変わったら成功です。

参考文献

jQuery:https://jquery.com/

スポンサーリンク
スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク