How to create Voting System / Poll System using Jquery and Ajax in PHP.

POSTED

AUTHOR: VARUN SINGH

In this tutorials, I am going to explore how to create Voting sysytem / Poll system in PHP using Jquery and ajax. Voting / Poll system is very useful to know users choice on web. This is system is mostly use in web portal like news website. In this tutorial I am using Jquery and Ajax with Php to store vote data in database without page refresh.
In this voting system I have used three radio button with name. If you select any radio button and click on submit button, total count of that radio button automatically will be increase without reloading the page. Because of i have used Jquery and Ajax to submit data or getting data from table without page refresh.
To change the Voting System question and their related option, I am using update page for it. In this page I am using four input fields. First field is used for update question, and rest of other tree fields are used for update options.


Here is the output of the page:

insert-delete-update-data-php


download view


Implementation of Database and Tables:

First you need to create a Database poll. After creating database (poll), you will have to create a Table vote. Here Table vote has four columns ( id, option1, option2 and option3). These fields are use to store the voting count number of their options.
Secondly you will need to create Table name opinion. Here Table opinion has five columns ( op_id, op_title, op_1, op_2 and op_3) to store voting question and their related options.


• vote.sql: This table contains four columns (id, option1,option2, option3,). To create this table you will have to execute code that is given below:

CREATE TABLE `vote` (
  `id` int(11) NOT NULL,
  `option1` int(11) NOT NULL DEFAULT '1',
  `option2` int(11) NOT NULL,
  `option3` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `vote`
--

INSERT INTO `vote` (`id`, `option1`, `option2`, `option3`) VALUES
(1, 26, 1, 1);


ALTER TABLE `vote`
  ADD PRIMARY KEY (`id`);


ALTER TABLE `vote`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

• opinion.sql: This table contains four columns (op_id, op_title, op_1, op_2, op_3). To create this table you will have to execute code that is given below:

CREATE TABLE IF NOT EXISTS `opinion` (
  `op_id` int(5) NOT NULL AUTO_INCREMENT,
  `op_title` varchar(500) CHARACTER SET utf8 NOT NULL,
  `op_1` varchar(20) CHARACTER SET utf8 NOT NULL,
  `op_2` varchar(20) CHARACTER SET utf8 NOT NULL,
  `op_3` varchar(20) CHARACTER SET utf8 NOT NULL,
  PRIMARY KEY (`op_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `opinion`
--

INSERT INTO `opinion` (`op_id`, `op_title`, `op_1`, `op_2`, `op_3`) VALUES
(1, 'Who will win elections of 2017 in Uttar Pradesh?', 'BJP', 'CONGRESS', 'OTHERS');


• index.php: In this file I have used JavaScript, Jquery Library and some Php code. I have used JavaScript code to getting data of state and city from add.php using help of Ajax. It also displays the returned HTML of add.php file.


<html>
<head>	
<title>Poll system  in php using jquery and ajax - coderglass</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#update').click(function(){
	 	vote = $('#vote:checked').val();
		
 		$.ajax({
			type:'post',
			data:{vote:vote},
			url:"add.php",
			success:function(data){
			inc = data;
			$('.'+vote).html(inc);
 			}
		});	
	  
	});
});
</script>
</head>
<body>
<center>
<br>
<img src="logo.png" width="300" height="70" />
<h1>Poll System in php using jquery and ajax</h1>
<h3>To update Voting  Question: 
<a  style="text-decoration: none;" href="update.php"><b>CLICK HERE</b>
</a>
</h3>

<?php
$db = mysqli_connect("localhost","root","","poll")or die("err in db");
$csql = "select * from vote";
$row = mysqli_query($db,$csql)or die("err in connection");
$data = mysqli_fetch_assoc($row);

$csql1 = "select * from opinion";
$row1 = mysqli_query($db,$csql1)or die("err in connection");
$data1 = mysqli_fetch_assoc($row1);

?>
<form method="post">
<hr>
<h2><?=$data1['op_title']?></h2>
<br>
<input type="radio" name="vote" id="vote" value="option1" />
<b><?=$data1['op_1']?></b> 
(<span class="option1"><?=$data['option1']?></span>) &nbsp;&nbsp;
<input type="radio" name="vote"  id="vote" value="option2" />
<b><?=$data1['op_2']?></b>
(<span class="option2"><?=$data['option2']?></span>) &nbsp;&nbsp;
<input type="radio" name="vote"  id="vote" value="option3" />
<b><?=$data1['op_3']?></b>
(<span class="option3"><?=$data['option3']?></span>)<br><br>
<input   type="button" value="Vote" name="update"  id="update" />
<hr>
</form> 
<h3>&copy;www.coderglass.com  (Designed by Varun Singh)</h3>
</center>
</body>
</html>


• add.php: In this file I have used MySql query to update data into TABLE vote. And also get data from same table to display count on page using Ajax and Jquery.


<?php
$db=mysqli_connect("localhost","root","","poll")or die("err in connection");
$ch = $_REQUEST['vote'];
$csql = "select * from vote";
$row = mysqli_query($db,$csql)or die("err in connection");
$data = mysqli_fetch_assoc($row);
 if($ch=='option1') {
 	$sql = "update vote set option1=".($data['option1']+1);
	$res = $data['option1']+1;
 } else if($ch=='option2') {
 	$sql = "update vote set option2=".($data['option2']+1);
	$res = $data['option2']+1;
 } else if($ch=='option3') {
 	$sql = "update vote set option3=".($data['option3']+1);
 	$res = $data['option3']+1;
 }
 mysqli_query($db,$sql)or die("err in query");
 echo $res;
?>


• update.php: In this file I have used MySql query to upadte Opinion Poll Question and related option of opinion poll into TABLE opinion. It also set the row value of Table vote to zero.


<html>
<head>
<title>update voting</title>
</head>
<body>
<center><img src="logo.png" width="300" height="70" /><br><br></center>

<form method="post" action="update.php" enctype="multipart/form-data">
<table align="center" border="10" width="900">
    <tr>
      <td align="center" colspan="5" bgcolor="yellow">
	  <h1>Insert Your Opinion Poll</h1>
	  </td>
    </tr>		  
    <tr>
	 <td><b>Opinion Question<b>
	 </td>
	 <td>
	 <input style="height:40px;" type="text" name="question" size="60">
	 </td>
    </tr>
    <tr>
	<td><b>Option 1<b></td>
	<td><input type="text" name="op1" size="30"></td>
                                 
	</tr>
    <tr>
	<td><b>Option 2</td>
	<td><input type="text" name="op2" size="30"></td>
    </tr>
    <tr>
	<td><b>Option 3</td>
	<td><input type="text" name="op3" size="30"></td>
                                 
	</tr>
	<tr><br>
	<td align="center" colspan="5">
	<input type="submit" name="submit" value="Insert">
	</td> 
	</tr>
		
</table>
</form>			
</body>
</html>


<?php 
	
 $con = mysqli_connect("localhost","root","","poll")or die("err in db");
 
 if (isset($_POST['submit'])){

	$question=$_POST['question'];
    $option1=$_POST['op1'];
    $option2=$_POST['op2'];
    $option3=$_POST['op3'];
    $count=0;
    $update_query = "update opinion set op_title='$question', op_1='$option1', op_2='$option2', op_3='$option3' ";
    $update_query1 = "update vote set  bjp='$count', congress='$count', other='$count' ";
	$run1=mysqli_query($con,$update_query1);
	if(mysqli_query($con,$update_query)){
	echo "<script>window.open('index.php?updated= ads has been updated','_self')</script>";
	}
	}
	
?>


The End:

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Google + and Twitter. I need your support to continue.


Comments: