Sistema de Vendas Online – Parte 1
Na 1º parte deste artigo vou abordar a construção de um carrinho para sistema de vendas online, iremos usar 2 tabelas MySQL. Uma chamada ‘carrinho’ onde ficaram os itens adicionados e a tabela ‘compras’ onde ficaram os registros das compras efetuadas no site, salientando que um registro da tabela compras poderá estar ligado a vários registros na tabela carrinho através de uma chave estrangeira. Usaremos o PHP para a lógica do sistema e um pouco de JavaScript para efetuarmos adição de itens, remoção, e recalculo de valores. Este sistema utilizará ainda tabela dos produtos e a de clientes que ficam a critério do usuário sua implementação, neste exemplo estou usando o PHP SESSION para gravar os dados do cliente.
Como neste artigo iremos precisar usar conexões com o BD e requisições JSON, é interessante que você leia:
http://www.botecodigital.info/php/exemplo-de-autenticacao-parte-1/
http://www.botecodigital.info/jquery/trocando-dados-utilizando-json/
Bom, vamos a prática. Começaremos criando as tabelas no BD:
Tabela ‘carrinho’:
CREATE TABLE IF NOT EXISTS `carrinho` ( `cod_compra` int(8) NOT NULL, `cod_produto` int(8) NOT NULL, `unidades_vendidas` int(8) NOT NULL, `data_insercao` date NOT NULL, `hora_insercao` time NOT NULL );
Tabela ‘compras’:
CREATE TABLE IF NOT EXISTS `compras` ( `cod_compra` int(8) PRIMARY KEY AUTO_INCREMENT NOT NULL, `cod_cliente` int(8) NOT NULL, `forma_pgto` varchar(15) NOT NULL, `parcelamento` int(2) NOT NULL, `valor_liquido` varchar(10) NOT NULL, `valor_bruto` varchar(10) NOT NULL, `taxas` varchar(10) NOT NULL, `status` varchar(10) NOT NULL, `org_cancelamento` varchar(20) NOT NULL );
Adição de itens no carrinho:
Para adicionarmos no carrinho um item usaremos o código do produto e a quantidade itens.
<input type='hidden' name='cod_produto' id='cod_produto' value='001'> <label>Quantiade de produtos:</label> <input type='number' name='quantidade' id='quantidade'> <input type='button' id='adicionar' value='Adicionar ao Carrinho'> <input type='button' id='excluir' value='Excluir do Carrinho'> <input type='button' id='visualizar' value='Visualizar Carrinho'>
Código simples com o código do produto oculto, campo para digitação da quantidade de itens e botão que acionará nosso Javascript, temos também o botão de excluir e visualizar que esconderemos via Javascript.
Javascript:
$(document).ready(function(){
$("#excluir").hide('fast');
$("#visualizar").hide('fast');
$("#adicionar").click(function(){
var cod_produto = $("#cod_produto").val();
var quantidade = $("#quantidade").val();
$.getJSON('adicionar_carrinho.php?cod_produto_quantidade='+cod_produto+'@'+quantidade, function(retorno){
if(retorno[0].resposta == 'inseriu'){
alert('O produto foi inserido em seu carrinho.');
$("#quantidade").hide('fast');
$("#adicionar").hide('fast');
$("#excluir").show('fast');
$("#visualizar").show('fast');
}else{
if(retorno[0].resposta == 'jainserido'){
alert('Produto já inserido no carrinho!');
$("#quantidade").hide('fast');
$("#adicionar").hide('fast');
$("#excluir").show('fast');
$("#visualizar").show('fast');
}else{
alert('O produto não foi inserido!');
}
}
});
});
$("#excluir").click(function(){
var cod_produto = $("#cod_produto").val();
$.getJSON('exclui_carrinho.php?cod_produto='+cod_produto, function(retorno){
if(retorno[0].resposta == 'excluiu'){
alert('O produto foi excluido de seu carrinho.');
$("#quantidade").show('fast');
$("#adicionar").show('fast');
$("#excluir").hide('fast');
$("#visualizar").hide('fast');
}
});
});
$("#visualizar").click(function(){
window.open('carrinho.php','_blank');
});
});
Explicando o código acima: Começamos escondendo os elementos com id ‘excluir’ ou ‘visualizar’ através do método hide(). Depois na linha 4 criamos uma função que será acionada quando o botão adicionar for clicado. Nas linha 5 e 6 gravamos nas variáveis 'cod_produto‘ e 'quantidade' a valor dos campos 'cod_produto' e 'quantidade'.
Enviamos via GET o cod_produto e quantidade separados por um '@' para o arquivo ‘adicionar_carrinho.php‘ através do $.getJSON. Criamos a função retorno e verificamos na linha 8 se o JSON retornou dentro da variável resposta o valor ‘inseriu’ se sim escondemos os elementos com ids ‘adicionar’ e ‘quantidade’ e mostramos os elementos com ids ‘excluir’ e ‘visualizar’, também exibimos para o usuário uma mensagem de sucesso através do alert(). Se não, verificamos se a reposta não foi ‘jainserido’, se for exibimos a mensagem dizendo que o produto já está inserido, escondemos os elementos com ids ‘quantidade’ e ‘adicionar’ e exibe os elementos com ids ‘excluir’ e ‘visualizar’. Caso o retorno seja diferente de ‘inseriu’ ou ‘jainserido’ exibimos a mensagem avisando que não foi possível inserir o produto.
Na linha 27 criamos uma função que será acionada quando clicarmos no elemento com id ‘excluir’. Na linha 28 fazemos o mesmo procedimento que na função anterior mas agora so gravamos na variável o código do produto, pois para excluir não precisaremos da quantidade. Enviamos novamente via GET através do $.getJSON para a página ‘exclui_carrinho.php‘ a variável cod_produto. Na linha 30 verificamos se o retorno foi ‘excluiu’, se sim, mostramos os elementos com ids ‘adicionar’ e ‘quantidade’, escondemos os elementos com ids ‘excluir’ e ‘visualizar’ e exibimos a mensagem de sucesso. Na linha 39 criamos uma função que será acionada quando o elemento ‘visualizar’ for clicado. Essa função irá abrir a página do carrinho em uma nova janela através do método window.open().
Agora vamos criar as páginas em php:
adicionar_carrinho.php
<?php
include('conf.php');
session_start();
$parametro_recebido = $_GET['cod_produto_quantidade'];
$parametro_dividido = explode('@', $parametro_recebido);
$cod_produto = $parametro_dividido[0];
$quantidade = $parametro_dividido[1];
$data = date('Y/m/d');
$hora = date('H:i:s');
$consulta_compra_aberta = mysql_query("SELECT cod_compra FROM compras WHERE cod_cliente = '".$_SESSION['cod_cliente']."' AND status = 'aberta'");
$resultado_compra_aberta = mysql_num_rows($consulta_compra_aberta);
$resposta = "";
if($resultado_compra_aberta == 0){
$insere_compra = mysql_query("INSERT INTO compras(cod_cliente, status) VALUES ('".$_SESSION['cod_cliente']."', 'aberta')");
$consulta_cod_compra = mysql_query("select cod_compra from compras where status='aberta' and cod_cliente = ".$_SESSION['cod_cliente']);
$row = mysql_fetch_array($consulta_cod_compra);
$cod_compra = $row['cod_compra'];
$insere_produto = mysql_query("INSERT INTO carrinho(cod_compra, cod_produto, unidades_vendidas, data_insercao, hora_insercao) VALUES ('$cod_compra', '$cod_produto', '$quantidade', '$data', '$hora')");
if($insere_compra && $insere_produto){
$resposta .= "inseriu";
}
}else{
$row = mysql_fetch_array($consulta_compra_aberta);
$cod_compra = $row['cod_compra'];
$consulta_produto_inserido = mysql_query("select cod_produto from carrinho where cod_compra = ".$cod_compra." and cod_produto = ".$cod_produto);
$produto_inserido = mysql_num_rows($consulta_produto_inserido);
if($produto_inserido == 0){
$insere_produto = mysql_query("INSERT INTO carrinho(cod_compra, cod_produto, unidades_vendidas, data_insercao, hora_insercao) VALUES ('$cod_compra', '$cod_produto', '$quantidade', '$data', '$hora')");
if($insere_produto){
$resposta .= "inseriu";
}
}else{
$resposta .= "jainserido";
}
}
$respostaJSON = Array(
array(
"resposta"=>"".$resposta.""
));
echo json_encode($respostaJSON);
?>
Na linha 2 incluímos o arquivo ‘conf.php‘ que faz a conexão com o banco de dados. Na linha 5 atribuímos a variável ‘$parâmetro_recebido‘ o valor recebido via GET. Depois na linha 6 separamos o que esta antes e depois do @ gravando o resultado de antes do @ em ‘$parametro_dividido[0]‘ e o que vier depois em ‘$parametro_dividido[1]‘. Atribuímos os resultados as variáveis ‘$cod_produto‘ e ‘$quantidade‘. Nas linhas 9 e 10 usamos o método date() para pegar a data e a hora. Na linha 12 efetuamos uma consulta para verificar se há algum registro na tabela compras com o código do cliente e com status igual a ‘aberta’. Usamos o método mysql_num_rows() para contar o número de registros retornados.
Usamos um if para verificar se o resultado é 0, caso seja, inserimos na tabela compra um registro com o código do cliente e status igual a ‘aberta’. Na linha 19 atribuímos a variável ‘$cod_compra‘ o valor consultado na linha 17, que no nosso caso é o cod_compra. Depois inserimos na tabela ‘carrinho’ o(s) item(s) usando cod_compra que fará a relação com a tabela compra, o código do produto, a quantidade, a data e a hora. Na linha 21 verificamos se as inserções ocorram com sucesso, se sim, atribuímos a variável resposta o valor ‘inseriu’.
Na linha 24 temos o else que executará caso o valor retornado da primeira consulta seja diferente de 0. Usamos o mysql_fetch_array para pegar os resultados da consulta. Depois na linha 26 gravamos na variável ‘$cod_compra‘ o valor retornado para o campo ‘cod_compra‘. Na linha 27 fizemos uma consulta para verificar se este produto já foi inserido nesta compra, se não, efetuamos a inserção no carrinho da mesma forma como fizemos dentro do if. Verificamos se a inserção funcionou, se sim, gravamos na variável ‘resposta’ o valor ‘inseriu’. Se sim gravamos na variável ‘resposta’ o valor ‘jainseriu’. Na linha 39 criamos a variável ‘$respostaJSON‘ a qual usaremos para enviar a resposta no formato de JSON. Na linha 44 usamos o método json_encode() para retorna a resposta.
exclui_carrinho.php
<?php
include('conf.php');
session_start();
$cod_produto = $_GET['cod_produto'];
$consulta_cod_compra = mysql_query("SELECT cod_compra FROM compras WHERE cod_cliente='".$_SESSION['cod_cliente']."' AND status='aberta'");
$row = mysql_fetch_array($consulta_cod_compra);
$cod_compra = $row['cod_compra'];
$deleta_registro = mysql_query("DELETE FROM carrinho WHERE cod_compra=".$cod_compra." AND cod_produto =".$cod_produto);
$resposta = '';
if($deleta_registro){
$resposta .= 'excluiu';
}
$respostaJSON = Array(
array(
"resposta"=>"".$resposta.""
));
echo json_encode($respostaJSON);
?>
Na linha 5 gravamos na variável ‘$cod_produto‘ o valor recebido via GET. Na linha 6 efetuamos uma consulta para pegar o cod_compra. Gravamos o resultado na variável ‘$cod_compra‘. Na linha 9 deletamos o registro da tabela carrinho que possuir o código da venda igual ao consultado e código do produto igual ao recebido via GET. Na linha 12 verificamos se deletou, se sim, atribuímos a variável $resposta o valor ‘excluiu’. Geramos a resposta no formato de JSON e retornamos a resposta através do método json_encode.
carrinho.php
<table>
<tr>
<td>Produto</td>
<td>Preço Un.</td>
<td>Quantidade</td>
<td>Preço Total</td>
<td>Excluir</td>
<td>Atualizar</td>
</tr>
<?php
session_start();
$consulta_compra = mysql_query("SELECT cod_compra FROM compras WHERE cod_cliente='".$_SESSION['cod_cliente']."' AND status='aberta'");
$resulatdo_consulta_compra = mysql_num_rows($consulta_compra);
if($resulatdo_consulta_compra == 0){
echo "<tr><td colspan='4'>O carrinho encontra-se vazio! </td</tr>";
}else{
$row = mysql_fetch_array($consulta_compra);
$cod_compra = $row['cod_compra'];
$preenche_carrinho = mysql_query("SELECT carrinho.cod_produto, carrinho.unidades_vendidas, produtos.nome, produtos.preco FROM carrinho, produtos WHERE carrinho.cod_compra = ".$cod_compra." AND carrinho.cod_produto = produtos.id");
$resultado_consulta_carrinho = mysql_num_rows($preenche_carrinho);
if($resultado_consulta_carrinho == 0){
echo "<tr><td colspan='4'>O carrinho encontra-se vazio! </td</tr>";
}else{
$total = 0;
$i = 1;
while($dados = mysql_fetch_array($preenche_carrinho)){
$preco_total = $dados['preco']*$dados['unidades_vendidas'];
echo "<tr><span><td>".$dados['nome']."</td><td>".$dados['preco']."</td><td><input type='hidden' id='linha".$i."' name='linha".$i."' value='".$dados['cod_produto']."'><input type='number' id='quantidade".$i."' name='quantidade".$i."' value='".$dados['unidades_vendidas']."'></td><td>".$preco_total."</td><td><input type='button' onclick='excluir(\"linha".$i."\")' value='Excluir'></td><td><input type='button' onclick='atualizar(\"linha".$i."\", \"quantidade".$i."\")' value='Atualizar'></td></span></tr>";
$total += $preco_total;
$i++;
}
echo "<tr><td colspan='4'>Total: ".$total." </td</tr>";
}
}
?>
</table>
Na nossa página de visualização do carrinho usaremos uma tabela , então criamos o seu cabeçalho em HTML. Na linha 12 efetuamos uma consulta para verificar se algum registro com o status ‘aberta’ para este cliente. Na linha 13 usamos o método mysql_num_rows() para contar o número de registros retornados. Verificamos se é igual a 0, se sim, exibimos ‘O seu carrinho encontra-se vazio’. Caso contrario na linha 17 usamos o método mysql_fetch_array() para pegar o resultado. Na linha 18 gravamos na variável ‘$cod_compra‘ o valor retorno do campo cod_compra. Efetuamos uma consulta em duas tabelas na linha 19, onde selecionamos na tabela ‘carrinho’ o cod_produto e unidades_vendidas e na tabela ‘produtos’ o nome e o preço, quando o campo cod_compra for igual ao valor armazenado na variável ‘$cod_compra‘ e quando o cod_produto da tabela carrinho for igual ao id da tabela produtos. Contamos os resultados desta consulta e verificamos se é igual a 0, caso seja, exibimos ‘O seu carrinho encontra-se vazio’.
Se não, criamos as variáveis ‘total‘ que armazenará o valor total de todos os itens e a variável ‘i’ que contara as linhas para que depois possamos atualizar o carrinho. Na linha 26 criamos um while que executara enquanto tivermos dados vindos da nossa consulta ao carrinho. Na linha 27 calculamos o preço total de cada item, sendo o preço da unidades * quantidade comprada. Na linha 28 exibimos os resultados no formato de linha divido pelas colunas, tag span com o id='linha".$i."' é importante, pois através dele que localizaremos o cod_produto para que possamos alterar a quantidade ou excluir o produto. Usamos o evento onclick='atualizar(\"linha".$i."\")' ou onclick='excluir(\"linha".$i."\")' para enviar a função javascript o id, que será o mesmo que o gerado no id do span. E usamos $dados['nome_do_campo'] para pegar os dados resultados na consulta SQL. Na linha 28 usamos 0 ‘+=’ para somar na variável ‘$total’ o preço total de um produto. Na linha 32 exibimos o valor total de todos os itens do carrinho.
Função Javascipt da página ‘carrinho.php’.
function atualizar(linha, quantidade){
var codigo = document.getElementById(linha).value;
var quantidade = document.getElementById(linha).value;
$.getJSON('atualizar_carrinho.php?cod_produto_quantidade='+cod_produto+'@'+quantidade,function(retorno){
if(retorno[0].resposta == 'atualizou'){
alert('Carrinho atualizado com sucesso!');
document.location.reload(true);
}else{
alert('Não foi possível atulizar o carrinho!');
}
});
}
function excluir(linha){
var codigo = document.getElementById(linha).cod_produto.value;
$.getJSON('exclui_carrinho.php?cod_produto='+cod_produto, function(retorno){
if(retorno[0].resposta == 'excluiu'){
document.location.reload(true);
}
});
}
Neste código temos as funções ‘excluir’ e ‘atualizar’ que serão acionadas pelo método onclick(). Na linha 2 e 3 gravamos respectivamente dentro das variáveis código e quantidade o valor que estiver dentro dos elementos com Id’s cod_produto e quantidade que por sua vez estiverem dentro do elemento com id recebido do método onclick. Usamos o mesmo procedimento das outras funções para enviar os dados. Na linha 7 usamos o método document.location.reload() para recarregar a página. A função excluir segue a mesma lógica da função atualizar.
atualizar_carrinho.php
<?php
include('conf.php');
session_start();
$parametro_recebido = $_GET['cod_produto_quantidade'];
$parametro_dividido = explode('@', $parametro_recebido);
$cod_produto = $parametro_dividido[0];
$quantidade = $parametro_dividido[1];
$consulta_cod_compra = mysql_query("SELECT cod_compra FROM compras WHERE cod_cliente='".$_SESSION['cod_cliente']."' AND status='aberta'");
$row = mysql_fetch_array($consulta_cod_compra);
$cod_compra = $row['cod_compra'];
$atualiza_registro = mysql_query("UPDATE carrinho SET unidades_vendias=".$quantidade." WHERE cod_compra=".$cod_compra." AND cod_produto =".$cod_produto);
$resposta = '';
if($atualiza_registro){
$resposta .= 'atualizou';
}
$respostaJSON = Array(
array(
"resposta"=>"".$resposta.""
));
echo json_encode($respostaJSON);
?>
Esse código funciona como o de excluir itens, porém atualiza a quantidade de produtos através do comando UPDATE na linha 13, se atualizar, devolve a resposta atualizou.
Por hoje é isso pessoal. Até a segunda parte deste Artigo.