Um aplicativo simples de lista de tarefas que recebe tarefas enviadas pelo usuário em um formulário e as salva em um banco de dados MySQL. As tarefas também são recuperadas do banco de dados e exibidas na página da Web com um botão de exclusão ao lado de cada tarefa. Quando o botão de exclusão é clicado, a tarefa é excluída do banco de dados.
É isso que vamos construir neste tutorial.
Como de costume, vamos criar nosso banco de dados. Crie um banco de dados chamado todo e nela, crie uma tabela chamada tarefas. A tabela de tarefas tem apenas dois campos, a saber:
- id - int(10)
- tarefa - varchar(255)
Agora crie dois arquivos:
Abra-os em um editor de texto e cole o seguinte código dentro do arquivo index.php:
<!DOCTYPE html>
<html>
<head>
<title>ToDo List Application PHP and MySQL</title>
</head>
<body>
<div class="heading">
<h2 style="font-style: 'Hervetica';">ToDo List Application PHP and MySQL database</h2>
</div>
<form method="post" action="index.php" class="input_form">
<input type="text" name="task" class="task_input">
<button type="submit" name="submit" id="add_btn" class="add_btn">Add Task</button>
</form>
</body>
</html>
Se você visualizar sua página agora no navegador, será algo assim:
Vamos adicionar o estilo. Diretamente sob a tag , adicione esta linha para carregar o arquivo de folha de estilo:<br> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <br> Abra o arquivo style.css que criamos anteriormente e cole este código de estilo nele:<br> <pre><code>.heading{
width: 50%;
margin: 30px auto;
text-align: center;
color: #6B8E23;
background: #FFF8DC;
border: 2px solid #6B8E23;
border-radius: 20px;
}
form {
width: 50%;
margin: 30px auto;
border-radius: 5px;
padding: 10px;
background: #FFF8DC;
border: 1px solid #6B8E23;
}
form p {
color: red;
margin: 0px;
}
.task_input {
width: 75%;
height: 15px;
padding: 10px;
border: 2px solid #6B8E23;
}
.add_btn {
height: 39px;
background: #FFF8DC;
color: #6B8E23;
border: 2px solid #6B8E23;
border-radius: 5px;
padding: 5px 20px;
}
table {
width: 50%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th {
font-size: 19px;
color: #6B8E23;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #E9E9E9;
}
.task {
text-align: left;
}
.delete{
text-align: center;
}
.delete a{
color: white;
background: #a52a2a;
padding: 1px 6px;
border-radius: 3px;
text-decoration: none;
}
</code></pre> <br> <br> <br> <br> <br> <br> <br> Se atualizarmos nosso navegador agora, obteremos isso:<br> <br> <img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /> <br> <br> Agora escrevemos o código para salvar a tarefa enviada no banco de dados. <br> <br> No topo do arquivo index.php, antes da primeira linha, adicione este código:<br> <pre><code><?php
// initialize errors variable
$errors = "";
// connect to database
$db = mysqli_connect("localhost", "root", "", "todo");
// insert a quote if submit button is clicked
if (isset($_POST['submit'])) {
if (empty($_POST['task'])) {
$errors = "You must fill in the task";
}else{
$task = $_POST['task'];
$sql = "INSERT INTO tasks (task) VALUES ('$task')";
mysqli_query($db, $sql);
header('location: index.php');
}
}
// ...</code></pre> <br> O que isso faz é que, se o usuário clicar no botão enviar, a tarefa é salva no banco de dados. No entanto, se nenhuma tarefa foi preenchida no formulário, o valor da variável $errors será definido como <em>'você deve preencher a tarefa'. </em> Mas isso não é exibido. Vamos exibi-lo. <br> <br> Vamos colar este código dentro do formulário. Diretamente sob a tag <form>. Assim:<br> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <br> Se tentarmos enviar o formulário com um valor vazio, obtemos isso:<br> <br> <img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /> <br> <br> Até agora, nosso aplicativo salva tarefas no banco de dados, mas não as exibe. <br> <br> O que precisamos fazer é recuperá-los do banco de dados e exibi-los. <br> <br> Abra o arquivo index.php e cole este código imediatamente após a tag </form> de fechamento do formulário:<br> <pre><code>//...
// </form>
<table>
<thead>
<tr>
<th>N</th>
<th>Tasks</th>
<th style="width: 60px;">Action</th>
</tr>
</thead>
<tbody>
<?php
// select all tasks if page is visited or refreshed
$tasks = mysqli_query($db, "SELECT * FROM tasks");
$i = 1; while ($row = mysqli_fetch_array($tasks)) { ?>
<tr>
<td> <?php echo $i; ?> </td>
<td class="task"> <?php echo $row['task']; ?> </td>
<td class="delete">
<a href="index.php?del_task=<?php echo $row['id'] ?>">x</a>
</td>
</tr>
<?php $i++; } ?>
</tbody>
</table></code></pre> <br> Se inserirmos uma tarefa no formulário e clicarmos no botão enviar, obtemos isto:<br> <br> <img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /> <br> <br> Bom! <br> <br> Vamos fazer nosso botão delete funcionar. Na parte superior da página, após o bloco if que salva a tarefa no banco de dados, adicione este código:<br> <pre><code>
// delete task
if (isset($_GET['del_task'])) {
$id = $_GET['del_task'];
mysqli_query($db, "DELETE FROM tasks WHERE id=".$id);
header('location: index.php');
}
?></code></pre> <br> Isso é tudo. Se clicarmos no pequeno botão 'x' agora em uma tarefa, essa tarefa será excluída do banco de dados. <br> <h3>Conclusão</h3> <br> Espero que isso ajude você. Um recurso que eu recomendo que você adicione neste aplicativo apenas para exercitar ainda mais suas habilidades é adicionar o recurso de edição, onde uma postagem pode ser atualizada mesmo depois de criada. Dica:siga meu tutorial sobre CRUD: Crie, edite, atualize e exclua postagens com o banco de dados MySQL <br> <br> Obrigado :D <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/1005019458.html' >Gerenciamento de contas de usuários, funções, permissões, autenticação 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/1005019460.html' >Como criar um blog em banco de dados PHP e MySQL - Backend </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/2022051216033788_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://pt.sqldat.com/xvs/oml/1005018512.html">
<p class="row pt_row-3">Instalando os drivers MySQL JDBC nas ferramentas Pentaho Data Integration e BA Server </p>
</a>
</section>
</li>
<li class="img_articlept flexbetweenptou">
<div class="pt_ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051313461507_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://pt.sqldat.com/xvs/ljs/1005018976.html">
<p class="row pt_row-3">Como converter um relatório do Microsoft Access em PDF (3 maneiras) </p>
</a>
</section>
</li>
<li class="img_articlept flexbetweenptou">
<div class="pt_ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051114224889_S.jpg' width='300' height='220' border='0'>
</div>
<section>
<a href="https://pt.sqldat.com/xvs/hfl/1005008231.html">
<p class="row pt_row-3">Obtendo todos os edifícios no alcance de 5 milhas de coordenadas especificadas </p>
</a>
</section>
</li>
<li class="img_articlept flexbetweenptou">
<div class="pt_ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051315035181_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://pt.sqldat.com/xvs/wur/1005019170.html">
<p class="row pt_row-3">Saiba mais sobre como usar o SQL Server Management Studio </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/1005019459.html"></a></li>
<li><a class="twitter" title="Tweet" target="_blank" href="https://twitter.com/intent/tweet?source=http://pt.sqldat.com/xvs/oml/1005019459.html&text=Aplicativo de lista de tarefas usando PHP e banco de dados MySQL:http://pt.sqldat.com/xvs/oml/1005019459.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/1005019459.html&title=Aplicativo de lista de tarefas usando PHP e banco de dados MySQL&summary=&source=http://pt.sqldat.com/xvs/oml/1005019459.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/2022051415291659_S.png' width='300' height='220' border='0'>
</div>
<a href="https://pt.sqldat.com/xvs/wur/1005020701.html">
<p class="row pt_row-3">
Aprimoramentos do tempdb no SQL Server 2019 </p>
</a>
</section>
<ol>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005000204.html">
<p class="row pt_row-2">
Tutorial de como fazer backup e restaurar (exportar e importar) bancos de dados MySQL </p>
</a>
</li>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005002598.html">
<p class="row pt_row-2">
Consultando vários bancos de dados ao mesmo tempo </p>
</a>
</li>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005002884.html">
<p class="row pt_row-2">
Como armazenar unicode no MySQL? </p>
</a>
</li>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005002195.html">
<p class="row pt_row-2">
PDO obtém o último ID inserido </p>
</a>
</li>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005002517.html">
<p class="row pt_row-2">
Como encontrar lacunas na numeração sequencial no mysql? </p>
</a>
</li>
<li class="flexstart_pt">
<a href="https://pt.sqldat.com/xvs/oml/1005002041.html">
<p class="row pt_row-2">
Como você define um valor padrão para uma coluna MySQL Datetime? </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>