Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá.
Sou professor de arte em um colégio, e um amigo, também professor, propôs que fizéssemos uma simulação de eleição para presidente.
Resolvi tentar faze-lo em php.
Se possível gostaria de contar com a ajuda e análise deste projeto que estarei desenvolvendo.
Projeto: Urna Virtual:
Acesso garantido por login e senha.
Grava Nome e número de candidatos na tabela "candidatos"
Grava id_usuario votante na tabela votos para devidas consultas.
Grava id_candidaro na tabela votos para devidas consultas
Conta o número de votos recebidos por cada candidato.
Retorna o 1º, 2º e 3º lugares com a quantidade de votos recebidos.
BD - MysQl
Tabela aluno
id_usuario
nome
série
login
senha
Tabela Candidato
id_candidato = chave primária número inteiro auto incremento
nome = nome do candidato
numero = número do candidato
Tabela Apuracao
id_apura = chave primária número inteiro auto incremento
Id_usuario = guarda o número do usuário votante
id_candidato = guarda o número do candidato
Que bom Luiz Magno. Muito obrigado.
Agora vamos compor um formulario de login, para que só tenha acesso à votação alunos cadastrados.
<form class="formlogin" action="verifica_usuario.php" method="post" name="login" id="">
<legend>Login - Eleições 2015</legend>
<fieldset class="formlogin">
<label class="formlogin">
<span>Login</span>
<input name="usuario" type="text" id="usuario" /><br />
</label>
<label class="formlogin">
<span>Senha</span>
<input name="senha" type="password" id="senha" />
</label>
</fieldset>
<label class="formlogin">
<input type="submit" class="send" name="Submit" value="Acessar" />
</label>
Meu formulário tem uma classe que formata o formulário da maneira que desejo
O TSE tem um simulador , mas querendo fazer o de vocês creio que estão indo no caminho certo.
É verdade Motta, há um simulador do TSE, mas se analisarmos o que está sendo feito, o bom de fazer a própria urna eletrônica ou virtual é a oportunidade de aprender a programar em php, além de que para o colégio, a mesma prática poderá ser utilizada para se desenvolver partidos políticos e chapas eleitorais onde os alunos exercitarão a prática da cidadania, estimulando já nas primeiras fases do aprendizado o envolvimento político.
Voltando ao formulário é possível perceber que sua action direicona a uma página de nome "verifica_usuario.php".
Esta página fará uma checagem dos dados passados pelo form, se tudo estiver correto será redirecionado para a urna própriamente dita.
Vamos lá. Organizando melhor as coisas.
Criei uma pasta de nome urna.
Nesta pasta gravei os seguintes arquivos php:
formulario_login.php
index.php
urna.php
verifica_usuario.php
Na páina index há o fornulário principal onde fiz algumas alterações.
<form class="formlogin" action="verifica_usuario.php" method="post" name="logino" id="">
<legend>Login - Eleições 2015</legend>
<fieldset class="formlogin">
<label class="formlogin">
<span>Login</span>
<input name="login" type="text" id="login" /><br />
</label>
<label class="formlogin">
<span>Senha</span>
<input name="senha" type="password" id="senha" />
</label>
</fieldset>
<label class="formlogin">
<input type="submit" class="send" name="Submit" value="Acessar" />
</label>
</form>
a página verifica_usuario.php
<?php
session_start(); // Inicia a session
include "../Connections/connect.php";//faço conexão com o bd através da pasta Connections e da página connec.php
$login = $_POST['login'];//variavel que lê o login digitado
$senha = $_POST['senha'];//variavel que lê a senha digitada
//verificaçãose o login e senha não estão em branco
if ((!$login) || (!$senha)){
echo "Por favor, todos campos devem ser preenchidos! <br /><br />";
include "form.login.php";
}else{
$sql = mysql_query(
"SELECT * FROM usuarios
WHERE login='{$login}'
AND senha='{$senha}'
AND nivel='1'"
);//comparação das informações que foram digitadas com o que exite no bd
$login_check = mysql_num_rows($sql);
if ($login_check > 0){
while ($row = mysql_fetch_array($sql)){
foreach ($row AS $key => $val){
$$key = stripslashes( $val );
}
$_SESSION['id_usuario'] = $id_usuario; //capturando id_usuario
$_SESSION['nome'] = $nome;//capturando nome do usuario
header("Location: urna.php");//redirecionando para a urna
}
}else{
echo "<br / ><font color='#FFFFFF'\>Você não pode logar-se! Este usuário e/ou senha não são válidos!<br />
Por favor tente novamente!</font><br />";
include "formulario_login.php";//aviso de erro e redirecionando para o formulário de login se a senha estiver errada
}
}
?>
a página formulário_login.php
<form class="formlogin" action="verifica_usuario.php" method="post" name="logino" id="">
<legend>Login - eleições 2014</legend>
<fieldset class="formlogin">
<label class="formlogin">
<span>Login</span>
<input name="login" type="text" id="login" /><br />
</label>
<label class="formlogin">
<span>Senha</span>
<input name="senha" type="password" id="senha" />
</label>
</fieldset>
<label class="formlogin">
<input type="submit" class="send" name="Submit" value="Acessar" />
</label>
</form>
Usei duas páginas com o mesmo form, mas na página formulário_login.php, que utilizo no site as configurações em css são diferentes do css da index.php que contém o mesmo form, por isso utizo duas páginas aparentemente iguais.
Agora é hora de criar a página urna.php que terá um formulário configurado em css para parecer a urna eleitoral.
Ao menos é o que pretendo fazer.
Eu fiz uma ilustração de uma urna, salvei em png e coloquei a disposição para download.
Utilizarei do AdobeFireworks para "fatia-la" e utilizar de suas partes em css para montar o form com as opções da urna
link para download.
imagem:
Bom agora as coisas complicam um pouco.
Eu dei um nome para cada botão e um value, value=1, value=2 e assim sucesssivamente
Eu preciso fazer com que um input type hidden receba os values dos botões para compor os números de um candidato será que tem como?
Crie uma funcao que, ao clicar, pega o valor do botao e concatena no campo
document.getElementById("btn").value
pega o valor
crie seu codigo dentro de um desses metodos, no lugar de myScript
<element onclick="myScript">
OU
object.onclick=function(){myScript};
OU
object.addEventListener("click", myScript);
É por aí mesmo Electronic.
Mas antes de eu "atacar" o form com javascript vou passar o css que utilizei para conseguir um visual bancana.
Urilzei dois css. um de nome zerando.css que configura toda a página e depois a urna.css que configura todo o visual form.
Zerando.css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
font-size: 100.01%;
}
img {
border: 0;
}
Agora o css de configuração visual do form. urna.css:
/ CSS Document /
@import url("zerando.css");
html, body{
font-family:Verdana,"Trebuchet MS", Arial, Helvetica, sans-serif;
background-color:#0252A4;
text-align:center; /*alinha toda a página no centro*/
}
#tudo{
margin:20px auto;
padding:0px;
width:990px;
}
#urna{
margin:0px auto;
padding:0px;
background-image:url(image/tiradefundo.png);
background-repeat:repeat-x;
position:relative;
width:960px;
height:560px;
}
#tela{
margin:31px 0px 0px 21px;
padding:0px;
position:relative;
border-left:solid 3px #B3B3B3;
border-top:solid 3px #B3B3B3;
border-bottom:solid 3px #E6E6E6;
border-right:solid 3px #E6E6E6;
width:621px;
height:498px;
background-color:#CDCDD5;
float:left;
}
#justica{
margin:31px 15px 0px 0px;
padding:0px;
position:relative;
width:282px;
height:163px;
float:right;
}
#teclado{
margin:0px 0px 0px 12px;
padding:0px;
position:relative;
border-left:solid 3px #B3B3B3;
border-top:solid 3px #B3B3B3;
border-bottom:solid 3px #E6E6E6;
border-right:solid 3px #E6E6E6;
width:282px;
height:335px;
background-color:#333333;
float:left;
}
.tecla{
margin:7px 0px 0px 7px;
padding:0px;
float:left;
position:relative;
height:45px;
width:84px;
}
.teclao{
margin:07px 0px 0px 99px;
padding:0px;
float:left;
position:relative;
height:45px;
width:84px;
}
.botaoum {
background-image:url(image/um.png);
height:45px;
width:84px;
}
.botaodois {
background-image:url(image/dois.png);
height:45px;
width:84px;
}
.botaotres {
background-image:url(image/tres.png);
height:45px;
width:84px;
}
.botaoquatro {
background-image:url(image/quatro.png);
height:45px;
width:84px;
}
.botaocinco {
background-image:url(image/cinco.png);
height:45px;
width:84px;
}
.botaoseis {
background-image:url(image/seis.png);
height:45px;
width:84px;
}
.botaosete {
background-image:url(image/sete.png);
height:45px;
width:84px;
}
.botaooito {
background-image:url(image/oito.png);
height:45px;
width:84px;
}
.botaonove {
background-image:url(image/nove.png);
height:45px;
width:84px;
}
.botaozero {
background-image:url(image/zero.png);
height:45px;
width:84px;
}
.botaobranco {
background-image:url(image/branco.png);
height:45px;
width:84px;
}
.botaocorrige {
background-image:url(image/corrige.png);
height:45px;
width:84px;
}
.botaoconfirma {
background-image:url(image/confirma.png);
height:45px;
width:84px;
}
#conjbotao{
margin:31px 0px 0px 0px;
padding:0px;
position:relative;
width:280px;
float:left;
}Aqui o form_urna
<form action="" method="post" enctype="multipart/form-data" name="urna">
<input type="text" name="visor" id="visor" value="" maxlength="2"/>
<div class="tecla"><input type="button" name="num1" value="" onclick="presNum(1)" class="botaoum" align="left" /><!--fim da tecla--></div>
<div class="tecla"><input type="button" name="num2" value="" onclick="presNum(2)" class="botaodois" align="right" /><!--fim da tecla--></div>
<div class="tecla"><input type="button" name="num3" value="" onclick="presNum(3)" class="botaotres" align="right" /><!--fim da tecla--></div>
<div class="tecla"><input type="button" name="num4" value="" onclick="presNum(4)" class="botaoquatro" align="right" /><!--fim da tecla--></div>
<div class="tecla"><input type="button" name="num5" value="" onclick="presNum(5)" class="botaocinco" align="right" /><!--fim da tecla--></div>
<div class="tecla"><input type="button" name="num6" value="" onclick="presNum(6)" class="botaoseis" align="right" /><!--fim da tecla--></div>
<div class="tecla"><input type="button" name="num7" value="" onclick="presNum(7)" class="botaosete" align="right" /><!--fim da tecla--></div>
<div class="tecla"><input type="button" name="num8" value="" onclick="presNum(8)" class="botaooito" align="right" /><!--fim da tecla--></div>
<div class="tecla"><input type="button" name="num9" value="" onclick="presNum(9)" class="botaonove" align="right" /><!--fim da tecla--></div>
<div class="teclao"><input type="button" name="num0" value="" onclick="presNum(0)" class="botaozero" align="right" /><!--fim da teclao--></div>
<div id="conjbotao">
<div class="tecla"><input type="button" name="branco" value="" onclick="presNum(0)" class="botaobranco" align="right" /><!--fim da tecla--></div>
<div class="tecla"><input type="button" name="corrige" value="" onclick="presNum(0)" class="botaocorrige" align="right" /><!--fim da tecla--></div>
<div class="tecla"><input type="button" name="confrma" value="" onclick="presNum(0)" class="botaoconfirma" align="right" /><!--fim da tecla--></div>
<!--fim de conjbotao --></div>
</form>
Aqui o javscript usado para que o input hiddem de nome visor guarde as informações passadas pelos botões.
Infelizmente por mais que eu tenha tentado não consegui evitar que o campo ynput hidden se limita-se a apenas dois caracteres.
<script type="text/javascript">
// Função que adiciona os números no Visor quando pressionado os botões
function presNum(num) {
if (typeof gvisor == 'undefined') {
document.urna.visor.value = '';
}
document.urna.visor.value = document.urna.visor.value + num;
gvisor = 1;
}
// Função que limpa o visor e todas as variáveis existentes.
function calcLimpar() {
document.urna.visor.value = '';
delete gvalor;
delete goper;
delete gvisor;
}
</script>A urna foi criada e está funcionando completamente, só faltou colocar som nas teclas.
Obrigado a todos pela ajuda.
Tópico encerrado.
Por enquanto, você está indo no caminho certo.
também vejo essa estrutura no banco de dados.