http://angularcode.com/Ghost 0.11Tue, 28 Mar 2017 17:48:24 GMT60In this tutorial I will show you, how to configure Amazon EC2 server for an NodeJS app. Login to your Amazon EC2 server and execute the following commands.

Install NodeJS

$: sudo apt-get update $: sudo apt-get install -y python-software-properties python g++ make $: sudo add-apt-repository ppa:chris-lea/node.js $: sudo apt-get update

]]>http://angularcode.com/steps-configuring-amazon-ec2-nodejs/62f8fb4f-e86e-4cda-95fc-388c3d60f2f0Fri, 15 Apr 2016 15:25:18 GMT

In this tutorial I will show you, how to configure Amazon EC2 server for an NodeJS app. Login to your Amazon EC2 server and execute the following commands.

Install NodeJS

$: sudo apt-get update $: sudo apt-get install -y python-software-properties python g++ make $: sudo add-apt-repository ppa:chris-lea/node.js $: sudo apt-get update $: sudo apt-get install nodejs $: sudo apt-get install git $: sudo npm install forever -g

Initialize the remote git repo

$: cd ~/ $: mkdir repo/ $: cd repo $: git init --bare

Configure hooks

$: cd repo/hooks/ $: cat > post-receive #!/bin/sh GIT_WORK_TREE=/home/ec2-user/www export GIT_WORK_TREE git checkout -f cd $HOME/www ./start.sh

$: chmod +x post-receive

Automate the deployment process

$: mkdir www/ $: cd ~/www/ $: cat > start.sh # this file is execute by post-receive everytime a Git Commit is made # Path: /home/ec2-user/repo/hooks/post-receive forever stopall NODE_ENV='production' forever start server

$: chmod +x start.sh

Copy content of C:\Users\<your_username>\.sshid_rsa.pub to remote Machine at .ssh folder

$: sudo vi .ssh/authorized_keys

Add the following line to Local Machine (dist/.git/config)

[remote "origin"] url = ssh://ec2-user@<your_server_ip>/home/ec2-user/repo fetch = +refs/heads/*:refs/remotes/repo/* puttykeyfile = C:\Users\<your_username>\.ssh\aws.ppk </your_username></your_server_ip>

Local Machine: Git push

Open http port from ec2 dashboard
Check with the command NODE_ENV=production node server

Configure IP tables to redirect all incoming connections to port 8080

$: sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 8080 $: sudo iptables -t nat -L -n --line-number

Install MongoDB at amazon-ec2

How to install Mongo Database at amazon-ec2

]]>
Setting up Cron Jobs at Godaddy is a bit tricky

As per Godaddy documentation, the Godaddy hosting does not support the Cron Jobs for PHP v5.4

You need to use the following path settings for different versions of PHP

Hosting typePHP versionPath
cPanel5.5/usr/bin/
]]>
http://angularcode.com/steps-configuring-php-cron-jobs-godaddy/0903d217-cb7e-404e-af24-9eae6c098b31Sat, 09 Apr 2016 21:02:04 GMT

Setting up Cron Jobs at Godaddy is a bit tricky

As per Godaddy documentation, the Godaddy hosting does not support the Cron Jobs for PHP v5.4

You need to use the following path settings for different versions of PHP

Hosting typePHP versionPath
cPanel5.5/usr/bin/php
cPanel5.4/usr/local/bin/php
Plesk5.4/web/cgi-bin/php5_4
Web & Classic5.3/web/cgi-bin/php5_3
Web & Classic5.0-5.2/web/cgi-bin/php5
Web & Classic4/web/cgi-bin/php

Hence we need to choose a PHP version from the available (5.3 and 5.5)

Example (for PHP v 5.5)

/usr/bin/php “$HOME/public_html/test/mail/index.php”

]]>
Sometimes we may need to send email from our website to the client with some attachment. In this tutorial we will query the MySQL database to get the updated data from our table and email the data to the desired email as PDF attachment.

Live Demo Download

For this we

]]>
http://angularcode.com/send-pdf-attachment-email-using-php/b740174c-9477-4022-aab5-643957b421ecSat, 09 Apr 2016 15:36:51 GMT

Sometimes we may need to send email from our website to the client with some attachment. In this tutorial we will query the MySQL database to get the updated data from our table and email the data to the desired email as PDF attachment.

Live Demo Download

For this we will use

  1. AngularJS [For front end]
  2. PHP [To query the database and send email]
  3. MySQL [The database]
  4. fPDF library [This will generate the PDF for us]
  5. SendGrid [This helps us sending the email in a better way]

code

index.html

books.sql

app.js

config.php

database.php

index.php

sendgrid.php

]]>
In this post I will explain you how to generate a simple PDF file from your MySQL database using PHP. For this purpose we will use the popular PHP library FPDF which will enable us to generate the PDF file with the content and ourput format we desire.

Live Demo

]]>
http://angularcode.com/generate-pdf-using-php-mysql/199bc0ca-db2a-479f-9979-d7b6762b7ce5Wed, 06 Apr 2016 22:09:27 GMT

In this post I will explain you how to generate a simple PDF file from your MySQL database using PHP. For this purpose we will use the popular PHP library FPDF which will enable us to generate the PDF file with the content and ourput format we desire.

Live Demo Download

Step-1: Get the data from MySQL database into the page
Step-1: Download the FPDF library from fpdf.org
Step-2: Copy the fpdf.php file into your application folder
Step-3: Use the fpdf library like so

books.sql

index.php

database.php

]]>
Sometimes we may need an email form or contact form for our website

Scenario-1: We wish our users to be able to communicate to the admin, author, managers of our website.
Scenario-2: We wish to send emails to our users regarding

]]>
http://angularcode.com/project-demo-send-mail-using-nodejs/09c62238-8b20-456a-be65-c0940f987f2aWed, 06 Apr 2016 22:00:45 GMT

Sometimes we may need an email form or contact form for our website

Scenario-1: We wish our users to be able to communicate to the admin, author, managers of our website.
Scenario-2: We wish to send emails to our users regarding


Live Demo Download

Run

  1. Download and extract the zip file
  2. Open command prompt and browse to the extracted folder
  3. write the command node .
  4. Open Chrome browser and point to http://localhost:8080/

Tutorial

We will be creating a simple AngularJS web application which will send an email to the website administrator when any users wish to contact regarding any issue.
We are going to implement the above functionality in just 3 steps

  1. Craft the user interface (front end client side)
  2. Configure the email client (Sendgrid)
  3. Create the server and make the server talk to Sendgrid and AngularJS frontend (Using NodeJS)

Step-1

Let’s build the user interface using google’s material design and our friend AngularJS

Let’s use the material design CSS library provided by materializecss.com

Step-2

To send email we will use some node libraries

For this we need to create a sendgrid account and generate a api key and use in index.js

Project Structure

client

– style css

– app.js

– index.html

index.js
package.json
 

index.js (NodeJS)

package.json

index.html

app.js (AngularJS)

]]>
Hi. In this tutorial we will create an AngularJS web app that will upload the user selected file to server using nodejs. To achieve this we will use the multer node module.

Live Demo Download

Installation

Open Command Prompt and navigate to the downloaded directory simple-file-uploader

Run the following command

]]>
http://angularcode.com/simple-file-upload-example-using-angularjs/ede291bb-c013-427d-a78f-dd3bc1fe4997Tue, 22 Mar 2016 08:52:44 GMT

Hi. In this tutorial we will create an AngularJS web app that will upload the user selected file to server using nodejs. To achieve this we will use the multer node module.

Live Demo Download

Installation

Open Command Prompt and navigate to the downloaded directory simple-file-uploader

Run the following command

node .

Project Structure

The web application code is mainly separated into 2 parts (Client and Server)

public

–index.html : The starting point for our application front end (Client)

–server.js: File upload and save (Server)

code

index.html

The starting point for our application front end

.gitignore

It contains files that will be ignored by git to upload

.git
node_modules

package.json

It contains Required node packages

server.js

It uploads and saves files.

]]>
In this tutorial, we will create a simple, real and single page Appointment Booking web application using Javascript Fullstack or MEAN Stack (MongoDB + Express + AngualrJS + NodeJS) which can also be used as an Event Scheduler. ]]>http://angularcode.com/appointment-booking-using-angularjs-nodejs-mongodb/252f9ba5-ec41-4f03-ada9-79a0613d5713Sun, 20 Mar 2016 11:31:00 GMT

In this tutorial, we will create a simple, real and single page Appointment Booking web application using Javascript Fullstack or MEAN Stack (MongoDB + Express + AngualrJS + NodeJS) which can also be used as an Event Scheduler.

Live Demo Download

Installation

Install Required Softwares

* NodeJS (http://nodejs.org) *

'NodeJS is a non blocking, event-driven javascript framework for building network based applications. This comes with Node Package Manager. (npm)'

Install NodeJS and run node

* MongoDB (http://mongodb.org)*

"MongoDB is a Javascript based cross-platform document-oriented NoSQL database."

Install MongoDB and run mongod in a separate shell to keep an instance of the MongoDB Daemon running

Start the application

Open Command Prompt / Terminal and Run the following commands

npm install : Installs all required server dependencies.
bower install: Installs front-end packages required for our application.
node server: Starts the application on port 8080 (http://localhost:8080)

Open your web browser and point to http://localhost:8080

Code

client/index.html

The starting point for our application front end.

client/app.js

It starts the angular module and links the required external dependencies.

client/customer.html

Appointment details with customer information.

client/main.css

All css files for main.html.

client/main.html

Application’s front end.

client/main.js

It implements required logics.

server/index.js

It creates the appointments ReST API routes.

server/api/appointment/index.js

The appointments ReST API routes are defined here.

server/api/appointment/model.js

Defines the appointments database model.

package.json

It carries node dependencies which are required for this application.

]]>
In most of the applications we need to talk to some kind of database. While AngularJS is a client side library which is capable only at the client side or at browser, now to connect to our database which usually resides at our server we need NodeJS.

NodeJS is an

]]>
http://angularcode.com/creating-rest-api-using-nodejs-and-consuming-in-angularjs/dcab7d25-de76-4580-ba88-cd6675aae35aMon, 16 Nov 2015 09:00:44 GMT

In most of the applications we need to talk to some kind of database. While AngularJS is a client side library which is capable only at the client side or at browser, now to connect to our database which usually resides at our server we need NodeJS.

NodeJS is an awesome light weight, non-blocking platform to have at your server which is perfect for data-intensive real-time applications.

We will create a simple inventory manager app which will communicate to database

Live Demo Download

Database: products-demo Collection: products Fields: SKU, Product Name, Price

Our learning path will be like following

Install NodeJS, NPM and MongoDB

NodeJs:       https://nodejs.org/en/
MongoDB: https://www.mongodb.org/
 

Create ReST API

To create a NodeJS application we first need to create 2 files named:
1. package.json (Defines the architecture and dependency of the nodejs app)

2. server.js (This will create a basic webserver similar to Apache)

Now we created our server, lets open command line and navigate to the project folder (C:\creating-rest-api-using-nodejs-and-consuming-in-angularjs)
Enter the following commands

npm install node server

npm install – Install all required modules defined in package.json file

node server – Run our NodeJS app

At this point we should see the message Server is running on port 3000
Create the following 2 files

Now that our API is ready. You can test it using Chrome Postman extension

The next step is to create our client using AngularJS
To call our ReST API we need the help of angular-resource which will make our task easy and fun.
In this application I’ve added some animations too.
For this application we will create a factory named Product to interact with our ReST API which in turn interacts with our database.
We will call this factory from products.js file with different methods like get, post, put, delete.
The file public/index.html is the starting point of our application. From here everything starts. This page renders the view.

We have 2 controller where we define the business logic and the angular app resides here

app/app.js

app/products.js

This is the ProductsCtrl where we handle all user interactivity

]]>
We find E-Commerce mega menu in almost all online shopping websites where they display the all their available category of products. We will design the database and use AngularJS to easily present the menu to the user with some interactions.

Today we are going to create a similar megamenu using

]]>
http://angularcode.com/online-shopping-mega-menu-using-angularjs-php-mysql/9bd045f0-8ecb-4017-9ed5-39a6715e3583Tue, 31 Mar 2015 15:16:50 GMT

We find E-Commerce mega menu in almost all online shopping websites where they display the all their available category of products. We will design the database and use AngularJS to easily present the menu to the user with some interactions.

Today we are going to create a similar megamenu using

Live Demo Download

The directory structure of our application as follows

angularcode-megamenu

api [ Out ReSTFul API end point ]

– libs [ Contains all PHPSlim library files ]

– v1 [ Current version of our ReST routes from where data is served ]

— .htaccess [ Apache rule to convert generic urls to friendly urls for our API]

— dbHelper.php [ A custom database helper function to select data from MySQL Database ]

— config.php [ Contains our database configurations ]

— index.php [ The main file of our api from where our API runs ]

app [Contains all our custom AngularJS files]

– app.js [ The only AngularJS file we require for this project ]

css [ Stylesheets ]

– bootstrap.min.css [ Here i used Bootstrap v3.3.2 ]

– megamenu.css [ Some custom styling to generate the frontend of our megamenu ]

libs [ All libraries required by our project]

– angular.js [ In this project we require only AngularJS ]

index.html [ The main file from where our application starts ]

You can download a copy of the whole project from the above download link.
To run the project

If you face any issue while creating the above ReST API, probably you misconfigured the Apache, PHP, MySQL or rewrite module is not working properly

Now lets understand the working principle. How things work together.

First lets design the databse structure for our proejct
Database – categories

We will first create the ReST API required for our project

api/v1/config.php

api/v1/dbHelper.php

api/v1/index.php

Now our API is ready. You can test the API by browsing http://localhost/angularcode-megamenu/api/v1/categories

This should show all the categories with corresponding subcategories.

The job now is to show up the data to the user as a megamenu
For that we need to include bootstrap and angularjs into our project. Our index.html files will now look like the following.

index.html

The index file contains one file named app/app.js which contains our AngularJS Javascript code of our application

app.js

megamenu.css

The stylesheet which presents the megamenu to the user and expands the child nodes when user hovers over the parent menu item.

We are done with creating a megamenu using AngularJS. Feel free to leave any comment bellow.

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

]]>
http://angularcode.com/inventory-manager-using-angularjs-mysql-php/88f3ae2d-6b0b-4873-944f-fe960098675eTue, 04 Nov 2014 21:43:22 GMT

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

Live Demo Download

How to use

There will be 3 directives essential for this simple application

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

Modules used

Requirement Specification

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/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

]]>
For my AngularJS applications I use PHP as my server side language which mainly interacts with the MySQL or Oracle database. I need to created a database helper class using PHP to collect all recurring database operations into a single class, so that we can easily use it whenever we]]>http://angularcode.com/useful-database-helper-class-to-generate-crud-statements-using-php-and-mysql/3eca04fa-bba6-438a-9f76-7b4e39d02654Fri, 12 Sep 2014 22:16:43 GMT

For my AngularJS applications I use PHP as my server side language which mainly interacts with the MySQL or Oracle database. I need to created a database helper class using PHP to collect all recurring database operations into a single class, so that we can easily use it whenever we need to select, insert, update or delete record from database.

This database helper class generate the CRUD statements dynamically and always output the response in a standard format. Hence reducing the recurring tasks load on programmer. This also makes bug tracking task easy as everything stores in a central location.

Download

I thought about sharing my work. I hope you all like it.

Features:

The Framework:

Mainly in SQL database we use the following 4 operations to manage our data (DML Operations)
C – Create
R – Read
U – Update
D – Delete

R – Read: The following is a simple read or select operation in SQL

select * from customers;

Now we will generate similar select statement and return the selected data using the followin helper function

C – Create : The following is a simple create or insert operation in SQL

insert into customers(name,email) values('Angular Code', 'admin@angularcode.com');

After this operation we need to return the caller function the proper data with any associated success or error message. To handle those recurring tasks these CRUD modules will be helpful for you. That’s why i named this databaseHelper(dbHelper) class.

For insert operation we need the table name, the values to insert and mandatory columns

U – Update : Following is a simple update operation in SQL where we update email of the user having id 170

update customers set email = 'info@angularcode.com' where id = 170

For update operation we need the table name, the columns names and the corresponding values to update, the condition on which the update will occure on a record

D – Delete: Following is a simple delete operation in SQL

delete from customer where id='170'

For delete operation we need the table name and the condition on which the delete will occure. In this case the where clause or condition of delete is mandatory otherwise all records will be deleted from database. Hence we will run the delete script only if atleast one condition is specified.

For any application, data is always essential. So to protect and validate our data we have to sanitise it both at the client side(for speed and instant help to the user) and server side(for better security). Here comes the module verifyRequiredParams();

How to use:

Download the zip file from the download link provided above. Import the customer_php.sql file into your database

Add your database settings to the file “config.php”

 define('DB_USERNAME', 'root');  
 define('DB_PASSWORD', '');  
 define('DB_HOST', 'localhost');  
 define('DB_NAME', 'angularcode_auth');  

Following is the template of how to use it

Here are example methods

 $rows = $db->select('customers_php',array());  
 $rows = $db->select('customers_php',array('id'=>171));  
 $rows = $db->insert('customers_php',array('name' => 'Ipsita Sahoo', 'email'=>'ipi@angularcode.com'), array('name', 'email'));  
 $rows = $db->update('customers_php',array('name' => 'Ipsita Sahoo', 'email'=>'email'),array('id'=>'170'), array('name', 'email'));  
 $rows = $db->delete('customers_php', array('name' => 'Ipsita Sahoo', 'id'=>'227'));  

Next tutorial i will create a simple AngularJS application and show you the power of these database helper functions used in a real world app.

]]>
I received a number of tutorial requests to publish a tutorial on user authentication. They say “Mixing PHP, MySQL, and AngularJS with Sessions and User Login, Logout, Account Creation” would be awesome”.

We will create a simple AngularJS web app that will have the following 3 functionality.

* Login, Signup and

]]>
http://angularcode.com/user-authentication-using-angularjs-php-mysql/94436e61-5b1e-417d-ac23-a1599579176aMon, 01 Sep 2014 22:02:56 GMT

I received a number of tutorial requests to publish a tutorial on user authentication. They say “Mixing PHP, MySQL, and AngularJS with Sessions and User Login, Logout, Account Creation” would be awesome”.

We will create a simple AngularJS web app that will have the following 3 functionality.

* Login, Signup and Logout.*

We will create a ReSTful web service using PHPSlim framework as data provider. The data from the ReSTful service will be used to enable user authentication in our AngularJS application.

User authentication using AngularJS, PHP, MySQL

Live Demo Download

To run the user authentication web application in your local machine, follow the following 3 simple steps.

Tutorial:

We will first create the Login page. After the user enters the correct combination of email and password, it will be authenticated from the credentials stored at our MySQL database. On successful login it will store the credentials in the user session and redirect to the welcome page. All subsequent pages browsed after login will have access to the user information.

Upon unsuccessful login or logout, the app will redirected the user to the login page.

We will use the elegant AngularJS-Toaster plugin to communicate to the user easily.

For this application we will also create some simple AngularJS directives for our SignUp form.

ReST

Representational state transfer (ReST) is a software architecture for www. Distributing the data to different kind of applications becomes convenient using this architecture. It produce status code response in JSON or XML format.

We will create following 5 folders to manage our code effectively.

api [ This directory will serve as our restful data provider ]

–          config.php [ Database configuration information ]
–          libs [ The PHPSlim library files ]
–          v1 [ This folder controls our API version ]
—   .htaccess [ used to convert urls to user friendly url]
—   passwordHash.php [ Generate password hash ]
—   dbConnect.php [ The function to connect to MySQL Database ]
—   dbHandler.php [ This file contains some database helper functions ]

—   index.php [ The starting point of the API ]
—  authentication.php [ Contains functions for user authentication, login, signup, session ]

app –          app.js [ The main angularJS file that controls routing and authentication ]
–          authCtrl.js
–          data.js
–          directives.js

css –          bootstrap.min.css
–          custom.css
–          toaster.css

js [ This directory contains required javascript libraries ] –          angular.min.js
–          angular-route.min.js
–          angular-animate.min.js
–          toaster.js

partials [ Contains our partial pages that will be served based on user request ] –          login.html
–          signup.html
–          dashboard.html

index.php [ Starting point of our application contains css files, javascript files and ng-view placeholder to serve all requested partial pages ]

 

All the API files required to create the ReSTful webservice is stored inside the “api” directory.

The only file you need to change is the “config.php” [ This file contains the database login information. Put your database credentials here ]

Also we need to import the “angularcode_auth.sql” file into our MySQL database

Now our data provider is ready. Let’s create the starting point of our application (index.php)

This file contains the required stylesheet and javascript files with the placeholder to serve partial pages

We will create and store all our custom AngularJS code files inside the app/ directory

app/ app.js

This is the starting point of our AngularJS application. Here we will load the modules and configure the route provider.

app / data.js

We will communicate with our ReSTful API using this file. This file contains some helper functions and acts as our service provider.

AngularJS Service

Sometimes while building our AngularJS application, we need some variables or functions to be accessed throughout our application from any controller. Here comes the role of AngularJS Service. As AngularJS Service services are single-tone, the defined properties and functions can be accessed from anywhere.

app /authCtrl.js

This is the controller which communicates with our front end.

app / directives.js

This file contains 2 custom AngularJS directives we used for our application.

focus – This directive focus on the desired form element on page load

password-match – Used to check if both the password and confirm password are same in our user signup page.

AngularJS Directives

Directives are one of the most powerful part of the AngularJS framework. Using these we can create or extend the html elements.

We can extensively use these AngularJS directives to create templates, to validate forms, etc.

In AngularJS, it is always recommended to manipulate the DOM using directives only.

]]>
REST represents Representational State Transfer. For web applications REST API is a good architectural choice for the communication between the app and the server. This makes sharing data between different devices and apps easy. Implementing REST is simpler compared to other methods like SOAP, CORBA, WSDL. In this tutorial we]]>http://angularcode.com/demo-of-a-simple-crud-restful-php-service-used-with-angularjs-and-mysql/77b2bb53-8976-4717-8f6d-9f77bbd49994Wed, 28 May 2014 12:39:12 GMT

REST represents Representational State Transfer. For web applications REST API is a good architectural choice for the communication between the app and the server. This makes sharing data between different devices and apps easy. Implementing REST is simpler compared to other methods like SOAP, CORBA, WSDL. In this tutorial we will create a RESTful web service using PHP. Also we will create a Customer Manager Application using AngularJS as front end which will consume this web service.

Demo of a simple CRUD RESTful php service used with AngularJS and MySQL

Live Demo Download

In this project we will have the most simple Create, Read, Update, Delete operations on customers table using REST API. Previously we learnt how to create a simple task manager application using AngularJS PHP and MySQL. This time we will do the same CRUD on database but in a more organised manner and using a RESTful web service using PHP, MySQL.

To run the customer manager web application in your local machine, follow the following 3 simple steps

  1. Download the required files
  2. Import angularcode_customer.sql
  3. Enable rewrite_module in apache server

At first lets start building the REST API using PHP, MySQL and then we will move on to the AngularJS part for the front end part of our Customer Manager Application.

1. Creating the database table for this project

You can import the provided sql file angularcode_customer.sql in the download. We need to keep the application database structure simple, so we only need one table named customer

2. Build the REST API

Now lets fetch data for our database using the RESTful API which is created using PHP Langulage. The REST files are saved inside services folder, so that we can make RESTful calls using

In our application the path to the REST API  is “/AngularCodeCustomerManagerApp/services/”. Now we can make RESTful calls like

The services folder contains the .htaccess file for friendly URLs. To make this friendly URLs to work, we need to enable the rewrite module of apache.

The api.php file creates those REST calls possible

3. Make our web page angular ready

The main index.html file, which is the starting point of our application

customer.html- This file lists all the customers

2. edit-customer.html – This file is used to add, update, delete a customer

4. AngularJS Code

The app.js file which contains all the client side angularjs code

]]>
This tutorial explains how to create a datagrid similar to ASP.NET gridview with client side paging, searching and sorting functionality using AngularJS, PHP, MySQL. Following are links to the demo and download of the final application.

datagrid

Live Demo Download

I have used angular-ui directive for the user interface of

]]>
http://angularcode.com/angularjs-datagrid-paging-sorting-filter-using-php-and-mysql/309a7516-c1f7-4e54-9a43-12959d07be91Mon, 28 Apr 2014 16:29:09 GMT

This tutorial explains how to create a datagrid similar to ASP.NET gridview with client side paging, searching and sorting functionality using AngularJS, PHP, MySQL. Following are links to the demo and download of the final application.

AngularJS datagrid paging, sorting, filter using  PHP and MySQL

Live Demo Download

I have used angular-ui directive for the user interface of paging and some basic functionality.

While working with angularjs I found out the biggest issue using angular is it makes the Browser DOM slow while displaying huge amount of data. Hence it becomes necessary to load data partially through paging or infinite scrolling.

When we implement paging the data is divided into number of small pages. Hence the browser has to load less amount of data at one stretch. Which in turn increases the data loading speed.

Database setup:

Download the source code and import customers.sql to your MySQL database.

I’ve structured the entire application into 5 different folders

CustomersTable

This contains all the information about customers which we intend to display in our grid.

/includes/db.php

– Contains database configuration settings

/ajax/getCustomers.php

– Contains php files which needs server side communication

/app/app.js

– AngularJs application codes

/css/bootstrap.css

– Adds bootstrap styles to our application

/js

– Contains supporting javascript library files [angular.min.js, ui-bootstrap-tpls-0.10.0.min.js]

index.html

The index.html file which contains the datagrid

I hope the above tutorial will get you started handling large MySQL data tables using AngularJS and PHP. If you have any improvement ideas or suggestions please add comments bellow.

]]>
We will try to create a simple voting system app similar to StackOverflow.com using AngularJS, PHP and MySQL. I will put the code to download as well as a demonstration of the end product as we approach the finishing point of the AngularJS Web App. This app will accept]]>http://angularcode.com/voting-system-similar-to-stackoverflow-using-angularjs-php-and-mysql/4855cd20-ba5b-4ca6-9129-7edde473f905Wed, 02 Apr 2014 12:06:59 GMT

We will try to create a simple voting system app similar to StackOverflow.com using AngularJS, PHP and MySQL. I will put the code to download as well as a demonstration of the end product as we approach the finishing point of the AngularJS Web App. This app will accept vote from users and store it into MySQL database using PHP.

Voting system similar to stackoverflow using AngularJS PHP and MySQL

Live Demo Download

The file structure of our app will be following

Lets first set up the database.

Download the source code and import angular-voting.sql to your MySQL database.

The database we will be using is a simple one. We just want to keep the blog post information and the voteCount. We give the table a simple name “posts“.

Posts Table

This contains all the posts information with voteCount.

Get posts (php)

Update Post (PHP)

app.js

Now lets move on to the angularjs file (app/app.js) which contains the little lines of code that gets the data from the server updates the view and displays the result in web browser

index.html

The index.html file which is our front end and displayed to the user

]]>