Como gravar dados no banco de dados usando AJAX.

Introdução

Esta aula serve tanto para o desenvolvimento de aplicativos móveis como de aplicações WEB, já que a chama AJAX será a mesma para amplas plataformas.

Vantagens de gravar dados com Ajax.

  • Aplicativos móveis podem se conectar diretamente à um banco de dados usando JS como intermediário na conexão.
  • Não existe “reload” na página pois não há necessidade de fazer um SUBMIT para o servidor.
  • A página consequentemente fica mais rápida e mais agradável para o usuário (UX)
  • O projeto fica organizado, não vamos misturar PHP com HTML ou JS, tudo ficará separado em pastas e será acionado quando conveniente.
  • O mesmo código PHP e função JS pode ser facilmente reaproveitados em todo o projeto.
  • Mais fácil de compreender o que exatamente está ocorrendo com a aplicação.

Banco de Dados

  1. Crie o seguinte banco de dados; 

PHP (back-end, lado do servidor)

Através do JavaScript iremos acionar o PHP que está no servidor.

  1. Crie uma pasta para o seu projeto. Organize da seguinte forma;
    1. Uma pasta core, aonde iremos salvar nossos arquivos PHP
    2. Uma pasta js, aonde iremos salvar nossos arquivos JS
  2. Crie um arquivo de configuração da conexão com o banco de dados. Nomeie-o como dados-conexao.php e salve dentro da pasta core
     <?php // Dados do servidor MySQL
     $servidor = 'localhost'; // pc-sala-04
     $usuario = 'root'; // aluno
     $senha = 'vertrigo'; // etec@147
     $banco = 'bd_chamada'; ?>
  3. Agora crie o arquivo que irá salvar os dados no banco de dados. Nomeie-o como aluno-grava.php e salve dentro da pasta core
    <?php
    	include("dados-conexao.php"); // Carrega os dados da conexão!	
    	if ($_GET) // Testa se existe valores na URL!
    	{
    		try { // tenta fazer a conexão e executar o INSERT
    			$conecta = new PDO("mysql:host=$servidor;dbname=$banco", $usuario , $senha); //istancia a classe PDO
    			$conecta->exec("set names utf8"); //permite caracteres latinos.
    			$comandoSQL = "INSERT INTO tb_alunos (nome_aluno) VALUES ('$_GET[nome]');";
    			$grava = $conecta->prepare($comandoSQL); //testa o comando SQL
    			$grava->execute(array()); 			
    		} catch(PDOException $e) { // casso retorne erro
    			echo('Erro: ' . $e->getMessage()); 
    		}
    	} 
    ?>
    

 

JavaScript (front-end, lado do cliente, UX)

  1. Crie o arquivo funcoes.js e salve na pasta js.
    function GravaAluno()
    {
        // conecta ao servidor
    	var xmlhttp = new XMLHttpRequest();
     
    	/* colocar na url os valores que quer passar para o servidor.
    	   seu arquivo PHP deverá capturar os dados usando $_GET[]; */
        var url = "http://localhost:8080/chamadaweb/core/aluno-grava.php?nome=" + document.getElementById('nome_aluno').value; 
    	xmlhttp.open("GET", url, true);
    	xmlhttp.send();
    	//alert("Gravado com sucesso no servidor");
    }

    OBS: O alert pode ser descomentado, pois possui apenas finalidade de teste.

HTML (interface, UI)

  1. Crie o arquivo cadastro-aluno.html e salve na raiz da pasta do projeto.
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Cadastro de Alunos Legais</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="js/funcoes.js"></script>
    </head>
    <body>
    
        <div class="container">
            <br><br><br>
            <h1>Cadastro de Alunos Legais</h1>
           
            <label>Informe o nome do aluno que receberá a honra</label>
            <input type="text" id="nome_aluno" class="form-control">
            
            <button type="button" class="btn btn-success" onclick="GravaAluno()">Gravar</button>
        </div>
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
    </html>
    

Download do Exemplo de Cadastro e Consulta com Ajax + PHP

Banco de dados com Ajaxconectar banco de dados com Ajaxenviar dados para o banco usando Ajaxgravar dados com AjaxJavascript AjaxPHP com Ajaxtutorial Ajaxtutorial JavaScript com Ajax