Criando um cadastro com PHP, Ajax e jQuery

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`;

Listagem 1. Criaç�o do banco de dados

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;

Listagem 2. Criaç�o da tabela que servir� de exemplo

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*/
?>

Listagem 3. Arquivo de conex�o com o banco de dados

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>

Listagem 4. P�gina principal da aplicaç�o

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);
?>

Listagem 5. P�gina que receber� os par�metros

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.

Leia tamb�m: