O Blog do Prof. Anderson

Sistema de Rating (avaliação) em HTML e JavaScript – Parte 1

By Anderson Oliveira on

Sistema de rating são aquelas populares estrelinhas pelas quais o usuários avaliam determinado conteúdo de um site ou aplicativo.

Este artigo será divido em três partes, a primeira ensina a fazer os cliques das estrelinhas, a segunda ensinará a acumular a quantidade de avaliações em um banco de dados usando AJAX e a terceira irá tirar a média das avaliações, gerar um bloco schema.org e exibir os dados na página.

Então… mãos na massa.

Preparando o HTML para o sistema de rating.

Vamos usar duas imagens PNG; estas, retiradas do site flaticon.com

Vamos chamar a estrela branca de star0.png e a estrela amarela de star1.png

Agora, monte a página com o nome de index.html e inicialmente exibindo 5 estrelas brancas, ficando;

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Avalie esta página</title>
</head>

<body>
<a href="javascript:void(0)" onclick="Avaliar(1)">
<img src="img/star0.png" id="s1"></a>

<a href="javascript:void(0)" onclick="Avaliar(2)">
<img src="img/star0.png" id="s2"></a>

<a href="javascript:void(0)" onclick="Avaliar(3)">
<img src="img/star0.png" id="s3"></a>

<a href="javascript:void(0)" onclick="Avaliar(4)">
<img src="img/star0.png" id="s4"></a>

<a href="javascript:void(0)" onclick="Avaliar(5)">
<img src="img/star0.png" id="s5"></a>
<p id="rating">0</p>
</body>
</html>

O resultado será este;

Programando o clique nas estrelas com JavaScript

Perceba que no código HTML cada imagem possui um identificador, usaremos este identificado para manipular as imagens, trocando pela estrela branca ou amarela de acordo com o clique do usuário.

Para este exemplo vou optar pelo JavaScript puro usando apenas objetos de manipulação do DOM, ou seja, não vou jQuery ou qualquer outro framework. Se possui familiaridade com algum framework JS poderá facilmente adaptar este script.

  1. Crie um arquivo funcoes.js com o seguinte conteúdo. 
    function Avaliar(estrela) {
 var url = window.location;
 url = url.toString()
 url = url.split("index.html");
 url = url[0];

 var s1 = document.getElementById("s1").src;
 var s2 = document.getElementById("s2").src;
 var s3 = document.getElementById("s3").src;
 var s4 = document.getElementById("s4").src;
 var s5 = document.getElementById("s5").src;
 var avaliacao = 0;

if (estrela == 5){ 
 if (s5 == url + "img/star0.png") {
 document.getElementById("s1").src = "img/star1.png";
 document.getElementById("s2").src = "img/star1.png";
 document.getElementById("s3").src = "img/star1.png";
 document.getElementById("s4").src = "img/star1.png";
 document.getElementById("s5").src = "img/star1.png";
 avaliacao = 5;
 } else {
 document.getElementById("s1").src = "img/star1.png";
 document.getElementById("s2").src = "img/star1.png";
 document.getElementById("s3").src = "img/star1.png";
 document.getElementById("s4").src = "img/star1.png";
 document.getElementById("s5").src = "img/star0.png";
 avaliacao = 4;
}}
 
 //ESTRELA 4
if (estrela == 4){ 
 if (s4 == url + "img/star0.png") {
 document.getElementById("s1").src = "img/star1.png";
 document.getElementById("s2").src = "img/star1.png";
 document.getElementById("s3").src = "img/star1.png";
 document.getElementById("s4").src = "img/star1.png";
 document.getElementById("s5").src = "img/star0.png";
 avaliacao = 4;
 } else {
 document.getElementById("s1").src = "img/star1.png";
 document.getElementById("s2").src = "img/star1.png";
 document.getElementById("s3").src = "img/star1.png";
 document.getElementById("s4").src = "img/star0.png";
 document.getElementById("s5").src = "img/star0.png";
 avaliacao = 3;
}}

//ESTRELA 3
if (estrela == 3){ 
 if (s3 == url + "img/star0.png") {
 document.getElementById("s1").src = "img/star1.png";
 document.getElementById("s2").src = "img/star1.png";
 document.getElementById("s3").src = "img/star1.png";
 document.getElementById("s4").src = "img/star0.png";
 document.getElementById("s5").src = "img/star0.png";
 avaliacao = 3;
 } else {
 document.getElementById("s1").src = "img/star1.png";
 document.getElementById("s2").src = "img/star1.png";
 document.getElementById("s3").src = "img/star0.png";
 document.getElementById("s4").src = "img/star0.png";
 document.getElementById("s5").src = "img/star0.png";
 avaliacao = 2;
}}
 
//ESTRELA 2
if (estrela == 2){ 
 if (s2 == url + "img/star0.png") {
 document.getElementById("s1").src = "img/star1.png";
 document.getElementById("s2").src = "img/star1.png";
 document.getElementById("s3").src = "img/star0.png";
 document.getElementById("s4").src = "img/star0.png";
 document.getElementById("s5").src = "img/star0.png";
 avaliacao = 2;
 } else {
 document.getElementById("s1").src = "img/star1.png";
 document.getElementById("s2").src = "img/star0.png";
 document.getElementById("s3").src = "img/star0.png";
 document.getElementById("s4").src = "img/star0.png";
 document.getElementById("s5").src = "img/star0.png";
 avaliacao = 1;
}}
 
 //ESTRELA 1
if (estrela == 1){ 
 if (s1 == url + "img/star0.png") {
 document.getElementById("s1").src = "img/star1.png";
 document.getElementById("s2").src = "img/star0.png";
 document.getElementById("s3").src = "img/star0.png";
 document.getElementById("s4").src = "img/star0.png";
 document.getElementById("s5").src = "img/star0.png";
 avaliacao = 1;
 } else {
 document.getElementById("s1").src = "img/star0.png";
 document.getElementById("s2").src = "img/star0.png";
 document.getElementById("s3").src = "img/star0.png";
 document.getElementById("s4").src = "img/star0.png";
 document.getElementById("s5").src = "img/star0.png";
 avaliacao = 0;
}}
 
 document.getElementById('rating').innerHTML = avaliacao;
 
}
  2. Salve o arquivo funcoes.js
  3. Edite o arquivo index.html e insira o arquivo funcoes.js no cabeçalho do documento, dentro dos elementos <HEAD></HEAD> 
    <script src="funcoes.js"></script>
  4. Pronto! agora teste. Clique na imagem a seguir;

Legal né?

 

Dica Monstro: utilize a biblioteca animate.css para dar efeitos nos cliques das imagens. Veja a aula aqui.

 

O truque do atributo .src

Perceba que a lógica deste código é bastante simples, na medida em que clicamos em qualquer uma das estrelas, manipulamos o elemento IMG e alternamos os sources das imagens de acordo com a posição da estrela clicada pelo visitante do site.

Para alternamos a imagem de um elemento IMG através do DOM usamos ao código document.getElementById(“id_do_elemento_img”).src 

Este atributo trabalha com o caminho absoluto da imagem, ou seja, mesmo definindo um src=”img/star1.png” ele irá considerar toda a url que aparece no navegador.

Para capturarmos a url da página usamos o código descrito no inicio da função;

 var url = window.location;
 url = url.toString()
 url = url.split("index.html");
 url = url[0];

Dessa forma, nosso script funcionará 100% bem.

Outro truque legal no arquivo index.html é o uso do href=”javascript:void(0)”  que permite ao desenvolvedor criar um link morto, ou seja, muda apenas o ícone do cursor do mouse.

 

Download do exemplo

O exemplo completo desta aula se encontra para download, bons estudos;

Download RatingJs

Posts Relacionados

Primeira aplicação back-end simples com Node.js [Aula 02]

Anderson Oliveira

Node.Js – Instalação e Configuração [Aula 01]

Anderson Oliveira

Transferência de Arquivos entre Servidores usando PHP Curl()

Anderson Oliveira