Clique aqui e veja todas as aulas
1. O Que Vamos Fazer?
Vamos usar as classes de estilo do Bootstrap para melhorar a aparência dos botões "Adicionar", "Editar", "Excluir" e "Ver" no nosso projeto. O Bootstrap fornece uma vasta gama de classes prontas para estilização, tornando simples a personalização de botões e outros elementos.
2. Incluindo o Bootstrap no Projeto
Se ainda não incluímos o Bootstrap no projeto, devemos adicioná-lo agora. Podemos utilizar a CDN do Bootstrap para fácil integração.
No arquivo header.php ou diretamente no arquivo tasks.php (ou outro arquivo HTML/PHP), adicione o seguinte link no <head>:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">3. Estilizando os Botões de Ação
Vamos aplicar classes Bootstrap para criar botões mais atraentes para as principais ações de "Adicionar", "Editar" e "Excluir" no sistema.
Exemplo de Botões Estilizados para Ações de Tarefas:
<a href="add_task.php" class="btn btn-success mb-3">Adicionar Nova Tarefa</a>
<a href="edit_task.php?id=<?php echo $row['id']; ?>" class="btn btn-warning btn-sm">Editar</a>
<a href="delete_task.php?id=<?php echo $row['id']; ?>" class="btn btn-danger btn-sm" onclick="return confirm('Tem certeza que deseja excluir esta tarefa?')">Excluir</a>
<a href="view_task.php?id=<?php echo $row['id']; ?>" class="btn btn-info btn-sm">Ver Detalhes</a>
- Botão "Adicionar Nova Tarefa": Usamos a classe
btn-successpara o botão verde que adiciona uma nova tarefa. - Botão "Editar": A classe
btn-warningdá ao botão uma aparência amarela para representar a ação de edição. - Botão "Excluir": A classe
btn-dangerestiliza o botão em vermelho, indicando uma ação perigosa, como a exclusão. - Botão "Ver Detalhes": A classe
btn-infoé usada para mostrar um botão azul, representando informações ou visualizações.
Resultado Esperado:
Com esses botões estilizados, nossa interface terá uma aparência muito mais organizada e profissional, facilitando o uso para o usuário.
4. Ajustando a Tabela de Exibição de Tarefas
Podemos também usar o Bootstrap para melhorar a aparência da tabela de exibição de tarefas.
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nome da Tarefa</th>
<th>Descrição</th>
<th>Status</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<?php while($row = $result->fetch_assoc()): ?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['description']; ?></td>
<td><?php echo $row['status']; ?></td>
<td>
<a href="edit_task.php?id=<?php echo $row['id']; ?>" class="btn btn-warning btn-sm">Editar</a>
<a href="delete_task.php?id=<?php echo $row['id']; ?>" class="btn btn-danger btn-sm" onclick="return confirm('Tem certeza que deseja excluir esta tarefa?')">Excluir</a>
<a href="view_task.php?id=<?php echo $row['id']; ?>" class="btn btn-info btn-sm">Ver</a>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
- A classe
table-stripedaplica listras às linhas da tabela, melhorando a legibilidade. - As ações de "Editar", "Excluir" e "Ver" estão claramente indicadas com cores e estilos diferentes, ajudando o usuário a identificar rapidamente as opções disponíveis.
5. Melhorando a Usabilidade com Feedback Visual
Para melhorar a usabilidade, podemos adicionar feedback visual ao clicar em um botão. O Bootstrap já oferece classes como btn-sm para botões menores e btn-block para botões que ocupam a largura total de um contêiner.
Por exemplo, o botão de "Adicionar Tarefa" pode ser configurado para ser um botão de largura total em dispositivos móveis:
<a href="add_task.php" class="btn btn-success btn-block">Adicionar Nova Tarefa</a>Isso garante que a interface seja responsiva e se adapte bem a diferentes tamanhos de tela.
6. Exercício Prático
Como exercício, experimente:
- Criar botões de ações adicionais, como "Concluir Tarefa", e aplicar as classes Bootstrap para diferentes estados de tarefas.
- Usar outras classes do Bootstrap para aprimorar ainda mais a interface, como
btn-outline-*para botões com bordas.
7. Próximos Passos
Agora que melhoramos a interface visual com o Bootstrap, no próximo passo, continuaremos aprimorando o design da interface, explorando mais componentes do Bootstrap para construir uma interface mais profissional e funcional.
