O desenvolvimento web moderno frequentemente exige a manipulação de dados de maneira dinâmica e eficiente e uma das práticas essenciais nesse contexto é a implementação de operações CRUD — Create (Criar), Read (Ler), Update (Atualizar) e Delete (Excluir), portanto, essas operações são fundamentais para gerenciar dados em aplicativos web, permitindo que os usuários interajam com o sistema de forma prática e intuitiva. Nesse tutorial, iremos aprender a criar um CRUD com PHP, MySQL & Bootstrap 5 (Create, Read, Update, Delete).
Ao longo deste tutorial, abordaremos cada uma das operações CRUD em detalhes, desde a configuração do ambiente de desenvolvimento até a implementação e estilização das funcionalidades. No final, você terá um aplicativo totalmente funcional, capaz de realizar todas as operações básicas de gerenciamento de dados com uma interface amigável e profissional.
Vamos agora explorar como implementar um sistema CRUD utilizando PHP, MySQL e Bootstrap 5.
Banco de dados MySQL
Criar banco de dados:
|
1 |
CREATE DATABASE canalti; |
Usar a base dados recém-criada:
|
1 |
USE canalti; |
Estrutura do Banco de dados:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
-- MySQL dump 10.13 Distrib 8.0.16, for macos10.14 (x86_64) -- -- Host: localhost Database: canalti -- ------------------------------------------------------ -- Server version 8.0.12 /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; SET NAMES utf8 ; /*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */; /*!40103 SET TIME_ZONE='+00:00' */; /*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */; /*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */; /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */; /*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */; -- -- Table structure for table `usuarios` -- DROP TABLE IF EXISTS `usuarios`; /*!40101 SET @saved_cs_client = @@character_set_client */; SET character_set_client = utf8mb4 ; CREATE TABLE `usuarios` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nome` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `data_nascimento` date NOT NULL, `senha` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci; /*!40101 SET character_set_client = @saved_cs_client */; -- -- Dumping data for table `usuarios` -- LOCK TABLES `usuarios` WRITE; /*!40000 ALTER TABLE `usuarios` DISABLE KEYS */; /*!40000 ALTER TABLE `usuarios` ENABLE KEYS */; UNLOCK TABLES; /*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */; /*!40101 SET SQL_MODE=@OLD_SQL_MODE */; /*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */; /*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; /*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */; -- Dump completed on 2024-04-22 13:50:30 |
conexao.php
|
1 2 3 4 5 6 7 8 |
<?php define('HOST', '127.0.0.1'); define('USUARIO', 'root'); define('SENHA', 'root'); define('DB', 'canalti'); $conexao = mysqli_connect(HOST, USUARIO, SENHA, DB) or die ('Não foi possível conectar'); ?> |
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<?php session_start(); require 'conexao.php'; ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Usuários</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> </head> <body> <?php include('navbar.php'); ?> <div class="container mt-4"> <?php include('mensagem.php'); ?> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h4> Lista de Usuários <a href="usuario-create.php" class="btn btn-primary float-end">Adicionar usuário</a> </h4> </div> <div class="card-body"> <table class="table table-bordered table-striped"> <thead> <tr> <th>ID</th> <th>Nome</th> <th>Email</th> <th>Data Nascimento</th> <th>Ações</th> </tr> </thead> <tbody> <?php $sql = 'SELECT * FROM usuarios'; $usuarios = mysqli_query($conexao, $sql); if (mysqli_num_rows($usuarios) > 0) { foreach($usuarios as $usuario) { ?> <tr> <td><?=$usuario['id']?></td> <td><?=$usuario['nome']?></td> <td><?=$usuario['email']?></td> <td><?=date('d/m/Y', strtotime($usuario['data_nascimento']))?></td> <td> <a href="usuario-view.php?id=<?=$usuario['id']?>" class="btn btn-secondary btn-sm"><span class="bi-eye-fill"></span> Visualizar</a> <a href="usuario-edit.php?id=<?=$usuario['id']?>" class="btn btn-success btn-sm"><span class="bi-pencil-fill"></span> Editar</a> <form action="acoes.php" method="POST" class="d-inline"> <button onclick="return confirm('Tem certeza que deseja excluir?')" type="submit" name="delete_usuario" value="<?=$usuario['id']?>" class="btn btn-danger btn-sm"> <span class="bi-trash3-fill"></span> Excluir </button> </form> </td> </tr> <?php } } else { echo '<h5>Nenhum usuário encontrado</h5>'; } ?> </tbody> </table> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html> |
navbar.php
|
1 2 3 4 5 |
<nav class="navbar navbar-dark bg-dark"> <div class="container-md"> <a class="navbar-brand" href="#">CRUD - Canal TI</a> </div> </nav> |
mensagem.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php if (isset($_SESSION['mensagem'])): ?> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <?= $_SESSION['mensagem']; ?> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <?php unset($_SESSION['mensagem']); endif; ?> |
acoes.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<?php session_start(); require 'conexao.php'; if (isset($_POST['create_usuario'])) { $nome = mysqli_real_escape_string($conexao, trim($_POST['nome'])); $email = mysqli_real_escape_string($conexao, trim($_POST['email'])); $data_nascimento = mysqli_real_escape_string($conexao, trim($_POST['data_nascimento'])); $senha = isset($_POST['senha']) ? mysqli_real_escape_string($conexao, password_hash(trim($_POST['senha']), PASSWORD_DEFAULT)) : ''; $sql = "INSERT INTO usuarios (nome, email, data_nascimento, senha) VALUES ('$nome', '$email', '$data_nascimento', '$senha')"; mysqli_query($conexao, $sql); if (mysqli_affected_rows($conexao) > 0) { $_SESSION['mensagem'] = 'Usuário criado com sucesso'; header('Location: index.php'); exit; } else { $_SESSION['mensagem'] = 'Usuário não foi criado'; header('Location: index.php'); exit; } } if (isset($_POST['update_usuario'])) { $usuario_id = mysqli_real_escape_string($conexao, $_POST['usuario_id']); $nome = mysqli_real_escape_string($conexao, trim($_POST['nome'])); $email = mysqli_real_escape_string($conexao, trim($_POST['email'])); $data_nascimento = mysqli_real_escape_string($conexao, trim($_POST['data_nascimento'])); $senha = mysqli_real_escape_string($conexao, trim($_POST['senha'])); $sql = "UPDATE usuarios SET nome = '$nome', email = '$email', data_nascimento = '$data_nascimento'"; if (!empty($senha)) { $sql .= ", senha='" . password_hash($senha, PASSWORD_DEFAULT) . "'"; } $sql .= " WHERE id = '$usuario_id'"; mysqli_query($conexao, $sql); if (mysqli_affected_rows($conexao) > 0) { $_SESSION['mensagem'] = 'Usuário atualizado com sucesso'; header('Location: index.php'); exit; } else { $_SESSION['mensagem'] = 'Usuário não foi atualizado'; header('Location: index.php'); exit; } } if (isset($_POST['delete_usuario'])) { $usuario_id = mysqli_real_escape_string($conexao, $_POST['delete_usuario']); $sql = "DELETE FROM usuarios WHERE id = '$usuario_id'"; mysqli_query($conexao, $sql); if (mysqli_affected_rows($conexao) > 0) { $_SESSION['message'] = 'Usuário deletado com sucesso'; header('Location: index.php'); exit; } else { $_SESSION['message'] = 'Usuário não foi deletado'; header('Location: index.php'); exit; } } ?> |
usuario-create.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Usuário - Criar</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <?php include('navbar.php'); ?> <div class="container mt-5"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h4>Adicionar usuário <a href="index.php" class="btn btn-danger float-end">Voltar</a> </h4> </div> <div class="card-body"> <form action="acoes.php" method="POST"> <div class="mb-3"> <label>Nome</label> <input type="text" name="nome" class="form-control"> </div> <div class="mb-3"> <label>Email</label> <input type="text" name="email" class="form-control"> </div> <div class="mb-3"> <label>Data de Nascimento</label> <input type="date" name="data_nascimento" class="form-control"> </div> <div class="mb-3"> <label>Senha</label> <input type="password" name="senha" class="form-control"> </div> <div class="mb-3"> <button type="submit" name="create_usuario" class="btn btn-primary">Salvar</button> </div> </form> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html> |
usuario-edit.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<?php session_start(); require 'conexao.php'; ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Usuário - Editar</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <?php include('navbar.php'); ?> <div class="container mt-5"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h4>Editar usuário <a href="index.php" class="btn btn-danger float-end">Voltar</a> </h4> </div> <div class="card-body"> <?php if (isset($_GET['id'])) { $usuario_id = mysqli_real_escape_string($conexao, $_GET['id']); $sql = "SELECT * FROM usuarios WHERE id='$usuario_id'"; $query = mysqli_query($conexao, $sql); if (mysqli_num_rows($query) > 0) { $usuario = mysqli_fetch_array($query); ?> <form action="acoes.php" method="POST"> <input type="hidden" name="usuario_id" value="<?=$usuario['id']?>"> <div class="mb-3"> <label>Nome</label> <input type="text" name="nome" value="<?=$usuario['nome']?>" class="form-control"> </div> <div class="mb-3"> <label>Email</label> <input type="text" name="email" value="<?=$usuario['email']?>" class="form-control"> </div> <div class="mb-3"> <label>Data de Nascimento</label> <input type="date" name="data_nascimento" value="<?=$usuario['data_nascimento']?>" class="form-control"> </div> <div class="mb-3"> <label>Senha</label> <input type="password" name="senha" class="form-control"> </div> <div class="mb-3"> <button type="submit" name="update_usuario" class="btn btn-primary">Salvar</button> </div> </form> <?php } else { echo "<h5>Usuário não encontrado</h5>"; } } ?> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html> |
usuario-view.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?php require 'conexao.php'; ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Usuário - Visualizar</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <?php include('navbar.php'); ?> <div class="container mt-5"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h4>Visualizar usuário <a href="index.php" class="btn btn-danger float-end">Voltar</a> </h4> </div> <div class="card-body"> <?php if (isset($_GET['id'])) { $usuario_id = mysqli_real_escape_string($conexao, $_GET['id']); $sql = "SELECT * FROM usuarios WHERE id='$usuario_id'"; $query = mysqli_query($conexao, $sql); if (mysqli_num_rows($query) > 0) { $usuario = mysqli_fetch_array($query); ?> <div class="mb-3"> <label>Nome</label> <p class="form-control"> <?=$usuario['nome'];?> </p> </div> <div class="mb-3"> <label>Email</label> <p class="form-control"> <?=$usuario['email'];?> </p> </div> <div class="mb-3"> <label>Data Nascimento</label> <p class="form-control"> <?=date('d/m/Y', strtotime($usuario['data_nascimento']));?> </p> </div> <?php } else { echo "<h5>Usuário não encontrado</h5>"; } } ?> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html> |
Conclusão
Implementar um sistema CRUD com PHP, MySQL e Bootstrap 5 é, sem dúvida, uma excelente maneira de entender os fundamentos do desenvolvimento web e a interação entre o front-end e o back-end. Ao longo deste tutorial, portanto, exploramos como essas três tecnologias se combinam para criar uma aplicação web funcional e moderna.
Através das operações de Create, Read, Update e Delete, você aprendeu a realizar as tarefas essenciais de gerenciamento de dados, permitindo a criação, visualização, atualização e exclusão de registros de forma dinâmica. Esse conhecimento é, portanto, fundamental para o desenvolvimento de aplicações web mais complexas e robustas no futuro.
Espero que este tutorial tenha fornecido uma base sólida para você continuar explorando e aprimorando suas habilidades em desenvolvimento web. Além disso, a prática contínua e a busca por novos desafios são essenciais para se tornar um desenvolvedor mais competente e versátil. Portanto, continue experimentando, aprendendo e desenvolvendo projetos cada vez mais sofisticados.
 e Bootstrap 5 (Create, Read, Update, Delete) de maneira simples e prática neste guia fácil.){kind=link}