Creating a ToDo webapp using PHP , MySQL and AJAX

I was trying to create a ToDo app just to improve my understanding the way Ajax is used with PHP and MySQL. Finally I have written this app, which is hosted at github. This blog post will serve as a tutorial for the same.

 

The database

CREATE TABLE IF NOT EXISTS `tasks` (
`task_id` int(11) NOT NULL AUTO_INCREMENT,
`task` varchar(100) NOT NULL,
`target_date` date NOT NULL,
PRIMARY KEY (`task_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=18 ;

Now we will create 5 files for the application.

  1. connect_db.php  – To connect with the database.
  2. create.php – The file used to create create the task. This will be called on submit of the form.
  3. create_task.php  – The file to show the form that will be used to create the task.
  4. delete.php – The file will be called when the delete action will be invoked.
  5. index.php  – The main container of the app which will show all the data.
  6. read.php  – The action to fetch all the data from the database.
  7. script.js – The JS file which will have all the actions using ajax.
  8. update.php – The action to update the data using edit action.
  9. update_form.php – The form to update the data.

 

Index.php

 

In our index file , we are using the following ID which is used to display the data. All the page content will be dynamically loaded in the following div.

<div id="pageContent">

</div>

 

Also we have created two buttons which will be used to generate the list of tasks or add a new task

<button type="button" id="viewTasks">Check Tasks</button>

<button type="button" id="addTask">Add Task</button>

connect_db.php

We can use the following code to connect with the database. This file will be included everytime we want to interact with the database.


$host='localhost'; 
$dbname='database'; 
$user='username'; 
$pass='password'; 

 
try {
  # MySQL with PDO_MYSQL
  $DBH = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
 
 }
catch(PDOException $e) {
    echo $e->getMessage();
}

In script.js we will add the following code. This code will fetch the data dynamically from the database using the output from the read.php file. Similarly we will call all other files dynamically for the respective actions.

// READ Tasks
function showTasks(){
    // read and show the records after at least a second
    // we use setTimeout just to show the image loading effect when you have a very fast server
    // otherwise, you can just do: $('#pageContent').load('read.php', function(){ $('#loaderImage').hide(); });
    // THIS also hides the loader image
    setTimeout("$('#pageContent').load('read.php', function(){ $('#loaderImage').hide(); });", 1000);
}

Fork it at – https://github.com/mohitkr05/ToDo

Mohit Kumar

A simple person who likes to share his thoughts on this blog. Know more about me

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *