Simple task manager application using Angularjs PHP Mysql

Facebook
Reddit
Twitter
Whatsapp
Cover image

This tutorial explains how to create a simple Task Manager application using AngularJS. Here I used PHP for server side communication and MySQL for database.

Live Demo

Our task manager app will have the following features

  • Create a new task
  • Strikeout the completed tasks
  • Option to delete any task
  • User will be able to search for tasks

1. Creating MySQL Database

We will create the only table required for this project tasks

CREATE DATABASE IF NOT EXISTS angularcode_task;
USE angularcode_task;
--
-- Table structure for table `tasks`
--
CREATE TABLE IF NOT EXISTS `tasks` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`task` varchar(200) NOT NULL,
`status` int(11) NOT NULL,
`created_at` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
--
-- Dumping data for table `tasks`
--
INSERT INTO `tasks` (`id`, `task`, `status`, `created_at`) VALUES
(1, 'My first task', 0, 1390815970),
(2, 'Perform unit testing', 2, 1390815993),
(3, 'Find bugs', 2, 1390817659),
(4, 'Test in small devices', 2, 1390818389);

2. The project structure

We will arrange the project files of our MVC framework into 5 different folders for better organisation.

js/ – Javascript library files. e.g. angular.js
app/ – Our custom javascript controller files for our project
partials/ – Small pagelets that we wish to reuse
ajax/ – The .php files to communicate to server (Connect, Create, Read, Update, Delete)
css/ – Stylesheet files

3. The Stylesheets

We will add some css for styling purpose

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"></link>  
<link href="css/taskman.css" rel="stylesheet" type="text/css"></link>  

4. Import the required javascript library

<script src="js/angular.min.js" type="text/javascript"></script>  
<script src="app/app.js" type="text/javascript"></script>  

5. The Controller Code (app.js)

//Define an angular module for our app
var app = angular.module('myApp', []);
app.controller('tasksController', function($scope, $http) {
getTask(); // Load all available tasks
function getTask(){
$http.post("ajax/getTask.php").success(function(data){
$scope.tasks = data;
});
};
$scope.addTask = function (task) {
$http.post("ajax/addTask.php?task="+task).success(function(data){
getTask();
$scope.taskInput = "";
});
};
$scope.deleteTask = function (task) {
if(confirm("Are you sure to delete this line?")){
$http.post("ajax/deleteTask.php?taskID="+task).success(function(data){
getTask();
});
}
};
$scope.toggleStatus = function(item, status, task) {
if(status=='2'){status='0';}else{status='2';}
$http.post("ajax/updateTask.php?taskID="+item+"&status="+status).success(function(data){
getTask();
});
};
});

6. Our pagelet file (task.html)

<div class="widget-box" id="recent-box" ng-controller="tasksController">
<div class="widget-header header-color-blue">
<div class="row">
<div class="col-sm-6">
<h4 class="bigger lighter">
<i class="glyphicon glyphicon-align-justify"></i>&nbsp;
TASK MANAGER
</h4>
</div>
<div class="col-sm-3">
<button ng-click="addNewClicked=!addNewClicked;" class="btn btn-sm btn-danger header-elements-margin"><i class="glyphicon glyphicon-plus"></i>&nbsp;Add New Task</button>
</div>
<div class="col-sm-3">
<input type="text" ng-model="filterTask" class="form-control search header-elements-margin" placeholder="Filter Tasks">
</div>
</div></div>
<div class="widget-body ">
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" id="newTaskForm" class="add-task">
<div class="form-actions">
<div class="input-group">
<input type="text" class="form-control" name="comment" ng-model="taskInput" placeholder="Add New Task" ng-focus="addNewClicked">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="addTask(taskInput)"><i class="glyphicon glyphicon-plus"></i>&nbsp;Add New Task</button>
</div>
</div>
</div>
</form>
<div class="task">
<label class="checkbox" ng-repeat="task in tasks | filter : filterTask">
<input
type="checkbox"
value="{{task.STATUS}}"
ng-checked="task.STATUS==2"
ng-click="toggleStatus(task.ID,task.STATUS, task.TASK)"/>
<span ng-class="{strike:task.STATUS==2}">{{task.TASK}} [{{task.ID}}]</span>
<a ng-click="deleteTask(task.ID)" class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
</label>
</div>
</div>
</div>

7. CRUD Files

addTask.php

<?php
require_once '../includes/db.php'; // The mysql database connection script
if(isset($_GET['task'])){
$task = $_GET['task'];
$status = "0";
$created = time();
$query="INSERT INTO tasks(task,status,created_at) VALUES ('$task', '$status', '$created')";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);
$result = $mysqli->affected_rows;
echo $json_response = json_encode($result);
}
?>

getTask.php

<?php
require_once '../includes/db.php'; // The mysql database connection script
$status = '%';
if(isset($_GET['status'])){
$status = $_GET['status'];
}
$query="select ID, TASK, STATUS from tasks where status like '$status' order by status,id desc";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);
$arr = array();
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$arr[] = $row;
}
}
# JSON-encode the response
echo $json_response = json_encode($arr);
?>

updateTask.php

<?php
require_once '../includes/db.php'; // The mysql database connection script
if(isset($_GET['taskID'])){
$status = $_GET['status'];
$taskID = $_GET['taskID'];
$query="update tasks set status='$status' where id='$taskID'";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);
$result = $mysqli->affected_rows;
$json_response = json_encode($result);
}
?>

deleteTask.php

<?php
require_once '../includes/db.php'; // The mysql database connection script
if(isset($_GET['taskID'])){
$taskID = $_GET['taskID'];
$query="delete from tasks where id='$taskID'";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);
$result = $mysqli->affected_rows;
echo $json_response = json_encode($result);
}
?>
Subscribe my updates via Email