JAMES WEB

Aprenda como se faz.

Sumário

Criando Formulário de Autenticação

Dando continuidade ao desenvolvimento do nosso sistema, vamos criar o formulario de login. Nessa etapa, o sistema irá capturar o nome de usuário e a senha digitado.

Esses dados são comparados com as informações armazenadas no banco de dados (db-ecommerce), mais especificamente na tabela tb_users. Caso o usuário e a senha fornecidos correspondam a um registro existente no banco de dados, e a senha esteja criptografada corretamente, o sistema concederá acesso à área administrativa.

banco-de-dados

Para compreender melhor essa lógica, sugiro que você acesse o banco de dados db-ecommerce e observe a tabela tb_users. Nessa tabela, você encontrará registros de usuários, incluindo o nome de usuário (campo deslogin) e a senha criptografada (campo despassword).

Por exemplo, existe um registro com deslogin igual a ‘admin’ e a senha correspondente criptografada. Além disso, a coluna inadmin indica se o usuário possui permissão de administrador. Um valor ‘1’ nessa coluna significa que o usuário é um administrador e, portanto, terá acesso à área administrativa após a autenticação.

login-link

Criando “Rota Login” – Formulário de Autênticação

Para darmos continuidade ao desenvolvimento, precisamos ajustar o nosso template de login.

  • Copiar o arquivo;
    • Localize o arquivo “login.html” na pasta “c: > xampp > htdocs > ecommerce > res > admin> pages > examples > login“;
    • Faça uma cópia desse arquivo e cole-o na pasta “c: > xampp > htdocs > ecommerce > views > admin“;
  • Ajustar os links;
    • Abra o arquivo “login.html” que você acabou de copiar;
    • Procure por linhas que contenham links para arquivos CSS ou JavaScript, como por exemplo:
      login-link
    • Substitua essa linha por:
      login-link

Configurando a Rota Formulário Login (login_get)

Com Sublime-text crie na pasta raiz do sistema (ecommerce) o arquivo admin.php.

Crie a “Rota Formulário Login (login_get)”. o arquivo ficará parecido com o exibido na imagem a seguir:

admin.php

?
1
2
3
4
5
6
7
8
9
10
11
12
<?php
use \Hcode\PageAdmin;
use \Hcode\Model\User;
//Rota Login - Formulário Autênticação (login_get)
$app->get('/admin/login_get', function() {
        $page = new PageAdmin([
            "header" => false,
            "footer" => false
        ]);
        $page->setTpl("login");
    });
?>

Explicando linha por linha do arquivo admin.php

  • L2 – use \Hcode\PageAdmin;:
    use: É a palavra-chave em PHP serve para “importar” uma classe. É como se você estivesse dizendo ao seu programa: “Eu vou precisar usar a classe PageAdmin. O Hcode que representa um namespace, que é uma forma de organizar classes em um projeto maior, evitando conflitos de nomes.
  • L3 – use \Hcode\Model\User;:
    Essa linha faz a mesma coisa que a anterior, mas importando a classe User do namespace Hcode\Model. A classe User representa um usuário do sistema e contém informações como nome, email, etc. As classes PageAdmin e User são criadas em outro lugar do projeto e possuem funcionalidades prontas para serem utilizadas.
  • L5 – $app->get(‘/admin/login_get’, function() { … });:
    • $app->get():
      Essa linha chama o método do objeto $app. Esse método é usado para definir uma rota.
    • :/admin/login_get
      É o endereço da rota. Quando alguém acessar a URL do seu site com esse caminho, o código dentro da função anônima será executado “function() { … }”.
  • L6 – $page = new PageAdmin([…]);:
    Cria um novo objeto da classe PageAdmin. O array passado como parâmetro serve para configurar a página, nesse caso, desabilitando o cabeçalho e o rodapé. Ao definir header e footer como false, você está informando à classe PageAdmin que não deseja incluir as seções correspondentes na página final. Isso significa que o conteúdo da página será renderizado sem as tags HTML que normalmente envolvem o cabeçalho e o rodapé, como <header> e <footer>.
  • L10 – $page->setTpl(“login”);:
    Define o template (ou modelo) que será utilizado para renderizar a página. o arquivo HTML “login.html” que contém a estrutura do formulário de login.

Incorporando o arquivo admin.php no index.php

  • Abra o arquivo “index.php”;
  • Encontre a parte do código onde são definidas as rotas;
  • Adicione a linha “require_once(‘admin.php’);” junto como as instruções de incorporações.

Criando a Classe pageAdmin

Ao criar o arquivo admin.php usamos a classe pageAdmin, especificamente na linha “use \Hcode\PageAdmin;”. Então deveremos criar a “classe pageAdmin”. Para isto acesse o Sublime-text e crie um novo arquivo “pageAdmin.php” na pasta “src” do caminho ecommerce > vendor > hcodebr > php-classes > src. Ele deverá ter a seguinte aparência:

?
1
2
3
4
5
6
7
8
9
10
11
12
<?php 
   namespace Hcode;
   use Rain\Tpl;
   class PageAdmin extends Page 
   {
         public function __construct($opts = array(), $tpl_dir =    
      "/ecommerce/views/admin/")
      {
           parent::__construct($opts, $tpl_dir);
         }
   }
?>

Entendendo a lógica:

Este trecho de código define uma classe chamada PageAdmin que estende a classe Page. A classe PageAdmin é usada para criar a página administrativa, enquanto a classe Page é a classe base mais genérica para criação de páginas.

  • L2 – namespace Hcode;:
    Define o namespace da classe. Isso ajuda a evitar conflitos de nomes quando você tem várias classes com o mesmo nome em diferentes partes do seu projeto.
  • L3 – use Rain\Tpl;:
    Importa a classe Tpl do namespace Rain. Rain\Tpl é uma biblioteca ou framework que está sendo usada para renderizar templates (páginas HTML) na aplicação.
  • L4 – class PageAdmin extends Page:
    Cria a nova classe chamada PageAdmin. A palavra-chave extends indica que a classe PageAdmin herda da classe Page. Isso significa que ela possui todas as propriedades e métodos da classe Page e pode sobrecarregá-los ou adicionar novos.
  • L6 – public function __construct($opts = array(), $tpl_dir = “/ecommerce/views/admin/”):
    Define o construtor da classe PageAdmin. O construtor é um método especial que é chamado automaticamente quando um objeto da classe é criado.
    • $opts:
      É um parâmetro opcional que pode ser usado para passar opções de configuração para a classe PageAdmin.
    • $tpl_dir:
      É um parâmetro que define o diretório onde estão localizados os templates (/ecommerce/views/admin/).
  • L9 – parent::__construct($opts, $tpl_dir);:
    Chama o construtor da classe pai (Page) passando os mesmos argumentos. Isso significa que a classe PageAdmin está reutilizando o código do construtor da classe Page para realizar algumas tarefas básicas.

Como mencionamos as páginas de login geralmente possuem uma estrutura visual diferente e não requerem os elementos comuns presentes no cabeçalho e rodapé das outras páginas. Por isso, desabilitamos a renderização dessas partes na página de login.

Acessando Formulário de Autênticação

O formulário de autênticação (login.html) está disponivel para download. Ele deve ser baixado na pasta “views/admin”.

A fim de proporcionar acesso ao formulário de autenticação, procederemos à edição do hiperlink “Login” situado na página principal. Utilizando a ferramenta de edição Sublime Text, localize e abra o arquivo “header.html” dentro da pasta “views”. Em seguida, identifique o elemento de lista que contém o hiperlink em questão e substitua o atributo “href” pelo seguinte valor: “/ecommerce/admin/login_get”. Veja como deverá ficar:

?
1
2
3
4
5
6
7
8
9
<div class=”user-menu”>
    <ul>
      <li><a href="#"><i class="fa fa-user"></i> Minha Conta</a></li>
      <li><a href="#"><i class="fa fa-heart"></i> Lista de Desejos</a></li>
      <li><a href="#"><i class="fa fa-shopping-cart"></i> Meu Carrinho</a></li>
      <li><a href="/ecommerce/admin/login_get"><i class="fa fa-lock"></i> 
      Login</a></li>
    </ul>
  </div>

Personalizando o formulário de login:

Vamos realizar algumas modificações no formulário de autenticação para torná-lo mais claro e intuitivo para o usuário.

  • Alterando o campo de e-mail:
    • o Abra o arquivo login.html em seu editor de código (Sublime Text).
    • o Localize a linha:

      < input type = “email” class = “form-control” placeholder = “Email” >

    • Altere conforme a seguir:

      < input type=”text” class = “form-control” placeholder = “Login” name = “login” >

      Explicação: Alteramos o tipo do campo de “email” para “text” para permitir a entrada de diferentes tipos de logins (não apenas e-mails). Modificamos o texto do placeholder para “Login” e adicionamos o atributo name=”login” para identificar esse campo no envio do formulário.
  • Alterando o ícone:
    • Localize o ícone de envelope e substitua a classe glyphicon glyphicon-envelope por glyphicon glyphicon-user. Isso irá exibir o ícone de um usuário no campo de login.
  • Adicionando o atributo name ao campo de senha:
    • Localize o campo de senha e adicione o atributo name=”password” para identificar esse campo no envio do formulário.

Configurando o envio do formulário:

Localize o elemento com a tag form na linha action=”../../index2.html” e substitua por action=”ecommerce/admin/login_post“. Isso fará com que os dados do formulário sejam enviados (post) para a página de processamento de login.

Para testar acesse “localhost/ecommerce” e clique no menu superior no link “Login” na página principal e você deverá visualizar a formulário de login conforme o esperado. Não se esqueça de ativar o “Apache” e o “MySQL” no painel Xampp.

login-link

Banco de dados MySql Xamppe
Explore o coração da sua loja virtual: o banco de dados MySQL

Acessando a Página Administrativa
Criação e acesso a Pagina Adminsitrativa do E-commerce