online voting system using Python Flask Mysql and Jquery ajax
--
-- Table structure for table `tblprogramming`
--
CREATE TABLE `tblprogramming` (
`id` int(11) NOT NULL,
`title` varchar(250) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tblprogramming`
--
INSERT INTO `tblprogramming` (`id`, `title`) VALUES
(1, 'Flask'),
(2, 'Laravel'),
(3, 'React.js'),
(4, 'Express'),
(5, 'Django');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tblprogramming`
--
ALTER TABLE `tblprogramming`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tblprogramming`
--
ALTER TABLE `tblprogramming`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
--
-- Table structure for table `tbl_poll`
--
CREATE TABLE `tbl_poll` (
`poll_id` int(11) NOT NULL,
`web_framework` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_poll`
--
INSERT INTO `tbl_poll` (`poll_id`, `web_framework`) VALUES
(8, 'Flask'),
(9, 'Flask'),
(10, 'Flask'),
(11, 'Express'),
(12, 'React.js'),
(13, 'Laravel'),
(14, 'Flask'),
(15, 'Flask'),
(16, 'Laravel'),
(17, 'Django'),
(18, 'Django'),
(19, 'Flask');
--
-- 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, AUTO_INCREMENT=20;
#app.py
from flask import Flask, render_template, request, jsonify, flash, redirect
from flask_mysqldb import MySQL,MySQLdb #pip install flask-mysqldb https://github.com/alexferl/flask-mysqldb
app = Flask(__name__)
app.secret_key = "caircocoders-ednalan"
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'testingdb'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
mysql = MySQL(app)
@app.route('/')
def index():
cursor = mysql.connection.cursor()
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cur.execute("SELECT * FROM tblprogramming ORDER BY id ASC")
webframework = cur.fetchall()
return render_template('index.html', webframework = webframework)
@app.route("/polldata",methods=["POST","GET"])
def polldata():
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
query = "SELECT * from tbl_poll"
cur.execute(query)
total_poll_row = int(cur.rowcount)
cur.execute("SELECT * FROM tblprogramming ORDER BY id ASC")
framework = cur.fetchall()
frameworkArray = []
for row in framework:
get_title = row['title']
cur.execute("SELECT * FROM tbl_poll WHERE web_framework = %s", [get_title])
row_poll = cur.fetchone()
total_row = cur.rowcount
#print(total_row)
percentage_vote = round((total_row/total_poll_row)*100)
print(percentage_vote)
if percentage_vote >= 40:
progress_bar_class = 'progress-bar-success'
elif percentage_vote >= 25 and percentage_vote < 40:
progress_bar_class = 'progress-bar-info'
elif percentage_vote >= 10 and percentage_vote < 25:
progress_bar_class = 'progress-bar-warning'
else:
progress_bar_class = 'progress-bar-danger'
frameworkObj = {
'id': row['id'],
'name': row['title'],
'percentage_vote': percentage_vote,
'progress_bar_class': progress_bar_class}
frameworkArray.append(frameworkObj)
return jsonify({'htmlresponse': render_template('response.html', frameworklist=frameworkArray)})
@app.route("/insert",methods=["POST","GET"])
def insert():
cursor = mysql.connection.cursor()
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
if request.method == 'POST':
poll_option = request.form['poll_option']
print(poll_option)
cur.execute("INSERT INTO tbl_poll (web_framework) VALUES (%s)",[poll_option])
mysql.connection.commit()
cur.close()
msg = 'success'
return jsonify(msg)
if __name__ == "__main__":
app.run(debug=True)
templates/index.html
//templates/index.html
<html>
<head>
<title>Live Poll System using Python Flask Mysql and Jquery ajax</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br /> <br />
<h2 align="center">Live Poll System using Python Flask Mysql and Jquery ajax</h2><br />
<div class="row">
<div class="col-md-6">
<form method="post" id="poll_form">
<h3>Which is Best Web Development Frameworks</h3>
<br />
{% for row in webframework %}
<div class="radio">
<label><h4><input type="radio" name="poll_option" class="poll_option" value="{{row.title}}" /> {{row.title}}</h4></label>
</div>
{% endfor %}
<br />
<input type="submit" name="poll_button" id="poll_button" class="btn btn-primary" />
</form>
<br />
</div>
<div class="col-md-6">
<br />
<br />
<h4>Live Poll Result</h4><br />
<div id="poll_result"></div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
fetch_poll_data();
function fetch_poll_data()
{
var fetchall = 'all';
var dataString = 'fetchall='+ fetchall;
$.ajax({
url:"/polldata",
method:"POST",
data: dataString,
success:function(data)
{
$('#poll_result').html(data);
$("#poll_result").append(data.htmlresponse);
}
});
}
$('#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:"/insert",
method:"POST",
data:form_data,
success:function()
{
$('#poll_form')[0].reset();
$('#poll_button').attr('disabled', false);
fetch_poll_data();
alert("Poll Submitted Successfully");
}
});
}
else
{
alert("Please Select Option");
}
});
});
</script>
</body>
</html>
templates/response.html
//templates/response.html
{% for row in frameworklist %}
<div class="row">
<div class="col-md-2" align="right">
<label>{{row.name}}</label>
</div>
<div class="col-md-10">
<div class="progress">
<div class="progress-bar {{row.progress_bar_class}}" role="progressbar" aria-valuenow="{{row.percentage_vote}}" aria-valuemin="0" aria-valuemax="100" style="width:{{row.percentage_vote}}%">
{{row.percentage_vote}} % programmer like <b>{{row.name}}</b> Web Framework
</div>
</div>
</div>
</div>
{% endfor %}
