Simple task manager application using Angularjs PHP Mysql

Oct 1, 2019
2 min read
  • #facebook
  • #autocomplete
  • #mysql
  • #angularjs

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.

Live Demo

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