Voting system similar to stackoverflow using Angularjs PHP and Mysql

Cover image

We will try to create a simple voting system app similar to StackOverflow.com using AngularJS, PHP and MySQL. I will put the code to download as well as a demonstration of the end product as we approach the finishing point of the AngularJS Web App. This app will accept vote from users and store it into MySQL database using PHP.

Live Demo

The file structure of our app will be following

  • angular-voting/index.html [The main file]
  • angular-voting/ajax [Server side php code is kept here]
  • angular-voting/app [The angularjs application code will be saved here]
  • angular-voting/css [The required stylesheet file just for styling our application using Bootstrap]
  • angular-voting/includes [The required configuration files like database connection infotmation, constants]

Lets first set up the database.

Download the source code and import angular-voting.sql to your MySQL database.

The database we will be using is a simple one. We just want to keep the blog post information and the voteCount. We give the table a simple name “posts“.

Posts Table

This contains all the posts information with voteCount.

CREATE DATABASE IF NOT EXISTS angularcode\_voting;

USE angularcode\_voting;

\-- --------------------------------------------------------

\--

\-- Table structure for table \`posts\`

\--

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\`, \`description\`, \`url\`, \`votes\`) VALUES

(1, 'A simple AngularJS web app that converts text to url format', 'We are going to create a very simple yet powerful web app using AngularJS from Google. Our app will take any input and will convert it into URL format instantly. We will be creating a filter named clean. We can use this filter anywhere in our application like following piece of code', '[http://angularcode.com/a\-simple\-angularjs\-web\-app\-that\-converts\-text\-to\-url\-format/](http://angularcode.com/a-simple-angularjs-web-app-that-converts-text-to-url-format/)', 0),

(2, 'How to create a facebook style autocomplete using AngularJS', 'This tutorial explains how to show autocomplete results for a textbox input using AngularJS, PHP and MySQL with the help of Angular UI directive.', '[http://angularcode.com/how\-to\-create\-a\-facebook\-style\-autocomplete\-using\-angularjs/](http://angularcode.com/how-to-create-a-facebook-style-autocomplete-using-angularjs/)', \-2),

(3, 'Simple task manager application using AngularJS PHP MySQL', 'This tutorial explains how to create a simple Task Manager application using AngularJS. Here I used PHP for server side communication and MySQL for database.', '[http://angularcode.com/simple\-task\-manager\-application\-using\-angularjs\-php\-mysql/](http://angularcode.com/simple-task-manager-application-using-angularjs-php-mysql/)', 1),

(4, 'Connecting PHP to Oracle Database 10g', 'PHP is very well compatible with MySQL. But I found connecting PHP to Oracle is a pain. In my current job, my employer uses Oracle Version 10g. It uses an oracle server and an oracle client 10g software to connect to the server. I tried several ways to connect to the oracle database server using PHP.', '[http://angularcode.com/connecting\-php\-to\-oracle\-database\-10g/](http://angularcode.com/connecting-php-to-oracle-database-10g/)', 5);

[view raw](https://gist.github.com/itswadesh/e236ce5f33d39cb724d8ef6c26deb765/raw/6e5fd45c617f0cb58cd5e581bad3ee6cb92cf722/angularcode-voting-app-angular-voting.sql) [angularcode-voting-app-angular-voting.sql](https://gist.github.com/itswadesh/e236ce5f33d39cb724d8ef6c26deb765.json

Get posts (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;
?>

Update Post (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;
?>

app.js

Now lets move on to the angularjs file (app/app.js) which contains the little lines of code that gets the data from the server updates the view and displays the result in web browser

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);
}
});

index.html

The index.html file which is our front end and displayed to the user

<html ng-app="myApp">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css">
<title>Simple Voting System Using AngularJS</title>
</head>
<body>
<div class="navbar navbar-default" id="navbar">
<div class="container" id="navbar-container">
<div class="navbar-header">
<a href="http://angularcode.com" class="navbar-brand">
<small>
<i class="glyphicon glyphicon-log-out"></i>
AngularCode / AngularJS Demos
</small>
</a><!-- /.brand -->
</div><!-- /.navbar-header -->
<div class="navbar-header pull-right" role="navigation">
<a href="http://angularcode.com/voting-system-similar-to-stackoverflow-using-angularjs-php-and-mysql/" class="btn btn-sm btn-danger nav-button-margin"> <i class="glyphicon glyphicon-book"></i>&nbsp;Tutorial Link</a>
<a href="http://angularcode.com/download-link/?url=https://app.box.com/s/awhqt6cig7ks8m91dsxu" class="btn btn-sm btn-warning 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-9">
<div>
<blockquote><h1><a href="http://angularcode.com/voting-system-similar-to-stackoverflow-using-angularjs-php-and-mysql/">Voting System Using AngularJS + PHP + MySQL</a></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">
<div class="votingButton" ng-click="upVote(post);">
<i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="badge badge-inverse">
<div>{{post.votes}}</div>
</div>
<div class="votingButton" ng-click="downVote(post);">
<i class="glyphicon glyphicon-chevron-down"></i>
</div>
</div>
<div class="well col-md-11">
<h4><a href="{{post.url}}">{{post.title}}</a></h4>
<p>{{post.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="app/app.js"></script>
</body>
</html>