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.

Task Manager using AngularJS php mysql

Live Demo Download

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

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)

6. Our pagelet file (task.html)

7. CRUD Files

addTask.php

getTask.php

updateTask.php

deleteTask.php