Criando um cadastro com PHP, Ajax e jQuery

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (9)  (0)

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.

PHP + Ajax + 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.

1º Passo: 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.

Listagem 1: Criação do banco de dados

CREATE DATABASE `meubanco`;

2º Passo: 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".

Listagem 2: Criação da tabela que servirá de exemplo

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;

3º Passo: 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.

Listagem 3: Arquivo de 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*/
?>

4º Passo: 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.

Listagem 4: Página principal da aplicação

<!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.

5º Passo: 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.

Listagem 5: Página que receberá os parâmetros

<?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.

Um abraço.

Leia também

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?