PHP and jQuery-based top-comment and step-on functions-jquery-js tutorial

This article will share with you the following features: you click the top or step button to record the value to the database, and the color background changes accordingly, according to the percentage change. In this way, we can see at a glance that there are many people who support the background color. When we browse a webpage and want to agree or disagree with the content of the webpage, such as the opinions in articles and comments, we can click "TOP" and "step on" on the webpage to vote. The entire interaction process can be implemented asynchronously using ajax to improve user experience.

This article uses examples to explain the "TOP" and "step-on" voting functions implemented using PHP + MySql + jQuery, and record the user IP address to determine whether the user's voting behavior is effective, this instance can also be extended to the voting system. If you have basic knowledge about PHP, MySql, and jQuery, continue reading.

Preparation

We must first prepare the mysql DATA table required to run the entire instance. Two tables are required for the instance. The votes table is used to record the number of user votes corresponding to articles or comments, in addition, we write a data entry with id 1 by default for demonstration. The votes_ip table is used to record the IP address of each user vote. The program determines whether the vote is valid based on the user IP address.

 CREATE TABLE IF NOT EXISTS `votes` (  `id` int(10) NOT NULL AUTO_INCREMENT,  `likes` int(10) NOT NULL DEFAULT '0',  `unlikes` int(10) NOT NULL DEFAULT '0',  PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;   INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES (1, 30, 10);  CREATE TABLE IF NOT EXISTS `votes_ip` (  `id` int(10) NOT NULL,  `vid` int(10) NOT NULL,  `ip` varchar(40) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

HTML

On the page, there are two buttons indicating "TOP" and "Step", namely # dig_up and # dig_down. The buttons record the votes and percentages respectively, intuitively compares the voting results.

 
   
          
Very good, very powerful!
     
   
     
          
Too bad!
     
   
   
 
 

CSS

We use CSS to beautify the page. We use a figure diggs.png to locate different button backgrounds and set the position to locate the positional relationship between each element.

 .digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative} #dig_up,#dig_down{width:200px; height:48px; margin:10px; position:relative; border:1px solid #d3d3d3; padding-left:42px; cursor:pointer} .digup{background:url(diggs.png) no-repeat 4px 2px;} .digup_on{background:url(diggs.png) no-repeat 4px -49px;} .digdown{background:url(diggs.png) no-repeat 4px -102px;} .digdown_on{background:url(diggs.png) no-repeat 4px -154px;} #num_up,#num_down{position:absolute; right:6px; top:18px; font-size:20px;} #dig_up p{height:24px; line-height:24px; color:#360} #dig_down p{height:24px; line-height:24px; color:#f30} .bar{width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0; position:relative; text-align:center} .bar span{display:block; height:12px; } .bar i{position:absolute; top:0; left:104px;} #bar_up span{background:#360} #bar_down span{background:#f60} #msg{position:absolute; right:20px; top:40px; font-size:18px; color:#f00} 

JQuery

This example also depends on jQuery, so you must not forget to load the jquery library file first on the page.

First, jQuery needs to process the background image transformed when the mouse slides to the two voting buttons, which is implemented by addClass () and removeClass.

$ (Function () {// when the mouse slides and leaves the voting button, the background style is changed $ ("# dig_up "). hover (function () {$ (this ). addClass ("digup_on") ;}, function () {$ (this ). removeClass ("digup_on") ;}); $ ("# dig_down "). hover (function () {$ (this ). addClass ("digdown_on") ;}, function () {$ (this ). removeClass ("digdown_on") ;}); // initialize the data getdata ("do. php ", 1); // when you click" TOP "$ (" # dig_up "). click (function () {getdata ("do. php? Action = like ", 1) ;}); // click $ (" # dig_down "). click (function () {getdata (" do. php? Action = unlike ", 1 );});});

Then, after loading the page, we need to display the initial voting results, including the number of votes and percentage. We write the operation to get data in a custom function getdata (), and load the data by passing different request addresses and id parameters. In the getdata () function, an ajax request is sent to the URL. Based on the results returned by the background processing, if the voting succeeds, the content of the corresponding elements on the page is changed, including the number of votes and percentage.

Function getdata (url, sid) {$. getJSON (url, {id: sid}, function (data) {if (data. success = 1) {// vote successful $ ("# num_up" ).html (data. like); // display the percentage progress bar effect by controlling the width $ ("# bar_up span" ).css ("width", data. like_percent); $ ("# bar_up I" pai.html (data. like_percent); $ ("# num_down" pai.html (data. unlike); $ ("# bar_down span" ).css ("width", data. unlike_percent); $ ("# bar_down I" pai.html (data. unlike_percent);} else {// failed to vote $ ("# msg" cmd.html(data.msg0000.show(cmd.css ({'opacity ': 1, 'top': '40px '}). animate ({top: '-50px', opacity: 0}, "slow ");}});}

PHP

Data is obtained through do. php to complete, do. php connects to the database based on the parameters passed on the front-end page and enters the "TOP", "Step", and initial data processing modules based on the condition judgment. The following are do. php module code structure:

Include_once ("connect. php "); // connect to the database $ action =$ _ GET ['action']; $ id = 1; $ ip = get_client_ip (); // obtain ip if ($ action = 'like') {// top likes (1, $ id, $ ip);} elseif ($ action = 'unlike ') {// step on likes (0, $ id, $ ip);} else {echo jsons ($ id );}

The likes () function is used to process the "TOP" and "Step" voting modules. First, it is used to determine whether the user's IP address has been voted. If the user's IP address has already been voted, a prompt is returned directly, if the user's IP address does not have a voting record, update the votes table, add the corresponding number of votes to 1, and insert the user's IP record to the votes_ip table. If the operation succeeds, call jsons () output data such as the number of votes and percentage after the vote, otherwise the input operation fails to prompt information.

Function likes ($ type, $ id, $ ip) {$ ip_ SQL = mysql_query ("select ip from votes_ip where vid = '$ id' and ip =' $ ip '"); $ count = mysql_num_rows ($ ip_ SQL); if ($ count = 0) {// if ($ type = 1) {// top $ SQL = "update votes set likes = likes + 1 where id = ". $ id;} else {// step on $ SQL = "update votes set unlikes = unlikes + 1 where id = ". $ id;} mysql_query ($ SQL); $ SQL _in = "insert into votes_ip (vid, ip) values ('$ id',' $ ip')"; mysql_query ($ SQL _in); if (mysql_insert_id ()> 0) {echo jsons ($ id);} else {$ arr ['success'] = 0; $ arr ['msg '] = 'Operation failed. Please try again'; echo json_encode ($ arr) ;}} else {$ msg = $ type = 1? 'You have already exceeded ':' You have already stepped on '; $ arr ['success'] = 0; $ arr ['msg '] = $ msg; echo json_encode ($ arr );}}

The jsons () function is used to read the number of votes for the corresponding id in the votes table, calculate the percentage, and output the information in json format for the front-end page.

 function jsons($id){   $query = mysql_query("select * from votes where id=".$id);   $row = mysql_fetch_array($query);   $like = $row['likes'];   $unlike = $row['unlikes'];   $arr['success']=1;   $arr['like'] = $like;   $arr['unlike'] = $unlike;   $like_percent = round($like/($like+$unlike),3)*100;   $arr['like_percent'] = $like_percent.'%';   $arr['unlike_percent'] = (100-$like_percent).'%';      return json_encode($arr); } 

This instance can be applied to common scenarios such as "like", "agree and disagree with comments", and the voting system. It uses Ajax principles to implement front-end interaction. In do. php, there is also a function get_client_ip () used to obtain the real IP address of the user. I have also posted this function before. It has been packaged in the code. You are welcome to download it and will not post it here.

The above is all the content of this article. I hope you will like it.