Enquete Com Ajax

Vamos começar a última parte do nosso tutorial!

É importante destacar que a forma como estamos desenvolvendo este sistema de enquete não está baseada na estrutura MVC, é somente um exemplo de como funciona a lógica, caso você use no seu site ou sistema, você pode adaptá-lo usando a estrutura que desejar.

Você pode usar o sistema como estamos desenvolvendo (Controllers e Views) normalmente, mas não é a melhor opção devido o framework Codeigniter ter um grande poder em relação a informações vindas de banco de dados.

Para fazer a votação vamos utilizar o Ajax.

“AJAX não é somente um novo modelo, é também uma iniciativa na construção de aplicações Web mais dinâmicas e criativas. AJAX não é uma tecnologia, mas um conjunto de tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades” fonte: Wikipédia

Bom, basicamente funciona da seguinte forma: primeiro é disparada uma solicitação HTTP para o servidor web. O servidor processa e retorna os dados (você precisa ter um script preparado para receber os dados retornados pelo servidor). Essa requisição acontece sem que a página seja recarregada.

Para trabalhar com javascript e Ajax uso o framework JQuery mas existem alguns outros como, por exemplo:
- Prototype
- MooTools e
- Dojo
entre outros que você pode usar em sua aplicação.

Para fazer o download da última versão do JQuery clique aqui

Antes de criarmos o Ajax, é necessário verificar se existe alguma enquete para ser exibida. Aproveitamos também e preparamos o script para esconder as alternativas e botões de ação caso o usuário já tenha votado.

var enqcod = $('input[name=enqcod]').val(); // codigo da enquete atual
if (enqcod==0 || enqcod=='') {
        // INFORMA AO USUÁRIO QUE NÃO EXISTE ENQUETE NO MOMENTO
        $('#BlocoEnq').html('<em>Não há enquetes no momento.</em>').css('color','#f00');
        // REMOVE OS BOTÕES VOTAR E VER RESULTADOS
        $('#enq_enviar').parent().remove();
}else {
 
        var votoenq = "{votoenq}";
        // VERIFICA SE O USUÁRIO JA VOTOU
        if (votoenq==0) {
                $('#enq_enviar').parent().remove();
                $('#blocoopcoes').hide();
                $('#enqt_results').show();
                $('#msgenquete').show();
        }
}

Se nenhuma enquete foi cadastrada no banco de dados, então o script exclui os botões ” votar” e “ver resultados”, e escreve a mensagem:
“Não há enquetes no momento”

Aplicamos uma ação no botão “Ver resultado”, usando o efeito slideUp nas alternativas da enquete. Caso o usuário clique no botão “votar” e as alternativas estiverem ocultas, o script as exibe com efeito de slideDown.

// AÇÃO QUE EXIBE OS RESULTADOS
$('#enq_resultado').click(function(){
        $('#BlocoEnq').slideUp('slow', function(){
                $('#msgenquete').hide();
                $('#enqt_results').slideDown();
        });
 
});
 
//===========================================
// ENQUETE
// ENQUETE VOTAR
$('#enq_enviar').click(function(){
        if($('#enqt_results').is(':visible')){
                $('#enqt_results').slideUp('slow', function(){
                        $('#msgenquete').show();
                        $('#BlocoEnq').slideDown();
                });
                return false;
        }
});

Depois que o usuário escolher uma opção e clicar em “votar”, o Ajax passa o código da enquete atual e da opção escolhida para que possamos saber qual enquete selecionar e qual alternativa adicionar votos. Também criamos um cookie para impedir que o usuário vote novamente.

No controller home, crie um novo método enquete() será responsável por realizar as ações CRUD » como dito acima, você pode utilizar a arquitetura MVC, e realizar essas operações em um model.

Posteriormente postarei um tutorial aqui no blog falando um pouco mais sobre os padrões MVC. Assine nosso feed para não perder nada.

function enquete(){
 
        $codigo = $this->input->post('codigo');
        $enqcod = $this->input->post('enqcod');
        $status=0; $resultado='';
 
        // CRIANDO UM COOKIE PARA IMPEDIR QUE O USUÁRIO VOTE MAIS QUE UMA VEZ
        $this->load->helper('cookie');
 
        // GRAVANDO VOTO NO BANCO
        $vcookie = get_cookie('enquete_'.$enqcod);
        if (!$vcookie || $vcookie!=1) {
            $query = $this->db->query("UPDATE enquete_alternativa SET enqaltvotos=enqaltvotos+1 WHERE enqcod=".$enqcod." AND enqaltcod=$codigo");
            if (!$query) $status=0;
            else $status=1;
            $cookie = array(
               'name'   => 'enquete_'.$enqcod,
               'value'  => 1,
               'expire' => '2592000'
            );
            set_cookie($cookie);
        }
 
        //CALCULA A PORCENTAGEM DE VOTOS
        $query_totalv = $this->db->query("SELECT enqaltvotos FROM enquete_alternativa WHERE enqcod=$enqcod LIMIT 5");
        $totalvotos=0; $altp='';
        if ($query_totalv->num_rows() > 0){
            $totalvotos = $this->db->query("SELECT SUM(enqaltvotos) as total FROM enquete_alternativa WHERE enqcod=$enqcod")->row();
            $totalvotos = !is_numeric($totalvotos->total)?0:$totalvotos->total;
            foreach($query_totalv->result() as $dados){
                $enqalt = $dados->enqaltvotos;
                $altp.= round( (($enqalt * 100) / $totalvotos), 1).',';
            }
            if (substr($altp,-1)==',') $altp=substr($altp,0,-1);
        }
 
        $json='
            {
            "status":'.$status.',
            "resultado":
                {
                 "total":'.$totalvotos.',
                 "altp":['.$altp.']
                }
            }
        ';
        die($json);
 
}

E, por fim, o Ajax que irá enviar os dados ao servidor.

    var inputopcao = $('input[type=radio]:checked').val();// opcao selecionada
 
    $('#blocoopcoes').fadeOut('fast',function(){
        // ENVIANDO VOTO DA ENQUETE POR AJAX
        $.ajax({
            type: "POST",
            url: "< ?php echo base_url(); ?>index.php/home/enquete",
            data: 'codigo='+inputopcao+'&enqcod='+enqcod,
            dataType: 'json',
            beforeSend: function() {
                $('#enq_enviar').parent().remove();
                var img_loading = 'http://ajaxload.info/cache/FF/FF/FF/00/00/00/2-0.gif';
                $('#dados_enq').append('<div id="carregando"><img src="'+img_loading+'" alt="Enviando..." />Enviando...</div>');
                $('#carregando').css({
                    'padding-top':30+'px',
                    'text-align':'center'
                });
            },
            success: function(json){
                $('#carregando').fadeOut('fast',function(){
                    $(this).remove();
                    if (parseInt(json.status)==1) {
                        $.each(json.resultado.altp,function(i,v){
                            var indexId = i+1;
                            var vfloat = parseFloat(v);
                            var wporc = parseInt((100*vfloat)/100); // CALCULANDO A PORCENTAGEM DE VOTOS
                            $('#eqtbar_'+indexId+' div').css({'width':wporc+'px'});
                            $('#percent_'+indexId).html(v+'%');
                        });
                        //TOTAL DE VOTOS
                        $('#totalvotos').html('Total de votos: '+json.resultado.total);
                        $('#enqt_results').fadeIn('slow');
                    }else{
                        $('#dados_enq').find('b').html('Não foi possível enviar seu voto ao servidor, tente novamente mais tarde.')
                    }
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $('#msgenquete').hide();
                $('#carregando').fadeOut('fast',function(){
                    $(this).remove();
                    $('#dados_enq').find('b').html('Não foi possível enviar seu voto ao servidor, tente novamente mais tarde.')
                });
            }
        });
    });

Verificando se existe cookie, e impedindo que o usuário vote novamente. Adicione o código abaixo no método index().

//VERIFICA SE O USUÁRIO JA VOTOU
$this->load->helper('cookie');
 
if ($data['enqcod']!=0) {
    if (!get_cookie('enquete_'.$data['enqcod'])==1) {
        $data['votoenq'] = 1;
    }else{
        $data['votoenq'] = 0;
    }
}

Para ver o exemplo final online da nossa aplicação clique aqui.

Bom pessoal espero que tenham gostado. Caso necessite, faça o download de todo o código usado neste tutorial:

Tutorial Enquete com PHP - parte IV

Se você perdeu as etapas anteriores desse tutorial clique nos links abaixo para visualizá-las:
- Enquete com PHP parte I
- Enquete com PHP parte II
- Enquete com PHP parte III

Abraços e até a próxima.
Fiquem com Deus.

Hello galera!
Na primeira parte do nosso tutorial vimos como configurar controlador para exibir o conteúdo da view, e criamos uma pasta onde armazenariamos todo o css, da enquete. Muito bem, hoje vamos criar o XHTML e o CSS, para uma boa apresentação dos dados posteriormente vindos do banco de dados.

>> se você não viu a primeira parte do tutorial clique aqui para acessá-la <<

Crie um arquivo base.css e salve dentro da pasta tema (system/application/tema/), esse arquivo conterá todo o estilo (fontes, cores, espaçamentos) das marcações xhtml dentro da página.

Abra a view home (system/application/view/home) e vamos criar a estrutura xhtml. Nessa etapa é necessário que você possua conhecimentos básicos de css e xhtml, porque não será possivel explicar a função de cada marcação xhtml, e as devidas formatações feitas com css.

O site do Maujor é uma ótima ferramenta para quem gostaria de se aprofundar nesse assunto.