Como criar CRUD com PHP, MySQL e Bootstrap
Neste artigo, você vai aprender a como criar uma aplicação CRUD com PHP, MySQL usando Bootstrap 5, vamos começar.
🚨DICA: Crie um projeto de programação web com HTML5, CSS3 e JavaScript do zero em 3 aulas: MiniCurso Gratuito! 🚀
O sistema será um cadastro de alunos onde você poderá criar um aluno novo, vizualizaar os dados desse aluno, editar estes dados e também, excluir o registro completo dele. Com isso, usando as 4 operações básicas dos bancos de dados e assim tendo o nosso CRUD.
1 – Criação do banco de dados e as tabelas
Passo 1:Crie o banco de dados no phpMyAdmin com o nome: crud-php-bootstrap.
Após a criação do banco de dados, crie as tabelas com o código abaixo para começar com aplicativos CRUD usando PHP e MySQL.
CREATE TABLE students (
id INT(6) AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(191) NOT NULL,
email VARCHAR(191) NOT NULL,
phone VARCHAR(191) NOT NULL,
course VARCHAR(191) NOT NULL
)Atenção! Descubra os melhores cursos de programação neste guia especial: Cursos de Programação.
2 – Criação página onde cadastraremos os dados do aluno
Passo 2: Crie um arquivo chamado student-create.php e cole o código do formulário para salvar os dados:
<?php
session_start();
?>
<!doctype html>
<html lang="pt-BR">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Criar aluno</title>
</head>
<body>
<div class="container mt-5">
<?php include('message.php'); ?>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>Adicionar aluno
<a href="index.php" class="btn btn-danger float-end">VOLTAR</a>
</h4>
</div>
<div class="card-body">
<form action="code.php" method="POST">
<div class="mb-3">
<label>Nome</label>
<input type="text" name="name" class="form-control">
</div>
<div class="mb-3">
<label>Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="mb-3">
<label>Telefone</label>
<input type="text" name="phone" class="form-control">
</div>
<div class="mb-3">
<label>Curso</label>
<input type="text" name="course" class="form-control">
</div>
<div class="mb-3">
<button type="submit" name="save_student" class="btn btn-primary">Salvar Aluno</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>3 – Criação do arquivo de conexão com o banco de dados
Passo 3: Crie um arquivo dbcon.php para a conexão do banco de dados no PHP MySQL.
<?php
$con = mysqli_connect("localhost","root","","crud-php-bootstrap");
if(!$con){
die('Connection Failed'. mysqli_connect_error());
}
?>4 – Criar o arquivo de mensagem após executar ações
Passo 4: Crie um arquivo chamado message.php que será usado para exibir a mensagem em cada arquivo necessário.
<?php
if(isset($_SESSION['message'])) :
?>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Ei!</strong> <?= $_SESSION['message']; ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php
unset($_SESSION['message']);
endif;
?>5 – Criação do index onde mostrará todos os alunos dentro do sistema
Passo 5: Crie um arquivo chamado index.php e busque os dados do banco de dados conforme mostrado no código abaixo:
<?php
session_start();
require 'dbcon.php';
?>
<!doctype html>
<html lang="pt-BR">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>CRUD PHP</title>
</head>
<body>
<div class="container mt-4">
<?php include('message.php'); ?>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>Detalhes do aluno
<a href="student-create.php" class="btn btn-primary float-end">Adicionar Aluno</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>Telefone</th>
<th>Curso</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT * FROM students";
$query_run = mysqli_query($con, $query);
if(mysqli_num_rows($query_run) > 0)
{
foreach($query_run as $student)
{
?>
<tr>
<td><?= $student['id']; ?></td>
<td><?= $student['name']; ?></td>
<td><?= $student['email']; ?></td>
<td><?= $student['phone']; ?></td>
<td><?= $student['course']; ?></td>
<td>
<a href="student-view.php?id=<?= $student['id']; ?>" class="btn btn-info btn-sm">Visualizar</a>
<a href="student-edit.php?id=<?= $student['id']; ?>" class="btn btn-success btn-sm">Editar</a>
<form action="code.php" method="POST" class="d-inline">
<button type="submit" name="delete_student" value="<?=$student['id'];?>" class="btn btn-danger btn-sm">Deletar</button>
</form>
</td>
</tr>
<?php
}
}
else
{
echo "<h5> Nenhum aluno cadastrado </h5>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>6 – Criar o arquivo de edição dos alunos
Passo 6: Crie um arquivo chamado student-edit.php para editar e atualizar dados em php:
<?php
session_start();
require 'dbcon.php';
?>
<!doctype html>
<html lang="pt-BR">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Student Edit</title>
</head>
<body>
<div class="container mt-5">
<?php include('message.php'); ?>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>Editar aluno
<a href="index.php" class="btn btn-danger float-end">VOLTAR</a>
</h4>
</div>
<div class="card-body">
<?php
if(isset($_GET['id']))
{
$student_id = mysqli_real_escape_string($con, $_GET['id']);
$query = "SELECT * FROM students WHERE id='$student_id' ";
$query_run = mysqli_query($con, $query);
if(mysqli_num_rows($query_run) > 0)
{
$student = mysqli_fetch_array($query_run);
?>
<form action="code.php" method="POST">
<input type="hidden" name="student_id" value="<?= $student['id']; ?>">
<div class="mb-3">
<label>Nome</label>
<input type="text" name="name" value="<?=$student['name'];?>" class="form-control">
</div>
<div class="mb-3">
<label>Email</label>
<input type="email" name="email" value="<?=$student['email'];?>" class="form-control">
</div>
<div class="mb-3">
<label>Telefone</label>
<input type="text" name="phone" value="<?=$student['phone'];?>" class="form-control">
</div>
<div class="mb-3">
<label>Curso</label>
<input type="text" name="course" value="<?=$student['course'];?>" class="form-control">
</div>
<div class="mb-3">
<button type="submit" name="update_student" class="btn btn-primary">
Atualizar Aluno
</button>
</div>
</form>
<?php
}
else
{
echo "<h4>Nenhum ID encontrado</h4>";
}
}
?>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>7 – Criação do arquivo onde será visualizado as informação dos alunos individualmente
Passo 7: Crie um arquivo chamado student-view.php e exiba os dados por id específico.
<?php
require 'dbcon.php';
?>
<!doctype html>
<html lang="pt-BR">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Detalhes do aluno</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>Dados do aluno
<a href="index.php" class="btn btn-danger float-end">VOLTAR</a>
</h4>
</div>
<div class="card-body">
<?php
if(isset($_GET['id']))
{
$student_id = mysqli_real_escape_string($con, $_GET['id']);
$query = "SELECT * FROM students WHERE id='$student_id' ";
$query_run = mysqli_query($con, $query);
if(mysqli_num_rows($query_run) > 0)
{
$student = mysqli_fetch_array($query_run);
?>
<div class="mb-3">
<label>Nome</label>
<p class="form-control">
<?=$student['name'];?>
</p>
</div>
<div class="mb-3">
<label>Email</label>
<p class="form-control">
<?=$student['email'];?>
</p>
</div>
<div class="mb-3">
<label>Telefone</label>
<p class="form-control">
<?=$student['phone'];?>
</p>
</div>
<div class="mb-3">
<label>Curso</label>
<p class="form-control">
<?=$student['course'];?>
</p>
</div>
<?php
}
else
{
echo "<h4>Nenhum ID encontrado</h4>";
}
}
?>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>8 – Criar o arquivo onde fará as operações de CRUD
Passo 8: Crie um arquivo chamado code.php e cole o código abaixo.
Este arquivo é sobre dados de envio de formulários, inserimos, atualizamos e excluímos dados no código php mysql da seguinte forma:
<?php
session_start();
require 'dbcon.php';
if(isset($_POST['delete_student']))
{
$student_id = mysqli_real_escape_string($con, $_POST['delete_student']);
$query = "DELETE FROM students WHERE id='$student_id' ";
$query_run = mysqli_query($con, $query);
if($query_run)
{
$_SESSION['message'] = "Aluno excluido com sucesso";
header("Location: index.php");
exit(0);
}
else
{
$_SESSION['message'] = "Não foi possivel excluir o aluno";
header("Location: index.php");
exit(0);
}
}
if(isset($_POST['update_student']))
{
$student_id = mysqli_real_escape_string($con, $_POST['student_id']);
$name = mysqli_real_escape_string($con, $_POST['name']);
$email = mysqli_real_escape_string($con, $_POST['email']);
$phone = mysqli_real_escape_string($con, $_POST['phone']);
$course = mysqli_real_escape_string($con, $_POST['course']);
$query = "UPDATE students SET name='$name', email='$email', phone='$phone', course='$course' WHERE id='$student_id' ";
$query_run = mysqli_query($con, $query);
if($query_run)
{
$_SESSION['message'] = "Aluno atualizado com sucesso";
header("Location: index.php");
exit(0);
}
else
{
$_SESSION['message'] = "Aluno não atualizado";
header("Location: index.php");
exit(0);
}
}
if(isset($_POST['save_student']))
{
$name = mysqli_real_escape_string($con, $_POST['name']);
$email = mysqli_real_escape_string($con, $_POST['email']);
$phone = mysqli_real_escape_string($con, $_POST['phone']);
$course = mysqli_real_escape_string($con, $_POST['course']);
$query = "INSERT INTO students (name,email,phone,course) VALUES ('$name','$email','$phone','$course')";
$query_run = mysqli_query($con, $query);
if($query_run)
{
$_SESSION['message'] = "Aluno cadastrado com sucesso!";
header("Location: student-create.php");
exit(0);
}
else
{
$_SESSION['message'] = "Aluno não cadastrado";
header("Location: student-create.php");
exit(0);
}
}
?>Conclusão
Espero que tenham gostado, é o básico sobre banco de dados entender dessas operações.
Para criar sistemas bem mais complexos e se tornar de fato um desenvolvedor web completo, façam este treinamento que está no banner abaixo:
Leia também: Como criar notificação de cookies com HTML, CSS e Javascript
Conteúdo similar:
