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.phpedit-to-do.phpupdate-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;
}
}
?>