Creating a Simple To Do List App in PHP

Submitted by razormist on Friday, April 30, 2021 - 14:37.

Explore a detailed guide alongside code snippets illustrating the creation of a basic to-do list application using PHP and MySQL, complete with free source code. The application boasts a polished design, thanks to Bootstrap integration, giving it a professional appearance.

Highlighted below are the functionalities encompassed by this uncomplicated source code:

Task Addition: Seamlessly incorporate new tasks to your to-do list.
Status Update: Swiftly transition task statuses to "Done" for efficient tracking.
Task Deletion: Effortlessly remove tasks that have been completed or are no longer relevant.

Moreover, this straightforward foundation can readily support the integration of additional functionalities, such as task editing, due dates, reminders, and more. This versatile framework serves as an excellent starting point for building a more robust task management system tailored to your needs.

So Let's do the coding...

Getting started:

First you have to download & install XAMPP or any local server that run PHP scripts. Here's the link for XAMPP server https://www.apachefriends.org/index.html.

And this is the link for the bootstrap that has been used for the layout https://getbootstrap.com/.

Creating Database

Open your database web server then create a database name in it db_task. After that, click Import then locate the database file inside the folder of the application then click ok.

You can also add the database table programmatically. To do this, copy and paste the code below into the PHPMyAdmin SQL Tab in your newly created database.

CREATE TABLE `task` (
  `task_id` int(11) NOT NULL,
  `task` varchar(150) NOT NULL,
  `status` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
INSERT INTO `task` (`task_id`, `task`, `status`) VALUES
(1, 'Check Errors', 'Done'),
(4, 'Remove Bugs', ''),
(5, 'Need Improvements', '');
 
ALTER TABLE `task`
  ADD PRIMARY KEY (`task_id`);
 
ALTER TABLE `task`
  MODIFY `task_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

Creating the Database Connection

Open your any kind of text editor(notepadd++, etc..). Then just copy/paste the code below then name it conn.php.

<?php
	$conn = new mysqli("localhost", "root", "", "db_task");
 
	if(!$conn){
		die("Error: Cannot connect to the database");
	}
?>

Creating The Interface

This is where we will create a simple form for our application. To create the forms simply copy and paste it into you text editor, then save it as shown below.

index.php.

<!DOCTYPE html>
<html lang="en">
	<head>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">PHP - Simple To Do List App</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-2"></div>
		<div class="col-md-8">
			<center>
				<form method="POST" class="form-inline" action="add_query.php">
					<input type="text" class="form-control" name="task" required/>
					<button class="btn btn-primary form-control" name="add">Add Task</button>
				</form>
			</center>
		</div>
		<br /><br /><br />
		<table class="table">
			<thead>
				<tr>
					<th>#</th>
					<th>Task</th>
					<th>Status</th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody>
				<?php
					require 'conn.php';
					$query = $conn->query("SELECT * FROM `task` ORDER BY `task_id` ASC");
					$count = 1;
					while($fetch = $query->fetch_array()){
				?>
				<tr>
					<td><?php echo $count++?></td>
					<td><?php echo $fetch['task']?></td>
					<td><?php echo $fetch['status']?></td>
					<td colspan="2">
						<center>
							<?php
								if($fetch['status'] != "Done"){
									echo 
									'<a href="update_task.php?task_id='.$fetch['task_id'].'" class="btn btn-success"><span class="glyphicon glyphicon-check"></span></a> |';
								}
							?>
							 <a href="delete_query.php?task_id=<?php echo $fetch['task_id']?>" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span></a>
						</center>
					</td>
				</tr>
				<?php
					}
				?>
			</tbody>
		</table>
	</div>
</body>
</html>

Creating the functions

This code contains a specific function for the application. This is where the function works where you can manipulate the data. This code consists of several methods that can ADD and DELETE the data in the database. To do that write these codes inside the text editor and save them as corresponds file names.

add_query.php

<?php
	require_once 'conn.php';
	if(ISSET($_POST['add'])){
		if($_POST['task'] != ""){
			$task = $_POST['task'];
 
			$conn->query("INSERT INTO `task` VALUES('', '$task', '')");
			header('location:index.php');
		}
	}
?>

update_task.php

<?php
	require_once 'conn.php';
 
	if($_GET['task_id'] != ""){
		$task_id = $_GET['task_id'];
 
		$conn->query("UPDATE `task` SET `status` = 'Done' WHERE `task_id` = $task_id") or die(mysqli_errno($conn));
		header('location: index.php');
	}
?>

delete_query.php

<?php
	require_once 'conn.php';
 
	if($_GET['task_id']){
		$task_id = $_GET['task_id'];
 
		$conn->query("DELETE FROM `task` WHERE `task_id` = $task_id") or die(mysqli_errno($conn));
		header("location: index.php");
	}	
?>

Demo

There you have it we successfully created a Simple To-Do List App using PHP. I hope that this simple tutorial helps you to what you are looking for. For more updates and tutorials just kindly visit this site.

Enjoy Coding!!!

Comments

i think this will help me.

not working

not working bro.

yes. Unfortunately it does…

yes. Unfortunately it does not work

When i tried add task, not…

When i tried add task, not happen anything, the solution is add simple coma to var $task inside the query

where add the coma in the…

where add the coma in the query ?? can you write the correct query ?

adding items does not work

doesn't work! i can update and delete items but when i add stuff nothing happens

Helped me.

This has definitely helped me in my work. Thank you so much for sharing. Also check the following links: Shopify web development company Website design company in Navi Mumbai

Good

I read your excellent post. After reading this post, i really appreciate your effort and my request is to please share us more post in future. Keep it up. It is one of the best information which you are providing. I love your blog because it totally full of informative posts. You are nice one and thanks for sharing. The App Development Dubai provide good service of app development you visit here site for more info.

Good

Two full thumbs up for this magnificent article of yours. I've really enjoyed reading this article today and I think this might be one of the best article that I've read yet. Please, keep this work going on in the same quality and thanks for sharing. If you want Remote Job so visit here site for more info from Smart Job.

Fixed adding items, limited textbox and better db creation

For people with issues, tons of things can be changed but I will only show you the most important. Creating the database all you need is following, no need for sample data.

CREATE TABLE `task` (
  `task_id` INT AUTO_INCREMENT,
  `task` varchar(150) NOT NULL,
  `status` varchar(150) NOT NULL,
  PRIMARY KEY(task_id));

No need for all the alters. For people with issues why tasks will not add, it is because you cannot use blank data for the id if it is auto incremented. To fix this specifically call on 2 fields to update as the id field is automatic In add_query.php change line 7 to the following and everything will work perfect. $conn->query("INSERT INTO `task` (task, status) VALUES('$task', '')"); Last but not least, limit the text box for 1500 characters so users don't type too much. Line 19 change it to the following <input type="text" class="form-control" maxlength="150" name="task" required/>

Awesome! it's working,…

Awesome! it's working, thank you for sharing simple project it help me a lot to learn new things.

apostrophe when adding a TASK, it doesn't work!

Howdy! If we use an apostrophe when adding a TASK, it doesn't work! Unless we escape the apostrophe with a backslash before it... Any help for this?? Thanks!!

Add new comment

Add new comment
28483 views