สร้างแบบสำรวจ (Poll) ด้วย Google Chart Tools

       บทความนี้ผมจะสอนทำแบบสำรวจหรือโพล เผื่อใครสนใจ อยากทำเป็นโมดูลเสริมให้กับเว็บไซต์ของท่านให้ดูน่าสนใจมากขึ้นครับ ถ้าเอามาใช้กับเว็บร้านค้าออนไลน์ อาจเอามาใช้สำรวจความชอบหรือความสนใจ ต่อผลิตภัณฑ์ของเราก็ได้ครับ เช่น คุณสนใจสินค้าประเภท/หมวด ใดมากที่สุด , คุณทราบเว็บไซต์ของเราจากแหล่งใด เป็นต้นครับ
       เว็บไซต์ส่วนใหญ่แล้ว จะมีโพลสำรวจกันเกือบทั้งนั้นเลยครับ วิธีทำก็ไม่ยากอย่างที่คิดครับ ใช้หลักการแสดง/เพิ่ม/ลบ/แก้ไข ฐานข้อมูลธรรมดา (ผมจะใช้ฐานข้อมูล MySQL กับ ภาษา PHP นะครับ) บวกกับการรู้วิธีใช้งาน Google Chart Tools เท่านั้น
       รูปแบบ Chart ที่นิยมมาแสดงผลโพลกันส่วนใหญ่จะใช้ Pie Chart ครับ ดังนั้นบทความนี้ผมจะสอนแค่ Pie Chart เท่านั้น ส่วน Chart อื่นๆ ถ้ามีเวลาผมจะสอนในบทความต่อไปครับ
       สิ่งที่สำคัญในการสร้างPollมีอีกอย่างนึงครับ คือ ระบบล็อกอิน และ สมัครสมาชิก ที่จะต้องมีส่วนเกี่ยวข้องกับ Poll ที่ผมกำลังจะสอนอยู่ในตอนนี้ครับ เพราะเรานำข้อมูลของสมาชิกมากำหนดวิธีการโหวตครับ โดยเราจะให้สมาชิกเท่านั้นที่สามารถโหวตได้ และสามารถโหวตได้คนละครั้งเท่านั้น
มาดูวิธีทำกันครับ

1.อันดับแรกสร้างฐานข้อมูลตามผมเลยครับ ให้สร้างฐานข้อมูลชื่ออะไรก็ได้ (ของผมชื่อ db_exeshop1) กำหนดเป็น UTF8 นะครับ
จากนั้นนำโค๊ดเทเบิลเหล่านี้ไป Query ในฐานข้อมูลของท่านได้เลยครับ

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

-- 
-- ฐานข้อมูล: `db_exshop1`
-- 

-- --------------------------------------------------------

-- 
-- โครงสร้างตาราง `poll_choice`
-- 

CREATE TABLE `poll_choice` (
  `poll_choice_id` int(6) NOT NULL auto_increment,
  `poll_topic_id` int(5) default NULL,
  `poll_choice_name` varchar(200) default NULL,
  `poll_choice_score` int(7) default '0',
  PRIMARY KEY  (`poll_choice_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=10 ;

-- 
-- dump ตาราง `poll_choice`
-- 

INSERT INTO `poll_choice` VALUES (1, 1, 'แมนยู', 1);
INSERT INTO `poll_choice` VALUES (2, 1, 'ลิเวอร์พูล', 0);
INSERT INTO `poll_choice` VALUES (3, 1, 'แมนเซสเตอร์ซิตี้', 1);
INSERT INTO `poll_choice` VALUES (4, 1, 'เชลซี', 0);
INSERT INTO `poll_choice` VALUES (5, 1, 'อาเซนอล', 0);
INSERT INTO `poll_choice` VALUES (6, 2, 'อั้ม พัชราภา', 1);
INSERT INTO `poll_choice` VALUES (7, 2, 'ญาญ่า', 2);
INSERT INTO `poll_choice` VALUES (8, 2, 'ชมพู่ อารยา', 1);
INSERT INTO `poll_choice` VALUES (9, 2, 'ใหม่ ดาวิกา', 3);

-- --------------------------------------------------------

-- 
-- โครงสร้างตาราง `poll_logs`
-- 

CREATE TABLE `poll_logs` (
  `poll_log_id` int(11) NOT NULL auto_increment,
  `mb_id` int(7) default NULL,
  `poll_topic_id` int(5) default NULL,
  `poll_choice_id` int(7) default NULL,
  PRIMARY KEY  (`poll_log_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

-- 
-- dump ตาราง `poll_logs`
-- 

INSERT INTO `poll_logs` VALUES (1, 8, 2, 9);
INSERT INTO `poll_logs` VALUES (2, 8, 1, 3);
INSERT INTO `poll_logs` VALUES (3, 8, 2, 7);

-- --------------------------------------------------------

-- 
-- โครงสร้างตาราง `poll_topic`
-- 

CREATE TABLE `poll_topic` (
  `poll_topic_id` int(5) NOT NULL auto_increment,
  `poll_topic_name` varchar(50) default NULL,
  `poll_topic_start` date default NULL,
  `poll_topic_end` date default NULL,
  PRIMARY KEY  (`poll_topic_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

-- 
-- dump ตาราง `poll_topic`
-- 

INSERT INTO `poll_topic` VALUES (1, 'คุณเป็นแฟนบอลของทีมใด', '2012-12-31', '2013-06-01');
INSERT INTO `poll_topic` VALUES (2, 'คุณชอบดาราหญิงคนไหนมากที่สุด', '2012-12-29', '2013-04-06');

-- --------------------------------------------------------

-- 
-- โครงสร้างตาราง `tb_member`
-- 

CREATE TABLE `tb_member` (
  `mb_id` int(10) NOT NULL auto_increment,
  `mb_name` varchar(50) NOT NULL,
  `mb_email` varchar(50) NOT NULL,
  `mb_tel` varchar(30) NOT NULL,
  `mb_address` text NOT NULL,
  `mb_user` varchar(20) NOT NULL,
  `mb_pass` varchar(20) NOT NULL,
  `mb_image` varchar(20) default NULL,
  `mb_level` char(1) NOT NULL default '1',
  PRIMARY KEY  (`mb_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=10 ;

-- 
-- dump ตาราง `tb_member`
-- 

INSERT INTO `tb_member` VALUES (9, 'นาย ไทเกอร์ ไทยแลนด์', 'tiger@hotmail.com', '0893894334', 'สะพานควาย', 'tiger', '123456', 'tiger100311.jpg', '1');
INSERT INTO `tb_member` VALUES (8, 'Miss. lady gaga', 'lady@hotmail.com', '08433454x', 'รัชดาภิเษก เขตบางซื่อ กทม 10800', 'ladygaga', '123456', 'ladygaga101010.jpg', '1');

2.ไฟล์ login.php สำหรับให้สมาชิกล็อกอิน เพื่อสามารถโหวตแบบสำรวจได้ ให้พิมพ์คำสั่งดังนี้

<?php
$conn=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล
mysql_select_db('db_exshop1');//เลือกฐานข้อมูล
if(!empty($_POST['btLogin'])){
     $user=$_POST['username'];
     $pass=$_POST['password'];
      $rs_login=mysql_query("SELECT mb_id FROM tb_member WHERE mb_user='$user' AND mb_pass='$pass' "); 
  $chk_login=mysql_fetch_assoc($rs_login);
  if(!empty($chk_login['mb_id'])){//รหัสผ่านถูกต้อง
   session_start();
   $_SESSION['ss_user']=$chk_login['mb_id'];
   header('Location:poll_show.php');
  }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  User name
  <input type="text" name="username" id="username" /> 
  Password 
  <input type="password" name="password" id="password" />
  <input type="submit" name="btLogin" id="btLogin" value="Login" />
  <input type="button" name="button" id="button" value="กลับหน้าหลัก" onclick="window.location='poll_show.php'" />
</form>
</body>
</html>

3.ไฟล์ poll_add.php สำหรับเพิ่มข้อมูล Poll จะเป็นหน้าที่ของ admin ครับที่ต้องเพิ่ม ให้ใช้คำสั่งดังนี้ครับ

<?php
$conn=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล
mysql_select_db('db_exshop1');//เลือกฐานข้อมูล
mysql_query('SET NAMES UTF8');//เซตให้รองรับภาษาไทย
if(!empty($_POST['poll_topic_name'])&&!empty($_POST['poll_choice_name'][0])){//ตรวจสอบว่าชื่อหัวข้อและตัวเลือกที่1 ว่าว่างหรือป่าว ถ้าไม่ว่างให้สามารถบันทึกข้อมูลได้
 $poll_topic_name=$_POST['poll_topic_name'];
 $poll_topic_start=$_POST['poll_topic_start'];
 $poll_topic_end=$_POST['poll_topic_end'];
 $poll_choice_name=$_POST['poll_choice_name'];
 $chk_topic_save=mysql_query("INSERT INTO poll_topic(poll_topic_name,poll_topic_start,poll_topic_end) VALUES('$poll_topic_name','$poll_topic_start','$poll_topic_end')") or die(mysql_error());
 $topic_id=mysql_insert_id();
 if($chk_topic_save){
 foreach($poll_choice_name as $key_choice =>  $val_choice){
  if(!empty($val_choice)){
          mysql_query("INSERT INTO poll_choice(poll_topic_id,poll_choice_name) VALUES('$topic_id','$val_choice') "); 
  }
 }
 header('Location:poll_show.php');
 }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เพิ่มแบบสำรวจ</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">

  <table width="500" border="1" align="center">
    <tr>
      <td width="131" align="right">หัวข้อ</td>
      <td width="353"><input name="poll_topic_name" type="text" size="50" /></td>
    </tr>
    <tr>
      <td align="right">แสดงผล
        <label for="poll_choice_name[]"></label></td>
      <td>เริ่ม
        <input name="poll_topic_start" type="text"  size="10"  value="<?=date('Y-m-d')?>" />
        ถึง
          <label for="poll_choice_name[]"></label>
          <input name="poll_topic_end" type="text"  size="10" />
        <br />
  (ปี-เดือน-วัน เช่น 2012-12-9) </td>
    </tr>
    <tr>
      <td align="right">ตัวเลือกที่1</td>
      <td>
      <input name="poll_choice_name[]" type="text"  size="50" /></td>
    </tr>
    <tr>
      <td align="right">ตัวเลือกที่2
    </td>
      <td><input name="poll_choice_name[]" type="text"  size="50" /></td>
    </tr>
    <tr>
      <td align="right">ตัวเลือกที่3</td>
      <td>
<input name="poll_choice_name[]" type="text" size="50" />
</td>
    </tr>
    <tr>
      <td align="right">ตัวเลือกที่4</td>
      <td><input name="poll_choice_name[]" type="text"  size="50" /></td>
    </tr>
    <tr>
      <td align="right">ตัวเลือกที่5</td>
      <td><input name="poll_choice_name[]" type="text"  size="50" /></td>
    </tr>
    <tr>
      <td> </td>
      <td><input type="submit" name="bt_poll_save" id="bt_poll_save" value="บันทึกแบบสำรวจ" />
      <input type="reset" name="reset_poll" id="reset_poll" value="Reset" /></td>
    </tr>
  </table>
</form>
</body>
</html>

4.ไฟล์ poll_show.php ใช้คำสั่งดังนี้ (ผมได้เขียนคอมเม้นท์เอาไว้แล้ว ไม่ขออธิบายมาก)

<?php
$conn=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล
mysql_select_db('db_exshop1');//เลือกฐานข้อมูล
mysql_query('SET NAMES UTF8');//เซตให้รองรับภาษาไทย
$today=date('Y-m-d');
//แสดงผลโพลตามช่วงเวลาที่กำหนด
$rs_poll=mysql_query("SELECT * FROM poll_topic WHERE poll_topic_start<='$today' AND poll_topic_end >= '$today'  ORDER BY poll_topic_id DESC");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>แสดงแบบสำรวจ</title>
</head>

<body>
<table width="750" border="1" align="center">
  <tr>
    <td colspan="2" align="center"><a href="login.php">Login</a> <a href="#">Register</a></td>
  </tr>
  <tr>
    <td align="center"><strong>หัวข้อแบบสำรวจ (POLL)</strong></td>
    <td><strong>วันที่แสดง</strong></td>
  </tr>
  <? 
  if(mysql_num_rows($rs_poll)>0){//ตรวจสอบว่ามีแบบสำรวจหรือป่าว
   while($show_poll=mysql_fetch_assoc($rs_poll)){
?>
  <tr>
    <td><a href="poll_vote.php?poll_id=<?=$show_poll['poll_topic_id']?>"><?=$show_poll['poll_topic_name']?></a></td>
    <td><?=$show_poll['poll_topic_start'].' ถึง '.$show_poll['poll_topic_end']?></td>
  </tr>
  <?php }} else{?>
  <tr>
    <td colspan="2" align="center"><b>ไม่พบข้อมูล</b></td>
  </tr>
  <?php } ?>
</table>
</body>
</html>

5.ไฟล์ poll_vote.php เอาไว้ในสมาชิกกดโหวต ได้จากไฟล์นี้ครับ

<?php
session_start();
$conn=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล
mysql_select_db('db_exshop1');//เลือกฐานข้อมูล
mysql_query('SET NAMES UTF8');//เซตให้รองรับภาษาไทย

if(!empty($_POST['bt_vote']) &&!empty($_POST['poll_choice_id'])){//กดปุ่มโหวตและเลือกตัวเลือกใดตัวเลือกหนึ่ง
    $mb_id=$_SESSION['ss_user'];//รหัสของสมาชิกที่ล็อกอิน
 if(!empty($mb_id)){//ตรวจสอบว่าสมาชิกได้ล็อกอินเรียบร้อยแล้ว
     $rs_logs=mysql_query("SELECT COUNT(poll_log_id) FROM poll_logs WHERE poll_topic_id='$poll_topic_id' ");
  $chk_logs=mysql_fetch_array($rs_logs);
  if($chk_logs[0]==0){//ค่าเป็นศูนย์ แสดงว่ายังไม่ได้โหวต
           $poll_topic_id=$_POST['poll_topic_id'];
           $poll_choice_id=$_POST['poll_choice_id'];
     //Update คะแนนโหวตในตัวเลือก (Choice) ที่เราเลือก โดยบวกค่าเพิ่มไปทีละ 1 คะแนน และให้โหวตคนละครั้งเท่านั้น
     mysql_query("UPDATE poll_choice SET poll_choice_score=poll_choice_score+1 WHERE poll_topic_id='$poll_topic_id' AND  poll_choice_id='$poll_choice_id' ");
     //เก็บค่าการโหวตเอาไว้ตรวจสอบทีหลัง เพื่อป้องกันไม่ให้โหวตซ้ำอีก
     mysql_query("INSERT INTO poll_logs(mb_id,poll_topic_id,poll_choice_id) VALUES($mb_id,$poll_topic_id,$poll_choice_id)");
     echo '<script>alert("โหวตเรียบร้อยแล้ว");</script>';
  }else{//ได้กดโหวตแล้ว
    echo '<script>alert("คุณได้กดโหวตไปแล้ว");</script>';
  }
 }else{//หากยังไม่ล็อกอิน ให้ไปหน้า login.php
  header('Location:login.php');
 }
}

if(!empty($_GET['poll_id'])){//ค่าพารามิเตอร์ที่ส่งมาไม่ว่าง
    $today=date('Y-m-d');
 $mb_id=$_SESSION['ss_user'];//รหัสของสมาชิกที่ล็อกอิน
 if(!empty($mb_id)){//ตรวจสอบว่าสมาชิกได้ล็อกอินเรียบร้อยแล้ว
 $rs_logs=mysql_query("SELECT poll_choice_id FROM poll_logs WHERE poll_topic_id=$poll_id AND mb_id=$mb_id");
 $show_logs=mysql_fetch_assoc($rs_logs);
 }
 $poll_id=$_GET['poll_id'];
 $rs_topic=mysql_query("SELECT poll_topic_id,poll_topic_name,poll_topic_end FROM poll_topic WHERE poll_topic_start<='$today' AND poll_topic_end >= '$today' AND poll_topic_id=".$poll_id);
 if(mysql_num_rows($rs_topic)>0){//ตรวจสอบว่ามีข้อมูลของแบบสำรวจนี้อยู่จริง
 $show_topic=mysql_fetch_assoc($rs_topic);
 $sql_choice='SELECT * FROM poll_choice WHERE poll_topic_id='.$poll_id;
 $rs_choice=mysql_query($sql_choice);
 $choice_data="[['ตัวเลือก','คะแนน'],";//หัวของข้อมูลจำเป็นต้องกำหนด
 $rows=0;
 while($choice_show=mysql_fetch_assoc($rs_choice)){
  if($rows==0){
      $choice_data.="['".$choice_show['poll_choice_name']."',".$choice_show['poll_choice_score']."]";
  }else{
   $choice_data.=",['".$choice_show['poll_choice_name']."',".$choice_show['poll_choice_score']."]";
  }
  $rows++;
 }
 $choice_data.=']';
 //จะได้ผลลัพธ์ เช่น $choice_data=[['ตัวเลือก','คะแนน'],['อั้ม',100],[ญาญ่า,200]];
 }else{//ถ้าไม่มีข้อมูลให้กลับไปหน้าแสดงข้อมูล
  header('Location:poll_show.php');
 }
}else{//ถ้าค่าพารามิเตอร์ที่ส่งมาเป็นค่าว่าง
header('Location:poll_show.php'); 
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ให้คะแนนแบบสำรวจ</title>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
      <script type="text/javascript">
      function drawChart() {
      var data = google.visualization.arrayToDataTable(<?=$choice_data?>);
   //โหลดข้อมูลที่เราส่งค่าจากPHPในตัวแปร $choice_data ข้อมูลต้องอยู่ในรูปแบบ Array อย่างนี้นะ เช่น [['ตัวเลือก','คะแนน'],['อั้ม',100],[ญาญ่า,200]]
        var options = {
          title: '<?=$show_topic['poll_topic_name']?>',//หัวข้อโพล
   'is3D':true//แสดงผลแบบ 3D แจ่มมากๆ แต่ถ้าไม่กำหนด ค่าดีฟอลต์จะแสดงผลแบบ 2D น๊ะจ๊ะ
        };
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
       // var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));//แสดงผลแบบรูปภาพ
        chart.draw(data, options);//เรียกเมธอดวาด(Draw) Chart โดยส่งพารามิเตอร์เข้าไป 2 ตัว คือ ตัวแปร data กับ ตัวแปร options
      }
   google.load('visualization', '1', {packages:["corechart"]});//packages:["corechart"] แสดงผลปกติ //packages:["imagechart"] แสดงเป็นรูปภาพ
     google.setOnLoadCallback(drawChart);
    </script>
</head>

<body>
<br />
<form id="form1" name="form1" method="post" action="?poll_id=<?=$_GET['poll_id']?>">
<input name="poll_topic_id" type="hidden" value="<?=$show_topic['poll_topic_id']?>" />

  <table width="500" border="0" align="center">
    <tr>
      <td colspan="2" align="right">
      <div id="chart_div" style="height:350px;"></div>

      </td>
    </tr>
    <tr>
    <td align="right" bgcolor="#FFCCFF"><strong>หัวข้อ<br />
    </strong></td>
    <td bgcolor="#FFCCFF"><?=$show_topic['poll_topic_name']?></td>
  </tr>
  <tr>
    <td align="right" valign="top" bgcolor="#FFCCFF"><strong>ตัวเลือก</strong></td>
    <td bgcolor="#FFCCFF">
      <?php 
   $rs_choice=mysql_query($sql_choice);
   while($show_choice=mysql_fetch_assoc($rs_choice)){?>
      <input type="radio" name="poll_choice_id"  value="<?=$show_choice['poll_choice_id']?>"
       <?=$show_logs['poll_choice_id']==$show_choice['poll_choice_id']?'checked':''//ตรวจสอบว่าตรงกับChoiceที่เราได้เลือกไปแล้วหรือป่าว?>   /> 
      <?=$show_choice['poll_choice_name']?><br />
      <?php } ?>
      <input type="hidden" name="poll_topic_id" id="poll_topic_id"  value="<?=$show_topic['poll_topic_id']?>"/></td>
  </tr>
  <tr>
    <td bgcolor="#FFCCFF"> </td>
    <td bgcolor="#FFCCFF"><input type="submit" name="bt_vote" id="bt_vote" value="โหวต" />
      <input type="button" name="button2" id="button2" value="กลับไปหน้าแรก" onclick="window.location='poll_show.php'" /> 
      <a href="login.php">Login</a></td>
  </tr>
</table>
</form>
</body>
</html>

       นี่เป็นตัวอย่างสำหรับเป็นกรณีศึกษานะครับ ยังไม่ค่อยสมบูรณ์มาก ส่วนที่ไม่ได้สอนเพิ่มคือ การแก้ไข ลบข้อมูล แบบสำรวจ (Poll) ซึ่งจะเป็นระบบของ Admin นะครับ รวมถึงการเพิ่มโพลด้วย หวังว่าคงนำบทความของผมไปต่อยอดได้ครับ ถ้าไม่เข้าใจอะไรตรงไหน สามารถสอบถามผมได้จากกล่องคอมเมนต์ด้านล่างได้เลยครับ ผมยินดีที่จะตอบคำถามทุกเมื่อยามมีโอกาสนะครับ ^^
       ขอบคุณที่ติดตามอ่านบทความของผม สวัสดีปีใหม่ 2013 ขอให้สุขภาพแข็งแรงกันถ้วนหน้าครับ เพื่อจะได้มีแรงต่อสู้ชีวิตในปีใหม่ปีหน้าและปีต่อๆไปครับ