DEV Community

Cover image for PHP crash course: Simple To-Do List
MD ARIFUL HAQUE
MD ARIFUL HAQUE

Posted on

2

PHP crash course: Simple To-Do List

A straightforward to-do list application built with PHP, jQuery, AJAX, and CSS. Users can add, edit, and delete tasks with real-time updates using AJAX for seamless interactions without refreshing the page. This project demonstrates basic CRUD operations in a web application.

Creating a basic to-do list with PHP, jQuery, AJAX, and CSS involves a few key components:

1. Database Connection (config.php)

<?php
// Database configuration
$host = 'localhost'; // The hostname of your MySQL server
$dbname = 'todolist'; // The name of the database you want to connect to
$user = 'root'; // The MySQL username (default is 'root')
$pass = ''; // The password for the MySQL user (empty in this case)

// Create a new PDO instance
try {
    // Attempt to create a PDO connection
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

    // Set the error mode to exception
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    echo "Connected successfully"; // Connection was successful
} catch (PDOException $e) {
    // Handle connection errors
    echo 'Connection failed: ' . $e->getMessage();
}
?>
Enter fullscreen mode Exit fullscreen mode
  • Purpose: Connects to the MySQL database using PDO.
  • Explanation: This script establishes a connection to the database and sets the error mode to exception.

2. Front-End Code (index.php)

<!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">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <form id="task-form">
            <input type="text" id="task" placeholder="New task">
            <button type="submit">Add Task</button>
        </form>
        <ul id="task-list">
            <!-- Tasks will be loaded here by AJAX -->
        </ul>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Purpose: Main HTML page to display the to-do list and handle user interactions.
  • Explanation: Includes input for new tasks, buttons for adding, editing, and deleting tasks, and dynamically updates the task list using jQuery and AJAX.

3. CSS (style.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

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

#task {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

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

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

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

#task-list li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

#task-list li a {
    margin-left: 10px;
    color: #007bff;
    text-decoration: none;
}

#task-list li a:hover {
    text-decoration: underline;
}
Enter fullscreen mode Exit fullscreen mode

4. JavaScript(script.js)

$(document).ready(function() {
       loadTasks();

    $('#addTask').on('click', function() {
        let task = $('#task').val();
        if (task) {
            $.ajax({
                url: 'add_task.php',
                method: 'POST',
                data: { task: task },
                success: function(response) {
                    $('#task').val('');
                    loadTasks();
                }
            });
        }
    });
        $(document).on('click', '.editTask', function() {
                let id = $(this).data('id');
                $.ajax({
                    url: 'edit_task.php',
                    method: 'POST',
                    data: { id: id },
                    success: function(response) {
                        loadTasks();
                    }
                });
        });

    $(document).on('click', '.deleteTask', function() {
        let id = $(this).data('id');
        $.ajax({
            url: 'delete_task.php',
            method: 'POST',
            data: { id: id },
            success: function(response) {
                loadTasks();
            }
        });
    });

    function loadTasks() {
        $.ajax({
            url: 'get_tasks.php',
            method: 'GET',
            success: function(response) {
                $('#taskList').html(response);
            }
        });
    }
});
Enter fullscreen mode Exit fullscreen mode

5. Fetch Tasks (get_tasks.php)

<?php
include 'config.php';

$query = $pdo->query("SELECT * FROM tasks ORDER BY created_at DESC");
$tasks = $query->fetchAll(PDO::FETCH_ASSOC);

foreach ($tasks as $task) {
    echo '<li>';
    echo htmlspecialchars($task['task']);
    echo ' <a href="edit_task.php?id=' . $task['id'] . '">Edit</a>';
    echo ' <a href="delete_task.php?id=' . $task['id'] . '">Delete</a>';
    echo '</li>';
}
?>
Enter fullscreen mode Exit fullscreen mode
  • Purpose: Retrieves and returns all tasks in HTML format.
  • Explanation: Fetches tasks from the database and encodes them as HTML for use in the frontend.

6. Add Task (add_task.php)

<?php
include 'config.php';

if (isset($_POST['task'])) {
    $task = $_POST['task'];
    $stmt = $pdo->prepare("INSERT INTO tasks (task) VALUES (:task)");
    $stmt->execute(['task' => $task]);
}
?>
Enter fullscreen mode Exit fullscreen mode
  • Purpose: Handles adding a new task.
  • Explanation: Inserts a new task into the tasks table when a POST request is received.

7. Update Task (edit_task.php)

<?php
include 'config.php';

if (isset($_GET['id']) && isset($_POST['task'])) {
    $id = $_GET['id'];
    $task = $_POST['task'];
    $stmt = $pdo->prepare("UPDATE tasks SET task = :task WHERE id = :id");
    $stmt->execute(['task' => $task, 'id' => $id]);
}
?>
Enter fullscreen mode Exit fullscreen mode
  • Purpose: Updates an existing task.
  • Explanation: Updates the task with the given ID using a POST request.

8. Delete Task (delete_task.php)

<?php
include 'config.php';

if (isset($_GET['id'])) {
    $id = $_GET['id'];
    $stmt = $pdo->prepare("DELETE FROM tasks WHERE id = :id");
    $stmt->execute(['id' => $id]);
}
?>
Enter fullscreen mode Exit fullscreen mode
  • Purpose: Deletes a task based on its ID.
  • Explanation: Removes the specified task from the database.

This setup provides a straightforward way to manage a to-do list with a user-friendly interface. Feel free to adjust the styles and functionality as needed!

Connecting Links

If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

If you want more helpful content like this, feel free to follow me:

Source Code

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay