Muitas das vezes precisamos fazer uma consulta no servidor sem a necessidade de recarregar ou mudar a página que estamos. Um exemplo seria a realização de login no nosso site.
Então repare no seguinte, a execução no servidor não poderá ser a partir do atributo action de um formulário. Isso faria com que o resultado da execução no servidor substitua nossa página atual. O que a gente quer é solicitar a execução de um programa no servidor e receber a resposta em uma variável de nossa página. Isso é possível através de uma técnica chama AJAX.
Eu tenho um post que explica como realizar essa operação com javascript, porém o código é pouco árduo. Para nossa sorte existe um framework que facilita nossa vida com sua função pronta para realizarmos operações em AJAX. Afinal, o quê significa AJAX? AJAX significa Assinchronous Javascript and XML. O AJAX foi utilizado inicialmente para transferência de dados usando a estrutura XML mas hoje server para enviar qualquer texto em qualquer formato.
Vamos supor que precisemos validar os dados de login de um determinado usuário. A validação é realizada lá no lado do servidor no entanto nós não queremos modificar a página atual, nós s´queremos verificar as credenciais são válidas. Caso elas estejam válidas nós vamos remover da página o formulário de login e mostrar a frase "Bem vindo, <nome do usuário>.
Isso é interessante pelo fato de carregarmos a página toda de novo, ela irá permanecer com a aparência original excetuando o formulário que não estará mais presente até que seja feito o logoff.
Veja o código a seguir como exemplo.
<html>
<body>
<h1>Meu Site</h1>
<h3>Joselmo</h2>
<div id="login">
Usuário: <input type="text" id="usu" />
Senha: <input type="password", id="senha" />
<button onCLick="fazLogin();">Entrar</button>
</div>
<div id="dados"></div>
</body>
</html>
Repare que o nossos campos não estão dentro de nenhum formulário. O botão que que irá executar uma função javascript de nome "fazLogin".
Até aqui não tem nada de mais. A magia vai acontecer na função fazLogin, que irá realizar a operação Ajax. Para tal vamos utlizar o framework JQuery. Você poderá baixar a última versão do jquery do site jquery.com e incluí-lo no seu código. Você pode optar por usar o framework diretamente da internet, com ofoi feito no exemplo a seguir, no entanto irá precisar estar on-line para realizar seus testes.
Veja como fica.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
function fazLogin() {
}
</script>
</head>
<body>
<h1>Meu Site</h1>
<h3>Joselmo</h2>
<div id="login">
Usuário: <input type="text" id="usu" />
Senha: <input type="password", id="senha" />
<button onCLick="fazLogin();">Entrar</button>
</div>
<div id="dados"></div>
</body>
</html>
Agora vamos escrever nossa função fazLogin. Essa função irá pegir a execução do programa validaLogin.php no servidor. Isso será feito usando-se o método ajax do jquery e para isso precisaremos passar os vlores dos dados que queremos enviar, informar a url, o méthodo e que tipo de informação esperamos com resposta.
Veja como fica.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
function fazLogin() {
// Pega os valores dos campos
var usuario = $("#usu").val();
var senha = $("#senha").val();
// Executa ajax esperando um dado do tipo json, que irá
// retornar em resultado
$.ajax({
method: "post",
url: "validaLogin.php",
data: { usu: usuario, sen: senha},
dataType: "json",
success: function (resultado) {
// Caso não haja erro comparo o código do json
// retornardo com "000" indicando que o
// login é válido
if(resultado.codresp == "000") {
// Login válido. Esconde div de credenciais.
$("#login").hide();
}
else {
// Avisa que os dados são inválidos
alert("Dados inválidos.");
}
});
}
</script>
</head>
<body>
<h1>Meu Site</h1>
<h3>Joselmo</h2>
<div id="login">
Usuário: <input type="text" id="usu" />
Senha: <input type="password", id="senha" />
<button onCLick="fazLogin();">Entrar</button>
</div>
<div id="dados"></div>
</body>
</html>
A primeira coisa que fazemos é pegar os valores dos campos usuário e senha. Repare que não foi usado o comando javascript document.getElementById, foi usado uma forma que eu considero mais elegante, uma vez que estamos usando o JQuery. Para acessarmos atributos e métodos de um determinado objeto da página nós usamos o '$' para indicar que estamos usano funções do JQuery, depois, dentro dos parênteses, nós usamos o id do objeto precedido pelo símbolo '#'. Assim, como quero acessar informações do objeto cujo id é 'usu' eu executo o comando $("#usu"). Depois é usar o '.' para colocarmos as funções ou aributos que desejamos acessar, no caso eu usei a função 'val()'. Essa função pega o valor atual contido no atributo 'value' do objeto.
Observação: Preste atenção no que vou dizer (escrever), o value no html pode ser um valor mas ele pode ter ser alterado a qualquer momento por um código html ou pelo usuário, isso fará com que o valor atual dele não seja igual ao que estar descrito no html.
Uma vez que temos os valores a serem enviados ao servidor podemos executar a função ajax do JQuery. Isso é feito usando o comando $.ajax(). Dentro dos parênteses nós passamos algumas informações que precisam estar entre chaves "{}". Essas informações não precisam estar na ordem que se apresentam no exemplo mas precisam ser descritas separadas por vírgula e seus dados devem ser precedidos por ":".
O primeiro valor a ser passado para a função ajax, no nosso caso, foi o método.
method: "post",
Existe uma vírgula no final indicando que haverá outro parâmetro a ser passado. Depois foi informada a url a ser executada, ou seja que programa quero executar no servidor.
url: "validaLogin.php",
Depois foram passados os dados que validaLogin.php precisa para executar. As palavras a esquerda do ":" é o nome do índice que será buscado pelo $_POST dentro do validaLogin.php e o que está a direita do ":" é o valor que está sendo passado. No nosso caso esse valor está dentro de uma variável, por isso colocamos a variável (usuario e senha).
data: { usu: usuario, sen: senha},
Em seguida informamos o tipo de dado que o ajax espera receber. No caso o programa validaLogin irá devolver uma informação no formato JSON ,faleremos sobre ele mais adiante, por isso esse argumento está como json.
dataType: "json",
Esses são os parâmetros básicos, porém uma vez que o programa lá no servidor tenha sido executado com sucesso como iremos processar a resposta dele? Para isso existe o argumento "success". Nesse argumento informamos qual função deverá ser processada no caso de uma execução bem sucedida no servidor. Depois falaremos no caso de ocorrer erro.
success: function (resultado) {
O que está sendo dito na linha acima é que caso a execução no servidor tenha ocorrido sem problemas, então executar uma função anônima passando o valor de retorno dentro da variável resultado. Repare que existe a apalavra reservada function porém a função não tem nome, por isso ela é anônima.
Essa função será executada com oqualquer uma outra, a diferença é que ela só será executada quando a função ajax for executada sem erro.
JSON
Como dissemos antes, o programa validaLogin.php vai devolver um objeto JSON. Um objeto json nada mais é do que um texto com uma estrutura com nome da posição e o valor da posição, sendo que o valor da posição pode ser uma estrutura json também. Olhe o exemplo a seguir.
[
{
"nome": "Joselmo",
"telefone": "9999-9999",
"idiomas": {
"ingles": "Sim",
"Espanhol": "Não"
}
},
{
"nome": "Maria",
"telefone": "1111-9999",
"idiomas": {
"ingles": "Não",
"espanhol": "Sim"
}
}
]
O objeto começa com '[' e termina com ']'. Os seus elementos começam com '{' e terminam com '}'. O que separa um elemento do outro são as vírgulas.
No nosso exemplo existem dois registros. Um registro com os dados de Joselmo e outro com dados de Maria.
No javascript a forma como esses dados são acessados são basicamente pelo nome da variável que contem o elemento JSON e nome do da informação com um '.' entre os dois. Por exemplo, supondo que a variável "candidato" tenha apenas um registro no formato json, então, poderemos acessar o campo nome da seguinte forma: candidato.nome
E para acessar o campo espanhol seria: candidato.idiomas.espanhol
Agora, se a variável fosse de nome listaCandidatos e queremos pegar o nome do primeiro candidato, então usariámos: listaCandidatos[0].nome
Para o nosso programa validaLogin.php haverá duas informações em um único registro de retorno. O primeiro é um código informando que os dados do login estão corretos, e o segundo que será o nome completo do usuário. O nome do primeiro campo será codresp e o segundo será msg. Quando codresp for "000" irá significar que o login está válido e o nome completo estará em msg. Assim, uma resposta válida apareceria da seguinte forma:
[
{
"codresp": "000",
"msg": "Maria das Couves da Serra",
}
]
Qualquer valor diferente de "000" para codresp indicará que o login não está válido.
É por isso que o código javascript na função ajax verifica se o o código de retorno é "000", pois se for verdade deveremos fazer com que a div que contem os campos para login desapareça.
if(resultado.codresp == "000") {
Para fazer com que um determinado elemento não apareça mais na página podemos usar função hide() do JQuery.
$("#login").hide();
No Lado do Servidor
Pois bem, galera, do lado do servidor teremos o seguinte código:
<?php
// Pego informações enviadas pelo ajax
$usuario = $_POST['usu'];
$senha = $_POST['sen'];
// Cria um array vazio
$retorno = array();
// Monto query de consulta
$sql = "Select nome From USUARIO ".
"Where email = ? ".
"and senha = sha2(?,0)";
// Faço login no banco de dados meusite utilizando a senha
// da aplicação, no meu caso "msite" $con = new mysqli('localhost','msite','12#*aB','meusite'); // Preparo o comando sql $cmdprep = $con->prepare($sql); // Passo os valores para a query $cmdprep->bind_param('ss', $usuario, $senha); // Executo o comando $cmdprep->execute(); // Defino a variável que recebera a resposta // do bando de dados $cmdprep->bind_result($nome); // Pega valor retornado da execução if($cmdprep->fetch()) { // Retornou um valor, logo acho // usuário e senha correspondentes $retorno['codresp'] = '000'; $retorno['msg'] = $nome;
// da aplicação, no meu caso "msite" $con = new mysqli('localhost','msite','12#*aB','meusite'); // Preparo o comando sql $cmdprep = $con->prepare($sql); // Passo os valores para a query $cmdprep->bind_param('ss', $usuario, $senha); // Executo o comando $cmdprep->execute(); // Defino a variável que recebera a resposta // do bando de dados $cmdprep->bind_result($nome); // Pega valor retornado da execução if($cmdprep->fetch()) { // Retornou um valor, logo acho // usuário e senha correspondentes $retorno['codresp'] = '000'; $retorno['msg'] = $nome;
session_start();
$_SESSION['logado'] = true;
$_SESSION['nome'] = $nome;
}
else {
// Fetch não retornou nenhuma linha,
// logo usuário e senha não batem
$retorno['codresp'] = '001';
$retorno['msg'] = 'Login inválido';
}
echo json_encode($retorno);
A primeira coisa que faço é pegar os valores passados pelo ajax, repare bem que estou usando $_POST pelo fato do método utilizado (olhe o código do lado cliente) foi o post. Além disso as variáveis utilizadas para a passagem dos valores foram 'usu' e 'sen', por isso os índices usados dentro do $_POST foram esses.
$usuario = $_POST['usu'];
$senha = $_POST['sen'];
Como o meu retorno tem que ser um JSON eu crio um array, esse array mais tarde será transformado em uma estrutura JSON com a função json_encode do PHP. O array é criado vazio com a função array().
$retorno = array();
O comando seguinte é colocar na variável $sql ( a variável pode ter o nome que você quiser) o comando sql que será utilizado para pegar o nome do usuário e, claro, validar o usurário e senha. No meu site o que identifica o usuário é a senha dele, por isso
Você pode perceber que na senha eu utilizo a função do mysql sha2 para encriptar a senha digitada pelo usuário. Quando a senha foi gravada no banco foi utilizada essa função o que faz com que seu valor da senha não seja legível, esse código gerado não pode ser transformado novamente no valor original e por isso a única forma de comparar se a senha digitada é igual a que está no manco é comprando o código gerado pelo sha2 da senha digitada com o código que está gravado no banco.
Além da senha precisamos comparar também o usuário. Não pode ser apenas o usuário e nem só a senha para validar no banco de dados, isso pelo fato de um usuário poder ter escolhido uma senha igual a de outro usuário.
$sql = "Select nome From USUARIO ".
"Where email = ? ".
"and senha = sha2(?,0)";
Depois faço conexão com o banco de dados, eu uso a senha da aplicação para fazer a conexão não os dados informados pelo usuário do sistema. O usuário do sistema tem seus dados gravados em uma tabela específica, no meu caso é na tabela USUARIO.
$con = new mysqli('localhost','msite','12#*aB','meusite');
Depois preparo o comando no banco de dados utilizando a função prepare() do mysql. A função prepare() solicita ao banco de dados que faça uma primeira validação e prepare o ambiente para a execução da query.
$cmdprep = $con->prepare($sql);
Agora preciso substituir as '?' da minha query pelos valores recebidos.
$cmdprep->bind_param('ss', $usuario, $senha);
As duas '?' esperam ser trocadas por valores do tipo string, por coloco os 'ss', um 's' para cada interrogação e em seguida coloco as variáveis, separadas por vírgula, que contém os valores que substituirão as '?'.
$cmdprep->bind_param('ss', $usuario, $senha);
Agora é executar a query.
$cmdprep->execute();
Existem várias formas de receber o valor retornado do banco de dados, eu vou utilizar a função bind_result() para esse caso. Essa função diz para o PHP onde ele deve armazenar os valores retornas do banco quando a função fetch() for executada. No meu caso ele vai colocar o valor retornado na variável $nome.
$cmdprep->bind_result($nome);
Agora executo o fetch() para que caso ele tenha achado o usuário com os dados informados ele coloque o nome achado na variável informada no bind_result(), no caso $nome. O fetch() está dentro de um if porque caso não seja encontrado o usuário com os valores informados o fetch() retornará false, fazendo com que os comandos no else sejam executado.
if($cmdprep->fetch()) {
$retorno['codresp'] = '000';
$retorno['msg'] = $nome;
session_start();
$_SESSION['logado'] = true;
$_SESSION['nome'] = $nome;
}
else {
$retorno['codresp'] = '001';
$retorno['msg'] = 'Login inválido';
}
Caso o fetch() execute com sucesso, o que significa que encontrou o email e a senha, eu coloco o valor "000" no array $retorno para o índice "codresp" para indicar que o login foi realizado com sucesso, coloco o o nome achado do usuário também no array $retorno no índice "msg".
É importante lembrar que algumas páginas no site só poderão ser acessadas se o usuário estiver logado. Para que outras páginas possam saber se o usuário está logado eu criei uma variável de sessão de nome "logado" e coloquei o falor true nela.
Para criarmos uma variável de sessão antes precisamos iniciar a cessão.
session_start();
Depois atribuímos um valor à nossa variável de sessão.
$_SESSION['logado'] = true;
Também guardo na sessão o nome do usuário, assim qualquer página poderá mostrar o nome do usuário.
$_SESSION['nome'] = $nome;
Agora, se o fetch falhar, ou seja, não encontrar o usuário, então vamos fazer o código de resposta ser "001" e a mensagem de retorno igual "Login inválido".
$retorno['codresp'] = '001';
$retorno['msg'] = 'Login inválido';
Depois de tudo feito podemos devolver para a página o resultado de nossa execução. O Ajax executado pela página espera receber uma estrutura JSON e por isso executamos a função json_encode() e um array para transformar o array em uma estrutura JSON.
echo json_encode($retorno);
O Logoff
O logoff deixarei por sua conta mas darei umas dicas.
Bote um botão, ou uma div ou uma imagem, perto do nome do usuário na sua página, para que seja pressionada pelo usuário. Quando ele for pressionado é porque o usuário quer fazer o logoff da página. Semelhante ao login você irá realizar uma operação Ajax para executar um programa PHP para realizar o logoff, pode ser um nome como fazLogoff.php.
Se o Ajax for realizado com sucesso você esconde a div com o nome e o botão, e depois mostra a div com os campos para login.
No lado do servidor você irá criar o programa PHP dito anteriormente. Ele deverá iniciar a sessão e depois colocar o valor false na variável de sessão "logado" e vazio na variável de sessão "nome". Depois retornar o JSON com codresp igual a "000" e "msg" igual a "Logoff realizado com sucesso".
Muito bem galera, ficou extenso mas ficou chupetinha.
É isso. Espero ter ajudado. Um forte abraço.
