全部博文（1159）
分类： Web开发
2016-03-16 22:47:33
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
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);
|
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
We will add some css for styling purpose
|
1
2
|
|
|
1
2
|
|
|
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();
});
};
});
|
|
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
|
TASK MANAGER
{{task.TASK}} [{{task.ID}}]
|
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
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);
}
?>
|
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
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);
?>
|
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
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);
}
?>
|
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
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);
}
?>
|
