Category Archives: Javascript

Login dinâmico com JQuery/PHP/MySQL

Olá pessoal, tudo bom? A pedido de algumas pessoas, hoje vou falar como criar um sistema de login bem simples, porém dinâmico, ou seja, vamos fazer a validação sem a necessidade de recarregar a página, utilizando AJAX.

Confira o resultado final aqui (para acessar, utilize as informações que foram inseridas de exemplo)

1. Banco de dados

Inicialmente iremos criar nosso banco de dados:

CREATE TABLE `usuario` (
  `usuario_id` INTEGER  NOT NULL AUTO_INCREMENT,
  `login` VARCHAR(28)  NOT NULL,
  `senha` varchar(80)  NOT NULL,
  `nome` varchar(60)  NOT NULL,
  PRIMARY KEY (`usuario_id`)
)
ENGINE = MyISAM;

Bem simples, apenas contém uma chave primária (ID), o login, a senha e o nome do usuário. Vamos agora inserir alguns registros de exemplo:

INSERT INTO usuario VALUES (1, 'admin', 'admin', 'Administrador');
INSERT INTO usuario VALUES (2, 'rafael', 'couto', 'Rafael Couto Alves');
INSERT INTO usuario VALUES (3, 'foo', 'bar', 'Fulano');

2. Formulário de login (index.html)

Vamos criar a aparência da nossa página de login:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Entrar</title>
    </head>
    <body>
        <form id="frmLogin" action="ajax/logar.php" method="post">
            <fieldset>
                <legend>Entrar</legend>
 
                <div class="loader" style="display: none;"><img src="image/loader.gif" alt="Carregando" /></div>
                <div class="mensagem-erro"></div>
 
                <p>
                    <label for="login">Usuário</label> <br />
                    <input type="text" id="login" name="login" />
                </p>
 
                <p>
                    <label for="senha">Senha</label> <br />
                    <input type="password" id="senha" name="senha" />
                </p>
 
                <input type="submit" value="Entrar" />
            </fieldset>
        </form>
    </body>
</html>

Nada de mais, é apenas um formulário HTML com dois campos, login e senha, e um botão de submit. No cabeçalho (head) de nossa página, vamos incluir uma biblioteca e um plugin javascript:

1
2

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.form.js'></script>
  • Linha 1: incluindo a biblioteca indispensável: jQuery.
  • Linha 2: incluindo um plugin para jQuery, o jQuery Form. Ele facilita a requisição AJAX, pois não precisamos pegar e passar cada campo (como é feito nesse artigo, por exemplo), o plugin já faz este trabalho pela gente.

3. jQuery (index.html)

Nessa parte, vamos recuperar as informações do formulário e enviar para a página PHP. Adicione o seguinte código no cabeçalho de nossa index.html:

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

// Quando carregado a página
$(function($) {
 
    // Quando enviado o formulário
    $('#frmLogin').submit(function() {
 
        // Limpando mensagem de erro
        $('div.mensagem-erro').html('');
 
        // Mostrando loader
        $('div.loader').show();
 
        // Enviando informações do formulário via AJAX
        $(this).ajaxSubmit(function(resposta) {
 
            // Se não retornado nenhum erro
            if (!resposta)
                // Redirecionando para o painel
                window.location.href = 'painel.php';
            else
            {
                // Escondendo loader
                $('div.loader').hide();
 
                // Exibimos a mensagem de erro
                $('div.mensagem-erro').html(resposta);
            }
 
        });
 
        // Retornando false para que o formulário não envie as informações da forma convencional
        return false;
 
    });
});

Vamos analisar o código:

  • Linha 5: Aplicamos o evento submit no formulário (#frmLogin), ou seja, assim que o usuário clicar em entrar este método será chamado.
  • Linha 14: Através do método ajaxSubmit() do nosso plugin, as informações do formulário são enviadas para seu action (logar.php), através do método definido no formulário, no caso, POST. Isso é o equivalente ao .post() nativo do jQuery, porém o plugin já captura e envia as informações para nós;
  • Linha 17: Verificamos se a resposta retornada pelo nosso logar.php é falsa, ou seja, 0;
  • Linha 19: Se a resposta for falsa, significa que o login deu certo, portanto redirecionamos o usuário para seu painel (painel.php);
  • Linha 26: Se o login não deu certo, colocamos a mensagem retornada pelo logar.php na div cujo a classe é mensagem-erro;
  • Linha 32: Precisamos retornar false para que o formulário não seja enviado, pois nós já enviamos as informações e recebemos a resposta via AJAX.

4. Conexão e configuração (config/conn.php)

Aqui vamos criar nosso arquivo para fazer a conexão com o banco de dados, nesse arquivo também vamos criar um método para carregar automaticamente a classe de login que veremos adiante.

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

<?php
// Informações para conexão
$host = 'localhost';
$usuario = 'root';
$senha = 'senha';
$banco = 'banco';
// Realizando conexão e selecionando o banco de dados
$conn = mysql_connect($host, $usuario, $senha) or die(mysql_error());
$db = mysql_select_db($banco, $conn) or die(mysql_error());
// Definindo o charset como utf8 para evitar problemas com acentuação
$charset = mysql_set_charset('utf8');
// Função para carregar a classe automaticamente, quando instanciado um objeto
function __autoload($class)
{
    require_once(dirname(__FILE__) . "/../class/{$class}.class.php");
}
?>

5. Logando (ajax/logar.php)

Este arquivo será responsável por fazer criar o login do usuário. Para facilitar e diminuir muitas linhas de código eu criei uma classe simples (a classe deste artigo foi melhorada, porém os métodos são os mesmos) para fazer a ações básicas de um login. Portanto, nosso código fica da seguinte maneira:

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

<?php
// Incluindo arquivo de conexão/configuração
require_once('../config/conn.php');
 
// Instanciando novo objeto da classe Login
$objLogin = new Login();
 
// Recuperando informações enviadas
$login = $_POST['login'];
$senha = $_POST['senha'];
 
// Se conseguir encontrar o usuário e a senha estiver correta
if ($objLogin->logar($login, $senha))
    // Retornando falso, ou seja, esta tudo certo
    echo false;
else
    // Retornando mensagem de erro
    echo 'Login ou senha inválidos';
?>

Repare que não foi necessário incluir o arquivo da classe Login, pois no arquivo de configuração (config/conn.php) foi definida a função __autoload(), ou seja, assim que o objeto $objLogin é criado, o __autoload() se encarrega de incluir o arquivo da classe, porém o arquivo da classe deve seguir o padrão: Classe.class.php.

Vamos a alguns detalhes:

  • Linha 6: Criamos um objeto da nossa classe Login. Por padrão a tabela é usuario, a chave primária é usuario_id, o campo login é login e o campo senha é senha. Porém, poderíamos definir outras informações passando os parâmetros do construtor, exemplo: 
    $objLogin = new Login('tb_usuarios', 'codigo', 'campo_login', 'campo_senha');
  • Linha 13: O método logar() aceita um terceiro parâmetro que é para onde o usuário será redirecionado se o login e senha estiverem corretos, no caso, isso não nos interessa, pois esta é uma página que será recebida pela requisição AJAX, portanto o método irá apenas retornar true, se as informações estiverem corretas, ou, caso contrário, false.

6. Painel do usuário (painel.php)

Esta é uma das página da qual apenas um usuário que esteja logado terá acesso, para isso, precisamos apenas verificar se o usuário está logado:

<?php
// Incluindo arquivo de conexão/configuração
require_once('config/conn.php');
 
// Instanciando novo objeto da classe Login
$objLogin = new Login();
 
// Verificando se o usuário está logado, caso contrário será redirecionado para a página de login
if (!$objLogin->verificar('index.html'))
    // Finalizado o script, apenas para garantir que o usuário não irá ver o conteúdo da página
    exit;
?>

Depois que reconhecido que o usuário está logado. podemos recuperar o ID e o login do usuário que estão na sessão, através do objeto de login, por exemplo:

<?php
echo "ID: {$objLogin->getID()} <br />";
echo "Login: {$objLogin->getLogin()}";
?>

Tendo o ID, podemos recuperar todas as suas informações, fazendo um simples SELECT:

1
2
3

// Selecionando informações do usuário
$query = mysql_query("SELECT * FROM usuario WHERE usuario_id = {$objLogin->getID()}");
$usuario = mysql_fetch_object($query);

Sendo assim, podemos mostrar as informações que não estão na sessão:

echo "Bem vindo {$usuario->nome}";

7. Logout (sair.php)

Para finalizar a sessão é muito simples:

<?php
// Incluindo arquivo de conexão/configuração
require_once('config/conn.php');
 
// Instanciando novo objeto da classe Login
$objLogin = new Login();
 
// Finaliza a sessão e redireciona o usuário para a página de login
$objLogin->logout('index.html');
?>

8. Finalizando

Bom pessoal, por hoje é isso, tentei detalhar o máximo possível, mas não houve tempo para explicar sobre a estrutura da classe, nem alguns detalhes sobre a programação orientada a objetos, isto fica para uma próxima, ok?

Download dos arquivos

Espero que vocês tenham entendido e que a idéia seja útil para vocês.
Qualquer dúvida, sugestão ou critica construtiva, deixe um comentário ou envie um email.

Até a próxima, abraços.

Mostrar e Ocultar informações com JQuery + Cookie

Fala pessoal, tudo bom? Nesse artigo pretendo mostrar como é simples manipular os elementos da página com JQuery. Vamos ver como mostrar e ocultar informações, deixando armazenada a preferência do usuário, utilizando cookies.

Veja o exemplo em funcionamento

1. Estrutura (index.html)

Primeiramente vamos montar a estrutura da página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Mostrar/Ocultar informações com JQuery + Cookie</title>
 
</head>
 
<body>
 
<h2>Mostrar/Ocultar informações com JQuery + Cookie</h2>
 
<div class="box" id="ingles">
    <img src="image/show_hide.png" align="Mostrar/Ocultar" />
    <h1>Inglês</h1>
    <p class="conteudo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
 
<div class="box" id="alemao">
    <img src="image/show_hide.png" align="Mostrar/Ocultar" />
    <h1>Alemão</h1>
    <p class="conteudo">Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum</p>
</div>
 
<div class="box" id="espanhol">
    <img src="image/show_hide.png" align="Mostrar/Ocultar" />
    <h1>Espanhol</h1>
    <p class="conteudo">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
</div>
 
<div class="box" id="portugues">
    <img src="image/show_hide.png" align="Mostrar/Ocultar" />
    <h1>Português</h1>
    <p class="conteudo">O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
</div>
 
</body>
</html>

Nesse exemplo usei conteúdos estáticos, porém você poderia selecioná-los de um banco de dados, desde que respeite a hierarquia dos elementos.

2. JQuery

Antes de continuar, baixe a ultima versão biblioteca do jQuery. Também será necessário baixar o plugin para manipulação de cookies.

Agora vamos incluir os scripts em nossa estrutura, entre as tags <head></head> de preferência:

<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.cookie.js"></script>

Pronto, agora sim podemos criar nosso script. Primeiramente iremos criar o evento para ocultar e mostrar as caixas:

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

<script type="text/javascript">
// Quando carregar a página
$(function($) {
 
    // Quando clicado em uma imagem das caixas
    $('div.box img').click(function() {
        // Recuperando ID da DIV da qual a imagem se encontra
        var id = $(this).parent('div').attr('id');
        // Armazenando elemento que será oculto
        var conteudo = $('#'+id+' p.conteudo');
        // Escondendo ou exibindo o conteúdo do box
        conteudo.slideToggle(function() {
            // Caso o conteúdo do box esteja visível
            if (conteudo.css('display') == 'block')
                // Cria um cookie que recebe o ID do elemento como nome e o valor 1
                $.cookie(id, 1, {expires: 365});
            // Caso esteja oculto
            else
                 // Cria um cookie que recebe o ID do elemento como nome e o valor 0
                $.cookie(id, 0, {expires: 365});
        });
    });
});
</script>

Vamos a análise:

  • Linha 6: quando clicado em uma imagem (img) que está contida em uma div com classe igual a box (div.box)
  • Linha 8: armazenamos em uma variável o ID da DIV onde se encontra a imagem, para isso utilizamos o parent() que seleciona o elemento pai e depois utilizamos attr() que recupera o valor da propriedade ID.
  • Linha 10: selecionamos as informações que estão no parágrafo com classe igual a conteudo (p.conteudo) que está dentro da box com ID recuperado anteriormente.
  • Linha 12: escondemos ou exibimos (dependendo do estado do elemento) o conteúdo do box, através do método slideToggle(), quando terminado a animação é chamada uma função.
  • Linha 14: verificamos se o box está visível, para isso utilizamos o método css() para recuperar o valor da propriedade display.
  • Linha 16: se estiver visível, setamos um cookie, damos a ele o nome do ID da box e colocamos 1 como valor. O cookie irá expirar apenas em 365 dias.
  • Linha 18, 19: caso o box esteja oculto, também setamos um cookie, porém com valor 0.

Bom, os cookie já estão sendo setados, porém quando o usuário atualizar a página, não há nenhum tipo de verificação para ocultar ou mostrar os elementos de acordo com a preferência do usuário, portanto vamos criar essa função, logo após a função anterior:

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

// Procurando e passando por cada box da página
$("body").find("div.box").each(function(){
    // Recuperando ID
    var id = $(this).attr('id');
    // Armazenando elemento que será oculto
    var conteudo = $('#'+id+' p.conteudo');
    // Caso o cookie não tenha sido criado
    if ($.cookie(id) == null)
        // Ocultamos
        conteudo.css("display", "none");
    // Se um cookie foi criado e está com 1, ou seja, visível
    else if ($.cookie(id) == 1)
        // Exibimos
        conteudo.css("display", "block");
    // Se um cookie foi criado e está com 0, ou seja, oculto
    else if ($.cookie(id) == 0)
        // Ocultamos
        conteudo.css("display", "none");
});

Análise:

  • Linha 2: percorremos a página (body), através do each() buscando cada div com classe igual a box (div.box).
  • Linha 4, 6: recuperamos e armazenamos o ID e o conteúdo do box.
  • Linha 8, 10: se o cookie com o nome do ID do box estiver nulo (null), ou seja, ainda não foi setado, escondemos o elemento.
  • Linha 12, 14: se o cookie com o nome do ID do box estiver com valor 1, ou seja, o usuário escolheu que ele ficasse visível, exibimos ele.
  • Linha 16, 18: se o cookie com o nome do ID do box estiver com valor 0, ou seja, o usuário escolheu que ele ficasse oculto, ocultamos ele.

3. Conclusão

Podemos perceber que com JQuery é muito simples manipular qualquer elemento de nossa página e com o plugin de cookies também fica simples a manipulação de cookies.

Download dos arquivos

Por hoje é isso pessoal, espero que vocês tenham entendido.
Abraços.

Envio de formulário sem refresh com JQuery/PHP

Olá pessoal, tudo bom? Hoje, nesse artigo que foi sugerido, irei abordar mais uma opção de fazer uma requisição AJAX, agora com JQuery.

Como exemplo vou utilizar uma página onde o usuário pode deixar sua mensagem sem precisar dar refresh na página. Os arquivos estão disponíveis para download no final do arquivo. Vamos lá.

Veja o código em funcionamento

1. Banco de dados

Primeiramente, como sempre, vamos criar nossa base de dados e inserir alguns registros de exemplo:

CREATE TABLE IF NOT EXISTS `mensagens` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nome` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `mensagem` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
 
INSERT INTO `mensagens` (`id`, `nome`, `email`, `mensagem`) VALUES
(1, 'faael', 'faelcalves@hotmail.com', 'Hello world!'),
(2, 'Fulano', 'fulano@dominio.com', 'Olá Mundo!');

2. Conexão (conn.php)

Vamos criar também o arquivo responsável pela conexão com nosso banco de dados:

<?php
// Informações para conexão
$host = "localhost";
$usuario = "root";
$senha = "senha";
$banco = "banco";
// Realizando conexão e selecioando banco de dados
$conn = mysql_connect($host, $usuario, $senha) or die(mysql_error());
$db = mysql_select_db($banco, $conn) or die(mysql_error());
// Alterando o charset para utf8, para evitar problemas de acentuação
mysql_set_charset('utf8');
?>

Edite as informações de acordo com as configurações de seu banco de dados

3. A página (index.php)

Criaremos a base da nossa página, com algumas divs e o formulário:

<?php require_once("conn.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Envio de formulário sem refresh com JQuery/PHP</title>
</head>
 
<body>
<h1>Escrever Mensagem</h1>
 
<div id="status" style="display: none;"></div>
 
<div id="escrever">
	<form id="formulario" action="javascript:func()" method="post">
	    <strong>Nome:</strong> <br />
        <input name="nome" type="text" id="nome" size="35" /> <br /><br />
 
	    <strong>Email:</strong> <br />
        <input name="email" type="text" id="email" size="35" /> <br /><br />
 
	    <strong>Mensagem:</strong>  <br />
	    <input name="mensagem" type="text" id="mensagem" size="145" /><br /><br />
 
        <input type="submit" value="Enviar" />
 
    </form>
</div>
 
<h1>Mensagens</h1>
 
<div id="mensagens"></div>
 
</body>
</html>

Bom, agora vamos começar a trabalhar. Primeiramente, iremos baixar a biblioteca do jquery, clique aqui para baixar. Depois de baixado, vamos incluí-lo na nossa página, entre as tags <head></head>:

<script type="text/javascript" language="javascript" src="jquery-1.3.2.js"></script>

Inserido o jquery, vamos colocar as mensagens do banco de dados na div mensagens:

<div id="mensagens">
	<?php
	// Buscamos e exibimos as mensagens já contidas no banco de dados
	$query = mysql_query("SELECT * FROM mensagens ORDER BY id DESC");
	while($mensagem = mysql_fetch_object($query)) {
		echo "<strong>" . $mensagem->nome . "</strong> disse: <em>" . $mensagem->mensagem . "</em><br />";
	}
	?>
</div>

Retornando no jquery, vamos agora criar a função que fará a requisição ajax, essa deverá estar entre as tags <head></head> também:

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

<script type="text/javascript" language="javascript">
$(function($) {
	// Quando o formulário for enviado, essa função é chamada
	$("#formulario").submit(function() {
		// Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação
		var nome = $("#nome").val();
		var email = $("#email").val();
		var mensagem = $("#mensagem").val();
		// Exibe mensagem de carregamento
		$("#status").html("<img src='loader.gif' alt='Enviando' />");
		// Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
		$.post('envia.php', {nome: nome, email: email, mensagem: mensagem }, function(resposta) {
				// Quando terminada a requisição
				// Exibe a div status
				$("#status").slideDown();
				// Se a resposta é um erro
				if (resposta != false) {
					// Exibe o erro na div
					$("#status").html(resposta);
				} 
				// Se resposta for false, ou seja, não ocorreu nenhum erro
				else {
					// Exibe mensagem de sucesso
					$("#status").html("Mensagem enviada com sucesso!");
					// Coloca a mensagem no div de mensagens
					$("#mensagens").prepend("<strong>"+ nome +"</strong> disse: <em>" + mensagem + "</em><br />");
					// Limpando todos os campos
					$("#nome").val("");
					$("#email").val("");
					$("#mensagem").val("");
				}
		});
	});
});
</script>

É nessa função que praticamente tudo acontece. Vou tentar detalhar mais ela:

Linha 4: Chamamos a função quando o formulário é enviado, ou seja, no evento submit.

Linha 6,7,8: Colocamos os valores de cada campo do formulário em uma variável correspondente, para que assim facilite a manipulação desses valores.

Linha 10: Colocamos na div status a imagem de “carregando”. Você pode criar seus próprios “loaders” no ajaxload.info.

Linha 12: É aqui que chamamos o arquivo envia.php que fará a validação dos dados e, se corretos, a adição dos mesmos no banco de dados. No primeiro parâmetro, passamos o arquivo, no caso o envia.php; No segundo passamos os valores que serão passados pelo método POST; No terceiro chamamos a função que tratará da resposta no final da requisição.

Linha 15: Exibimos a div status com o efeito slideDown(); Lembrando que o display da div deve ser none, senão não haverá efeito.

Linha 17: Verificamos se a resposta é diferente de false, ou seja, se houve algum erro.

Linha 19: Se houver erro, a mensagem de erro é colocado na div status.

Linha 22: Se não houver nenhum erro na validação.

Linha 25: Colocamos na div status uma mensagem de sucesso.

Linha 27: Colocamos na div mensagens a nova mensagem que foi enviada. A propriedade prepend adiciona um conteúdo antes do conteúdo original da div.

Linha 29,30,31: Limpamos os campos do formulário.

4. PHP (envia.php)

Só restou criar o envia.php, que fará toda a validação dos dados e irá adicioná-los no banco de dados, pra quem conhece php, creio que não terá nenhuma novidade:

<?php
// Incluimos o arquivo de conexão
require_once("conn.php");
// Recuperamos os valores dos campos através do método POST
$nome = $_POST["nome"];
$email = $_POST["email"];
$mensagem = $_POST["mensagem"];
// Verifica se o nome foi preenchido
if (empty($nome)) {
	echo "Escreva seu nome";
} 
// Verifica se o email é válido
elseif (!eregi("^[a-z0-9_\.\-]+@[a-z0-9_\.\-]*[a-z0-9_\-]+\.[a-z]{2,4}$", $email)) {
	echo "Digite um email válido";
} 
// Verifica se a mensagem foi digitada
elseif (empty($mensagem)) {
	echo "Escreva uma mensagem";
} 
// Verifica se a mensagem nao ultrapassa o limite de caracteres
elseif (strlen($mensagem) > 140) {
	echo "A mensagem deve ter no máximo 140 caracteres";
} 
// Se não houver nenhum erro
else {
	// Inserimos no banco de dados
	$query = mysql_query("INSERT INTO mensagens VALUES ('', '".$nome."', '".$email."', '".$mensagem."')");
	// Se inserido com sucesso
	if ($query) {
		echo false;
	} 
	// Se houver algum erro ao inserir
	else {
		echo "Não foi possível inserir a mensagem no momento.";
	}
}
?>

Aqui simplesmente verificamos se os dados são válidos e retornamos apenas uma resposta, ou seja, uma mensagem de erro ou um “false” (Esse valor define que tudo está correto);

5. Conclusão

Bom pessoal, é isso; tentei explicar da melhor forma possível de forma rápida. Espero que vocês tenham entendido, qualquer dúvida só entrar em contato, ok?

Download dos arquivos

Abraços.

Atualizar DIV de segundos em segundos com PHP/XAJAX

Olá pessoal. Farei esse artigo a pedido de uma sugestão e também por ser um assunto bem interessante e interativo. Veremos como atualizar um div de segundos em segundos, ou seja, a cada N segundos iremos colocar um valor em uma DIV. Bom, vamos lá.

Clique aqui para ver o projeto pronto

Irei utilizar como exemplo uma página que exibe frases sortidas (que estão no banco de dados) a cada 10 segundos. Para buscar os dados no banco a cada atualização utilizarei o framework XAJAX, por isso recomendo que você de uma olhada nesse artigo (caso não conheça o framework): Desenvolvimento interativo com o Framework XAJAX.

1. Banco de dados

Primeiramente vamos criar nossa tabela no banco de dados e inserir algumas frases:

CREATE TABLE IF NOT EXISTS `frases` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `frase` varchar(255) NOT NULL,
  `autor` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
 
INSERT INTO `frases` (`id`, `frase`, `autor`) VALUES
(1, '"Os homens erram, os grandes homens confessam que erraram."', 'Voltaire'),
(2, '"O que sabemos é uma gota, o que ignoramos é um oceano."', 'Isaac newton'),
(3, '"Penso, logo existo."', 'René Descartes'),
(4, '"Educai as crianças, para que não seja necessário punir os adultos."', 'Pitágoras'),
(5, '"Todo o homem é culpado do bem que não fez."', 'Voltaire'),
(6, '"A natureza fez o homem feliz e bom, mas a sociedade deprava-o e torna-o miserável."', 'Jean Jacques Rosseau');

Criamos uma tabela com três campos: a id da frase¹, a frase² e o autor da frase³.

2. PHP/XAJAX

Agora nós precisamos criar a função XAJAX responsável pela busca das frases no banco de dados:

<?php
// Conexão com o banco de dados
$conn = mysql_connect("localhost", "usuario", "senha");
$db = mysql_select_db("banco", $conn);
 
// Incluindo a biblioteca do xajax
require_once("xajax/xajax_core/xajax.inc.php");
 
// Instanciamos a classe
$xajax = new xajax();
 
// Registramos a função atualizar()
$xajax->registerFunction("atualizar");
 
// Criamos a função atualizar(), que será responsável por atualizar a div
function atualizar() {
        //Instância do objeto de resposta do Ajax
	$objResponse = new xajaxResponse();
 	// Buscamos uma frase
	$query = mysql_query("SELECT * FROM frases");
	// Verificamos o número de frases
	$numFrases = mysql_num_rows($query);
	// Sorteamos uma frase
	$sortido = rand(0, $numFrases - 1);
	// Frase sortida
	$frase = mysql_result($query, $sortido, 1);
	// Autor da frase sortida
	$autor = mysql_result($query, $sortido, 2);
	// Construimos a resposta
	$resposta = "<i>" . $frase . "</i><br />" . $autor;
	// Colocamos a frase e seu respectivo autor na div
	$objResponse->assign("frase", "innerHTML", $resposta);
	// Devolve a resposta para a página
	return $objResponse;
}
 
// Função para processar as requisições (indispensável)
$xajax->processRequest();
?>

Legal. Agora vamos construir a base de nossa página, que deve conter a div com id igual a “frase”, pois a resposta do XAJAX será devolvida nessa div:

<html>
<head>
<title>Frases sortidas: Atualizar DIV de segundos em segundos com PHP/XAJAX</title>
</head>
<body onload="xajax_atualizar()">
<h1>Frases sortidas</h1>
<div id="frase"></div>
</body>
</html>

Perceba que no código acima, na tag body, chamamos a função xajax_atualizar() no evento onload, ou seja, quando carregar a página, se isso não for feito, a página terá de esperar 10 segundos para chamar a função e a frase não apareceria no início.

O framework XAJAX requer a impressão do código javascript, sendo assim, chamamos a seguinte no cabeçalho (head):

<?php
// Método para que seje gerado as funções javascript do XAJAX
$xajax->printJavascript("xajax/");
?>

E finalmente iremos utilizar a função javascript que vai fazer o trabalho de atualizar a div para nós:

<script language="javascript" type="text/javascript">
// Chamamos a função criada com XAJAX a cada 10 segundos
setInterval("xajax_atualizar()", 10000);
</script>

No código javascript acima nós utilizamos a função setInterval() que chama alguma função em um determinado intervalo de tempo (em milésimos); No nosso caso, iremos chamar a função atualizar() criada com XAJAX, ou seja, xajax_atualizar() a cada 10000 milésimos, ou seja, 10 segundos.

Bom então nosso projeto fica da seguinte maneira:

<?php
// Conexão com o banco de dados
$conn = mysql_connect("localhost", "usuario", "senha");
$db = mysql_select_db("banco", $conn);
 
// Incluindo a biblioteca do xajax
require_once("xajax/xajax_core/xajax.inc.php");
 
// Instanciamos a classe
$xajax = new xajax();
 
// Registramos a função atualizar()
$xajax->registerFunction("atualizar");
 
// Criamos a função atualizar(), que será responsável por atualizar a div
function atualizar() {
        //Instância do objeto de resposta do Ajax
	$objResponse = new xajaxResponse();
 	// Buscamos uma frase
	$query = mysql_query("SELECT * FROM frases");
	// Verificamos o número de frases
	$numFrases = mysql_num_rows($query);
	// Sorteamos uma frase
	$sortido = rand(0, $numFrases - 1);
	// Frase sortida
	$frase = mysql_result($query, $sortido, 1);
	// Autor da frase sortida
	$autor = mysql_result($query, $sortido, 2);
	// Construimos a resposta
	$resposta = "<i>" . $frase . "</i><br />" . $autor;
	// Colocamos a frase e seu respectivo autor na div
	$objResponse->assign("frase", "innerHTML", $resposta);
	// Devolve a resposta para a página
	return $objResponse;
}
 
// Função para processar as requisições (indispensável)
$xajax->processRequest();
?>
<html>
<head>
<title>Frases sortidas: Atualizar DIV de segundos em segundos com PHP/XAJAX</title>
<?php
// Método para que seje gerado as funções javascript do XAJAX
$xajax->printJavascript("xajax/");
?>
<script language="javascript" type="text/javascript">
// Chamamos a função criada com XAJAX a cada 10 segundos
setInterval("xajax_atualizar()", 10000);
</script>
</head>
 
<body onload="xajax_atualizar()">
<h1>Frases sortidas</h1>
<div id="frase"></div>
</body>
</html>

Clique aqui para fazer download do projeto

Bom pessoal, espero que vocês tenham entendido e que esse artigo possa ser útil a você. Qualquer dúvida entre em contato através de email ou comentário.

Abraços.

Consulta interativa sem refresh com AJAX

Fala pessoal, como o artigo de AJAX vem sendo muito acessado, resolvi fazer outro. Nesse artigo nós iremos aprender como fazer consultas no banco de dados sem a necessidade de refresh na página. Irei utilizar como exemplo, um simples “sistema de noticias”, onde cadastraremos noticias no banco de dados e através de um formulário faremos a busca de uma determinada noticia e exibiremos seu conteudo. Vamos lá!

Veja o resultado final, clicando aqui. (Procure por “Lorem Ipsum“, pois é o exemplo que está cadastrado)

1. Banco de dados

Antes de mais nada vamos criar nossa tabela no banco de dados, com três campos: id, titulo e conteudo. E depois inserir dois registros para utilizarmos como exemplo.

--
-- Estrutura da tabela `noticias`
--
 
CREATE TABLE `noticias` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `titulo` VARCHAR(200) NOT NULL,
  `conteudo` text NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
 
--
-- Extraindo dados da tabela `noticias`
--
 
INSERT INTO `noticias` (`id`, `titulo`, `conteudo`) VALUES
(1, 'Lorem Ipsum', 'Praesent at sapien ultricies neque mattis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed nulla. Ut interdum erat ut orci. Nunc lorem pede, sagittis quis, tristique ac, blandit ac, arcu. Nam eget elit. Nullam in nisi. Nulla pede. Donec pulvinar gravida pede. Phasellus consequat nibh ut purus. Nulla et ipsum. Etiam tellus. Maecenas tincidunt tincidunt mi. Phasellus sed eros. Suspendisse orci. Nunc tincidunt mollis nisl. Sed quam.'),
(2, 'Lorem Ipsum 2', 'Morbi et arcu eget urna viverra varius. Integer sapien. Nam nulla ligula, tincidunt et, tempor ac, luctus eget, enim. Aenean ut nisi pretium metus elementum ultricies. Nam accumsan ligula quis magna. Sed non nisi. Quisque varius. Maecenas augue. Cras imperdiet sollicitudin tellus. Etiam a nisi eget sapien dignissim hendrerit. Curabitur vel nisi. Pellentesque in turpis.');

2. A página

Agora nossa página principal onde será feito a busca e a exibição dos dados:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Consulta interativa sem refresh com AJAX</title>
<script type="text/javascript" src="funcs.js"></script>
</head>
 
<body>
<h1>Consulta interativa sem refresh com AJAX</h1>
<br />
<input type="text" id="busca" onkeyup="buscarNoticias(this.value)" />
<div id="resultado"></div>
<br /><br />
<div id="conteudo"></div>
</body>
</html>

Antes de mais nada, incluimos o arquivo das funções, funcs.js, essas serão responsáveis pela requisição AJAX. Depois criamos um campo de busca onde a cada letra que você digitar ele irá fazer um requisição no banco de dados procurando uma noticia com o titulo igual ao digitado, tudo isso através da função buscarNoticias() – colocamos como parâmetro o valor do campo, ou seja, this.value. E ainda criamos duas divs, onde será exibido os titulos das noticias (resultado) e o outro onde será exibido o conteúdo da mesma (conteudo).

3. A função buscarNoticias()

Iremos criar essa função dentro do nosso arquivo funcs.js:

var req;
 
// FUNÇÃO PARA BUSCA NOTICIA
function buscarNoticias(valor) {
 
// Verificando Browser
if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}
 
// Arquivo PHP juntamente com o valor digitado no campo (método GET)
var url = "busca.php?valor="+valor;
 
// Chamada do método open para processar a requisição
req.open("Get", url, true);
 
// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {
 
	// Exibe a mensagem "Buscando Noticias..." enquanto carrega
	if(req.readyState == 1) {
		document.getElementById('resultado').innerHTML = 'Buscando Noticias...';
	}
 
	// Verifica se o Ajax realizou todas as operações corretamente
	if(req.readyState == 4 && req.status == 200) {
 
	// Resposta retornada pelo busca.php
	var resposta = req.responseText;
 
	// Abaixo colocamos a(s) resposta(s) na div resultado
	document.getElementById('resultado').innerHTML = resposta;
	}
}
req.send(null);
}

Não vou entrar muito em detalhes. Aqui enviamos o valor para um arquivo PHP chamado busca.php, e nele iremos verificar se o valor existe no nosso banco de dados. De qualquer maneira, há resposta retornada pelo nosso busca.php será colocada na div resultado.

4. O arquivo busca.php

Antes de mais nada, vamos criar um arquivo para fazer a conexão com o banco de dados, iremos chamá-lo de conn.php, preencha-o com as informações de seu servidor:

<?php
$host = "localhost";
$usuario = "root";
$senha = "";
$banco = "nomedobanco";
 
$conn = mysql_connect($host, $usuario, $senha);
$db = mysql_select_db($banco, $conn);
?>

Pronto, agora que já temos nosso arquivo para realizar a conexão com o banco de dados, vamos criar o nosso arquivo de busca – busca.php:

<?php
// Incluir aquivo de conexão
include("conn.php");
 
// Recebe o valor enviado
$valor = $_GET['valor'];
 
// Procura titulos no banco relacionados ao valor
$sql = mysql_query("SELECT * FROM noticias WHERE titulo LIKE '%".$valor."%'");
 
// Exibe todos os valores encontrados
while ($noticias = mysql_fetch_object($sql)) {
	echo "<a href=\"javascript:func()\" onclick=\"exibirConteudo('".$noticias->id."')\">" . $noticias->titulo . "</a><br />";
}
 
// Acentuação
header("Content-Type: text/html; charset=ISO-8859-1",true);
?>

Aqui nosso arquivo PHP, irá retornar as noticias encontradas e cada noticia terá um link chamando mais uma função, dessa vez será a função exibirConteudo() – que recebe como parâmetro o ID da noticia. Então assim que o usuário clicar na noticia encontrada (onclick), a função exibirConteudo() será chamada para exibir o conteudo da noticia desejada.

5. A função exibirConteudo()

Dentro do nosso mesmo arquivo funcs.js, iremos adicionar essa função:

// FUNÇÃO PARA EXIBIR NOTICIA
function exibirConteudo(id) {
 
// Verificando Browser
if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}
 
// Arquivo PHP juntamento com a id da noticia (método GET)
var url = "exibir.php?id="+id;
 
// Chamada do método open para processar a requisição
req.open("Get", url, true);
 
// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {
 
	// Exibe a mensagem "Aguarde..." enquanto carrega
	if(req.readyState == 1) {
		document.getElementById('conteudo').innerHTML = 'Aguarde...';
	}
 
	// Verifica se o Ajax realizou todas as operações corretamente
	if(req.readyState == 4 && req.status == 200) {
 
	// Resposta retornada pelo exibir.php
	var resposta = req.responseText;
 
	// Abaixo colocamos a resposta na div conteudo
	document.getElementById('conteudo').innerHTML = resposta;
	}
}
req.send(null);
}

Essa função funciona da mesma maneira que a buscarNoticias(), porém ela irá enviar o ID ao arquivo exibir.php e a resposta será colocada na div conteudo.

6. O arquivo exibir.php

Bom agora iremos criar o arquivo PHP para selecionar o conteúdo do banco de dados da noticia especificada.

<?php
// Incluir aquivo de conexão
include("conn.php");
 
// Recebe a id enviada no método GET
$id = $_GET['id'];
 
// Seleciona a noticia que tem essa ID
$sql = mysql_query("SELECT * FROM noticias WHERE id = '".$id."'");
 
// Pega os dados e armazena em uma variável
$noticia = mysql_fetch_object($sql);
 
// Exibe o conteúdo da notica
echo $noticia->conteudo;
 
// Acentuação
header("Content-Type: text/html; charset=ISO-8859-1",true);
?>

Esse arquivo simplesmente irá recuperar a ID enviada através do método GET pelo nosso javascript, irá procurar no banco de dados o registro com essa ID e retorna-lo para que seje colocado na div conteudo.

7. Finalizando

Mais uma vez, nós podemos concluir que com o AJAX é possível muito mais interatividade em nossos sistemas. Esse foi só um pequeno exemplo mais poderiamos utiliza-lo, tanto para consulta quanto para exclusão ou alteração no banco de dados. Espero que você tenha conseguido entender ao menos um pouco de como funciona as requisições com AJAX.

Em minha opnião o artigo Validação de campos sem refresh com AJAX ficou mais detalhado em relação aos códigos, caso você não tenha entendido muito bem, de uma olhada nele.

Download dos arquivos

Até a próxima!
Abraços

Confirmação antes de deletar registro com Javascript

Muitas vezes programando na web, precisamos fazer um botão para remover algum registro do banco de dados, e como se trata da remoção de um registro é de muita importancia uma confirmação do tipo “Deseja remover esse resgistro?”. É isso que veremos nesse artigo; na verdade trata-se de um código simples, porém muito útil, vamos a ele:

Por exemplo, vamos criar links que irão chamar a função confirmacao():

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

<html>
<head>
</head>
 
<body>
<a href="javascript:func()"
onclick="confirmacao('1')">Remover registro #1</a>
 
<a href="javascript:func()"
onclick="confirmacao('2')">Remover registro #2</a>
 
<a href="javascript:func()"
onclick="confirmacao('3')">Remover registro #3</a>
</body>
</html>

Criamos links da qual quando o usuário clicar neles, ou seja, no evento onclick será chamada a função confirmacao() e como parametro enviaremos o ID do registro.

Agora nosso javascript:

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

<html>
<head>
<script language="Javascript">
function confirmacao(id) {
     var resposta = confirm("Deseja remover esse registro?");
 
     if (resposta == true) {
          window.location.href = "remover.php?id="+id;
     }
}
</script>
</head>
 
<body>
<a href="javascript:func()"
onclick="confirmacao('1')">Remover registro #1</a>
 
<a href="javascript:func()"
onclick="confirmacao('2')">Remover registro #2</a>
 
<a href="javascript:func()"
onclick="confirmacao('3')">Remover registro #3</a>
</body>
</html>

Criamos a função confirmacao() que receberá como parametro o ID do registro, caso a resposta seja OK, ou seja, if (resposta == true) você será redirecionado para a página reponsável pela remoção do registro, no caso remover.php e enviará através do método GET o ID do registro que será removido.

Isso é apenas um exemplo de como podemos utilizar a confirmação. Vale apena realizar uma confirmação antes de remover um registro do banco de dados, pois são muitas as vezes que nós removemos algo importante sem a intenção.

Validação de campos sem refresh com AJAX

Nesse artigo iremos desenvolver um formulário da qual o usuário deverá preencher com seus dados, e quando ele tirar o foco do campo iremos verificar se o que foi digitado tem relação com o que o campo pede. Tudo isso será feito com a tecnologia AJAX, que nos permite fazer requisições com o servidor sem a necessidade de atualizar a página. Os arquivos utilizados aqui estão disponíveis para download no final do artigo.

Veja o que será feito, clicando aqui.

 

1. Formulário

Primeiramente vamos criar nosso formulário (index.html):

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

<html>
<head>
<title>Validação de campos com AJAX</title>
<script type="text/javascript" src="ajax/funcs.js"></script>
</head>
<body>
 
Login: <br /> <input type="text" id="login" onblur="validarDados('login', document.getElementById('login').value);" />
<div id="campo_login"> </div> <br />
 
Email: <br /> <input type="text" id="email" onblur="validarDados('email', document.getElementById('email').value);" />
<div id="campo_email"> </div> <br />
 
CPF: <br /> <input type="text" id="cpf" onblur="validarDados('cpf', document.getElementById('cpf').value);" />
<div id="campo_cpf"> </div> <br />
 
</body>
</html>

Em cada campo que for criado deverá ser chamado a função validarDados() (essa será abordada mais adiante) quando o usuário tirar o foco do campo, ou seja, no evento onblur. E também para cada campo deverá ser criado uma div onde será exibido a mensagem de erro.

 

2. Javascript

Agora iremos criar nosso javascript que será o responsável pela requisição com o servidor (ajax/funcs.js):

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

// Variável que receberá o objeto XMLHttpRequest
var req;
 
function validarDados(campo, valor) {
 
// Verificar o Browser
// Firefox, Google Chrome, Safari e outros
if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
// Internet Explorer
else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}
 
// Aqui vai o valor e o nome do campo que pediu a requisição.
var url = "ajax/validacao.php?campo="+campo+"&valor="+valor;
 
// Chamada do método open para processar a requisição
req.open("Get", url, true);
 
// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {
 
	// Exibe a mensagem "Verificando" enquanto carrega
	if(req.readyState == 1) {
		document.getElementById('campo_' + campo + '').innerHTML = '<font color="gray">Verificando...</font>';
	}
 
	// Verifica se o Ajax realizou todas as operações corretamente (essencial)
	if(req.readyState == 4 && req.status == 200) {
	// Resposta retornada pelo validacao.php
	var resposta = req.responseText;
 
	// Abaixo colocamos a resposta na div do campo que fez a requisição
	document.getElementById('campo_'+ campo +'').innerHTML = resposta;
	}
 
}
 
req.send(null);
 
}

Vamos a explicação do código:

- Linha 4: Criamos a função validarDados() que receberá como parametros o campo que será necessário para colocar a resposta na div correta e o valor para a verificação.

- Linha 8 a 14: É aqui que criamos o XMLHttpRequest, responsável pela requisição. Lembrando que deve ser criado tanto para IE quanto para os outros (Firefox, Google Chrome…).

- Linha 17: Definimos a variável url com o arquivo PHP que fará a validação (ajax/validacao.php), o nome do campo e o valor do mesmo, e esses serão enviados através do método GET.

- Linha 20: Aqui processamos a requisição, ou seja, é onde o valor é enviado ao arquivo PHP que fará a validação.

- Linha 23: Quando receber a resposta do servidor, será chamado uma função para exibir a resposta na div correspondente ao campo.

- Linha 26 a 28: Exibe a mensagem “Verificando” enquanto a resposta é processada.

- Linha 31 a 34: Caso tudo tenha ocorrido bem, coloca a resposta do servidor em uma variável chamada resposta.

- Linha 36: Simplesmente coloca a resposta na div correspondente ao campo.

 

3. PHP

Agora num tem segredo para quem já conhece PHP, basta apenas receber os valores e verificar se são válidos (ajax/validacao.php):

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

<?php
// Campo que fez requisição
$campo = $_GET['campo'];
// Valor do campo que fez requisição
$valor = $_GET['valor'];
 
// Verificando o campo login
if ($campo == "login") {
 
	if ($valor == "") {
		echo "Preencha o campo com seu login";
	} elseif (strlen($valor) > 28) {
		echo "O login deve ter no máximo 28 caracteres";
	} elseif (strlen($valor) < 4) {
		echo "O login deve ter no minímo 4 caracteres";
	} elseif (!preg_match('/^[a-z\d_]{4,28}$/i', $valor)) {
		echo "O login deve conter somente letras e numeros.";
	}
 
}
 
// Verificando o campo email
if ($campo == "email") {
 
	if (!eregi("^[a-z0-9_\.\-]+@[a-z0-9_\.\-]*[a-z0-9_\-]+\.[a-z]{2,4}$", $valor)) {
		echo "Preencha com um email válido"; //
	}
 
}
 
// Verificando o campo CPF
if ($campo == "cpf") {
 
	if (!eregi("^([0-9]){3}.([0-9]){3}.([0-9]){3}-([0-9]){2}$", $valor)) {
		echo "Digite um CPF válido";
	}
 
}
 
// Acentuação
header("Content-Type: text/html; charset=ISO-8859-1",true);
?>

- Linha 3 e 5: Lá no javascript enviamos o campo e o valor através do método GET, ou seja, basta apenas recupera-los normalmente.

- Linha 8: Caso o campo seje igual a login, será executado as ações em relação ao login. O mesmo será feito com os outros campos, somente mudando o tipo de validação.

- Linha 41: É muito freqüente problemas com caracteres especiais, por isso é necessário definir o charset como ISO-8859-1.

 

4. Finalizando

Talvez o artigo tenha sido um pouco complicado caso você esteje começando agora com AJAX, porém eu lhe aconselho a aprender um pouco mais sobre essa tecnologia, pois com ela podemos tornar a web uma lugar muito mais interativo. Espero que esse artigo tenha sido útil a você.

Download dos arquivos

Exibir mensagem ao passar o mouse na imagem com Javascript

Hoje descobri uma ferramenta muito interessante e também de fácil utilização e customização, que mostra uma mensagem ao você passar o mouse em uma imagem, ou até mesmo em um texto.

Clique aqui para fazer dowload do script

Para podermos utilizar o script, antes de mais nada, devemos inseri-lo no corpo do nosso documento, ou seja, entre as tags <body></body>:

<html>
<head>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
</body>
</html>

Agora podemos já podemos utilizar a ferramenta. Por exemplo, se quisermos exibir a mensagem “Blog do faael webmaster” quando o usuário colocar o mouse em cima do texto faael, fazemos da seguinte maneira:

<html>
<head>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
 
<a href="http://faael.net23.net" onmouseover="Tip('Blog do faael webmaster')" onmouseout="UnTip()">faael</a>
</body>
</html>

Simples não? Basta apenas você adicionar:

onmouseover = "Tip('Mensagem')";
onmouseout = "UnTip()";

Então se você quiser exibir a mensagem em uma imagem basta seguir a mesma lógica:

<html>
<head>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
 
<img src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" onmouseover="Tip('Logotipo da famosa empresa Google')" onmouseout="UnTip()" />
</body>
</html>

Bom legal, mas eu não gostei da corzinha padrão, e agora? O mais interessante dessa ferramenta é que ela pode ser customizada de acordo com suas preferências, basta você abrir o arquivo wz_tooltip.js e lá ajustar suas preferências, por exemplo, para trocar o fundo basta editar a linha 59:

// CONFIGURAÇÃO PADRÃO
config. BgColor			= '#E2E7FF'	// Background colour (HTML colour value, in quotes)
 
// CONFIGURAÇÃO CUSTOMIZADA (FUNDO PRETO)
config. BgColor			= '#000000'	// Background colour (HTML colour value, in quotes)

Além do fundo, tem uma série de configurações que podemos alterar, como as bordas e a fonte. Sabendo um pouco do inglês técnico é possível você configurar sózinho. Caso você precise de mais informações a respeito do script, veja no site oficial a documentação (inglês):

http://www.walterzorn.com/tooltip/tooltip_e.htm#docu

Fazendo trajeto no Google Maps com Javascript

Com o Google Maps (http://maps.google.com.br/), podemos definir trajetos de um ponto A a um ponto B, certo? Mas se uma empresa tem um site e quer mostrar o trajeto da casa do cliente até a empresa não seria legal mandar ela procurar no Gooogle Maps e sim criar um formulário em seu próprio site para mapear o trajeto. Bom vamos ao código que as coisas ficarão mais claras:

Clique aqui para ver o que será feito nesse artigo

 

1. Criando o formulário

<form name="form1" action="#">
<strong>Endereço:</strong><br />
<input type="text" id="endereco" /><br /><br />
<strong>Cidade:</strong><br />
<input type="text" id="cidade" /><br /><br />
<strong>Estado:</strong><br />
<select id="estado">
<option value="AC">AC</option>
<option value="AL">AL</option>
<option value="AM">AM</option>
<option value="AP">AP</option>
<option value="BA">BA</option>
<option value="CE">CE</option>
<option value="DF">DF</option>
<option value="ES">ES</option>
<option value="FN">FN</option>
<option value="GO">GO</option>
<option value="MA">MA</option>
<option value="MG">MG</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="PA">PA</option>
<option value="PB">PB</option>
<option value="PE">PE</option>
<option value="PI">PI</option>
<option value="PR">PR</option>
<option value="RJ">RJ</option>
<option value="RN">RN</option>
<option value="RO">RO</option>
<option value="RR">RR</option>
<option value="RS">RS</option>
<option value="SC">SC</option>
<option value="SE">SE</option>
<option selected="selected" value="SP">SP</option>
</select><br /><br />
<input type="button"  onclick="abrirMapa()"
value="Como chegar?" />
</form>

Bom acho que no formulário nenhum segredo né? Apenas HTML, somente na linha 36 nós chamamos a função abrirMapa() através do evento onClick.

 

2. A Função abrirMapa()

Quando o cliente clicar em “Como chegar?” será chamada a função abrirMapa(), portanto vamos cria-lá:

<script language="javascript">
function abrirMapa() {
// Informações da localização do cliente (formulário)
var endereco = document.getElementById('endereco').value;
var cidade = document.getElementById('cidade').value;
var estado = document.getElementById('estado').value;
var cliente = endereco + ' - ' + cidade + ' - ' + estado;

// Informações da empresa
var empresa = "Av. Castelo Branco - Bauru - SP";

// Gerando o mapa
window.open('http://maps.google.com.br/?q=from: '+ cliente +' to: '+ empresa +'');
}
</script>

Vamos a explicação do código;

- Linha 2: criamos a função abrirMapa();

- Linhas 4, 5 e 6: é aqui que nós pegamos os valores dos campos do formulário através do document.getElementById().

- Linha 7: unimos as variaveis endereço, cidade e estado.

- Linha 10: criamos a variável empresa e definimos como valor o endereco da empresa.

- Linha 13: abrimos uma nova janela com o trajeto através do Google Maps.

Nada mais que um código simples mais que pode ser muito interessante no site de sua empresa.

Download do arquivo

Validando Formulários com Javascript

Com o PHP ou ASP, podemos validar um formulário, porém é necessário atualizar a página e tudo acaba sendo mais demorado. Com Javascript isso fica mais fácil, pois não é  necessário nem atualizar a página. Mas lembrando que é necessário também a validação com o lado servidor (PHP ou ASP), pois o javascript pode ser burlado.

Clique aqui para ver o que será feito

É uma validação simples, porém de muita utilizadade. Vamos ao código (O código completo está disponível para download no final do artigo):

1. Criando o formulário:

Primeiramente, vamos fazer nosso formulário:

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

<html>
<head>
<title>Validando Formulários com Javascript</title>
</head>
<body>
<form name="form1" action="enviar.php" method="post">
Nome:
<input name="nome" type="text"><br /><br />
Email:
<input name="email" type="text"><br /><br />
Senha:
<input name="senha" type="password"><br /><br />
Repitir Senha:
<input name="rep_senha" type="password"><br /><br />
<input type="submit"  onclick="return validar()">
</form>
</body>
</html>

- Bom aqui criamos o formulário;

- Linha 15: [onclick="return validar()"] estamos chamando a função validar() no momento que o usuário clicar em enviar;

2. Criando a função validar()

Agora, vamos criar nosso código  javascript para fazer validação, lembrando que esse código deve estar, de preferência, entre as tags head (cabeçalho):

1
2
3
4

<script language="javascript" type="text/javascript">
function validar() {
}
</script>

- No código acima foi criada a função validar();

1
2
3
4
5
6
7
8

<script language="javascript" type="text/javascript">
function validar() {
var nome = form1.nome.value;
var email = form1.email.value;
var senha = form1.senha.value;
var rep_senha = form1.rep_senha.value;
}
</script>

- Dentro de nossa função criamos as varí­aveis para cada campo de nosso formulário;

- Linha 3: criamos a varíavel nome e atribuimos o valor do campo nome, ou seja form1.nome.value (Valor do campo nome do nosso formulário);

- O mesmo foi feito nas linhas 4, 5 e 6;

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

<script language="javascript" type="text/javascript">
function validar() {
var nome = form1.nome.value;
var email = form1.email.value;
var senha = form1.senha.value;
var rep_senha = form1.rep_senha.value;
 
if (nome == "") {
alert('Preencha o campo com seu nome');
form1.nome.focus();
return false;
}
}
</script>

- Linha 8: Se nome (O campo nome, pois declamos a variável) estiver em branco, as ações serão executadas;

- Linha 9: Dispara uma mensagem de alerta dizendo que o usuário deve preencher o campo nome;

- Linha 10: Da foco no campo nome;

- Linha 15: Retorna a resposta false, ou seja, que não deve continuar enviando os dados;

- Resumindo, caso o campo nome esteje em branco será exibido uma mensagem de alerta dizendo ao usuário que preencha o campo com seu nome;

- O mesmo pode e será feito com os outros campos;

1
2
3
4
5

if (nome.length < 5) {
alert('Digite seu nome completo');
form1.nome.focus();
return false;
}

- Podemos verificar também se um campo tem o número de caracteres mínimo/máximo especificado.

- Para isso utilizamos length, ou seja, se o numero de caracteres do campo nome for menor que 5 a ação será executada.

1
2
3
4
5

if (senha != rep_senha) {
alert('Senhas diferentes');
form1.senha.focus();
return false;
}

- Podemos também ver se dois campos coincidem, no caso a senha e sua repetição;

- Se senha (campo senha) for diferente de rep_senha (Campo Repitir Senha) as ações serão executadas;

- Podemos utilizar todos os métodos de comparação:
Menor que: <
Maior que: >
Igual a: ==
Diferente de: !=

Conclusão

Isso é só um pouco do que o javascript pode fazer, mas já é útil para validar seus formulários de uma forma mais rápida e fácil.

Download do arquivo