Nesta aula, vamos colocar em prática o planejamento para o módulo de produtos. O foco aqui é desenvolver a View para cadastro e edição de produtos. Usaremos o Bootstrap para criar um formulário moderno, responsivo e intuitivo, mantendo a consistência com as páginas do sistema através do uso do arquivo header.php.

1. Objetivos da Aula

• Desenvolver a Interface de Cadastro de Produtos:
  Criar a página produto_cadastro.php que permita aos usuários cadastrarem novos produtos no sistema.

• Interface de Edição de Produtos:
  Desenvolver a view produto_editar.php que possibilite a atualização dos dados de um produto já cadastrado, pré-preenchendo os campos com as informações atuais.

• Utilizar Bootstrap:
  Empregar os recursos do Bootstrap para garantir um layout responsivo, com formatação clara e usabilidade aprimorada.

• Integrar com a Estrutura do Sistema:
  Incluir o arquivo header.php para padronizar a aparência e facilitar a manutenção.

• Preparar a Comunicação com o Backend:
  Estruturar o formulário para que os dados sejam enviados ao controlador adequado (produtoController.php) para processamento.

2. Desenvolvimento da View de Cadastro de Produtos

Crie o arquivo produto_cadastro.php na pasta Views do seu projeto. Este arquivo conterá o formulário que irá coletar as informações do produto, tais como: nome, descrição, preço e quantidade.

2.1. Código da View produto_cadastro.php

Segue um exemplo completo:

<?php 
// Define o título da página e inclui o header compartilhado
$pageTitle = "Cadastro de Produtos"; 
include 'header.php'; 
?>
<div class="container mt-5">
 <h2 class="mb-4">Cadastro de Produtos</h2>
 
 <!-- Formulário para cadastro de produtos -->
 <form action="../Controllers/produtoController.php" method="post">
   <div class="form-group">
     <label for="nome">Nome do Produto</label>
     <input type="text" class="form-control" name="nome" id="nome" placeholder="Informe o nome do produto" required>
   </div>
   <div class="form-group">
     <label for="descricao">Descrição</label>
     <textarea class="form-control" name="descricao" id="descricao" placeholder="Descrição detalhada do produto" rows="4" required></textarea>
   </div>
   <div class="form-group">
     <label for="preco">Preço</label>
     <input type="number" step="0.01" class="form-control" name="preco" id="preco" placeholder="Informe o preço" required>
   </div>
   <div class="form-group">
     <label for="quantidade">Quantidade</label>
     <input type="number" class="form-control" name="quantidade" id="quantidade" placeholder="Quantidade disponível" required>
   </div>
   <button type="submit" class="btn btn-primary">Cadastrar Produto</button>
 </form>
</div>
<?php include 'footer.php'; ?>

Descrição dos Componentes Utilizados

• Inclusão do Header:
  O arquivo header.php é incluído no início para trazer a estrutura comum (meta tags, links do Bootstrap, navegação, etc.). Dessa forma, a view herda o layout padronizado.

• Formulário com Bootstrap:
  São utilizados os componentes do Bootstrap (como form-group, form-control e btn btn-primary) para estilizar os campos do formulário, garantindo responsividade e uma interface agradável.

• Atributos de Acessibilidade e SEO:
  Os labels e placeholders ajudam a guiar o usuário e fornecem informações adicionais para os motores de busca sobre o conteúdo da página.

• Ação do Formulário:
  O formulário envia os dados via método POST para o controlador produtoController.php (localizado na pasta Controllers). Esse arquivo será responsável por tratar os dados, validar e realizar a inserção no banco de dados, conforme será desenvolvido na próxima aula.

2.2. View de Edição de Produtos (produto_editar.php)

Esta view permite a edição dos dados de um produto já existente. Ela recupera o ID do produto via GET, consulta os dados atuais no banco de dados e preenche os campos do formulário para que o usuário possa atualizar as informações.

<?php 
$pageTitle = "Editar Produto";
include 'header.php';

// Verifica se o ID do produto foi passado pela URL 
if (!isset($_GET['id'])) {
    echo "<div class='container mt-5'><p>ID do produto não especificado.</p></div>";
    exit();
}

$id = $_GET['id'];
require_once '../Classes/Database.php';
$database = new Database();
$db = $database->getConnection();

// Busca os dados do produto pelo ID $query = "SELECT * FROM produtos WHERE id = :id LIMIT 1";
$stmt = $db->prepare($query);
$stmt->bindParam(':id', $id);
$stmt->execute();

if ($stmt->rowCount() == 0) {
    echo "<div class='container mt-5'><p>Produto não encontrado.</p></div>";
    exit();
}

$produto = $stmt->fetch(PDO::FETCH_ASSOC);
?>

<div class="container mt-5">
  <h2 class="mb-4">Editar Produto</h2>
  <form action="../Controllers/produtoController.php" method="post">
    <!-- Campo oculto para enviar o ID do produto -->
    <input type="hidden" name="id" value="<?php echo htmlspecialchars($produto['id']); ?>">
    
    <div class="form-group">
      <label for="nome">Nome do Produto</label>
      <input type="text" class="form-control" name="nome" id="nome" value="<?php echo htmlspecialchars($produto['nome']); ?>" required>
    </div>
    <div class="form-group">
      <label for="descricao">Descrição</label>
      <textarea class="form-control" name="descricao" id="descricao" rows="4" required><?php echo htmlspecialchars($produto['descricao']); ?></textarea>
    </div>
    <div class="form-group">
      <label for="preco">Preço</label>
      <input type="number" step="0.01" class="form-control" name="preco" id="preco" value="<?php echo htmlspecialchars($produto['preco']); ?>" required>
    </div>
    <div class="form-group">
      <label for="quantidade">Quantidade</label>
      <input type="number" class="form-control" name="quantidade" id="quantidade" value="<?php echo htmlspecialchars($produto['quantidade']); ?>" required>
    </div>
    <!-- Para indicar que esta operação é uma edição, enviamos o parâmetro 'acao' com valor 'editar' -->
    <button type="submit" class="btn btn-primary" name="acao" value="editar">Atualizar Produto</button>
  </form>
</div>

Componentes Utilizados:

• Inclusão e Recuperação de Dados:
  A view verifica se o ID do produto foi passado via GET. Caso afirmativo, ela utiliza a classe Database para buscar os dados e preenche os campos do formulário.

• Formulário Pré-preenchido:
  Os campos do formulário já vêm com os valores atuais do produto para que o usuário possa realizar as alterações necessárias.

• Campo Oculto e Parâmetro de Ação:
  Um campo oculto envia o ID do produto e o botão de submissão contém o parâmetro acao com o valor "editar", permitindo que o controlador diferencie uma operação de edição de um cadastro novo.

3. Conclusão

Nesta aula, desenvolvemos a interface de cadastro e edição de produtos, utilizando o Bootstrap para criar um layout responsivo e intuitivo, e integrando a View com a estrutura já estabelecida por meio do header.php. Esta página servirá como a porta de entrada para que os usuários possam inserir novos produtos no sistema, e seus dados serão processados pelo controlador apropriado.

Na próxima aula, daremos continuidade ao módulo, focando no desenvolvimento do backend para o módulo de produtos: a criação da classe Produto e o controlador produtoController.php para tratar os dados enviados pelo formulário.