Simple task manager application using AngularJS PHP MySQL

最新推荐文章于 2024-07-10 14:31:12 发布

ztguang

最新推荐文章于 2024-07-10 14:31:12 发布

阅读量349

点赞数

分类专栏： Web技术/服务计算

本文链接：https://blog.csdn.net/ztguang/article/details/51016547

版权

Web技术/服务计算专栏收录该内容

197 篇文章 0 订阅

订阅专栏

http://www.angularcode.com/simple-task-manager-application-using-angularjs-php-mysql/

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

 
         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 ;

 
         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 href="css/taskman.css" rel="stylesheet" type="text/css" />

4. Import the required javascript library

 
         <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)

 
         //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)

 
         <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

 
         <?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

 
         <?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

 
         <?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

 
         <?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); 
       
         } 
       
         ?>