Como criar avaliação com estrela em PHP
Neste tutorial, será apresentado como criar um formulário de avaliação com estrelas em PHP.
Primeiramente, será mostrado como receber os dados do formulário com PHP.
Em seguida, será apresentado como salvar no banco de dados as informações da avaliação.
Por fim, será mostrado como listar as avaliações.
Download do código fonte desenvolvido na aula: Download
Curso de PHP Developer: Mais Detalhes do Curso
Como limitar quantidade de caracteres no campo com JavaScript: Acessar
Como evitar SQL Injection: Acessar
Receber as aulas gratuitas do curso de PHP Developer: Acessar
Para começar, é criado o arquivo "index.php" com a estrutura básica do HTML.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celke</title>
</head>
<body>
// Conteúdo da página
</body>
</html>Implementado o formulário com a opção do usuário selecionar a quantidade de estrelas.
<!-- Inicio do formulário -->
<form method="POST" action="processa.php">
<div class="estrelas">
<!-- Carrega o formulário definindo nenhuma estrela selecionada -->
<input type="radio" name="estrela" id="vazio" value="" checked>
<!-- Opção para selecionar 1 estrela -->
<label for="estrela_um"><i class="opcao fa"></i></label>
<input type="radio" name="estrela" id="estrela_um" id="vazio" value="1">
<!-- Opção para selecionar 2 estrela -->
<label for="estrela_dois"><i class="opcao fa"></i></label>
<input type="radio" name="estrela" id="estrela_dois" id="vazio" value="2">
<!-- Opção para selecionar 3 estrela -->
<label for="estrela_tres"><i class="opcao fa"></i></label>
<input type="radio" name="estrela" id="estrela_tres" id="vazio" value="3">
<!-- Opção para selecionar 4 estrela -->
<label for="estrela_quatro"><i class="opcao fa"></i></label>
<input type="radio" name="estrela" id="estrela_quatro" id="vazio" value="4">
<!-- Opção para selecionar 5 estrela -->
<label for="estrela_cinco"><i class="opcao fa"></i></label>
<input type="radio" name="estrela" id="estrela_cinco" id="vazio" value="5"><br><br>
<!-- Campo para enviar a mensagem -->
<textarea name="mensagem" rows="4" cols="30" placeholder="Digite o seu comentário..."></textarea><br><br>
<!-- Botão para enviar os dados do formulário -->
<input type="submit" value="Cadastrar"><br><br>
</div>
</form>
<!-- Fim do formulário -->Criado o arquivo "processa.php" para receber a quantidade de estrelas selecionada pelo usuário no formulário e salvar no banco de dados.
<?php
session_start(); // Iniciar a sessão
// Incluir o arquivo com a conexão com banco de dados
include_once './conexao.php';
// Definir fuso horário de São Paulo
date_default_timezone_set('America/Sao_Paulo');
// Acessar o IF quando é selecionado ao menos uma estrela
if (!empty($_POST['estrela'])) {
// Receber os dados do formulário
$estrela = filter_input(INPUT_POST, 'estrela', FILTER_DEFAULT);
$mensagem = filter_input(INPUT_POST, 'mensagem', FILTER_DEFAULT);
// Criar a QUERY cadastrar no banco de dados
$query_avaliacao = "INSERT INTO avaliacoes (qtd_estrela, mensagem, created) VALUES (:qtd_estrela, :mensagem, :created)";
// Preparar a QUERY
$cad_avaliacao = $conn->prepare($query_avaliacao);
// Substituir os links pelo valor
$cad_avaliacao->bindParam(':qtd_estrela', $estrela, PDO::PARAM_INT);
$cad_avaliacao->bindParam(':mensagem', $mensagem, PDO::PARAM_STR);
$cad_avaliacao->bindParam(':created', date("Y-m-d H:i:s"));
// Acessa o IF quando cadastrar corretamente
if ($cad_avaliacao->execute()) {
// Criar a mensagem de erro
$_SESSION['msg'] = "<p style='color: green;'>Avaliação cadastrar com sucesso.</p>";
// Redirecionar o usuário para a página inicial
header("Location: index.php");
} else {
// Criar a mensagem de erro
$_SESSION['msg'] = "<p style='color: #f00;'>Erro: Avaliação não cadastrar.</p>";
// Redirecionar o usuário para a página inicial
header("Location: index.php");
}
} else {
// Criar a mensagem de erro
$_SESSION['msg'] = "<p style='color: #f00;'>Erro: Necessário selecionar pelo menos 1 estrela.</p>";
// Redirecionar o usuário para a página inicial
header("Location: index.php");
}
No arquivo 'index.php', a sessão é iniciada e é verificado se existe mensagem de erro ou sucesso criada no arquivo 'processa.php'.
session_start(); // Iniciar a sessão// Imprimir a mensagem de erro ou sucesso salvo na sessão
if(isset($_SESSION['msg'])){
echo $_SESSION['msg'];
unset($_SESSION['msg']);
}Para finalizar, é criado o arquivo 'listar_avaliacoes.php' para listar as avaliações que estão salvas no banco de dados.
<?php
// Incluir o arquivom com a conexão com banco de dados
include_once './conexao.php';
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celke - Listar as Avaliacoes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<!-- Criar menu básico -->
<a href="index.php">Avaliar</a><br>
<a href="listar_avaliacoes.php">Listar</a><br><br>
<h1>Avaliações dos Usuários</h1>
<?php
// Recuperar as avaliações do banco de dados
$query_avaliacoes = "SELECT id, qtd_estrela, mensagem
FROM avaliacoes
ORDER BY id DESC";
// Preparar a QUERY
$result_avaliacoes = $conn->prepare($query_avaliacoes);
// Executar a QUERY
$result_avaliacoes->execute();
// Percorrer a lista de registros recuperada do banco de dados
while ($row_avaliacao = $result_avaliacoes->fetch(PDO::FETCH_ASSOC)) {
//var_dump($row_avaliacao);
// Extrair o array para imprimir pelo nome do elemento do array
extract($row_avaliacao);
echo "<p>Avaliação: $id</p>";
// Criar o for para percorrer as 5 estrelas
for ($i = 1; $i <= 5; $i++) {
// Acessa o IF quando a quantidade de estrelas selecionadas é menor a quantidade de estrela percorrida e imprime a estrela preenchida
if ($i <= $qtd_estrela) {
echo '<i class="estrela-preenchida fa-solid fa-star"></i>';
} else {
echo '<i class="estrela-vazia fa-solid fa-star"></i>';
}
}
echo "<p>Mensagem: $mensagem</p><hr>";
}
?>
</body>
</html>Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!