Developing a To-Do List Application Using PHP and SQL

In this tutorial, we will demonstrate how to utilize PHP and SQL for creating a To-Do List application. This tutorial will guide you through CRUD operations, enabling you to efficiently manage your tasks. Let’s begin building our To-Do List app!

File Structure:

todo-list/
│
├── css/
│   └── styles.css        # CSS file for styling
│
├── db.php                # PHP script for database connection
├── add_task.php          # PHP script to add a new task
├── get_tasks.php         # PHP script to retrieve tasks
├── delete_task.php       # PHP script to delete a task
│
├── index.php             # Main HTML file for the application
├── script.js             # JavaScript file for client-side interaction
│
└── README.md             # Optional: README file with project information

Step 1: Setting up the Database

To keep the tasks, start by making a MySQL database. To make the table you need, you can use the following SQL script:

CREATE TABLE tasks (
    id INT AUTO_INCREMENT PRIMARY KEY,
    task VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Step 2: Connecting to the Database

Next, create a PHP script to establish a connection to the MySQL database. Replace the placeholders with your database credentials:

<?php
// db.php
$host = 'localhost';
$username = 'your_username';
$password = 'your_password';
$database = 'your_database';

// Establish a connection to the database
$conn = new mysqli($host, $username, $password, $database);

// Check for connection errors
if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error);
}
?>

Step 3: Creating the Task List Interface

Now, let’s create the HTML structure for our To-Do List application:

<!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 Application</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>

<div class="container">
    <h2>To-Do List</h2>
    <!-- Form to add a new task -->
    <form action="add_task.php" method="POST">
        <input type="text" name="task" placeholder="Enter task..." required>
        <button type="submit">Add Task</button>
    </form>
    <!-- List to display tasks -->
    <ul>
        <!-- Tasks will be displayed here -->
    </ul>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Step 4: Implementing CRUD Operations

Next, let’s create PHP scripts to handle CRUD operations:

Add Task (add_task.php):

<?php
// add_task.php
require_once 'db.php';

// Check if the form has been submitted
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['task'])) {
    $task = $_POST['task'];

    // Insert the new task into the database
    $sql = "INSERT INTO tasks (task) VALUES ('$task')";
    if ($conn->query($sql) === TRUE) {
        // Redirect back to the main page
        header('Location: index.php');
    } else {
        // Display an error message if the insertion fails
        echo 'Error: ' . $sql . '<br>' . $conn->error;
    }
}

// Close the database connection
$conn->close();
?>

Retrieve Tasks (get_tasks.php):

<?php
// get_tasks.php
require_once 'db.php';

// Retrieve tasks from the database and display them as a list
$sql = "SELECT * FROM tasks ORDER BY created_at DESC";
$result = $conn->query($sql);

// Check if there are any tasks
if ($result->num_rows > 0) {
    // Output each task as a list item
    while ($row = $result->fetch_assoc()) {
        echo '<li>' . $row['task'] . '</li>';
    }
} else {
    // Display a message if no tasks are found
    echo '<li>No tasks found.</li>';
}

// Close the database connection
$conn->close();
?>

Delete Task (delete_task.php):

<?php
// delete_task.php
require_once 'db.php';

// Check if the form has been submitted and the ID of the task to delete is set
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['id'])) {
    $id = $_POST['id'];

    // Delete the task from the database
    $sql = "DELETE FROM tasks WHERE id=$id";
    if ($conn->query($sql) === TRUE) {
        // Display a success message if the deletion is successful
        echo 'Task deleted successfully.';
    } else {
        // Display an error message if the deletion fails
        echo 'Error: ' . $sql . '<br>' . $conn->error;
    }
}

// Close the database connection
$conn->close();
?>

Step 5: Styling the Application

Finally, let’s add some CSS to style our To-Do List application. Create a new file named styles.css and add the following CSS code:

/* styles.css */
.container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

h2 {
    text-align: center;
}

form {
    margin-bottom: 20px;
}

input[type="text"] {
    width: calc(100% - 80px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
}

button {
    width: 80px;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

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

li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

li:last-child {
    border-bottom: none;
}

Conclusion

Great job! You’ve successfully used PHP and SQL to create a To-Do List app. You can now add, view, and remove tasks, which shows how CRUD works in web development. Try adding more features to your app, like the ability to edit tasks or sort tasks by importance, to make it more useful. Have fun coding!

GitHub Repository: https://github.com/letuscrack/To-Do-List-Application-Using-PHP-and-SQL

Feel free to make changes to the code to make it work for your needs and style. Have fun making your To-Do List app!

https://letuscrack.com/how-to-connect-database-with-php/