[Resolvido] Nota com Estrelas

[ronza 1]

Fala galera, beleza?

 

Alguém sabe como fazer um sistema onde as pessoas dão uma nota de 1 a 5 e isso é refletido com estrelas?

 

Algo parecido com o do baixaki: http://www.baixaki.com.br/download/iobit-uninstaller.htm

 

No caso eles utilizam apenas uma imagem: http://www.baixaki.com.br/img/v10/ic-rating.png

 

Obrigado!

[Célio A. 4]

Não tem segredo nenhum, basta associar um numero a estrela no banco de dados (ou até mesmo um txt).

 

Dependendo do numero de estrela que o usuário for avaliar é registrado um numero no banco de dados. Da pra fazer isto em uma única tupla caso o voto seja anônimo e publico, ou da pra fazer algo melhor caso usuários registrados possam votar.

 

No geral você precisa do campo para registrar o numero de usuário e outro campo para o voto. Para cada usuário que votar é incrementado + 1 no campo usuário e incrementado o valor do voto no campo voto. Assim você terá o numero de usuário e a soma de votos... matemática simples para alcançar a média.

 

Para finalizar basta fazer uma estrutura de controle para exibir os resultados.

[ronza 1]

Então, mas o que eu queria saber é como o baixaki utilizou apenas uma imagem, onde possui 5 estrelas "acesas" e 5 estrelas "apagadas".

 

E caso o resultado seja 3 estrelas, aparece 3 estrelas "acesas" e 2 "apagadas".

 

A estrutura no php e mysql eu acho que sei como montar.

 

eu vou fazer uma tabela para os votos e uma tabela para comentários.

 

Tem como fazer os 2 na mesma tabela? Não to mais raciocinando direito! hahahaha

 

Obrigado Célio!

[joaofla123 3]

Acho que assim funcionaria: 1 imagem de estrela acesa, 1 apagada.

 

5 estrelas apagadas no display inicial (ou pegar do banco de dados direto o resultado parcial)

 

1 funcoes de click jquery para cada clique em estrela (com 1 evento que trocaria a imagem das estrelas acesas e apagaas de acordo com cada estrela clicada e 1 evento que iria mudar o valor de um campo hidden do form para enviar ao banco o valor da nota na tabela votos)

 

1 tabela votos, que iria conter 6 colunas e 1 linha sempre. 5 referente a cada estrela e um com o total

1 tabela comentarios com duas colunas, uma para o voto da pessoa e outra pros comentarios(pode ate ser na outra tabela, mas ai você ao inves de ir somando direto os votos faria uma linha com cada voto inserindo 1 na votada e 0 nas outras e mais a coluna do comentario no final. eu acho que ficaria muita informacao)

 

a cada voto você somaria 1 ao campo referente a estrela clicada e 1 no total de votos

 

o calculo para exibicao da avaliacao total basta dividir o numero de cliques na estrela pelo total de votos vezes 100 que da a porcentagem

 

se abaixo ou igual 20% você exibe so 1 estrela

se maior ou igual 40% você exibe so 2 estrelas e assim por diante.

 

1 botao de submit, de preferencia com o submit em ajax para nao precisar dar refresh na pagina

 

espero ter colaborado, abs

[William Bruno 1501]

Exemplo:

 

http://wbruno.com.br/2011/05/20/votacao-estrelas-star-rating-ajax-jquery/

[ronza 1]

muito bom o que vcs mandaram!

 

Mas as estrelas eu queria só para exibição mesmo.

 

tipo, se a nota for "3,5", aparece 3 estrelas e meia acesa, e 1 estrela e meia apagada. Isto usando apenas 2 imagens, 1 imagem com 5 estrelas acesas e outra imagem com 5 estrelas apagadas, entenderam?

 

Era isso que eu queria entender como se faz.

[William Bruno 1501]

Era isso que eu queria entender como se faz.

isso é puro css cara. Olha o meu exemplo, estudando lá, você vai entender.

[ronza 1]

Tá ok william, vou dar uma lida no seu css e tentar entender, qualquer coisa volto a postar!

 

Obrigado!

[joaofla123 3]

é verdade, é puro css. não sei exatamente o que fazer nesse caso. se cosneguir a solucao posta ae.

[ronza 1]

Pode deixar João!

 

William, a imagem que você utiliza já contém todas as estrelas "pré-formatadas".

 

No caso do baixaki são só 2 imagens, 5 estrelas acesas e 5 estrelas apagadas. É de acordo com a nota que a imagem é "formatada".

[01100011cc 15]

Pesquise sobre sprit css...

é bem util para economizar requests de imgs...e deixar o site + rapido.

[ronza 1]

Eu dei uma olhada no css do baixaki e pelo o que eu entendi mais ou menos, a imagem de 5 estrelas apagadas é sempre exibida 100% e as 5 estrelas acesas dependem da nota. Por exemplo, se a nota for 4,5, é exibida 90% da imagem das estrelas acesas sobrepondo as estrelas apagadas, e desta forma a imagem formada é de 4,5 estrelas acesas e 0,5 estrela apagada.

 

Caso seja isto mesmo, acho mais fácil utilizar a imagem do William.

[ronza 1]

Encontrei uma solução melhor ainda para quem for utilizar nota com estrelas utilizando apenas uma imagem.

 

Basta criar uma imagem com 10 estrelas uma do lado da outra, as 5 primeiras acesas e as 5 ultimas apagadas.

 

Desta forma é só posicionar o background-image de acordo com a nota.