Breaking News
Loading...
,

Voting system Using jQuery Ajax and Php Codeigniter Framework

Share on Google Plus
8:37 PM Unknown 0 Comments

Voting system Using jQuery Ajax and Php Codeigniter Framework

Create Database table

Create "demo_trn_vote" table in mysql database using below sql table script and insert below records.
CREATE TABLE IF NOT EXISTS `demo_trn_vote` (
  `vote_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `vote_desc` varchar(200) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
  `up_vote` int(10) unsigned NOT NULL,
  `down_vote` int(10) unsigned NOT NULL,
  PRIMARY KEY (`vote_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
 
INSERT INTO `demo_trn_vote` (`vote_id`, `vote_desc`, `up_vote`, `down_vote`) VALUES
(1, 'How to Show Hide Toggle Table Column Using Jquery', 1, 1),
(2, 'Load Json data on page scroll using jQuery Php Codeigniter and Mysql', 1, 1),
(3, 'Password and Confirm Password Validation in Jquery', 1, 1);

Demo.php

Create Demo Controller class having default index() method. This index method returns the boolean status value as "true" or "false"
<?php
class Demo extends Controller {

 function Demo(){
  parent::Controller();
  $this->load->model('DemoModel');
 }

 public function index(){

  $voteId=  $this->input->post('voteId');
  $upOrDown=  $this->input->post('upOrDown');

  $status ="false";
  $updateRecords = 0;
  
  if($upOrDown=='upvote'){
   $updateRecords = $this->DemoModel->updateUpVote($voteId);
  }else{
   $updateRecords = $this->DemoModel->updateDownVote($voteId);
  }

  if($updateRecords>0){
   $status = "true";
  }
  echo $status;
 }
}
?>

DemoModel.php File

Define Model class contains updateUpVote() and updateDownVote() methods which increase or decrease the upvote and downvote count respectively.
<?php
class DemoModel extends Model {

 function DemoModel(){
  parent::Model(); 
 }

 function updateDownVote($voteId){
  $sql = "UPDATE demo_trn_vote set DOWN_VOTE = DOWN_VOTE+1 WHERE VOTE_ID =?";
  $this->db->query($sql, array($voteId));
  return $this->db->affected_rows();
 }

 function updateUpVote($voteId){
  $sql = "UPDATE demo_trn_vote set UP_VOTE = UP_VOTE+1 WHERE VOTE_ID =?";
  $this->db->query($sql, array($voteId));
  return $this->db->affected_rows();
 }
?>

index.php

You need to do some extra effort to display records from database, currently it is hardcoded. When user click on up or down vote jquery ajax request is fired and ajax call is made to Php controller. Which return the boolean return value.
<html>
<head>
<style>
ul,ol,li{
 list-style-type: none;
}

h2{
 color: #2864B4;
 text-decoration: none;
}
</style>

<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function(){
    $(".voteMe").click(function() {
   var voteId = this.id;
   var upOrDown = voteId.split('_'); 
   $.ajax({
    type: "post",
    url: "http://localhost/technicalkeeda/demos/voteMe",
    cache: false,    
    data:'voteId='+upOrDown[0] + '&upOrDown=' +upOrDown[1],
    success: function(response){    
     try{
      if(response=='true'){ 
       var newValue = parseInt($("#"+voteId+'_result').text()) + 1;            
       $("#"+voteId+'_result').html(newValue);
      }else{
       alert('Sorry Unable to update..');
      }
     }catch(e) {  
      alert('Exception while request..');
     }  
    },
    error: function(){      
     alert('Error while request..');
    }
    });
  });
 });
</script>
</head>
<body>
<ul>      
  <li> 
  <div>

   <h2>How to Show Hide Toggle Table Column Using Jquery</h2>
   <span><a id="1_upvote" class="voteMe"><img src="http://www.technicalkeeda.com/img/images/up_vote.png"/></a><span id="1_upvote_result" >10</span></span> | 
   <a id="1_downvote" class="voteMe"><img src="http://www.technicalkeeda.com/img/images/down_vote.png"/></a><span id="1_downvote_result" >1</span>
  </div>
  </li>

      
  <li>
  <div>

   <h2>Load Json data on page scroll using jQuery Php Codeigniter and Mysql</h2>
   <span><a id="2_upvote" class="voteMe"><img src="http://www.technicalkeeda.com/img/images/up_vote.png"/></a><span id="2_upvote_result" >14</span></span> | 
   <a id="2_downvote" class="voteMe"><img src="http://www.technicalkeeda.com/img/images/down_vote.png"/></a><span id="2_downvote_result" >1</span>
  </div>

  </li>
      
  <li>
  <div>

   <h2>Password and Confirm Password Validation in Jquery</h2>
   <span><a id="3_upvote" class="voteMe"><img src="http://www.technicalkeeda.com/img/images/up_vote.png"/></a><span id="3_upvote_result" >5</span></span> | 
   <a id="3_downvote" class="voteMe"><img src="http://www.technicalkeeda.com/img/images/down_vote.png"/></a><span id="3_downvote_result" >1</span>

  </div>
  </li>
  
 </ul>
</body>
</html>

You Might Also Like

0 comments

About me


Like us on Facebook

Myself