• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

CodingStatus

- Learn Coding to Build Web Applications

  • HTML
  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL
  • Interview Questions

To Do List Using PHP and MySQL

November 14, 2022 By Md Nurullah Leave a Comment

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

Contents

  • Create a To-Do App using PHP, MySQLi
    • 1. Create a Table for a To-Do List
    • 2. Setup MySQL Database Connection
    • 3. Create To-Do Form
    • 4. Edit To-Do List
    • 5. Update 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

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

Step 1: 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
   |

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>

1. 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
)

2. Setup MySQL Database Connection

To insert 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);
}
?>

 

3. Create To-Do Form

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

Step 1: Create a 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>

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;

   }

  
}
?>

4. Edit 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; 

}	

?>

 

5. 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;
}

  
}

?>

 

Related Posts:

  • How to Create a simple todo app using jQuery
  • Create Simple React Todo App
  • How to Learn Web Designing From Basics
  • How to Learn Web Development Step by Step

Filed Under: PHP

Hey there, Welcome to CodingStatus. My Name is Md Nurullah from Bihar, India. I'm a Software Engineer. I have been working in the Web Technology field for 3 years. Here, I blog about Web Development & Designing. Even I help developers to build the best Web Applications.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Follow us

  • facebook
  • twitter
  • linkedin

Latest Tutorials

  • HTML Heading Tags
  • Compress Image Size in PHP Without Losing Quality
  • How to Trigger a Click Event on Pressing Enter Key Using jQuery
  • HTML Elements
  • JavaScript Countdown Timer

Popular Tutorials

  • Compress Image Size in PHP Without Losing Quality
  • File Upload in PHP with Example & Code Demo
  • PHP Form Validation with example
  • PHP Registration Form
  • Default Profile Picture From First Name and Last Name in PHP

Categories

  • Ajax (10)
  • Django (5)
  • HTML (4)
  • Interview Questions (5)
  • JavaScript (18)
  • jQuery (11)
  • Laravel (2)
  • Node.js (22)
  • PHP (39)
  • ReactJS (35)
  • SQL (12)
  • Tips (7)
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved