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.
Contents
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
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; } } ?>
Leave a Reply