AngularJS CRUD With Php MySql REST API or Webservice Example

In this tutorial you will learn about the AngularJS CRUD With Php MySql REST API or Webservice Example and its application with practical example.

AngularJS CRUD With Php MySql REST API or Webservice

In this AngularJS CRUD with Php/MySql tutorial, I’ll show you how to create a simple AngularJS CRUD application with PHP/MySql REST API or Webservice . In this step by step tutorial, we will be creating a simple AngularJS SPA blog application with PHP/MySql restful API. In this article, you will learn how to create fully functional CRUD (Create, Read, Update and Delete) REST API using PHP/MySql and integrate it with AngularJS Single Page Application. So, you have to just follow this step by step angularJS crud application tutorial to create a fully functional angularjs blog application.

Projects Directory Structure :-

angularjs-crud-php-mysql-rest-api-webservices-1

Create Database Table and Configuration File

Step 1:- Create DB and Posts Table

In this step we will create a database and posts table in it. I have created a database with name “crudone” and created a “posts” table inside in it. So you also need to create a database with name of your choice and put “posts” table in it. You can create “posts” table using the mysql query given as following –

Step 2:- Create DB Config file

Now, we will create a database configuration file to hold database credentials and database connection. Let’s create db_config.php file in your project root directory and put the following code in it –

db_config.php

Step 3:- Create index.php file

Next, we will create index.php file in project root directory and put the following code in it –

index.php

Create PHP/MySql CRUD REST API

Now, after creating database and posts table in it we are ready to implement Restful CRUD (Create, Read, Update and Delete) API. We will create a separate api directory in our project folder to keep all API files in it like as below.

angularjs-crud-php-mysql-rest-api-webservices-2

now we will be creating separate files for each of the individual CRUD operation and put the given code accordingly.

api/add.php

This file holds the logic to add blog posts into the database.

api/edit.php

This file holds the logic to fetch and return a single blog post with given id for editing.

Recommended:-  How To Fix No application encryption key has been specified error In Laravel

api/update.php

This file holds the logic to update blog posts with given id into the database.

api/getData.php

This file holds the logic to fetch and return all blog posts from the database.

api/delete.php

This file holds the logic to delete a single blog post from the database.

Create AngularJS CRUD Appilication

Now, after done with all the backend Rest Api we are ready to create frontend AngularJS CRUD application. We will creating a separate app directory in our project’s root directory to keep all AngularJS files in it like as below.

angularjs-crud-php-mysql-rest-api-webservices-3

Create AngularJS Routing File

So first we will create a routes.js file inside app folder to hold all of the application routing logic. Let’s create routes.js file and put bellow code in it.

app/routes.js

Create AngularJS Controller File

Now we will create a AngularJS controller file “app/controller/PostController.js” to hold CRUD Operation logic. We will create a separate controller directory in app folder and create PostController.js file in it and put the following code in it.

app/controller/PostController.js

Create AngularJS Helper File

Now we will create a AngularJS Helper file app/helper/myHelper.js to hold all helper function . We will create a separate helper directory in app folder to hold all helper functions in it. Let’s create myHelper.js file in “app/helper/” directory and put the following code in it.

Recommended:-  Laravel 5.8 Ajax CRUD Using Datatables

app/helper/myHelper.js

Create AngularJS Template File

Finally we will create a template file. In AngularJS when we visit any angularjs route then it will output using one of the angularjs template file. We will create a separate template directory in app folder to hold all the project template files in it. Here we will create posts.html file in it and put the code given below for all the CRUD Operations.

templates/posts.html

Start Application

Lets start the application and visit it to see following output –

Recommended:-  Laravel Clear App Cache

Output :-

angularjs-crud-php-mysql-rest-api-webservices-4

Create Post –

angularjs-crud-php-mysql-rest-api-webservices-5

List Posts –

angularjs-crud-php-mysql-rest-api-webservices-6

Edit Post –

angularjs-crud-php-mysql-rest-api-webservices-7

Update Post –

angularjs-crud-php-mysql-rest-api-webservices-8

Delete Post –

angularjs-crud-php-mysql-rest-api-webservices-9

In this tutorial we have learn about the AngularJS CRUD With Php MySql REST API or Webservice Example and its application with practical example. I hope you will like this tutorial.