Criar, editar, atualizar e excluir conteúdo em um site é o que torna o site dinâmico. É o que vamos fazer neste post.
Um usuário que visitar nosso site poderá criar postagens que serão salvas em um banco de dados mysql, recuperar as postagens do banco de dados e exibi-las na página da Web. Cada postagem será exibida com um botão de edição e exclusão para permitir que o usuário atualize as postagens, bem como exclua-as.
Primeiro, crie um banco de dados chamado crud. No banco de dados bruto, crie uma tabela chamada info. A tabela de informações deve ter as seguintes colunas:
-
id - int(11)
- nome - varchar(100)
- endereço - varchar(100)
Sim! Apenas dois campos. Estou tentando manter as coisas simples aqui. então, vamos para o próximo passo.
Crie um arquivo chamado index.php e cole nele o seguinte código:
<!DOCTYPE html>
<html>
<head>
<title>CRUD: CReate, Update, Delete PHP MySQL</title>
</head>
<body>
<form method="post" action="server.php" >
<div class="input-group">
<label>Name</label>
<input type="text" name="name" value="">
</div>
<div class="input-group">
<label>Address</label>
<input type="text" name="address" value="">
</div>
<div class="input-group">
<button class="btn" type="submit" name="save" >Save</button>
</div>
</form>
</body>
</html>
Se você salvar e abrir o site em seu navegador, obterá algo assim:
Não parece a melhor forma do mundo né? Vamos consertar isso. Adicione esta linha diretamente abaixo da tag na seção head do seu arquivo index.php:<br> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <br> Esse é o link para carregar o estilo do arquivo de folha de estilo. Vamos criar o arquivo styles.css e adicionar este código de estilo nele. <br> <pre><code>body {
font-size: 19px;
}
table{
width: 50%;
margin: 30px auto;
border-collapse: collapse;
text-align: left;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #F5F5F5;
}
form {
width: 45%;
margin: 50px auto;
text-align: left;
padding: 20px;
border: 1px solid #bbbbbb;
border-radius: 5px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.edit_btn {
text-decoration: none;
padding: 2px 5px;
background: #2E8B57;
color: white;
border-radius: 3px;
}
.del_btn {
text-decoration: none;
padding: 2px 5px;
color: white;
border-radius: 3px;
background: #800000;
}
.msg {
margin: 30px auto;
padding: 10px;
border-radius: 5px;
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
width: 50%;
text-align: center;
}</code></pre> <br> Agora vamos verificar nosso formulário no navegador novamente:<br> <br> <img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463381.png" /> <br> <br> Isso é melhor! <br> <br> Eu geralmente gosto de separar meu código HTML do meu código PHP o máximo possível. Considero isso uma boa prática. Nessa nota, vamos criar outro arquivo chamado php_code.php onde implementamos todas as funcionalidades do php como conectar ao banco de dados, consultar o banco de dados e afins. <br> <br> Então abra php_code.php e cole o seguinte código nele:<br> <pre><code><?php
session_start();
$db = mysqli_connect('localhost', 'root', '', 'crud');
// initialize variables
$name = "";
$address = "";
$id = 0;
$update = false;
if (isset($_POST['save'])) {
$name = $_POST['name'];
$address = $_POST['address'];
mysqli_query($db, "INSERT INTO info (name, address) VALUES ('$name', '$address')");
$_SESSION['message'] = "Address saved";
header('location: index.php');
}
// ...</code></pre> <br> Agora inclua este arquivo no topo (a primeira linha) do seu arquivo index.php. Igual a:<br> <pre><code><?php include('server.php'); ?></code></pre> <br> Neste ponto, tudo o que esse código faz é se conectar ao banco de dados, inicializar algumas variáveis e salvar os dados enviados do formulário para o banco de dados nas informações que criamos anteriormente. Essa é apenas a parte CReate do CRUD. Vamos prosseguir com os outros. <br> <br> Agora visite novamente seu arquivo index.php e adicione este código logo abaixo da tag <body>:<br> <pre><code>// ...
<body>
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?></code></pre> <br> Esse código exibe uma mensagem de confirmação para informar ao usuário que um novo registro foi criado no banco de dados. <br> <br> Para recuperar os registros do banco de dados e exibi-los na página, adicione este código imediatamente acima do formulário de entrada:<br> <pre><code><?php $results = mysqli_query($db, "SELECT * FROM info"); ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th colspan="2">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['address']; ?></td>
<td>
<a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
</td>
<td>
<a href="server.php?del=<?php echo $row['id']; ?>" class="del_btn">Delete</a>
</td>
</tr>
<?php } ?>
</table>
<form>
// ...</code></pre> <br> Vamos criar um novo registro e ver se isso funciona:<br> <br> <img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463338.png" /> <br> <br> ..e voilá!! Funciona perfeito! <br> <br> Agora vamos para a edição. No topo do seu arquivo index.php (imediatamente após a instrução include) adicione o seguinte código:<br> <pre><code><?php
if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM info WHERE id=$id");
if (count($record) == 1 ) {
$n = mysqli_fetch_array($record);
$name = $n['name'];
$address = $n['address'];
}
}
?></code></pre> <br> Ao editar um registro do banco de dados, precisamos colocar os valores antigos no formulário para que possam ser modificados. Para fazer isso, vamos modificar nossos campos de entrada no formulário e definir esses valores retirados do banco de dados ($name, $address) como valores para o <strong>value</strong> atributo dos campos do formulário. <br> <br> Adicione também um campo oculto para conter o id do registro que iremos atualizar para que possa ser reconhecido no banco de dados exclusivamente por seu id. Isso explica melhor:<br> <pre><code>// newly added field
<input type="hidden" name="id" value="<?php echo $id; ?>">
// modified form fields
<input type="text" name="name" value="<?php echo $name; ?>">
<input type="text" name="address" value="<?php echo $address; ?>"></code></pre> <br> Lembre-se de que tudo isso está na entrada <form>. <br> <br> Agora, se clicarmos no botão editar em um determinado registro do banco de dados, os valores serão preenchidos no formulário e poderemos editá-los. Como estamos editando no mesmo formulário de quando estamos criando, temos que colocar uma condição que determine o botão apropriado a ser exibido. Por exemplo, ao editar, exibimos o botão atualizar no formulário e ao criar, exibimos o botão salvar. Fazemos isso usando a <strong>atualização </strong> variável que é booleana. Quando a atualização for verdadeira, o botão atualizar é exibido e, se for falso, o botão salvar é exibido. <br> <br> Substitua seu botão salvar no formulário assim:<br> <br> Substituir .. <br> <pre><code><button class="btn" type="submit" name="save" >Save</button></code></pre> <br> com... <br> <pre><code><?php if ($update == true): ?>
<button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
<button class="btn" type="submit" name="save" >Save</button>
<?php endif ?></code></pre> <br> Agora, se executarmos isso no navegador e clicarmos no botão editar, obteremos isso:<br> <br> <img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463388.png" /> <br> <br> Agora você pode ver que é o botão de atualização que é exibido. Vamos adicionar o código que será executado quando este botão for clicado. <br> <br> Abra o arquivo php_code.php e adicione este código no botão:<br> <pre><code>// ...
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$address = $_POST['address'];
mysqli_query($db, "UPDATE info SET name='$name', address='$address' WHERE id=$id");
$_SESSION['message'] = "Address updated!";
header('location: index.php');
}</code></pre> <br> Agora altere os valores no formulário e clique no botão de atualização. <br> <br> <img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463390.png" /> <br> <br> Excelente! <br> <br> Uma última coisa:excluir registros. Basta adicionar este código no final do seu arquivo php_code.php e pronto:<br> <pre><code>if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM info WHERE id=$id");
$_SESSION['message'] = "Address deleted!";
header('location: index.php');
}</code></pre> <br> Se você clicar no botão excluir, ele excluirá o registro do banco de dados e exibirá a mensagem da mesma forma que as outras ações. <br> <br> <br> <h3> </h3> <h2>Conclusão</h2> <br> Isso nos leva ao final deste tutorial. Espero que tenha sido útil e que valha o seu tempo. Estou muito honrado por sua paciência em ter seguido isso até o fim. Se você gostou deste tutorial, compartilhe-o com seus amigos clicando em qualquer um dos ícones de mídia social abaixo. Não se esqueça de verificar meus outros tutoriais neste site. <br> <br> Obrigado <br> <br>
</section>
</article>
<section id="turn-page" class="flexcentptw">
<div class="page up flexalign_ptqew">
<i class="prev"></i>
<em class="yowpwem12"></em>
<a class='LinkPrevArticle' href='http://pt.sqldat.com/xvs/oml/1005019451.html' >Sistema completo de cadastro de usuários utilizando banco de dados PHP e MySQL </a>
<span class="eouthgespan78"></span>
</div>
<p class="jfhoepwpage78"></p>
<div class="page down flexalign_ptqew">
<span class="fhowuspany58"></span>
<a class='LinkNextArticle' href='http://pt.sqldat.com/xvs/oml/1005019453.html' >Como fazer upload e download de arquivos PHP e MySQL </a>
<i class="next"></i>
</div>
</section>
<div class="ad5">
<script language='javascript' src='http://www.sqldat.com/css/ad/2.js'></script>
</div>
<section class="ptlist2">
<ul class="flexbetweenptou">
<li class="img_articlept flexbetweenptou">
<div class="pt_ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051310430894.jpeg' width='300' height='220' border='0'>
</div>
<section>
<a href="https://pt.sqldat.com/xvs/ljs/1005018704.html">
<p class="row pt_row-3">Otimizando o Microsoft Access com SQL Server IndyPass – 21/05/19 </p>
</a>
</section>
</li>
<li class="img_articlept flexbetweenptou">
<div class="pt_ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051014124176_S.jpg' width='300' height='220' border='0'>
</div>
<section>
<a href="https://pt.sqldat.com/xvs/oml/1005000459.html">
<p class="row pt_row-3">10 dicas úteis sobre o ajuste de desempenho do MySQL</p>
</a>
</section>
</li>
<li class="img_articlept flexbetweenptou">
<div class="pt_ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051016062179_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://pt.sqldat.com/xvs/ywe/1005000869.html">
<p class="row pt_row-3">Principais consultas úteis do AWR para atualização R12.2/R12.1 </p>
</a>
</section>
</li>
<li class="img_articlept flexbetweenptou">
<div class="pt_ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051415590497_S.jpg' width='300' height='220' border='0'>
</div>
<section>
<a href="https://pt.sqldat.com/xvs/wur/1005020829.html">
<p class="row pt_row-3">Script de inventário de coleção do SQL Server -3 </p>
</a>
</section>
</li>
</ul>
</section>
</section>
<aside class="right">
<section class="share">
<div class="ptshare_title">
<i></i>
<h2>Compartilhar</h2>
</div>
<ul class="share_ptico flexstart_pt">
<li><a class="facebook" title="Share on Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://pt.sqldat.com/xvs/oml/1005019452.html"></a></li>
<li><a class="twitter" title="Tweet" target="_blank" href="https://twitter.com/intent/tweet?source=http://pt.sqldat.com/xvs/oml/1005019452.html&text=PHP CRUD Crie, edite, atualize e exclua postagens com banco de dados MySQL:http://pt.sqldat.com/xvs/oml/1005019452.html"></a></li>
<li><a class="linked-in" title="Share on LinkedIn" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=http://pt.sqldat.com/xvs/oml/1005019452.html&title=PHP CRUD Crie, edite, atualize e exclua postagens com banco de dados MySQL&summary=&source=http://pt.sqldat.com/xvs/oml/1005019452.html"></a></li>
<li><a class="print" title="Print" target="" href="javascript:window.print && window.print();"></a></li>
</ul>
</section>
<section class="type_ptlist">
<ol>
<li><a class='childclass' href='http://pt.sqldat.com/xvs/qoe/' target="_self">Database</a></li> <li><a class='childclass' href='http://pt.sqldat.com/xvs/oml/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://pt.sqldat.com/xvs/ywe/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://pt.sqldat.com/xvs/wur/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://pt.sqldat.com/xvs/hfl/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://pt.sqldat.com/xvs/ljs/' target="_self">Access</a></li> <li><a class='childclass' href='http://pt.sqldat.com/xvs/ige/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://pt.sqldat.com/xvs/trb/' target="_self">MariaDB</a></li>
</ol>
</section>
<section class="pt_list1 article1_ptlist">
<ul class="flexbetweenptou">
<li>
<section class="flexalign_ptqew">
<div class="pt_ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051310434767.png' width='300' height='220' border='0'>
</div>
<a href="https://pt.sqldat.com/xvs/ljs/1005018713.html">
<p class="row pt_row-3">
Novos recursos do Microsoft Access chegando! </p>
</a>
</section>
<ol>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005018538.html">
<p class="row pt_row-2">
MySQL – MENOS e MAIORES operadores de comparação </p>
</a>
</li>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005014236.html">
<p class="row pt_row-2">
Qual é o equivalente MySQL de STUFF() no SQL Server? </p>
</a>
</li>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005000605.html">
<p class="row pt_row-2">
Como instalar o phpMyAdmin em seu próprio aplicativo </p>
</a>
</li>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005018511.html">
<p class="row pt_row-2">
Engenharia reversa de um banco de dados MySQL usando o MySQL Workbench </p>
</a>
</li>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005019168.html">
<p class="row pt_row-2">
Diferenças entre bancos de dados SQL e NoSQL – Comparação MySQL e MongoDB </p>
</a>
</li>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005000432.html">
<p class="row pt_row-2">
Como importar e exportar um banco de dados via SSH </p>
</a>
</li>
</ol>
</li>
</ul>
</section>
</aside>
</section>
<footer>
<section class="containerpt flexbetweenptou footer_infoptyw flexalign_ptqew">
<a href="https://pt.sqldat.com" class="bottom_logoptv">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="flexstart_pt">
© DIREITOS AUTORAIS
<a href="https://pt.sqldat.com">http://pt.sqldat.com</a>
TODOS OS DIREITOS RESERVADOS
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>