Arquivo .htaccess

Imagine um site como uma casa. Cada cômodo da casa tem suas próprias regras: onde os móveis ficam, quem pode entrar, como as luzes funcionam, etc. O arquivo .htaccess é como um conjunto de regras específicas para cada “cômodo” do seu site, ou seja, para cada diretório.

Quando uma requisição é feita pela primeira vez para uma determinada página, o framework gera o HTML dinâmico correspondente, combinando os dados da aplicação com o template.

Esse HTML gerado é então salvo na pasta views-cache com um nome único, geralmente relacionado ao nome do template e aos dados utilizados para renderizá-lo.

Criando o arquivo index.php e rotas

O arquivo index.php é o coração do seu site. Ele é o ponto de partida para a criação de experiências online personalizadas e interativas.

Quando você digita o endereço do seu site no navegador, ele envia uma solicitação ao servidor. O servidor, por sua vez, procura por um arquivo chamado index.php na raiz do seu site. Ao encontrar esse arquivo, ele o executa e o resultado é enviado para o seu navegador, sendo exibido na tela.

Geralmente, os servidores estão configurados para procurar pelos seguintes arquivos nessa ordem:

• index.php
• index.html
• index.htm
• default.html
• default.htm

Em outras palavras, se o servidor não encontrar o arquivo index.php ele irá procurar os outros que relacionamos.

O nosso arquivo index.php irá configurar principalmente as rotas. Ele não exibirá a Home Page por exemplo , mas irá informar qual caminho seguir para chegar nesta página, ou qualquer outra.

O que é uma rota?

Imagine um mapa. As rotas são como os caminhos que você segue para chegar de um ponto a outro. Em um site, as rotas definem os caminhos que os usuários seguem para acessar diferentes páginas ou recursos. Em outras palavras, uma rota é uma associação entre um endereço URL (como “[URL inválido removido]”) e uma determinada ação ou página do seu site;

Para que servem as rotas?

• Organização: As rotas ajudam a organizar a estrutura do seu site, tornando o código mais fácil de entender e manter.
• Flexibilidade: Permitem criar URLs amigáveis e personalizadas, melhorando a experiência do usuário.
• Segurança: Podem ser utilizadas para controlar o acesso a diferentes áreas do seu site, implementando mecanismos de autenticação e autorização.
• SEO: Contribuem para um melhor posicionamento nos resultados de busca, pois URLs claras e significativas são valorizadas pelos mecanismos de busca.

Como a rota é gerada e funciona?

A seguir temos as primeiras linhas de nosso código, o index.php. Acesse via Sublime-text, crie o arquivo index.php na pasta raiz “ecommerce” que você criou.

No código index.php, estamos utilizando o framework Slim para definir uma rota. Vamos analisar cada parte:

• Linha 1: <?php:
  Início do código PHP: Essa linha indica ao servidor que o conteúdo a seguir deve ser interpretado como código PHP.
• Linha 3: require_once(“vendor/autoload.php”);
  Incluindo bibliotecas: Essa linha “puxa” um arquivo chamado autoload.php que está localizado na pasta vendor. Esse arquivo, por sua vez, carrega outras bibliotecas que o seu código precisa para funcionar.
• Linhas 4 e 5: use \Hcode\DB\Sql; e use \Slim\Slim;
  Importando classes: Aqui, estamos dizendo ao PHP que queremos usar duas classes específicas: Sql (para interagir com um banco de dados) e Slim (uma framework para criar aplicações web) que são ferramentas específicas que iremos usar para construir o projeto.
• Linha 7: $app = new \Slim\Slim();
  Essa linha cria uma nova instância (um objeto) da classe Slim. Imagine que estamos construindo uma casa e essa linha é como se estivéssemos criando a planta da casa.
• Linha 8: $app->config(‘debug’, true);
  Habilitando o modo de depuração: Essa linha configura a aplicação para mostrar mais detalhes sobre eventuais erros.
• Linhas 9-12: $app->get(‘/hello/:name’, function($name) { … })
  Essa linha define uma rota para a aplicação. Quando alguém digitar o endereço http://seusite.com/hello/seu_nome no navegador, o código dentro da função será executado. A parte :name indica que name é uma variável que será substituída pelo nome que o usuário digitar.
• Linha 13: $app->run();
  Essa linha faz com que a aplicação Slim comece a funcionar e fique ouvindo por requisições.

Para ver o arquivo funcionando entre com localhost/ecommerce/hello/Willians, por exemplo, no navegador. Não esqueça de ativar o apache e o sql no painel do Xampp. Na tela deveremos ter algo como a figura abaixo:

Construindo um template

Um template.html é uma ferramenta essencial para desenvolvedores web que desejam criar sites de forma rápida e eficiente. Ao utilizar um template, você pode economizar tempo, garantir a consistência visual e facilitar a manutenção do seu site.

Para iniciarmos a construção da estrutura visual da nosso loja virtual, vamos organizar nossos arquivos HTML em pastas específicas. Dentro do diretório principal do projeto (ecommerce), criaremos duas novas pastas: ‘views’ e ‘views-cache’.

Pasta views e views-cache. O que é e para que serve

Embora no decorrer do desenvolvimento do projeto, você nem perceba a existência da pasta views-cache, ela é um recurso comumente utilizado em frameworks e sistemas de templates para armazenar versões compiladas ou pré-renderizadas das suas views (páginas) HTML. Essa prática, conhecida como cache de templates, desempenha um papel crucial na otimização do desempenho de um site, especialmente em aplicações que recebem um grande volume de tráfego.

Nas próximas requisições para a mesma página com os mesmos dados, o framework verifica se existe uma versão em cache do template. Se existir, o HTML pré-renderizado é servido diretamente do cache, pulando toda a etapa de processamento e renderização. Isso resulta em um tempo de resposta significativamente menor, proporcionando uma experiência mais rápida para o usuário.

Já a pasta ‘views’ será utilizada para armazenar nossos templates em HTML, ou seja, os modelos de nossas páginas. Nessa pasta, através do seu editor de texto, crie um novo arquivo chamado index.html, que será nosso primeiro template, conforme o exemplo a seguir:

Template index.html

Ao navegar em um site, normalmente ao passar pelas suas páginas observamos que os cabeçalhos e rodapés são os mesmos. Em outras palavras as informações alí contidas são as mesmas para todas as páginas.

Para isso, uma técnica muito utilizada pela maioria dos site é dividir o código index.html em três partes: header.html, index.html e footer.html.

Por que dividir o código?

• Reutilização: Ao criar arquivos separados para partes que se repetem, você pode reutilizá-los em várias páginas, economizando tempo e evitando duplicação de código.
• Organização: Dividir o código em arquivos separados torna o código mais fácil de ler, entender e manter.
• Manutenção: Se você precisar fazer alterações em uma parte específica do seu site, como o cabeçalho, você só precisará modificar um único arquivo.

Criando os arquivos header.html e footer.html

• Crie os arquivos: Na mesma pasta do seu arquivo index.html, crie dois novos arquivos: “header.html” e “footer.html”;
• No arquivo index.html, selecione do início do código até a tag </head> e tecle “ctrl + x”;
• Cole o trecho copiado no arquivo header.html;
• Volte no arquivo index.html. e selecione as duas ultimas linhas e copie com “ctrl + x”;
• Cole o trecho copiado no arquivo footer.html.

Veja como ficarão os códigos para cada um desses arquivos.

Código header.html

Código index.html

Código footer.html

Criando a rota index.html

Você se lembra que quando um visitante acessa o seu site, o primeiro arquivo que o servidor procura é o index.php. Então temos que informar ao index.php que deve renderizar os arquivos html header, index e footer, que estão na pasta views para exibir a página de criamos, que corresponde ao nosso template. Por isso precisamos de criar as rotas com apoio do slim e do autoload.

Então acesse o seu arquivo index.php e edite conforme exemplo a seguir:

Esse código cria uma aplicação web simples utilizando o Slim Framework. Quando uma requisição é feita para a raiz da aplicação, no nosso caso (localhost/ecommerce), o código cria uma instância da classe Page e renderiza o template “index”.

Explicando o código index.php linha a linha:

• Linha 1 – <?php
  Essa linha indica ao servidor web que o conteúdo a seguir é um código PHP.
• Linha 2 – require_once(“vendor/autoload.php”);
  Essa linha inclui o arquivo autoload.php, que está localizado na pasta vendor. Esse arquivo é gerado pelo Composer e é responsável por carregar automaticamente todas as classes que você definiu em seu projeto, bem como as classes das bibliotecas que você instalou (como o Slim e o Hcode).
• Linha 3 a 5 – use \Hcode\DB\Sql; use \Slim\Slim; use \Hcode\Page;
  Essas linhas “importam” as classes Sql, Slim e Page para o seu código. Isso significa que você pode usar essas classes diretamente sem precisar escrever os códigos deles completos toda vez.
• Linha 7 – $app = new Slim();
  Aqui, você cria uma nova instância da classe Slim, que é o coração da sua aplicação. A variável $app vai armazenar essa instância e será usada para configurar e executar a sua aplicação.
• Linha 8 – $app->config(‘debug’, true);
  Essa linha configura o modo de depuração da aplicação. Ao definir debug como true, você estará habilitando a exibição de mensagens de erro mais detalhadas, o que é útil durante o desenvolvimento.
• Linhas 10 a 13 – $app->get(‘/’, function() { … });
  Aqui define uma rota. A rota ‘/’ significa a página inicial do seu site. Quando alguém acessar a página inicial, o código dentro da função anônima será executado.
  
• Linha 11 – $page = new Page();
  Cria uma nova instância da classe Page, que é uma classe personalizada para lidar com a lógica da sua página.
• Linha 12 – $page->setTpl(“index”);
  Define o template que será utilizado para renderizar a página através do método setTpl. Neste caso o index.html
• Linha 14 – $app->run();
  Finalmente, essa linha inicia a aplicação Slim. É como dar o sinal verde para que o servidor comece a atender as requisições dos usuários.
• Linha 15 – ?>
  Fim do código PHP.

Construindo a Classe Page

Ao acessar o navegador com “localhost/ecommerce” neste momento alguns erros irão pipocar na sua tela, como por exemplo, não encontrou a página, etc…

Isto ocorre porque precisamos programar outras coisas no nosso site. A princípio, parece complicado demais, pois se inserísemos o código inteiro do index.html direto no index.php, já seria o suficiente para exibir a página na tela.

Mas o modo que estamos criando com classes e bibliotecas Slim e RainTpl futuramente se monstrarão bem mais eficientes para lidar com as mais diversas situações.

No nosso código temos a linha use\Hcode\Page. Isto informa ao aódigo que ele deve usar uma classe chamada Page com namespace Hcode.

Imagine a Classe Page como um molde para as páginas do seu e-commerce. Ela será responsável por definir a estrutura básica da página principal, com o cabeçalho, rodapé e menu de navegação. Para criar esse molde criaremos um novo arquivo chamado ‘page.php’ e definir nele uma classe chamada ‘Page’. Este arquivo deve ser criado no diretório ‘src’ do seu projeto, mais especificamente em ‘ecommerce > vendor > hcodebr > php-classes > src‘.

O código page.php é como um arquiteto que constroi uma casa e define como cada cômodo da casa será montado. Veja a seguir como ele deverá ser editado:

Esse código cria uma aplicação web simples utilizando o Slim Framework. Quando uma requisição é feita para a raiz da aplicação, no nosso caso (localhost/ecommerce), o código cria uma instância da classe Page e renderiza o template “index”.

Explicando o código page.php da Classe Page.

• Linha 3 – namespace Hcode:
  Define o namaspace Hcode para organizar classes e funções relacionadas. Aqui estamos definindo um identificador chamado Hcode. Imagine que você está organizando seus livros em uma estante. O namespace é como uma etiqueta em uma estante, indicando que todos os livros (classes, funções) que estão ali pertencem ao mesmo conjunto de temas.
• Linha 4 – use Rain\Tpl:
  Estamos “importando” uma biblioteca chamada RainTpl. Essa biblioteca nos fornece as ferramentas para criar templates (modelos) para as nossas páginas.
• Linha 6 – class Page {:
  Define uma nova classe chamada Page. Define como o header, footer, conteúdo serão construídos e como eles se conectam.
• Declaramos três propriedades privadas:
  > Linha 7 – $tpl: Armazenará uma instância da classe Tpl.
  > Linha 8 – $options: Um array para armazenar opções personalizadas.
  > Linha 9 a 13 – $defaults: Um array com valores padrão para opções: header e footer são definidos como true (por padrão sempre existirão), e data: Como um array vazio.
• Linha 15 – public function __construct($opts = array()):
  Define o método construtor da classe Page, que é chamado automaticamente quando um objeto Page é criado. Aceita um array opcional de opções ($opts). Define as opções básicas e se terá um header e um footer.
• Linha 17 – $this->options = array_merge($this->defaults, $opts):
  Aqui, estamos combinando as opções padrão ($this->defaults) como as que foram passadas para o construtor ($opts). Isso significa que se não for fornecida alguma opção ao criar um objeto Page, os valores padrão serão utilizados.
• Linha 18 – $config = array(…);
  Estamos criando um array com as configurações para a biblioteca RainTpl. Essas configurações definem onde os templates estão localizados, onde o cache será armazenado e outras opções de configuração.
  > Linha 20 – $_SERVER[‘DOCUMENT_ROOT’]:
  Essa variável nos dá o caminho raiz do servidor web. É utilizada para definir os caminhos dos diretórios onde os templates e o cache serão armazenados.
• Linha 25 – Tpl::configure( $config ):
  Essa linha configura a biblioteca RainTpl com as configurações que acabamos de definir. É como dizer à biblioteca: “Quero que você procure os meus templates nesse diretório e use essas opções”.
• Linha 26 – $this->tpl = new Tpl:
  Aqui, estamos criando uma nova instância da classe Tpl e armazenando-a na propriedade $tpl. Essa instância será utilizada para renderizar os nossos templates
• Linha 28 – if ($this->options[‘data’]) $this->setData($this->options[‘data”]):
  Se a opção “data” foi definida, chamamos o método setData para atribuir esses dados ao template.
  
• Linha 30 – if ($this->options[‘header’] === true) $this->tpl->draw(“header”, false):
  Se a opção header está definida como true, o método draw da biblioteca RainTpl é chamado para renderizar o template “header”. O segundo argumento false indica que o resultado não deve ser retornado, mas sim exibido diretamente.
• Linha 34 – public function __destruct():
  Quando termina de construir a página (ou seja, quando o objeto Page não é mais necessário), o PHP chama automaticamente o método __destruct(). Esse método verifica se você quer um rodapé na sua página (footer === true) e, se sim, ele adiciona o rodapé.
• Linha 39 – private function setData($data = array()):
  A função setData() tem como objetivo atribuir valores a variáveis de template, simulando o ato de preencher um quebra-cabeça.
  > private: Isso significa que essa função só pode ser usada dentro da classe Page.
  > setData: É o nome da função.
  > $data = array(): É o valor é de cada conteúdo.
• Linha 41 – foreach ($data as $key => $value) {
  > foreach: É um loop que permite percorrer cada item do dado.
  > $data: É a caixa com as peças.
  > $key: É o nome do item.
  > $value: É o valor do item.
  
• Linha 43 – $this->tpl->assign($key, $value);
  > $this->tpl: É o nosso quebra-cabeça.
  > assign: É a ferramenta que coloca a peça no lugar certo.
  > $key: É o nome do item.
  > $value: É o valor do item.
  
• Linha 47 – public function setTpl($tplname, $data = array(), $returnHTML = false):
  A função setTpl() É o responsável por carregar um template (ou modelo) e, opcionalmente, atribuir dados a ele.
  > public function setTpl: Define uma função pública setTpl.
  > $tplname: Representa o nome do arquivo do template a ser carregado.
  > $data = array(): Um array associativo contendo os dados que serão inseridos no template.
  > $returnHTML = false: ÉUm booleano que indica se o resultado final deve ser retornado como uma string HTML ou não.
• $this->setData($data):
  O método setData é chamado no contexto do objeto atual ($this). A Função Atribui os valores do array $data às variáveis do template. Essas variáveis são representadas por placeholders no template e serão substituídas pelos valores correspondentes durante a renderização.
  > return $this->tpl->draw($tplname, $returnHTML):
  O método draw é chamado em um objeto $tpl, que representa uma instância da biblioteca RainTpl. Renderiza o template especificado por $tplname, utilizando os dados que foram previamente atribuídos.
  > Se $returnHTML for true, retorna uma string HTML contendo o conteúdo renderizado..
  > Se $returnHTML for false, o resultado é exibido diretamente, geralmente como o conteúdo da página.

Agora sim, ao executar “localhost/ecommerce” será exibida na tela parecido com a imagem abaixo. Não esqueça de ativar o apache/sql no painel do Xampp.

Dica: Clique “ctrl + u” para exibir o código carregado. Você verá que o “header, index e footer” foram carregados juntos. Isto é, tudo o que foi programado nos códigos.