Você está na página 1de 14

PHP | LOJA VIRTUAL SIMPLES

PHP | LOJA VIRTUAL SIMPLES


● No projeto vamos criar uma loja (bem)
simples, o projeto permitirá praticar o
conteúdo trabalhado até agora. O resultado
final será como a imagem ao lado;
● Crie a pasta uploads e coloque 3 imagens
para as camisas;
● Crie a pasta css e dentro dela o style.css;
● Crie também as pastas images e config;
● Faça o arquivo index.php e no início da
página criaremos um php e faremos um
array de camisas e dentro do array
chamaremos os nomes (names), as imagens
(image) e os preços (price);
● Vamos criar um var_dump e carregar os <?php
valores do array para ver se está certo o
nosso código; $camisas = array(
● Salve a página e abra no navegador; ['name' => 'camisa 01', 'image' => 'uploads/tb-img-01.jpg', 'price' => '55.9'],
● Estando Ok apague o var_dump. ['name' => 'camisa 02', 'image' => 'uploads/tb-img-02.jpg', 'price' => '45.9'],
['name' => 'camisa 03', 'image' => 'uploads/tb-img-03.jpg', 'price' => '65']
);
var_dump($camisas);
?>
PHP | LOJA VIRTUAL SIMPLES
● Crie o html após o php; <body>
● Link com o boostrap e o com os ícones; <nav class="navbar navbar-light bg-danger">
● Link com o seu css, aplique o flaticon e <div class="container">
mude o Título (title); <a class="navbar-brand" href="#">
● Dentro do body faça a chamada para a tag <img src="images/store.png" alt="" width="50" height="50"
semântica nav e aplique as classes navbar, class="d-inline-block align-text-top">
navbar-light e bg-danger; </a>
● Baixe uma imagem para representar a logo </div>
do site e salve numa pasta com o nome de </nav>
images;
● Crie uma div com a classe container; </body>
● dentro da div criada, aplique um link (a)
com a classe navbar-brand e linque para o
“#”;
● Chame a imagem da marca dentro da div,
com uma largura e altura iguais a 50 pixels;
● Salve e teste no navegador.
PHP | LOJA VIRTUAL SIMPLES
● Após a barra de navegação, crie uma div para receber os <div class="card-group text-center container">
cards na estrutura de grupo, com o conteúdo centralizado <div class="card">
e limitado a largura da página, para isso aplique as classes <img src="uploads/tb-img-01.jpg" class="card-img-top" alt="...">
card-group, text-center e container; <div class="card-body">
● dentro da div, crie uma nova div e aplique a classe card, <h5 class="card-title">Camisa 01</h5>
dentro da div insira uma a primeira imagem e aplique a <p class="card-text">R$ 49,90</p>
classe card-img-top para deixar a imagem no topo; <a href="#" class="btn btn-warning">COMPRAR</a>
● Após a imagem aplique uma nova div, agora aplique a </div>
classe card-body para organizar o conteúdo do card. Na div ...
podemos aplicar o nome dos produtos, uma breve
descrição, preço e outros;
● Dentro da div aplique um título 5 com a classe card-title;
● Após o título aplique um parágrafo com a classe card-text
e digite os valores dentro da tag;
● Abaixo do título faremos o botão de comprar usando o link
(a) com a classe btn e a btn-warning para deixar o botão
com a cor amarela, dentro do link aplique o texto
“COMPRAR”;
● Repita o procedimento para as outras camisas, salve e
teste no navegador.
Obs.: Mais adiante a estrutura deverá ser carregada de forma
dinâmica, chamando os produtos do Banco de Dados usando um
laço de repetição e o select.
PHP | LOJA VIRTUAL SIMPLES
● Agora vamos substituir o html pelo php para chamar o <div class="card-group text-center container">
array via foreach; <?php foreach($camisas as $key => $value): ?>
● Como o que deve entrar no laço é a div com a classe card, <div class="card">
pois ela que contém cada elemento individualmente, abra <img src="<?= $value['image'] ?>" class="card-img-top" alt="...">
o foreach antes e após a div, chamando a classe camisa <div class="card-body">
como uma chave e que deverá receber um valor. Deverá <h5 class="card-title"><?= $value['name'] ?></h5>
ficar apenas uma div com a classe card; <p class="card-text"><?= $value['price'] ?></p>
● Substitua os elementos que deverão ser carregados do <a href="#" class="btn btn-warning">COMPRAR</a>
array com uma tag curta de php e seus respectivos valores; </div>
● Salve e teste para ver se os elementos serão carregados </div>
corretamente. <?php endforeach; ?>
PHP | LOJA VIRTUAL SIMPLES
● Vamos trabalhar a compra do produto; <?php
● Primeiro passo será guardar as sessões do usuário, então session_start();
coloque no começo da página a informação de início de
sessão; $camisas = array(
● Depois aplique no link do botão comprar um valor para a
palavra comprar recebendo a chave (key) do item; …
● Salve a página, abra o navegador, coloque o cursor sobre
os botões e verifique se faz a chamada do id (não precisa <div class="card-body">
clicar). <h5 class="card-title"><?= $value['name'] ?></h5>
<p class="card-text"><?= $value['price'] ?></p>
<a href="?comprar=<?php echo $key ?>" class="btn
btn-warning">COMPRAR</a>
</div>
PHP | LOJA VIRTUAL SIMPLES
● Abaixo da div dos card-group, crie uma nova div e aplique <div class="container">
a classe container; <?php
● Dentro da div crie um php e aplique a função se existir if(isset($_GET['comprar'])){
(isset) o valor comprar, onde a variável idCamisa receberá $idCamisa = (int) $_GET['comprar'];
o valor do comprar chamado através do GET; }
?>
</div>
PHP | LOJA VIRTUAL SIMPLES
● Dentro do if criado, faremos um novo if para verificar se <div class="container">
existe um produto do estoque, no caso não iremos <?php
comprar com um valor vindo do estoque, mas iremos if(isset($_GET['comprar'])){
simular com o valor de um id cadastrado. Assim criaremos $idCamisa = (int) $_GET['comprar'];
se existe uma variável de camisas com um identificador de if(isset($camisas[$idCamisa])){
camisas iremos imprimir “Produto no estoque”, senão “O echo "Produto no estoque";
produto não está mais no estoque”; }else{
● Salve a página, teste no navegador clicando nos botões echo "O Produto não está mais no estoque";
para ver se aparece a mensagem de “Produto no estoque”, }
agora na barra de endereço troque o valor do id por um }
valor fora do estoque e observe se a mensagem vai mudar. ?>
</div>
PHP | LOJA VIRTUAL SIMPLES
● Apague o echo "Produto no estoque" e <?php
coloque mais um se existir uma sessão com if(isset($_GET['comprar'])){
o valor “buy” com o identificador da $idCamisa = (int) $_GET['comprar'];
camisa, que processa uma sessão com o if(isset($camisas[$idCamisa])){
identificador da camisa e cria uma if(isset($_SESSION['buy'][$idCamisa])){
quantidade (quant) que deverá ser $_SESSION['buy'][$idCamisa]['quant']++;
incrementada (++), ou seja, vai adicionando }else{
a quantidade sempre que existir uma nova $_SESSION['buy'][$idCamisa] = array('quant'=>1,
sessão com valor buy. Para o senão, será 'name'=>$camisas[$idCamisa]['name'], 'price'=>$camisas[$idCamisa]['price']);
criada uma sessão com valor “buy” que }
deverá ser criada fazendo referência a um echo '<script>alert("Camisa adicionada no carrinho")</script>';
identificador da camisa que recebe um }else{
array onde a quantidade (quant) começa die("O Produto não está mais no estoque");
com o valor de 1, o nome (name) e o preço }
(price) do produto; }
● Após o if adicione um echo chamando um ?>
script com um alerta para o texto "Camisa
adicionada no carrinho" ->
'<script>alert("Camisa adicionada no
carrinho")</script>';
● Troque o echo pela função die na opção
produto não está mais no estoque;
● Salve no navegador e teste clicando nos
botões para verificar se vai gerar o alerta.
PHP | LOJA VIRTUAL SIMPLES
● Vamos criar um foreach para realizar a compra do nosso carrinho, após o primeiro if criado anteriormente, crie um título 2 e escreva
“Carrinho :”. O título ficará após a lista de produtos;
● Após o título, faça um novo foreach onde a sessão com o valor comprar (buy), como uma chave e apontando um valor;
● Crie um eco imprimindo o valor do nome como teste, salve a página e teste no navegador, verifique se o nome dos produtos serão
impressos na tela;
● Estando Ok, chame a quantidade e o valor do produto.

<h2>Carrinho: </h2>

foreach ($_SESSION['buy'] as $key => $value){


echo '<p>Nome: '.$value['name'].'| Quant.:'.$value['quant'].' | Valor: R$'.$value['price']*$value['quant'].': ';
}
PHP | LOJA VIRTUAL SIMPLES
● Agora vamos apresentar os dados apenas com a sessão “buy” criada. Faça um se existir para uma sessão com valor “buy” e coloque o
foreach dentro do if, no else coloque um echo chamando o texto “O carrinho está vazio!”;

<?php
if(isset($_SESSION['buy'])){
foreach ($_SESSION['buy'] as $key => $value){
echo '<p>Nome: '.$value['name'].'| Quant.:'.$value['quant'].' | Valor: R$'.$value['price']*$value['quant'].': ';
echo "<br>";

}
}else{
echo "O carrinho está vazio!";
}
?>
PHP | LOJA VIRTUAL SIMPLES
● Vamos criar um botão para limpar o carrinho. Após o último php criado, aplique um parágrafo e dentro dele faça um link (a)
apontando para “?limpar”, com as classes btn e btn-secondary para deixar com estilos do boostrap e na cor cinza;
● No topo da página crie um se existir lendo um get com o valor do botão (limpar), dentro do if aplique a função unset do php para
destroi a variável com a sessão de valor buy;
● Salve o arquivo e teste no navegador.

<?php
session_start();
if(isset($_GET['limpar'])){
unset($_SESSION['buy']);//unset -> Destrói a variável especificada
}

}else{
echo "O carrinho está vazio!";
}
?>
<p><a href="?limpar" class="btn btn-secondary">LIMPAR CARRINHO</a></p>
PHP | LOJA VIRTUAL SIMPLES
● Agora faremos com que seja calculado o valor total dos produtos e de itens do carrinho, para isso criaremos uma variável do tipo array
que deverá receber o valor inicial para quants e price como 0;
● Depois iniciaremos um comando se existir uma sessão “buy”, dentro do se aplique um para cada (foreach) carregando a sessão “buy”
como uma chave;
● O foreach (para cada) deverá chamar a variável total com o valor “quants” que receberá a variável total somado a variável “key” que
recebeu o valor da quantidade, repita o procedimento para o prices, multiplicando a variável “key” price com a variável key “quant”
para obter o valor final do produto quando for escolhida mais de um produto;
● Salve o arquivo e teste no navegador.

$total = [
'quants' => 0,
'prices' => 0
];
if(isset($_SESSION['buy']))
foreach ($_SESSION['buy'] as $key) {
$total['quants'] = $total['quants'] + $key['quant'];
$total['prices'] = $total['prices'] + $key['price'] * $key['quant'];
}
echo $total['quants'] . ' produtos por R$ ' . $total['prices'];

Você também pode gostar