Programação,Tutoriais - 19 de janeiro de 2017

Implementando a Integração entre PHP + jQuery + jSon

Hoje estou postando um vídeo tutorial para quem ainda não conhece jSon, poder entender o funcionamento básico do compartilhamento de dados usando essa tecnologia.Como base, usaremos o PHP e o jQuery (ótima biblioteca Javascript).

Claro que por se tratar de um vídeo não é tão fácil ficar acompanhando o código. Por isso mesmo, estamos disponibilizando aqui o código para que você possa entender.

Aproveite e deixe um comentário aqui em baixo, ou no YouTube e assine o nosso canal!

Script para criar a tabela no postgres:

CREATE TABLE jogos
(
id serial NOT NULL,
nome text,
console text,
preco numeric(10,2)
)

dados.php:

/**
 * Tutorial jSON
 */

//Definir formato de arquivo
 header('Content-Type:' . "text/plain");

$host = "localhost"; // IP do Banco
 $user = "postgres"; // Usuário
 $pswd = "postgres"; // Senha
 $dbname = "tutoriais"; // Banco
 $con = null; // Conexão

$con = @pg_connect("host=$host user=$user password=$pswd dbname=$dbname") or die (pg_last_error($con));

//@pg_close($con); //Encerrrar Conexão

if(!$con) {
 echo '[{"erro": "Não foi possível conectar ao banco"';
 echo '}]';
 }else {
 //SQL de BUSCA LISTAGEM
 $sql = "SELECT * FROM jogos ORDER BY console";
 $result = pg_query($sql); //Executar a SQL
 $n = pg_num_rows($result); //Número de Linhas retornadas

if (!$result) {
 //Caso não haja retorno
 echo '[{"erro": "Há algum erro com a busca. Não retorna resultados"';
 echo '}]';
 }else if($n<1) {
 //Caso não tenha nenhum item
 echo '[{"erro": "Não há nenhum dado cadastrado"';
 echo '}]';
 }else {
 //Mesclar resultados em um array
 for($i = 0; $i<$n; $i++) { $dados[] = pg_fetch_assoc($result, $i); } echo json_encode($dados, JSON_PRETTY_PRINT); } } ?>

index.html:

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="UTF-8">
		<link rel="icon" type="favicon.png" />
		<link rel="stylesheet" type="text/css" href="estilo.css">
		
		<!--jQuery-->
		<script src="https://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
		<!--Script-->
		<script src="script.js" type="text/javascript"></script>
		
		
	</head>
	<body onload="carregarItens()">
		<section>
			<h1>PortilloDesign Tutorial JSON + PHP</h1>
			<!--Área que mostrará carregando-->
			<h2></h2>
			<!--Tabela-->
			<table id="minhaTabela">
				<caption>Cadastro de Jogos</caption>
				<thead>
					<th>ID</th>
					<th>Jogo</th>
					<th>Console</th>
					<th>Valor</th>
				</thead>
				<tbody>
				</tbody>
			</table>
		</section>
	</body>
</html>

script.js:

/**
* Capturar itens do banco de dados
*/
function carregarItens(){
	//variáveis
	var itens = "", url = "dados/dados.php";

    //Capturar Dados Usando Método AJAX do jQuery
    $.ajax({
	    url: url,
	    cache: false,
	    dataType: "json",
	    beforeSend: function() {
		    $("h2").html("Carregando..."); //Carregando
	    },
	    error: function() {
		    $("h2").html("Há algum problema com a fonte de dados");
	    },
	    success: function(retorno) {
		    if(retorno[0].erro){
			    $("h2").html(retorno[0].erro);
		    }
		    else{
			    //Laço para criar linhas da tabela
			    for(var i = 0; i<retorno.length; i++){
				    itens += "<tr>";
				    itens += "<td>" + retorno[i].id + "</td>";
				    itens += "<td>" + retorno[i].nome + "</td>";
				    itens += "<td>" + retorno[i].console + "</td>";
				    itens += "<td>" + retorno[i].preco + "</td>";
				    itens += "</tr>";
			    }
			    //Preencher a Tabela
			    $("#minhaTabela tbody").html(itens);
			    
			    //Limpar Status de Carregando
			    $("h2").html("Carregado");
		    }
	    }
    });
}

Rodrigo Portillo

Gosto tanto de design que aprendi programação e regras para garantir a estabilidade de meus projetos. Trabalho e trabalhei com desenvolvimento full-stack em diversas linguagens, como Flex, PHP, Java, Javascript, dentre outras. Ainda trabalhei alguns anos como designer gráfico e ilustrador.
Busque mais informaçoes pelo LinkedIn.

Velho Bit

Rodrigo Portillo