JAMES WEB

Aprenda como se faz.

Categorias (template)

Com a conclusão da fase de desenvolvimento do banco de dados, que abrange a gestão de categorias e possibilita as operações de cadastro, listagem, edição e exclusão de itens, daremos início à preparação da interface visual para exibição das categorias. Esta seção está localizada no rodapé da página principal do nosso site de e-commerce.

Observe o arquivo “footer.html” da nossa “Home“, onde se encontra o trecho correspondente às categorias. Observaremos que este trecho contém linhas que, inicialmente, representam categorias listadas com os exemplos numéricos um, dois, três e quatro. No decorrer deste capítulo, procederemos à edição deste trecho, conferindo-lhe dinamismo. Ou seja, as alterações realizadas nas categorias no banco de dados serão refletidas automaticamente na interface visual.

Preparação do Template de Categoria:

Antes de prosseguirmos com a implementação da funcionalidade de exibição de categorias, é imprescindível que o template HTML correspondente esteja devidamente instalado.

Procedimento de Download e Instalação:

Efetue o download do arquivo denominado “Category.html“. Este arquivo contém a estrutura de apresentação da página de categorias.

Após o download, navegue até o diretório “htdocs/ecommerce/views“.

Insira o arquivo “Category.html” neste diretório inidicado. Este procedimento garante que o sistema localize e utilize o template adequadamente.

Exibindo Categorias Dinâmicas no Rodapé

O primeiro passo para preparar a parte visual que exibe as categorias é acessar o arquivo “footer.html” contém o rodapé do site. Dentro desse arquivo, observamos o menu de categorias. Veja em detalhes a seguir:

<div class="footer-top-area">
 
// - - Início código...
 
     <div class="col-md-3 col-sm-6">
                    <div class="footer-menu">
                        <h2 class="footer-wid-title">Categorias</h2>
                        <ul>
                            <li><a href="#">Categoria um</a></li>
                            <li><a href="#">Categoria dois</a></li>
                            <li><a href="#">Categoria três</a></li>
                            <li><a href="#">Categoria quatro</a></li>
                            <li><a href="#">Categoria cinco</a></li>
                        </ul>                        
                    </div>
                </div>
 
// Resto do código...
</html>

Ao explorarmos a página inicial do nosso website, notamos que o menu de categorias, localizado no rodapé, encontra-se atualmente em formato estático. Para aprimorar a experiência do usuário e garantir que as informações estejam sempre atualizadas, implementaremos uma solução dinâmica. Isso significa que substituiremos o trecho de código compreendido pelas tags <ul> pelo conteúdo do arquivo categories.html.

A grande vantagem dessa mudança é que o arquivo categories.html será atualizado automaticamente sempre que houver alterações nos dados das categorias em nosso banco de dados. Dessa forma, garantimos que o menu de categorias exibirá sempre as informações mais recentes, sem a necessidade de intervenção manual.

Para criar o arquivo categories.html, que será utilizado dinamicamente, crie um arquivo html com a linha “<li><a href=”#”>Categoria um</a>” e salve em htdocs/ecommerce/views como categories.html.

O arquivo categories.html será incorporado ao rodapé do arquivo footer.html por meio de uma diretiva “{include=”categories-menu”}” fornecida pelo motor de templates Rain Tpl. Essa abordagem permite uma separação clara das responsabilidades, facilitando a manutenção e o desenvolvimento do sistema.

Para entender melhor, vamos analisar os componentes dessa instrução:

{include=…}: Essa é a sintaxe de uma função ou diretiva que realiza a inclusão de um arquivo externo. Ela é comumente encontrada em sistemas de templates ou frameworks de desenvolvimento web.

“categories-menu“: Esse é o nome do arquivo que será incluído. Ele representa um arquivo separado que contém o código HTML para o menu de categorias.

O que essa instrução faz:

Quando o código é processado, a instrução “{include=”categories-menu”}” é substituída pelo conteúdo do arquivo “categories-menu“. Isso permite que você organize seu código em arquivos separados, facilitando a manutenção e a reutilização de componentes.

No trecho abaixo do código veja o exemplo da parte que deve ser substituida pela instrução “Include“.

Descrição

<div class="footer-top-area">
 
// - - Início código...
 
              <div class="col-md-3 col-sm-6">
                    <div class="footer-menu">
                        <h2 class="footer-wid-title">Categorias</h2>
                        <ul>
                            {include=”categories-menu”}
                        </ul>                        
                    </div>
                </div>
 
// Resto do código...
</html>

Ao abrir a página principal do site no rodapé deveremos observar o título “Categorias” e apenas uma categoria listada como “categoria um” conforme programado no arquivo categories.html.

A fim de garantir a sincronia entre o painel administrativo e a exibição das categorias na página inicial (“Home”) do nosso website, implementaremos uma atualização dinâmica. Ou seja, qualquer modificação realizada nos itens de categoria através do painel administrativo será automaticamente refletida na seção “Categorias” da página inicial.

Para alcançar esse objetivo, criaremos uma função específica no arquivo Category.php. Essa função será responsável por orquestrar a atualização dinâmica dos dados, assegurando que as informações exibidas na página inicial estejam sempre em consonância com as alterações efetuadas no painel administrativo. A seguir, detalharemos as modificações necessárias no arquivo Category.php.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?php

namespace Hcode\Model;

use \Hcode\DB\Sql;
use \Hcode\Model;
use Hcode\Model\Database;

class Category extends Model {
    public static function listAll()
    {
        $sql = new Sql();
        return $sql->select("SELECT * FROM tb_categories ORDER BY descategory");
    }

    public function save()
    {
        $sql = new Sql();
        $results = $sql->select("CALL sp_categories_save(:idcategory, :descategory)", array(
                ":idcategory"=>$this->getidcategory(),
                ":descategory"=>$this->getdescategory()
            ));
        $this->setData($results[0]);

        Category::update_menu_categories();

    }

    public function get($idcategory){
        $sql = new Sql();
        $results = $sql->select("SELECT * FROM tb_categories WHERE idcategory = :idcategory", [
            ':idcategory'=>$idcategory
        ]);
        $this->setData($results[0]);
    }

    public function delete()
    {
        $sql = new Sql();
        $sql->query("DELETE FROM tb_categories WHERE idcategory = :idcategory", array(
            ":idcategory"=>$this->getidcategory()
        ));

        Category::update_menu_categories();
    }

    public static function listByIdCategory($idcategory)
    {
        $sql = new Sql();
        return $sql->select("SELECT * FROM tb_categories WHERE idcategory = :idcategory", [
            ':idcategory'=>$idcategory
        ]);
    }

    public function update_menu_categories()
    {
        $category = Category::listAll();
        $html = [];
        foreach ($category as $row) {
            array_push($html,'<li><a href="/ecommerce/category/'.$row['idcategory'].'">'.$row['descategory'].'</a></li>');
        }
        file_put_contents('c:\xampp\htdocs\ecommerce\views\categories-menu.html', implode('',$html));
    }

}

?>

Na linha 55 temos a função denominada update_menu_categories(), que tem como objetivo gerar dinamicamente o menu de categorias do website, refletindo as alterações realizadas no banco de dados. Ela atualiza um arquivo HTML (categories-menu.html) com a lista de categorias, garantindo que o menu exibido na página inicial esteja sempre atualizado.

Veja a seguir detalhamento da função update_menu_categories()

L55 – public function update_menu_categories():
Define uma função pública, acessível de qualquer parte do código, chamada update_menu_categories(). Esta função não recebe parâmetros.

L57 – $category = Category::listAll();:
Esta linha invoca um método estático listAll() da classe Category. Essa classe interage com o banco de dados para recuperar todas as categorias disponíveis. O resultado, que é um array contendo os dados das categorias, é armazenado na variável $category.

L58 – $html = [];:
Um array vazio, chamado $html, é inicializado. Este array será utilizado para armazenar as strings HTML que representam cada item do menu de categorias.

L59 – foreach ($category as $row) { … }:
Um loop foreach itera sobre cada elemento do array $category. Em cada iteração, a variável $row contém os dados de uma única categoria.

L60 – array_push($html, ‘<li><a href=”/ecommerce/category/’.$row[‘idcategory’].'”>’.$row[‘descategory’].'</a></li>’);:
Dentro do loop, a função array_push() adiciona uma string HTML ao array $html. Esta string representa um item de lista (<li>) do menu, contendo um link (<a>) para a página da categoria.

$row[‘idcategory’]: Obtém o ID da categoria do array $row.

$row[‘descategory’]: Obtém a descrição da categoria do array $row. A string construída cria um link para a página da categoria, usando o ID da categoria como parâmetro na URL.

Observe os pontos “.” entre as variáveis. Eles servem para concatenar, isto é, juntar como uma única string.

L62 – file_put_contents(‘c:\xampp\htdocs\ecommerce\views\categories-menu.html’, implode(”, $html));:
Esta linha utiliza a função file_put_contents() para escrever o conteúdo do array $html no arquivo categories-menu.html. A função implode() concatena todos os elementos do array $html em uma única string, sem nenhum separador. O resultado é então escrito no arquivo especificado, substituindo o conteúdo existente.

Garantindo que a função update_menu_categories() seja sempre executada quando necessária.

Para assegurar a consistência dos dados exibidos na página inicial (“Home“) do nosso website, é imperativo que qualquer alteração realizada nas categorias através do painel administrativo – seja a criação, atualização, edição ou exclusão de uma categoria – seja imediatamente refletida na seção correspondente da página inicial.

A fim de garantir essa sincronização, implementaremos um mecanismo de atualização automática. Especificamente, sempre que as funções save() ou delete() do arquivo Category.php forem executadas, a função update_menu_categories() deverá ser invocada.

Para isso, inseriremos a linha de código Category::update_menu_categories() nas linhas 25 e 44, respectivamente, das funções save() e delete() no arquivo Category.php. Essa medida assegurará que o menu de categorias seja atualizado sempre que uma categoria for criada, modificada ou removida.

Navegação por Categorias:

Ao interagir com o menu “Categorias” e selecionar uma categoria específica, o usuário será direcionado a uma rota predefinida. Essa rota tem a função de exibir, em um local designado da página inicial (“Home“), todos os produtos associados à categoria escolhida.

Para concretizar essa funcionalidade, será necessário realizar uma intervenção no arquivo “admin-categories.php“, localizado no diretório “htdocs/ecommerce“. Nesse arquivo, deve-se inserir um trecho de código específico, que exemplificaremos a seguir.

PHP: admin-categories.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
// Inicio código ....

//Rota Template Category
$app->get('/category/:idcategory', function($idcategory)
{
    $category = new Category();
    $page = new Page();
    $category = Category::listByIdCategory((int)$idcategory);
    $page->setTpl("category", [
        'category'=>$category,
        'products'=>[]
    ]);
});

?>

Veja a explicação linha por linha

L5 – $app->get(‘/category/:idcategory’, function($idcategory) {:

$app->get(): Esta parte indica que estamos definindo uma rota HTTP do tipo GET. Rotas GET são usadas para solicitar dados do servidor.

‘/category/:idcategory’:
Esta é a URL da rota. :idcategory é um parâmetro dinâmico. Isso significa que qualquer valor que for colocado após /category/ será capturado e disponibilizado para a função. Por exemplo, /category/123 fará com que 123 seja o valor de idcategory.
li>
function($idcategory) {:
Esta é uma função anônima (ou closure) que será executada quando a rota for acessada. $idcategory é o parâmetro que recebe o valor dinâmico da URL.
li>

L7 – $category = new Category();:
Esta linha cria uma nova instância da classe Category. Essa classe contém métodos para manipular dados de categorias.

L8 – $page = new Page();:
Esta linha cria uma nova instância da classe Page. Esta classe é responsável por gerenciar a exibição de páginas, incluindo a definição de templates e a passagem de dados para eles.

L9 – $category = Category::listByIdCategory((int)$idcategory);:

Category::listByIdCategory((int)$idcategory): Esta linha chama um método estático listByIdCategory da classe Category.

(int)$idcategory: Aqui, o valor de $idcategory é convertido para um inteiro. Isso é importante para garantir que o ID da categoria seja tratado como um número.

O método listByIdCategory busca os dados da categoria no banco de dados, usando o ID fornecido. O resultado dessa busca é então atribuído à variável $category.

L9 – $page->setTpl(“category”, …): Esta linha chama o método setTpl da instância $page.

“category”: Este é o nome do template que será usado para exibir a página da categoria.

[…]: Este é um array associativo que contém os dados que serão passados para o template. Disponibilizamos o template Category.html no final em “arquivos para download“.

L11 – ‘category’=>$category:
Esta parte do array associa a variável $category (que contém os dados da categoria) à chave ‘category‘. Isso significa que, dentro do template category, os dados da categoria estarão acessíveis através da variável $category.

L12 – ‘products’=>[]:
Esta parte do array associa um array vazio à chave ‘products‘. Isso indica que, inicialmente, não há produtos associados à categoria sendo passados para o template. Em uma versão mais completa do código, os produtos da categoria são buscados e adicionados a este array.

Dinamização da Exibição de Categorias e Produtos:

Ao acessar a seção de categorias do nosso site, notamos que a apresentação atual é estática, ou seja, o nome da categoria e seus respectivos produtos não são exibidos dinamicamente. Esta funcionalidade será implementada em etapas futuras. Neste momento, focaremos na preparação da estrutura necessária para a exibição dinâmica.

Etapa 1: Dinamização do Nome da Categoria:

1. Acesso ao Arquivo de Template:

Localize e abra o arquivo “Category.html“. Este arquivo contém a estrutura HTML da página de categorias.

2. Modificação da Linha de Título:

Localize a linha que contém a tag <h2>Nome da Categoria</h2>.

Substitua esta linha por <h2>{$value.descategory}</h2>.

Esta modificação permite que o nome da categoria seja preenchido dinamicamente, utilizando o valor armazenado na variável descategory.

Etapa 2: Preparação da Lista de Produtos::

1. Remoção de Produtos Estáticos:

Observe que, entre as linhas 13 e 197, existe uma lista de produtos de exemplo.

OAs linhas 17 a 31 representam o código de exibição de um único produto, que é repetido até a linha 197.

Remova as linhas 32 a 196, mantendo apenas o código de exibição de um único produto (linhas 17 a 31).

2. Implementação do Loop de Produtos:

Insira a tag de abertura do loop {loop=”$products”} na linha 20.

Insira a tag de fechamento do loop {/loop} na linha 38.

Estas tags criarão um loop que iterará sobre a lista de produtos, exibindo cada produto individualmente.

Após as modificações, o arquivo “Category.html” estará preparado para exibir dinamicamente o nome da categoria e a lista de produtos associados. Por enquanto não será exibido nenhum produto, pois como voc~e se lembra o array o produto está vazio.

Veja como o template Category.html após ser editado

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<div class="product-big-title-area">
{loop="$category"}
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="product-bit-title text-center">
                    <h2>{$value.descategory}</h2>
                </div>
            </div>
        </div>
    </div>
</div>
{/loop}

<div class="single-product-area">
    <div class="zigzag-bottom"></div>
    <div class="container">

        {loop="$products"}
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="single-shop-product">
                    <div class="product-upper">
                        <img src="/ecommerce/res/site/img/product-2.jpg" alt="">
                    </div>
                    <h2><a href="">Apple new mac book 2015 March :P</a></h2>
                    <div class="product-carousel-price">
                        <ins>$899.00</ins> <del>$999.00</del>
                    </div>

                    <div class="product-option-shop">
                        <a class="add_to_cart_button" data-quantity="1" data-product_sku="" data-product_id="70" rel="nofollow" href="/canvas/shop/?add-to-cart=70">Add to cart</a>
                    </div>
                </div>
            </div>
        </div>
        {/loop}

        <div class="row">
            <div class="col-md-12">
                <div class="product-pagination text-center">
                    <nav>
                        <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                            <span aria-hidden="true">«</span>
                            </a>
                        </li>
                           <li><a href="#">1</a></li>
                           <li><a href="#">2</a></li>
                           <li><a href="#">3</a></li>
                           <li><a href="#">4</a></li>
                           <li><a href="#">5</a></li>
                           <li>
                             <a href="#" aria-label="Next">
                             <span aria-hidden="true">»</span>
                             </a>
                           </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

Para saber mais…

{include=…} (Rain Tpl)

Método listByIdCategory()

Arquivos para download

Category.html

CRUD – Categorias – Excluir
Fornulário e funções para excluir produtos.

CRUD – Produtos – Listar
Classes e Funções para listar produtos