Criar enquete em PHP com galeria de imagem hover com Bootstrap
Nesta vídeo aula será apresentado como criar enquete em PHP com galeria de imagem hover com Bootstrap.
Será apresentado como criar a página para listar as imagens do produto.
Em seguida como usar o thumbnail do Bootstrap para criar a galeria de imagem e implementar a imagem hover com o botão com a opção de votar na imagem.
Download do código fonte desenvolvido na aula: DOWNLOAD
Esse tutorial é a continuação do tutorial “Como criar sistema de votação ou enquete com PHP e MySQLi”.
Listar os produtos e os votos
Primeiro será criado o arquivo “index.php”. No mesmo será incluído a conexão com o banco de dados “include_once("conexao.php");”, para poder listar os produtos cadastrado no banco de dados. Com a conexão incluída necessário pesquisar no banco de dados com a QUERY "SELECT * FROM produtos", após realizar a pesquisa no banco de dados é utilizado o while para imprimir o resultado do banco de dados.
Será impresso a foto do produto, nome do produto e a quantidade de voto que o produto recebeu na votação. Em seguida será criado o link para o usuário realizar a votação. Para criar o layout será utilizado o Framewok Bootstrap. Abaixo está o código com a explicação de cada linha.
<?php
session_start();//Inicializar a sessão
//Incluir a conexão com o banco de dados
include_once("conexao.php");
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Incluir meta tag viewport para controlar o layout em navegadores de dispositivos móveis -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Votacao</title>
<!-- Incluir o CSS do framework Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Incluir o CSS personalizado para o hover da imagem -->
<link href="css/personalizado.css" rel="stylesheet">
</head>
<body>
<!-- Criar o titulo usando a tag <h1> do HTML -->
<div class="container">
<!-- Criar o titulo usando a tag <h1> do HTML -->
<h1>Listar</h1>
<?php
//Imprimir a mensagem de voto recebido co sucesso
if(isset($_SESSION['msg'])){
//Imprimir o valor da sessão
echo $_SESSION['msg']."<br>";
//Destruir a sessão com PHP
unset($_SESSION['msg']);
}
?>
<div class="row">
<?php
//Criar a QUERY para pesquisar os produtos no banco de dados
$result_produto = "SELECT * FROM produtos";
//Executar a QUERY para pesquisar os produtos no banco de dados com o MySQLi
$resultado_produto = mysqli_query($conn, $result_produto);
//Usar o while para percorrer os dados trazidos do banco de dados
while($row_produto = mysqli_fetch_assoc($resultado_produto)){
?>
<!--Usar o thumbnail do bootstrap para apresentar as imagens do produto -->
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<div class="caption">
<p style="padding-top: 70px;">
<a href="votar.php?id=<?php echo $row_produto['id']; ?>" class="btn btn-success">
Votar
</a>
</p>
</div>
<!--Imprimir a foto do produto salvo no banco de dados-->
<img src="imagens/<?php echo $row_produto['imagem']; ?>">
</div>
<div class="descricao">
<!--Criar o link para o usuário poder votar no produto-->
<a href="votar.php?id=<?php echo $row_produto['id']; ?>" class="btn btn-success">
Votar
</a>
<!--Imprimir o nome do produto salvo no banco de dados-->
<h3><?php echo $row_produto['nome']; ?></h3>
<!--Imprimir a quantidade de votos que o produto tem salvo no banco de dados-->
<p><?php echo "Votos: ". $row_produto['qnt_voto']; ?></p>
</div>
</div><?php
}
?>
</div>
</div>
<!-- Incluir o jquery do Google API -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Incluir o JavaScript do framework Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Incluir o JavaScript personalizado para o hover da imagem -->
<script src="js/personalizado.js"></script>
</body>
</html>
Criar o arquivo para acrescentar o voto no banco de dados
Em seguida será criado o arquivo “votar.php” para receber o voto. Neste arquivo será incluído a conexão com o banco de dados utilizando o include_once("conexao.php");. Em seguida verificar a presença da variável ID na URL usando o GET do PHP.
Existindo a variável ID na URL, será usado mais um IF para verificar se o usuário já votou. Caso tenha votado não será contabilizado o voto.
Caso não tenha votado será criado o COOKIE com o tempo de 5 segundo, sendo o tempo de validade do COOKIE, neste período de 5 segundos o usuário tente votar não será contabilizado o voto.
Em seguida será acrescentado no banco de dados o voto do usuário, usando o UPDATE e informando a qual produto o voto deve ser contabilizado, “UPDATE produtos SET qnt_voto=qnt_voto + 1 WHERE id ='".$_GET['id']."'".
Para confirmar a alteração no banco de dados será utilizado a função mysqli_affected_rows() para validar a inserção do voto no produto.
Para finalizar será criado a variável global em PHP $_SESSION['msg'] e atribuir a mensagem de sucesso, com personalização do CSS INLINE <p style='color: green;'></p>. Em seguida fazer o redirecionamento com PHP utilizando o header("Location: index.php"); e indicando para qual arquivo o usuário será redirecionado.
<?php
session_start();//Inicializar a sessão com PHP
include_once("conexao.php");
//Verificar se está vindo a variável id pela URL
if(isset($_GET['id'])){
//Verificar se existe o COOKIE 'voto_cont',
//caso exista o usuário já votou e o voto não deve ser contabilizao e acessa o IF
//Senão acessa o ELSE para somar o voto
if(isset($_COOKIE['voto_cont'])){
//Criar a variável global com a mensagem de sucesso usando o alerta do Bootstrap
$_SESSION['msg'] = "<div class='alert alert-danger'>Você já votou!</div>";
//Redirecionar o usuário com PHP para a página index.php
header("Location: index.php");
}else{
//Criar o COOKIE com PHP para proibir novo voto em 5 segundos
setcookie('voto_cont', $_SERVER['REMOTE_ADDR'], time() + 5);
//Criar a QUERY UPDATE para acrescentar o voto no banco de dados
$result_produto = "UPDATE produtos SET qnt_voto=qnt_voto + 1
WHERE id ='".$_GET['id']."'";
//Executar a QUERY UPDATE para acrescentar o voto no banco de dados
$resultado_produto = mysqli_query($conn, $result_produto);
//Validar com mysqli_affected_rows a inserção do voto no banco de dados
if(mysqli_affected_rows($conn)){
//Criar a variável global com a mensagem de sucesso usando o alerta do Bootstrap
$_SESSION['msg'] = "<div class='alert alert-success'>Voto recebido com sucesso!</div>";
//Redirecionar o usuário com PHP para a página index.php
header("Location: index.php");
}else{
//Criar a variável global com a mensagem de erro usando o alerta do Bootstrap
$_SESSION['msg'] = "<div class='alert alert-danger'>Erro ao votar!</div>";
//Redirecionar o usuário com PHP para a página index.php
header("Location: index.php");
}
}
}
Criar o conexão com banco de dados usando PHP e MySQLi
Para alterar os dados com PHP e MySQLi necessário criar a base de dados “celke”, em seguida fazer a conexão com o banco de dados utilizando o PHP e MySQLi. Para fazer a conexão será criado o arquivo “conexao.php” e colocado o código abaixo.
<?php
//Nome do servidor que está o banco de dados
$servidor = "localhost";
//Usuário do banco de dados
$usuario = "root";
//Senha do banco de dados
$senha = "";
//Nome da base de dados
$dbname = "celke";
//Criar a conexao com MySQLi
$conn = mysqli_connect($servidor, $usuario, $senha, $dbname);
Criar a tabela “produtos” no banco de dados
Com a base pronta e a conexão, necessário criar a tabela “produtos”, com as colunas “id, nome, qnt_voto”. Para criar pode ser executado o código abaixo no seu gerenciador de banco de dados, no exemplo está sendo utilizado o phpMyAdmin.
CREATE TABLE `produtos` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nome` varchar(220) NOT NULL,
`imagem` varchar(200) NOT NULL,
`qnt_voto` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
INSERT INTO produtos VALUES("1","Produto 1","capa_exemplo.jpg","14");
INSERT INTO produtos VALUES("2","Produto 2","cinco.png","8");
INSERT INTO produtos VALUES("3","Produto 3","curso.png","7");
Necessário ter o arquivo com as imagens, as imagens que tem seu nome salvo no banco de dados, o arquivo de imagem pode ser baixado através deste link.
Criar o arquivo CSS para imagem hover
Criar o arquivo CSS “personalizado.css” para imagem hover, no código abaixo está a explicação de cada linha.
.thumbnail{
position:relative; /* para colocar os elemento dentro do thumbnail */
overflow:hidden; /*escolher o que deverá acontecer se o conteúdo ultrapassar o tamanho do seletor thumbnail.*/
}
.caption{
position:absolute; /*Position Absolute coloca o elemento fixo na página*/
top:0; /*Posicionamento 0px abaixo da borda*/
right:0; /*Posicionamento 0px para a esquerda da borda direita*/
background:rgba(66, 139, 202, 0.55); /*Defenir a cor do hover e também a pelicula do hover, neste caso definido 0.55*/
width:100%; /*Defenir a largura para ocupar 100%*/
height: 100%; /*Defenir a altura para ocupar 100%*/
display: none; /*retira o elemento do layout da página*/
text-align:center; /*Alinhar o conteúdo no centro */
color:#fff !important; /*Defenir a cor do texto e colocar !important para prevalecer sobre as outras cores de letra*/
z-index: 2; /*O Z-index é o que define a Profundidade*/
}
.descricao{
text-align: center; /*Alinha o conteúno no centro do seletor descricao*/
}
Criar o arquivo JavaScript para imagem hover
Criar o arquivo Javascript “personalizado.js” para imagem hover, no código abaixo está a explicação de cada linha.
$(document).ready(function(){
/*$(document): para executar imediatamente após os elementos serem carregarem, independente das imagens e estilos.*/
/*Usado ready para tornar a função disponível após o carregamento do documento*/
$('.thumbnail').hover(
function(){
$(this).find('.caption').fadeIn(250);//funções fadeIn serve para determinar quando elemento irá aparecer
/*O método find () retorna os elementos descendentes do elemento caption.*/
/*('.caption') Pegar o ID do atributo no nosso caso a classe*/
},
function(){
$(this).find('.caption').fadeOut(250);//funções fadeOut serve para determinar quando elemento irá desaparecer
/*O método find () retorna os elementos descendentes do elemento caption.*/
/*('.caption') Pegar o ID do atributo no nosso caso a classe*/
}
);
});
Portanto, neste tutorial foi apresentado como criar sistema votação com PHP com galeria de imagem, e salvar no banco de dados o voto. Também apresentado como usar o Bootstrap.
Download do código fonte desenvolvido na aula: DOWNLOAD