Developed To-Do List in PHP using Ajax - 1
Developed To-Do List in PHP using Ajax - 2
Developed To-Do List in PHP using Ajax - 3
Developed To-Do List in PHP using Ajax - 4
This one more post on making single page application using PHP PDO with Ajax. Here we will make a simple but very useful Ajax based To-do List Application using PHP, jQuery, Bootsrap and MySQL. During the process of developing To Do List App, we will discuss how can we use PHP PDO capability to play vital role with jQuery and Bootstrap with AJAX without page refresh functionality.
After publishing some tutorial on different PHP PDO based application, now we have been working with many different technologies for build To Do List script. So, lastly we have build this simple to-do list in which different user can create own to do list, checked to do list or update to do list status, or even user after completing to do list task they can also delete to do list item also. For this functionality, here we have use PHP PDO with Ajax jQuery, Bootstrap and Mysql database. This is database to do list application, in which data has been store in center database. All user to do list has been store in single database. Below you can find step by step process with source code also.
Make Database
For make any web based application, first we need to make table in Mysql database. For this we have to run following sql script. It will make task_list table in your local mysql database.
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `task_list`
--
CREATE TABLE `task_list` (
`task_list_id` int(11) NOT NULL,
`user_id` int(11) NOT NULL,
`task_details` text NOT NULL,
`task_status` enum('no','yes') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `task_list`
--
ALTER TABLE `task_list`
ADD PRIMARY KEY (`task_list_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `task_list`
--
ALTER TABLE `task_list`
MODIFY `task_list_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
After this for make database connection, you have to write following php script. It will make database connection with your PHP script.
<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
session_start();
$_SESSION["user_id"] = "1";
?>
index.php
This is the main page of this to do list app, and in this file we have write all html code, jQuery and Ajax code.
In this file, first we want to load login user all to do list, for this here we have use PHP script for display to do list on web page. In each to do list litem, we have generate dynamic id attribute value, which we use in jQuery code. For remove particular to do list item also, we will use id of particular to do list. Here we have use Bootstrap CSS library for display to do list on web page.
After this we want to add or create new item in to do list. For this first we have make one HTML form. After this, by using jQuery code we have write some validation code and for submit form data to server, here we have also write Ajax request, which has send request to add_task.php file for insert data into Mysql table.
Once you have add item into To-Do List then after we want to checked that to-do list. For this here we have use Ajax request, which have send request to update_task.php file for change the status of to-do list. Here we have use CSS text-decoration:line-through property. It will draw line on text which has been display has this has been checked.
<?php
//index.php
include('database_connection.php');
$query = "
SELECT * FROM task_list
WHERE user_id = '".$_SESSION["user_id"]."'
ORDER BY task_list_id DESC
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<title>Developed To-Do List in PHP using Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body
{
font-family: 'Comic Sans MS';
}
.list-group-item
{
font-size: 26px;
}
</style>
</head>
<body>
<br />
<br />
<div class="container">
<h1 align="center">Developed To-Do List in PHP using Ajax - 4</h1>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-9">
<h3 class="panel-title">My To-Do List</h3>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<div class="panel-body">
<form method="post" id="to_do_form">
<span id="message"></span>
<div class="input-group">
<input type="text" name="task_name" id="task_name" class="form-control input-lg" autocomplete="off" placeholder="Title..." />
<div class="input-group-btn">
<button type="submit" name="submit" id="submit" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-plus"></span></button>
</div>
</div>
</form>
<br />
<div class="list-group">
<?php
foreach($result as $row)
{
$style = '';
if($row["task_status"] == 'yes')
{
$style = 'text-decoration: line-through';
}
echo '<a href="#" style="'.$style.'" class="list-group-item" id="list-group-item-'.$row["task_list_id"].'" data-id="'.$row["task_list_id"].'">'.$row["task_details"].' <span class="badge" data-id="'.$row["task_list_id"].'">X</span></a>';
}
?>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$(document).on('submit', '#to_do_form', function(event){
event.preventDefault();
if($('#task_name').val() == '')
{
$('#message').html('<div class="alert alert-danger">Enter Task Details</div>');
return false;
}
else
{
$('#submit').attr('disabled', 'disabled');
$.ajax({
url:"add_task.php",
method:"POST",
data:$(this).serialize(),
success:function(data)
{
$('#submit').attr('disabled', false);
$('#to_do_form')[0].reset();
$('.list-group').prepend(data);
}
})
}
});
$(document).on('click', '.list-group-item', function(){
var task_list_id = $(this).data('id');
$.ajax({
url:"update_task.php",
method:"POST",
data:{task_list_id:task_list_id},
success:function(data)
{
$('#list-group-item-'+task_list_id).css('text-decoration', 'line-through');
}
})
});
$(document).on('click', '.badge', function(){
var task_list_id = $(this).data('id');
$.ajax({
url:"delete_task.php",
method:"POST",
data:{task_list_id:task_list_id},
success:function(data)
{
$('#list-group-item-'+task_list_id).fadeOut('slow');
}
})
});
});
</script>
add_task.php
This file has been received ajax request for insert or add or create new to do list item. Here we have use PHP PDO script for insert data into Mysql table. Once the data has been added into Mysql table, then it has send last inserted to do list details has been send to Ajax request, which it will display on web page without refresh of web page.
<?php
//add_task.php
include('database_connection.php');
if($_POST["task_name"])
{
$data = array(
':user_id' => $_SESSION['user_id'],
':task_details' => trim($_POST["task_name"]),
':task_status' => 'no'
);
$query = "
INSERT INTO task_list
(user_id, task_details, task_status)
VALUES (:user_id, :task_details, :task_status)
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$task_list_id = $connect->lastInsertId();
echo '<a href="#" class="list-group-item" id="list-group-item-'.$task_list_id.'" data-id="'.$task_list_id.'">'.$_POST["task_name"].' <span class="badge" data-id="'.$task_list_id.'">X</span></a>';
}
}
?>
update_task.php
This PHP file has been received Ajax request for update the status of to do list task. On this page first we have make database connection and then after we have check any data has been received or not if received then it has been proceed for update the status of task list. For update data here we have use PHP PDO script. After done updating of status then it has send response to Ajax request.
<?php
//update_task.php
include('database_connection.php');
if($_POST["task_list_id"])
{
$data = array(
':task_status' => 'yes',
':task_list_id' => $_POST["task_list_id"]
);
$query = "
UPDATE task_list
SET task_status = :task_status
WHERE task_list_id = :task_list_id
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
echo 'done';
}
}
?>
delete_task.php
This script has been used for delete or remove task list. This script has been received ajax request for remove to do list from database and after successfully removed of data it will send response to Ajax request.
<?php
//delete_task.php
include('database_connection.php');
if($_POST["task_list_id"])
{
$data = array(
':task_list_id' => $_POST['task_list_id']
);
$query = "
DELETE FROM task_list
WHERE task_list_id = :task_list_id
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
echo 'done';
}
}
?>
So, this is complete source of To-do List Crud application which has been build in PHP script with Ajax jQuery Bootstrap and Mysql Database.
Hallo sir, your tutorial is fantastic, can you please add a description of the item? fpr example, if its bread, how many loafs?
ReplyDeleteThanks for your blog, it helped me a lot
ReplyDeleteSir its a great learning video tutorials for beginners like me.
ReplyDeleteSir if you make this todo list using laravel then it will be really helpful for us. and sir if i want to add one and more features like adding a button which show me the acivated items and also add a button which show me the deleted items below the list. And also if i add a item it shows me to the corner that suppose 4items left and if i delete 1item it shows 3item left. And also a all clear button to clear all the items list.
Sir its really urgent for me.
If possible then please add those things.
Thanks in Advance.
Thanks for sharing. To-Do list works well
ReplyDeleteHi! How to make editing task details with updating in DB?
ReplyDeletei followed all the instructions and still end up with this error:
ReplyDeleteFatal error: Uncaught PDOException: SQLSTATE[HY000] [1049] Unknown database 'testing' in C:\wamp64\www\New folder\database_connection.php on line 4;
.......this is line 4
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");