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.
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
|
1
2
3
4
5
6
7
|
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 ;
|
|
1
2
3
4
5
|
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
|
1
2
|
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/taskman.css" rel="stylesheet" type="text/css" />
|
4. Import the required javascript library
|
1
2
|
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
|
5. The Controller Code (app.js)
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
//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.get("ajax/getTask.php").success(function(data){
$scope.tasks = data;
});
};
$scope.addTask = function (task) {
$http.get("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.get("ajax/deleteTask.php?taskID="+task).success(function(data){
getTask();
});
}
};
$scope.toggleStatus = function(item, status, task) {
if(status=='2'){status='0';}else{status='2';}
$http.get("ajax/updateTask.php?taskID="+item+"&status="+status).success(function(data){
getTask();
});
};
});
|
6. Our pagelet file (task.html)
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<div class="widget-box" id="recent-box">
<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>
TASK MANAGER
</div>
<div class="col-sm-3"><button class="btn btn-sm btn-danger header-elements-margin"><i class="glyphicon glyphicon-plus"></i> Add New Task</button></div>
<div class="col-sm-3">
<input class="form-control search header-elements-margin" type="text" placeholder="Filter Tasks" /></div>
</div>
</div>
<div class="widget-body "><form class="add-task" id="newTaskForm">
<div class="form-actions">
<div class="input-group"><input class="form-control" type="text" name="comment" placeholder="Add New Task" />
<div class="input-group-btn"><button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-plus"></i> Add New Task</button></div>
</div>
</div>
</form>
<div class="task"><label class="checkbox">
<input type="checkbox" value="{{task.STATUS}}" />
<span>{{task.TASK}} [{{task.ID}}]
</label></div>
</div>
</div>
|
7. CRUD Files
addTask.php
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<?php
require_once '../includes/config.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
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<?php
require_once '../includes/config.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
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<?php
require_once '../includes/config.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
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<?php
require_once '../includes/config.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);
}
?>
|
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
阅读(22) | 评论(0) | 转发(0) |
相关热门文章
给主人留下些什么吧！~~
评论热议