article

Saturday, February 13, 2021

Live Poll System using Python Flask Mysql and Jquery ajax

Live Poll System using Python Flask Mysql and Jquery ajax

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;

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
#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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//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 %}

Posted by ednalan at 2:19 AM . Under .

Related Post