PHP - Simple To Do List App

Submitted by: 
Language: 
Visitors have accessed this post 852 times.

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 a newly coders for its user friendly environment. So Let's do the coding.

Before we 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

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

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());
  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());
  8. header("location: index.php");
  9. }
  10. ?>

There you have it we successfully created a Simple To Do List App using PHP. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!!!


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.