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
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
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 Run a PHP Application on Ubuntu Localhost?
PHP files include PHP tags and have the.php extension. In order to create static webpages, dynamic websites, or online apps, PHP is a server-side scripting language. Personal Home Pages, or PHP, is now known as Hypertext Pre-processor. On a server with PHP installed, PHP scripts can only be interpre
2 min read
Online FIR Web App using PHP with MySQL
In this article, we are going to build an Online FIR Web Application using PHP with MySQL. In this application, we can file cases from anywhere by their name, complaint, status (pending or solved), and date of incidence, date of registration. Only the admin can view, delete and update status. A comp
10 min read
How to count rows in MySQL table in PHP ?
PHP stands for hypertext preprocessor. MySQL is a database query language used to manage databases. In this article, we are going to discuss how to get the count of rows in a particular table present in the database using PHP and MySQL. Requirements: XAMPP Approach: By using PHP and MySQL, one can p
3 min read
Building a REST API with PHP and MySQL
This brief tutorial is a step-by-step guide on how to develop a REST API using PHP and MySQL. REST API will implement HTTP commands (Get, Post, Put, DELETE) and response will be in form of JSON. For development setup, we will be using the XAMPP while for testing of the API, we will use the Postman a
5 min read