SodhanaLibrary

Many blogs have implemented this emotion voting feature. We can make use of this data for emotion intelligence and can make user interaction more. Observe below image, Here you can observe 5 type of emotions. Whenever user clicks particular emotion button, the data will go to server and will be stored in MySQL database

DEMO   Download Project

Database structure

Here, I am using MySQL database. I have created a table named votes under demos schema. Find below for table structure

ipaddress - This is client ipaddress ( this is just for record)
fingerprint - This is generated at client system to identify computer uniquely
article - This is the article URL
vote_cat -This is the voting category (exceted, happy, angry .... etc)
created -This is generated at client system to identify computer uniquely

Table Create Statement

Find below for table create statement

CREATE TABLE `votes` (
  `ipaddress` varchar(15) DEFAULT NULL,
  `fingerprint` varchar(100) NOT NULL DEFAULT '',
  `article` varchar(200) NOT NULL DEFAULT '',
  `vote_cat` varchar(20) DEFAULT NULL,
  `created` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`fingerprint`,`article`)
)

Fingerprint Generation

Fingerprint is to identify user's computer uniquely. This can be generated using jQuery plugin fingerprint2.js

new Fingerprint2().get(function(result, components){
  console.log(result); //a hash, representing your device fingerprint
  console.log(components); // an array of FP components
});

Program Flow

Find below image for program flow

jQuery Code

Here you can observe posting user's action and getting article info

$(function(){
    $(".emotion").click(function(){
        var btn = $(this);
        new Fingerprint2().get(function(result, components){
            $.post( "VotePost", { fingerprint:result,voteCatogory:$(btn).attr("voteCatogory"), article:location.href }).done(function( data ) {
                // update article info
            });   
        });
    });
    
    new Fingerprint2().get(function(result, components){
        $.get( "GetVotesCount", { fingerprint:result,article:location.href }).done(function( data ) {
            // get article info
        });   
    });
});

Java Code

VotePost servlet post method

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    Result result = new Result();
    try {
        // get required details from client
        String voteCatogory = request.getParameter(Constants.VOTE_CATOGORY);
        String post = request.getParameter(Constants.ARTICLE);
        String fingerprint =  request.getParameter(Constants.FINGERPRINT);
        String ipAddress = request.getHeader("X-FORWARDED-FOR");  
        if (ipAddress == null) {  
          ipAddress = request.getRemoteAddr();  
        }
        
        // insert user vote into database
        VotePojo votes = new VotePojo();
        votes.setARTICLE(post);
        votes.setFINGERPRINT(fingerprint);
        votes.setVOTE_CAT(voteCatogory);
        votes.setIPADDRESS(ipAddress);
        VotesDAO.insertRow(votes);
        
        // send article info back to client
        result.setData(VotesDAO.selectArticle(post));
    } catch (DBException e) {
        result.setResult_code(-1);
        result.setError_msg("Database error");
    }  catch (Exception e) {
        result.setResult_code(-1);
        result.setError_msg(e.getMessage());
    }
    PrintWriter pw = response.getWriter();
    pw.write(CodeUtils.toJson(result));
    pw.flush();
}

GetVotesCount Servlet get method