Chat – Bate Papo utilizando PHP + jQuery Ajax

Download: Aqui

Faça então o download do código, execute o SQL para criação da tabela no Banco de Dados MySQL.
Vale lembrar de alterar as informações de conexão ao banco no arquivo: class/cChat.php

Seja Feliz ! (:

Share Button

Formulários dinâmicos com Ajax e PHP

Neste tutorial teremos dicas de como criar um formulário dinâmico utilizando HTML, Javascript e PHP.

Iniciaremos então com a criação do formulário:
Vale ressaltar que não estou nem um pouco preocupado com design… para isso eles servem.

Aquivo: form.html

<form name="frm" action="" method="post">
<p>Nome :<input name="txtNome" id="txtNome" type="text" /></p>
<p>E-Mail :<input name="txtEmail" id="txtEmail" type="text" /></p>
<p>Comentário :<textarea name="txtComentario" id="txtComentario"></textarea></p>
<p><input name="btEnvia" type="button" value="Enviar" onClick="validaDados();" /></p>
</form>
<span id="resForm">&nbsp;</span>

Um formulário composto por três campos (dois input e um textarea) e um botão (button).
Após o form, utilizaremos um <span> com id para que possamos validar e informar ao usuário o que está acontecendo.

Vamos então a validação dos dados do formulário e a definição das chamadas ajax.

Validando dados via Javascript:

function validaDados() {
//Capturando valores dos elementos do form
var nm = document.getElementById('txtNome').value;
var em = document.getElementById('txtEmail').value;
var co = document.getElementById('txtComentario').value;

//Verificando a existência de campos em branco
if(nm == "" || em == "" || co == "")
{
document.getElementById('resForm').innerHTML = 'Campos em branco! Favor preencher.';
return false;
}
else
{
document.getElementById('resForm').innerHTML = 'Enviando dados...';
//Aqui está a chamada para a função ajax
insereDadosAjax('ajax_insere.php?nome='+escape(nm)+'&email='+em+'&com='+escape(co));
}
}

Para entender melhor as funções ajax, precisaremos esclarecer sobre “Estado das Requisições Ajax”. Toda vez que fazemos uma chamada ajax ela passa por 4 estados básicos que são eles:

1. Sendo enviado
2. Processando
3. Armazenando
4. Pronto

Abaixo, temos duas funções para trabalhar com a tecnologia ajax que são elas:

1. insereDadosAjax(url)
2.insereDadosAjaxVer()

A primeira é responsável por criar, abrir e enviar a requisição;
A segunda fica responsável por acompanhar as mudanças de estados da requisição.

Trocando em miudos, a primeira cria e envia… a segunda fica escutando e é chamada a cada modificação do estado (que vai de 1 a 4 conforme informado anteriormente).

Funções para as requisições Ajax:

function insereDadosAjax(url) {
ajxEnv = null;
if (window.XMLHttpRequest) // Requisição Ajax para MOZILA
{
ajxEnv = new XMLHttpRequest();
ajxEnv.onreadystatechange = insereDadosAjaxVer;
ajxEnv.open("GET",url,true);
ajxEnv.send(null);
}
else if (window.ActiveXObject) // Requisição Ajax para IE
{
ajxEnv = new ActiveXObject("Microsoft.XMLHTTP");
if (ajxEnv)
{
ajxEnv.onreadystatechange = insereDadosAjaxVer;
ajxEnv.open("GET",url,true);
ajxEnv.send();
}
}
}

function insereDadosAjaxVer()
{
//Verifica se o estado é diferente de 4, ou seja, ainda não foi completada a requisição
if(ajxEnv.readyState != 4)
{
//Mostrando mensagem para o usuário
document.getElementById('resForm').innerHTML = 'Aguarde... Enviando dados.';
}

//Verificando se o estado é igual a 4, ou seja, requisição completada com sucesso.
if (ajxEnv.readyState == 4)
{
//Em caso de requisição completa, apenas informamos ao usuário e limpamos os campos
document.getElementById('resForm').innerHTML = 'Dados Inseridos com Sucesso';
document.getElementById('txtNome').value = '';
document.getElementById('txtEmail').value = '';
document.getElementById('txtComentario').value = '';
}
}

Vamos agora para o nosso PHP:

Informação importante:
Na validação do formulário, após verificar todos os campos, chamamos a função responsável por criar a requisição ajax passando como parâmetro o nome da pagina php (ajax_insere.php) e os dados capturados do formulário conforme abaixo:

insereDadosAjax(‘ajax_insere.php?nome=’+escape(nm)+’&email=’+em+’&com=’+escape(co));

Um detalhe importante que muita gente quebra a cabeça é com a acentuação com ajax.
Para solucionar este problema utilizaremos a função javascript escape() que consiste em codificar uma string em formato URL (o mesmo que url_encode() em php).

Aquivo: ajax_insere.php

<?
//Definindo o charset
header("Content-Type: text/html; charset=UTF-8",true);

//capturando dados enviados e decodificando o escape() do javascript
$nome = urldecode($_GET['nome']);
$email = urldecode($_GET['email']);
$com = urldecode($_GET['com']);

//Aqui vai seu método para inserir os dados no banco.

?>

Vejam que o php é bastante simples… apenas vai receber os dados passados da chamada ajax via url (por esse motivo capturamos via get) e inseri-los no banco de dados utilizado.

Muuuuuuiiiitoooo simples e bastante funcional para envio de dados sem a necessidade de postar e recarregar páginas.

Espero que aproveitem (((:

Até

Share Button