Cadastro de usuários em PHP usando Ajax e MySQL
Veja nesse artigo como criar um cadastro de usuários utilizando Ajax e PHP para inserir os dados em uma tabela MySQL.
Nesse artigo iremos falar um pouco sobre o PHP e outras linguagens dinâmicas como o Ajax. Vamos aprender a como utilizar a tecnologia AJAX em uma aplicação, dando a ela uma dinâmica com DOM (Document Object Model), sem auxilio de nenhum framework.
Antes de mais nada, o mais importante para criarmos é o nosso banco de dados, pois sem ele não haverá armazenamento de dados e muita comunicação em nenhuma aplicação, não é mesmo?
Vamos então a criação do banco de dados que iremos chamar de banco_cliente e também de nossa tabela chamada clientes no MySQL.
CREATE DATABASE banco_cliente;
CREATE TABLE clientes(
"id_cliente" int(4) not null auto_increment primary key,
"nome_cliente" varchar(30) not null,
"senha" varchar(10) not null
) ;
Listagem 1. Criação do banco_cliente no mysql
Agora que já temos nosso banco de dados e nossa tabela criada, precisamos começar a criar o arquivo que será responsável por inserir dados via PHP nessa tabela que acabamos de criar.
Esse será um arquivo em HTML onde iremos colocar um formulário que ao ser preenchido e enviado terá seus dados cadastrados na tabela.
Vamos ao código:
<html>
<head>
<title>Inserindo dados com PHP, Ajax e DOM</title>
<style type="text/css">
body{
background:#f7f7ff;
}
#geral{
font:bold 12px trebuchet MS:
color:blue;
position:absolute;
top:155px;
left:220px;
}
p{
text-align:center;
font:bold 15px verdana,arial;
color:red;
position:absolute;
top:200px;
left:200px;
}
legend{
font:bold 12px trebuchet MS;
color:#193935;
text-transform:uppercase;
}
</style>
</head>
<body>
<div id="geral">
<fieldset >
<legend> Cadastro com ajax, php e DOM </legend>
<form id="frm">
<center>
Apelido: <input type="text" name="nome" id="nome"><br>
Senha: <input type="text" name="senha" id="senha"><br>
<input type="button" value="cadastrar" onclick="cadastra();">
</center>
</form>
</fieldset>
</div>
</body>
</html>
Listagem 2. Código HTML do exemplo
Agora vamos começar a entrar na parte de javascript, vamos precisar criar um código que instancie um objeto em ajax para o nosso exemplo chamado ajax.js, para isso use o código da listagem 3.
function getXmlHttp() {
var xmlhttp;
try{
xmlhttp = new XMLHttpRequest();
}catch(ee){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xmlhttp = false;
}
}
}
return xmlhttp;
}
Listagem 3. Código JavaScript para instanciar um objeto chamado ajax.js
Agora vamos criar as funções necessárias em JavaScript para realizar o cadastro e confirmar se foi cadastrado com sucesso ou não. Para isso vamos criar um arquivo javaScript externo ou se preferir pode usar no próprio arquivo html que criamos anteriormente.
Nota: É aconselhável que sejam usados sempre arquivos CSS e JavaScript externos, no nosso exemplo estamos usando dentro do próprio arquivo HTML, o que vai funcionar da mesma forma, mas por uma questão de convenção e performance é aconselhável sempre utilizar arquivos externos.
var request = getXmlHttp();
function cadastra(){
var nm = document.getElementById("nome").value;
var se = document.getElementById("senha").value;
var url= "cadastra.php?nome="+nm+"&senha="+se;
request.open("GET", url, true);
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
request.onreadystatechange = confirma;
request.send(null);
}
function confirma(){
if(request.readyState == 4){
var response = request.responseText;
var divmain = document.getElementById("geral");
var formid = document.getElementById("frm");
var pelement = document.createElement("p");
var text = document.createTextNode
("Parabéns " + response + ", Cadastro Concluido!");
pelement.appendChild(text);
divmain.replaceNode(pelement,frm);
var ael = document.createElement("a");
var pula = document.createElement("<br>");
var textlink = document.createTextNode("voltar");
ael.appendChild(textlink);
ael.setAttribute("href","Cadastro.html");
pelement.appendChild(pula);
pelement.appendChild(ael);
}
}
Listagem 3. Código Javascript com funções necessárias
O código acima, como falei anteriormente, pode ser salvo em um arquivo externo e linkado para o html ou como iremos fazer no nosso exemplo, sendo inserido dentro do código html.
Então nosso arquivo html deverá ficar da seguinte forma:
<html>
<head>
<title>Inserindo dados com PHP, Ajax e DOM</title>
<style type="text/css">
body{
background:#f7f7ff;
}
#geral{
font:bold 12px trebuchet MS:
color:blue;
position:absolute;
top:155px;
left:220px;
}
p{
text-align:center;
font:bold 15px verdana,arial;
color:red;
position:absolute;
top:200px;
left:200px;
}
legend{
font:bold 12px trebuchet MS;
color:#193935;
text-transform:uppercase;
}
</style>
</head>
<body>
<div id="geral">
<fieldset >
<legend> Cadastro com ajax, php e DOM </legend>
<form id="frm">
<center>
Apelido: <input type="text" name="nome" id="nome"><br>
Senha: <input type="text" name="senha" id="senha"><br>
<input type="button" value="cadastrar" onclick="cadastra();">
</center>
</form>
</fieldset>
</div>
<script type="text/javascript">
var request = getXmlHttp();
function cadastra(){
var nm = document.getElementById("nome").value;
var se = document.getElementById("senha").value;
var url= "cadastra.php?nome="+nm+"&senha="+se;
request.open("GET", url, true);
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
request.onreadystatechange = confirma;
request.send(null);
}
function confirma(){
if(request.readyState == 4){
var response = request.responseText;
var divmain = document.getElementById("geral");
var formid = document.getElementById("frm");
var pelement = document.createElement("p");
var text = document.createTextNode
Content-Type", "application/x-www-form-urlencoded")
("Parabéns " + response + ", Cadastro Concluido!");
pelement.appendChild(text);
divmain.replaceNode(pelement,frm);
var ael = document.createElement("a");
var pula = document.createElement("<br>");
var textlink = document.createTextNode("voltar");
ael.appendChild(textlink);
ael.setAttribute("href","Cadastro.html");
pelement.appendChild(pula);
pelement.appendChild(ael);
}
}
</script>
</body>
</html>
Listagem 4. Código HTML final
Nota: Note que não estamos definindo no html o action nem o method do formulário, isso tudo está sendo feito via javascript.
Pronto, nosso html está pronto, só está faltando agora o mais importante que é inserir os dados no banco de dados e é aí que entra o PHP na história. Ele vai ser o responsável por pegar esses dados do formulário e salvarem na tabela do banco de dados.
Primeiro vamos criar o arquivo de conexão com o banco de dados, para isso copie o código da listagem 5 e salve como conexão.php
<?php
$conn = mysqli_connect("localhost","usuario","senha");
mysqli_select_db("bd_cliente",$conn);
?>
Listagem 5. Criando a conexão com o banco de dados
Lembre-se de que onde está “usuário” e “senha” é para você colocar seu usuário e senhas do seu banco de dados e “localhost” é onde está seu banco de dados, se for na sua máquina local, usa-se o localhost, senão você use o IP do servidor que está o seu banco de dados.
Lembre-se de salvar o arquivo php com o nome de cadastra.php, ou se preferir outro nome, basta modificar o nome nessa linha do código javascript: var url= "cadastra.php?nome="+nm+"&senha="+se;
<?php
include "conexao.php";
$nm = addslashes(trim($_GET["nome"]));
$se = addslashes(trim($_GET["senha"]));
$sql = "INSERT INTO clientes(nome_cliente, senha) VALUES("$nm","$se")";
$rs = mysqli_query($sql, $conn);
if(!$rs)
echo "Não foi possivel realizar seu cadastro!";
else
echo $nm;
mysqli_close();
?>
Listagem 6. Código php para cadastro no banco de dados
Pronto, agora é só rodar sua aplicação em um servidor php e testá-la.
Mais sobre PHP
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo