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
- Crie o seguinte banco de dados;
PHP (back-end, lado do servidor)
Através do JavaScript iremos acionar o PHP que está no servidor.
- Crie uma pasta para o seu projeto. Organize da seguinte forma;
- Uma pasta core, aonde iremos salvar nossos arquivos PHP
- Uma pasta js, aonde iremos salvar nossos arquivos JS
- 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'; ?>
- 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)
- 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)
- 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>