Aula 9: Introdução ao Dashboard de Produtos e Planejamento do Módulo

Por: Nerd Toolkit Postado em: Abril 25, 2025 Visto por: 302

Nesta aula, vamos iniciar a criação do novo módulo de produtos, que será integrado ao sistema existente de cadastro e login. Nosso objetivo é expandir as funcionalidades, permitindo que usuários autenticados possam gerenciar produtos (cadastrar, listar, editar e excluir). Também iremos revisar a estrutura do projeto para incluir um index.php principal – mesmo que este apenas redirecione para o login – e a inclusão de um arquivo header.php para padronizar a apresentação das Views.

1. Objetivos do Módulo de Produtos

Expandir as Funcionalidades: Desenvolver um dashboard onde o usuário possa realizar operações CRUD (Create, Read, Update, Delete) de produtos.
Integração com o Sistema Existente: Utilizar o mesmo banco de dados e padrão de programação (PHP orientado a objetos, MVC) que foi estabelecido nas aulas anteriores.
Interface Moderna e Responsiva: Aplicar o Bootstrap para construir uma interface intuitiva e organizada.

2. Estrutura do Projeto Atualizada

Nas aulas anteriores, o sistema foi organizado em pastas separadas para Classes, Controllers e Views, porém não havíamos criado um index.php principal. Agora, para centralizar o acesso, podemos criar um index.php que redirecione diretamente para a página de login. Além disso, vamos padronizar as views utilizando um header.php, que servirá como cabeçalho comum em todas as páginas do módulo.

2.1. Exemplo de Estrutura de Pastas

/seu_projeto
│
├── /Classes
│   ├── Database.php
│   ├── Usuario.php
│   └── Produto.php         // Nova classe para operações com produtos
│
├── /Controllers
│   ├── cadastroController.php
│   ├── loginController.php
│   └── produtoController.php  // Controlador para o módulo de produtos
│
├── /Views
│   ├── header.php          // Cabeçalho compartilhado (links para Bootstrap, meta tags etc.)
│   ├── footer.php          // Rodapé compartilhado
│   ├── login.php
│   ├── dashboard.php       // Dashboard principal do usuário
│   ├── produto_cadastro.php  // View para cadastro de produtos
│   ├── produto_listagem.php  // View para listagem de produtos
│   └── produto_editar.php    // View para edição de produtos
│
└── index.php               // Redireciona para a página de login

2.2. Exemplo de `index.php`

Na pasta raiz do seu projeto, crie o arquivo index.php (caso não tenha criado nas aulas anteriores) e coloque esse conteúdo:

<?php
// index.php - Página principal que redireciona para o login 
header("Location: Views/login.php"); 
exit(); 
?>

2.3. Padronização com `header.php`

Crie um arquivo header.php na pasta Views para incluir elementos comuns a todas as páginas, como o link do Bootstrap e as meta tags. Exemplo:

<!-- Views/header.php -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title><?php echo isset($pageTitle) ? $pageTitle : "Sistema Web"; ?></title>
 <!-- Meta tags de SEO -->
 <meta name="description" content="Dashboard de Produtos integrado ao sistema de login e cadastro.">
 <meta name="keywords" content="dashboard de produtos, PHP OOP, Bootstrap, CRUD, SEO">
 <!-- Link para o Bootstrap -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <!-- Link para arquivo customizado, se houver -->
 <link rel="stylesheet" href="Assets/css/custom.css">
</head>
<body>
 <!-- Menu de navegação pode ser incluído aqui -->
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="dashboard.php">Meu Dashboard</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
     <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarNav">
     <ul class="navbar-nav">
       <li class="nav-item"><a class="nav-link" href="produto_cadastro.php">Cadastrar Produtos</a></li>
       <li class="nav-item"><a class="nav-link" href="produto_listagem.php">Listar Produtos</a></li>
       <li class="nav-item"><a class="nav-link" href="../controllers/logoutController.php">Sair</a></li>
     </ul>
   </div>
 </nav>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Nas demais Views, o header.php pode ser incluído com PHP:

$pageTitle = "Cadastro de Produtos"; 
include 'header.php'; ?>

Vamos fazer a implementação em uma View. Abra o arquivo dasboard.php que está na pasta Views. Encontre a seção <head>, que deve se parecer com os códigos a seguir:

<!DOCTYPE html>
<html lang="pt-br">
<head>
 <meta charset="UTF-8">
 <title>Dashboard - Área Restrita</title>
 <!-- Link para o Bootstrap -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <link rel="stylesheet" href="Assets/css/custom.css">
</head>

Apague esses códigos e inclua o arquivo header.php dessa forma:

<?php 
include 'header.php';
?>

Faça esse processo nos próximos arquivos da pasta View.

3. Planejamento do Banco de Dados para Produtos

Como parte do planejamento, além do banco de dados já utilizado no sistema de usuários, criaremos uma tabela para armazenar produtos. A tabela pode ser criada no mesmo banco de dados com a seguinte estrutura:

 CREATE TABLE produtos (
   id INT AUTO_INCREMENT PRIMARY KEY,
   nome VARCHAR(150) NOT NULL,
   descricao TEXT NOT NULL,
   preco DECIMAL(10,2) NOT NULL,
   quantidade INT NOT NULL,
   data_cadastro DATETIME DEFAULT CURRENT_TIMESTAMP
);

Boas Práticas na Modelagem

Consistência: Utilize o mesmo padrão de nomenclatura e restrições (NOT NULL, AUTO_INCREMENT) que usamos na tabela de usuários.
Escalabilidade: Pensar em campos extras para futuras funcionalidades (por exemplo, categoria ou imagem do produto).

Com este planejamento detalhado, concluímos a Aula 9. Na próxima aula, daremos início à implementação prática, começando pela criação da interface de cadastro de produtos com Bootstrap, conforme planejado.

Tags:

#dashboard de produtos # planejamento de módulo # PHP OOP # Bootstrap # CRUD produtos # sistema de login # SEO # desenvolvimento web