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.

Features

  • 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

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

–          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 ]

css

–          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

api/v1/index.php

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.

<div id="ng-view" ng-view=""></div>

partials/products.html

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

Products

partials/productEdit.html

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