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.