How to make a Todo App using PHP & MySQL ?
Last Updated :
24 Apr, 2025
To create a Todo App using PHP and MySQL, you'll first need to set up a MySQL database to store the tasks. Then, use PHP to create a web interface where users can add, edit, and delete tasks. PHP will handle the backend logic, such as connecting to the database and performing CRUD operations. Finally, use HTML and CSS to design the frontend interface, making it user-friendly and visually appealing.
Prerequisites
Note: First, you need to install a local server like XAMPP to run PHP scripts on your device. After setting up the server, follow the steps below.
Setup the Database
Run the local server and create a New Database namely "todo" in it. Once the database is created, create a table named "task" in this database. Use the code mentioned below to create this table.
CREATE TABLE `task` (
`task_id` int(10) PRIMARY KEY,
`task` varchar(250) NOT NULL,
`status` varchar(30) NOT NULL
);
INSERT INTO `task` VALUES
(1, 'Read an article on React.js', 'Done'),
(2, 'Organize a meeting', 'Pending');
ALTER TABLE `task`
MODIFY `task_id` int(10) AUTO_INCREMENT, AUTO_INCREMENT=3;
Create a connection with Database
Inside the folder, create a file named - "config.php". Inside this file used the below mentioned code to establish a connection with the database. So that you can access the database directly from the application.
- mysqli_connect( ) function is used to create the connection. It takes 4 parameter - hostname, username, password and database name, in the same order as mentioned.
- die( ) function terminates the execution if there an error while connecting to the database.
<?php
$db = mysqli_connect("localhost", "root", "", "todo")
or
die("Connection failed: " . mysqli_connect_error());
?>
Example: Implementation to create a todo app.
CSS
// style.css
* {
margin: 0;
padding: 0;
font-family: monospace;
}
body {
background-color: olivedrab;
}
nav {
background-color: rgb(0, 90, 0);
margin-bottom: 50px;
}
.heading {
text-decoration: none;
color: white;
letter-spacing: 1px;
font-size: 30px;
font-weight: 900;
display: flex;
justify-content: center;
padding: 10px;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.input-area {
margin-bottom: 30px;
}
input {
width: 500px;
height: 30px;
border: none;
border-radius: 10px;
padding: 5px;
}
.btn {
width: 100px;
height: 40px;
border-radius: 50px;
border: 1px solid rgb(0, 90, 0);
color: white;
font-weight: 900;
background-color: rgb(0, 90, 0);
}
table {
border: 0.5px solid black;
width: 700px;
padding: 10px;
border-radius: 5px;
background-color: whitesmoke;
/* background-color: rgb(225, 225, 225); */
}
th {
font-size: 20px;
text-align: start;
padding-top: 10px;
padding-bottom: 10px;
}
th:nth-child(4) {
text-align: center;
}
tr.border-bottom td {
border-bottom: 1pt dashed black;
}
tbody {
padding: 3px;
font-size: 15px;
}
td {
padding: 5px;
}
.action {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}
.btn-completed {
text-decoration: none;
}
.btn-remove {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Todo List</title>
<link rel="stylesheet"
type="text/css" href="style.css" />
</head>
<body>
<nav>
<a class="heading" href="#">ToDo App</a>
</nav>
<div class="container">
<div class="input-area">
<form method="POST" action="add_task.php">
<input type="text" name="task"
placeholder="write your tasks here..." required />
<button class="btn" name="add">
Add Task
</button>
</form>
</div>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Tasks</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
require 'config.php';
$fetchingtasks =
mysqli_query($db, "SELECT * FROM `task` ORDER BY `task_id` ASC")
or die(mysqli_error($db));
$count = 1;
while ($fetch = $fetchingtasks->fetch_array()) {
?>
<tr class="border-bottom">
<td>
<?php echo $count++ ?>
</td>
<td>
<?php echo $fetch['task'] ?>
</td>
<td>
<?php echo $fetch['status'] ?>
</td>
<td colspan="2" class="action">
<?php
if ($fetch['status'] != "Done")
{
echo
'<a href="update_task.php?task_id=' . $fetch['task_id'] . '"
class="btn-completed">✅</a>';
}
?>
<a href=
"delete_task.php?task_id=<?php echo $fetch['task_id'] ?>"
class="btn-remove">
❌
</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</body>
</html>
// add_task.php
<?php
require_once 'config.php';
if (isset($_POST['add'])) {
if ($_POST['task'] != "") {
$task = $_POST['task'];
$addtasks = mysqli_query($db,
"INSERT INTO `task` VALUES('', '$task', 'Pending')")
or
die(mysqli_error($db));
header('location:index.php');
}
}
?>
// delete_task.php
<?php
require_once 'config.php';
if ($_GET['task_id']) {
$task_id = $_GET['task_id'];
$deletingtasks = mysqli_query($db,
"DELETE FROM `task` WHERE `task_id` = $task_id")
or
die(mysqli_error($db));
header("location: index.php");
}
?>
// update_task.php
<?php
require_once 'config.php';
if ($_GET['task_id'] != "") {
$task_id = $_GET['task_id'];
$updatingtasks =
mysqli_query($db,
"UPDATE `task` SET `status` = 'Done' WHERE `task_id` = $task_id")
or
die(mysqli_error($db));
header('location: index.php');
}
?>
Output:
ToDo App using PHP and MySQL
Similar Reads
How to upload images in MySQL using PHP PDO ?
In this article, we will upload images to the MySQL database using PHP PDO and display them on the webpage. Approach: Make sure you have a XAMPP server or WAMP server installed on your machine. In this tutorial, we will be using the WAMP server. Article content: Table StructureDatabase configuratio
5 min read
How to make a connection with MySQL server using PHP ?
MySQL is a widely used database management system that may be used to power a wide range of projects. One of its main selling features is its capacity to manage large amounts of data without breaking a sweat. There are two approaches that can be used to connect MySQL and PHP code, which are mentione
3 min read
How to Update Data in MySQL Database Table Using PHP?
Updating data in a MySQL database table using PHP is a fundamental aspect of web development, particularly in applications where user interactions involve modifying existing records. This guide delves into the process of updating data in a MySQL database table using PHP, covering database connection
3 min read
Todo list app using Flask | Python
There are many frameworks that allow building your webpage using Python, like Django, flask, etc. Flask is a web application framework written in Python. Flask is based on WSGI(Web Server Gateway Interface) toolkit and Jinja2 template engine. Its modules and libraries that help the developer to writ
3 min read
How to retrieve data from MySQL database using PHP ?
There are steps to understand for retrieving the data from the MySQL database. Approach: Create the database, then create the table for data.Enter the rows in the table. You have to connect to the database. Now we understand each and every step as shown below.  Example 1: In this. we use PHPMyAdmin
2 min read
How to Make to do List using Nodejs ?
Creating a to-do list application using Node.js involves setting up an Express server, creating RESTful APIs for CRUD operations, and using a database to store tasks. Enhance functionality with features like task prioritization and deadlines. Table of Content FeaturesHow the application worksSteps t
12 min read
Profile Application using Python Flask and MySQL
A framework is a code library that makes a developer's life easier when building web applications by providing reusable code for common operations. There are a number of frameworks for Python, including Flask, Tornado, Pyramid, and Django. Flask is a lightweight web application framework. It is clas
10 min read
Build a Grocery Store Web App using PHP with MySQL
In this article, we are going to build a Grocery Store Web Application using PHP with MySQL. In this application, we can add grocery items by their name, quantity, status (pending, bought, not available), and date. We can view, delete and update those items. There will be a date filtering feature wh
7 min read
Create a Small CRM using PHP and MySQL
CRM stands for Customer Relationship Management, which is a strategy for a set of practices, and a technology designed to manage and analyze customer interactions and data throughout the customer lifecycle. Manage contacts by adding, updating, and deleting information such as name, email, phone, and
6 min read
How to Create ToDo App using HTML, CSS, JS and Bootstrap ?
We will create a basic todo app to understand the basics of JavaScript. In this web app, one can create a todo list and can remove specific elements from the list.Features or Functionalities to implement:Â Â Interactive and Responsive designResponsive Grid SystemStore and Delete itemsPrerequisites: Ba
2 min read