Una aplicación de lista de tareas simple 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 al lado de 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, creemos nuestra base de datos. Crea 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:
Ábrelos en un editor de texto y pega 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
<link rel="stylesheet" type="text/css" href="style.css">
Abra el archivo style.css que habíamos creado anteriormente y pegue este código de estilo en él:
.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;
}
Si actualizamos nuestro navegador ahora, obtenemos esto:
Ahora escribimos el código para guardar la tarea enviada en la base de datos.
En la parte superior del archivo index.php, antes de la primera línea, agregue este código:
<?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');
}
}
// ...
Lo que hace esto 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 $ errores se establece en ‘debe completar la tarea’. Pero eso no se muestra. Vamos a mostrarlo.
Peguemos este código dentro del formulario. Directamente debajo de la etiqueta
de cierre del formulario:
//...
// </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>
Si ingresamos una tarea en el formulario y presionamos el botón de enviar, obtenemos esto:
¡Bien!
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, agregue este código:
// delete task
if (isset($_GET['del_task'])) {
$id = $_GET['del_task'];
mysqli_query($db, "DELETE FROM tasks WHERE id=".$id);
header('location: index.php');
}
?>
Eso es todo. Si hacemos clic en el pequeño botón ‘x’ ahora contra una tarea, esa tarea se elimina de la base de datos.
Conclusión
Espero que esto te ayude. Una característica que le recomiendo que agregue a esta aplicación solo para ejercitar aún más sus habilidades es agregar la función de edición donde una publicación se puede actualizar incluso después de haber sido creada. Sugerencia: siga mi tutorial sobre CRUD: cree, edite, actualice y elimine publicaciones con la base de datos MySQL
Gracias: D
Awa Melvine