Criando a tabela tb_categoriesproducts

Primeiro vamos criar a tabela tb_categoriesproducts que será capaz de relacionar categorias com produtos. Veja a seguir passo a passo:

• Iniciar o XAMPP:
  • Abra o painel de controle do XAMPP.
  • Inicie os serviços do Apache e MySQL clicando nos botões “Start” respectivos.
• Acessar o phpMyAdmin:
  • No painel de controle do XAMPP, clique no botão “Admin” ao lado do MySQL. Isso abrirá o phpMyAdmin no seu navegador.
• Selecionar o banco de dados db_ecommerce:
  • Na coluna da esquerda do phpMyAdmin, você verá uma lista de bancos de dados.
  • Clique em db_ecommerce.
• Executar a consulta SQL para criar a tabela:
  • Com o banco de dados db_ecommerce selecionado, clique na aba “SQL” no menu superior.
  • Na área de texto onde você pode digitar consultas SQL, cole o seguinte código.
    
    ?

    1 2 3 4 5

    CREATE TABLE `tb_categoriesproducts` ( `idcategory` int(11) NOT NULL, `idproduct` int(11) NOT NULL, PRIMARY KEY (`idcategory`,`idproduct`) ) ENGIN=InnoDB DEFAULT CHARSET=utf8;

  • Clique no botão “Executar” (ou “Go”).
• Verificar a criação da tabela:
  • Após a execução da consulta, você verá uma mensagem informando que a consulta foi executada com sucesso.
  • Na coluna da esquerda do phpMyAdmin, dentro do banco de dados db_ecommerce, você deverá ver a tabela tb_categoriesproducts.
  • Clique no nome da tabela tb_categoriesproducts para visualizar a estrutura da tabela (colunas, chaves primárias, etc.).

Seguindo esses passos, você terá criado a tabela tb_categoriesproducts no seu banco de dados db_ecommerce no XAMPP.

Configurando a tela Categorias vs Produtos

Depois de baixar e descompactar o arquivo categories-products.html que deve ser instalado na pasta xampp/htdocs/ecommerce/views/admin. Observe o código da página a seguir:

HTML: categories-products.html

O código HTML acima, “categories-products.html”, exibe uma página com duas colunas onde a primeira lista todos produtos não relacionados e outra coluna com os não relacionados com a categoria em questão.

Para acessar a página “categories-products.html” temos que criar a rota no arquivo admin-categories.php dentro do arquivo “admin´categories.php”

PHP: admin-categories.php

Este código define uma rota para exibir uma página administrativa que mostra os produtos relacionados e não relacionados a uma categoria específica. Ele verifica o login do usuário, busca os dados da categoria, obtém os produtos relacionados e não relacionados e, em seguida, renderiza a página usando um template e passando os dados para ele.

Observe o que o código faz linha por linha:

• L5 – $app->get(‘/admin/categories_get/:idcategory/products’, …):
  • Em termos simples, esta linha diz: “Quando alguém acessar um endereço web usando o método GET http://localhost/ecommerce/admin/categories_get/25/products, por exemplo, execute a função que se segue”.
• L7 – User::verifyLogin()::
  • Garante que apenas usuários logados acessem a página.
• L8 – $category = new Category();:
  • Cria um objeto de categoria.
• L9 – $category->get((int)$idcategory);:
  • Busca informações da categoria pelo ID.
• L10 – $page = new PageAdmin();:
  • Cria um objeto para gerenciar a página.
• L11 – $page->setTpl(“categories-products”, […]);:
  • Define o template da página, “categories-products.html”, enviando dados da categoria e listas de produtos.
• L12 – ‘category’ => $category->getValues():
  • Retorna um array com os dados da categoria.
• L13 – ‘productsRelated’ => $category->getProducts():
  • Passa um array com os produtos relacionados à categoria, obtidos pelo método getProducts() da classe category.
• L14 – ‘productsNotRelated’ => $category->getProducts(false):
  • Passa um array com os produtos não relacionados à categoria, obtidos pelo método getProducts(false) da classe category. O parâmetro false indica que queremos os produtos não relacionados.

Método getProducts()

A função getProducts() busca produtos relacionados ou não relacionados a uma categoria, dependendo do valor do parâmetro $related. Ela usa consultas SQL com subconsultas e junções (INNER JOIN) para obter os resultados desejados. O valor do idcategory é obtido através do método $this->getidcategory() e passado para a consulta SQL para filtrar os resultados. A classe SQL, executa a consulta e retorna o resultado.

Este método deve ser inserido no arquivo da classe Category.php conforme o exemplo a seguir:

Veja como funciona o código linha por linha:

• L4 – public function getProducts($related = true)::
  • Define uma função pública chamada getProducts. Isso significa que essa função pode ser chamada de qualquer lugar.
  • $related = true: Define um parâmetro opcional chamado $related com o valor padrão true. Esse parâmetro determina se a função deve retornar produtos relacionados (true) ou não relacionados (false).
• L6 – $sql = new Sql();:
  • $sql: Classe personalizada que lida com a execução de consultas SQL no banco de dados.
  • new Sql(): Cria uma nova instância dessa classe e a armazena na variável $sql. Essa variável será usada para executar as consultas.
• L7/29 – $if ($related === true) { … } else { … }:
  • Verifica o valor do parâmetro $related. Se $related for true, o código dentro do if será executado (para produtos relacionados). Caso contrário, o código dentro do else será executado (para produtos não relacionados).
• L8 – return $sql->select(“…”, […]);:
  • $sql->select(…): Chama o método select() da instância de $sql para executar uma consulta SQL SELECT.
  • SELECT * FROM tb_products WHERE idproduct IN (…): Seleciona todos os produtos da tabela tb_products onde o idproduct está presente no resultado da subconsulta.
  • SELECT a.idproduct FROM tb_products a INNER JOIN tb_categoriesproducts b ON a.idproduct = b.idproduct WHERE b.idcategory = :idcategory: Seleciona os idproducts da tabela tb_products que estão relacionados à categoria especificada.
    • INNER JOIN tb_categoriesproducts b ON a.idproduct = b.idproduct: Une as tabelas tb_products e tb_categoriesproducts usando a coluna idproduct.
    • WHERE b.idcategory = :idcategory: Filtra os resultados para incluir apenas os produtos relacionados à categoria com o idcategory fornecido.
• L16 – [‘:idcategory’ => $this->getidcategory()]:
  • É um array associativo que passa o valor do idcategory para a consulta.
    • ‘:idcategory’: É o marcador na consulta SQL que será substituído pelo valor.
    • $this->getidcategory(): Chama o método getidcategory() da classe atual para obter o valor do idcategory.
• L19/28 – return $sql->select(“…”, […]);:
  • Similar ao caso citado na linha 8, mas usa NOT IN na consulta SQL.
  • SELECT * FROM tb_products WHERE idproduct NOT IN (…): Seleciona todos os produtos da tabela tb_products onde o idproduct não está presente no resultado da subconsulta.
  • A subconsulta é a mesma do caso da linha 8, mas agora a consulta principal seleciona os produtos que não estão relacionados à categoria especificada.

Acessando página produtos vs categorias

Agora vamos criar o link que permite o acesso à página do template categories-products.html. Para isto acesse e modifique o template categories.html no diretório ecommerce/views/admin. Neste arquivo acrescente mais um botão (linha 17) no lado esquerdo do botão “Editar” e altere a largura da coluna configurada na linha 8 “<th style=”width: 140px”></th>“ na propriedade width de 140px para 240px conforme o exemplo a seguir:

HTML: categories.html

Para testar acesse a página administrativa do site e clique no botão “Produtos” criado em uma das categorias exibidas. Seremos direcionados ao template “categories-products.html” com o título “Produtos da Categoria …” com duas colunas. A primeira relacionando todos os produtos e outra coluna com os produtos na categoria…

Adicionando Produtos a uma Categoria

Ao selecionar uma categoria específica na página “Lista de Categorias” do painel administrativo, o sistema o redirecionará para a página “Produtos da Categoria Selecionada”. Esta página é estruturada em duas colunas distintas, projetadas para facilitar o gerenciamento de produtos relacionados à categoria escolhida:

Para adicionar um produto à categoria selecionada, siga estes passos:

1. Localize o produto desejado na coluna “Produtos Não Relacionados”.
2. Clique no botão “Adicionar”, adjacente ao produto escolhido.

Ao clicar em “Adicionar”, o sistema o redirecionará para a seguinte rota: http://localhost/admin/categories/25/products/1/add, por exemplo. Esta rota é responsável por executar a ação de vincular o produto selecionado à categoria em questão, atualizando o banco de dados (tabela tb_categoriesproducts) e refletindo a mudança na coluna “Produtos Relacionados”.

Observações Importantes:

• O número “25” presente na rota de exemplo (/categories/25/) representa o identificador único da categoria selecionada. Este valor varia dependendo da categoria escolhida.
• O número “1” presente na rota de exemplo (/products/1/) representa o identificador único do produto selecionado. Este valor varia dependendo do produto escolhido.
• “localhost” significa que o sistema está sendo executado localmente, em ambiente de testes.

Esta estrutura permite um gerenciamento eficiente dos produtos em cada categoria, garantindo a organização e a precisão das informações exibidas aos usuários.

Para executar estes procedimentos, acesse o código admin-categories.php e adicione no final a seguinte rota:

Esse código “PHP: admin-categories.php”, pega os IDs de uma categoria e um produto, busca as informações deles no banco de dados, adiciona o produto à categoria e redireciona o usuário para a página de produtos da categoria.

Veja Linha por Linha:

• L4 – $app->get(‘/admin/categories_get/:idcategory/products/:idproduct/add’, function($idcategory, $idproduct) {
  • $app->get(…): Aqui, estamos definindo uma rota no nosso aplicativo web. Pense nisso como um “endereço” que o navegador vai acessar.
  • ‘/admin/categories_get/:idcategory/products/:idproduct/add’: Esse é o “endereço” da rota.
    • /admin/categories_get/: Indica que estamos na área administrativa, lidando com categorias.
    • :idcategory: Isso é um parâmetro dinâmico. Ou seja, o valor dessa parte do endereço vai variar. Por exemplo, pode ser /admin/categories_get/10/. O “10” seria o ID da categoria.
    • /products/:idproduct/add: Similar ao anterior, :idproduct é o ID do produto que queremos adicionar à categoria.
    • /add: Indica que essa rota é para adicionar o produto à categoria.
    • function($idcategory, $idproduct) { … }: Isso é uma função anônima (uma função sem nome) que será executada quando alguém acessar essa rota. Os valores dos parâmetros :idcategory e :idproduct serão passados para essa função como $idcategory e $idproduct.
• L6 – User::verifyLogin();: Aqui, estamos verificando se o usuário está logado no painel administrativo. É uma medida de segurança. Se o usuário não estiver logado, ele será redirecionado para a página de login.
• L7 – $category = new Category();: Criamos um novo objeto da classe Category. Essa classe contém métodos para manipular informações de categorias no banco de dados.
• L8 – $category->get((int)$idcategory);: Usamos o método get() do objeto $category para buscar as informações da categoria no banco de dados, usando o $idcategory que recebemos na rota. O (int) garante que o $idcategory seja tratado como um número inteiro.
• L9 – $product = new Product();: Criamos um novo objeto da classe Product. Essa classe contém métodos para manipular informações de produtos.
• L10 – $product->get((int)$idproduct);: Usamos o método get() do objeto $product para buscar as informações do produto no banco de dados, usando o $idproduct que recebemos na rota. O (int) garante que o $idproduct seja tratado como um número inteiro.
• L11 – $category->addProduct($product);: Usamos o método addProduct() do objeto $category para adicionar o produto à categoria. Esse método insere um registro na tabela de relacionamento (tb_categoriesproducts) no banco de dados.
• L12 – header(“Location: /ecommerce/admin/categories_get/”.$idcategory.”/products”);: Após adicionar o produto à categoria, redirecionamos o usuário para a página que lista os produtos da categoria.
  • header(“Location: …”): É uma função que envia um cabeçalho HTTP para o navegador, instruindo-o a redirecionar para outra página.
  • /ecommerce/admin/categories_get/”.$idcategory.”/products”: É o endereço para onde o usuário será redirecionado.
• L13 – exit;: Encerramos a execução do script PHP. Isso é importante para garantir que nenhum código adicional seja executado após o redirecionamento.

PHP: Método addProduct (Category.php)

Observamos na Linha 11 do código anterior a instrução “$category->addProduct($product);“ em que executamos o método addProduct($product) que adiciona um registro na tabela tb_categoriesproducts criando uma relação entre o produto e categorias. Veja a seguir o código que deve ser inserido do arquivo Category.php.

Essa parte do código é responsável por inserir um novo registro na tabela tb_categoriesproducts, que é uma tabela de relacionamento entre categorias e produtos no seu banco de dados.

Veja a explicação linha por linha:

• L6 – $sql = new Sql();: Aqui, estamos criando um novo objeto chamado $sql da classe Sql. A classe Sql é uma classe personalizada que você criou para lidar com as operações do banco de dados. Ela deve conter métodos para executar queries SQL, conectar ao banco, e tratar erros.
• L7 – $sql->query(“INSERT INTO tb_categoriesproducts (idcategory, idproduct) VALUES (:idcategory, :idproduct)”, [
  • $sql->query(…): Aqui, estamos chamando o método query() do objeto $sql. Esse método é responsável por executar uma query SQL no banco de dados.
  • “INSERT INTO tb_categoriesproducts (idcategory, idproduct) VALUES (:idcategory, :idproduct)”: Essa é a query SQL que será executada.
  • INSERT INTO tb_categoriesproducts (idcategory, idproduct): Isso especifica que queremos inserir dados na tabela tb_categoriesproducts, nas colunas idcategory e idproduct.
  • VALUES (:idcategory, :idproduct): Isso especifica os valores que serão inseridos nas colunas. Os :idcategory e :idproduct são placeholders (marcadores de posição) para os valores reais, que serão fornecidos posteriormente.
• L8 – ‘:idcategory’=>$this->getidcategory(): Chama o método getidcategory() do objeto atual ($this). Esse método deve retornar o ID da categoria que você deseja inserir na tabela. O valor retornado por essa função, será inserido no lugar do placeholder :idcategory na query SQL.
• L9 – ‘:idproduct’=>$product->getidproduct(): Chama o método getidproduct() do objeto $product. Esse método deve retornar o ID do produto que você deseja inserir na tabela. O valor retornado por essa função, será inserido no lugar do placeholder :idproduct na query SQL.
• L10 – ]);: Isso fecha o array de parâmetros e o parênteses da chamada do método query().

Não se esqueça de inserir no inicio co código a linha “use \Hcode\Model\Product;” para liberar o uso da Classe Product nesta parte de seu código.

Desvinculando uma categoria de um produto

Até este ponto, desvendamos o mistério de adicionar produtos a categorias, uma conquista que se manifesta em nossos testes. Observem como a segunda coluna de produtos, outrora estática, agora floresce com a presença de um novo item e um botão “Remover.

Agora, embarcaremos em uma nova jornada, a de dotar nosso site com a capacidade de remover produtos de categorias. Para isso, invocaremos a função “removeProduct”, uma irmã gêmea da já existente “addProduct”, ambas residentes no arquivo “Category.php”.

Abaixo da função “addProduct insira a função “removeProduct”, seguindo o exemplo que se desdobrará diante de seus olhos.

A consulta SQL, expressa na linha “$sql->query(“DELETE FROM tb_categoriesproducts WHERE idcategory = :idcategory AND idproduct = :idproduct…”)”, é o coração da função “removeProduct“. Ela recebe os parâmetros “idcategory” e “idproduct“, que identificam a categoria e o produto a serem removidos, respectivamente.

Ao executar essa consulta, a “removeProduct” garante que o produto seja removido da categoria especificada, mantendo a integridade do nosso banco de dados.

Rota Template Category

Certifique-se de que a rota do template “Category” esteja devidamente configurada no arquivo site.php. Esta rota é essencial para a renderização do template category.html quando uma categoria é selecionada no menu de categorias do rodapé da página principal do site.

Observe o exemplo a seguir e a explicação de cada linha:

PHP: site.php

Explicação Linha a Linha:

• L5 – $app->get(‘/category/:idcategory’, function($idcategory) { … });: Esta linha define uma rota GET para a URL, por exemplo, http://localhost/ecommerce/category/25. :idcategory é um parâmetro dinâmico na URL, que captura o ID da categoria passada na requisição. A função anônima (closure) definida como segundo argumento será executada quando esta rota for acessada.
• L7 – $category = new Category();: Esta linha instancia um novo objeto da classe Category. Este objeto será usado para interagir com os dados da categoria.
• L8 – $category->get((int)$idcategory);: Esta linha chama o método get() do objeto $category, passando o ID da categoria (convertido para inteiro) como argumento. O método get() da classe Category busca os dados da categoria no banco de dados com base no ID fornecido e preenche os atributos do objeto $category com esses dados.
• L9 – $page = new Page();: Esta linha instancia um novo objeto da classe Page. Este objeto será usado para renderizar o template da página.
• L10 – $page->setTpl(“category”, [ … ]);: Esta linha chama o método setTpl() do objeto $page para definir o template a ser renderizado e os dados a serem passados para o template. O primeiro argumento, “category”, especifica o nome do template category.html. O segundo argumento é um array associativo que contém os dados a serem passados para o template.
• L11 – ‘category’ => $category->getValues(): Esta linha passa os dados da categoria para o template. $category->getValues() chama o método getValues() do objeto $category para obter os dados da categoria em forma de array associativo.
• L12 – ‘products’ => $category->getProducts(): Esta linha passa os produtos relacionados à categoria para o template. $category->getProducts() chama o método getProducts() do objeto $category para obter os produtos relacionados em forma de array associativo.
• L13 – });: fecha a função anônima passada como parametro para o método get.

Para Saber Mais…

• Banco de dados SQL