Skip to main content

Creating a Simple To Do List App in PHP

Screenshot
Body

In this tutorial we will create a Simple To-Do List App using PHP. PHP is a server-side scripting language designed primarily for web development. Using PHP, you can let your user directly interact with the script and easily to learned its syntax. It is mostly used by newly coders for its user-friendly environment.

So Let's do the coding...

Getting started:

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/.

Creating Database

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.

tut1

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. CREATE TABLE `task` (
  2. `task_id` int(11) NOT NULL,
  3. `task` varchar(150) NOT NULL,
  4. `status` varchar(150) NOT NULL
  5.  
  6. INSERT INTO `task` (`task_id`, `task`, `status`) VALUES
  7. (1, 'Check Errors', 'Done'),
  8. (4, 'Remove Bugs', ''),
  9. (5, 'Need Improvements', '');
  10.  
  11. ALTER TABLE `task`
  12. ADD PRIMARY KEY (`task_id`);
  13.  
  14. ALTER TABLE `task`

Creating the Database Connection

Open your any kind of text editor(notepadd++, etc..). Then just copy/paste the code below then name it conn.php.

  1. <?php
  2. $conn = new mysqli("localhost", "root", "", "db_task");
  3.  
  4. if(!$conn){
  5. die("Error: Cannot connect to the database");
  6. }
  7. ?>

Creating The Interface

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.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  5. <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
  6. </head>
  7. <body>
  8. <nav class="navbar navbar-default">
  9. <div class="container-fluid">
  10. <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
  11. </div>
  12. </nav>
  13. <div class="col-md-3"></div>
  14. <div class="col-md-6 well">
  15. <h3 class="text-primary">PHP - Simple To Do List App</h3>
  16. <hr style="border-top:1px dotted #ccc;"/>
  17. <div class="col-md-2"></div>
  18. <div class="col-md-8">
  19. <center>
  20. <form method="POST" class="form-inline" action="add_query.php">
  21. <input type="text" class="form-control" name="task" required/>
  22. <button class="btn btn-primary form-control" name="add">Add Task</button>
  23. </form>
  24. </center>
  25. </div>
  26. <br /><br /><br />
  27. <table class="table">
  28. <thead>
  29. <tr>
  30. <th>#</th>
  31. <th>Task</th>
  32. <th>Status</th>
  33. <th>Action</th>
  34. </tr>
  35. </thead>
  36. <tbody>
  37. <?php
  38. require 'conn.php';
  39. $query = $conn->query("SELECT * FROM `task` ORDER BY `task_id` ASC");
  40. $count = 1;
  41. while($fetch = $query->fetch_array()){
  42. ?>
  43. <tr>
  44. <td><?php echo $count++?></td>
  45. <td><?php echo $fetch['task']?></td>
  46. <td><?php echo $fetch['status']?></td>
  47. <td colspan="2">
  48. <center>
  49. <?php
  50. if($fetch['status'] != "Done"){
  51. echo
  52. '<a href="update_task.php?task_id='.$fetch['task_id'].'" class="btn btn-success"><span class="glyphicon glyphicon-check"></span></a> |';
  53. }
  54. ?>
  55. <a href="delete_query.php?task_id=<?php echo $fetch['task_id']?>" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span></a>
  56. </center>
  57. </td>
  58. </tr>
  59. <?php
  60. }
  61. ?>
  62. </tbody>
  63. </table>
  64. </div>
  65. </body>
  66. </html>

Creating the functions

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
  1. <?php
  2. require_once 'conn.php';
  3. if(ISSET($_POST['add'])){
  4. if($_POST['task'] != ""){
  5. $task = $_POST['task'];
  6.  
  7. $conn->query("INSERT INTO `task` VALUES('', '$task', '')");
  8. header('location:index.php');
  9. }
  10. }
  11. ?>
update_task.php
  1. <?php
  2. require_once 'conn.php';
  3.  
  4. if($_GET['task_id'] != ""){
  5. $task_id = $_GET['task_id'];
  6.  
  7. $conn->query("UPDATE `task` SET `status` = 'Done' WHERE `task_id` = $task_id") or die(mysqli_errno($conn));
  8. header('location: index.php');
  9. }
  10. ?>
delete_query.php
  1. <?php
  2. require_once 'conn.php';
  3.  
  4. if($_GET['task_id']){
  5. $task_id = $_GET['task_id'];
  6.  
  7. $conn->query("DELETE FROM `task` WHERE `task_id` = $task_id") or die(mysqli_errno($conn));
  8. header("location: index.php");
  9. }
  10. ?>

Demo

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!!!

Comments

Add new comment