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
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
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 statementCREATE 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
You need to download the project to see whole java code. Here I will explain only servlet 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
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Result result = new Result(); try { // Get Article Information String postid = request.getParameter(Constants.ARTICLE); String fingerprint = request.getParameter(Constants.FINGERPRINT); ArticleInfo post = VotesDAO.selectArticle(postid); // Get article vote on user's computer VotePojo votes = VotesDAO.selectVote(postid, fingerprint); // add user article vote info to article info post.setVotes(votes); result.setData(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(); }
0 comments:
Post a Comment