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