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