Membuat Polling menggunakan Ajax JQuery dan PHP

by · October 17, 2015


Hai ketemu lagi bersama saya pria tampan asli sunda hehe,,,, pengen update tutorial nih, kali aja bermanfaat dan tutorial kali ini adalah Membuat Polling menggunakan Ajax JQuery dan PHP.

Ok langsung saja kita buat database polling dulu dan buat 3 tabel seperti dibawah ini :

CREATE TABLE IF NOT EXISTS `pertanyaan` (
  `id` int(11) NOT NULL,
  `ques` text NOT NULL,
  `tgl_on` datetime NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
 
CREATE TABLE IF NOT EXISTS `setting` (
  `id` int(11) NOT NULL,
  `ques_id` int(11) NOT NULL,
  `value` varchar(300) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;
 
CREATE TABLE IF NOT EXISTS `votes` (
  `id` int(11) NOT NULL,
  `option_id` int(11) NOT NULL,
  `voted_tgl` datetime NOT NULL,
  `ip` varchar(16) DEFAULT NULL
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;

Sekarang kita buat file index.php nya masukan script dibawah ini

<div class="container">
 
<div class="col-xs-5 col-sm-offset-3 col-sm-5">
 
<h1>Polling dengan Ajax</h1>
<div id="pollcontainer" > 
</div>
<p id="loader" >Mohon tunggu...</p>
 
 
</div>
</div>	<!-- End Conatiner -->

Setelah selesai kita masukan jquery seperti dibawah ini

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
 
	<script type="text/javascript" >
$(function(){
	var loader=$('#loader');
	var pollcontainer=$('#pollcontainer');
	loader.fadeIn();
	//Load dari form
	$.get('poll.php', '', function(data, status){
		pollcontainer.html(data);
		animateResults(pollcontainer);
		pollcontainer.find('#viewresult').click(function(){
			//jika pengguna ingin melihat hasil
			loader.fadeIn();
			$.get('poll.php', 'result=1', function(data,status){
				pollcontainer.fadeOut(1000, function(){
					$(this).html(data);
					animateResults(this);
				});
				loader.fadeOut();
			});
 
			return false;
		}).end()
		.find('#pollform').submit(function(){
			var selected_val=$(this).find('input[name=poll]:checked').val();
			if(selected_val!=''){
				//post data hanya yang di pilih 
				loader.fadeIn();
				$.post('poll.php', $(this).serialize(), function(data, status){
					$('#formcontainer').fadeOut(100, function(){
						$(this).html(data);
						animateResults(this);
						loader.fadeOut();
					});
				});
			}
 
			return false;
		});
		loader.fadeOut();
	});
 
	function animateResults(data){ //untuk bar 
		$(data).find('.bar').hide().end().fadeIn('slow', function(){
							$(this).find('.bar').each(function(){
								var bar_width=$(this).css('width');
								$(this).css('width', '0').animate({ width: bar_width }, 1000);
							});
						});
	}
 
});
</script>


Penjelasnya sudah saya masukan di dalam script jadi tinggal dipelajari aja. Sekarang tampilan script lengkap index.php seperti dibawah ini :

<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="Keywords" content="Menjumlahkan Character di Textarea dengan Jquery">
	<meta name="Description" content="Menjumlahkan Character di Textarea dengan Jquery">
    <meta name="author" content="">
 
    <title>Membuat AJAX Polling Menggunakan jQuery dan PHP</title>
 
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
 
    <!-- Custom CSS -->
    <link href="css/shop-homepage.css" rel="stylesheet">
 
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
 
</head>
 
<body>
 
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">AndezNET</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="index.php">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Service</a>
                    </li>
					<li>
                        <a href="#">Colection</a>
                    </li>
					<li>
                        <a href="#">Contact</a>
                    </li>
 
					<li>
                        <a href="#"></a>
                    </li>
 
					<li>
                        <a href="#"></a>
                    </li>
 
 
 
                </ul>
 
 
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
 
 
    </nav>
 
    <!-- Page Content -->
 
 
		<div class="container">
 
			<div class="col-xs-5 col-sm-offset-3 col-sm-5">
 
			<h1>Polling dengan Ajax</h1>
			<div id="pollcontainer" > 
			</div>
			<p id="loader" >Mohon tunggu...</p>
 
 
			</div>
		</div>	<!-- End Conatiner -->	
 
    <!-- /.container -->
 
    <div class="container">
 
        <hr>
 
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; andeznet.com 2015</p>
                </div>
            </div>
        </footer>
 
    </div>
    <!-- /.container -->
 
    <!-- jQuery -->
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
 
	<script type="text/javascript" >
$(function(){
	var loader=$('#loader');
	var pollcontainer=$('#pollcontainer');
	loader.fadeIn();
	//Load dari form
	$.get('poll.php', '', function(data, status){
		pollcontainer.html(data);
		animateResults(pollcontainer);
		pollcontainer.find('#viewresult').click(function(){
			//jika pengguna ingin melihat hasil
			loader.fadeIn();
			$.get('poll.php', 'result=1', function(data,status){
				pollcontainer.fadeOut(1000, function(){
					$(this).html(data);
					animateResults(this);
				});
				loader.fadeOut();
			});
 
			return false;
		}).end()
		.find('#pollform').submit(function(){
			var selected_val=$(this).find('input[name=poll]:checked').val();
			if(selected_val!=''){
				//post data hanya yang di pilih 
				loader.fadeIn();
				$.post('poll.php', $(this).serialize(), function(data, status){
					$('#formcontainer').fadeOut(100, function(){
						$(this).html(data);
						animateResults(this);
						loader.fadeOut();
					});
				});
			}
 
			return false;
		});
		loader.fadeOut();
	});
 
	function animateResults(data){ //untuk bar 
		$(data).find('.bar').hide().end().fadeIn('slow', function(){
							$(this).find('.bar').each(function(){
								var bar_width=$(this).css('width');
								$(this).css('width', '0').animate({ width: bar_width }, 1000);
							});
						});
	}
 
});
</script>
 
 
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
 
 
 
 
 
 
</body>
 
</html>


Setelah index.php selesai kita buat file baru yaitu poll.php seperti dibawah ini, penjelasnya juga sudah saya cantumkan didalam script tinggal dipelajari aja.

<?php
error_reporting(0);
//Update database sesuai webserver anda
$conn=mysql_connect('localhost', 'root', '12345') or die("Can't connect to mysql host");
//pilih database yang akan di gunakan
mysql_select_db('polling') or die("Can't connect to DB");
 
//kita buat variable post
$p_poll     	= isset($_POST['poll']) ? $_POST['poll'] : "";    
$p_pollid     	= isset($_POST['pollid']) ? $_POST['pollid'] : "";
$result    		= isset($_GET['result']) ? $_GET['result'] : "";
 
if(!$p_poll  || !$p_pollid){
	$query=mysql_query("SELECT id, ques FROM pertanyaan ORDER BY id DESC LIMIT 1"); // query untuk menampilkan pertanyaan
	while($row=mysql_fetch_assoc($query)){
		//tampilan pertanyaan
		echo "<p class=\"pollques\" >".$row['ques']."</p>";
		$poll_id=$row['id'];
	}
 
	if($result==1 || $_COOKIE["voted".$poll_id]=='yes'){
		//Jika sudah vote maka akan menampilkan hasil
		showresults($poll_id);
		exit;
	}
	else{
	//Tampilan pilihan dengan radio button
		$query=mysql_query("SELECT id, value FROM setting WHERE ques_id=$poll_id");
		if(mysql_num_rows($query)){
			echo '<div id="container" ><form method="post" id="pollform" action="'.$_SERVER['PHP_SELF'].'" >';
			echo '<input type="hidden" name="pollid" value="'.$poll_id.'" />';
			while($row=mysql_fetch_assoc($query)){
				echo '<p><input type="radio" name="poll" value="'.$row['id'].'" id="option-'.$row['id'].'" /> 
				<label for="option-'.$row['id'].'" >'.$row['value'].'</label></p>';
			}
			echo '<p><input type="submit"  class="btn btn-success" value="Submit" /></p></form>';
			echo '<p><a href="'.$_SERVER['PHP_SELF'].'?result=1" id="viewresult" class="btn btn-info">Lihat Hasil</a></p></div>';
		}
	}
}
 
else{
	if($_COOKIE["voted".$p_pollid]!='yes'){
 
		//Untuk memeriksa apakah option sudah di pilih jika sudah maka akan di insert ke database 
		$query=mysql_query("SELECT * FROM setting WHERE id='".intval($_POST["poll"])."'");
		if(mysql_num_rows($query)){
			$query="INSERT INTO votes(option_id, voted_tgl, ip) VALUES('".$_POST["poll"]."', '".date('Y-m-d H:i:s')."', '".$_SERVER['REMOTE_ADDR']."')";   // yang akan di insert ke database adalah pilihan jawaban, tanggal dan ip addreess nya
			if(mysql_query($query))
			{
				//kita setting cookie nya agar user tidak melakukan poling lagi jika sudang melakukan poling
				setcookie("voted".$_POST['pollid'], 'yes', time()+86400*300);				
			}
			else
				echo "Maaf ada kesalah pada query : ".mysql_error(); // jika ada kesalahan pada query
		}
	}
	showresults(intval($p_pollid)); 
}
 
function showresults($poll_id){  // menampilkan hasil poling
	global $conn;
	$query=mysql_query("SELECT COUNT(*) as totalvotes FROM votes WHERE option_id IN(SELECT id FROM setting WHERE ques_id='$poll_id')");
	while($row=mysql_fetch_assoc($query))
		$total=$row['totalvotes'];
	$query=mysql_query("SELECT setting.id, setting.value, COUNT(*) as votes FROM votes, setting WHERE votes.option_id=setting.id AND votes.option_id IN(SELECT id FROM setting WHERE ques_id='$poll_id') GROUP BY votes.option_id"); // query menghitung polling
	while($row=mysql_fetch_assoc($query)){
		$percent=round(($row['votes']*100)/$total);
		echo '<div><p>'.$row['value'].' ('.$percent.'%, '.$row['votes'].' votes)</p>';
		//Untuk menampilakn progress barr dengan class bostrap
		echo '<div class="progress" >';
		echo '<div class="progress-bar" role="progressbar"';
 
		if($p_poll==$row['id']) echo ' Vote Anda';
		echo '" aria-valuenow="'.$percent.'" aria-valuemin="0" aria-valuemax="100" style="width: '.$percent.'%; " > 
		<span class="sr-only">70% Complete</span>
		</div></div></div>';
	}
	echo '<p>Total Votes: '.$total.'</p>';  
}

Jika sudah silahkan dicoba, jika berhasil maka akan muncul seperti dibawah ini .

polling dengan ajax1

 

Ketika di pilih & klik submit maka akan muncul seperti dibawah ini.

polling dengan ajax

Nah selesai deh, jika penjelasan saya ada yang kurang silahkan comment  dan jika ingin DOWNLOAD script nya bisa klik DISINI, dan bila ingin melihat DEMO nya bisa cek  DISINI

Sekian dari saya, Happy coding & Programing

Tags:

You may also like...

4 Responses

  1. kak dolop says:
    October 17, 2015 at 3:23 pm

    barokah deh buat omnya, izin download dan mau dipelajari nih.

    Reply
  2. Boku no Hero Academia says:
    May 10, 2016 at 1:26 pm

    Keren langsung mau ane praktekin

    Reply

Leave a Reply

Your email address will not be published.