Online Voting system using AngularJS, PHP and MySQL | Tutorial

Online-Vote

Create a Simple Online Voting System

Online survey basically used to recognize the decision of web clients. Online overview or survey is for the most part utilized on the web today, and there are numerous administrations are accessible which gives an implicit survey framework. Notwithstanding, you can without much of a stretch actualize the internet casting a ballot framework utilizing PHP and MySQL. In the event that you need to make your own survey and casting a ballot framework, this tutorial will assist you with creating a basic, clean surveying or casting a ballot framework utilizing PHP.

In this Tutorial, we will demonstrate to you generally accepted methods to assemble a basic survey content in PHP. The model content uses PHP and MySQL to make a survey framework with no JavaScript or jQuery. Likewise, this casting a ballot content store survey information, survey’s alternatives and votes into the database utilizing PHP and MySQL.

Live Demo   Download Source Code

Index.html

<body>
    
    <div class="navbar navbar-default" id="navbar">
    <div class="container" id="navbar-container">
	<div class="navbar-header">
		<a href="https://www.lisenme.com" class="navbar-brand">
			<small>
				Voting System Using AngularJS + PHP + MySQL 
			</small>
		</a><!-- /.brand -->
		
	</div><!-- /.navbar-header -->
	<div class="navbar-header pull-right" role="navigation">
        <a href="https://www.lisenme.com/category/tutorials/" class="btn btn-info nav-button-margin"> <i class="glyphicon glyphicon-book"></i>&nbsp;Tutorial </a>
        <a href="#" class="btn btn-primary nav-button-margin"> <i class="glyphicon glyphicon-download"></i>&nbsp;Download Project</a>
	</div>
	</div>
	</div>
	<div class="row">
    	<div class="container">
    		<div class="col-sm-12">
    			<div>
                
                
 <blockquote><h1 style="
    color: #00679c;
">Vote Your Famous Social Media</h1></blockquote>
 <h5>Click on the up/down arrow against each entry bellow to Vote</h5>
<ul class="thumbnails" ng-controller="votingCtrl">
    <li ng-repeat="post in posts" class="clearfix">
        <div class="col-md-1 voting well" style="
    background-color: #5bc0de;
">
            <div class="votingButton" ng-click="upVote(post);">
                <i class="glyphicon glyphicon-chevron-up" style="
    font-size: 17px;
    color: #144ded;
    margin: 13px;
    background-color: khaki;
    border-radius: 2px;
    padding-left: 1px;
"></i>
            </div>
            <div class="badge badge-inverse" style="
    background-color: cornsilk;
    margin: 8px;
    color: black;
    font-size: 16px;
">
                <div>{{post.votes}}</div>
            </div>
            <div class="votingButton" ng-click="downVote(post);">
                <i class="glyphicon glyphicon-chevron-down" style="
    font-size: 17px;
    color: #144ded;
    margin: 13px;
    background-color: khaki;
    border-radius: 2px;
    padding-left: 1px;
"></i>
            </div>
        </div>
        <div class="well col-md-6" style="
    padding: 61px;
    background-color: #f2e997;
    color: black;
">
            <h4>{{post.title}}</h4>
            
        </div>
    </li>
</ul>


                </div>
    		</div>
    	</div>
    </div>
    	
<script src="js/angular.min.js"></script>
<script src="app/app.js"></script>
</body>

Config.php

<?php 
$DB_HOST = '127.0.0.1';
$DB_USER = 'user;
$DB_PASS = 'password';
$DB_NAME = 'lisenme';
$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
?>

UpdateVote.php

<?php
include('../includes/config.php');
$id = $_GET['id'];
$votes = $_GET['votes'];
$query="update posts set votes='$votes' where id='$id'";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);
// $affected = $mysqli->affected_rows;
?>

getPosts.php

<?php
include('../includes/config.php');

$query="select id,title,description,url,votes from posts order by id desc";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);

$arr = array();
if($result->num_rows > 0) {
	while($row = $result->fetch_assoc()) {
		$arr[] = $row;	
	}
}

# JSON-encode the response
$json_response = json_encode($arr);

// # Return the response
echo $json_response;

?>

app.js

var app = angular.module('myApp',[]);
app.controller('votingCtrl', function($scope, $http) {
  $http.post('ajax/getPosts.php').success(function(data){
    $scope.posts = data;
  });
  $scope.upVote = function(post){
    post.votes++;
    updateVote(post.id,post.votes);
  };
  $scope.downVote = function(post){
    post.votes--;
    updateVote(post.id,post.votes);
  };
  function updateVote(id,votes){
    $http.post('ajax/updateVote.php?id='+id+'&votes='+votes);
  }
});

Mysql

CREATE TABLE IF NOT EXISTS `posts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(300) NOT NULL,
  `description` varchar(500) NOT NULL,
  `url` varchar(200) NOT NULL,
  `votes` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `posts`
--

INSERT INTO `posts` (`id`, `title`, `votes`) VALUES
(1, 'Facebook', 0),
(2, 'Google+', 0),
(3, 'LinkedIn', 0),
(4, 'Twitter', 0),
;

You May Also Like

About the Author: Ranjith Kumar A

4 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x