Do you know how to create online voting system in PHP with Ajax. So, here We have make a Live Online Poll System for the PHP programmer who can vote for their favorite PHP framework. For choose PHP framework we have use HTML form radio options. This type of poll or voting system has been used by many websites and most of the news sites has been use poll system for making survey on particular topic. Here we have make survey of popular php framework for year 2018. So, if you are creating any website and in that site you want to develop this type of polling system then you have come here at the best place.
By using this source code anybody can easily develop simple poll or voting system by using PHP script, mysql database with Ajax Jquery. So, in this post you can learn how to make poll system with PHP, Mysql and Ajax. Here we will create a live example of polling system with display live poll result on webpage. Following are the file structure for this Live Poll System in PHP Mysql using Ajax.
- index.php
- database_connection.php
- fetch_poll_data.php
- poll.php
Step 1 - Create Mysql Table for Store Poll data
First we want to make tbl_poll table for storing programmer polling or voting data on particular php framework.
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_poll`
--
CREATE TABLE `tbl_poll` (
`poll_id` int(11) NOT NULL,
`php_framework` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_poll`
--
ALTER TABLE `tbl_poll`
ADD PRIMARY KEY (`poll_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_poll`
--
ALTER TABLE `tbl_poll`
MODIFY `poll_id` int(11) NOT NULL AUTO_INCREMENT;
Step 2 - Create Simple Poll
After creating database in mysql, now we want to make simple poll for php framework. For this we have use simple HTML input radio option. By choosing radio option user can submit their poll to server.
<!--index.php--!>
<html>
<head>
<title>Live Poll System in PHP Mysql using Ajax</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<h2 align="center">Live Poll System in PHP Mysql using Ajax</h2><br />
<div class="row">
<div class="col-md-6">
<form method="post" id="poll_form">
<h3>Which is Best PHP Framework in 2018?</h3>
<br />
<div class="radio">
<label><h4><input type="radio" name="poll_option" class="poll_option" value="Laravel" /> Laravel</h4></label>
</div>
<div class="radio">
<label><h4><input type="radio" name="poll_option" class="poll_option" value="CodeIgniter" /> CodeIgniter</h4></label>
</div>
<div class="radio">
<label><h4><input type="radio" name="poll_option" class="poll_option" value="CakePHP" /> CakePHP</h4></label>
</div>
<div class="radio">
<label><h4><input type="radio" name="poll_option" class="poll_option" value="Symfony" /> Symfony</h4></label>
</div>
<div class="radio">
<label><h4><input type="radio" name="poll_option" class="poll_option" value="Phalcon" /> Phalcon</h4></label>
</div>
<br />
<input type="submit" name="poll_button" id="poll_button" class="btn btn-primary" />
</form>
<br />
</div>
<div class="col-md-6">
<br />
<br />
<br />
<h4>Live Poll Result</h4><br />
<div id="poll_result"></div>
</div>
</div>
<br />
<br />
<br />
</div>
</body>
</html>
Step 3 - Fetch Poll Data and Displsy on web page
After making simple poll by using HTML, now first we want to fetch poll data from table and display on web page. For Fetch data we have use Ajax and by using ajax we will send request to PHP script for fetch poll data and display on web page. For display poll or vote result we have use Bootstrap Progressbar. So here it will display poll or voting result in Bootstrap progress bar in percentage format.
<?php
//index.php
?>
<script>
$(document).ready(function(){
fetch_poll_data();
function fetch_poll_data()
{
$.ajax({
url:"fetch_poll_data.php",
method:"POST",
success:function(data)
{
$('#poll_result').html(data);
}
})
}
});
</script>
<?php
//fetch_poll_data.php
include('database_connection.php');
$php_framework = array("Laravel", "CodeIgniter", "CakePHP", "Phalcon", "Symfony");
$total_poll_row = get_total_rows($connect);
$output = '';
if($total_poll_row > 0)
{
foreach($php_framework as $row)
{
$query = "
SELECT * FROM tbl_poll WHERE php_framework = '".$row."'
";
$statement = $connect->prepare($query);
$statement->execute();
$total_row = $statement->rowCount();
$percentage_vote = round(($total_row/$total_poll_row)*100);
$progress_bar_class = '';
if($percentage_vote >= 40)
{
$progress_bar_class = 'progress-bar-success';
}
else if($percentage_vote >= 25 && $percentage_vote < 40)
{
$progress_bar_class = 'progress-bar-info';
}
else if($percentage_vote >= 10 && $percentage_vote < 25)
{
$progress_bar_class = 'progress-bar-warning';
}
else
{
$progress_bar_class = 'progress-bar-danger';
}
$output .= '
<div class="row">
<div class="col-md-2" align="right">
<label>'.$row.'</label>
</div>
<div class="col-md-10">
<div class="progress">
<div class="progress-bar '.$progress_bar_class.'" role="progressbar" aria-valuenow="'.$percentage_vote.'" aria-valuemin="0" aria-valuemax="100" style="width:'.$percentage_vote.'%">
'.$percentage_vote.' % programmer like <b>'.$row.'</b> PHP Framework
</div>
</div>
</div>
</div>
';
}
}
echo $output;
function get_total_rows($connect)
{
$query = "SELECT * FROM tbl_poll";
$statement = $connect->prepare($query);
$statement->execute();
return $statement->rowCount();
}
?>
Step 4 - Submit Poll or Voting Data
Lastly in polling and voting system by using PHP with Ajax, we want to submit poll request to server. For this we have use Ajax. By using Ajax we have send poll or vote request to PHP server script and it will insert poll or vote data into mysql database. After successfully submit poll request it will display live polling or voting result on web page.
<?php
//index.php
?>
<script>
$(document).ready(function(){
$('#poll_form').on('submit', function(event){
event.preventDefault();
var poll_option = '';
$('.poll_option').each(function(){
if($(this).prop("checked"))
{
poll_option = $(this).val();
}
});
if(poll_option != '')
{
$('#poll_button').attr("disabled", "disabled");
var form_data = $(this).serialize();
$.ajax({
url:"poll.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#poll_form')[0].reset();
$('#poll_button').attr('disabled', false);
fetch_poll_data();
alert("Poll Submitted Successfully");
}
});
}
else
{
alert("Please Select Option");
}
});
});
</script>
<?php
//poll.php
include('database_connection.php');
if(isset($_POST["poll_option"]))
{
$query = "
INSERT INTO tbl_poll
(php_framework) VALUES (:php_framework)
";
$data = array(
':php_framework' => $_POST["poll_option"]
);
$statement = $connect->prepare($query);
$statement->execute($data);
}
?>
So, this is whole process for developing Live Voting or Polling system by using Ajax with PHP Mysql. If you want to get complete source code of Ajax Poll script with PHP, Mysql and Jquery, please download from this below link.
I just message you thru facebook, and I hope you reply Thankyou!
ReplyDeleteAwesome I was looking for this
ReplyDeleteHi there i have a query regarding how we can show progress of each client separately as per their activities in their panel.
ReplyDeleteThanks in advance
Hello Admin, How to check once vote for once people or IP address. Thank you.
ReplyDeleteawesome
ReplyDeleteHi,there is no colour in my view :(
ReplyDeleteDear Admin, how can the code allow viewers to vote only once? Also, how can the poll allow viewers to make live suggestions of the answers which is then added to the list of options going forward?
ReplyDeletenot working with me
ReplyDelete