Lista de tareas

Simple ejemplo utilizando html, css con php y mySql para hacer un listado de tareas pendientes. El programa contempla un archivo de alta de tareas, uno de baja, un archivo de estilos css.

Configuración del entorno

Crear una base de datos mySql:

CREATE DATABASE ejcrud2;

USE ejcrud2;

CREATE TABLE tareas (
    id INT AUTO_INCREMENT PRIMARY KEY,
    descripcion VARCHAR(255) NOT NULL
);

Configuración del entorno

  1. Crea la base de datos: Ya has ejecutado el script para crear la base de datos y la tabla tareas.
  2. Estructura del proyecto:
    • Crea una carpeta para tu proyecto, por ejemplo, todo_list.
    • Dentro de esta carpeta, crea los siguientes archivos:
      • index.php – Página principal.
      • db.php – Archivo de conexión a la base de datos.
      • add_task.php – Script para agregar una tarea.
      • delete_task.php – Script para eliminar una tarea.
      • styles.css – Archivo de estilos CSS.

Código PHP y MySQL

Archivo db.php – Conexión a la base de datos

<?php
// Conexión a la base de datos
$host = 'localhost'; // Host de la base de datos
$user = 'root'; // Usuario de la base de datos
$pass = ''; // Contraseña del usuario de la base de datos
$dbname = 'ejcrud2'; // Nombre de la base de datos

// Crear conexión
$conn = new mysqli($host, $user, $pass, $dbname);

// Verificar conexión
if ($conn->connect_error) {
    die("Conexión fallida: " . $conn->connect_error);
}
?>

Archivo index.php – Página principal

<?php
include 'db.php'; // Incluir el archivo de conexión a la base de datos

// Consulta para obtener todas las tareas
$sql = "SELECT * FROM tareas";
$result = $conn->query($sql);
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
    <link rel="stylesheet" href="styles.css"> <!-- Incluir estilos CSS -->
</head>
<body>
    <div class="container">
        <h1>Mi To Do List</h1>
        <form action="add_task.php" method="POST"> <!-- Formulario para agregar tareas -->
            <input type="text" name="descripcion" placeholder="Nueva tarea" required>
            <button type="submit">Agregar</button>
        </form>

        <ul>
            <?php
            // Mostrar todas las tareas en una lista
            if ($result->num_rows > 0) {
                while($row = $result->fetch_assoc()) {
                    echo "<li>" . $row["descripcion"] . " <a href='delete_task.php?id=" . $row["id"] . "'>Eliminar</a></li>";
                }
            } else {
                echo "<li>No hay tareas.</li>";
            }
            ?>
        </ul>
    </div>
</body>
</html>

Archivo add_task.php – Agregar tareas

<?php
include 'db.php'; // Incluir el archivo de conexión a la base de datos

// Verificar si se envió el formulario con el método POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $descripcion = $_POST['descripcion']; // Obtener la descripción de la tarea

    // Insertar la nueva tarea en la base de datos
    $sql = "INSERT INTO tareas (descripcion) VALUES ('$descripcion')";

    if ($conn->query($sql) === TRUE) {
        header('Location: index.php'); // Redirigir a la página principal después de agregar la tarea
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}

$conn->close(); // Cerrar la conexión a la base de datos
?>

Archivo delete_task.php – Eliminar tareas

<?php
include 'db.php'; // Incluir el archivo de conexión a la base de datos

// Verificar si se envió un ID a través del método GET
if (isset($_GET['id'])) {
    $id = $_GET['id']; // Obtener el ID de la tarea a eliminar

    // Eliminar la tarea de la base de datos
    $sql = "DELETE FROM tareas WHERE id=$id";

    if ($conn->query($sql) === TRUE) {
        header('Location: index.php'); // Redirigir a la página principal después de eliminar la tarea
    } else {
        echo "Error al eliminar la tarea: " . $conn->error;
    }
}

$conn->close(); // Cerrar la conexión a la base de datos
?>

Estilos CSS, Archivo styles.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    text-align: center;
}

h1 {
    margin-bottom: 20px;
}

form {
    display: flex;
    justify-content: space-between;
}

input[type="text"] {
    width: 70%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 15px;
    background-color: #5cb85c;
    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #4cae4c;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 10px 0;
    padding: 10px;
    background-color: #eee;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

a {
    color: red;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

Explicación del código línea por línea

db.php

  • Líneas 2-6: Configura los detalles de la conexión a la base de datos, incluyendo el host, el usuario, la contraseña y el nombre de la base de datos.
  • Línea 9: Crea una conexión a MySQL utilizando la clase mysqli.
  • Línea 12: Verifica si la conexión es exitosa; si falla, se termina la ejecución con un mensaje de error.

index.php

  • Línea 1: Incluye el archivo db.php para establecer la conexión a la base de datos.
  • Línea 4: Ejecuta una consulta SQL para seleccionar todas las tareas.
  • Líneas 5-7: Almacena el resultado de la consulta.
  • Líneas 18-20: Un formulario HTML para agregar una nueva tarea. Se envía a add_task.php mediante el método POST.
  • Líneas 22-29: Muestra las tareas almacenadas en la base de datos en una lista. Si no hay tareas, muestra un mensaje indicándolo.

add_task.php

  • Línea 1: Incluye el archivo db.php para establecer la conexión a la base de datos.
  • Línea 4: Verifica si se recibió una solicitud POST.
  • Línea 5: Obtiene la descripción de la nueva tarea desde el formulario.
  • Línea 8: Crea una consulta SQL para insertar la nueva tarea en la base de datos.
  • Líneas 10-14: Ejecuta la consulta y redirige a la página principal (index.php) si es exitosa.
  • Línea 17: Cierra la conexión a la base de datos.

delete_task.php

  • Línea 1: Incluye el archivo db.php para establecer la conexión a la base de datos.
  • Línea 4: Verifica si se recibió un ID mediante el método GET.
  • Línea 5: Obtiene el ID de la tarea a eliminar.
  • Línea 8: Crea una consulta SQL para eliminar la tarea.
  • Líneas 10-14: Ejecuta la consulta y redirige a la página principal (index.php) si es exitosa.
  • Línea 17: Cierra la conexión a la base de datos.

Resultado final

Este código creará una simple aplicación “To Do List” donde puedes agregar y eliminar tareas. Con los estilos CSS proporcionados, la lista tendrá una apariencia moderna y limpia.

Descargar los archivos PHP

Facebook
Twitter
LinkedIn

Dejá un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Instagram
Nexo IA Youtube