Categorias: tutoriais

Tutorial – Criar enquete em PHP usando codeigniter parte IV

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

Menu horizontal com XHTML e CSS

A Paz galera!
Depois de muito ver as pessoas sofrendo com XHTML e CSS para montar um menu na horizontal, resolvi fazer um tutorial sobre o assunto pra tentar ajudar.

O código do XHTML é o seguinte:
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Empresa</a></li>
<li><a href=”#”>Produtos</a></li>
<li><a href=”#”>Serviços</a></li>
<li><a href=”#”>Contato</a></li>
</ul>

Código do CSS comentado:
ul {
/*POR PADRÃO A TAG UL VEM COM MARGIN E PADDING, E AQUI RETIRAMOS ESSA MARGEM E DEFINIMOS TAMBÉM O TAMANHO E TIPO DA FONTE*/
margin: 0px;
padding: 0px;
font-size: 9pt;
font-family: Verdana, Geneva, sans-serif;
}

ul li {
/*FLOAT LEFT SERVE PARA CADA LINK FICAR UM DO LADO DO OUTRO*/

float: left;
margin-right: 10px;
list-style: none;
}

ul li a {
/*COLOCAMOS DISPLAY BLOCK PARA A TAG “A” VIRAR UM BLOCO. O PADDING SERVE COMO UMA MARGEM INTERNA ENTRE O BLOCO E O LINK*/
display: block;
padding: 10px;
color: #666;
text-decoration: none;
background-color: #E6E6E6;
}

/*A PSEUDO-CLASSE “HOVER” DÁ AS CARACTERÍSTICAS DO LINK QUANDO O USUÁRIO ESTIVER COM O MOUSE SOBRE ELE */
ul li a:hover {
color: #E6E6E6;
background-color: #666;
}

Bom galera é isso, qualquer dúvida postem aí . Abraços.

Tutorial – Criar enquete em PHP usando codeigniter parte III

Hello galera, hoje vamos dar inicio a terceira parte de nosso tutorial “Criar enquete em PHP usando codeigniter”.

Nas partes anteriores vimos como configurar o codeigniter, e criamos o xhtml para a exibição dos dados que virá do banco de dados. Hoje vamos criar o banco de dados, e criar as tabelas que vamos usar.
Tá ficando legal minha gente, já já nós vamos ver tudo funcionando uhuuuuu.

Como vai haver mais de uma enquete, e com um número indefinido de alternativas (posteriormente veremos como limitar a exibição das alternativas), vamos precisar de duas tabelas. A primeira tabela vai conter o título da enquete, período de exibição e o stats da enquete – para saber se a enquete está ativa ou inativa. A segunda tabela conterá as alternativas de cada enquete, o número de votos, e o código da enquete relacionada.

Execute os códigos abaixo para criar o banco de dados e as tabelas.

leia mais »

Tutorial – Criar enquete em PHP usando codeigniter parte II

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.

leia mais »

Tutorial – Criar enquete em PHP usando codeigniter parte I

Salve gente boa que passa por aqui!

A quanto tempo não posto aqui né?!, é porque tava sem tempo, mas, pra compensar todo esse tempo (puts chega de fala tempo), fiz um tutorial mostrando como desenvolver um sistema de enquete. Vou dividir em 4 etapas – não desanime heim?! -; leia com bastante atenção todas as etapas, que no final quando você ver tudo funcionando, com certeza vai compensar todo o esforço.

Bom galera é necessário que vocês já possuam conhecimentos de CSS, AJAX, porque não da pra explicar em detalhes tudo o que nós vamos usar ok?!

Tecnologias usadas: PHP, XHTML, CSS, MYSQL, AJAX.

leia mais »

Timer ActionScript 3

Crie um arquivo novo como ActionScript 3.

Faça uma animação do frame 1 ao 10 em um movimento e depois do frame 10 ao 20 com outro movimento. Para esse tutorial irei fazer um bola indo de baixo do palco até o meio no frame 10 e depois até o topo frame 20.

flash-img001(Imagem 001)

leia mais »

Usando setInterval

Olá, depois de alguns dias (rsrsr) sem tutorial de flash, hoje irei mostrar como usar o setInterval em actionscript 2.0.

O setInterval serve para você controlar a sua animação com um tempo determinado pela função. Vou fazer uma animaçao bem simples para poder demonstrar.

Primeiro crie uma bola de qualquer cor no palco do seu flash, não se esqueça de fazer em AS2. Agora anime está bola do jeito que desejar até o frame 25. Agora anime do frame 25 até o frame 35.

Depois de animada a sua bola, crie uma nova camada para colocarmos as actions. No frame 25 desta camada de um Insert Keyframe (atalho: F6) e abra o painel de Action em Window->Actions (atalho: F9).
Digite os seguintes códigos:

//Serve para parar a animação
stop();

//Função que continuará a animação depois de um determinado tempo
function anima() {
play();
}

/*Usando o setInterval com o parametro do nome da função, e passando o tanto de milisegundos que a aniamção deverá esperar para poder chamar a função*/
setInterval (anima, 2000);

Você também pode usar o setInterval passando a função dentro do parametro. Exemplo:

stop();

setInterval (function () {
play();
}, 2000);

Com isso você pode controlar a sua animação sem usar muitos frames para deixar a animação constante.

Para ver um exemplo funcionando é só fazer o download.

Bom é isso galera qualquer dúvida é so postar ai, até a próxima.

set_interval_flash
set_interval_flash

Movie Clip seguindo o mouse

Hoje faremos um tutorial simples, mas muito legal.

Abra o flash, crie um arquivo novo do tipo ActionScript 2.0.
No palco desenhe um circulo ou um desenho que você goste, e o transforme em um movie clip.

Para transformar em movie clip clique selecione o seu desenho e clique em Modify->Convert to Symbol (Atalho F8). Coloque o nome de desenho ou o nome que desejar, do tipo movie clip e no registration deixe marcado a seleção do meio(Imagen 001).

imagem_001

leia mais »

Galeria de Fotos com Jquery

Bom pessoal, no post de hoje fica o exemplo de uma galeria de fotos desenvolvida em jquery, muito legal esse exemplo, o script fica numa página separada clique aqui para salva-la e lincá-lo na sua página XHTML.

Para criar o vínculo você deve colocar as linhas citadas nesse tutorial entre as tags

<head></head>

Também é necessário colocar o jquery na página, ja que a galeria é baseada em JQuery:

<script type="text/javascript" src="galery.js"></script>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>

(no exemplo acima estou usando a versão 1.3.1 compactada, mas você pode utilizar uma igual ou superior)

Lembre que o código JavaScript deve estar entre as tags

<script type="text/javascript"></script>

Agora vamos ao código JavaScript que você deve adicionar:
leia mais »

Tutorial Efeito Mascara no Flash

Ola! Hoje iremos aprender como desenvolver uma animaçao com máscara no flash.

Primeiramente crie um aquivo novo em Flash File (ActionScript 2.0), crie duas layer em Insert->Timeline->Layer, altere os seus nomes, a primeira deixe como Mascara e a segunda como imagem (Imagem 001).

flash-001

leia mais »