How to Create a Simple To-Do List with PHP & MySQL

Creating a to-do list application in PHP is a great way to practice CRUD operations (Create, Read, Update, Delete) and work with MySQL databases. Below is a step-by-step guide along with the source code.

Step 1: Set Up Your Environment

Install a Local Server:
Use XAMPP, WAMP, or MAMP to set up a local server on your computer.

Create a Project Folder:
Inside the htdocs or www directory of your server, create a new folder named todo_list.

Step 2: Create the Database

Open phpMyAdmin:

Access phpMyAdmin via http://localhost/phpmyadmin.

Create a New Database:

Name it todo_list_db.

Create a Table:

Name the table tasks with the following structure:

    
     CREATE TABLE tasks (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    task VARCHAR(255) NOT NULL,
    status ENUM('pending', 'completed') DEFAULT 'pending',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Step 3: Create the PHP Files

index.php:

This file will handle the display and basic CRUD operations.

    
     <?php
// Connect to the database
$conn = new mysqli('localhost', 'root', '', 'todo_list_db');

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Add Task
if (isset($_POST['add_task'])) {
    $task = $_POST['task'];
    $conn->query("INSERT INTO tasks (task) VALUES ('$task')");
    header('Location: index.php');
}

// Delete Task
if (isset($_GET['delete'])) {
    $id = $_GET['delete'];
    $conn->query("DELETE FROM tasks WHERE id=$id");
    header('Location: index.php');
}

// Mark as Completed
if (isset($_GET['complete'])) {
    $id = $_GET['complete'];
    $conn->query("UPDATE tasks SET status='completed' WHERE id=$id");
    header('Location: index.php');
}

// Fetch Tasks
$result = $conn->query("SELECT * FROM tasks ORDER BY id DESC");
?>

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body data-rsssl=1>
    <div class="container">
        <h1>To-Do List</h1>
        <form action="index.php" method="POST">
            <input type="text" name="task" placeholder="Enter a task" required>
            <button type="submit" name="add_task">Add Task</button>
        </form>
        <ul class="task-list">
            <?php while ($row = $result->fetch_assoc()): ?>
                <li class="<?php echo $row['status']; ?>">
                    <?php echo $row['task']; ?>
                    <div class="actions">
                        <a href="index.php?complete=<?php echo $row['id']; ?>">Complete</a>
                        <a href="index.php?delete=<?php echo $row['id']; ?>">Delete</a>
                    </div>
                </li>
            <?php endwhile; ?>
        </ul>
    </div>
</body>
</html>

style.css:

Add some basic styling to the to-do list.

    
     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: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

h1 {
    text-align: center;
}

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

input[type="text"] {
    width: 70%;
    padding: 5px;
}

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

button:hover {
    background-color: #218838;
}

.task-list {
    list-style-type: none;
    padding: 0;
}

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

.task-list li.completed {
    text-decoration: line-through;
    color: #777;
}

.actions a {
    margin-left: 10px;
    color: #007bff;
    text-decoration: none;
}

.actions a:hover {
    text-decoration: underline;
}

Step 4: Run the Application

Start the Server:

Make sure your local server is running.

Access the Application:

Open your browser and go to http://localhost/todo_list/index.php.

Test the Features:

Add tasks, mark them as completed, and delete them to see how the application works.

This simple to-do list application demonstrates basic CRUD operations in PHP, connecting to a MySQL database, and handling form submissions. You can extend this project by adding features like task editing, user authentication, or integrating it with JavaScript for a better user experience.

This project is a great starting point for learning PHP and MySQL and can be used as a foundation for more complex applications.

AUZ Tutorials