quarta-feira, 21 de janeiro de 2009

Votação de produtos com porcentagem e barra de progresso

E ai pessoal, tudo tranquilo?
Depois de mais ou menos 1 mes de ferias do blog, voltei aqui para postar mais uma implementação q fiz em um dos meus trabalhos.

No momento eu estou fazendo um site em PHP, onde há produtos e cada produto possui uma enquete com 5 opções:
1 - Péssimo produto
2 - Razoável
3 - Bom
4 - Muito bom
5 - Excelente

Eu não explicarei exatamente como fazer a enquete, ou seja, como incluir uma nova enquete ou como fazer com que a página receba os votos do usuário. Irei apenas enfatizar como pegar o total de votação e mostrar a porcentagem de cada opção e além disso, como mostrar o total da votação em uma barra de progresso horizontal.


TABELAS UTILIZADAS

Segue abaixo como estao as minhas tabelas na base de dados:

USUARIOS
-------------------
idusuario INT AUTOINCREMENT NOT NULL
nome VARCHAR(30) NOT NULL

PRODUTOS
-------------------
idproduto INT AUTOINCREMENT NOT NULL
nome VARCHAR(30) NOT NULL

VOTACOES_PRODUTOS
--------------------
idusuario INT
idproduto INT
data_votacao DATETIME
declaracao TINYINT (Campo que determina a opção do voto)

Bom, agora com nossas tabelas, irei mostrar a logica de como fazer a porcentagem de votos para cada opção.


PORCENTAGEM DE VOTOS POR OPÇÃO VOTADA


Para calcular a porcentagem de votos que uma opção teve, devemos fazer o seguinte calculo:
porcentagem é = quantidade total . (quantidade de votos/100)

Quantidade total = Número de registros da tabela votacoes_produtos.
Ex.: (SELECT COUNT(*) as qtde_total FROM votacoes_produtos)

Quantidade de votos = Número de votos que o produto obteve na determinada opção.
Ex.: (SELECT COUNT(*) as qtde_votos FROM votacoes_produtos WHERE idproduto = 3 and declaracao = 4)

ficaria assim em PHP:
$porcentagem = $qtde_total*($qtde_votos/100);
echo $porcentagem;

RECEBENDO A PORCENTAGEM DE TODAS AS OPÇÕES

Imagine a primeira opção (Péssimo produto) como 0% e a quinta opção (Excelente) como 100% da nossa barra de progresso.
Precisamos criar uma forma de preencher nossa barra de progresso pelas votações recebidas, tendo votos da primeira e última opção ou não.

Para fazer isso, faremos uma regra de três.
Vamos supor que 5 pessoas votaram, seus votos foram: 5, 3, 5, 1 e 2
A soma de todas as votações(opções), seria 16...correto?
O máximo de número de votos seria 5x5 = 25(100%)
Ai você faz aquela pergunta para obter a porcentagem: se para 25 pontos eu tenho 100%, quantos % eu obtive com 16 pontos?
Fácil!
25 = 100%
16 = x

x = (100*16)/25
x = 64%

Como diz o professor de inglês Arthur que aparece no youtube: IT'S EASY!!!


CRIANDO A BARRA DE PROGRESSO

Nossa barra de progresso será feita no esquema de Estrelas.
Faça download das seguintes imagens:




Para criar a barra de progresso, utilizaremos HTML puro.
Crie uma tabela com 100 pixels de largura, 0 de borda, cellpadding e cellspacing.
Dentro dessa nova tabela criada, insira outra tabela com 100% de largura, 0 de borda, cellpadding e cellspacing.

Na coluna(TD) da primeira tabela criada, insira o seguinte código CSS: style="background-image:url(estrela02.gif); background-repeat:no-repeat;"
Na coluna(TD) da segunda tabela criada, insira o seguinte código CSS:
style="background-image:url(estrela01.gif); background-repeat:no-repeat"

No width da segunda tabela criada, coloque o seguinte valor: width="< ? echo $x; ? >"
onde $x é o novo valor q obtemos com a regra de 3 que criamos acima.
Note que conforme a porcentagem, as estrelas coloridas sobrepõe as estrelas apagadas.

É isso galera..
Em caso de dúvidas, envie comentário q tentarei responder o mais rápido possível.
Até lá.

5 comentários:

Unknown disse...

tomara que a maíra saia pois éla é muito fútil

Unknown disse...

a maira tenque sair porque éla é miuto fútil

Unknown disse...

a maíra tenque sair

Unknown disse...

a ana tem que ficar pois éla é muito altentica .............por éssa rasão éla tenque ser a vencedora do bbb9

Unknown disse...

para min as duas tenque sair mesmo