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


task varchar(200) NOT NULL,
status int(11) NOT NULL,
created_at int(11) NOT NULL,




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

4. Import the required javascript library

5. The Controller Code (app.js)

6. Our pagelet file (task.html)

7. CRUD Files





Print Friendly

Related Posts

Written By:
  • marya

    Hi – I found this a very useful starting point to learn AngularJS with PHP. Any chance you could expand on the example just a bit to include some error handling? Like field validation on task (e.g., no blank) – both client and server side? I’d basically like to know best practice for propagating an error message back to the user given the Angular framework. Cheers!

    • I will be doing this in near future. Thanks for pointing it out

      • meera

        i want to know about the config.php file

  • Sig

    Hello, I tested the code and it works fine.
    But it has a bug when a special character is entered as: á,é,í,ó,ú,ñ
    the list goes blank and displays data but if stored in bd.
    When I delete the record with special characters are displayed correctly

    • I would include this in next update

  • Arunkumar R

    I am new to angular js, i try to download this taskman package. There is no files in this link. Any one please put the sample working files.

    • @Arun. I validated the download package again. It contains all the required files. Please try again

  • M. Hasan
  • Avi

    Thanks for putting this together! I’m getting the following console error: Error: [ngRepeat:dupes]

    • @Avi,
      The error is because we did not initialize the array at getTask.php.
      Please add $arr = array(); just before the while loop at ajax/getTask.php.

  • ravindra

    sir, can i know step by step procedure how to run ,execute and debug the code .

    • Download the code
      Download and install wamp server
      Upload the customers.sql into your mysql database.
      Update your database settings at includes/db.php

  • zaibfridi

    thanks for this sharing, really help full ,

  • Marco

    Nice tutorial …..Could you do a CRUD using laravel with mysql????

  • Majid

    Hi, Thanks for this nice tutorial, I am waiting for your updates.

  • Mahmoud

    @Swadesh thanks for such a useful tutorial. I only have one question if you please now in the source files you’ve built a updateTask.php and in the app.js you have only the following functions ( getTask, addTask, deleteTask and toggleStatus ). So my question is how to implement the [ EDIT ] button to the task ( and I guess also it needs also a save button beside ) here’s a sample of what I mean I would really appreciate it if you explain how to do it. Thank you and keep posting the cool stuff 🙂

    • @Mahmoud. Its simple. inside task.html just bellow the delete put an anchor tag which will call “editTask(task)” on click.
      The editTask method takes the task object as argument. Now you can perform the update same as delete in your app.js file

      • vs

        Hello Sir,
        What is the basic procedure to add edit code, from above information i am not able to place edit functionality. Please help

  • Joniii

    Having problems getting the data to show on the page. It saves it to the database but the result back is just blank. Any ideas???

    • @ Joniii. You should track the error using console.log() at “app.js” file and let me know the exact error message you get. I hope its because we are using a deprecated version of “mysql_query”. Shortly i will update the files.

  • Joniii

    Im gettin this:

    Error: [ngRepeat:dupes] F/<@http://localhost/taskman/js/angular.min.js:6 we</<.link/<@http://localhost/taskman/js/angular.min.js:184 Bd/this.$get</h.prototype.$watchCollection/<@http://localhost/taskman/js/angular.min.js:99 Bd/this.$get</h.prototype.$digest@http://localhost/taskman/js/angular.min.js:100 Bd/this.$get</h.prototype.$apply@http://localhost/taskman/js/angular.min.js:103 f@http://localhost/taskman/js/angular.min.js:67 E@http://localhost/taskman/js/angular.min.js:71 pd/</v.onreadystatechange@http://localhost/taskman/js/angular.min.js:72

    • @Joniii, the error is exactly because we are using a deprecated version of mysql_query. I will update the files in next 2 hours.

  • Joniii


  • Joniii

    Thanks for the answers, and please let me know when its done!

    • Uploaded the new versio of files. Please download it from the same download link provided above

  • Joniii

    Great! From where does the $task = $_GET[‘task’]; in addTask.php gets it’s value? Is it from app.js or task.html form? Don’t understand the logic… I want to add more forms and values.

  • tk

    Nice tutorial, i know the angularjs now!
    just want to ask-i want to make SPA in angular in which user can create notes,he can add delete etc.,how can i do it using angular which communicates with jsp which inturn communicates with mysql backend?
    please help 🙂

    • @tk. I hope this would be same as this task manager application. Only you need to replace the PHP code with JSP

  • Charles Yang

    Hi Swadesh,

    Interesting example, my question is how to do you change to prevent CORS error? I have put the PHP scripts on the server but getting Cross-Origin Request Blocked error. I am looking to turn this into a HTML5 mobile app, but was wondering how do you handle CORS, the data will be stored on remote MySQL server. I am new to AngularJS, thanks for your help.

  • vijay shankar

    I’m new to angularjs, and putting my effort to learn the angularjs this tutorial help a lot, I have heard a term for angularjs i.e (MVW) i didn’t get this could you please help me with demonstration

    • LCherone

      model view whatever…

  • Pingback: Simple task manager application using AngularJS PHP MySQL | Tech Geeks()

  • Carlos Flores

    Awesome!!! I was looking for example files for Angular and PHP. Thank you itswadesh!


    good work.

    it would be great work to make the database utf8,
    allow people to test with different charset and see it working.

  • microsoft office 2010 activator

    Awesome post.

  • josephbupe

    Thank you man for sharing this code.

    Could you kindly expend the code to include admin assigning tasks to users and users only accessing tasks assigned to them?

    Stay well.

  • kumar

    Hi swadesh,

    how to connect mysql database using angularjs via java code

  • Suresh Reddy

    hi Swadesh Behera
    your tutorials very nice,
    i have one doubt how to use angularjs in cakephp and codeignatier framework.
    can you give me a one simple example

    • itswadesh


      I’m sorry. I have never tried cakephp or codeignatier framework. But you can always return the data from your cakephp framework in JSON format and use it in AngularJS application, as i did with PHP

      • Suresh Reddy

        Thanks for the reply

  • Nisarg Patel

    Great tutorial. Thanks.
    I have one problem, after creating the task the textbox is not becomes empty. How can I do it?
    I tried like this
    function getTask(){
    $scope.taskInput = ”;
    $scope.tasks = data;

    • Jithesh Kt

      He used ‘todoText’ in his markup. Change it accordingly 🙂

      • Quý

        Where’s todoText? i can’t find it

    • Manuel Arango

      Hi, I don’t know if it is still of interest to you, but for any other reader, the problem seems to be in the ng-if directive,, I changed the ng-if for an ng-show and problem solved.

  • Chess_is_great

    Nice tutorial, but there is a line of code that I did not get. How did $_GET[‘status’] in getTask.php get it’s data? How it was passed from input box in task.html? In other php files in the ajax folder I know how the data was passed. Like in $_GET[‘taskID’], I know the data was passed by this line, $“ajax/deleteTask.php?taskID=”+task). Thanks.

  • pfooti

    Am I wrong in thinking there’s a SQL injection pathway in all of these CRUD modules? It’s been a while since I did PHP, but I seem to remember needing to use bound variables and stuff.

    • dan

      There is indeed. Would have been nice if the author at least mentioned that the code was for example purposes only and contains multiple gaping security flaws.

      • KJ

        Seriously? Is it not obvious that this is an illustration of how the integration of AngularJS can be done with PHP and a not a discussion on how to build secure application ? !!

        • dan

          Building secure applications shouldn’t need to be a discussion. It should be common practice. Something you do EVERY time you write a piece of code without thinking twice. Otherwise, how do you ever expect to keep track of which code has been secured and which hasn’t?

          Pseudo-code is one thing, but when you post an article online that thousands of people are going to be copy/pasting it’s common courtesy to let them know if there’s something important they need to consider before using it in production. At least, that’s my opinion. Feel free to have your own.

          • Hank

            hear, hear

          • yoni

            do you have a good place that you recomend to read more about security of apps and php?

          • dan

            None specifically, besides the OWASP link I posted in reply to DnlCRG below.

            I recommend you just do a Google search for something catchy like, “Securing PHP applications” or “PHP security guidelines”.

            In addition, there are many excellent tech talks available online. Here are just a few I found with a quick web search.

            “Application Security – Understanding, Exploiting and Defending against Top Web Vulnerabilities”

            “PHP UK Conference 2014 – Eli White – Web Security And You”

            After watching these two talks you’ll likely find that you have some more specific questions which you can use to find even more interesting information in this field of study. Let the learning commence!

          • onexdata

            The only thing the author needs to do is use MySQL prep statements that replace tokens referenced by ?, with the user input. This will 100% stop SQL injections and is the only security flaw in this app.

          • Dante

            These kinds of comments show up on EVERY code tutorial EVER seen. At what point do you just stop and worry about yourself and your code instead of being a sanctimonious douche who thinks they need to save everyone.

            Even if people do try and secure them, it turns into a flame war about why the way they secured it isn’t good enough.

            Plain and simple, if you copy and paste tutorial code to production applications… you should be beaten with a hose.

      • DnlCRG

        Why don’t the gawds [sic!] of infosec enlighten us with their knowledge, thus adding to the security mindset ? Or do you only do lipservice to educating coders about infosec ?

        • dan

          It’s hard to solve a problem when I don’t yet know how you plan to use this code. To start, I can tell you for sure that every instance of $query=”blah blah”
          should be replaced with parameterized queries / (often called “prepared statements” in PHP) as outlined in the PHP documentation:

          That said, if you’d like to provide details about how you plan to personally use this code in production, I’d be more than happy to lend you a hand with securing the code and point you to some resources applicable to your scenario.

          • DnlCRG

            Thank you for your reply, dan. I had assumed you had some further insight than these two, IMO typical and should-be-standard-bloody-everywhere patterns. And thanks for your offer to help – I am tasked with maintaining (read: make it usable) a pure PHP “App” and I am looking at shortcuts to implement the user regitration system but stick to the mysqldb which contains all the user data. I thought about dopint it in extJS so i would learn a new framework at the same time. Another option would be to reskin the app but this was not intended by the creator so it involves major hacking in all files. What would you suggest ?

  • Chess_is_great

    Can anybody answer this?Nice tutorial, but there is a line of code that I did not get. How did
    $_GET[‘status’] in getTask.php get its data? Even if you change $_GET[‘status’] to $_GET[‘statusxx’] the code will still filter results.How it was passed from
    input box in task.html? In other php files in the ajax folder I know how
    the data was passed. Like in $_GET[‘taskID’], I know the data was
    passed by this line, $“ajax/deleteTask.php?taskID=”+task).

  • Pingback: Demo of a simple CRUD RESTful php service used with AngularJS and MySQL | Trần Tri's Blog()

  • vpc

    wow.Such a nice post and I liked the explanation much

  • jeffrey

    is there a reason that the input won’t accept a string that includes ‘http:’ ?
    thanks for the article

  • heri

    Great tutorial, thanks for share the code, let me to combine with php framework.

  • Cuauh Torres

    I’m very interested, I have a project where I have to show the new records that go in and show changing status of records in real time.

    How can we make the task manager real-time updates of records?

    Thank you very much for the contribution.

    • AJ

      Hi, were you able to achieve this? May be if you can share your learnings here, it will be wonderful.

  • Anibal Gomez

    Thanks for share! I propose that all projects use the same standard skeletons.

  • Alex

    Hey Swadesh. It’s all very nice laid out.
    Any tips on how could we edit the task’s text and assign different categories to the tasks? (like fruits, vegetables, grains, etc?)

  • Nicc NGO

    As I see, in the demo site, I can see the ng-controller but I can’t see “ng-controller” in the code so how can “task.html” understand which controller it will display?

  • Jason

    Thank For sharing tis code.. tis is awesome how angularjs work with php

  • Jason

    hi @itswadesh:disqus

    can this code suitable use for actionsheet or popover button menu to make a delete, if can how to push the to controller

    thanks =D

  • Pingback: AngularJS ile Uygulama Geliştirme | Tarık BAGRIYANIK()

  • وحید الوندی

    very good
    tanks you very much

  • Nyein Aung

    Really useful

  • Haseeb Ahmad

    where is “ng-repeat” code and where calling the functions ???

  • gamer

    thank you very much 😀

  • mspader

    Exactly what i was looking for, how would i go about having only the person who entered the data be able to delete it? is this possible, thank you!

  • epitomz

    Did you succeed download the project? Can anyone upload it somewhere?? Thanks

  • John Hang

    I notice that you can’t add any special characters such as ‘~!@#$%^&*(). If you add those special chars, the result is ugly. ![12] if you type ! for example. And it doesn’t add the task if you use ‘

    Sometimes we need to use can’t, shouldn’t, etc… anything with the ‘ can’t be used.

  • Pingback: AngularJS and Bootstrap MySQL Tutorial | LekkerLogic()

  • ryan_am

    This tutorial doesn’t work. The tutorial doesn’t explain anything about the other files included in the download and serves no help for a beginner.

  • Pingback: Get MySQL data with IONIC | Solutions for enthusiast and professional programmers()

  • Meera Karale

    where to put .php file in ionic project directory?

  • Pingback: [SOLVED]Get MySQL data with IONIC - Tech Magazine()

  • Niklas

    I like your tutorials, but im wondering if this is a code that i can use with ionic…

  • Manuel Arango

    Thank you for your tutorial, is it still up to date? should i still use this in incoming projects? I only see that i would like to use $resource insted of $http.

  • hardik

    thanks for sharing tutorial……..

  • Min Jin Yu

    This tutorial doesn’t work… no show tasks list… but it works insert tasks well(phpmyadmin show) Why my project doesn’t work??

    • Mark

      Did you run the INSERT queries as mentioned in the article?

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

      These are the initial tasks that you enter into the table.

      • Min Jin Yu

        Yes I did… And I did fixed it! 🙂 I create new project. Thanks~

  • Raj Swami

    thanks for giving this valuable sample 🙂

  • Jason

    getTask.php displayed wrong it is inserting again into database please correct