Utilizando JSON para Busca no Banco de Dados
23/08/2018Hoje aprenderemos como utilizar o PHP com MySql buscando os dados com ajax e tendo como resposta um json. Fique ligado!
Resposta em JSON utilizando PHP
Vamos criar nossa index um html5 simples com um formulário de pesquisa, da seguinte forma:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Escola</title>
</head>
<body>
<div class="resultadoForm">
<table>
<thead>
<tr>
<td>ID</td>
<td>NOME</td>
<td>NOTA</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<form name="formEscola" id="formEscola" method="post" action="controller/controllerEscola.php">
<input type="text" name="busca" id="busca"><br>
<input type="submit" value="Pesquisar">
</form>
<script src="lib/zepto.min.js"></script>
<script src="lib/javascript.min.js"></script>
</body>
</html>Repare que no código acima estamos linkando a biblioteca ZeptoJS e um arquivo externo javascript.min.js.
Vamos criar um banco de dados escola e uma tabela boletim com as colunas id, nome e nota, conforme código abaixo:
CREATE TABLE `boletim` (
`id` int(11) NOT NULL,
`nome` varchar(60) NOT NULL,
`nota` varchar(2) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
ALTER TABLE `boletim` ADD PRIMARY KEY (`id`);
ALTER TABLE `boletim` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
INSERT INTO `boletim` (`id`, `nome`, `nota`) VALUES
(1, 'Thiago', '10'),
(2, 'Thais', '9'),
(3, 'Rafael', '7'),
(4, 'Marina', '5');Posteriormente vamos criar nossa ClassConexao para acessar o banco de dados:
<?php
abstract class ClassConexao{
protected function conectaDB()
{
try{
$con=new PDO("mysql:host=localhost;dbname=escola","root","");
return $con;
}catch (PDOException $erro){
return $erro->getMessage();
}
}
}Criaremos também a ClassPesquisa:
<?php
include("ClassConexao.php");
class ClassPesquisa extends ClassConexao{
public function pesquisaDb($busca)
{
$buscaLike='%'.$busca.'%';
$crud=$this->conectaDB()->prepare("select * from boletim where nome like :nome");
$crud->bindValue(':nome',$buscaLike);
$crud->execute();
return $f=$crud->fetchAll();
}
}Nosso controller ficará responsável por instanciar a ClassPesquisa e chamar o método pesquisaDB() dando como retorno um echo json_encode.
<?php
include "../class/ClassPesquisa.php";
$busca=filter_input(INPUT_POST,'busca',FILTER_SANITIZE_SPECIAL_CHARS);
$pesquisa=new ClassPesquisa();
$retorno=$pesquisa->pesquisaDb($busca);
echo json_encode($retorno);O arquivo javascript.min.js ficará assim:
$('#formEscola').on('submit',function(event){
event.preventDefault();
var dados=$(this).serialize();
$.ajax({
url: 'controller/controllerEscola.php',
type: 'post',
dataType: 'json',
data: dados,
success: function(response){
$('.resultadoForm table tbody').empty();
$.each(response,function(key,value){
if(value.nota > 6){
$('.resultadoForm table tbody').append("<tr> <td>" + value.id + "</td> <td>" + value.nome + "</td> <td>" + value.nota + "</td> </tr> ");
}
});
}
});
});No código acima ao submeter o formulário enviamos os dados esperando como retorno o json. Por fim, adicionamos uma linha da tabela para cada resultado.
Bem simples né! Sucesso nos códigos e na vida!
Posts Relacionados
