Angular JS CRUD Application With PHP Core Web API and MySQL Database

In this, tutorial, we are going to create a simple CRUD based Web API using Angular JS as middleware and PHP Core for backend service. This tutorial here aims at explaining how to create AngularJS application utilizing PHP Web Services and MySQL Database. We may skip the basic concept of AngularJS which is not part of this tutorial but you can get those concepts from the official documentation of Angular JS. We may skip the basic concept of AngularJS which is not part of this tutorial but you can get those concepts from the official documentation of AngularJS.

Database:

After starting Apache and MySQL ports from XAMPP or any other local server deployment application, first of all we need to create a database called “api” in phpmyadmin and create a table named “tbl_users” under the database with four attributes, ‘u_id‘, ‘u_name‘, ‘u_age‘, ‘u_phone‘, you can do that by using the Graphical User Interface (GUI) or running the following script:

Backend API:

Once the database is done, let’s move towards setting up your back end. We will create the Web API project in Visual Studio Code or any Text Editor of your choice and steps are pretty simple:

Step 1:

Open the location where your local server application like XAMPP/WAP is installed and go to directory called “C/xampp/htdocs“, this is the default server configuration of mine, you might have your own so you can navigate to your respective folder and create a directory named “api“. Boo yeah, you have created the folder. Time to connect the database in your app. A small reminder, your link will be like C/xampp/htdocs/api.

Step 2:

Now, start VS Code and open the folder you just created. Create a file including a connection to the database. Create a file named “connection.php”.

Step 3:

Try running the connection.php file in the browser by typing “localhost/api/connection.php” as the URL, if it returns “Connection Established you are good to continue.

Step 4:

Now create “insert.php” file and write the following code mentioned below. This file will be responsible for carrying out and handling the Request and Response system in the API whenever we insert data.

Step 5:

Now create the “update.php” file and write the following code mentioned below. This file will be responsible for carrying out and handling the Request and Response system in the API whenever we update data.

Step 6:

Now create the “select.php” file and write the following code mentioned below. This file will be responsible for carrying out and handling the Request and Response system in the API whenever we select data.

Step 7:

Now create the “select.php” file and write the following code mentioned below. This file will be responsible for carrying out and handling the Request and Response system in the API whenever we select data.

We know from the name of the files that they are performing a specific function, but if we use them, what will be point of using an API, to create a front end, it will be a singular HTML file, yes an HTML file, because that is the point of our API, it is sending request to the server which is responding us with some result. This file is basically the visual interface for our API since all the above files are the backend.

Frontend Framework

Create a “home.html” file and write the following code as shown below.

On line 73 and forward of home.html basically, what we are doing is naming the angular module with the name “myApp” and defining it’s controller as “myCont“. Dependencies which we used are “$scope” (the glue between application controller and the view) and insert, update, select and delete files.

Then we create delete, insert, edit and retrieve methods which will be called from our view (home.html) to our controllers, the respective php files for each function by sending a request as seen with $http.post(“<controllers>.php”).

Basically, the point of this file is Angular JS sending a request to the server, the Angular code and callback functions are point to the specific pages where the request is being sent using a specific code block. This is what is the cause behind our HTML page inserting, updating, deleting and fetching the data on the webserver. And there guys, we have our code completed. Try running you API with going to the browser and posting the following URL, “localhost/api/home.html” and boo yeah, you have a working API. with complete CRUD (Create, Read, Update and Delete) function.

NOTE:

You will have to enter the first port number that you see under the Ports section of XAMPP. I have 80 so I do not have to pass it in my URL, if you have 81, 90 or 8080, you will have to enter your port after “localhost:<your-port>/api/home.html“.

4 thoughts on “Angular JS CRUD Application With PHP Core Web API and MySQL Database”

Leave a Reply

Your email address will not be published. Required fields are marked *