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();
}
?>
- 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>
- 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;
}
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); } }); }
});
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>';
}
?>
- 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]);
}
?>
- Purpose: Handles adding a new task.
-
Explanation: Inserts a new task into the
taskstable 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]);
}
?>
- 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]);
}
?>
- 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:
Discover more from Coursity
Subscribe to get the latest posts sent to your email.