Una sencilla aplicación de lista de tareas pendientes que toma las tareas enviadas por el usuario en un formulario y las guarda en una base de datos MySQL. Las tareas también se recuperan de la base de datos y se muestran en la página web con un botón de eliminación junto a cada tarea. Cuando se hace clic en el botón Eliminar, la tarea se elimina de la base de datos.
Eso es lo que construiremos en este tutorial.
Como de costumbre, vamos a crear nuestra base de datos. Cree una base de datos llamada todo y en él, crea una tabla llamada tareas. La tabla de tareas tiene solo dos campos, a saber:
- id - int(10)
- tarea - varchar(255)
Ahora crea dos archivos:
Ábralos en un editor de texto y pegue el siguiente código dentro del archivo 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>
Si ve su página ahora en el navegador, se verá así:
Agreguemos el estilo. Directamente debajo de la etiqueta
, agregue esta línea para cargar el archivo de hoja de estilo:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Abra el archivo style.css que habíamos creado anteriormente y pegue este código de estilo:</P> <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> <p>
</P> <p>
</P> <p>
</P> <p>
Si actualizamos nuestro navegador ahora, obtenemos esto:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /></P> <p>
Ahora escribimos el código para guardar la tarea enviada a la base de datos. </P> <p>
En la parte superior del archivo index.php, antes de la primera línea, agregue este código:</P> <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> <p>
Lo que esto hace es que, si el usuario hace clic en el botón Enviar, la tarea se guarda en la base de datos. Sin embargo, si no se completó ninguna tarea en el formulario, el valor de la variable $errors se establece en <em>'debe completar la tarea'. </em> Pero eso no se muestra. Mostrémoslo.</P> <p>
Peguemos este código dentro del formulario. Directamente debajo de la etiqueta <form>. Así:</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Si intentamos enviar el formulario con un valor vacío, obtenemos esto:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /></P> <p>
Hasta ahora, nuestra aplicación guarda tareas en la base de datos pero no las muestra.</P> <p>
Lo que debemos hacer es recuperarlos de la base de datos y luego mostrarlos. </P> <p>
Abra el archivo index.php y pegue este código inmediatamente después de la etiqueta </form> de cierre del formulario:</P> <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> <p>
Si ingresamos una tarea en el formulario y presionamos el botón Enviar, obtenemos esto:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /></P> <p>
¡Bueno! </P> <p>
Hagamos que nuestro botón de borrar funcione. En la parte superior de la página, después del bloque if que guarda la tarea en la base de datos, agrega este código:</P> <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> <p>
Eso es todo. Si ahora hacemos clic en el pequeño botón 'x' contra una tarea, esa tarea se elimina en la base de datos.</P> <h3>Conclusión</h3> <p>
Espero que esto te ayude. Una característica que le recomiendo que agregue en esta aplicación solo para ejercitar aún más sus habilidades es agregar la función de edición donde se puede actualizar una publicación incluso después de que se haya creado. Sugerencia:siga mi tutorial sobre CRUD: cree, edite, actualice y elimine publicaciones con la base de datos MySQL</P> <p>
Gracias :D</P> <br>
</section>
</article>
<section id="turn-page" class="flexcenter">
<div class="page up flexalign">
<i class="prev"></i>
<a class='LinkPrevArticle' href='http://www.sqldat.com/es/ges/rpl/1001019458.html' >Gestión de cuentas de usuario, roles, permisos, autenticación PHP y MySQL </a>
</div>
<div class="page down flexalign">
<a class='LinkNextArticle' href='http://www.sqldat.com/es/ges/rpl/1001019460.html' >Cómo crear un blog en PHP y base de datos 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="list2">
<ul class="flexbetween">
<li class="img_article flexbetween">
<div class="ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051109480273_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://www.sqldat.com/es/ges/ljr/1001001684.html">
<p class="row row-3">Cómo eliminar todas las claves principales de todas las tablas en la base de datos de SQL Server - Tutorial de SQL Server / TSQL, parte 65 </p>
</a>
</section>
</li>
<li class="img_article flexbetween">
<div class="ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051310500645_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://www.sqldat.com/es/ges/uss/1001018844.html">
<p class="row row-3">5 beneficios para disfrutar cuando actualiza su base de datos </p>
</a>
</section>
</li>
<li class="img_article flexbetween">
<div class="ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051109483875_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://www.sqldat.com/es/ges/ljr/1001001720.html">
<p class="row row-3">Cómo generar secuencias de comandos de restricción única en la base de datos de SQL Server - Tutorial de SQL Server / TSQL, parte 99 </p>
</a>
</section>
</li>
<li class="img_article flexbetween">
<div class="ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051214233616_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://www.sqldat.com/es/ges/rpl/1001016745.html">
<p class="row row-3">2017 @ Variousnines:celebrando las historias de nuestros clientes </p>
</a>
</section>
</li>
</ul>
</section>
</section>
<aside class="right">
<section class="share">
<div class="share_title">
<i></i>
<h2>Cuota</h2>
</div>
<ul class="share_ico flexstart">
<li><a class="facebook" title="Share on Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://www.sqldat.com/es/ges/rpl/1001019459.html"></a></li>
<li><a class="twitter" title="Tweet" target="_blank" href="https://twitter.com/intent/tweet?source=http://www.sqldat.com/es/ges/rpl/1001019459.html&text=Aplicación de lista de tareas con base de datos PHP y MySQL:http://www.sqldat.com/es/ges/rpl/1001019459.html"></a></li>
<li><a class="linked-in" title="Share on LinkedIn" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=http://www.sqldat.com/es/ges/rpl/1001019459.html&title=Aplicación de lista de tareas con base de datos PHP y MySQL&summary=&source=http://www.sqldat.com/es/ges/rpl/1001019459.html"></a></li>
<li><a class="print" title="Print" target="" href="javascript:window.print && window.print();"></a></li>
</ul>
</section>
<section class="type_list">
<ol>
<li><a class='childclass' href='http://www.sqldat.com/es/ges/jhe/' target="_self">Database</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/rpl/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/ome/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/ljr/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/wul/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/uss/' target="_self">Access</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/ywe/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/igb/' target="_self">MariaDB</a></li>
</ol>
</section>
<section class="list1 article1_list">
<ul class="flexbetween">
<li>
<section class="flexalign">
<div class="ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051209171732_S.png' width='300' height='220' border='0'>
</div>
<a href="https://www.sqldat.com/es/ges/ljr/1001015608.html">
<p class="row row-3">
¿Qué es el PERFIL DE ESTADÍSTICAS en SQL Server? </p>
</a>
</section>
<ol>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001000499.html">
<p class="row row-2">
Cómo eliminar un usuario de base de datos MySQL en cPanel </p>
</a>
</li>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001002088.html">
<p class="row row-2">
Generación de árbol basado en profundidad a partir de datos jerárquicos en MySQL (sin CTE) </p>
</a>
</li>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001014357.html">
<p class="row row-2">
JSON_MERGE_PATCH() vs JSON_MERGE_PRESERVE() en MySQL:¿Cuál es la diferencia? </p>
</a>
</li>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001002951.html">
<p class="row row-2">
MySQL entre la cláusula no inclusiva? </p>
</a>
</li>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001014305.html">
<p class="row row-2">
SYSDATE() vs NOW() en MySQL:¿Cuál es la diferencia? </p>
</a>
</li>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001003122.html">
<p class="row row-2">
Soluciones de escalado para MySQL (Replicación, Clustering) </p>
</a>
</li>
</ol>
</li>
</ul>
</section>
</aside>
</section>
<footer>
<section class="container flexbetween footer_info flexalign">
<a href="https://www.sqldat.com/" class="bottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="flexstart">
© DERECHOS DE AUTOR
<a href="https://www.sqldat.com/">http://www.sqldat.com/</a>
RESERVADOS TODOS LOS DERECHOS
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>