Artigos PHP 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: