Voting System Youtube Style With jQuery & PHP

    Rating: ★★★★☆
    View: 114
    Download: 83
    Từ khóa:

    We will assign Unique ID(s) to each voting block, these Unique IDs will play important role here, we will be updating and inserting database records, and identifying user votes based on it. Let’s create a 4 columns table in MySql Database.

    CREATE TABLE IF NOT EXISTS `voting_count` (
      `id` INT(11) NOT NULL AUTO_INCREMENT,
      `unique_content_id` VARCHAR(100) NOT NULL,
      `vote_up` INT(11) NOT NULL,
      `vote_down` INT(11) NOT NULL,
      PRIMARY KEY (`id`)
    );

    Style

    This is our CSS, this should go within head tag or in a CSS file.

    HTML markup

    Paste following HTML code in your page anywhere you want voting system to appear, I have inserted the code inside header

    . Replace each block IDXXXXXXX with unique number or string, Unique ID should not match with each other.

    
    
     
    0
     
    0

    jQuery

    On page load, we will fetch vote counts from database into  and  elements. Using jQuery.each() we can loop through each voting block to collect Unique IDs. These IDs are required to fetch vote counts for each voting block.
    Since we need to fill two values here, it is good idea to fetch JSON data. (Seevote_process.php for PHP json_encode() usage).
    Take a look at code below:

    //####### on page load, retrive votes for each content
    $.each( $('.voting_wrapper'), function(){
        
        //retrive unique id from this voting_wrapper element
        var unique_id = $(this).attr("id");
        
        //prepare post content
        post_data = {'unique_id':unique_id, 'vote':'fetch'};
        
        //send our data to "vote_process.php" using jQuery $.post()
        $.post('vote_process.php', post_data,  function(response) {
        
                //retrive votes from server, replace each vote count text
                $('#'+unique_id+' .up_votes').text(response.vote_up); 
                $('#'+unique_id+' .down_votes').text(response.vote_down);
            },'json');
    });

    jQuery Code below is triggered when user clicks Thumbs up or Thumbs down icon. We need to retrieve the class name of clicked element and compare whether vote is like or dislike, then we send Ajax request to vote_process.php using jQuery$.post() along with Unique ID and Vote type. Please go though each comment line in the code to understand the method clearly.

    $(".voting_wrapper .voting_btn").click(function (e) {
        
        //get class name (down_button / up_button) of clicked element
        var clicked_button = $(this).children().attr('class');
        
        //get unique ID from voted parent element
        var unique_id   = $(this).parent().attr("id"); 
        
        if(clicked_button==='down_button') //user disliked the content
        {
            //prepare post content
            post_data = {'unique_id':unique_id, 'vote':'down'};
            
            //send our data to "vote_process.php" using jQuery $.post()
            $.post('vote_process.php', post_data, function(data) {
                
                //replace vote down count text with new values
                $('#'+unique_id+' .down_votes').text(data);
                
                //thank user for the dislike
                alert("Thanks! Each Vote Counts, Even Dislikes!");
                
            }).fail(function(err) { 
            
            //alert user about the HTTP server error
            alert(err.statusText); 
            });
        }
        else if(clicked_button==='up_button') //user liked the content
        {
            //prepare post content
            post_data = {'unique_id':unique_id, 'vote':'up'};
            
            //send our data to "vote_process.php" using jQuery $.post()
            $.post('vote_process.php', post_data, function(data) {
            
                //replace vote up count text with new values
                $('#'+unique_id+' .up_votes').text(data);
                
                //thank user for liking the content
                alert("Thanks! For Liking This Content.");
            }).fail(function(err) { 
            
            //alert user about the HTTP server error
            alert(err.statusText); 
            });
        }
        
    });
    //end

    Process User Votes

    Here’s our complete vote_process.php file. This PHP code retrieves Ajax POST variables from voting system page, and $_POST["vote"] variable is used to determine what action should be performed next.

    Since this is a cookie based voting, script sets a cookie after each user vote and prevents user from voting again until the cookie expires.

    $vote_up, 'vote_down'=>$vote_down);
                echo json_encode($send_response); //display json encoded values
                break;
    
        }
    
    }
    ?>

     

    loading Đang tải...

    template được ưa chuộng