Construindo um Sistema de Sorteio Simples com PHP e JavaScript
Neste post, vamos analisar a construção de um sistema de sorteio de nomes simples, baseado no repositório prize_draw de Yuri Martins. Abordaremos a estrutura do projeto, as tecnologias utilizadas e o funcionamento do código, tanto no frontend quanto no backend.
Estrutura do Projeto
O projeto é composto por quatro arquivos principais, cada um com uma responsabilidade bem definida:
O Frontend: A Interface do Usuário
A interface do usuário é construída em index.php e consiste em um formulário simples com uma área de texto para que o usuário insira os nomes dos participantes, separados por vírgula. A estilização é feita com o auxílio do framework Bootstrap, o que garante uma aparência limpa e responsiva.
O arquivo script.js é responsável por interceptar o envio do formulário. Ao invés de um envio tradicional, que recarregaria a página, o script utiliza a Fetch API para enviar os dados ao backend de forma assíncrona. O código a seguir ilustra essa funcionalidade:
document.getElementById('sortForm').addEventListener("submit", function(e){
e.preventDefault();
const formData = new FormData(this);
fetch('sort_names.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
document.getElementById('sortedName').textContent = data;
const modal = new bootstrap.Modal(document.getElementById('resultModal'));
modal.show();
document.getElementById('sort_names').value = '';
})
.catch(error => {
console.error('Error:', error);
});
});
Após o recebimento da resposta do backend, o nome sorteado é exibido em um modal do Bootstrap, e o campo de texto é limpo para um novo sorteio.
O Backend: A Lógica do Sorteio
A mágica acontece no arquivo sort_names.php. O script PHP recebe a lista de nomes enviada pelo frontend, processa os dados e retorna um único nome sorteado. O trecho de código a seguir demonstra a lógica principal:
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$sort_names = isset($_POST['sort']) ? $_POST['sort'] : '';
$names = explode(',', $sort_names);
$rand = array_rand($names, 1);
$name = htmlspecialchars(trim($names[$rand]), ENT_QUOTES, 'UTF-8');
echo $name;
}else{
echo "Por favor insira, nomes validos";
}
O script primeiramente verifica se a requisição foi feita utilizando o método POST. Em seguida, a string de nomes é separada em um array utilizando a função explode(). O sorteio em si é realizado pela função array_rand(), que seleciona aleatoriamente um ou mais índices de um array. Neste caso, apenas um índice é selecionado.
Por fim, o nome correspondente ao índice sorteado é retornado como resposta. É importante notar o uso da função htmlspecialchars() para prevenir ataques de Cross-Site Scripting (XSS), uma medida de segurança essencial ao lidar com dados inseridos pelo usuário.
Conclusão
O projeto de sistema de sorteio, embora simples, é um excelente exemplo de como integrar tecnologias de frontend e backend para criar uma aplicação web funcional. A utilização de PHP para a lógica de servidor e JavaScript com a Fetch API para a comunicação assíncrona resulta em uma experiência de usuário fluida e moderna.
Como sugestões de melhorias futuras, poderíamos implementar um sistema de armazenamento dos nomes em um banco de dados, permitir a realização de sorteios com múltiplos ganhadores e aprimorar a interface com animações e um design mais elaborado.
Comentários
Realize login para comentar neste post