Explore a detailed guide alongside code snippets illustrating the creation of a basic to-do list application using PHP and MySQL, complete with free source code. The application boasts a polished design, thanks to Bootstrap integration, giving it a professional appearance.
Highlighted below are the functionalities encompassed by this uncomplicated source code:
Moreover, this straightforward foundation can readily support the integration of additional functionalities, such as task editing, due dates, reminders, and more. This versatile framework serves as an excellent starting point for building a more robust task management system tailored to your needs.
First you have to download & install XAMPP or any local server that run PHP scripts. Here's the link for XAMPP server https://www.apachefriends.org/index.html.
And this is the link for the bootstrap that has been used for the layout https://getbootstrap.com/.
Open your database web server then create a database name in it db_task
. After that, click Import
then locate the database file inside the folder of the application then click ok.
You can also add the database table programmatically. To do this, copy
and paste
the code below into the PHPMyAdmin SQL Tab
in your newly created database.
(1, 'Check Errors', 'Done'), (4, 'Remove Bugs', ''), (5, 'Need Improvements', '');
Open your any kind of text editor(notepadd++, etc..). Then just copy/paste
the code below then name it conn.php
.
<?php $conn = new mysqli("localhost", "root", "", "db_task"); if(!$conn){ } ?>
This is where we will create a simple form for our application. To create the forms simply copy
and paste
it into you text editor, then save it as shown below.
index.php
.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a> </div> </nav> <div class="col-md-3"></div> <div class="col-md-6 well"> <h3 class="text-primary">PHP - Simple To Do List App</h3> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-2"></div> <div class="col-md-8"> <center> <form method="POST" class="form-inline" action="add_query.php"> <input type="text" class="form-control" name="task" required/> <button class="btn btn-primary form-control" name="add">Add Task</button> </form> </center> </div> <br /><br /><br /> <table class="table"> <thead> <tr> <th>#</th> <th>Task</th> <th>Status</th> <th>Action</th> </tr> </thead> <tbody> <?php require 'conn.php'; $query = $conn->query("SELECT * FROM `task` ORDER BY `task_id` ASC"); $count = 1; while($fetch = $query->fetch_array()){ ?> <tr> <td><?php echo $count++?></td> <td><?php echo $fetch['task']?></td> <td><?php echo $fetch['status']?></td> <td colspan="2"> <center> <?php if($fetch['status'] != "Done"){ echo '<a href="update_task.php?task_id='.$fetch['task_id'].'" class="btn btn-success"><span class="glyphicon glyphicon-check"></span></a> |'; } ?> <a href="delete_query.php?task_id=<?php echo $fetch['task_id']?>" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span></a> </center> </td> </tr> <?php } ?> </tbody> </table> </div> </body> </html>
This code contains a specific function for the application. This is where the function works where you can manipulate the data. This code consists of several methods that can ADD and DELETE the data in the database. To do that write these codes inside the text editor and save them as corresponds file names.
add_query.php
<?php require_once 'conn.php'; if($_POST['task'] != ""){ $task = $_POST['task']; $conn->query("INSERT INTO `task` VALUES('', '$task', '')"); } } ?>
update_task.php
<?php require_once 'conn.php'; if($_GET['task_id'] != ""){ $task_id = $_GET['task_id']; $conn->query("UPDATE `task` SET `status` = 'Done' WHERE `task_id` = $task_id") or die(mysqli_errno($conn)); } ?>
delete_query.php
<?php require_once 'conn.php'; if($_GET['task_id']){ $task_id = $_GET['task_id']; } ?>
There you have it we successfully created a Simple To-Do List App using PHP. I hope that this simple tutorial helps you to what you are looking for. For more updates and tutorials just kindly visit this site.
Enjoy Coding!!!
CREATE TABLE `task` ( `task_id` INT AUTO_INCREMENT, `task` varchar(150) NOT NULL, `status` varchar(150) NOT NULL, PRIMARY KEY(task_id));
$conn->query("INSERT INTO `task` (task, status) VALUES('$task', '')");
Last but not least, limit the text box for 1500 characters so users don't type too much.
Line 19 change it to the following
<input type="text" class="form-control" maxlength="150" name="task" required/>