Uma maneira muito comum de se proteger deste tipo de ataque é diferenciar se quem está enviando as informações é uma pessoa ou um bot. Isso pode ser feito criando um código que seja de fácil leitura para o usuário humano e difícil para máquinas e pedir para o usuário digitar este código junto com as outras informações do formulário.

Este sistema é muito comum hoje em dia e recebe o nome de CAPTCHA(Completely Automated Public Turing Test to Tell Computers and Humans Apart ou Teste Público Totalmente Automatizado para Diferenciar Humanos de Computadores) e vamos agora apreender com fazer um simples.

Começaremos criando uma imagem com um fundo um pouco bagunçado, quanto mais bagunçado melhor, isso dificulta a leitura por bots.

O CAPTCHA vai funcionar da seguinte forma, vamos gerar um código baseado na hora do sistema e armazená-lo em uma sessão, após isso iremos criar uma imagem com o fundo que criamos acima e escrever o nosso código gerado sobre ele.

Vamos então aos código

session_start();
 
$codigoCaptcha = substr(md5( time() ) ,0,9);
 
$_SESSION['captcha'] = $codigoCaptcha;
 
$imagemCaptcha = imagecreatefrompng("fundocaptch.png");
 
$fonteCaptcha = imageloadfont("anonymous.gdf");
 
$corCaptcha = imagecolorallocate($imagemCaptcha,255,0,0);
 
imagestring($imagemCaptcha,$fonteCaptcha,15,5,$codigoCaptcha,$corCaptcha);
 
header("Content-type: image/png");
 
imagepng($imagemCaptcha);
 
imagedestroy($imagemCaptcha);

Na linha 3 geramos nosso código “aleatório” começamos pegando o timestamp através da função time e aplicamos sobre ele a função md5 deste código md5 pegamos os 9 primeiros caracteres(se você quiser pode pegar mais ou menos) através da função substr.

Na linha 5 salvamo nosso código na sessão para que possamos compará-lo mais tarde.

Na linha 8 criamos uma imagem a partir da imagem de fundo que criamos.

Na linha 10 carregamos uma fonte através da função imageloadfont que carrega define a fonte que será utilizada para escrever nosso código de captcha na imagem criada na linha 8.

Na linha 12 utilizamos a função imagecolorallocate para gerar uma cor para o código que iremos inserir na imagem.

Na linha 14 utilizamos a função imagestring para “desenhar” o código gerado na linha 3 na imagem criada na linha 8, utilizando a fonte definida na linha 10.

Na linha 17 mudamos o cabeçalho do arquivo para ele ser um arquivo do tipo imagem no formato png, isso faz com que o navegador mostre a imagem e não o código binarios em forma de texto.

Na linha 19 enviamos a imagem gerada para o navegador. Na linha 21 desalocamos o espaço utilizado pela imagem criada.

Para utilizar o captcha precisamos de um formulário e dentro dele exibiremos a nossa imagem através da tag IMG e também precisaremos de um campo para o usuário inserir o código captcha.

<form action="valida.php" method="post">
    <img src="captcha.php" alt="código captcha" />
 
    <label for="captcha">Digite o código</label>
<input id="captcha" name="captcha" type="text" />
<input type="submit" value="Enviar" />
</form>

Agora basta compara o valor passado por POST no input captcha com o valor armazenada em sessão.

    if( $_SESSION['captcha'] == $_POST['captcha']){
        echo "
 
<h1>Ok - Código Correto</h1>
 
 
";
    }else{
        echo "
 
<h1>Erro - Código digitado errado</h1>
 
 
";
    }

Aqui você pode visializar o exemplo

Download do exemplo.

Aqueles que já trabalharam com Java sabem que existe algo chamado JDBC que resolve este problema, fornecendo uma camada de abstração de dados através de interfaces, bastando carregar o driver correto e utilizar sempre os mesmos métodos para acessar qualquer banco de dados.

Para os desavisados o PHP possui, desde a versão 5, algo parecido que se chama PDO – PHP Data Objects, permitindo o acesso a vários bancos de dados chamando sempre as mesmas funções.

Os drivers PDOs devem ser carregados pelo módulo PHP então temos que habilita-los e isso é feito dentro do arquivo php.ini.

extension=pdo.so
extension=pdo_mysql.so
extension=pdo_pgsql.so
extension=pdo_sqlite.so

Normalmente não temos acesso ao arquivo php.ini pois contratamos um serviço de hospedagem, então para ver os drivers que estão habilitados na hospedagem que contratamos devemos executar o código abaixo:

foreach(PDO::getAvailableDrivers() as $driver){
    echo $driver.'<br />';
}

Como o próprio nome do recurso “PHP Data Objects” a conexão e a manipulação dos dados é feita utilizando uma classe do PHP chamada PDO – que deve ser instanciado com as informações de conexão ao banco.

Exemplo:

 
$conn = new PDO('mysql:host=localhost;port=3306;dbname=teste', 'root', '123456');

Como podemos notar o construtor do objeto PDO aceita três parâmetros, o primeiro é uma string contendo o driver a ser utilizado mysql, o local onde o banco esta rodando localhost, a porta que o banco esta escutando 3306 e o nome do banco de dados teste. O segundo parâmetro é o usuário de acesso ao banco de dados e o terceiro é a senha de acesso.

A partir de agora podemos utilizar o objeto armazenado em $conn para manipular os dados no banco de dados.

Como sabemos quando estamos trabalhando com banco de dados vários erros podem acontecer como o banco de dados estar indisponível entre outra coisas. O PDO pode ser configurado para gerar exceção quando algum erro destes ocorrem sendo capturados com um bloco try{…}catch(){…} sendo lançada a exceção PDOException.

Abaixo um exemplo de inserção utilizando a classe PDO:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

try{
 
    //instancia o objeto PDO, conectando com o banco mysql
    $conn = new PDO('mysql:host=localhost;port=3306;dbname=teste', 'root', '123456');
 
    //configurando para utilizar exceções
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
 
    //executa as instruções SQL
    $conn->exec("INSERT INTO usuarios (login,senha,nome) VALUES ('rodrigo', '123456', 'rodrigo')");
    $conn->exec("INSERT INTO usuarios (login,senha,nome) VALUES ('thiago', '654321', 'Thiago')");
    $conn->exec("INSERT INTO usuarios (login,senha,nome) VALUES ('maria', '654123', 'Maria')");
 
    //fecha a conexão
    $conn = null;
}catch (PDOException $i){
        //se houver exceção, exibe
        print "Erro: <code>" . $i->getMessage() . "</code>";
}
?>

Como vemos nas linha 11,12,13 utilizamos o método exec para executar comando SQL no banco de dados.

Agora veremos como consultar utilizando a classe PDO:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

try{
        //instancia o objeto PDO, conectando com o banco mysql
    $conn = new PDO('mysql:host=localhost;port=3306;dbname=teste', 'root', '123456');
    //configurando para utilizar exceções
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
    //executa a instrução de consulta
    $result = $conn->query("SELECT senha,login FROM usuarios");
    if($result){
                //percorre os resultados via o laço foreach
                foreach($result as $linha){
                        //exibe o resultado
                        print $linha['login'] . " - " . $linha['senha'] . "<br>\n";
                }
 
        }
    //fecha a conexão
    $conn = null;
}catch (PDOException $i){
        //se houver exceção, exibe
        print "Erro: <code>" . $i->getMessage() . "</code>";
}

Como vimos para executar uma consulta utilizanos a função query que retorna um objeto de resposta PDOStatement que pode ser percorrido utilizando um laço foreach(linha 9).

Também é possível percorrer um objeto PDOStatement utilizando o método fetch dele tratar cada linha da consulta como um objeto.

Exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

try{
        //instancia o objeto PDO, conectando com o banco mysql
    $conn = new PDO('mysql:host=localhost;port=3306;dbname=teste', 'root', '123456');
 
    //configurando para utilizar exceções
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
    //executa a instrução de consulta
    $result = $conn->query("SELECT login, senha FROM usuarios");
 
    if($result){
                //percorre os resultados via o fetch()
                while ($linha = $result->fetch(PDO::FETCH_OBJ)){
                        //exibe resultado
                        print $linha->login . " - " . $linha->senha . "<br>\n";
                }
 
        }
 
    //fecha a conexão
    $conn = null;
}catch (PDOException $i){
        //se houver exceção, exibe
        print "Erro: <code>" . $i->getMessage() . "</code>";
}
?>

Na linha 13 chamamos o método fetch que recebe a constante PDO::FETCH_OBJ que é responsável por definir que o retorno será um objeto. Também podemos passar as constantes PDO::FETCH_ASSOC que retorna um array com os indices sendo os nomes das colunas da consulta e PDO::FETCH_NUM que retorna um array com os indices numéricos.

Outra funcionalidade interessante que ameniza muitos erros é os famosos do prepared statements. Veja o exemplo abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<?php 
try{
 
    //instancia o objeto PDO, conectando com o banco mysql
    $conn = new PDO('mysql:host=localhost;port=3306;dbname=teste', 'root', '');
 
    //configurando para utilizar exceções
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
	//prepara a consulta
	$result = $conn->prepare("INSERT INTO usuarios (login,senha,nome) VALUES (?, ?, ?)") ;
 
	//insere os valores nas ?
    $valores = array('rodrigo', '123456', 'rodrigo');
 
	//executa o comando SQL
    $result->execute($valores);
 
 
    //fecha a conexão
    $conn = null;
}catch (PDOException $i){
        //se houver exceção, exibe
        print "Erro: <code>" . $i->getMessage() . "</code>";
}
?><?php 
try{
 
    //instancia o objeto PDO, conectando com o banco mysql
    $conn = new PDO('mysql:host=localhost;port=3306;dbname=teste', 'root', '');
 
    //configurando para utilizar exceções
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
	//prepara a consulta
	$result = $conn->prepare("INSERT INTO usuarios (login,senha,nome) VALUES (?, ?, ?)") ;
 
	//insere os valores nas ?
    $valores = array('rodrigo', '123456', 'rodrigo');
 
	//executa o comando SQL
    $result->execute($valores);
 
 
    //fecha a conexão
    $conn = null;
}catch (PDOException $i){
        //se houver exceção, exibe
        print "Erro: <code>" . $i->getMessage() . "</code>";
}
?>

Com o uso dos prepared statements não precisamos ficar nos preocupando em concatenar várias variaveis, ou nos preocuparmos com escape de aspas e tudo mais, basta colocar os valores no array que será passado por parâmetro para o método execute.

Espero que tenham gostado. Para mais infomações consulte a documentação da classe PDO

A idéia da realização do UruguaianaTECH surgiu a partir da necessidade de eventos na área de tecnologia da informação em nossa região, e principalmente para difundir a utilização do Software Livre em todos os setores de nossa comunidade.

O constante crescimento da utilização do software livre nas organizações nos últimos anos, demonstram que o reconhecimento dos benefícios é algo concreto, nosso país é considerado um dos maiores utilizadores desta tecnologia, onde também existem diversos colaboradores e mantenedores de aplicativos Livres.

Vemos na fronteira oeste, um mercado a ser explorado pois muitas organizações locais não fazem o uso de um Software Livre pelo fato de desconhecerem suas vantagens e benefícios.

Cabe a nós profissionais e estudantes da área de TI mudar este cenário, pois a evolução esta acontecendo, é nossa obrigação contribuir para que ela aconteça também em nossa cidade.

As vezes pensamos que em nossa cidade não há um mercado para os profissinais de TI, isto faz com que muitos estudantes recém formados acabem saindo de nossa cidade em busca de oportunidades, com isso nossa comunidade acaba perdendo qualidade nos serviços prestados. Com esta iniciativa esperamos demosntrar a nossa comunidade que dentro dela mesmo é possível encontrar profissionais qualificados e preparados para os desafios da área de TI.

Gostaria muito de agradecer a participação dos Professores Cidão e Humberto Moura que trouxeram um brilho a mais em nosso evento, a área de TI do Senac Uruguaiana, aos colaboradores voluntários que nos ajudaram na organização e principalmente aos nossos apoiadores, pois sem eles esta edição do Uruguaiana Tech não seria possível.

Agora fica a saudade dos bons momentos compartilhados durante o evento, o conhecimento que foi recebido e retribuido, pois como mencionei no evento: “O conhecimento é universal, nós aprendemos com alguém e é nossa OBRIGAÇÃO ensinar alguém”.

Nós nos comprometemos em levar esta causa adiante e faremos o que for necessário para alavancar nossa área de TI em nossa cidade, o sol nasce para todos e juntos faremos com que esta mudança aconteça.

Com a missão de educar para o trabalho em atividades do comércio de bens, serviços e turismo, o SENAC Uruguaiana promove nos dias 26, 27 e 28 de novembro o 1° UruguaianaTech, evento que visa difundir a utilização do Software Livre nos diversos setores de nossa comunidade.

Sempre conectado às inovações do mercado e atento às novas tendências em tecnologia, o núcleo de TI do Senac Uruguaiana, ministrará palestras sobre os temas: Linux, Servidores, Segurança, Desenvolvimento de Aplicações Web e Móvel.

Esta edição contará com a presença de profissionais de destaque no mercado da Tecnologia da Informação, com ampla experiência na utilização de Software Livre em ambientes corporativos, educacionais e domésticos.

O evento será realizado no auditório do Colégio Marista Sant’Ana. As inscrições podem ser realizadas através do site ou na unidade do Senac, mediante a colaboração com um alimento não-perecível. Aos interessados na emissão do certificado, o investimento será de R$10,00.

Vejam abaixo a programação do evento. Destaque para o 1º e 2º dia onde os editores deste blog, Thiago Finardi e Rodrigo Aramburu, ministrarão palestras no evento.

Vamos lá pessoal, participem e ajudem no crescimento da área de TI em nossa cidade.

http://www.uruguaianatech.info

Vamos ver então um simples script que lê um determinado diretório e monta a tag HTML para a imagem:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$dir = "fotos";
$d = opendir($dir);
$i = 0;
 
$nome = readdir($d);
while( $nome != false ){
	if( !is_dir($nome) and ($nome != 'Thumbs.db') ){
		$arquivos[$i] = $nome;
                $i++;
	}
	$nome = readdir($d);
}
sort($arquivos);
 
foreach($arquivos as $arq){
	echo '<img src="',$dir, " alt="" /> ';
}

Na linha 1 definimos o diretório que será lido e armazenamos em uma variável para facilitar a manutenção do código, na linha 2 abrimos um manipulador de diretório com a função opendir() que nos retorna um ponteiro para ser utilizado em funções posteriores.

Bom agora podemos percorrer o diretório, mas antes vamos iniciar um contador (linha 3) para podermos armazenar em um array os nomes dos arquivos para poder entre outras coisas ordená-los.

Na linha 5 começamos a ler os arquivos e fazemos isso utilizando a função readdir() que retorna o nome do próximo arquivo do diretório aberto com a função opendir. Na linha 6 entramos em um laço que executa enquanto o nome do arquivo retornado pela função readdir() não for falso, ou seja não tenha listado todos os arquivos do diretório.

Dentro do laço (linha 7) fazemos um teste, se o nome retornado não for um diretório ( com a função is_dir()) e se o nome for diferente de “Thumbs.db”, aqueles arquivos chatos e miniaturas do windows que as vezes upamos sem querer

Na linha 8 armazenamos o nome do arquivo no array e na linha 9 incrementamos nosso contador. fora do if lemos o próximo arquivo do diretório para o teste do while.

Na linha 13 utilizamos a função sort() para ordenar nosso array onde estão armazenados os nomes das imagens. Isto é muito útil principalmente se os nomes dos arquivos sejam seqüênciais e correspondem também a uma miniatura em outro diretório como é o mais indicado caso queiram utilizar esse script para criar uma galeria com o PrettyPhoto.

Agora basta juntar os nomes do arquivos do array com as tags para exibir as fotos como é feito na linha 16, utilizando um foreach para percorrer array.

Este script facilita bastante a vida principalmente se s galerias criadas forem grandes ou precisar adicionar fotos frequentemente, espero que tenham gostado quem quiser baixar o exemplo clique aqui.

O Youtube está recomendando que seus usuario troquem de navegador para o Internet Explore 8(ultima versão) Firefox 3.5 ou Google Chrome.

Mais um grande passo para a campanha Internet Explorer 6.0, nunca mais!.

Neste post, estarei fazendo um resumo de alguns itens importantes que presenciei no evento.

Primeiro Dia – 24/06

Como era de se esperar o evento estava contanto com mais de 8.000 participantes, foi aquela correria inicial de todos os anos, todo mundo correndo para poder pegar seu crachá e olhar as palestras iniciais. Devido ao tumulto, as palestras das 9:00 foram transferidas de horário.

(10:00) E-Commerce seguro com PagSeguro – Elcio Ferreira

Esta foi a primeira palestra que acompanhei, muito interessante por sinal. O palestrante mostrou as falhas de segurança mais comuns em comércio eletrônico, e como proteger seu e-commerce de invasores e fraudadores. Também apresentou como PagSeguro pode ajudar a tornar sua loja virtual segura.

Foi uma palestra muito boa para quem pensa em implementar uma loja virtual.

(11:00) Arquiteturas Enterprise Web 2.0 – Vinicius Senger

Nesta palestra foram apresentados vários assuntos, dentre eles:

• Web 2.0, Ajax, OSGi, SOA, segurança, alta performance, escalabilidade: Seu projeto esta na direção certa? A palestra apresentou uma visão atualizada de aplicativos enterprise e frameworks Java EE propondo 5 diferentes arquiteturas:
  1. Arquitetura Java EE 5 básica: JSF, Facelets, JPA, Richfaces
  2. Arquitetura Java EE avançada: JSF, Facelets, JPA, Richfaces, EJB e JMS
  3. Spring com JSF, JPA, Richfaces
  4. Seam
  5. Spring + Seam integrqdos

Em cada arquitetura foram pontuados quesitos técnicos e de negócio, incluindo em quais cenários reais aplicamos estas arquiteturas em casos reais nos últimos 2 anos. Os seguintes quesitos são considerados:

• Performance e escalabilidade
• Ní­vel técnico de equipe
• Ferramentas e produtividade
• Suporte de comunidade e comercial
• Ajax e RIA
• Segurança
• OSGi
• SOA
• Mashup, REST, CAPTCHA, conversation, e multitab support

Ao término foi apresentado o projeto www.supercrud.com onde você poderá gerar via Web seus próprios aplicativos CRUD (create, read, update, delete) para bancos de dados, usando as diferentes arquiteturas propostas.

(12:00) Rede Mesh – Felipe Santos, Rodrigo Troian, Vinicius John

Esta foi uma palestra introdutória sobre tecnologias de rede wireless, em especial a rede em malha mesh, seus impactos sociais, políticos e tecnológicos. Uma breve visão sobre os projetos existentes, observando seus objetivos e modos de funcionamento. Introdução aos hardwares de rede, firmwares e protocolos para redes mesh.

(13:00) Forense computacional em Linux for dummies – uma rápida visão introdutória – João Eriberto Mota Filho

Pra mim, esta foi a melhor palestra do 1º dia do evento, para mim as palestras do Eriberto são sempre muito boas, e esta não poderia ser diferente. Na palestra foi mostrado como se processa uma forense computacional. Foram abordados aspectos relevantes como o que fazer e o que não fazer logo após uma intrusão, a coleta de informações da memória, dos discos e dos logs. Também foi demonstrado, ao vivo, como recuperar logs e dados apagados. Também houve uma abordagem sobre a utilização de live CDs ou pendrive em todo o processo.

(14:00) Configurações práticas IPv6 no Linux e FreeBSD – Firewall, Túneis, DNS e outros serviços – Ailton Soares da Rocha

O IPv6 está gradativamente sendo implantado na Internet e nas redes, por isso é importante conhecer seu funcionamento e saber como fazer a configuração de equipamentos de rede e computadores. Nesta apresentação foi feita uma breve introdução ao protocolo IPv6 e foram abordados importantes aspectos práticos de configuração em máquinas Linux e FreeBSD, desde as configurações mais básicas, até aspectos mais complexos, como a criação de túneis, a configuração de firewalls iptables e DNS com Bind. No meu ponto de vista se você ainda não leu nada sobre o assunto esta mais do que na hora, pois o prazo para a troca no Brasil é em 2010.

(15:00) Fui almoçar, informação alimenta o cérebro mas não a barriga =P

(16:00) Abertura do FISL

Eu aproveitei este horário para conseguir algumas camisetas e brindes nos estandes das empresas XD

(16:00) Entrevista coletiva com jornalistas e blogueiros cadastrados (NÓS) – Peter Sunde

Entrevista Coletiva do Hacker do The Pirate Bay Peter Sunde com Jornalistas e Blogueiros Cadastrados. Este vai ganhar um post só pra ele.

Bom pessoal, este foi o primeiro dia do evento e quis colocar um resumo sobre as palestras que acompanhei. Vou separar cada dia em um post e mesmo assim vai ficar impossível contar tudo de interessante que pude ver e acompanhar nesta 10ª edição do evento.

aguardem os próximos post’s.

Bom para começar baixe o PrettyPhoto 2.4.3 e descomacte em uma pasta. Ele é divido em 3 pastas css, js e images, para usalo você vai precisar das 3.

Crie um novo documento HTML e inclua na tag header a bilbioteca JQuery, o plugin que esta na pasta js, a folha de estilo que esta na pasta css:

1
2
3

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" />

Agora para criarmos a nossa galeria vamos precisar das fotos e das suas miniaturas, para nosso exemplo vamos armazena-la em uma pasta chamada img.

Para cada imagem vamos criar um link para imagem grande que quando clicado vai abri-la em nossoo lightbox.

1
2
3

<a href="img/foto1-g.jpg" rel="prettyPhoto">
   <img src="img/foto1-p.jpg" alt="Foto do Espaço 1" />
</a>

O atributo rel=”prettyPhoto” é utilizado para selecionar os links que devem fazer parte de nossa galeria e para isso deve ser aplicado o plugin PrettyPhoto que será responsavel por abrir a imagem que esta no atributo href de nosso link no lightbox.

Para aplicar o plugin nos links acrescentamos na tag header o seguinte código:

1
2
3
4
5

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
	    $("a[rel^='prettyPhoto']").prettyPhoto();
	});
</script>

Exemplo de galeria feita com PrettyPhoto.

Bem simples não?

Existem muitos Plugins para JQuery com as mais variadas funções, então não tente reinventar a roda todo dia, apenas procure uma que sirva no seu caminhão.

Aquele Abraço.

A maior parte das pessoas quando vai modificar/corrigir um texto na web apenas apaga o texto errado e no lugar insere outro. Mas isso, no modelo de publicação da internet, que utiliza links para referenciar partes do texto, pode causar alguns problemas.

Vejamos eu publiquei uma notícia a uma semana atrás, um outro site linkou esta notícia fazendo referência a uma dado fornecido por ela. Uma semana se passou e eu descobri que o dado que tinha colocado na notícia estava errado, justamente o dado que o outro site fazia referência. Eu vou lá e simplesmente apago do código HTML o dado que estava errado e substituo pelo certo. Como fica o outro site que gentilmente fez um link para a notícia? Agora o que ele referenciou não existe mais, seus usuários vão clicar no link e não vão encontrar aquela informação.

Na Web não podemos simplesmente apagar conteúdo do site pois vários outros sites podem estar referenciando esta informação. O modo mais correto é marcar o texto como não sendo mais válido( com a tag <del>) e informar que um novo conteúdo foi inserido (com a tag <ins>).

 O Inter Grêmio é um grande time

No exemplo acima o texto estava errado e foi marcada a palavra/informação que não valia mais(com a tag del) e foi inserida uma nova para deixar a informação corretar, essa nova palavra/informação foi marcada com a tag ins.

Na formatação CSS padrão do HTML o texto marcado com a tag del fica com um risco em cima do texto( CSS: text-decoration: line-through;) e o texto marcado com a tag ins fica sublinhado, mas esta formatação pode ser mudada com CSS.

Isso é tudo pessoal!

Para começar vamos esclarecer que AJAX não é uma tecnologia e sim uma metodologia que utiliza tecnologias não tão novas assim como XML e Javascript para fazer requisições assíncronas ao servidor e com as informações retornadas modificar a página já carregada utilizando DOM para modificar-la sem recarregar todo conteúdo novamente. E com isso economizar no tráfego de internet e melhorar a experiência do usuário.

Primeiramente vejamos como uma página simples é carregada.

1 . O usuário digita um URL no campo endereço aperta enter e o navegador envia uma requisição normalmente do tipo GET para o servidor que retorna para o navegador o conteúdo que é exibido.

2. O usuário clica em um link da página então o navegador faz outra requisição ao servidor que envia todo o conteúdo da nova página novamente.

Se pensarmos um pouco, muito conteúdo é repetido é baixado quando navegamos entre as página de um mesmo site, como topo, menus, rodapés etc.

Com base nisso, porque não carregar somente o conteúdo que mudou a cada requisição, sem mexer no resto do conteúdo da página? Isto é a base do AJAX.

Quando começou a ser utilizado a o retorno do servidor era feito em XML (por isso o X da sigla) mas com o passar do tempo passou a se chamar AJAX toda requisição assíncrona ao servidor Web.

Bom para entendermos como fazer uma requisição assíncrona precisamos conhecer 2 tipos de requisição que o protocolo HTTP aceita:

GET: É o método mais comum: solicita algum recurso como um arquivo ou um script (qualquer dado que estiver identificado pelo URI) por meio do protocolo HTTP. O método GET é reconhecido por todos os servidores.

POST: Envia dados para serem processados (por exemplo, dados de um formulário HTML) para o recurso especificado. Os dados são incluídos no corpo do comando.

Bom vamos agora ver um pequeno exemplo de como fazer requisições assíncronas e carregar o conteúdo dentro de um div utilizando a JQuery.

HTML Principal

<div id="carregando">Carregando</div>
 
<h1>Cabeçalho</h1>
 
<a href="conteudo1.php">Conteudo 1</a>
<a href="conteudo2.php">Conteudo 2</a>
<a href="conteudo3.php">Conteudo 3</a>
<a href="conteudo4.php">Conteudo 4</a>
 
<div id="conteudo"></div>

Como vimos não é nada diferente do que conhecemos, também temos os arquivos com o conteúdo que irá dentro do div #conteudo:

conteudo1.php

<h1> Conteudo 1</h1>
<p>Donec scelerisque aliquet nunc id mattis. Aliquam auctor bibendum massa at dapibus. Suspendisse ante metus, ornare vitae venenatis vitae, posuere sit amet risus. Nam lacus orci, placerat ut tincidunt nec, tincidunt mollis nisl? Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse id arcu sed urna tincidunt semper. Mauris eu mauris nec est euismod dapibus. Suspendisse imperdiet est id purus placerat consectetur. Curabitur interdum ipsum vitae lacus tincidunt nec elementum nunc consectetur. Etiam dapibus felis non nisl tempor lobortis. Mauris commodo varius ligula eget posuere. Suspendisse ligula arcu, tincidunt dictum varius in, bibendum in purus. Maecenas faucibus, lorem vel fermentum vehicula, dui magna dignissim mauris, viverra egestas magna eros eu lorem. Donec facilisis felis suscipit dui blandit eget commodo erat feugiat. Proin eget diam risus.</p>

conteudo2.php

<h2> Conteudo 2</h2>
<p>Nullam non metus risus, in congue velit. Mauris vitae est massa! Nunc suscipit iaculis varius. Suspendisse eros neque, consectetur ut tincidunt sed, placerat eget ipsum? Phasellus eget mauris libero. Donec elit nunc, varius nec auctor vitae, dapibus non turpis. Donec cursus malesuada quam, id accumsan ante imperdiet ac. Donec purus lorem, fringilla fermentum tempus a, porta quis velit. Morbi quis arcu magna, in ultrices neque? Nullam molestie ultricies nibh placerat varius?</p>

conteudo3.php

<h3> Conteudo 3</h3>
<p>Vestibulum eget tellus eros. Mauris et ante id diam malesuada dignissim. Nam vel sem pulvinar velit tincidunt sodales id et ipsum. Cras magna turpis; egestas non dignissim id; malesuada vel velit! Vivamus libero lorem; congue ut auctor sed; rhoncus mattis magna. Sed eget purus ac ante feugiat laoreet! Aliquam erat volutpat. Duis eu nisi ac metus interdum lobortis eget vitae enim. Nunc adipiscing accumsan magna, at rutrum tortor condimentum ac. Sed lobortis adipiscing erat, faucibus blandit odio mollis in. Integer ipsum justo, varius ac malesuada in, laoreet vitae lacus. Donec varius mauris nec dui tristique aliquet. Donec eros arcu, tristique eget fringilla sit amet, feugiat vel leo. Ut elit justo, elementum ut convallis in, consequat in eros. Proin a leo sed dolor aliquam ultrices.</p>

conteudo4.php

<h4> Conteudo 4</h4>
<p>Cras porta, tellus eu elementum pulvinar, tellus nulla tempus neque, ac posuere sem sem varius quam? Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse lobortis feugiat ante interdum facilisis. Proin ante velit, congue vel lobortis a, commodo id risus. Ut sapien turpis, convallis condimentum suscipit in, imperdiet ut ante. Nullam molestie cursus leo, quis luctus risus bibendum quis? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse lacus nulla; tincidunt consequat rhoncus sed, suscipit sit amet tellus. Fusce faucibus, justo quis mollis volutpat, ligula est sodales dui; eu dictum ante urna vitae ipsum. Vivamus elementum leo et dui viverra blandit. Nunc ac blandit tellus. Sed dui nibh, porttitor nec sagittis quis, commodo tincidunt libero.</p>

Bom com os arquivos HTML prontos vamos ao que interessa, o código Javascript que é responsável pelas requisições assíncronas pelo método GET:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  $(document).ready(function(){
      $("a").each(function() {
           var href = $(this).attr('href');
           $(this).attr('href','javascript:void(0)');
           $(this).click(function(){
                $('#conteudo').html("");
       	    	$("#carregando").show('slow');
                 $.get( href , function(data){
                        $('#conteudo').html(data);
                        $("#carregando").hide('slow');
                 });
                return null;
        });
     });
  });

Na linha 2 utilizamos o método each que para cada elemento encontrado pelo seletor, no caso “a”(links), ele vai executar a função definida que captura a URL do atributo href do link e armazena em uma variável (linha 3), seta o atributo href para não apontar mais para nenhum link(linha 4), adiciona o evento click (linha 5), dentro do evento click limpamos o div #conteudo (linha 6), mostramos a mensagem de carregando (linha 7) e utilizamos o método $.get(url,function(data){}) que realmente faz a mágica( linha 8).

O método $.get(url,function(data){}) faz a requisição assíncrona com o servidor e passa para a função passada por parâmetro o retorno do servidor na variável data.

Após receber o retorno do servidor jogamos este retorno dentro da div #conteudo(linha 9) e escondemos a mensagem de carregando (linha 10).

Para ver o exemplo funcionando clique aqui

Veremos agora como criar um formulário utilizando AJAX pelo método POST:

HTML

<div id="carregando">Carregando</div>
<div id="mensagem"></div>
 
<form action="processapost.php" method="post">
 
    <label for="nome">Nome:</label>
    <input type="text" name="nome" />
 
    <label for="email">E-mail</label>
    <input type="text" name="email" />
 
    <input type="submit" value="Enviar" />
</form>

Script que processa a requisição POST (processapost.php)

1
2
3
4

        Dados enviados:<br /><br />
       <?php echo "Nome: ".$_POST['nome']; ?>
       <br />
       <?php echo "E-mail: ".$_POST['email']; ?>

E o código Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  $(document).ready(function(){
        var action = $('form').attr('action');
        $('form').attr('action','javascript:void(0);');
        $('form').submit(function(){
       	    	$("#carregando").show('slow');
 
 
                 $.post(action ,jQuery("form").serialize(),  function(data){
                        $('#mensagem').html(data);
                        $('#mensagem').show();
                        $("#carregando").hide('slow');
                 });
                return null;
        });
 
	});

Na linha 2 capturamos a URL que irá processar e retornar os valores do nosso formulário e depois (linha 3) configuramos para que o formulário não envie a requisição como faria normalmente, e configuramos o evento submit (linha 4) que é ativado quando o formulário é enviado.

Quando isto acontecer ele irá mostrar a mensagem de carregando (linha 5) e utilizamos o método $.post(url ,dados, function(data)){} que faz uma requisição via POST para url, enviando um array dados e após executa a função recebendo por parâmetro data com o retorno do servidor. Na linha 9 inserimos o retorno da requisição na div #mensagem, deixamos visível esta div e por fim escondemos a mensagem de carregando(linha 11).

Os dados enviados são passados na forma de array no fomato:

 { var1: "valor1", var2: "valor2" }

ou na forma de string:

 var1=valor&var2=valor

Como vimos no exemplo utilizamos jQuery(“form”).serialize(), que converte um conjunto de inputs em uma string no segundo formato.

Para ver o exemplo funcionando clique aqui

Este foi o tão aguardado artigo sobre AJAX com JQuery, os exemplos são bastante simples mas com um pouco de criatividade dá para fazer coisas bem legais.

Até mais “Vida longa e prospera!”