JAMES WEB

Aprenda como se faz.

Sumário

Produtos CRUD (Listar)

No capítulo anterior, organizamos as prateleiras, ou melhor, as categorias dos nossos produtos. Agora, chegou a hora de colocar os produtos em si à venda.

Neste capítulo, vamos criar a área administrativa dos produtos, um painel de controle onde poderemos adicionar novos itens, atualizar informações, verificar o estoque e até mesmo remover produtos que não estão mais disponíveis. É como ter um escritório dentro da nossa loja, onde podemos gerenciar tudo de forma organizada e eficiente.

Para começar, vamos seguir um caminho parecido com o que já fizemos com as categorias. Vamos aprender a cadastrar, listar, editar e excluir produtos.

Aqui vamos preparar o ambiente para trabalhar como os produtos e habilitar a listagem dos mesmos.

categoria-tags

Arquivos par download:

Antes de começarmos a colocar a mão na massa, precisamos preparar o nosso ambiente de trabalho. Para isso, você vai precisar baixar os arquivos dos templates dos produtos, que estão disponíveis para download. Esses arquivos são como os moldes das páginas que vamos criar. Depois de baixar os arquivos, você vai precisar instalá-los no diretório correto: “C:\xampp\htdocs\ecommerce\views\admin”.

Menu produtos

Vamos dar um toque na nossa área administrativa, adicionando um link esperto no menu principal da página inicial. Assim, você terá acesso rápido à gestão de produtos.

Vá até o arquivo header.html, que fica em “C:\xampp\htdocs\ecommerce\views\admin”. É lá que o menu principal está guardado.

Dentro do arquivo, procure a parte onde o menu é montado. Você vai achar uma lista de itens (<ul> e <li>).

Adicione o link: Cole esta linha de código a seguir no meio dos outros itens do menu:

HTML:header.html
<li><a href=”/ecommerce/admin/products”><i class=”fa fa-link”></i>Produtos</span></a></li>

Essa linha cria um novo item no menu (<li>).

Dentro desse item, temos um link (<a>) que leva para a página de produtos. O ícone (<i class=”fa fa-link”>) é só um detalhe para deixar o menu mais charmoso. E o texto “Produtos” (<span>Produtos</span>) é o que aparece para o usuário. Após as mudanças, salve o arquivo header.html e pronto!

menu-produtos

Rota admin/products

Precisamos criar a rota “/ecommerce/admin/products” via get. Para isto, acesse o arquivo index.php em htdocs/ecommerce e acrescente a linha “require_once(“admin-products.php“);”.

A linha de código PHP require_once(“admin-products.php”); é uma instrução que tem como objetivo incluir o conteúdo de um arquivo externo, neste caso, “admin-products.php“, dentro do script PHP que a contém. Para compreendermos melhor essa ação, vamos analisar cada componente da linha:

Crie o arquivo admin-products.php dentro no diretório “htdocs/ecommerce”.

PHP: admin-products.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
 //Rotas Admin Products
use \Hcode\PageAdmin;
use \Hcode\Model\User;
use \Hcode\Model\Product;
 
//Rota Lista Produtos - Template products.html
$app->get('/admin/products', function() { 
    User::verifyLogin();
    $products = Product::listAll();
    $page = new PageAdmin();    
    $page->setTpl("products", [
        "products"=>$products
    ]);
  });
?>
  • Basicamente, as linhas de 3 a 5 “importam” ferramentas (classes) ‘PageAdmin’, ‘User’ e ‘Product’ já feitas para facilitar o trabalho.
    • ‘PageAdmin’, ajuda a montar páginas para o administrador.
    • ‘User’, lida com informações sobre os usuários.
    • ‘Product’, lida com informações sobre os produtos.
  • $app->get(‘/admin/products’, function() {:
    Aqui, estamos dizendo: ‘Quando alguém acessar o endereço ‘/admin/products‘ no site, faça o seguinte:
    • $app é como um “gerenciador” de endereços do site.
    • ->get() é um método desse objeto que define uma rota para requisições HTTP GET.
    • ‘/admin/products‘ é o caminho da URL que aciona essa rota.
    • function() { inicia uma função anônima (closure) que será executada quando a rota for acessada.
  • User::verifyLogin();:
    Esta linha chama o método estático verifyLogin() da classe User. Este método verifica se o usuário está autenticado e, se não estiver, redireciona-o para a página de login ou exibe um erro. Isto garante que apenas usuários logados possam acessar a página de produtos.
  • $products = Product::listAll();:
    Esta linha chama o método estático listAll() da classe Product. Este método busca todos os produtos do banco de dados e retorna um array ou objeto contendo todos os produtos do banco de dados, que é armazenado na variável $products.
  • $page = new PageAdmin();:
    Esta linha cria uma nova instância da classe PageAdmin e a armazena na variável $page. A classe PageAdmin é responsável por renderizar templates HTML para a área administrativa.
  • $page->setTpl(“products”, [:
    Esta linha chama o método setTpl() do objeto $page.
    • “products”: Este é o nome do template HTML que será renderizado (“products.html“).
    • [: Inicia um array associativo que contém os dados que serão passados para o template.
  • “products”=>$products:
    Esta linha adiciona um elemento ao array associativo. A chave “products” corresponde ao nome da variável que estará disponível no template, e o valor $products é o array de produtos obtido anteriormente.

Classe Product.php

A classe Product representa o modelo de dados para produtos no sistema. Ela fornece métodos para interagir com a tabela ‘tb_products’ no banco de dados, permitindo operações como listagem de todos os produtos.

Esta classe estende a classe Model base e utiliza a classe Sql para realizar consultas ao banco de dados. Além disso, ela está dentro do namespace Hcode\Model.

Neste ponto, a classe implementa o método estático listAll(), que retorna uma lista de todos os produtos ordenados por descrição.

No código anterior, “admin-producucts.php”, na linha 10 citamos a função “listAll()” da classe “Product.php”. Temos que criar este arquivo da classe Product.php no diretório “C:\xampp\htdocs\ecommerce\vendor\hcodebr\php-classes\src\model” e dentro dela criaremos o método “listAll” que busca todos os produtos do banco de dados e os retorna em uma lista ordenada.

PHP: Product.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
 
namespace Hcode\Model;
 
use \Hcode\DB\Sql;
use \Hcode\Model;
use \Hcode\Mailer;
 
class Product extends Model
{
    public static function listAll()
    {
        $sql = new Sql();
        return $sql->select("SELECT * FROM tb_products ORDER BY desproduct");
    }
 
?>

Veja como o código funciona linha por linha:

  • L3 – namespace Hcode\Model;:
    Imagine que ‘Hcode’ é uma pasta grande, e ‘Model’ é uma pasta dentro dela. Este código está dizendo que tudo o que vem a seguir pertence a essa ‘pasta’ específica, para organizar melhor o código.
  • L5 – use \Hcode\DB\Sql;:
    Estamos trazendo ferramentas de outras ‘pastas’ para usar aqui. Especificamente, estamos pegando a ferramenta ‘Sql‘ da ‘pasta‘ ‘Hcode/DB‘, que nos ajuda a conversar com o banco de dados.
  • L6 – use \Hcode\Model;:
    Estamos trazendo a ferramenta ‘Model‘ da pasta ‘Hcode‘, que é uma ferramenta base para criar outros modelos.
  • L7 – Use \Hcode\Mailer;:
    Estamos trazendo a ferramenta ‘Mailer’ da pasta ‘Hcode’, que nos permite enviar emails.
  • L9 – class Product extends Model:
    Estamos criando um ‘molde’ chamado ‘Product’ para representar um produto. Este molde é baseado em outro molde chamado ‘Model’, o que significa que ele herda algumas características dele.
  • L11 – public static function listAll():
    Dentro do ‘molde’ ‘Product’, estamos criando o ‘método’ chamado ‘listAll’. Essa método vai nos dar uma lista de todos os produtos. ‘Public’ significa que ela pode ser usada de fora deste ‘molde’, e ‘static’ significa que podemos usá-la sem precisar criar um produto específico primeiro.
  • L13 – $sql = new Sql();:
    Estamos criando uma nova ‘ferramenta de banco de dados’ chamada ‘$sql’, usando o ‘molde’ ‘Sql’ que trouxemos antes.
  • L14 – return $sql->select(“SELECT * FROM tb_products ORDER BY desproduct”);:
    Estamos usando a ‘ferramenta de banco de dados’ ‘$sql’ para pedir ao banco de dados todos os produtos da tabela ‘tb_products’, ordenados pelo nome do produto (‘desproduct’). O resultado dessa busca é o que o método ‘listAll’ vai nos dar.

    • Neste ponto podemos abrir a página principal e ao clicar no menu “Produtos” já veremos três produtos listados que já vieram no banco de dados cadastrados como exemplos e testes.

    Nos próximo capítulo vamos cadastrar os produtos.

    Para saber mais…

    Categorias (templates)
    Parte visual dasCAategorias (Página Home).

    Produtos CRUD (Cadastrar)
    Formularios e funções Cadastro de Produtos