Product – Inventory manager using AngularJS, MySQL and PHP RESTful API

Last tutorial we created a database helper class for PHP RESTful API. In this tutorial we will use that database helper class to build a simple inventory/product manager application. We will add, update, delete, activate, deactivate products from inventory. Some AngularJS directives will make our job easy.


  • Truely single page web application
  • Showcase the awesome power of angularjs directives
  • Animations make the user interaction much enjoyable
  • Has extensive power to build a large inventory management application over this framework

Product Manager using AngularJS

Live Demo Download

How to use

  • Download the project file from the download link provided above
  • Import the database file “products.sql” into MySQL database
  • Add your database settings to the file “config.php”

There will be 3 directives essential for this simple application

  • form-element [ Form element templates ]
  • only-numbers [ This directive will restrict users from entering alphabets in a number field ]
  • animate-on-change [ Animates a particular product when it is updated ]

In this project I ignored the security part of the web application. Please do add some security features before implementing into production.

Modules used

  • AngularJS Bootstrap UI modal  (for product edit)
  • underscore.js (for some helper javascript functions)
  • PHP Slim to create our data provider / API


Requirement Specification

  • Add/Edit/Delete new products to inventory
  • Activate/De-activate
  • Filter list of products at client side


Application Structure

api [ This serves as our ReSTFul data provider ]

–          libs [ The PHPSlim library ]

–          v1 [ Our API version 1 ]

—   .htaccess [ Converts urls to friendly urls for our API]

—   dbHelper.php [ The helper functions to connect to MySQL Database ]

—   config.php [ Database credentials and configurations ]

—   index.php [ The starting point of the API ]


–          app.js [ The starting point of our AngularJS web application ]

–          productsCtrl.js [ Products are controlled from here ]

–          data.js [ The middleware to connect to our API]

–          directives.js [ Some essential AngularJS directives ]


–          bootstrap.min.css

–          custom.css

–          font-awesome.min.css

js [ Required javascript libraries for application]

–          angular.min.js

–          angular-route.min.js

–          angular-animate.min.js

–          bootstrap.min.js

–          jquery.min.js

–          ui-bootstrap-tpls-0.11.2.min.js

–          underscore.min.js

partials [ Partial pages for products list and product edit ]

–          products.html [ List of products ]

–          productEdit.html [ Product edit template ]

index.php [ This page is called when our application starts and everything starts from here ]

Let’s use our database helper function and create the API for database interactions

  • api/v1/dbHelper.php  – Database helper functions created in previous tutorial for database access
  • api/v1/config.php       – Database configurations [userid, password, server name]
  • api/v1/index.php        – Select, Add, update, delete products



Now our API is ready. Lets start building our application. In our index.html (start page) of our application we will put the follwing div where all the partial pages will be served.


Now we will display the list of products and add some simple animations for product change, the angular way


We are successful displaying the products which has got activate/deactivate and delete button. We are going to embed our products into textboxes for editing

All the above partial pages will be controlled by our controller “productsCtrl”. Here we put the business logic of adding, deleting, updating products as well as the user interactions

Print Friendly

Related Posts

Written By:
  • dermansi

    nice work again! does this work with multiple tables (but same database?)

    • itswadesh

      Yes. It works. Without any issue

      • dermansi

        do you mind giving me an example code snippet?

  • GFG

    This doesn’t work for me, i’ve uploaded the source on my server, imported the sql file and updated the config.php, but the page is in an infinite loading and i get this error 404 (Not Found)

    • itswadesh

      Did you enable mod_rewrite in your web server?

      • IM

        Same problem here. I use nginx 1.4.6 on Ubuntu 14.04.

        How to enable mod_rewrite?

        • Mitchell

          it is option of apache, check rewrite_module for htaccess and it is good

      • morten

        i use share server i dont have access to enable mod_rewrite
        Is there another way to fix this issure

    • Equy

      Does anyone make it work under nginx?
      I also get http://x.x.x.x/product-manager/api/v1/products 404 (Not Found)

      In .htaccess file located in product-manager/api/v1/products i have :
      RewriteEngine On
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteRule ^(.*)$ %{ENV:BASE}index.php [QSA,L]

      It is possible to convert this to functional nginx directive ?


      • Eduardo Villas Boas


        After RewriteEngine On

        put this:
        Options +FollowSymlinks

        • tantan supriadi

          anybody can help? i have no error on log but the table doesn’t show any data, just loading all time

          • eli

            hi, did you solved that problem?

  • Tarik Kandil

    When i do this:

    I do not get the results. I added under the index.php this

    $app->get(‘/hello’, function () {

    echo “Hello”;


    but i do not get any result with :

    Do you have any idea?

  • Il Grizly

    cooooooool 🙂 i install that in my sql and i change the name of the data base but i HAVEN’T ANY PROBLEM, now, if i want insert some image for a products?

    • Siva

      I want to have that feature as well.. Did you found out any source code for that?.. If yes, then please let me know.. 🙂

  • richard

    validations not working, help me.

  • Mk

    tutorial is very helpful. how should i write JOIN queries in dbhelper function

  • VPC

    hi I have a doubt,

    For me, http://localhost/angular/28/api/v1/products this url shows

    “Object not found!”

    • eli

      did you solve this problem?

  • mert

    if you use wamp and got error like “localhost/product-manager/api/v1/products”.

    Do the following :
    1- Click to wamp icon on the task bar
    2- Select Apache -> Apache modules
    3- Find rewrite_module then check it.

    then everything works fine 😉

    • Guest

      Yeah, I met this issue as well. It fixed by doing that.

  • Jitendra Sisodiya

    Just started going through your code and came in between to comment.
    Very neat implementation.

  • Roman Jakobsun

    What about pagination here?

  • Muhammad Sibra

    I love this thank you 🙂

  • mjtcreative

    Great example, but when I run on my web server, I get the loading icon, and an error in the console of Object not found. I guess mine is similar to the mod_rewrite mentioned earlier, but configuration of .htaccess files is not something I’ve ever dabbled in before. Can anyone give the actual modifications that need making to the file that is currently in /api/v1 please.


  • manoj

    hi guys thanks for the code but there is problem in update and delete operation can you help me

    • Cory Mittleider

      I’ve copied the database and complete code structure to my host and I am also having problems with update and delete operations. I keep getting a PUT error 501 (Not Implemented) when I try to update or delete a record. Any chance you’ve seen this and can help me solve it?

      Thank you very much for this tutorial, it gets me most of the way there and has given me a good understanding of making my Angular code interact with php.

  • erosan

    Hi, I’m trying to follow the tutorial, but after uploading, it loads the information, but any change I make is not reflected on the database… any clue what could be going on?

    • Jeremy Wong

      Do U have the source code of this ,i can’ download it

  • Jeremy Wong

    I can not download the source file,Would U share the code with github

  • arvnd86

    hi, im getting in data.js page

  • Sreenivas Prince

    insert not working

  • Abdurehman Yousaf

    ao dear! i want to change this from ng-route to ui -router help me!

  • Maurice Kuria

    Nice work and a very good example…..

    Suppose i want to add buttons to convert the query data to excell or any other file format how would i use the REST api in that case to get the file ……Am a newbie in angularjs and REST apis

  • sakura

    excellent!! thank you!

  • Kyle David Hengst

    Just within productEditCrtl I believe ‘ =;’ should be ‘ =’

  • Pingback: Receiving JSON Object in Codeigniter With AngularJS - Technology()

  • dtech29

    is there a way to connect this to mssql?

    • K Denny

      I am not sure about mssql but I was able to refactor and use this example with PostgreSQL. You will have to do some refactoring of the dbhelper.php file to work with whatever database you are trying to connect and use. Also if you are going to use MsSQL, maybe try incorporating some of this code into Azure as well…

  • Al

    All seems to be working, except when I try to update a product that I’ve just created. I have to refresh the page before modifying that new product otherwise when I try to update the product I get this error in console : Object {status: “error”, message: “Update Failed: SQLSTATE[42S22]: Column not found: 1054 Unknown column ‘save’ in ‘field list'”} on productsCtrl.js:80. Problem persists on any new products inserted before refreshing the page. I do not understand? the db has been imported from .sql file…

    • Al

      Anybody else having that problem updating a newly created product??

  • Suresh Reddy

    Great example

  • Nico

    How would you use a when adding a new item to the list?

    $scope.categories = [
    { cat: ‘one’},
    { cat: ‘two’},
    { cat: ‘three’}

    I’m trying to do this:

    print category: {{ }}

    Is printing the category correctly on the but I get a POST 500 Error when I try to save the new product.

    Any advice?


  • Mehmet Gürlük

    form vailadation ???

  • kiran

    how to run this code I get a blank page when I open index.html in browser….I am new to angular js

  • Victor

    First of all thanks for the article, very well explained.
    Second, for all the people who still keep on getting the gear icon loading without showing any data, try as follows:
    1. in your apache httpd.conf file, make sure that the directive “LoadModule rewrite_module modules/” is present and uncommented.
    2. always in httpd.conf look up for the directive or whatever path you configured as the root for your http/www documents, and check if the option AllowOverride is set to All (otherwise .htaccess won’t work).
    3. in …./product-manager/api/v1/config.php add to the DB_HOST value the TCP port the mysql server is set on (it may vary), e.g.: localhost:3306; if you use MAMP it might be localhost:8889, for instance.
    If you use Linux – I do – check if all default values for the fields of table “products” are all set to “NULL”; I don’t know why but on phpmyadmin they were set to ‘None’, on the other hand, from the terminal they were ok. I had some issues trying to add a new product. Eventually by re-setting the default values I made it. Cheers.

    • Jacob naresh

      hey am unable to add new product. I was able to follow the instructions & done with everything. But when i click “Add new product” it does nothing. Can you please help?

  • Matthew J Spada

    How would one go about sum(price) and displaying it as a result underneath the price column

  • freddy

    Hello admin, i have question here, how can i make multiplication adn put the result in input type and also there is array multilication how can i do that ? this simple demo already made


  • Nicolas

    Hi. I Have problem with getting the gear icon loading without showing any data. I uncomment LoadModule rewrite_module modules/ and still not working. Pls help.

    • eli

      did you solved that problem?

  • Majid Lotfi

    Thanks for this tutorial, when you add a new product, I did not see where to add an image and the category.
    Is there any way to display the image too ?

    please your help is appreciated.

  • Roger Ham

    Hi, any one idea to add pagination to this angularjs App, it is aswesome

  • Ashwini Kumar

    Hi Swadesh,

    Can you please try to help me with the error getting as GET http://localhost/angular_example/sample/product-manager/api/v1/products 500 (Internal Server Error)

    and data not loading in to the page


    Ashwini Kumar K R

    • eli

      did you solved this problem?

  • Daniel Hudson

    Trouble with update/insert function after extending functionality to other tables (Read and Update works):

    Whenever I click the ‘Add new’ / ‘update’ button, the ID I input is erased, the other fields retain their information, and the console reads an error of ‘Object {status: “error”, message: “Required field(s) ID is missing or empty”}.’ Any thoughts?

  • George

    It will be much easier to add video tutorials how u make this, because I am beginner now and I’m confused how to make this.

  • morten

    Slim Application Error
    The application could not run because of the following error:
    Type: ErrorException
    Code: 2
    Message: json_encode() expects parameter 2 to be long, string given
    File: C:xampphtdocsProductapiv1index.php
    Line: 61
    #0 [internal function]: SlimSlim::handleErrors(2, ‘json_encode() e…’, ‘C:xampphtdocs…’, 61, Array)
    #1 C:xampphtdocsProductapiv1index.php(61): json_encode(Array, ‘JSON_NUMERIC_CH…’)
    #2 C:xampphtdocsProductapiv1index.php(25): echoResponse(200, Array)
    #3 [internal function]: {closure}()
    #4 C:xampphtdocsProductapilibsSlimRoute.php(436): call_user_func_array(Object(Closure), Array)
    #5 C:xampphtdocsProductapilibsSlimSlim.php(1307): SlimRoute->dispatch()
    #6 C:xampphtdocsProductapilibsSlimMiddlewareFlash.php(85): SlimSlim->call()
    #7 C:xampphtdocsProductapilibsSlimMiddlewareMethodOverride.php(92): SlimMiddlewareFlash->call()
    #8 C:xampphtdocsProductapilibsSlimMiddlewarePrettyExceptions.php(67): SlimMiddlewareMethodOverride->call()
    #9 C:xampphtdocsProductapilibsSlimSlim.php(1254): SlimMiddlewarePrettyExceptions->call()
    #10 C:xampphtdocsProductapiv1index.php(64): SlimSlim->run()
    #11 {main}

    Please help me fix this error

  • morten

    Please let me know how to fix it

    • eli

      Did you solved that issue ?

  • Mr B

    What’s up with the BBCodes? They are not formatting the code at all.

  • sanjay

    when run this app only loading.please solve this problem…

    • CME

      Hi did you solve the problem ??

  • Benjamin Kersnovske

    Awesome work! I also had the loading error. On shared hosting, checked that my .htaccess was working on subdomain and mod_rewrite was working as suggested. Upgraded from php 5.2 to php 5.4 and this fixed my problem.

  • KKG

    Please Help me any one,
    How to use
    Download the project file from the download link provided above
    Import the database file “products.sql” into MySQL database
    Add your database settings to the file “config.php”
    3rd one is not confing and not any add Product only screen is animte show. need help?

  • Rob

    Hello, I know this is an old post but I tried to download the code and Dropbox doesn’t seem to work, can you upload it again? to GitHub perhaps?

  • Joao Delinger

    Nice code sample. Just wish the author had included paging and it didn’t make it dependent on PHP Slim. Great job.

  • Chintan Panchal

    how to upload file with angularjs with php mysql please give me code for it.

  • Vad

    how I fixed 404 error on http://localhost/angular/28/api/v1/products.

    I added .htaccess to v1 directory with following lines:

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [QSA,L]

    More info here

  • Shapa

    How the do you remove text fields from the add/edit product dialog box? I removed the packing and description field in code but the fields remain on the live site. Any ideas?

    • admin

      You may need to disable cache from chrome developer console.

  • Veera Nathan to add pagination

  • Pingback: Following an AngularJS/MySQL/PHP tutorial. Having trouble converting the given .HTACCESS file to an equivalent web.config - CSS PHP()

  • kkk Ppp

    I tried to change some in productEdit.html for example h3 class=”modal-title”>Edit productik [ID123: {{}}] or remove some field…and I have no any changes in that form….why?

  • Siva

    Guys, I am facing the indefinite loading gear icon problem.. Products are not being shown.. In a web server.. @itswadesh:disqus, Please help me out bro..

    • Mashumba

      This is what worked for me when I had similar issue running wamp.

      Do the following :

      1- Click to wamp icon on the task bar

      2- Select Apache -> Apache modules

      3- Find rewrite_module then check it

      • Siva

        But I am on a web server.. Not on a local server.. I have even contacted my hosting provider to check whether rewrite_module is enable.. They informed that it is enabled by default.. There is definitely some problem within the script it self..

  • K Denny

    do you know of away we could enhance to where we could possibly import excel sheet data?

  • Pingback: Ejemplos Proyectos Angular Descargar | Tusolutionweb()

  • Aditya Chawla

    How can I combine this with user authentication project listed on this website, so that all the users can add and subtract and the website can keep a track of them.

  • K Denny

    What does resetlimit() do on the ng-change on the products.html page? I do not see that function defined anywhere and am wondering how that is executed and defined.

    • CME

      Hi i’m having a problem with the loading icon.. it keeps loading without shoing anything. i checked on the httpd.conf i mean this => LoadModule rewrite_module modules/ but ..still nothing .. im running it on MAMP…..

  • Kvark

    Thanks a lot! I am completely new in that all and has been try to get starting point to learn that magic, but wasn’t success… and finally I find this example! Its OSM! I know, its simple enough, but it also easy to understand and special thanks for that driver bit for mysql connection!

    • CME

      Hi i’m having a problem with the loading icon.. it keeps loading without shoing anything. i checked on the httpd.conf i mean this => LoadModule rewrite_module modules/ but ..still nothing .. im running it on MAMP…….

  • gleycio

    utf8 pt br?

    • CME

      Hi i’m having a problem with the loading icon.. it keeps loading without shoing anything. i checked on the httpd.conf i mean this => LoadModule rewrite_module modules/ but ..still nothing .. im running it on MAMP

  • Jacob naresh

    Hey, I am unable to add new product. I was able to follow the instructions & done with everything. But when i click “Add new product” it does nothing. Can you please help?

    But update functionality is working fine. Please assist?.

  • tobby

    I use usbwebserver8.6 as local server, and i encounter the “infinite Loading” error
    I uncommented rewrite module, etc.
    Can you please help me ?
    In advance many thanks