Rating System Original Em AJAX – JQuery E PHP

Está aqui mais um tutorial jQuery com estilo para você! Um sistema de classificação (rating system) é uma parte importante dum website. Os usuários podem exprimir as suas ideias através da classificação do artigo ou tutorial no website que oferece esse sistema de classificação (rating system) para os usuários votarem.

Este sistema de classificação foi criado em AJAX, jQuery e PHP.

Espero que você goste do tutorial e que comente sobre este tutorial fantástico. Obrigado!

Veja aqui uma DEMO deste sistema de classificação em AJAX, jQuery e PHP.

Estrutura Da Base De Dados MySQL

CREATE TABLE IF NOT EXISTS `userip` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`userip` varchar(100) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;



CREATE TABLE IF NOT EXISTS `ajax_rating` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`liked` int(11) NOT NULL,

`dislike` int(11) NOT NULL,

`average` int(11) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;



–

– Dumping data for table `ajax_rating`

–



INSERT INTO `ajax_rating` (`id`, `liked`, `dislike`) VALUES

(1, 1, 1,);

Código jQuery

$(document).ready(function(){



$(‘button’).click(function(){



$(‘.message’).hide();



var a = $(this).attr(“id”);



showLoader();



if(a == “like”)

{

$(‘.greenBar’).animate( {

width: ‘15px’,

opacity: 1,

height: ‘60px’

} );

}

else

{

$(‘.redBar’).animate( {

width: ‘15px’,

opacity: 1,

height: ‘60px’

} );

}



$.post(“voting.php?value=”+a, {

}, function(response){



if(a == “like”)

{

$(‘.greenBar’).animate( {

width: ‘15px’,

opacity: 1,

height: parseInt(response)+’px’

} );

}

else

{

$(‘.redBar’).animate( {

width: ‘15px’,

opacity: 1,

height: parseInt(response)+’px’

} );

}



hideLoader();



});

});



//show loading bar

function showLoader(){

$(‘.search-background’).fadeIn(200);

}

//hide loading bar

function hideLoader(){

$(‘.message’).fadeIn();

$(‘.search-background’).fadeOut(200);

};



});

Eu usei a função do jQuery animate() para dar estilo ao sistema de classificação (rating system). A visualização a processar mostra que o processo está a decorrer. Trata-se dum sistema de classificação (rating system) atraente, usando jQuery e AJAX. Você pode integrá-lo no seu website. Descarregue o código e use este script!

CSS

/* CSS Document */

button {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

-moz-border-radius-bottomleft:3px;

-moz-border-radius-bottomright:3px;

-moz-border-radius-topleft:3px;

-moz-border-radius-topright:3px;

background:#F6F6F6 none repeat scroll 0 0;

border:1px solid #CCCCCC;

cursor:pointer;

float:left; margin-left:2px;

height:2.0833em;

overflow:visible;

padding:0 0.5em;

vertical-align:middle;

white-space:nowrap;

}



.search-background {

display:none;

font-size: 13px;

font-weight: bold;

width:50px; height:95px;

float:left;

position: absolute;

padding-top:20px;

padding-left:17px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

text-align: left;

opacity:0.5;filter: alpha(opacity=50) ;

text-decoration: none;

}



.search-background {

background:#999999;

color:#FFFFFF;

text-shadow: #fff 0px 0px 20px;

}



.like_button{background:url(yes-dis.JPG) center left no-repeat; padding-left:15px;}

.like_button:hover{

background:url(yes-enb.JPG) center left no-repeat;

-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6);

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6);

}

.dislike_button{background:url(no-dis.JPG) center center no-repeat; padding-left:18px;}



.dislike_button:hover, .dislike_button:visited{

background:url(no-enb.JPG) center center no-repeat;

-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6);

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6);

}



.ilikethis, .idislikethis, .totalstats{

display: none;

font-size: 1.0em;

height:17px;

padding:7px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

text-align: center;

text-decoration: none;

width:60px;

background-color:#333333;

color:#FFFFFF;

text-shadow: #fff 0px 0px 20px;

}



.totalstatsbutton{ width:80px; vertical-align:top;background:#F6F6F6 none repeat scroll 0 0;}

.totalstatsbutton .greenBar{background-color:#DDDDDD;  height:5px; margin-bottom:3px; height:6px;}

.totalstatsbutton .redbar{background-color:#DDDDDD;  height:5px; height:6px;}



.greenBar{background-color:#AADA37; float:left; margin-bottom:3px; height:11px; margin-top:7px; margin-left:10px; width:15px;}

.redBar{background-color:#CF362F; height:8px; float:left; margin-bottom:3px; margin-top:7px; margin-left:12px; width:15px;}



.thumbDown div{ float:left; font-size:12px; }



.text_div{

width:500px; min-height:100px; float:left;

text-align:justify; padding:9px;

text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;

filter: dropshadow(color=#e5e5ee,offX=0,offY=1);

font-family:”Courier New”, Courier, monospace; font-size:12px;

-moz-border-radius: 6px;

margin-right:8px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);

background-color:#CBD9EF;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



h2{text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;

filter: dropshadow(color=#e5e5ee,offX=0,offY=1);

font-family:”Courier New”, Courier, monospace;}



.rating_div{

width:70px; height:100px; float:left;

}



.message{ color:#0066CC;font-size:12px; display:none; padding:2px;

text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;

filter: dropshadow(color=#e5e5ee,offX=0,offY=1);

font-family:”Courier New”, Courier, monospace; font-size:12px;}

HTML

<div id=”rating_div_1″>

<?php include (’show_current_rating.php’)?>

</div>



<div>

<label><img src=”loading.gif” alt=”" /></label>

</div>



<div style=”" id=”text_div_1″>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</div>



<br clear=”all” /><br clear=”all” />



&nbsp;

<div id=”update_count” style=”float:left;”>



</div>

<br clear=”all” />

<div id=”voting_result”>



</div>

Aqui, eu estou a usar uma tabela separada para guardar o IP dos usuários que usam o sistema de classificação (rating system) para termos um registo dos usuários que já votaram e assegurarmos que não votam mais do que uma vez.

Download do código usado neste tutorial: Rating System Original Em AJAX – JQuery E PHP

Be Sociable, Share!

•