Urna eletrônica (virtual)

wilson.crescencio.antonio · Setembro 17, 2014

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

Luiz Magno · Setembro 17, 2014

Por enquanto, você está indo no caminho certo.

também vejo essa estrutura no banco de dados.

wilson.crescencio.antonio · Setembro 17, 2014

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

Motta · Setembro 17, 2014

O TSE tem um simulador , mas querendo fazer o de vocês creio que estão indo no caminho certo.

wilson.crescencio.antonio · Setembro 17, 2014

É 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.

wilson.crescencio.antonio · Setembro 17, 2014

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.

wilson.crescencio.antonio · Setembro 18, 2014

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:

https://lh3.googleusercontent.com/-zad1Tx6m5rc/VBrX82oR2WI/AAAAAAAAAso/PSqwGBKjC38/s2048/urna_online.jpg

wilson.crescencio.antonio · Setembro 18, 2014

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?

Electronic · Setembro 19, 2014

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

OU
object.onclick=function(){myScript};

OU
object.addEventListener("click", myScript);

wilson.crescencio.antonio · Setembro 22, 2014

É 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;
}

wilson.crescencio.antonio · Setembro 23, 2014

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>

wilson.crescencio.antonio · Outubro 2, 2014

A urna foi criada e está funcionando completamente, só faltou colocar som nas teclas.

Obrigado a todos pela ajuda.

Tópico encerrado.

Arquivado

Urna eletrônica (virtual)

Recommended Posts

wilson.crescencio.antonio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luiz Magno 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilson.crescencio.antonio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Motta 645

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilson.crescencio.antonio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilson.crescencio.antonio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilson.crescencio.antonio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilson.crescencio.antonio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Electronic 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilson.crescencio.antonio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilson.crescencio.antonio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilson.crescencio.antonio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante