Muitos sistemas web decidem utilizar apenas o PHP para fazer as suas transações com o banco de dados, mas quando se busca um melhor desempenho e agilidade para o usuário, aconselha-se a utilizar tecnologias como jQuery e Ajax, pois é possível utilizar as instruções do tipo INSERT, DELETE e UPDATE do banco de dados sem que página recarregue, ou seja, sem que o usuário perceba. Veja neste artigo um passo a passo de como realizar um cadastro utilizando PHP, Ajax e jQuery, onde é explicado como é o funcionamento do cadastro e a interação das páginas.
Para tornar o artigo o mais prático possível e de fácil entendimento para aqueles que estão iniciando com estas tecnologias, o processo será apresentado em alguns passos, seguindo uma ordem lógica.
Criar o banco de dados
O primeiro passo será criar um banco de dados a ser utilizado no nosso exemplo. A Listagem 1 mostra o script que pode ser executado no MySQL para criar um banco de dados de exemplo.
CREATE DATABASE `meubanco`;Criar uma tabela para servir de exemplo
Em seguida, precisamos criar uma tabela que utilizaremos como exemplo para fazer as operações de CRUD. Neste exemplo o nome da tabela será "USUARIO".
CREATE TABLE `meubanco`.`USUARIO` (
`ID_USUARIO` int(10) unsigned NOT NULL auto_increment,
`NOME` varchar(200) NOT NULL default '',
`EMAIL` varchar(200) NOT NULL default '',
`SENHA` varchar(45) NOT NULL default '',
PRIMARY KEY (`ID_USUARIO`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;Criar a página PHP para se conectar com o banco de dados
Agora criamos uma página PHP, chamada conexao.php que ficará responsável por estabelecer a conexão com o banco de dados.
<?php
//conexão com o servidor
$conect = mysql_connect("localhost", "root", "senha");
// Caso a conexão seja reprovada, exibe na tela uma mensagem de erro
if (!$conect) die ("<h1>Falha na conexão com o Banco de Dados!</h1>");
// Caso a conexão seja aprovada, então conecta o Banco de Dados.
$db = mysql_select_db("meubanco");
/*Configurando este arquivo, depois é só você dar um include em suas paginas php,
isto facilita muito, pois caso haja necessidade de mudar seu Banco de Dados
você altera somente um arquivo*/
?>Criar a página PHP para fazer as transações com o banco
A próxima página PHP a ser criada, a index.php, será responsável por realizar as transações do cadastro.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulário de usuário</title>
<script src="js/jquery-1.8.2.min.js" type="text/javascript" ></script>
<style>
label{
display: block;
}
.window{
display:none;
width:200px;
height:300px;
position:absolute;
left:0;
top:0;
background:#FFF;
z-index:9900;
padding:10px;
border-radius:10px;
}
#mascara{
display:none;
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
}
.fechar{display:block; text-align:right;}
</style>
</head>
<body>
<a href="#janela1" rel="modal">Novo Usuario</a>
<!-- Tabela de exibição dos dados-->
<div id="table">
<table border="1px" cellpadding="5px" cellspacing="0">
<tr>
<td>Id</td>
<td>Nome</td>
<td>Email</td>
<td>Senha</td>
</tr>
<?php
//precisamos chamar esta página para realizarmos as queries com o banco
include 'conexao.php';
// Select que traz todos os usuario cadastrados no banco de dados
$select = "SELECT * FROM USUARIO";
$result = mysql_query($select); //resultado do select
//Enquanto existir usuários no banco ele insere uma nova linha e exibe os dados
while ($row = mysql_fetch_array($result)) {
$id = $row['ID_USUARIO'];
$nome = $row['NOME'];
$email = $row['EMAIL'];
$senha = $row['SENHA'];
echo" <tr>
<td>$id</td>
<td>$nome</td>
<td>$email</td>
<td>$senha</td>
</tr>";
}
?>
</table>
<!-- Modal que é aberto ao clicar novo usuario-->
<div class="window" id="janela1">
<a href="#" class="fechar">X Fechar</a>
<h4>Cadastro de usuario</h4>
<form id="cadUsuario" action="" method="post">
<label>Nome:</label><input type="text" name="nome" id="nome" />
<label>Email:</label><input type="text" name="email" id="email" />
<label>Senha:</label> <input type="text" name="senha" id="senha" />
<br/><br/>
<input type="button" value="Salvar" id="salvar" />
</form>
</div>
<div id="mascara"></div>
</div>
</body>
</html>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
/// Quando usuário clicar em salvar será feito todos os passo abaixo
$('#salvar').click(function() {
var dados = $('#cadUsuario').serialize();
$.ajax({
type: 'POST',
dataType: 'json',
url: 'salvar.php',
async: true,
data: dados,
success: function(response) {
location.reload();
}
});
return false;
});
//// aqui é o script para abrir o nosso pequeno modal
$("a[rel=modal]").click(function(ev) {
ev.preventDefault();
var id = $(this).attr("href");
var alturaTela = $(document).height();
var larguraTela = $(window).width();
//colocando o fundo preto
$('#mascara').css({'width': larguraTela, 'height': alturaTela});
$('#mascara').fadeIn(1000);
$('#mascara').fadeTo("slow", 0.8);
var left = ($(window).width() / 2) - ($(id).width() / 2);
var top = ($(window).height() / 2) - ($(id).height() / 2);
$(id).css({'top': top, 'left': left});
$(id).show();
});
$("#mascara").click(function() {
$(this).hide();
$(".window").hide();
});
$('.fechar').click(function(ev) {
ev.preventDefault();
$("#mascara").hide();
$(".window").hide();
});
});
</script>Observação: não esquecer de incluir na tag head a referência à biblioteca jQuery.
Criar a página que é chamada PHP pelo Ajax
Precisamos agora criar uma página que será chamada, via Ajax, para inserir no banco de dados as informações que passaremos a partir da página index.php. Esta página se chamará salvar.php e seu código é mostrado na Listagem 5.
<?php
include "conexao.php";
$nome = $_POST['nome'];
$email = $_POST['email'];
$senha = $_POST['senha'];
$sql = "INSERT INTO usuario (NOME, EMAIL, SENHA) VALUES ('$nome', '$email', '$senha')";
mysql_query($sql) or die(error());
$response = array("success" => true);
echo json_encode($response);
?>Agora basta executar o projeto e testar, lembrando de definir corretamente os dados para conexão com o banco, no arquivo conexão.php.
Conclusão
Essa é uma aplicação simples muito interessante para entender o funcionamento do jquery e ajax, podendo ser utilizada como base para aplicações futuras que vocês venham a desenvolver no futuro. Com isso finalizo mais um artigo e até o próximo.
