To Do List Using PHP and MySQL

PHP MySQL To do List: In this tutorial, You will learn to create a simple To-do list using PHP and MySQL step by step. So, You should read all the given points carefully. So that you can easily integrate Todo functionality into your project

Using To-do Feature, you can easily list your day-to-day task, daily schedules & other tasks. So It will be very helpful to maintain quickly your daily routine with a single click.

If you integrate this feature on your website, then You can do the following things  –

  • You can add your task by clicking the add button.
  • You can edit the task by clicking the pencil icon.
  • You can update the task by clicking the update button.
  • Even You can delete the task list by clicking the trash icon.

php mysql to do list

Create a To-Do App using PHP, MySQLi

Now, I am going to start to develop a simple to-do list from the basic level so that you can easily understand its working concept.

Learn Also –

Create a To-do list using jQuery

Create a Simple React App

1. Create To Do Directory

Before getting started it’s coding, you have to do the following things–

Create a folder structure

to-do-list/
   |__database.php
   |__to-do-form.php
   |__create-to-do.php
   |__edit-to-do.php
   |__update-to-do.php
   |__delete-to-do.php
   |__index.php
   |

2. Create To Do page

Step 2: Include the Bootstrap 5 CDN

Step 3: Also, Include the jQuery CDN

Step 4: Include the required PHP files

File Name – index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>
<body>

<div class="container my-5">

  <h2>PHP To Do List</h2>
  
  <div class="row">
    <div class="col-sm-6">
        <?php
         include("database.php");
         include("delete-to-do.php");
         include("to-do-form.php");
         include("to-do-list.php");
        ?>
        
    </div>
     <div class="col-sm-6">
     </div>
  </div>

</div>

</body>
</html>

3. Create a Table for a To-Do List

Table Name – todo

CREATE TABLE `todo` (
`id` int(10) UNSIGNED PRIMARY KEY NOT NULL AUTO_INCREMENT,
`task` varchar(255) DEFAULT NULL
)

4. Setup MySQL Database Connection

To insert a select option value in the database, you must connect PHP to MySQL database with the help of the following query.

Where –

  • $hostName – assign the hostname.
  • $userName – assign the username of the database .
  • $password – assign the password of the database
  • $database – assign the database name.

File Name – database.php

<?php

$hostName = 'localhost';
$userName = 'root';
$password = '';
$database = 'codingstatus';

$conn = new mysqli($hostName, $userName, $password, $database);

if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
?>

5. Create To-Do Form

Create a Form to insert and update the To-Do list by doing the following points –

Step 1: Create an HTML form with the following details

 Form Label Attribute  Value
 Form  Field method post
 Task Input Filed name task
 Submit button name add/update

Step 2: Include the following files using include() method.

  • create-to-do.php
  • edit-to-do.php
  • update-to-do.php

Step 3: Call the following methods and use its values based on condition.

  • createTask()
  • editTaskById()
  • updateTaskById()

File Name – to-do-form.php

<?php
         include("create-to-do.php");
         include("edit-to-do.php");
         include("update-to-do.php");

        $editTask = editTaskById();
        $createTask = createTask();

        if(isset($_GET['edit-task'])) {
            $createTask = updateTaskById();

        }

?>
  <form method="post">    
    <p class="text-danger">
        <?php 
         echo $createTask['success']??'';
         echo $createTask['taskMsg']??''; 
         ?>
    </p>
 
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Enter Something..." name="task" value="<?php echo $editTask['task']??''; ?>">
      <button type="submit" class="btn btn-primary" name="<?php echo count($editTask)?'update':'add'; ?>"><?php echo count($editTask)?'update':'add'; ?></button>
    </div>

  </form>

6. Create To Do using PHP

Now, You have to write PHP code to insert to-do list data into the database. So, You need to follow these steps –

Step 1: Crate a custom function named createTask() and write the code within it according to the next steps

Step 2:  use a connection variable $conn with global keyword. This variable is already decalred in the database.php file.

Step 3: Apply if condition with $_POST['add'] (passing to the isset() method). Where ‘add’ is the name of submit button of the to-do form.

Step 4: Get the value of task input field with $_POST['task']

Step 5: Validate the value of task input field

Step 6: Insert the task input value using MySQLi Insert Query

File Name – create-to-do.php

<?php
function createTask()
{
  global $conn; 	

  if (isset($_POST['add'])) {

  	  /* validation */
    $task = $_POST['task'];

    $data['taskMsg'] = '';
    if(empty($task)) {

    	$data['taskMsg'] = "Empty Task Field!";
    }

     $validation = false;
    if(empty($data['taskMsg'])) {
       $validation = true;
    }

     if($validation) {

     /* insert query*/
    $query  = "INSERT INTO todo";
    $query .= "(task) ";
    $query .= "VALUES ('$task')";
 
    $result = $conn->query($query);

    if ($result) {
      $data['success'] = "Task is added successfully";
    }
   }

     return $data;

   }

  
}
?>

7. Display To Do Using PHP

File Name – to-do-list.php

<?php
include('get-to-do.php');
$getTask = getTask(); 
?>

<?php
if(count($getTask['data'])) {
foreach($getTask['data'] as $task) {
?>

<div class="row my-3">
    <div class="col-sm-10">
        <?php
       echo $task['task'];
        ?>
    </div>
    <div class="col-sm-1">
        <a href="index.php?edit-task=<?php echo $task['id']; ?>" class="text-success text-decoration-none">
        <i class='fas fa-edit'></i>
       </a>
    </div>
    <div class="col-sm-1">
    <a href="index.php?delete-task=<?php echo $task['id']; ?>" class="text-danger text-decoration-none">
    <i class='fas fa-trash-alt'></i>

    </a>
    </div>
</div>
<hr>

<?php 
} 
}
?>

8. Get To Do using PHP

File Name – get-to-do.php

<?php
/* Fetch data */
function getTask()
{

    global $conn; 
    $data['data'] = [];

  $query  = "SELECT id, task ";
  $query .= "FROM todo ORDER BY id DESC"; 

    $result = $conn->query($query);
    
  if ($result) {

    if($result->num_rows> 0) {

    	$data['data'] = $result->fetch_all(MYSQLI_ASSOC);

    }

  }
    
    return $data;
  
}

?>

 

9. Edit the To-Do List

File Name – edit-to-do.php

<?php

/* edit data */
function editTaskById(){

  global $conn;
    $data=[];
  if(isset($_GET['edit-task']) && !empty($_GET['edit-task']) ) {
     
    $id = $_GET['edit-task'];
    $msg = [];

     /* sql query*/
  $query = "SELECT task ";
  $query .= "FROM todo ";
  $query .= "WHERE id=$id"; 

    $result = $conn->query($query);
    $data = $result->fetch_assoc();

 }
 return $data; 

}	

?>

 

10. Update To-Do List

File Name – update-to-do.php

<?php
function updateTaskById()
{
  global $conn; 
  
if (isset($_POST['update']) && isset($_GET['edit-task']) && !empty($_GET['edit-task'])) {
      
  $id = $_GET['edit-task'];

    $task = $_POST['task'];

    $data['taskMsg'] = '';
    $validation = false;

   if(empty($task)) {
      $data['taskMsg'] = "task Field is required";
    
    }


    if(empty($data['taskMsg'])) {
       $validation = true;
    }
     /* validation */

    if($validation) {

     /* sql query*/
    $query  = "UPDATE todo SET ";
    $query .= "task ='$task' ";
    $query .= "WHERE id =$id";

    $result = $conn->query($query);

    if ($result) {

      echo "<script>window.location='index.php'</script>";

    } 
    /*sql query*/
    	
    }
    
    return $data;
}

  
}

?>

 

Leave a Comment