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('Não há enquetes no momento.').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('
Enviando...Enviando...
'); $('#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:

[download id=”19″]

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.


quinta-feira, 29 abril - 2010
por


  1. geve on quinta-feira 29, 2010

    cara, sou iniciante e vc deixou mta coisa vaga, como por exemplo, como eu uso o jquery nesse framework??????…. mas parabéns, vc é esforçado….

  2. Anderson Alves de Carvalho on quinta-feira 29, 2010

    Caro amigo, muito obrigado pelo seu comentário.
    Quem te responde é o Anderson, pois nosso amigo Marlon se desligou da StudioA.

    Sobre seu comentário, realmente é uma pergunta pertinente.
    Primeiro, será necessário ter um conhecimento básico sobre o CodeIgniter, sobre como instanciar classes e scripts.
    Nada de complicado. Dos frameworks que conheço este é de longe o mais fácil de usar.

    Dicas de leitura:
    http://codeigniterbrasil.com/passos-iniciais/instalacao-e-configuracao-inicial-do-codeigniter/
    http://www.submarino.com.br/produto/1/21871093/codeigniter+framework+php

    O blog indicado é bastante interessante para iniciantes, bem como o livro (temos aqui na agência e gostamos bastante).

    Agora, se você já tem alguma familiaridade, segue uma dica de como aplicar diretamente o JQuery no CodeIgniter:
    http://codeigniter.com/user_guide/libraries/javascript.html
    Basta ler a documentação e aplicar de acordo com a estrutura depastas indicadas.

    Bom é isso. Estamos a disposição para qualquer dificuldade.

    Grande abraço!!

  3. Bruno on quinta-feira 29, 2010

    Boa tarde pessoal… O tutorial ficou bastante legal, mas algumas coisas eu ainda não compreendi. Também não estou conseguindo fazer o download dos arquivos de exemplo do tutorial. Vocês podem enviar para o meu email. Obrigado desde já.

  4. Anderson on quinta-feira 29, 2010

    Olá Bruno.
    Muito obrigado pelo seu comentário.
    Tivemos uma migração de servidor do blog, portanto alguns links para download estão com problemas.
    O download dos scripts podem ser realizados através da seguinte URL: http://www.studioaweb.com.br/blog/wp-content/uploads/downloads/2010/04/enquete.rar
    Caso tenha alguma dificuldade é só avisar, OK.

    Grande abraço!

  5. Pedro on quinta-feira 29, 2010

    Cara, ótimo tutorial, mas a parte 3 ta off, pode colocar ela pra gente, pfv. Vlw

  6. Daniel Luis Camargo on quinta-feira 29, 2010

    Boa tarde; segui o tutorial até a parte III tudo ok,
    mas na parte 4 fica muito confuso vc não direciona o código que esta na tela se é para colar
    na control, js, ajax..infelizmente não consegui terminar a enquete por gentileza se vc puder ser mais claro quanto onde colocar o código que vc posta no tutorial ..exemplo este codigo abaixo
    vai na control? no js ? onde ….

    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(‘Não há enquetes no momento.’).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();
    }
    }


0

Spam protection by WP Captcha-Free


Tweetar