http://www.angularcode.com/simple-task-manager-application-using-angularjs-php-mysql/
阅读(22) | 评论(0) | 转发(0) |
<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>
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);
}
?>
|
相关热门文章
给主人留下些什么吧!~~
评论热议