Crear una lista de tareas sencilla
Cree una aplicación básica de lista de tareas con PHP y HTML
Crear una lista de tareas sencilla es una lección gratuita de PHP Academy en CoddyKit. Esta es la lección 1 de 2. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de PHP Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de PHP Academy incluye 2 lecciones en total.
Introducción al proyecto de lista de tareas
Crear una lista de tareas sencilla
¡Bienvenido a la lección sobre cómo crear una lista de tareas sencilla! En este proyecto, aprenderá a crear una aplicación PHP para añadir, mostrar y eliminar tareas. ¡Comencemos!
Configurar el proyecto
Configurar el proyecto
Antes de comenzar, asegúrese de tener lo siguiente:
- Un servidor web como XAMPP o WAMP.
- Un editor de texto o IDE (por ejemplo, VS Code).
- Un archivo llamado
todo.phpen el directorio del proyecto.
Punto clave: Este proyecto utilizará sesiones de PHP para almacenar temporalmente las tareas.
Crear la estructura HTML básica
Crear la estructura HTML básica
Comience por crear el diseño HTML de su aplicación de lista de tareas. Ejemplo:
Consejo: Utilice el elemento ul para mostrar la lista de tareas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<form action="todo.php" method="post">
<input type="text" name="task" placeholder="Enter a new task" required>
<button type="submit" name="add">Add Task</button>
</form>
<ul>
<!-- Task list will appear here -->
</ul>
</body>
</html>
Iniciar la sesión de PHP
Iniciar la sesión de PHP
Utilice sesiones de PHP para almacenar las tareas entre solicitudes. Añada este código al principio del archivo todo.php:
Punto clave: Las sesiones permiten conservar los datos mientras navega entre páginas.
<?php
session_start();
if (!isset($_SESSION['tasks'])) {
$_SESSION['tasks'] = [];
}
?>
Añadir tareas a la lista
Agregar tareas a la lista
Procese el envío del formulario para agregar una tarea nueva a la sesión. Ejemplo:
Consejo: Use trim() para eliminar los espacios innecesarios de los datos introducidos por el usuario.
<?php
if (isset($_POST['add'])) {
$task = trim($_POST['task']);
if (!empty($task)) {
$_SESSION['tasks'][] = $task;
}
}
?>
Mostrar la lista de tareas
Mostrar la lista de tareas
Use un bucle para mostrar las tareas almacenadas en la sesión. Ejemplo:
Punto clave: Cada tarea incluye un botón de eliminación para quitarla de la lista.
<ul>
<?php
if (!empty($_SESSION['tasks'])) {
foreach ($_SESSION['tasks'] as $key => $task) {
echo "<li>$task <form style='display:inline;' method='post'><button type='submit' name='delete' value='$key'>Delete</button></form></li>";
}
} else {
echo "<li>No tasks added yet.</li>";
}
?>
</ul>
Eliminar una tarea
Eliminar una tarea
Procese el envío asociado al botón de eliminación para quitar tareas. Ejemplo:
Consejo: Reindexar garantiza que los índices de las tareas sigan siendo coherentes después de una eliminación.
<?php
if (isset($_POST['delete'])) {
$key = $_POST['delete'];
unset($_SESSION['tasks'][$key]);
$_SESSION['tasks'] = array_values($_SESSION['tasks']); // Re-index the array
}
?>
Mejorar la aplicación
Mejorar la aplicación
Estas son algunas mejoras que puede agregar:
- Diseñe la aplicación con CSS para mejorar la interfaz de usuario.
- Use JavaScript para agregar cuadros de diálogo de confirmación antes de eliminar tareas.
- Almacene las tareas en una base de datos para conservar los datos.
Punto clave: Las mejoras hacen que la aplicación sea más fácil de usar y funcional.
¡Buen trabajo!
¡Buen trabajo!
¡Enhorabuena! Ha creado una aplicación sencilla de lista de tareas con PHP. Ha aprendido a usar sesiones para almacenar tareas, procesar datos de formularios y mostrar y eliminar tareas dinámicamente. En la próxima lección, crearemos otro proyecto divertido para mejorar sus conocimientos de PHP. ¡Continuemos programando!
Preguntas frecuentes
¿La lección «Crear una lista de tareas sencilla» es gratis?
Sí — el texto completo de «Crear una lista de tareas sencilla» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de PHP Academy, actualiza a CoddyKit PRO. El curso de PHP Academy incluye 2 lecciones en total.
¿Qué aprenderé en «Crear una lista de tareas sencilla»?
Cree una aplicación básica de lista de tareas con PHP y HTML Practicas PHP Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar PHP Academy?
No se requiere experiencia previa. PHP Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 2.
¿Cuánto tiempo toma la lección «Crear una lista de tareas sencilla»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de PHP Academy?
Sí. Cada lección de PHP Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Crear una lista de tareas sencilla
- Crear un formulario de contacto